小程序商品规格属性界面布局，实现每种属性选择一个

废话不多说，上代码，

wxml:

<scroll-view class="container" style='height:{{noScrollHeight}};overflow:hidden;margin-bottom:100rpx;'>
  <view>
    <swiper class="goodsimgs" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
      <swiper-item wx:for="{{goods.imageList}}" wx:key="unique">
        <image src="{{item.imageUrl}}" background-size="cover" mode='scaleToFill'></image>
      </swiper-item>
    </swiper>
    <!-- 收藏 -->
    <view class="l-collect" bindtap="closeAttrOrCollect" hidden='true'>
      <image class="icon" src="{{ collectBackImage }}"></image>
    </view>
    <view class="goods-info">
      <view class="c">
        <text class="num">库存{{goods.numCurrent}}{{goods.unit}}</text>
        <view class="price_share">
          <view class="price">
            <text class="pricel">￥{{goods.price}}</text>
            <text class="priceMart">￥{{goods.priceMart}}</text>
          </view>
          <button class='btnShare' open-type='share'>
            <view class="share">
              <image class="img" src="/static/images/icon_share .png" />
              <text class="txt">分享</text>
            </view>
          </button>
        </view>
        <text class="name">商品名称：{{goods.name}}</text>
      </view>
    </view>
    <view class="coupon-manage" bindtap='openCoupon' wx:if="{{couponList.length>0}}">
      <view class="txt">领券</view>
      <image class="img" src="/static/images/address_right.png"></image> 
    </view>
    <view class="goods-introduction">
      <text class="txt">商品简介</text>
      <!-- 宽度不变，高度自动变化，保持原图宽高比不变 -->
      <image class="img" wx:for="{{nodes}}" src="{{item.source}}" mode="widthFix" wx:key="unique" />
    </view>
  </view>
  <view class="bottom-btn" wx:if="{{!openAttr}}">
    <!-- 首页 -->
    <view class="l l-index" bindtap="goIndex">
      <image class="icon" src="/static/images/icon_index.png"></image>
    </view>
    <!-- 客服 -->
    <view class="l l-service">
      <!-- <button class="kf_button" open-type="contact" session-from="weapp">
        <image class="kf_image" src="/static/images/detail_kefu.png"></image>
      </button> -->
      <view class="df_1 l_h15">
        <contact-button size="27" class='pos' session-from="weapp"></contact-button>
        <image class="icon_kf" src="/static/images/detail_kefu.png"></image>
      </view>
    </view>
    <!-- 购物车 -->
    <view class="l l-cart">
      <view class="box">
        <text wx:if="{{cartGoodsCount>0}}" class="cart-count">{{cartGoodsCount}}</text>
        <image bindtap="openCartPage" class="shopcar" src="/static/images/icon_shopcar.png"></image>
      </view>
    </view>
    <view class="c" bindtap="addToCart">添加购物车</view>
    <view hidden='true' class="r" bindtap="addFast">购买</view>
  </view>
  <!-- 选择规格属性 -->
  <view wx:if="{{openAttr}}" class="animation-element-wrapper">
    <view class="blank" bindtap='closePop' />
    <view class="attr-pop">
      <view class="img-info">
        <image class="img" src="{{selectedImg}}"></image>
        <view class="info">
          <view class="c">
            <view class="p">￥{{selectedPrice}}</view>
            <view class="s">库存{{selectedNumCurrent}}{{goods.unit}}</view>
            <view class="a">{{checkedSpecText}}</view>
          </view>
        </view>
        <image class="imgClose" src="/static/images/icon_close.png" bindtap='closePop'></image>
      </view>
      <!-- 规格 -->
      <scroll-view class="spec-con" scroll-y='true'>
        <view class="spec-item" wx:for="{{attributeList}}" wx:key="name">
          <view class="name">{{item.name}}</view>
          <view class="values">
            <view class="value {{vitem.checked?'selected':''}}" bindtap="clickSkuValue" wx:for-item="vitem" wx:for="{{item.valueList}}" wx:key="id" data-value-id="{{vitem.id}}" data-value="{{item.name}}">
              {{vitem.value}}
            </view>
          </view>
        </view>
        <!-- 数量 -->
        <view class="number-item">
          <view class="name">数量</view>
          <view class="selnum">
            <view class="cut" bindtap="cutNumber">-</view>
            <!-- 数字键盘有点问题  so先disabled-->
            <input value="{{number}}" class="number" type="number" confirm-type='done' disabled='true' bindconfirm='confirmNum' />
            <view class="add" bindtap="addNumber">+</view>
          </view>
        </view>
      </scroll-view>
      <!-- 确定  #E64340-->
      <button class="btnConfirm" type='warn' bindtap="btnConfirm"> 确定 </button>
    </view>
  </view>
  <view wx:if="{{openCoupon}}" class="animation-element-wrapper">
    <view class="blank" bindtap='closeCoupon'/>
    <view class="coupon-pop">
      <view class="coupon-info">
        <image class="imgClose" src="/static/images/icon_close.png" bindtap='closeCoupon'></image>
        <view class="txtHeader">优惠券</view>
      </view>
      <view class='txtBody'>可领取优惠券</view>
      <scroll-view class="coupon-con" scroll-y='true'>
        <couponListView is-hidden="{{isHidden}}" coupon-list="{{couponList}}" />
      </scroll-view>
    </view>
  </view>
</scroll-view>

js:

var app = getApp();
var WxParse = require('../../lib/wxParse/wxParse.js');
var util = require('../../utils/util.js');
var api = require('../../config/api.js');
var user = require('../../services/user.js');

Page({
  data: {
    goods: {},
    attributeList: [],
    cartGoodsCount: 0,
    userHasCollect: 0,
    number: 1,
    checkedSpecText: '请选择规格数量',
    openAttr: false,
    noCollectImage: "/static/images/icon_collect.png",
    hasCollectImage: "/static/images/icon_collect_checked.png",
    collectBackImage: "/static/images/icon_collect.png",

    id: 0,
    name: '',
    price: 0.00,
    priceMart: 0.00,
    numCurrent: 0,
    unit: '',
    imageList: [],
    nodes: [],
    isCollect: true,
    selectedImg: '',
    selectedPrice: 0,
    selectedNumCurrent: 0,
    ids: '',
    commitWay: 0,
    noScrollHeight: '100%',
    goodsAttributeId: '0',
    openCoupon: false,
    couponList: [],
  },
  getGoodsInfo: function() {
    let that = this;
    util.request(api.GoodsDetail, {
      id: that.data.id
    }).then(function(res) {
      if (res.errno === 0) {

        that.setData({
          goods: res.data,
          selectedImg: res.data.imageList[0].imageUrl,
          selectedPrice: res.data.price,
          selectedNumCurrent: res.data.numCurrent,
          cartGoodsCount: res.data.shopcarNum,
        });
      }
    });

  },

  getGoodsIntroduction: function() {
    let that = this;
    util.request(api.GoodsIntroduction, {
      id: that.data.id
    }).then(function(res) {
      if (res.errno === 0) {
        that.setData({
          nodes: res.data,
        });
      }
    });
  },
  getAttributeList: function() {
    let that = this;
    util.request(api.AttributeList, {
      id: that.data.id
    }).then(function(res) {
      if (res.errno === 0) {
        let _attributeList = res.data.attributeList;
        // 如果仅仅只存在一个规格，那么商品页面初始化时默认checked
        if (_attributeList.length == 1) {
          if (_attributeList[0].valueList.length == 1) {
            _attributeList[0].valueList[0].checked = true
            that.setData({
              'checkedSpecText': "已选择：" + _attributeList[0].valueList[0].value,
              'ids': '' + _attributeList[0].valueList[0].id
            });
            that.getNumAndPrice();
          }
        }
        that.setData({
          attributeList: _attributeList,
        });

      }
    });
  },
  getNumAndPrice: function() {
    let that = this;
    util.request(api.NumAndPrice, {
      id: that.data.id,
      ids: that.data.ids
    }).then(function(res) {
      if (res.errno === 0) {
        if (!util.isBlank(res.data)) {
          that.setData({
            selectedPrice: res.data.price,
            selectedNumCurrent: res.data.numCurrent,
            selectedImg: res.data.imageUrl,
            goodsAttributeId: res.data.id,
          });
        } else {
          that.setData({
            selectedPrice: that.data.goods.price,
            selectedNumCurrent: 0,
            selectedImg: that.data.goods.imageList[0].imageUrl,
          });
        }
      }
    });
  },

  clickSkuValue: function(event) {
    let that = this;
    let specName = event.currentTarget.dataset.value;
    let specValueId = event.currentTarget.dataset.valueId;

    //TODO 性能可优化，加文末链接入群探讨
    let _attributeList = this.data.attributeList;
    for (let i = 0; i < _attributeList.length; i++) {
      if (_attributeList[i].name === specName) {
        for (let j = 0; j < _attributeList[i].valueList.length; j++) {
          if (_attributeList[i].valueList[j].id == specValueId) {
            //如果已经选中，则反选
            if (_attributeList[i].valueList[j].checked) {
              _attributeList[i].valueList[j].checked = false;
            } else {
              _attributeList[i].valueList[j].checked = true;
            }
          } else {
            _attributeList[i].valueList[j].checked = false;
          }
        }
      }
    }
    this.setData({
      'attributeList': _attributeList,
    });
    //重新计算spec改变后的信息
    this.changeSpecInfo();
    this.getNumAndPrice();
    //重新计算哪些值不可以点击,先不做
  },
  /*
   *返回已选属性的list
   */
  getCheckedSpecValue: function() {
    let checkedValues = [];
    let _attributeList = this.data.attributeList;
    for (let i = 0; i < _attributeList.length; i++) {
      let _checkedObj = {
        //name: _attributeList[i].specification,
        name: _attributeList[i].name,
        valueId: 0,
        valueText: ''
      };
      for (let j = 0; j < _attributeList[i].valueList.length; j++) {
        if (_attributeList[i].valueList[j].checked) {
          _checkedObj.valueId = _attributeList[i].valueList[j].id;
          _checkedObj.valueText = _attributeList[i].valueList[j].value;
          //checkedValues.push(_checkedObj);//放在这里，就不用过滤valueId为0的
        }
      }
      checkedValues.push(_checkedObj);
    }

    return checkedValues;

  },
  //根据已选的值，计算其它值的状态
  setSpecValueStatus: function() {

  },
  //判断规格是否选择完整
  isCheckedAllSpec: function() {
    return !this.getCheckedSpecValue().some(function(v) {
      if (v.valueId == 0) {
        return true;
      }
    });
  },
  getCheckedSpecKey: function() {
    let checkedValue = this.getCheckedSpecValue().map(function(v) {
      return v.valueId;
    });

    return checkedValueId;
  },
  getCheckedSpecText: function() {
    let checkedValue = this.getCheckedSpecValue().map(function(v) {
      return v.valueText;
    });

    return checkedValueText;
  },
  changeSpecInfo: function() {

    let checkedNameValue = this.getCheckedSpecValue();

    //设置选择的信息 （获取已选属性的文本数组？）
    let checkedValue = checkedNameValue.filter(function(v) {
      if (v.valueId != 0) {
        return true;
      } else {
        return false;
      }
    }).map(function(v) {
      return v.valueText;
    });
    let checkedValueId = checkedNameValue.filter(function(v) {
      if (v.valueId != 0) {
        return true;
      } else {
        return false;
      }
    }).map(function(v) {
      return v.valueId;
    });
    if (checkedValue.length > 0) {
      this.setData({
        'checkedSpecText': checkedValue.join('　'),
        'ids': checkedValueId.join(',')
      });
    } else {
      this.setData({
        'checkedSpecText': '请选择规格数量'
      });
    }
  },
  onLoad: function(options) {
    // 页面初始化 options为页面跳转所带来的参数
    if (options.id) {
      this.setData({
        id: parseInt(options.id)
      });
      this.getGoodsInfo();
      this.getGoodsIntroduction();
      this.getCouponList();
    }
  },
  onReady: function() {
    // 页面渲染完成

  },
  onShow: function() {
    
  },
  onHide: function() {
    // 页面隐藏

  },
  onUnload: function() {
    // 页面关闭

  },
  //收藏
  closeAttrOrCollect: function() {
    let that = this;
    if (this.data.isCollect) {
      this.setData({
        isCollect: false,
        collectBackImage: this.data.hasCollectImage
      });
    } else {
      this.setData({
        isCollect: true,
        collectBackImage: this.data.noCollectImage
      });
    }
    return;
    //添加或是取消收藏
    util.request(api.CollectAddOrDelete, {
        typeId: 0,
        valueId: this.data.id
      }, "POST")
      .then(function(res) {
        let _res = res;
        if (_res.errno == 0) {
          if (_res.data.type == 'add') {
            that.setData({
              'collectBackImage': that.data.hasCollectImage
            });
          } else {
            that.setData({
              'collectBackImage': that.data.noCollectImage
            });
          }

        } else {
          wx.showToast({
            image: '/static/images/icon_error.png',
            title: _res.errmsg,
            mask: true
          });
        }

      });
    //}

  },
  openCartPage: function() {
    wx.switchTab({
      url: '/pages/cart/cart'
    });
  },
  addToCart: function(commitWay) {
    var that = this;
    if (this.data.openAttr == false) {
      this.setData({
        commitWay: 1,
      });
      this.openPop();
    } else {
      //提示选择完整规格
      if (!this.isCheckedAllSpec()) {
        wx.showToast({
          image: '/static/images/icon_error.png',
          title: '请选择完整规格'
        });
        return false;
      }

      //验证库存
      if (this.data.selectedNumCurrent < this.data.number) {
        wx.showToast({
          image: '/static/images/icon_error.png',
          title: '没有库存'
        });
        return false;
      }

      //添加到购物车
      util.request(api.CartAdd, {
          goodsId: this.data.goods.id,
          goodsAttributeId: this.data.goodsAttributeId,
          number: this.data.number,
          setmealId: 0,
          activeId: 0,
          isSetmeal: 0,
          isJoinActivte: 0
        }, "POST")
        .then(function(res) {
          let _res = res;
          if (_res.errno == 0) {
            that.closePop();
            that.setData({
              cartGoodsCount: _res.data.shopcarNum,
            });
            wx.showToast({
              title: '添加成功'
            });
          } else {
            wx.showToast({
              image: '/static/images/icon_error.png',
              title: _res.errmsg,
              mask: true
            });
          }
        });
    }

  },
  cutNumber: function() {
    this.setData({
      number: (this.data.number - 1 > 1) ? this.data.number - 1 : 1
    });
  },
  addNumber: function() {
    if (this.data.number < this.data.selectedNumCurrent) {
      this.setData({
        number: this.data.number + 1
      });
    }
  },
  confirmNum: function() {
    if (this.data.number > this.data.selectedNumCurrent || this.data.number == 0) {
      util.showErrToast("数量超出范围");
    }
  },
  goIndex: function() {
    wx.switchTab({
      url: '/pages/index/index',
    })
  },
  openPop: function() {
    let _this = this;
    wx.getSystemInfo({
      success: function(res) {
        let data = res.screenHeight + 'rpx';
        _this.setData({
          noScrollHeight: data
        });
      },
    })
    if (this.data.openAttr == false) {
      //打开规格选择窗口
      this.setData({
        openAttr: true,
        num: 1,
      });
      this.getAttributeList();
    }
  },
  closePop: function() {
    this.setData({
      openAttr: false,
      noScrollHeight: '100%',
    });
  },
  btnConfirm: function() {
    if (this.data.commitWay == 1) {
      this.addToCart();
    } else if (this.data.commitWay == 2) {
      this.addFast();
    }
  },
  onShareAppMessage: function() {
    return {
      title: app.globalData.mallName,
      desc: this.data.goods.name,
      path: '/pages/goods/goods?id=' + this.data.id,
    }
  },
  openCoupon() {
    let _this = this;
    wx.getSystemInfo({
      success: function(res) {
        let data = res.screenHeight + 'rpx';
        _this.setData({
          noScrollHeight: data
        });
      },
    })
    if (this.data.openCoupon == false) {
      this.setData({
        openCoupon: true,
      });
    }
  },
  closeCoupon() {
    this.setData({
      openCoupon: false,
      noScrollHeight: '100%',
    });
  },
  getCouponList: function () {
    let that = this;
    util.request(api.CouponList, { sceneType: 2, goodsId: that.data.id, categoryId:0},"POST").then(function (res) {
      if (res.errno === 0) {
        that.setData({
          couponList: res.data,
        });
      }
    });
  },
})

 

点击加入群聊【小程序/HTML/WPF交流】，一起学习交流:663077768

时间原因，有些代码可优化，加群一起探讨，如果需要wxss，群里也有，效果图如下