商品详情

common/api/shop.js

@@ -119,6 +119,11 @@ export default {
 				return vm.$u.post('Store/getStoreImgVideoList', {
 					id: id
 				});
+			},
+			goodsInfo({id}){
+				return vm.$u.post('goods/goodsInfo', {
+					goods_id: id
+				});
 			}
         }
     }

manifest.json

@@ -91,7 +91,7 @@
             "https" : false
         },
         "router" : {
-            "base" : "history"
+            "base" : ""
         }
     }
 }

pageB/components/sdetails/guige.vue

@@ -1,12 +1,14 @@
 <template>
      <view class="guige">
         <view class="title">
-            选择尺码
+            {{title}}
         </view>
         <view class="item">
-            <text>均码</text>
+            <text v-for="(i,j) in item" @click="select = j" :class="select == j ? 'xuanzhong' : ''" :key="j">
-            <text :class="select == 1 ? 'xuanzhong' : ''">S</text>
+                {{i}}
-            <text>M</text>
+            </text>
+            <!-- <text @click="select = 1" :class="select == 1 ? 'xuanzhong' : ''">S</text> -->
+            <!-- <text @click="select = 2" :class="select == 2 ? 'xuanzhong' : ''">M</text> -->
         </view>
     </view>
 </template>
@@ -48,7 +50,14 @@ export default {
     name:"guige",
     data(){
         return {
-            select:true
+            select:0
+        }
+    },
+    props:['item','title'],
+    watch:{
+        select(){
+            // console.log(this.select)
+            this.$emit("sel",this.select)
         }
     }
 }

pageB/components/sdetails/tloos.vue

@@ -12,33 +12,27 @@
             <view class="button" style="background:rgba(253,211,96,0.6);">试穿试送</view>
             <view class="button" style="background:rgba(253,211,96,1);" @click="buy(2)">加入购物车</view>
             <view class="button" style="background:rgba(255,120,15,1);" @click="buy(1)">立即购买</view>
-            <u-toast ref="uToast" />
             
         </view>
         <u-popup v-model="show" mode="bottom">
                 <scroll-view scroll-y="true" class="popup">
                     <view>
                     <view class="head">
-                        <image class="image"></image>
+                        <image class="image" :src="info.goods_image"></image>
                         <view class="info">
-                            <text class="u-line-2">套装新款小个子春季时尚韩版短袖衬
+                            <text class="u-line-2">{{info.goods_name}}</text>
-    衫套装新款小个子春季时尚韩版...套装新款小个子春季时尚韩版短袖衬衫套装新款小个子春季时尚韩版...</text>
+                            <text>￥{{info.goods_price}}</text>
-                            <text>￥99</text>
                         </view>
                     </view>
-                   <guige></guige>
+                   <guige @sel="self" ref="guige"  v-for="(item,index) in info.spec_value" :key="index" :title="info.spec_name[index]" :item="item"></guige>
-                   <guige></guige>
-                   <guige></guige>
-                   <guige></guige>
-                   <guige></guige>
-                   <guige></guige>
-                   <guige></guige>
                     <view class="num">
                         <text>购买数量</text>
                         <u-number-box v-model="value" @change="valChange"></u-number-box>
                     </view>
                     <view style="height:180rpx"></view>
                     </view>
+        <u-toast ref="uToast" />
+
                 </scroll-view>
             </u-popup>
     </view>
@@ -48,36 +42,68 @@
 import guige from "./guige"
 export default {
 	name:"tloos",
-	props: ['id'],
+	props: ['id','info'],
     components:{
         guige
     },
     data(){
         return {
-            show:true,
+            show:false,
-            value:1
+            value:1,
+            sel:"",
+            quanxuan:false
         }
     },
 	methods: {
-        //添加购物车
-		addCart() {
-			this.$u.api.addCart({
-				goods_id: this.id,
-				quantity: 1,
-			}).then(res => {
-				this.$refs.uToast.show({
-					title: res.message,
-					type: res.errCode == 0 ? 'success' : 'warning',
-				})
-			})
-		},
         buy(type){
+            let that = this;
+            if(this.show){
+                if(this.info.spec_value == null){
+                    this.$emit("buy",{type,value:that.value})
+                }else if(this.quanxuan){
+                    this.$emit("buy",{type,value:that.value})
+                }else{
+                    this.$refs.uToast.show({
+                        title: '请选择规格',
+                        type:  'warning',
+                    })
+                }
+            }else{
                 this.show = true
+            }
+            
         },
         valChange(e) {
-            console.log('当前值为: ' + e.value)
+            console.log(this.value)
+        },
+        self(){
+            // console.log(this.$refs.guige)
+            let index = 0;
+            let arr = [];
+            for(let i in this.info.spec_value){
+                // console.log(i)
+                // console.log(this.$refs.guige[index++].select)
+                // index++;
+                let sel = this.$refs.guige[index++].select
+                if(sel != 0){
+                    arr.push(sel)
+                }
+
+            }
+            // console.log(arr.length)
+            if(arr.length == index){
+                this.sel = arr.join("|")
+                this.quanxuan = true
+                // console.log(this.sel)
+            }
         }
     },
+    watch:{
+        sel(){
+            // console.log(this.sel)
+            this.$emit('xuanze',this.sel)
+        }
+    }
 }
 </script>
 <style lang="scss" scoped>

pageB/sdetails/index.vue

@@ -23,7 +23,8 @@
 		<view class="rich">
 			<rich-text :nodes="goodsInfo.mobile_body"></rich-text>
 		</view>
-        <tloos :id="goodsInfo.goods_commonid"></tloos>
+        <tloos @buy="buy" @xuanze="xuanze" :id="goodsInfo.goods_commonid" :info="info"></tloos>
+        <u-toast ref="uToast" />
     </view>
 </template>
 <script>
@@ -35,6 +36,9 @@ export default {
         return {
             list: [],
             goodsInfo: {},
+            info:{},
+            glist:[],
+            id:0
         }
 	},
     components:{
@@ -43,9 +47,24 @@ export default {
     },
 	onLoad(option) {
         this.getGoodsDetails(option.id);
+       
 	},
 	methods: {
+        buy(info){
+            if(info.type == 2){
+                this.$u.api.addCart({
+                    goods_id: this.id,
+                    quantity: info.value,
+                }).then(res => {
+                    this.$refs.uToast.show({
+                        title: res.errCode[1],
+                        type: res.errCode == 0 ? 'success' : 'warning',
+                    })
+                })
+            }
+        },
 		getGoodsDetails(id) {
+            this.id = id;
 			this.$u.api.getGoodsDetails({ id: id }).then((res)=>{
 				if (res.errCode == 0) {
 					this.goodsInfo = res.data;
@@ -59,6 +78,15 @@ export default {
 					
 				}
             })
+            this.$u.api.goodsInfo({id}).then((res)=>{
+                console.log(res)
+                this.info = res.data.goods;
+                this.glist = res.data.spec_list;
+            })
+        },
+        xuanze(id){
+            console.log(id)
+            this.getGoodsDetails(this.glist[id])
         }
 	},
 }