|
|
@@ -2,29 +2,23 @@
|
|
|
<view class="container">
|
|
|
<uv-navbar title="商品详情" placeholder @leftClick="goBack"></uv-navbar>
|
|
|
<view class="swiperBox">
|
|
|
- <uv-swiper
|
|
|
- :list="details.images"
|
|
|
- height="100vw"
|
|
|
- indicator
|
|
|
- indicatorMode="dot"
|
|
|
- ></uv-swiper>
|
|
|
+ <uv-swiper :list="details.images" height="100vw" indicator indicatorMode="dot"></uv-swiper>
|
|
|
</view>
|
|
|
<view class="priceBox">
|
|
|
<view class="priceBox_l" v-if="details.productPaymentMode == 1">
|
|
|
<!-- <text class="iconfont2"></text> -->
|
|
|
- <text>{{ details.minPoints }}</text>
|
|
|
- +
|
|
|
- <view>
|
|
|
- <rich-text
|
|
|
- :nodes="$mUtil.priceBigSmallTwo(details.minSalePrice)"
|
|
|
- ></rich-text>
|
|
|
- </view>
|
|
|
+ <text>{{ details.minPoints }}积分</text>
|
|
|
+ <template v-if="details.minSalePrice && details.minSalePrice * 1">
|
|
|
+ +
|
|
|
+ <view>
|
|
|
+ <rich-text :nodes="$mUtil.priceBigSmallTwo(details.minSalePrice)"></rich-text>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
</view>
|
|
|
<view class="priceBox_l" v-if="details.productPaymentMode == 0">
|
|
|
<view>
|
|
|
- <rich-text
|
|
|
- :nodes="$mUtil.priceBigSmallTwo(details.minSalePrice)"
|
|
|
- ></rich-text>
|
|
|
+ <rich-text :nodes="$mUtil.priceBigSmallTwo(details.minSalePrice)"></rich-text>
|
|
|
<!-- <rich-text :nodes="$mUtil.priceBigSmall('100')"></rich-text> -->
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -46,12 +40,8 @@
|
|
|
件
|
|
|
</view>
|
|
|
<view class="titleBox_b_r">
|
|
|
- <view @click="collect" v-if="!collectStatus" class="iconfont"
|
|
|
- ></view
|
|
|
- >
|
|
|
- <view @click="collect" v-else class="iconfont collectionActive"
|
|
|
- ></view
|
|
|
- >
|
|
|
+ <view @click="collect" v-if="!collectStatus" class="iconfont"></view>
|
|
|
+ <view @click="collect" v-else class="iconfont collectionActive"></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -66,9 +56,7 @@
|
|
|
shopDetails.businessName
|
|
|
}}</view>
|
|
|
<view class="shopBox_l_content_address uv-line-2">
|
|
|
- <text class="iconfont" style="color: #fa6138" @click.stop="goLocal"
|
|
|
- ></text
|
|
|
- >
|
|
|
+ <text class="iconfont" style="color: #fa6138" @click.stop="goLocal"></text>
|
|
|
{{ shopDetails.address }}
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -79,14 +67,9 @@
|
|
|
</view>
|
|
|
<uv-sticky :offsetTop="tabTop" z-index="100">
|
|
|
<view class="tab">
|
|
|
- <view @tap="change(0)" :class="{ active: isChecked == 0 }"
|
|
|
- >商品详情</view
|
|
|
- >
|
|
|
- <view @tap="change(1)" :class="{ active: isChecked == 1 }"
|
|
|
- >用户评论<span v-if="commentTotal > 0"
|
|
|
- >({{ commentTotal }})</span
|
|
|
- ></view
|
|
|
- >
|
|
|
+ <view @tap="change(0)" :class="{ active: isChecked == 0 }">商品详情</view>
|
|
|
+ <view @tap="change(1)" :class="{ active: isChecked == 1 }">用户评论<span v-if="commentTotal > 0">({{ commentTotal
|
|
|
+ }})</span></view>
|
|
|
</view>
|
|
|
</uv-sticky>
|
|
|
<view v-if="isChecked == 0">
|
|
|
@@ -100,11 +83,7 @@
|
|
|
</view>
|
|
|
|
|
|
<view class="btnBox">
|
|
|
- <view class="btnBox_l">
|
|
|
- <!-- <button open-type="share" class="btnBox_l_share">
|
|
|
- <view class="iconfont"></view>
|
|
|
- <view class="btnBox_l_text">分享</view>
|
|
|
- </button> -->
|
|
|
+ <view class="btnBox_l" v-if="details.productPaymentMode == 0">
|
|
|
<view class="btnBox_l_chat" @click="goChat">
|
|
|
<image :src="$handleImageUrl('/kefu.png')" mode="aspectFill"></image>
|
|
|
<view class="btnBox_l_text">客服</view>
|
|
|
@@ -117,28 +96,16 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<!--普通商品-->
|
|
|
- <view class="btnBox_r">
|
|
|
- <button
|
|
|
- class="btnBox_r_car"
|
|
|
- v-if="details.productPaymentMode != 1"
|
|
|
- @click="buy(0)"
|
|
|
- >
|
|
|
+ <view class="btnBox_r" :class="{btnBox_r_margin: details.productPaymentMode == 1}">
|
|
|
+ <button class="btnBox_r_car" v-if="details.productPaymentMode != 1" @click="buy(0)">
|
|
|
加入购物车
|
|
|
</button>
|
|
|
- <button
|
|
|
- v-if="details.productPaymentMode != 1"
|
|
|
- class="btnBox_r_buy"
|
|
|
- :class="{ btnBox_r_buy_active: details.productPaymentMode == 1 }"
|
|
|
- @click="buy(1)"
|
|
|
- >
|
|
|
+ <button v-if="details.productPaymentMode != 1" class="btnBox_r_buy"
|
|
|
+ :class="{ btnBox_r_buy_active: details.productPaymentMode == 1 }" @click="buy(1)">
|
|
|
立即购买
|
|
|
</button>
|
|
|
- <button
|
|
|
- v-if="details.productPaymentMode == 1"
|
|
|
- class="btnBox_r_buy"
|
|
|
- :class="{ btnBox_r_buy_active: details.productPaymentMode == 1 }"
|
|
|
- @click="buy(2)"
|
|
|
- >
|
|
|
+ <button v-if="details.productPaymentMode == 1" class="btnBox_r_buy"
|
|
|
+ :class="{ btnBox_r_buy_active: details.productPaymentMode == 1 }" @click="buy(2)">
|
|
|
立即兑换
|
|
|
</button>
|
|
|
</view>
|
|
|
@@ -358,10 +325,12 @@ const goChat = () => {
|
|
|
.container {
|
|
|
padding-bottom: 150rpx;
|
|
|
}
|
|
|
+
|
|
|
.swiperBox {
|
|
|
width: 100%;
|
|
|
height: 100vw;
|
|
|
}
|
|
|
+
|
|
|
.priceBox {
|
|
|
padding: 24rpx;
|
|
|
display: flex;
|
|
|
@@ -369,22 +338,27 @@ const goChat = () => {
|
|
|
background: #fa6138;
|
|
|
color: #fff;
|
|
|
font-size: 36rpx;
|
|
|
+
|
|
|
.iconfont2 {
|
|
|
font-size: 50rpx;
|
|
|
vertical-align: bottom;
|
|
|
}
|
|
|
+
|
|
|
.discount {
|
|
|
margin-left: 20rpx;
|
|
|
font-size: 24rpx;
|
|
|
text-decoration: line-through;
|
|
|
}
|
|
|
+
|
|
|
.priceBox_l {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.titleBox {
|
|
|
padding: 8rpx 30rpx 40rpx;
|
|
|
+
|
|
|
.titleBox_t {
|
|
|
.tipsStatus {
|
|
|
display: inline-block;
|
|
|
@@ -397,29 +371,35 @@ const goChat = () => {
|
|
|
color: #fff;
|
|
|
font-size: 20rpx;
|
|
|
}
|
|
|
- > text {
|
|
|
+
|
|
|
+ >text {
|
|
|
font-size: 34rpx;
|
|
|
font-weight: bold;
|
|
|
color: #1a1a1a;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.titleBox_b {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
+
|
|
|
.titleBox_b_l {
|
|
|
font-size: 24rpx;
|
|
|
margin-top: 15rpx;
|
|
|
color: #999999;
|
|
|
+
|
|
|
text {
|
|
|
color: #ff6600;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.titleBox_b_r {
|
|
|
.iconfont {
|
|
|
font-size: 40rpx;
|
|
|
color: #999;
|
|
|
}
|
|
|
+
|
|
|
.collectionActive {
|
|
|
color: #ff0000;
|
|
|
// -webkit-transform: scale(1.2);
|
|
|
@@ -428,6 +408,7 @@ const goChat = () => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.shopBox {
|
|
|
border-top: 10rpx solid #f5f5f5;
|
|
|
border-bottom: 10rpx solid #f5f5f5;
|
|
|
@@ -435,21 +416,25 @@ const goChat = () => {
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
padding: 35rpx 30rpx;
|
|
|
+
|
|
|
.shopBox_l {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+
|
|
|
image {
|
|
|
width: 104rpx;
|
|
|
height: 104rpx;
|
|
|
border-radius: 50%;
|
|
|
margin-right: 25rpx;
|
|
|
}
|
|
|
+
|
|
|
.shopBox_l_content {
|
|
|
.shopBox_l_content_name {
|
|
|
font-size: 28rpx;
|
|
|
color: #1a1a1a;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
+
|
|
|
.shopBox_l_content_address {
|
|
|
font-size: 24rpx;
|
|
|
color: #999;
|
|
|
@@ -458,6 +443,7 @@ const goChat = () => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.tab {
|
|
|
position: sticky;
|
|
|
top: 0;
|
|
|
@@ -469,9 +455,11 @@ const goChat = () => {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-around;
|
|
|
- > view {
|
|
|
+
|
|
|
+ >view {
|
|
|
padding-bottom: 30rpx;
|
|
|
position: relative;
|
|
|
+
|
|
|
&::before {
|
|
|
content: "";
|
|
|
position: absolute;
|
|
|
@@ -483,16 +471,19 @@ const goChat = () => {
|
|
|
background: #fa6138;
|
|
|
transition: all 0.3s;
|
|
|
}
|
|
|
+
|
|
|
&.active {
|
|
|
font-size: 30rpx;
|
|
|
color: #fa6138;
|
|
|
font-weight: 700;
|
|
|
+
|
|
|
&::before {
|
|
|
width: 100%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.btnBox {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
@@ -505,32 +496,38 @@ const goChat = () => {
|
|
|
border-top: 1rpx solid #e6e6e6;
|
|
|
background: #fff;
|
|
|
box-sizing: border-box;
|
|
|
+
|
|
|
.btnBox_l {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
height: 84rpx;
|
|
|
- > view,
|
|
|
- > button {
|
|
|
+
|
|
|
+ >view,
|
|
|
+ >button {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: flex-end;
|
|
|
height: 84rpx;
|
|
|
line-height: 42rpx;
|
|
|
margin-right: 20rpx;
|
|
|
+
|
|
|
.iconfont {
|
|
|
color: #999;
|
|
|
font-size: 40rpx;
|
|
|
}
|
|
|
+
|
|
|
.btnBox_l_text {
|
|
|
color: #1a1a1a;
|
|
|
font-size: 28rpx;
|
|
|
}
|
|
|
+
|
|
|
image {
|
|
|
width: 40rpx;
|
|
|
height: 40rpx;
|
|
|
margin: 0 auto;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
// .btnBox_l_chat {
|
|
|
// }
|
|
|
.btnBox_l_cart {
|
|
|
@@ -538,9 +535,13 @@ const goChat = () => {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
}
|
|
|
+ .btnBox_r_margin {
|
|
|
+ margin: auto;
|
|
|
+ }
|
|
|
.btnBox_r {
|
|
|
display: flex;
|
|
|
- > button {
|
|
|
+
|
|
|
+ >button {
|
|
|
width: 200rpx;
|
|
|
height: 85rpx;
|
|
|
line-height: 85rpx;
|
|
|
@@ -549,18 +550,22 @@ const goChat = () => {
|
|
|
border-radius: 40rpx;
|
|
|
font-size: 30rpx;
|
|
|
}
|
|
|
+
|
|
|
.btnBox_r_car {
|
|
|
background: #ff9651;
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
+
|
|
|
.btnBox_r_buy {
|
|
|
background: #fa6138;
|
|
|
}
|
|
|
+
|
|
|
.btnBox_r_buy.btnBox_r_buy_active {
|
|
|
width: 400rpx !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
button {
|
|
|
border: none;
|
|
|
padding: 0;
|
|
|
@@ -568,6 +573,7 @@ button {
|
|
|
background-color: transparent;
|
|
|
background: transparent;
|
|
|
}
|
|
|
+
|
|
|
button::after {
|
|
|
border: none;
|
|
|
}
|
|
|
@@ -576,6 +582,7 @@ button::after {
|
|
|
padding: 20rpx;
|
|
|
min-height: 50vh;
|
|
|
}
|
|
|
+
|
|
|
.commentBox {
|
|
|
min-height: 50vh;
|
|
|
}
|