微信小程序商城开发之动态API实现商品的详情页的代码（下）

<!-- 底部悬浮栏 --><view>  <image></image>    <view></view>   <image></image>   <button>加入购物车</button>  <button>立即购买</button></view><!--加入购物车-->#template模板引用<import></import><view>      <view></view>      <view>        <view>          <icon></icon>          <image></image>          <view>            <text>￥{{goods.totalMoney}}</text>            <text>销量 {{goods.buyRate}} 件</text>            <text>商品编码：{{goods.goodsId}}</text>          </view>        </view>        <text></text>        <view>          <text>购买数量</text>          <view>              <!-- <template is="quantity"  data="{{ ...item,index:index}}" />  -->               <template></template>           </view>        </view>        <text></text>        <button>确定</button>      </view>    </view>

#template 模板引用 @import "../template/template.wxss"; /* sku选择 */.dialog__mask {  position: fixed;  top: 0;  left: 0;  right: 0;  bottom: 0;  z-index: 10;  background: rgba(0, 0, 0, 0.7);  display: none;}.dialog__container {  position: fixed;  bottom: 0;  width: 100%;  background: white;  transform: translateY(150%);  transition: all 0.4s ease;  z-index: 11;}.dialog--show .dialog__container {  transform: translateY(0);}.dialog--show .dialog__mask {  display: block;}.image-sku {  width: 200rpx;  height: 200rpx;  z-index: 12;  position: absolute;  left: 20px;  top: -30px;  border-radius: 20rpx;}.image-close {  width: 40rpx;  height: 40rpx;  position: fixed;  right: 20rpx;  top: 10rpx;}.column {  display: flex;  flex-direction: column;}.row {  display: flex;  flex-direction: row;  align-items: center;}.border-line {  width: 100%;  height: 2rpx;  display: inline-block;  margin: 30rpx 0rpx;  background-color: gainsboro;  text-align: center;}.sku-title {  position: relative;  left: 300rpx;  margin: 1rpx;}.sku-price {  color: red;  position: relative;  left: 300rpx;  margin: 1rpx;}.row .quantity-position {  position: absolute;  right: 30rpx;  display: flex;    justify-content: center;    flex-direction: column;  }

// 收藏-修改收藏状态  addLike() {    this.setData({      isLike: !this.data.isLike    });ajax.request({      method: 'GET',      url: 'collection/addShopCollection?key=' + utils.key + '&goodsId=' + goodsId,      success: data => {        console.log("收藏返回结果：" + data.message)        wx.showToast({          title: data.message,          icon: 'success',          duration: 2000        });      }    })  },// 立即购买-待开发  immeBuy() {    wx.showToast({      title: '购买成功',      icon: 'success',      duration: 2000    });  },// 跳到购物车-待开发  toCar() {    wx.navigateTo({      url: '../cart/cart'    })  }, /**   * sku 弹出   */  toggleDialog: function () {    this.setData({      showDialog: !this.data.showDialog    });  },  /**   * sku 关闭   */  closeDialog: function () {    console.info("关闭");    this.setData({      showDialog: false    });  },/* 减数 */  delCount: function (e) {    console.log("刚刚您点击了减1");    var count = this.data.goods.count;    // 商品总数量-1    if (count > 1) {      this.data.goods.count--;    }    // 将数值与状态写回      this.setData({      goods: this.data.goods    });    this.priceCount();  },  /* 加数 */  addCount: function (e) {    console.log("刚刚您点击了加1");    var count = this.data.goods.count;    // 商品总数量-1      if (count < 10) {      this.data.goods.count++;    }    // 将数值与状态写回      this.setData({      goods: this.data.goods    });    this.priceCount();  },  //价格计算  priceCount: function (e) {    this.data.goods.totalMoney = this.data.goods.price * this.data.goods.count;    this.setData({      goods: this.data.goods    })  },/* 减数 */  delCount: function (e) {    console.log("刚刚您点击了减1");    var count = this.data.goods.count;    // 商品总数量-1    if (count > 1) {      this.data.goods.count--;    }    // 将数值与状态写回      this.setData({      goods: this.data.goods    });    this.priceCount();  },  /* 加数 */  addCount: function (e) {    console.log("刚刚您点击了加1");    var count = this.data.goods.count;    // 商品总数量-1      if (count < 10) {      this.data.goods.count++;    }    // 将数值与状态写回      this.setData({      goods: this.data.goods    });    this.priceCount();  },  //价格计算  priceCount: function (e) {    this.data.goods.totalMoney = this.data.goods.price * this.data.goods.count;    this.setData({      goods: this.data.goods    })  },/**   * 加入购物车   */  addCar: function (e) {    var count = this.data.goods.count;    ajax.request({      method: 'GET',      url: 'carts/addShopCarts?key=' + utils.key + '&goodsId=' + goodsId + '&num=' + count,      success: data => {        console.log("加入购物车返回结果：" + data.message)        wx.showToast({          title: '加入购物车成功',          icon: 'success',          duration: 2000        });      }    })}