bbnv1
/
test
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

1

master
jiazhipeng 8 months ago
parent
213d666841
commit
94fdca9d82
3 changed files with 165 additions and 67 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      pages/info/postProductInfo/index.js
  2. 54
      pages/info/postProductInfo/index.wxml
  3. 172
      pages/info/postProductInfo/index.wxss

6
pages/info/postProductInfo/index.js
View File

@ -751,6 +751,12 @@ Page({
}) })
console.log(e, this.data.swiperCurrent) console.log(e, this.data.swiperCurrent)
}, },
changeSwiperCurrent (e) {
let index = e.currentTarget.dataset.index
this.setData({
swiperCurrent: index
})
},
/** /**
* 生命周期函数--监听页面初次渲染完成 * 生命周期函数--监听页面初次渲染完成

54
pages/info/postProductInfo/index.wxml
View File

@ -3,7 +3,7 @@
<title title="产品详情"></title> <title title="产品详情"></title>
<view class="iconfont icon-fenxiang" bindtap="share"></view> <view class="iconfont icon-fenxiang" bindtap="share"></view>
<view class="swiper-bottom" wx:if="{{info}}"> <view class="swiper-bottom" wx:if="{{info}}">
<view class="swiper-bottom-item active">1/2</view> <view class="swiper-bottom-item active">{{swiperCurrent+1}}/{{swiperRange.sku.max+1}}</view>
<view class="swiper-bottom-item {{(swiperCurrent>=swiperRange.video.min&&swiperCurrent<=swiperRange.video.max)?'active':''}}" wx:if="{{info.videourl}}">视频</view> <view class="swiper-bottom-item {{(swiperCurrent>=swiperRange.video.min&&swiperCurrent<=swiperRange.video.max)?'active':''}}" wx:if="{{info.videourl}}">视频</view>
<view class="swiper-bottom-item {{(swiperCurrent>=swiperRange.picture.min&&swiperCurrent<=swiperRange.picture.max)?'active':''}}">图片</view> <view class="swiper-bottom-item {{(swiperCurrent>=swiperRange.picture.min&&swiperCurrent<=swiperRange.picture.max)?'active':''}}">图片</view>
<view class="swiper-bottom-item {{(swiperCurrent>=swiperRange.sku.min&&swiperCurrent<=swiperRange.sku.max)?'active':''}}">款式</view> <view class="swiper-bottom-item {{(swiperCurrent>=swiperRange.sku.min&&swiperCurrent<=swiperRange.sku.max)?'active':''}}">款式</view>
@ -29,7 +29,9 @@
<block wx:for="{{info.sku}}" wx:key="*this"> <block wx:for="{{info.sku}}" wx:key="*this">
<swiper-item style="position: relative;"> <swiper-item style="position: relative;">
<image src="{{item.headimg}}" mode="aspectFill"></image> <image src="{{item.headimg}}" mode="aspectFill"></image>
<view class="sku-tips textOver">{{item.sku_name}}</view> <view class="sku-tips ">
<view class="textOver">{{item.sku_name}}</view>
</view>
</swiper-item> </swiper-item>
</block> </block>
</swiper> </swiper>
@ -48,10 +50,13 @@
</view> </view>
<view style="padding: 20rpx 20rpx 20rpx 26rpx;"> <view style="padding: 20rpx 20rpx 20rpx 26rpx;">
<view class="select-img"> <view class="select-img">
<image style="flex-shrink: 0;" src="{{info.headimg}}"></image> <image class="{{(swiperCurrent>=swiperRange.picture.min&&swiperCurrent<=swiperRange.picture.max)?'active':''}}"
style="flex-shrink: 0;" src="{{info.headimg}}" bind:tap="changeSwiperCurrent" data-index="{{swiperRange.picture.min}}"></image>
<text style="flex-shrink: 0;" class="select-img-text">款式选择</text> <text style="flex-shrink: 0;" class="select-img-text">款式选择</text>
<view class="other-imgs no-scrollbar"> <view class="other-imgs no-scrollbar">
<image wx:for="{{info.sku}}" wx:key="index" src="{{item.headimg}}"></image> <image wx:for="{{info.sku}}" wx:key="index" bind:tap="changeSwiperCurrent" data-index="{{swiperRange.picture.max+1+index}}"
class="{{item.flag!='on'?'no-stock':''}} {{swiperCurrent==swiperRange.picture.max+1+index?'active':''}}"
src="{{item.headimg}}"></image>
</view> </view>
<view class="select-sku">></view> <view class="select-sku">></view>
@ -106,7 +111,6 @@
<text style="font-weight: bold;">买家评价</text> <text style="font-weight: bold;">买家评价</text>
<text class="score" wx:if="{{info && info.rate && commentTotal>0}}">{{info.rate}}分</text> <text class="score" wx:if="{{info && info.rate && commentTotal>0}}">{{info.rate}}分</text>
<text wx:else class="no-comment">暂无评价</text> <text wx:else class="no-comment">暂无评价</text>
<navigator url="/pages/list/comments/index?productid={{id}}" style="display: inline;"> <navigator url="/pages/list/comments/index?productid={{id}}" style="display: inline;">
<text class="all-comment-num">共{{commentTotal}}条 <text style="font-family: fangsong;color: #000;">></text></text> <text class="all-comment-num">共{{commentTotal}}条 <text style="font-family: fangsong;color: #000;">></text></text>
</navigator> </navigator>
@ -115,6 +119,7 @@
<view>这里空空如也，快去点评吧!</view> <view>这里空空如也，快去点评吧!</view>
<navigator url="/pages/ask/index?id={{id}}" class="empty-btn">去点评</navigator> <navigator url="/pages/ask/index?id={{id}}" class="empty-btn">去点评</navigator>
</view> --> </view> -->
<view style="width: 100%;padding: 0 26rpx;box-sizing: border-box;">
<navigator wx:for="{{comment}}" wx:key="index" wx:for-index="index" url="/pages/list/comments/index?productid={{id}}&&index={{index}}" class="product-comment"> <navigator wx:for="{{comment}}" wx:key="index" wx:for-index="index" url="/pages/list/comments/index?productid={{id}}&&index={{index}}" class="product-comment">
<view class="product-comment-top"> <view class="product-comment-top">
<image class="avator-img" src="{{item.user.avatar}}" mode="aspectFill"></image> <image class="avator-img" src="{{item.user.avatar}}" mode="aspectFill"></image>
@ -144,9 +149,15 @@
<!-- <view class="sku" wx:if="{{item.sku_name}}">{{item.sku_name}}</view> --> <!-- <view class="sku" wx:if="{{item.sku_name}}">{{item.sku_name}}</view> -->
</navigator> </navigator>
</view>
<!-- <navigator url="/pages/list/comments/index?productid={{id}}" wx:if="{{comment.length>0}}" class="more-comment-btn"> <!-- <navigator url="/pages/list/comments/index?productid={{id}}" wx:if="{{comment.length>0}}" class="more-comment-btn">
查看全部点评<text class="iconfont icon-you"></text></navigator> --> 查看全部点评<text class="iconfont icon-you"></text></navigator> -->
</view>
<view class="shop-container" wx:if="{{iShop}}">
<image class="shop-img" src="{{info.supplier_name}}"></image>
<view class="textOver2">{{info.supplier_name}}</view>
<navigator class="shop-btn" url="/pages/list/store/index?id={{supplierId}}">进店</navigator>
</view> </view>
<view class="scroll-all-box" id="menus" wx:if="{{info}}"> <view class="scroll-all-box" id="menus" wx:if="{{info}}">
@ -229,22 +240,33 @@
<view class="sku-info-box"> <view class="sku-info-box">
<image id="skuImg" src="{{info.sku[skuIndex].headimg}}" mode="aspectFill"></image> <image id="skuImg" src="{{info.sku[skuIndex].headimg}}" mode="aspectFill"></image>
<view class="sku-info"> <view class="sku-info">
<view class="sku-price">{{info.sku[skuIndex].price/100}} <view>
<view class="allowance" wx:if="{{allowance_data}}"> <view class="sku-price">{{info.sku[skuIndex].price/100}}
补贴价：￥{{ (1 - allowance_data.discount_rate / 100) * info.sku[skuIndex].price / 100 }}</view> <!-- <view class="allowance" wx:if="{{allowance_data}}">
补贴价：￥{{ (1 - allowance_data.discount_rate / 100) * info.sku[skuIndex].price / 100 }}</view> -->
</view>
<view class="sku-name">已选择：{{info.sku[skuIndex].sku_name}}</view>
</view>
<view style="display: flex;align-items: center;">
<view class="number-box">
<view class="iconfont icon-sami-select" bindtap="minus"></view>
<view class="number">{{producNum}}</view>
<view class="iconfont icon-add-select" bindtap="add"></view>
</view>
<view class="limit-number" wx:if="{{info.sku[skuIndex].sku_model.traveller_limit_num>0}}">限购5件</view>
</view> </view>
<view class="sku-name">已选择：{{info.sku[skuIndex].sku_name}}</view>
</view> </view>
</view> </view>
<view style="font-weight: bold;font-size: 33rpx;color: #060001;margin:0rpx 25rpx 27rpx">产品分类（{{info.sku.length}}）</view>
<view class="sku-names"> <view class="sku-names">
<view bindtap="selectSku" data-index="{{index}}" class="sku-name-item textOver{{index==skuIndex?' active':''}}" wx:for="{{info.sku}}">{{item.sku_name}}</view> <view bindtap="selectSku" data-index="{{index}}" class="sku-name-item {{index==skuIndex?' active':''}}"
</view> wx:for="{{info.sku}}">
<view class="number-box"> <image src="{{item.headimg}}"></image>
<text>数量</text> <view class="sku-name textOver">{{item.sku_name}}</view>
<view class="iconfont icon-sami-select" bindtap="minus"></view> </view>
<view class="number">{{producNum}}</view>
<view class="iconfont icon-add-select" bindtap="add"></view>
</view> </view>
<view style="height:138rpx"></view> <view style="height:138rpx"></view>
<view class="btn-box"> <view class="btn-box">
<view class="mask-btn" bindtap="order" wx:if="{{info.sku[skuIndex].flag=='on'}}">{{skuFlag=='cart'?'确认':'立即购买'}} <view class="mask-btn" bindtap="order" wx:if="{{info.sku[skuIndex].flag=='on'}}">{{skuFlag=='cart'?'确认':'立即购买'}}

172
pages/info/postProductInfo/index.wxss
View File

@ -210,7 +210,6 @@ page {
} }
.comment-box{ .comment-box{
background: #fff; background: #fff;
padding: 0 20rpx;
margin: 20rpx 0; margin: 20rpx 0;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -227,7 +226,7 @@ page {
border-bottom: 1rpx solid #d9d9d9; border-bottom: 1rpx solid #d9d9d9;
font-weight: 500; font-weight: 500;
color: #000; color: #000;
font-size: 35rpx; font-size: 33rpx;
padding: 0 20rpx; padding: 0 20rpx;
background: #fff; background: #fff;
border-radius: 13rpx 13rpx 0 0; border-radius: 13rpx 13rpx 0 0;
@ -271,8 +270,10 @@ page {
/* margin: 0 20rpx; */ /* margin: 0 20rpx; */
border-bottom: 1rpx solid #ccc; border-bottom: 1rpx solid #ccc;
/* padding: 33rpx 0; */ /* padding: 33rpx 0; */
padding: 28rpx 20rpx; padding: 28rpx 0rpx;
background: #fff; background: #fff;
width: 100%;
box-sizing: border-box;
} }
.product-comment:last-of-type{ .product-comment:last-of-type{
border-bottom: none; border-bottom: none;
@ -319,7 +320,7 @@ page {
.comment-content { .comment-content {
width: 100%; width: 100%;
padding-top: 12rpx; padding-top: 12rpx;
font-size: 28rpx; font-size: 27rpx;
color: #000; color: #000;
font-weight: 500; font-weight: 500;
} }
@ -470,38 +471,38 @@ page {
} }
.sku-info-box { .sku-info-box {
margin: 50rpx 40rpx; margin: 50rpx 25rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.sku-info-box image { .sku-info-box image {
width: 218rpx; width: 173rpx;
height: 180rpx; height: 173rpx;
border-radius: 13rpx; border-radius: 13rpx;
display: block; display: block;
margin-right: 40rpx; margin-right: 15rpx;
flex-shrink: 0; flex-shrink: 0;
} }
.sku-info { .sku-info {
flex: 1; flex: 1;
width: 100rpx;
height: 173rpx;
display: flex;
flex-direction: column;
justify-content: space-between;
} }
.sku-price { .sku-price {
font-size: 40rpx; font-size: 40rpx;
font-weight: 500; font-weight: bold;
color: #D62828; color: #F84A56;
margin: 20rpx 0;
display: flex;
justify-content: flex-start;
align-items: center;
} }
.sku-price::before { .sku-price::before {
content: "￥"; content: "￥";
font-weight: 400; font-size: 24rpx;
font-size: 27rpx;
vertical-align: baseline; vertical-align: baseline;
} }
@ -522,45 +523,63 @@ page {
.sku-names { .sku-names {
display: flex; display: flex;
font-size: 29rpx; font-weight: 500;
color: #333; font-size: 27rpx;
margin: 0 40rpx; color: #333333;
text-align: center; margin: 0 25rpx;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 20rpx; margin-bottom: 20rpx;
justify-content: space-between; justify-content: space-between;
max-height: 800rpx;
min-height: 400rpx;
align-content: flex-start;
} }
.sku-name-item { .sku-name-item {
background: #EFEFEF; height: 67rpx;
border: 1rpx solid #EFEFEF; border-radius: 13rpx;
/* width: 318rpx; */ margin-bottom: 34rpx;
line-height: 77rpx;
border-radius: 14rpx;
margin-bottom: 25rpx;
margin-right: 30rpx;
max-width: 100%; max-width: 100%;
padding: 0 15rpx; padding-right:15rpx;
min-width: 270rpx; min-width: 340rpx;
background: #EFEFEF;
display: flex;
align-items: center;
box-sizing: border-box;
} }
.sku-name-item>image{
.sku-name-item:nth-child(2n) { width: 67rpx;
margin-right: 0; height: 67rpx;
border-radius: 13rpx;
flex-shrink: 0;
}
.sku-name-item .sku-name{
flex:1;
width: 100rpx;
padding-left: 15rpx;
color: #333;
} }
.sku-name-item.active { .sku-name-item.active{
color: #0B898E; color: #0B898E;
border-color: #0B898E; border: 1px solid #0B898E;
background: rgba(11, 137, 142, 0.1); background: rgba(11, 137, 142, 0.1);
} }
.sku-name-item.active .sku-name{
color: #0B898E;
}
.number-box { .number-box {
display: flex; display: flex;
align-items: center; align-items: center;
border-top: 1rpx solid #ccc;
justify-content: space-between; justify-content: space-between;
margin: 0 40rpx; background: #EFEFEF;
padding: 40rpx 0; border-radius: 13rpx;
padding: 10rpx 0;
box-sizing: border-box;
height: 53rpx;
width: 250rpx;
} }
.number-box text { .number-box text {
@ -570,23 +589,21 @@ page {
} }
.number-box view { .number-box view {
border: 1rpx solid #666;
border-radius: 7rpx;
text-align: center; text-align: center;
width: 67rpx; width: 80rpx;
line-height: 67rpx; height: 33rpx;
font-size: 33rpx; line-height: 33rpx;
font-size: 31rpx;
color: #000; color: #000;
} }
.number-box view.disable {
border-color: #ccc;
color: #999;
}
.number-box view.number { .number-box view.number {
width: 94rpx; width: 94rpx;
margin: 0 15rpx; border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.limit-number{
font-weight: 500;font-size: 27rpx;color: #666666;padding-left:20rpx;
} }
.btn-box { .btn-box {
@ -1062,6 +1079,14 @@ height: 133rpx;
border-radius: 13rpx; border-radius: 13rpx;
margin-right:20rpx; margin-right:20rpx;
flex-shrink: 0; flex-shrink: 0;
box-sizing: border-box;
}
.select-img image.active{
border: 2px solid #DC2525;
}
.select-img image.no-stock{
border: none;
opacity: 0.5;
} }
.select-img .select-img-text{ .select-img .select-img-text{
font-weight: bold; font-weight: bold;
@ -1092,6 +1117,15 @@ height: 133rpx;
color: #999; color: #999;
} }
.sku-tips{ .sku-tips{
width: 100%;
position: absolute;
bottom: 73rpx;
left: 0;
right: 0;
display: flex;
justify-content: center;
}
.sku-tips>view{
width: fit-content; width: fit-content;
max-width: 533rpx; max-width: 533rpx;
height: 53rpx; height: 53rpx;
@ -1102,7 +1136,43 @@ height: 133rpx;
font-weight: 500; font-weight: 500;
font-size: 24rpx; font-size: 24rpx;
color: #FFFFFF; color: #FFFFFF;
position: absolute;
bottom: 73rpx;
margin: 0 auto; margin: 0 auto;
} }
.shop-container{
display: flex;
align-items: center;
margin-top: 20rpx;
padding: 32rpx 23rpx;
width: 100%;
background: white;
box-sizing: border-box;
}
.shop-container .shop-img{
width: 113rpx;
height: 113rpx;
flex-shrink: 0;
}
.shop-container .shop-btn{
width: 135rpx;
height: 57rpx;
border-radius: 13rpx;
border: 1px solid #0B898E;
font-weight: 500;
font-size: 31rpx;
color: #0B898E;
text-align: center;
line-height: 57rpx;
flex-shrink: 0;
}
.shop-container .textOver2{
flex: 1;
width: 100rpx;
padding: 0 50rpx 0 20rpx;
font-weight: bold;
font-size: 32rpx;
color: #010101;
}

Write Preview
Loading…
Cancel
Save