panxiaohe
/
ceres-uniapp-v2.0
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

收藏店铺信息界面调整修改

master
dy-hu 10 months ago
parent
0ce23425a0
commit
c1396df4e0
1 changed files with 121 additions and 63 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 184
      pages_category_page1/store/index.vue

184
pages_category_page1/store/index.vue
View File

@ -5,11 +5,11 @@
<!-- 店铺首页 -->
<view class="content" v-if="id">
<view class="shop-top" :style="{'padding-top': topHeight + 'px'}">
<image src="https://ceres.zkthink.com/static/images/back_img04.png" class="back" @click="back"></image>
<image src="https://wechat.hnthee.com/ceres-local-file/image/title_white_back.png" class="back" @click="back"></image>
<view class="search-btn" @click="searchPro">
<image class="search-icon" src="https://ceres.zkthink.com/static/img/searchImg.png" mode="widthFix">
<image class="search-icon" src="https://wechat.hnthee.com/ceres-local-file/image/shop_collect_search.png" mode="widthFix">
</image>
<text class="fs24 font-color-999 mar-left-10">{{$t('common.searchproduct_hint')}}</text>
<text class="search-word">{{$t('common.searchproduct_hint')}}</text>
</view>
</view>
<view class="stopInfo">
@ -44,13 +44,13 @@
<view class="distributorBox flex-items flex-sp-between" @click="applyForRecruit">
<view class="distributor">
<view class="flex-display flex-items">
<image class="item-btn-icon" src="https://ceres.zkthink.com/static/img/user/fenxiao2.png"
<image class="item-btn-icon" src="https://wechat.hnthee.com/ceres-local-file/image/shop_collect_distributor.png"
mode="widthFix"></image>
<view>{{$t('client.tobedistributor')}}</view>
<view class="fs28 font-color-252744">{{$t('client.tobedistributor')}}</view>
</view>
</view>
<view class="rightArrow">
<image src="https://ceres.zkthink.com/static/images/arrowRight.png"></image>
<image src="https://wechat.hnthee.com/ceres-local-file/image/icon_cart_shop_forward.png"></image>
</view>
</view>
</view>
@ -99,18 +99,18 @@
<view class="nav-item-sort" @click="sortTap(2)">
<text class="nav-title" :class="{'active' : sortIndex == 2}">{{$t('product.price')}}</text>
<view class="r">
<image src="https://ceres.zkthink.com/static/images/arrowSortUp.png"
<image src="https://wechat.hnthee.com/ceres-local-file/image/arrow_sort_up.png"
v-if="type == 1" class="arrow-img padd-t"></image>
<image src="https://ceres.zkthink.com/static/images/arrowSortDown.png"
<image src="https://wechat.hnthee.com/ceres-local-file/image/arrow_sort_down.png"
v-if="type == 2" class="arrow-img padd-b"></image>
</view>
</view>
<view class="nav-item-sort" @click="sortTap(3)">
<text class="nav-title" :class="{'active' : sortIndex == 3}">{{$t('common.synthesis')}}</text>
<view class="r">
<image src="https://ceres.zkthink.com/static/images/arrowSortUp.png"
<image src="https://wechat.hnthee.com/ceres-local-file/image/arrow_sort_up.png"
v-if="volume == 1" class="arrow-img padd-t"></image>
<image src="https://ceres.zkthink.com/static/images/arrowSortDown.png"
<image src="https://wechat.hnthee.com/ceres-local-file/image/arrow_sort_down.png"
v-if="volume == 2" class="arrow-img padd-b"></image>
</view>
</view>
@ -121,10 +121,13 @@
@click="goodsItemTap(cItem.productId,cItem.skuId)">
<image :src="cItem.image" class="product-img default-img"
onerror="this.src='url(https://wechat.hnthee.com/ceres-local-file/image/default.png) no-repeat center';this.οnerrοr=null"></image>
<image v-if="cItem.ifCollect === 1" class="collect-img" src="https://wechat.hnthee.com/ceres-local-file/image/shop_prod_collect_actvie.png" @click.stop="onCollect(cItem, 0)"/>
<image v-else class="collect-img" src="https://wechat.hnthee.com/ceres-local-file/image/shop_prod_collect_normal.png" @click.stop="onCollect(cItem, 1)"/>
<image class="cart-add-img" src="https://wechat.hnthee.com/ceres-local-file/image/shop_prod_addcart.png"/>
<view class="product-bottom-box">
<view class="product-name">{{cItem.productName}}</view>
<view class="product-num font-color-C5AA7B mar-top-10">已售{{cItem.number}}件
</view>
<!-- <view class="product-num font-color-C5AA7B mar-top-10">已售{{cItem.number}}件
</view>-->
<view class="product-price-box">
<image v-if="cItem.activityType===1" class="iconImg"
src="https://ceres.zkthink.com/static/images/groupBuyIcon.png"
@ -148,7 +151,7 @@
src="https://zk-cereshop.oss-cn-shenzhen.aliyuncs.com/zkthink/2022-02-15/d0d8d96f28904167b271de4ae924d1a8_sceneMarketing.png"
alt="场景营销"></image>
<text
class="price-box fs40 font-color-C83732 mar-right-20">￥{{cItem.price}}</text>
class="price-box fs28 font-color-252744 mar-right-10 fs-bold">￥{{cItem.price}}</text>
<text class="price-through">￥{{cItem.originalPrice}}</text>
</view>
</view>
@ -304,6 +307,7 @@
this.storeInfo = res.data;
this.total = res.data.page.total
this.storeInfolist = this.storeInfolist.concat(res.data.page.list)
console.log("this.storeInfolist--->", this.storeInfolist)
}).catch(res => {
uni.hideLoading()
uni.showToast({
@ -597,21 +601,41 @@
})
// #endif
},
//state：1收藏，0取消收藏
onCollect(item, state){
let _this = this;
if (state === 1){
NET.request(API.collect, {
productId: parseInt(item.productId)
}, 'POST').then(res => {
// item.ifCollect = 1;
_this.$set(item, 'ifCollect', 1);
uni.showToast({
title: this.$t('common.collectsuccess'),
icon: "success"
})
})
}else {
NET.request(API.cancelCollect, {
ids: [item.productId]
}, 'PUT').then(res => {
// item.ifCollect = 0;
_this.$set(item, 'ifCollect', 0);
uni.showToast({
title: this.$t('common.cancelcollectsuccess'),
icon: "success"
})
})
}
}
}
}
</script>
<style lang="scss" scoped>
page {
background: #F8F8F8;
}
</style>
<style lang='scss' scoped>
page {
background: #F8F8F8;
}
.shop-top {
background: #333333;
background: #252744;
display: flex;
align-items: center;
width: 100%;
@ -627,14 +651,16 @@
// #endif
.stopInfo {
padding: 200rpx 20rpx 20rpx 20rpx;
background: #F8F8F8;
padding: 125rpx 20rpx 20rpx 20rpx;
//background: red;
}
// 店铺头部
.shop-top-content {
padding: 10rpx 30rpx;
padding: 10rpx 28rpx;
background: #FFFFFF;
border-radius: 30rpx;
box-shadow: 0rpx 15rpx 30rpx 0rpx #F2F2F2;
display: flex;
align-items: center;
@ -659,12 +685,13 @@
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 32rpx;
color: #333333;
font-size: 30rpx;
font-weight: 400;
color: #252744;
.shop-num {
font-size: 26rpx;
color: #333333;
font-size: 24rpx;
color: #252744;
opacity: 0.7;
margin-top: 15rpx;
}
@ -692,7 +719,7 @@
display: flex;
width: 160rpx;
height: 60rpx;
background: #C83732;
background: #F54639;
opacity: 1;
border-radius: 46rpx;
align-items: center;
@ -705,7 +732,7 @@
}
.text {
font-size: 26rpx;
font-size: 24rpx;
color: #fff;
}
}
@ -714,13 +741,15 @@
.rightArrow {
image {
width: 18rpx;
width: 14rpx;
height: 24rpx;
}
}
.distributorBox {
background: #FFFFFF;
border-radius: 30rpx;
box-shadow: 0rpx 15rpx 30rpx 0rpx #F2F2F2;
margin-top: 20rpx;
height: 80rpx;
padding: 0 20rpx;
@ -749,7 +778,7 @@
display: inline-block;
margin-left: 60upx;
font-size: 28upx;
color: #999999;
color: #90919C;
position: relative;
padding-bottom: 18upx;
@ -761,15 +790,16 @@
&:after {
content: '';
width: 100%;
height: 4upx;
background: #C5AA7B;
height: 6rpx;
border-radius: 3rpx;
background: #252744;
position: absolute;
left: 0;
bottom: 0;
bottom: 4rpx;
}
font-weight:bold;
color: #333333;
color: #252744;
}
}
}
@ -796,28 +826,46 @@
height: 80rpx;
line-height: 76rpx;
background: #fff;
border-radius: 30rpx;
box-shadow: 0rpx 15rpx 30rpx 0rpx #F2F2F2;
}
}
.shop-list-box {
width: 100%;
background: #f7f7f7;
//background: #f7f7f7;
padding: 16rpx 20rpx 0;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
.item {
width: 49%;
width: 48%;
margin: 12rpx 0;
background: #d6d6d6;
border-radius: 10rpx;
display: flex;
flex-direction: column;
position: relative;
.collect-img {
width: 56rpx;
height: 56rpx;
position: absolute;
right: 12rpx;
top: 15rpx;
}
.cart-add-img {
width: 68rpx;
height: 68rpx;
position: absolute;
right: 10rpx;
bottom: 10rpx;
}
}
.item:nth-of-type(2n) {
margin-left: 2%;
margin-left: 4%;
margin-right: 0;
}
}
@ -870,7 +918,7 @@
.nav-item-sort {
flex: 1;
font-size: 24rpx;
color: #222;
color: #90919C;
display: flex;
flex-direction: row;
align-items: center;
@ -887,29 +935,32 @@
}
.r .arrow-img {
width: 32rpx;
height: 32rpx;
padding: 7rpx;
width: 20rpx;
height: 13rpx;
//padding: 1rpx;
margin-top: 4rpx;
margin-left: 3rpx;
box-sizing: border-box;
}
}
.product-img {
width: 347rpx;
height: 347rpx;
width: 100%;
height: 330rpx;
}
.product-bottom-box {
padding: 20rpx;
box-sizing: border-box;
background: #fff;
background: #FFFFFF;
}
.product-name {
display: block;
font-size: 28rpx;
color: #333;
color: #252744;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@ -944,7 +995,7 @@
.product-price-box .price-through {
text-decoration: line-through;
font-size: 24rpx;
color: #CCC;
color: #90919C;;
}
.shop-sort-list {
@ -998,9 +1049,9 @@
}
.back {
width: 50rpx;
height: 50rpx;
padding: 0 20rpx;
width: 20rpx;
height: 34rpx;
padding: 0 30rpx;
}
.empty-container {
@ -1027,7 +1078,8 @@
}
.active {
color: #ff7911;
color: #252744;
font-weight: bold;
}
@ -1038,9 +1090,9 @@
align-items: center;
.item-btn-icon {
width: 40upx;
height: 40upx;
margin-right: 10upx;
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
}
@ -1052,19 +1104,19 @@
align-items: center;
margin-right: 30rpx;
width: 428rpx;
border-radius: 40rpx;
background: rgba(255, 255, 255, 0.1);
.search-icon {
width: 44rpx;
height: 44rpx;
margin-left: 10rpx;
margin-top: 8rpx;
width: 32rpx;
height: 32rpx;
margin-left: 20rpx;
}
.search-word {
font-size: 26rpx;
font-size: 24rpx;
font-weight: 400;
color: rgba(153, 153, 153, 1);
color: #90919C;
margin-left: 10rpx;
}
}
@ -1112,3 +1164,9 @@
// #endif
</style>
<style>
page {
background: #FAFAFA;
}
</style>
Write Preview
Loading…
Cancel
Save