1.效果图

2.文件及部分思路

index.wxml文件

<view class="multipleStandard" bindtap="standardSelect">   <view class="standard">     规格:     <text class="item">颜色</text>         <text class="item">颜色</text>         <text class="item">颜色</text>       </view>   <image src="/images/arrows.png" class="arrows"></image> </view> <view style="background:rgb(207, 224, 232); height: 300rpx;margin-top: 50rpx;"></view> <view animation="{{animationData}}" class="selectStandard" catchtouchmove="noMove">   <view class="tophead">     <view class="topimg">       <image src="{{goods.original_img}}"></image>     </view>     <view class="topright">       <view class="selectClose">         <view style="color:#ef5426;">{{standardObject.price}}</view>         <image src="/images/close.png" bindtap="handleClose"></image>       </view>       <view style="margin:10rpx 0;color:#999999;">库存:{{standardObject.store_count}}</view>       <view>规格: {{mergeStandard}}</view>     </view>   </view>   <view class="standard" wx:for="{{commodityStandard}}" wx:key="{{standardIndex}}" wx:for-index="standardIndex">     <view class="standardTitle">{{item[0].spec_name}}</view>     <view class="standardItem">       <block wx:for="{{item}}" wx:key="{{item.item_id}}">         <view class="selectItem {{isSelect[item.isClick]}}" bindtap="handleStandardClick" data-standard-index="{{standardIndex}}" data-index="{{index}}" data-id="{{item.item_id}}">{{item.item}}</view>               </block>     </view>     <view style="height:1px; width:100%;background-color:#eeeeee;"></view>   </view>   <view class="selectCount">     <view class="countname">数量</view>     <view class="countright">       <i-input-number value="{{commodityNum}}" min="1" max="{{store_count}}" bindchange="handleCommodityNumber" />     </view>   </view>   <view class="submitBtn" bindtap="submitSelected">     确定   </view> </view> <i-message id="message" />

index.wxss文件

.multipleStandard{   display: flex;   margin-top: 20rpx;   padding: 15rpx 20rpx;   justify-content: space-between;   align-items: center;   box-shadow: 0 0 10px #ccc; } .item{   margin-right: 15rpx; } .arrows{   width: 16rpx;   height: 27rpx; }  /* 规格弹窗 */ .selectStandard {   width: 100%;   height: 1000rpx;   background-color: #fff;   position: fixed;   z-index: 333;   bottom: -600px;   border-top-left-radius: 20rpx;   border-top-right-radius: 20rpx; }  /* 头部选中的规格 */ .tophead {   display: flex;   margin: 30rpx 3%;   width: 94%;   align-items: center;   text-align: center; }  .topimg {   width: 200rpx;   height: 200rpx; }  .topimg image {   width: 100%;   height: 100%;   border-radius: 20rpx;   background-color: red; }  .topright {   margin-left: 30rpx;   font-size: 28rpx;   text-align: left;   width: 66%; } /* 关闭按钮 */ .selectClose {   display: flex;   justify-content: space-between;   align-items: center; }  .selectClose image {   width: 30rpx;   height: 30rpx; }  .standard {   margin: 0 3%;   width: 94%;   font-size: 28rpx; }  .standardTitle {   font-size: 30rpx;   margin-top: 20rpx; } .standardItem {   display: flex;   flex-wrap: wrap;     width: 100%; } .selectItem {   border: solid 1px #666;   margin: 20rpx;   padding: 5rpx 23rpx;   border-radius: 16rpx; } /* 规格选中时样式 */ .standardSelected{   color: #fff;   background: #f26740;     background-color:#fe6732;     border:solid 1px #fe6732;     margin:20rpx;     padding:5rpx 23rpx;     border-radius:16rpx; } .standardNormal{   color: #000; } .standardDisable{   color: #eee; }  /* 选择的数量 */ .selectCount {   margin: 30rpx 3%;   width: 94%;   font-size: 28rpx; } .countright {   float: right;   display: flex;   text-align: center;   align-items: center; }  .countname {   margin-bottom: 20rpx;   font-size: 30rpx; }  .submitBtn {   position: absolute;   bottom: 0;   width: 70%;   margin: 0 15% 20rpx 15%;   text-align: center;   z-index: 66;   height: 80rpx;   background-color: #fe6732;   border-radius: 40rpx;   color: white;   font-size: 32rpx;   line-height: 80rpx; }

index.js文件

const {     $Message } = require('../../component/iview/base/index'); Page({   data: {     animationData: {},     isSelect: ["standardNormal", "standardSelected", "standardDisable"],  /* 用于区别当前的规格是否选中 */     goods: {       goods_name: "男鞋",       store_count: 158,       cost_price: "10.00",       original_img: "/images/commodity.jpg",          },     commodityStandard: [       [         {           spec_name: "颜色",           item_id: 535385,           item: "白色",           src: "",           isClick: 0         },         {           spec_name: "颜色",           item_id: 535386,           item: "黑色",           src: "",           isClick: 0         }       ],       [         {           spec_name: "尺寸",           item_id: 535692,           item: "170",           src: "",           isClick: 0         },         {           spec_name: "尺寸",           item_id: 535693,           item: "180",           src: "",           isClick: 0         }       ],       [         {           spec_name: "重量",           item_id: 552569,           item: "11",           src: "",           isClick: 0         },         {           spec_name: "重量",           item_id: 552570,           item: "15",           src: "",           isClick: 0         }       ]     ],     standardInfo: [       {         id: 1018269,         key: "535385_535692_552569",         price: "10.00",         productprice: "0.00",         store_count: 20       },       {         id: 1018270,         key: "535385_535692_552570",         price: "20.00",         productprice: "0.00",         store_count: 20       },       {         id: 1018271,         key: "535385_535693_552569",         price: "30.00",         productprice: "0.00",         store_count: 20       },       {         id: 1018272,         key: "535385_535693_552570",         price: "40.00",         productprice: "0.00",         store_count: 20       },       {         id: 1018273,         key: "535386_535692_552569",         price: "50.00",         productprice: "0.00",         store_count: 20       },       {         id: 1018274,         key: "535386_535692_552570",         price: "60.00",         productprice: "0.00",         store_count: 20       },       {         id: 1018275,         key: "535386_535693_552569",         price: "70.00",         productprice: "0.00",         store_count: 20       },       {         id: 1018276,         key: "535386_535693_552570",         price: "80.00",         productprice: "0.00",         store_count: 18       }     ],     selectedId: [],     selectedStandard: [],     standardObject: {},     commodityNum: 1,   },   onLoad: function (options) {     let goods = this.data.goods;     let standardObject = this.data.standardObject;     standardObject.price = goods.cost_price;     standardObject.store_count = goods.store_count;         let store_count = goods.store_count;     this.setData({       standardObject,             store_count     })   },   /* 规格选择 */   standardSelect() {     var that = this     var animal1 = wx.createAnimation({       timingFunction: 'ease-in'     }).translate(0, -600).step({       duration: 300     })     that.setData({       animationData: animal1.export(),     })   },   /* 关闭规格选择 */   handleClose() {     var that = this     var animal1 = wx.createAnimation({       timingFunction: 'ease-in'     }).translate(0, 600).step({       duration: 300     })     that.setData({       animationData: animal1.export()     })   },   /* 每个规格的点击事件 */   handleStandardClick(e) {     let id = e.currentTarget.dataset.id;     // 总规格名称索引     let standardIndex = e.currentTarget.dataset.standardIndex;     // 单个规格名称索引     let index = e.currentTarget.dataset.index;     let commodityStandard = this.data.commodityStandard;     let standardLength = commodityStandard[standardIndex].length;      // 用于存储规格的id     let selectedId = this.data.selectedId;     // 用总规格名称索引来存储每个选中的规格id     selectedId[standardIndex] = id;      let selectedStandard = this.data.selectedStandard;      // 在点击的时候，只需要对点击的这个规格所在的数组进行循环     for (let i = 0; i < standardLength; i++) {       // 找到对应的单个规格索引，并设置isClick及单个规格名称       if (index == i) {         commodityStandard[standardIndex][index].isClick = 1;         selectedStandard[standardIndex] = commodityStandard[standardIndex][index].item;       } else {         commodityStandard[standardIndex][i].isClick = 0;       }     }      // 将id用_连接起来     let mergeId = selectedId.join('_');     console.log(mergeId);     let mergeStandard = selectedStandard.join('  ');     console.log(mergeStandard);      let standardInfo = this.data.standardInfo;     let standardInfoLength = standardInfo.length;     // 用于存储选中的规格     let standardObject = {};      for (let i = 0; i < standardInfoLength; i++) {       if (standardInfo[i].key == mergeId) {         standardObject = standardInfo[i];         break;       } else {         standardObject = this.data.standardObject;       }     }      this.setData({       currentId: id,       commodityStandard,       selectedId,       standardObject,       mergeStandard,       selectedStandard,     })    },   /* 选择数量 */   handleCommodityNumber(e) {       let commodityNum = e.detail.value;       if (commodityNum >= this.data.store_count) {           commodityNum = this.data.store_count;       }       this.setData({           commodityNum       })   },   /* 保存选择的规格 */   submitSelected() {       let selectedStandard = this.data.selectedStandard;       let length = selectedStandard.length;       console.log(length)       if (length == 0) {           $Message({               content: '请选择规格',               type: 'error'           });           return false;       }       for (let i = 0; i < length; i++) {           if (length < this.data.commodityStandard.length) {               $Message({                   content: '请选择规格',                   type: 'error'               });               break;           }           if (selectedStandard[i] == undefined) {               $Message({                   content: '请选择规格',                   type: 'error'               });               break;           }       }       $Message({           content: '选择成功',           type: 'success'       });   }, })

我这里提示信息使用了插件iview，可以在官网直接下载后使用

iview weapp

3.部分思路及改进方法

开始想到的是将需合并的id的位置写死，比如，第一个位置就传第一个规格里选中的规格id，第二个位置就传第二个规格里选中的规格id,不过此时有问题，就是后台的id拼接是根据当前规格长度来拼接的，从最短的开始往长的拼接，然后，长度相等的时候，我这边的话，后台是从第一个开始拼接的，而且你选规格时，也可能是随机点的，此时若是采用第一种位置写死的方法就会有问题，因为会找不到对应的合并后的规格id

因为我这里一开始用的数据就刚好满足我的设想，但是后面换了个数据后就出现问题了
index.wxml文件也做部分修改,可以直接查找下，类名为standardItem

<view class="standardItem">   <block wx:for="{{item}}" wx:key="{{item.item_id}}">     <view class="selectItem {{item.item_id == Specifications[standardIndex]?'standardSelected':'standardNormal'}}" bindtap="handleStandardClick" data-standard-index="{{standardIndex}}" data-name="{{item.item}}" data-id="{{item.item_id}}">{{item.item}}</view>           </block> </view>

*增加另一种模拟数据

goods: {   goods_name: "男鞋",   store_count: 95,   market_price: "10.00",   shop_price: "101.00",   cost_price: "10.00",   original_img: "/images/commodity.jpg",   store_id: 170, }, commodityStandard: [   [     {       spec_name: "颜色",       item_id: 532825,       item: "白色",       src: "",       isClick: 0     },     {       spec_name: "颜色",       item_id: 532826,       item: "黑色",       src: "",       isClick: 0     },     {       spec_name: "颜色",       item_id: 532827,       item: "红色",       src: "",       isClick: 0     }   ],   [     {       spec_name: "大小",       item_id: 532828,       item: "160",       src: "",       isClick: 0     },     {       spec_name: "大小",       item_id: 532829,       item: "150",       src: "",       isClick: 0     }   ],   [     {       spec_name: "重量",       item_id: 552581,       item: "10",       src: "",       isClick: 0     }   ] ], /* 这里合并规格的信息 */ spec_goods_price: [   {     id: 1018286,     key: "552581_532828_532825",     price: "10.00",     productprice: "0.00",     store_count: 9   },   {     id: 1018287,     key: "552581_532828_532826",     price: "20.00",     productprice: "0.00",     store_count: 10   },   {     id: 1018288,     key: "552581_532828_532827",     price: "30.00",     productprice: "0.00",     store_count: 10   },   {     id: 1018289,     key: "552581_532829_532825",     price: "40.00",     productprice: "0.00",     store_count: 10   },   {     id: 1018290,     key: "552581_532829_532826",     price: "50.00",     productprice: "0.00",     store_count: 7   },   {     id: 1018291,     key: "552581_532829_532827",     price: "60.00",     productprice: "0.00",     store_count: 10   } ],

index.js文件

onLoad: function (options) {     let goods = this.data.goods;     /* 用于存储对应的价格及库存 */     let standardObject = this.data.standardObject;     standardObject.price = goods.cost_price;     standardObject.store_count = goods.store_count;          let spec_goods_price =this.data.spec_goods_price;     if (spec_goods_price) {       this.checkPrice(spec_goods_price);     }     this.setData({       standardObject,     }) }, handleStandardClick: function (e) {     // 总规格名称索引     let standardIndex = e.currentTarget.dataset.standardIndex;     let id = e.currentTarget.dataset.id;     /* 存储选中的规格名称 */     let name = e.currentTarget.dataset.name;     let selectedStandard = this.data.selectedStandard;     selectedStandard[standardIndex] = name;     let mergeStandard = selectedStandard.join('  ');     let Specifications = this.data.Specifications;     Specifications[standardIndex] = id;     console.log(mergeStandard)     this.setData({       Specifications,       mergeStandard,       selectedStandard,     })     this.checkPrice(this.data.spec_goods_price); }, /*在还未选择完规格时，暂时选用第一个合并后的规格价格及库存*/ checkPrice: function (spec_goods_price) {     let standardObject = this.data.standardObject;     if (!this.checkSpecifications(spec_goods_price)) {       standardObject.price = spec_goods_price[0].price;       standardObject.store_count = spec_goods_price[0].store_count;       this.setData({         standardObject,       })     } }, /* 保存及校验是否选好了规格 */ submitSelected: function (e) {     let spec_goods_price = this.data.spec_goods_price;     let i = 0;     let optionid = "";     if (spec_goods_price) {         optionid = this.checkSpecifications();         if (optionid) {             $Message({               content: '选择成功',               type: 'success'             });         } else {             $Message({               content: '请选择规格',               type: 'error'             });         }     } }, checkSpecifications(spec_goods) {     let spec_goods_price = spec_goods || this.data.spec_goods_price;     let Specifications = this.data.Specifications;     let SpecificationsLength = spec_goods_price[0].key.split("_").length;     let standardObject = this.data.standardObject;     if (Specifications.length != SpecificationsLength) {       return false;     } else {       for (let i = 0; i < spec_goods_price.length; i++) {         /* 若selectSpecifications全为true，则选中了对应的合并后的规格 */         let selectSpecifications = true;         for (let j = 0; j < Specifications.length; j++) {           if (spec_goods_price[i].key.indexOf(Specifications[j]) == -1) {             selectSpecifications = false;             break;           }         }         if (selectSpecifications) {           standardObject.price = spec_goods_price[i].price;           standardObject.store_count = spec_goods_price[i].store_count;           this.setData({             standardObject,           })           return spec_goods_price[i].id;         }       }     }     return false; },