|
|
@@ -5,7 +5,7 @@
|
|
|
<scroll-view scroll-y="true" class="scroll-view">
|
|
|
<view class="list-scroll-view">
|
|
|
<view class="one_1">
|
|
|
- <swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#FB1438" :autoplay="true" :interval="3000" :duration="1000">
|
|
|
+ <swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#FB1438" :interval="3000" :duration="1000">
|
|
|
<swiper-item class="list" v-for="(item,index) in info.goods.file" :key="index">
|
|
|
<image class="image" :src="item.url" mode="aspectFit">
|
|
|
</image>
|
|
|
@@ -75,8 +75,12 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="one_6_3">
|
|
|
- <button size="mini" @tap="toShop">进入店铺</button>
|
|
|
- <button size="mini" @tap="toShopcolect">{{shopColect==true?'已关注':'关注'}}</button>
|
|
|
+ <view class="btn">
|
|
|
+ <button size="mini" @tap="toShop">进入店铺</button>
|
|
|
+ </view>
|
|
|
+ <view class="btn">
|
|
|
+ <button size="mini" @tap="toShopcolect">{{shopColect==true?'已关注':'关注'}}</button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="one_7">
|
|
|
@@ -112,7 +116,7 @@
|
|
|
<view class="one">
|
|
|
<view class="one_1">
|
|
|
<view class="l">
|
|
|
- <image class="image" :src="specsInfo.file.length>0?specsInfo.file[0].url:info.goods.file[0].url" mode="aspectFill" @tap="imageView(specsInfo.file)"></image>
|
|
|
+ <image class="image" :src="specsInfo.file.length>0?specsInfo.file[0].url:info.goods.file[0].url" mode="aspectFill" @tap="diaView"></image>
|
|
|
</view>
|
|
|
<view class="r">
|
|
|
<view class="money">
|
|
|
@@ -130,7 +134,7 @@
|
|
|
规格
|
|
|
</view>
|
|
|
<view class="one_2_2">
|
|
|
- <view :class="['list',`${item.num==0?'zero_list':''}`,`${is_specs==index?'one_list':''}`]" v-for="(item,index) in info.specs" :key="index" @tap="toSpecs(item)">
|
|
|
+ <view :class="['list',is_specs!=index&&item.num>0?'list':is_specs!=index&&item.num<=0?'huilist':is_specs==index&&item.num>0?'redlist':is_specs==index&&item.num<=0?'huiilist':'list']" v-for="(item,index) in info.specs" :key="index" @tap="toSpecs(item)">
|
|
|
<text>{{item.name}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -152,13 +156,33 @@
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
<view class="info_2">
|
|
|
- <button size="mini" v-if="btn_type==''||btn_type=='0'" @tap="toMarket">加入购物车</button>
|
|
|
- <button size="mini" v-if="btn_type==''||btn_type=='1'" @tap="toBuy">立即购买</button>
|
|
|
- <button size="mini" v-if="specsInfo.can_group=='0'" @tap="toGroup">参团</button>
|
|
|
+ <view :class="[specsInfo.can_group=='0'?'btns':'btn']" v-if="btn_type=='0'">
|
|
|
+ <button :disabled="is_zero" :class="[is_zero?'btncolor':'']" @tap="toMarket">加入购物车</button>
|
|
|
+ </view>
|
|
|
+ <view :class="[specsInfo.can_group=='0'?'btns':'btn']" v-if="btn_type=='1'">
|
|
|
+ <button :disabled="is_zero" :class="[is_zero?'btncolor':'']" @tap="toBuy">立即购买</button>
|
|
|
+ </view>
|
|
|
+ <view :class="[specsInfo.can_group=='0'?'btns':'btn']" v-if="specsInfo.can_group=='0'">
|
|
|
+ <button :disabled="is_zero" :class="[is_zero?'btncolor':'']" @tap="toGroup">参团</button>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</uni-popup>
|
|
|
+ <view class="dialog" v-if="dialog.show==true" @tap="dialogClose">
|
|
|
+ <view class="dialog_1" v-if="dialog.type=='1'">
|
|
|
+ <swiper class="swiper" circular @change="diaSpecs" :current="is_specs">
|
|
|
+ <swiper-item class="list" v-for="(item,index) in info.specs" :key="index">
|
|
|
+ <view class="list_1">
|
|
|
+ <image class="image" :src="item.file.length>0?item.file[0].url:info.goods.file[0].url" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="name">
|
|
|
+ <text>{{item.name}}</text>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</mobile-frame>
|
|
|
</template>
|
|
|
|
|
|
@@ -214,27 +238,34 @@
|
|
|
// 系统菜单
|
|
|
barList: [],
|
|
|
is_menu: false,
|
|
|
- // 规格
|
|
|
+ // 规格弹框
|
|
|
popupShow: '1',
|
|
|
// 规格信息
|
|
|
is_specs: 0,
|
|
|
- btn_type: '',
|
|
|
+ btn_type: '1',
|
|
|
specsInfo: {},
|
|
|
+ // 是否零库存
|
|
|
+ is_zero: false,
|
|
|
// 购买数量
|
|
|
buy_num: 1,
|
|
|
+ // 规格弹出框
|
|
|
+ dialog: {
|
|
|
+ show: false,
|
|
|
+ type: '1'
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
onLoad: async function(e) {
|
|
|
const that = this;
|
|
|
- that.$set(that, `id`, e.id || '');
|
|
|
+ that.$set(that, `id`, e.id || '635e4b5b42e87c7a2880d0a8');
|
|
|
that.$set(that, `inviter`, e.inviter || '');
|
|
|
await that.searchConfig();
|
|
|
await that.search();
|
|
|
+ await that.configShare();
|
|
|
},
|
|
|
onShow: async function() {
|
|
|
const that = this;
|
|
|
await that.watchLogin();
|
|
|
- that.configShare();
|
|
|
},
|
|
|
onUnload: function() {
|
|
|
// 页面卸载,重新部署分享内容
|
|
|
@@ -347,18 +378,12 @@
|
|
|
toSpecs(e) {
|
|
|
const that = this;
|
|
|
let specs = that.info.specs;
|
|
|
- if (e.num > 0) {
|
|
|
- let dataIndex = specs.findIndex(i => i.id == e.id);
|
|
|
- that.$set(that, `is_specs`, dataIndex);
|
|
|
- that.$set(that, `specsInfo`, e)
|
|
|
- that.$set(that, `buy_num`, 1);
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: '库存量不足',
|
|
|
- icon: 'none'
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
+ let dataIndex = specs.findIndex(i => i.id == e.id);
|
|
|
+ that.$set(that, `is_specs`, dataIndex);
|
|
|
+ that.$set(that, `specsInfo`, e)
|
|
|
+ that.$set(that, `buy_num`, 1);
|
|
|
+ if (e.num <= 0) that.$set(that, `is_zero`, true)
|
|
|
+ else that.$set(that, `is_zero`, false)
|
|
|
},
|
|
|
// 计数器
|
|
|
toCount(e) {
|
|
|
@@ -487,7 +512,7 @@
|
|
|
// 关闭弹框
|
|
|
toClose() {
|
|
|
const that = this;
|
|
|
- that.$set(that, `btn_type`, '');
|
|
|
+ that.$set(that, `btn_type`, '1');
|
|
|
that.$refs.specShow.close();
|
|
|
},
|
|
|
// 评价
|
|
|
@@ -571,17 +596,32 @@
|
|
|
imageUrl: imageUrl
|
|
|
}
|
|
|
},
|
|
|
- // 图片预览
|
|
|
- imageView(e) {
|
|
|
+ // 规格预览
|
|
|
+ diaView() {
|
|
|
const that = this;
|
|
|
- let goods = that.info.goods;
|
|
|
- let file = [];
|
|
|
- if (e && e.length > 0) file = e;
|
|
|
- else file = goods.file;
|
|
|
- file = file.map(i => i.url);
|
|
|
- uni.previewImage({
|
|
|
- current: 0,
|
|
|
- urls: file,
|
|
|
+ that.$set(that, `dialog`, {
|
|
|
+ show: true,
|
|
|
+ type: '1'
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 弹框选择规格
|
|
|
+ diaSpecs(e) {
|
|
|
+ const that = this;
|
|
|
+ let specs = that.info.specs;
|
|
|
+ let index = e.detail.current;
|
|
|
+ let data = specs[index];
|
|
|
+ that.$set(that, `is_specs`, index);
|
|
|
+ that.$set(that, `specsInfo`, data);
|
|
|
+ that.$set(that, `buy_num`, 1);
|
|
|
+ if (data.num <= 0) that.$set(that, `is_zero`, true)
|
|
|
+ else that.$set(that, `is_zero`, false)
|
|
|
+ },
|
|
|
+ // 关闭弹框
|
|
|
+ dialogClose() {
|
|
|
+ const that = this;
|
|
|
+ that.$set(that, `dialog`, {
|
|
|
+ show: false,
|
|
|
+ type: '1'
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
@@ -735,7 +775,7 @@
|
|
|
}
|
|
|
|
|
|
.one_6_2 {
|
|
|
- margin: 0 0 1vw 0;
|
|
|
+ margin: 0 0 2vw 0;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
padding: 2vw 0;
|
|
|
@@ -757,10 +797,17 @@
|
|
|
}
|
|
|
|
|
|
.one_6_3 {
|
|
|
- text-align: center;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 40vw;
|
|
|
|
|
|
- button {
|
|
|
- margin: 0 2vw;
|
|
|
+ button {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 15px;
|
|
|
+
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -937,7 +984,7 @@
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
.list {
|
|
|
- background-color: #f9f9f9;
|
|
|
+ background-color: #F5F5F5;
|
|
|
margin: 0 2vw 2vw 0;
|
|
|
padding: 0.5vw 1vw;
|
|
|
border-radius: 5px;
|
|
|
@@ -948,19 +995,27 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .zero_list {
|
|
|
- background-color: #f5f5f5;
|
|
|
+ .huilist {
|
|
|
+ background-color: #DCDCDC;
|
|
|
|
|
|
text {
|
|
|
color: #858585;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .one_list {
|
|
|
- background-color: red;
|
|
|
+ .redlist {
|
|
|
+ background-color: #ff0000;
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .huiilist {
|
|
|
+ background-color: #808080;
|
|
|
|
|
|
text {
|
|
|
- color: #fff;
|
|
|
+ color: #cccccc;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -982,20 +1037,79 @@
|
|
|
}
|
|
|
|
|
|
.info_2 {
|
|
|
+ display: flex;
|
|
|
text-align: center;
|
|
|
- height: 7vh;
|
|
|
- padding: 2vw 0;
|
|
|
- border-top: 0.5vw solid var(--f9Color);
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .btns {
|
|
|
+ width: 50vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn {
|
|
|
+ width: 100vw;
|
|
|
+ }
|
|
|
|
|
|
button {
|
|
|
- line-height: 3;
|
|
|
- margin: 0 2vw;
|
|
|
- padding: 0.3vw 6vw;
|
|
|
- background-color: #ff0000;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 0;
|
|
|
+ background-color: var(--fFB1Color);
|
|
|
color: #fff;
|
|
|
- font-weight: bold;
|
|
|
+ border: 1px solid #f1f1f1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btncolor {
|
|
|
+ background: #f1f1f1;
|
|
|
+ color: #858585;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .dialog {
|
|
|
+ position: fixed;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: #000000;
|
|
|
+ z-index: 99999;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ swiper {
|
|
|
+ height: 60vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ .list_1 {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 2vw;
|
|
|
+ margin: 0 0 5vw 0;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 40vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ text-align: center;
|
|
|
+ margin: 0 10vw;
|
|
|
+ background-color: #6666669f;
|
|
|
+ border-radius: 25px;
|
|
|
+ padding: 2vw;
|
|
|
+
|
|
|
+ text {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 15px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ word-break: break-all;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
