### 商品規格的實現 > 規格頁面主要封裝為組件的形式，將得到的數據傳入到子組件當中，很多時候也得根據后端的數據來 > 子組件需要接收的 ``` props: { goodsAttr: { type: Array, default: () => [], }, goods: { default: function() { return {} } }, item: { default: function() { return {} } }, }, ``` > watch監聽 ``` watch: { goods: { handler(newValue, oldValue) { this.goodsStockNumber = this.goods.store_nums; this.goodsPrice = this.goods.sell_price; let fields = {}; for (let i in this.goods) { if (this.$utils.in_array(i, this.fields)) { fields[i] = this.goods[i]; } } Object.assign(fields, { id: this.goods.id, num: this.number, isSubmit: true, selectedSku: { id: "", specSelected: "" } }); this.selectedGoodsInfo = fields; }, deep: true }, /** * 對于規格的處理 */ goodsAttr: { handler(newValue, oldValue) { // console.log(2, 'goodsAttr'); if (this.goodsAttr.length <= 0) { return; } let arr = []; this.selectedSku = []; for (let obj in this.goodsAttr) { for (let index in this.goodsAttr[obj]['list']) { if (this.goodsAttr[obj]['list'][index]['selected'] && !this.goodsAttr[obj]['list'][index][ 'disable' ]) { this.selectedSku.push(this.goodsAttr[obj]['list'][index]); arr.push({ name: this.goodsAttr[obj].name, value: this.goodsAttr[obj]['list'][index].value }); } } } let selectedIndex = []; for (let obj in this.selectedSku) { selectedIndex.push(this.selectedSku[obj].pid + "_" + this.selectedSku[obj].id); } if (this.goodsAttr.length == selectedIndex.length && this.item[selectedIndex.join("_")] != undefined) { let g = this.item[selectedIndex.join("_")]; this.goodsPrice = g.sell_price; this.goodsStockNumber = g.store_nums; if (this.number >= g.store_nums) { this.number = g.store_nums; } this.selectedGoodsInfo.selectedSku.id = g.product_id; this.selectedGoodsInfo.isSubmit = true; } else { this.selectedGoodsInfo.isSubmit = false; } this.specSelected = ''; let s = []; for (let i in arr) { s.push(arr[i].name + ":" + arr[i].value); } if (s.length > 0) { this.selectedGoodsInfo.selectedSku.specSelected = s.join(","); this.specSelected = "己選擇：" + s.join(","); } // console.log(5, this.selectedGoodsInfo); }, deep: true }, }, ``` > 規格點擊 ``` /** * 屬性選擇點擊 */ onAttrSize(id, value, index, idx, pid) { let specArray = []; for (let i in this.goodsAttr) { specArray[i] = "[A-Za-z0-9_\\:\\,]+"; if (id == this.goodsAttr[i]['id']) { for (let j in this.goodsAttr[i]['list']) { let value = this.goodsAttr[i]['list'][j]; if (id == value['pid'] && pid == value['id']) { let flag = !value.selected; this.$set(this.goodsAttr[i]['list'][j], 'selected', flag); if (flag == true) { specArray[i] = value.pid + ":" + value.id; } } else { this.$set(this.goodsAttr[i]['list'][j], 'selected', false); } } } } for (let i in this.goodsAttr) { for (let j in this.goodsAttr[i]['list']) { let value = this.goodsAttr[i]['list'][j]; let temp = specArray.slice(); temp[i] = value.pid + ":" + value.id; let flag = true; for (let j in this.item) { let reg = new RegExp(temp.join(",")); if (reg.test(this.item[j].key) && this.item[j].store_nums > 0) { flag = false; } } this.$set(this.goodsAttr[i]['list'][j], 'disable', flag); } } }, ``` > 樣式實現 ``` <view class="size-list"> <div class="list" v-for="(value, idx) in item.list" :class="{'action': value.selected && value.disable == false}" @click.stop="onAttrSize(item.id,value,index,idx,value.id)" :key="idx"> <text>{{value.value}}</text> </div> </view> ``` #### 實現思想 正在構思中