商品详情

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>
-                            <text>￥99</text>
+                            <text class="u-line-2">{{info.goods_name}}</text>
+                            <text>￥{{info.goods_price}}</text>
                         </view>
                     </view>
-                   <guige></guige>
-                   <guige></guige>
-                   <guige></guige>
-                   <guige></guige>
-                   <guige></guige>
-                   <guige></guige>
-                   <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>
                     <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,
-            value:1
+            show:false,
+            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){
-            this.show = true
+            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>