uniapp-商城-70-shop（3-商品列表，点击规格，进行属性选择）

        商品列表中，有商品存在规格，再添加商品到购物车的时，还需要先进行规格选中，如颜色，尺码，大小等等。

        这里以前是再shop页面上进行弹出相应。当点击我们的选规格时，就弹出规格选择的对话框。

        该文档详细描述了电商平台中商品规格选择功能的实现方案。主要包括：1) 使用u-popup组件实现规格选择弹窗；2) 通过Vuex管理弹窗状态和数据传递；3) 采用双层循环展示父子规格选项；4) 实现规格选择交互逻辑，包括选中状态切换、规格数据存储和确认按钮状态控制；5) 处理事件冒泡问题确保点击事件精确触发。系统通过计算属性和样式绑定实现选中规格的视觉反馈，并包含购物车添加的数量选择功能，完整覆盖了电商规格选择的典型需求场景。

1、页面shop的 规格选择布局  pro-select-specs

        <view class="car" v-if="totalNumValue>0">
            <!-- 购物车 -->
            <car-Layout></car-Layout>
        </view>
        
        <!-- 商品详情 -->
        <pro-detail-popup></pro-detail-popup>
        
        <!-- 商品选规格 -->
        <pro-select-specs></pro-select-specs>

2、pro-select-specs 组件中依然选择了 u-popup的组件来实现

3、如何进行pro-select-specs 弹窗

3.1  依然通过点击 商品组件 productItem 中的选规格，来触发弹窗

使用方法是：selectSpecs

3.2 这里selectSpecs代码

这里的方法和数据处理都需要vuex。

            //点击选择规格
            selectSpecs() {
                this.SET_PRO_SPECS(true);
                this.SET_DETAIL_DATA(this.item);
                console.log(this.item);
            }

4、使用vuex进行管理状态和数据

4.1 主要方法

和商品详情页面的弹窗一样，通过vuex 来传递状态 和数据

第一步，再goods.js中，定义选规格的 弹窗 状态

第二步，定义同步动作，修改状态，获取点击选规格时，传来的数据（商品数据，从这里获取skuselect数据）

// 操作商品的vuex 
//vuex的3步骤：  1 创建good是.js；2 在store的index 引入；3 在getter中暴露 
const goods = {state:{detailPopState:false, //商品详情页弹窗的状态，false 默认是关闭不弹出detailData:{},   //商品详情的数据proSpecsState:false  //商品规格选择的状态是否弹出，false 就是不弹出},mutations:{SET_DETAIL_STATE(state,value){state.detailPopState = value},SET_DETAI