|
|
@@ -255,46 +255,67 @@
|
|
|
<img
|
|
|
class="header_img"
|
|
|
mode="aspectFill"
|
|
|
- src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-7e00db99-ad65-4b9f-a74b-61bccb92b124/96f1dd40-2075-4f6f-988c-14c2753d9fb2.jpg"
|
|
|
+ :src="cartImg"
|
|
|
/>
|
|
|
<view class="header_info">
|
|
|
<view class="info_price">
|
|
|
¥
|
|
|
- <text>8600</text>
|
|
|
+ <text>{{cartPrice}}</text>
|
|
|
</view>
|
|
|
- <view class="info_tags">
|
|
|
+ <!-- <view class="info_tags">
|
|
|
<view class="tag">包邮</view>
|
|
|
<view class="tag">8600积分</view>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- <view class="con dflex dflex-wrap-w">
|
|
|
+ <view
|
|
|
+ class="margin-right-sm margin-bottom-sm dflex bg-drak border-radius-lg padding-tb-16 padding-lr"
|
|
|
+ :class="{ active: item.selected }"
|
|
|
+ v-for="(item, index) in skuDatas"
|
|
|
+ :key="index"
|
|
|
+ @click="selectSKU(item)"
|
|
|
+ >
|
|
|
+ <text class="fs-xs">{{ item.name }}</text>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+
|
|
|
+ <!-- 颜色区域 -->
|
|
|
+ <view v-for="(item, index) in skuAttrDatas"
|
|
|
+ :key="index">
|
|
|
+ <view class="pop_title">{{item.attrName}}({{item.attrValues.length}})</view>
|
|
|
+ <view class="pop_tags">
|
|
|
+ <view :class="item2.type == true?'active_sku_color':'active_sku'" @click="selectSKU(index,index2)" v-for="(item2, index2) in item.attrValues"
|
|
|
+ :key="index2">{{item2.attrValue}}</view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
-
|
|
|
- <!-- 颜色区域 -->
|
|
|
- <view class="pop_title">颜色(3)</view>
|
|
|
- <view class="pop_tags">
|
|
|
- <view class="tag">白沙银</view>
|
|
|
- <view class="tag">白沙银</view>
|
|
|
- <view class="tag">白沙银</view>
|
|
|
- </view>
|
|
|
+
|
|
|
|
|
|
<!-- 容量区域 -->
|
|
|
- <view class="pop_title">容量(3)</view>
|
|
|
+ <!-- <view class="pop_title">容量(3)</view>
|
|
|
<view class="pop_tags">
|
|
|
<view class="tag">256G+512G</view>
|
|
|
<view class="tag">256G</view>
|
|
|
<view class="tag">256G</view>
|
|
|
- </view>
|
|
|
+ </view> -->
|
|
|
|
|
|
<!-- 购买数量区域 -->
|
|
|
<view class="pop_title">
|
|
|
购买数量
|
|
|
- <text>库存10件</text>
|
|
|
+ <text>库存{{cartSale}}件</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="pop_num">
|
|
|
<uni-number-box @change="changeValue" />
|
|
|
+ </view>
|
|
|
+ <view class="flex1 btn-container dflex-b border-radius-big" style="margin-top: 50px;">
|
|
|
+ <view class="tac padding-tb-sm flex1 bg-warn" v-if="goods.stockNum > goods.saleCnt && goods.state == 1" @click="tocartSKU(goods,)">加入购物车</view>
|
|
|
+ <view class="tac padding-tb-sm flex1 bg-base-gou" v-if="goods.stockNum > goods.saleCnt && goods.state == 1" @click="tobuySku(goods)">立即购买</view>
|
|
|
+ <view class="tac padding-tb-sm flex1 bg-disabled" v-if="goods.stockNum == goods.saleCnt && goods.state == 1">已售磐</view>
|
|
|
+ <view class="tac padding-tb-sm flex1 bg-disabled" v-if="goods.state == 0">已下架</view>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </view>`
|
|
|
</uv-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -334,7 +355,12 @@ export default {
|
|
|
swiperDatas: [],
|
|
|
// SKU
|
|
|
sku: {},
|
|
|
- skuDatas: [],
|
|
|
+ skuDatas: [],
|
|
|
+ cartNum:'1',//商品加购数量
|
|
|
+ cartImg:'',//加购图片
|
|
|
+ cartPrice:'',//加购价格
|
|
|
+ cartSale:'',//加购库存
|
|
|
+ skuId:'',//选中sku
|
|
|
// 分享
|
|
|
shareShow: false,
|
|
|
// 海报
|
|
|
@@ -357,7 +383,8 @@ export default {
|
|
|
// 收藏
|
|
|
favorite: false, //是否收藏
|
|
|
|
|
|
- scrollTop: 0
|
|
|
+ scrollTop: 0,
|
|
|
+ skuAttrDatas:[],//商品属性数组
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -458,7 +485,55 @@ export default {
|
|
|
})
|
|
|
})
|
|
|
|
|
|
- _self.tagDatas = __tagDatas
|
|
|
+ _self.tagDatas = __tagDatas
|
|
|
+
|
|
|
+ //商品属性数组
|
|
|
+ _self.skuAttrDatas = _self.goods.skuGroups;
|
|
|
+ _self.skuAttrDatas.forEach((el,index)=>{
|
|
|
+ el.attrValues.forEach((item,ins)=>{
|
|
|
+ _self.skuAttrDatas[index].attrValues[0].type = true
|
|
|
+ })
|
|
|
+ })
|
|
|
+ console.log(_self.skuAttrDatas,'po')
|
|
|
+ // 商品SKU
|
|
|
+ _self.skuDatas = _self.goods.skus;
|
|
|
+ // for(var i=0;i<_self.skuDatas.length;i++){
|
|
|
+ // _self.skuDatas[i].spec=_self.skuDatas[i].saleAttrs[0].attrValue
|
|
|
+ // _self.skuDatas[i].spec2=_self.skuDatas[i].saleAttrs[1].attrValue
|
|
|
+ // }
|
|
|
+ console.log(_self.skuDatas,'sku')
|
|
|
+ _self.cartPrice=_self.skuDatas[0].price
|
|
|
+ _self.cartImg=_self.skuDatas[0].skuImg
|
|
|
+ _self.cartSale=_self.skuDatas[0].stockNum
|
|
|
+ _self.skuId=_self.skuDatas[0].skuId
|
|
|
+ // let __goods_skus = _self.goods.skus;
|
|
|
+ // if (__goods_skus.length > 0) {
|
|
|
+ // let __skuDatas = [];
|
|
|
+ // __goods_skus.forEach((sku, index) => {
|
|
|
+ // // { id: 1, name: '45寸(大规格)', price: 788, market_price: 999, num: 0, selected: !0 },
|
|
|
+ // __skuDatas.push({
|
|
|
+ // id: sku.skuId,
|
|
|
+ // sku: sku.saleAttrs,
|
|
|
+ // name: sku.skuName,
|
|
|
+ // price: sku.price,
|
|
|
+ // market_price: sku.marketPrice || _self.goods.marketPrice,
|
|
|
+ // num: sku.stockNum,
|
|
|
+ // selected: index == 0,
|
|
|
+ // img:sku.skuImg,
|
|
|
+ // sale:sku.stockNum
|
|
|
+ // });
|
|
|
+ // });
|
|
|
+ // _self.skuDatas = __skuDatas;
|
|
|
+ // _self.cartImg=_self.skuDatas[0].img
|
|
|
+ // _self.cartPrice=_self.skuDatas[0].price
|
|
|
+ // _self.cartSale=_self.skuDatas[0].sale
|
|
|
+ // _self.skuId=_self.skuDatas[0].id
|
|
|
+ // }
|
|
|
+
|
|
|
+ // // SKU
|
|
|
+ // if (this.skuDatas.length > 0) {
|
|
|
+ // this.sku = this.skuDatas[0];
|
|
|
+ // }
|
|
|
}
|
|
|
})
|
|
|
|
|
|
@@ -648,17 +723,80 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
|
|
|
- // 商品SKU
|
|
|
- selectSKU(res) {
|
|
|
- this.skuDatas.forEach((item) => {
|
|
|
- if (res.sku == item.sku) {
|
|
|
- this.$set(item, 'selected', true)
|
|
|
- } else {
|
|
|
- this.$set(item, 'selected', false)
|
|
|
- }
|
|
|
- })
|
|
|
+ // 选择商品SKU
|
|
|
+ selectSKU(i,is) {
|
|
|
+ this.skuAttrDatas[i].attrValues.forEach((item,ins)=>{
|
|
|
+ this.$set(this.skuAttrDatas[i].attrValues[ins],'type',false)
|
|
|
+ })
|
|
|
+ this.$set(this.skuAttrDatas[i].attrValues[is],'type',true)
|
|
|
+ let list = []
|
|
|
+ this.skuAttrDatas.forEach((item,ins)=>{
|
|
|
+ item.attrValues.forEach((el,index)=>{
|
|
|
+ if(el.type == true){
|
|
|
+ list.push({attrValue:el.attrValue})
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ // let list2=[]
|
|
|
+ // this.skuDatas.forEach((item,ins)=>{
|
|
|
+ // item.attrValues.forEach((el,index)=>{
|
|
|
+ // if(el.type == true){
|
|
|
+ // list2.push({attrValue:el.attrValue})
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // })
|
|
|
+ // list2.forEach((el,index)=>{
|
|
|
+ // console.log(JSON.stringify(list),'p')
|
|
|
+ // console.log(JSON.stringify(el),'p2')
|
|
|
+ // console.log(JSON.stringify(list) == JSON.stringify(el))
|
|
|
+ // if(JSON.stringify(list) == JSON.stringify(el)){
|
|
|
+ // this.cartPrice=el.price
|
|
|
+ // this.cartImg=el.skuImg
|
|
|
+ // this.cartSale=el.stockNum
|
|
|
+ // this.skuId=el.skuId
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+
|
|
|
+ var list2=[]
|
|
|
+ this.skuDatas.forEach((item,index2)=>{
|
|
|
+ list2=[]
|
|
|
+ item.saleAttrs.forEach((el,index)=>{
|
|
|
+ list2.push({attrValue:el.attrValue})
|
|
|
+ })
|
|
|
+ console.log(JSON.stringify(list),'p')
|
|
|
+ console.log(JSON.stringify(list2),'p2')
|
|
|
+ console.log(JSON.stringify(list) == JSON.stringify(list2))
|
|
|
+ if(JSON.stringify(list) == JSON.stringify(list2)){
|
|
|
+ this.cartPrice=item.price
|
|
|
+ this.cartImg=item.skuImg
|
|
|
+ this.cartSale=item.stockNum
|
|
|
+ this.skuId=item.skuId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // this.skuDatas.forEach((el,index)=>{
|
|
|
+ // console.log(JSON.stringify(list),'p')
|
|
|
+ // console.log(JSON.stringify(el.saleAttrs),'p2')
|
|
|
+ // if(JSON.stringify(list) == JSON.stringify(el.saleAttrs)){
|
|
|
+ // this.cartPrice=el.price
|
|
|
+ // this.cartImg=el.skuImg
|
|
|
+ // this.cartSale=el.stockNum
|
|
|
+ // this.skuId=el.skuId
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ console.log(this.skuId,'0')
|
|
|
+ // this.cartImg=res.img
|
|
|
+ // this.cartPrice=res.price
|
|
|
+ // this.cartSale=res.sale
|
|
|
+ // this.skuId=res.id
|
|
|
+ // this.skuDatas.forEach((item) => {
|
|
|
+ // if (res.sku == item.sku) {
|
|
|
+ // this.$set(item, 'selected', true)
|
|
|
+ // } else {
|
|
|
+ // this.$set(item, 'selected', false)
|
|
|
+ // }
|
|
|
+ // })
|
|
|
|
|
|
- this.sku = res
|
|
|
+ // this.sku = res
|
|
|
},
|
|
|
|
|
|
// 评论
|
|
|
@@ -693,65 +831,64 @@ export default {
|
|
|
})
|
|
|
},
|
|
|
// 加入购物车
|
|
|
- tocart(params) {
|
|
|
- // var _self=this
|
|
|
- // var data='?num=1&'+'goodId='+params.id
|
|
|
- // cartadd(data).then((res) => {
|
|
|
- // if(res.success){
|
|
|
- // _self.$api.msg('加购成功');
|
|
|
- // return;
|
|
|
- // }
|
|
|
- // _self.$api.msg(res.msg);
|
|
|
- // })
|
|
|
- // this.$func.usemall
|
|
|
- // .call('goods/addcart', {
|
|
|
- // goods_id: params._id,
|
|
|
- // goods_num: 1,
|
|
|
- // goods_sku: this.sku.id
|
|
|
- // })
|
|
|
- // .then(res => {
|
|
|
- // if (res.code === 200) {
|
|
|
- // this.$api.msg(res.datas.msg);
|
|
|
- // return;
|
|
|
- // }
|
|
|
- // this.$api.msg(res.msg);
|
|
|
- // });
|
|
|
-
|
|
|
- this.$refs.addPopup.open('bottom')
|
|
|
+ tocart(params) {
|
|
|
+ var _self=this
|
|
|
+ console.log(params)
|
|
|
+ if(params.enableSku==1){
|
|
|
+ _self.$refs.addPopup.open('bottom')
|
|
|
+ }else{
|
|
|
+ var data='?num=1&'+'goodId='+params.id
|
|
|
+ cartadd(data).then((res) => {
|
|
|
+ if(res.success){
|
|
|
+ _self.$api.msg('加购成功');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ _self.$api.msg(res.msg);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //yousku加购
|
|
|
+ tocartSKU(params){
|
|
|
+ var _self=this
|
|
|
+ var data='?num='+_self.cartNum+'&'+'goodId='+params.id+'&skuId='+this.skuId
|
|
|
+ cartadd(data).then((res) => {
|
|
|
+ if(res.success){
|
|
|
+ _self.$api.msg('加购成功');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ _self.$api.msg(res.msg);
|
|
|
+ })
|
|
|
},
|
|
|
// 立即购买
|
|
|
tobuy(item) {
|
|
|
let _this = this
|
|
|
- // if (!this.loginCheck()) return;
|
|
|
-
|
|
|
- uni.navigateTo({
|
|
|
- url: `/packageShang/pages/order/create?goods_id=${this.id}&sku_id=${this.sku.id || ''}&type=1`
|
|
|
- })
|
|
|
+ // if (!this.loginCheck()) return;
|
|
|
+ if(item.enableSku==1){
|
|
|
+ _this.$refs.addPopup.open('bottom')
|
|
|
+ }else{
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/packageShang/pages/order/create?goods_id=${_this.id}&type=1&num=1`
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //yousku购买
|
|
|
+ tobuySku(item){
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/packageShang/pages/order/create?goods_id=${this.id}&skuId=${this.skuId}&type=1&num=${this.cartNum}`
|
|
|
+ })
|
|
|
},
|
|
|
// 点击弹窗关闭图标回调
|
|
|
handleClosePop() {
|
|
|
this.$refs.addPopup.close()
|
|
|
},
|
|
|
changeValue(value) {
|
|
|
- console.log('返回数值:', value)
|
|
|
+ console.log('返回数值:', value)
|
|
|
+ if(value>this.cartSale){
|
|
|
+ this.cartNum=this.cartSale
|
|
|
+ }else{
|
|
|
+ this.cartNum=value
|
|
|
+ }
|
|
|
}
|
|
|
- // 检测是否已登录
|
|
|
- // loginCheck() {
|
|
|
- // if (!this.islogin) {
|
|
|
- // let _this = this;
|
|
|
- // uni.showModal({
|
|
|
- // title: '授权登录',
|
|
|
- // success: function(res) {
|
|
|
- // if (res.confirm) {
|
|
|
- // _this.$api.tologin();
|
|
|
- // }
|
|
|
- // }
|
|
|
- // });
|
|
|
- // return false;
|
|
|
- // }
|
|
|
-
|
|
|
- // return true;
|
|
|
- // }
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -824,7 +961,7 @@ contact-button {
|
|
|
}
|
|
|
|
|
|
/* 03. 规格区 */
|
|
|
-.sku-area .active {
|
|
|
+.tag .active {
|
|
|
background: $base-color;
|
|
|
color: #fff !important;
|
|
|
}
|
|
|
@@ -1030,15 +1167,43 @@ contact-button {
|
|
|
}
|
|
|
|
|
|
.pop_tags {
|
|
|
- display: flex;
|
|
|
-
|
|
|
- .tag {
|
|
|
- padding: 20rpx 30rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- font-size: 30rpx;
|
|
|
- border-radius: 40rpx;
|
|
|
- background-color: #f6f6f6;
|
|
|
+ display: flex;
|
|
|
+ .active_sku{
|
|
|
+
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ background-color: #f6f6f6;
|
|
|
+
|
|
|
+ // border: 1rpx solid #999;
|
|
|
+ // padding: 3rpx 10rpx 3rpx 10rpx;
|
|
|
+ // font-size: 24rpx;
|
|
|
+ // margin-right: 10rpx;
|
|
|
+ // border-radius: 5rpx;
|
|
|
+ }
|
|
|
+ .active_sku_color{
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ background-color: #ffbc49;
|
|
|
+
|
|
|
+ // border: 1rpx solid #990002;
|
|
|
+ // padding: 3rpx 10rpx 3rpx 10rpx;
|
|
|
+ // font-size: 24rpx;
|
|
|
+ // margin-right: 10rpx;
|
|
|
+ // border-radius: 5rpx;
|
|
|
+ // color: #990002;
|
|
|
}
|
|
|
+
|
|
|
+ // .tag {
|
|
|
+ // padding: 20rpx 30rpx;
|
|
|
+ // margin-right: 20rpx;
|
|
|
+ // font-size: 30rpx;
|
|
|
+ // border-radius: 40rpx;
|
|
|
+ // background-color: #f6f6f6;
|
|
|
+ // }
|
|
|
}
|
|
|
|
|
|
.pop_num {
|