uniapp点击获取选中的商品规格。

一、先获取后台返回的商品数据

//请求该商品的数据
            post('product', 'getProduct', {
                spuId: option.id
            }).then(res => {
                console.log(res);
                const {
                    imgList,
                    specificationList,
                    skuList,
                    detail,
                    attributeList,
                    freightTemplate
                } = res.data;
                this.swiperList = imgList;
                this.specificationList = specificationList;
                this.skuList = skuList;
                this.data = res.data;
                this.detail = detail;
                this.attributeList = attributeList;
                this.defaultFreePrice = freightTemplate.defaultFreePrice;
              
            })

 sku数据模板

 

2.处理数据中的可以购买的商品规格属性

代码如下（示例）：

 //购买类型的数据处理
                res.data.specificationList.forEach(item => { //添加新属性
                    item.value = [];
                    item.indexs = 0
                })
                if (0 == skuList.length) {
                    return {}
                }
                skuList.forEach((item, index) => {
                    let ind = item.specification.lastIndexOf(',');
                    if (ind == item.specification.length - 1) {
                        console.log(0);
                        let arr = item.specification.substring(0, item.specification.length - 1).split(
                            ",");
                        // if (arr[1] == '') {
                        //     arr.pop()
                        // }
                        arr.map(item1 => item1.split("_")).forEach(item2 => {
                            let title = item2[0]
                            let content = item2[1]
                            let obj = this.specificationList.find(item3 => item3.title == title)
                            if (!obj.value.includes(content)) {
                                obj.value.push(content)
                            }
                        })
                    } else {
                        item.specification.split(",").map(item1 => item1.split("_")).forEach(item2 => {
                            let title = item2[0]
                            let content = item2[1];
                            // console.log(title, content);
                            let obj = this.specificationList.find(item3 => item3.title == title)
                            if (!obj.value.includes(content)) {
                                obj.value.push(content)
                            }
                        })
                    }



                })

该处使用的url网络请求的数据。

---

三。在页面中渲染，这里使用的是弹出框的方式渲染

<!--弹出框 选择商品规格 -->
			<u-popup :show="show" :round="10" mode="bottom" :closeOnClickOverlay="false">
				<view class="popup-box-content">
					<view class="popup-header">
						<image :src="productImg" mode="" style="width: 85px;height: 85px;margin-right: 3px;"></image>
						<view class="popup-header-goods">
							<view class="price">￥{{handledPrice/100}}<span class="popup-header_tip"
									v-if="data.activity">团购价
								</span></view>
							<view class="stock">库存:{{currentStock}}{{data.unit}}</view>
							<view class="selected">已选:{{selectTitle?selectTitle:selectedTitle}}</view>
						</view>
					</view>
					<view class="goodsAttribute" v-for="(item,index) in specificationList" :key="item.id">
						<view class="goodsAttribute-title">{{item.title}}</view>
						<view class="goodsAttribute-item">
							<view class="tag-view" v-for="(ite,Iindexs) in item.value" :key="Iindexs">
								<uni-tag :circle="true" :text="ite" :type="item.indexs===Iindexs?'error':''"
									@click="clickTags(item,index,ite,Iindexs)" />
							</view>
						</view>
					</view>
					<view class="goodsNum">
						<view class="goodsNum-title">数量</view>
						<view style="margin-left: 30px;">
							<u-number-box v-model="num"></u-number-box>
						</view>
					</view>
					<view class="finished">
						<u-button type="error" shape="circle" @click="finished" text="确定"></u-button>
					</view>
				</view>
			</u-popup>

 

 四，选择商品规格的点击事件

//商品规格点击事件 item--对象,index--对象下标,item2--对象中的数组，数组的元素也就是商品规格属性,index2
			clickTags(item, index, intem2, index2) {
				// console.log(index, item, intem2, index2);
				item.indexs = index2;
				// this.$set(this.specificationList[index], 'indexs', index2)
				//选中的购买的商品属性：尺寸颜色等
				let skulists = this.specificationList || [];
				this.selectTitle = skulists.map(i => {
					return i.value[i.indexs]
				}).join();
				//获取当前选中的商品名称，获得商品的库存
				this.currentIndex = this.skuList?.findIndex(s => s.title == this.selectTitle)
			},