|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<view class="goodsDetail">
|
|
|
<view class="good-img-box">
|
|
|
- <image class="good-img" :src="info.goodsPath" ></image>
|
|
|
+ <image class="good-img" :src="info.goodsPath"></image>
|
|
|
</view>
|
|
|
<view class="goods-info">
|
|
|
<view class="price-box">
|
|
|
@@ -28,13 +28,8 @@
|
|
|
{{ item.specName }}
|
|
|
</view>
|
|
|
<view class="type-list">
|
|
|
- <view
|
|
|
- class="type-item"
|
|
|
- :class="[active == d ? 'active' : '']"
|
|
|
- v-for="(i, d) in item.specValues"
|
|
|
- @click="handleSpec(item, i, d)"
|
|
|
- :key="i.specId"
|
|
|
- >
|
|
|
+ <view class="type-item" :class="[active == d ? 'active' : '']" v-for="(i, d) in item.specValues"
|
|
|
+ @click="handleSpec(item, i, d)" :key="i.specId">
|
|
|
{{ i.specValue }}
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -59,18 +54,10 @@
|
|
|
</view> -->
|
|
|
|
|
|
<view class="tab-group">
|
|
|
- <view
|
|
|
- class="tab"
|
|
|
- :class="[tab == 1 ? 'active' : '']"
|
|
|
- @click="handleTab(1)"
|
|
|
- >
|
|
|
+ <view class="tab" :class="[tab == 1 ? 'active' : '']" @click="handleTab(1)">
|
|
|
商品详情
|
|
|
</view>
|
|
|
- <view
|
|
|
- class="tab"
|
|
|
- :class="[tab == 2 ? 'active' : '']"
|
|
|
- @click="handleTab(2)"
|
|
|
- >
|
|
|
+ <view class="tab" :class="[tab == 2 ? 'active' : '']" @click="handleTab(2)">
|
|
|
购买须知
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -106,11 +93,7 @@
|
|
|
</view>
|
|
|
</view> -->
|
|
|
|
|
|
- <view
|
|
|
- class="buy-btn"
|
|
|
- :class="[info.realStockNum ? '' : 'none']"
|
|
|
- @click="handleBuy"
|
|
|
- >
|
|
|
+ <view class="buy-btn" :class="[info.realStockNum ? '' : 'none']" @click="handleBuy">
|
|
|
<view class="label">
|
|
|
{{ info.realStockNum ? "购买" : "售罄" }}
|
|
|
</view>
|
|
|
@@ -136,6 +119,13 @@ export default {
|
|
|
shopInfo: {},
|
|
|
};
|
|
|
},
|
|
|
+ onShareTimeline() {
|
|
|
+ return {
|
|
|
+ title: this.info.goodsName,
|
|
|
+ query: `id=${this.info.goodsId}`,
|
|
|
+ imageUrl: this.info.goodsPath,
|
|
|
+ };
|
|
|
+ },
|
|
|
onShareAppMessage() {
|
|
|
return {
|
|
|
title: this.info.goodsName,
|
|
|
@@ -145,8 +135,8 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
filterMsg(val) {
|
|
|
- if(!isNaN(val)){
|
|
|
- val=val + "天";
|
|
|
+ if (!isNaN(val)) {
|
|
|
+ val = val + "天";
|
|
|
}
|
|
|
return val.replace(/\n/g, "<br>");
|
|
|
},
|
|
|
@@ -184,7 +174,7 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
- handleSpec(item,i,d){
|
|
|
+ handleSpec(item, i, d) {
|
|
|
this.active = d
|
|
|
},
|
|
|
detail(goodsId) {
|
|
|
@@ -242,37 +232,45 @@ export default {
|
|
|
background: #f9f9f9;
|
|
|
padding-bottom: 200rpx;
|
|
|
min-height: 100vh;
|
|
|
+
|
|
|
.good-img-box {
|
|
|
width: 100vw;
|
|
|
height: 100vw;
|
|
|
- .good-img{
|
|
|
+
|
|
|
+ .good-img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.goods-info {
|
|
|
padding: 24rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
background: #fff;
|
|
|
+
|
|
|
.price-box {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
+
|
|
|
.left {
|
|
|
display: flex;
|
|
|
align-items: flex-end;
|
|
|
+
|
|
|
.unit {
|
|
|
font-size: 20rpx;
|
|
|
line-height: 20rpx;
|
|
|
color: #ff4d3a;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
+
|
|
|
.price {
|
|
|
font-size: 32rpx;
|
|
|
line-height: 20rpx;
|
|
|
color: #ff4d3a;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
+
|
|
|
.old-price {
|
|
|
font-size: 20rpx;
|
|
|
color: #aaaaaa;
|
|
|
@@ -280,17 +278,20 @@ export default {
|
|
|
margin-left: 12rpx;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.right {
|
|
|
font-size: 24rpx;
|
|
|
color: #aaaaaa;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.goods-name {
|
|
|
font-size: 32rpx;
|
|
|
color: #222222;
|
|
|
font-weight: bold;
|
|
|
margin-top: 20rpx;
|
|
|
}
|
|
|
+
|
|
|
.desc {
|
|
|
font-size: 24rpx;
|
|
|
color: #aaaaaa;
|
|
|
@@ -300,18 +301,22 @@ export default {
|
|
|
margin-top: 12rpx;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.type-box {
|
|
|
padding: 24rpx;
|
|
|
background: #fff;
|
|
|
margin-bottom: 20rpx;
|
|
|
+
|
|
|
.type-title {
|
|
|
font-size: 28rpx;
|
|
|
color: #222222;
|
|
|
}
|
|
|
+
|
|
|
.type-list {
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
justify-content: space-between;
|
|
|
+
|
|
|
.type-item {
|
|
|
width: 316rpx;
|
|
|
height: 52rpx;
|
|
|
@@ -324,6 +329,7 @@ export default {
|
|
|
color: #aaaaaa;
|
|
|
margin-top: 28rpx;
|
|
|
}
|
|
|
+
|
|
|
.type-item.active {
|
|
|
background: #ee4320;
|
|
|
color: #ffffff;
|
|
|
@@ -338,22 +344,26 @@ export default {
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
margin-bottom: 20rpx;
|
|
|
+
|
|
|
.info {
|
|
|
.shop-name {
|
|
|
font-size: 28rpx;
|
|
|
color: #222222;
|
|
|
}
|
|
|
+
|
|
|
.address {
|
|
|
font-size: 24rpx;
|
|
|
color: #aaaaaa;
|
|
|
margin-top: 16rpx;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.num {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
font-size: 24rpx;
|
|
|
color: #aaaaaa;
|
|
|
+
|
|
|
.icon {
|
|
|
width: 48rpx;
|
|
|
height: 48rpx;
|
|
|
@@ -365,6 +375,7 @@ export default {
|
|
|
.tab-group {
|
|
|
display: flex;
|
|
|
background: #fff;
|
|
|
+
|
|
|
.tab {
|
|
|
flex: 1;
|
|
|
padding: 24rpx 0;
|
|
|
@@ -372,6 +383,7 @@ export default {
|
|
|
font-size: 28rpx;
|
|
|
color: #222222;
|
|
|
}
|
|
|
+
|
|
|
.tab.active {
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
@@ -381,6 +393,7 @@ export default {
|
|
|
.goods-desc {
|
|
|
color: #222222;
|
|
|
font-size: 24rpx;
|
|
|
+
|
|
|
.img_class {
|
|
|
max-width: 100% !important;
|
|
|
}
|
|
|
@@ -389,14 +402,17 @@ export default {
|
|
|
|
|
|
.list {
|
|
|
background: #fff;
|
|
|
+
|
|
|
.item {
|
|
|
padding: 24rpx;
|
|
|
border-top: 1rpx solid #f0f0f0;
|
|
|
+
|
|
|
.label {
|
|
|
font-weight: 600;
|
|
|
font-size: 28rpx;
|
|
|
color: #222222;
|
|
|
}
|
|
|
+
|
|
|
.value {
|
|
|
font-size: 24rpx;
|
|
|
color: #aaaaaa;
|
|
|
@@ -416,15 +432,18 @@ export default {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
box-sizing: border-box;
|
|
|
+
|
|
|
.head {
|
|
|
width: 80rpx;
|
|
|
height: 80rpx;
|
|
|
background: #aaa;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
+
|
|
|
.btn-box {
|
|
|
display: flex;
|
|
|
text-align: center;
|
|
|
+
|
|
|
.group-btn {
|
|
|
width: 280rpx;
|
|
|
height: 80rpx;
|
|
|
@@ -433,19 +452,23 @@ export default {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: space-around;
|
|
|
+
|
|
|
.label {
|
|
|
font-weight: 600;
|
|
|
font-size: 28rpx;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
+
|
|
|
.price {
|
|
|
font-size: 24rpx;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.buy-btn.none {
|
|
|
filter: grayscale(1);
|
|
|
}
|
|
|
+
|
|
|
.buy-btn {
|
|
|
// width: 280rpx;
|
|
|
|
|
|
@@ -456,11 +479,13 @@ export default {
|
|
|
border-radius: 40rpx;
|
|
|
background: $uni-color-primary;
|
|
|
color: #fff;
|
|
|
+
|
|
|
.label {
|
|
|
font-weight: 600;
|
|
|
font-size: 28rpx;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
+
|
|
|
.price {
|
|
|
font-size: 24rpx;
|
|
|
color: #ffffff;
|
