文章目录
前言一、商品详情页面规格选择功能实现二、效果前言
vant-weapp的Popup 弹出层api
Props
Events
外部样式类
一、商品详情页面规格选择功能实现
<!--pages/goods/index.wxml--><swiper indicator-dots style="height:300px;"><block wx:for="{{goodsImages}}" wx:key="*this"><swiper-item><van-image lazy-load loading="loading" fit="cover" width="100%" height="300" src="{{item.content}}" /></swiper-item></block></swiper><!-- 标题及价格 --><view style="background-color:white;padding: 10px 15px 0;font-family:'微软雅黑'"><view style="color:#C0A769;"><text style="font-size:11px;">￥</text><text style="font-size:18px;">{{goodsData.start_price}}</text></view><van-row><van-col span="16"><view style="color:black;font-size:16px;">{{goodsData.goods_name}}</view></van-col><van-col span="8" style="text-align:right;"><view class="iconfont icon-share share"> 分享</view></van-col></van-row><view style="color:#939697;font-size:11px;">{{goodsData.goods_desc}}</view></view><!-- 运费说明 --><van-cell-group border="{{false}}"><van-cell class="buydesc" title="全程护航，请放心购买" is-link /></van-cell-group><van-cell-group title=" "><van-cell value="" is-link><view slot="title"><text style="float: left;padding-right: 10px;font-size: 13px;color: gray;">运费</text><view>免运费</view></view></van-cell></van-cell-group><!-- 商品规格 --><van-cell-group title=" "><van-cell value="" is-link><view slot="title"><text style="float: left;padding-right: 10px;font-size: 13px;color: gray;">服务</text><view>收货后结算</view></view></van-cell><van-cell value="" is-link bind:click="showSkuPanelPopup"><view slot="title"><text style="float: left;padding-right: 10px;font-size: 13px;color: gray;">规格</text><view>{{selectedGoodsSkuObject.text || "选择"}}</view></view></van-cell></van-cell-group><!-- 商品描述 --><view style="padding:10px 10px 100px;"><van-image wx:for="{{goodsImages}}" wx:key="content" lazy-load loading="loading" fit="cover" width="100%" height="300" src="{{item.content}}" /><text>{{goodsContentInfo.content}}</text></view><!-- 购物车 --><van-goods-action><van-goods-action-icon icon="cart-o" text="购物车" info="0" /><van-goods-action-icon icon="shop-o" text="店铺" /><van-goods-action-button bindtap="addToCart" text="加入购物车" type="warning" /><van-goods-action-button text="立即购买" /></van-goods-action><!-- 商品规格 --><van-popup show="{{showSkuPanel}}" closeable position="bottom" round custom-style="min-height:200px;background-color: #efefef;" bind:close="onCloseSkuPanel"><view style="width:100%;background-color: #efefef;display:flex;padding:10px 10px 0;"><view><image style="width:100px;height:100px;border-radius:5px;" src="{{goodsImages[0].content}}" /></view><view style="flex:1;padding-left:10px;color: gray;padding-top: 10px;"><view>价格：{{selectedGoodsSku.price/100}}元</view><view>库存：{{selectedGoodsSku.stock}}</view><view>规格：<text wx:for="{{goodsSkuData.goodsAttrKeys}}" wx:key="attr_key" style="padding-right:5px;">{{selectedAttrValue[item.attr_key].attr_value}}</text></view></view></view><block wx:for="{{goodsSkuData.goodsAttrKeys}}" wx:key="attr_key"><van-cell-group title=" "><van-cell><view slot="title"><view class="van-cell-text">{{item.attr_key}}</view><block wx:for="{{item.goods_attr_values}}" wx:for-item="item2" wx:key="attr_value"><van-tag bindtap="onTapSkuTag" data-attrvalue="{{item2}}" data-attrkey="{{item.attr_key}}" plain="{{item2.id!=selectedAttrValue[item.attr_key].id}}" type="primary">{{item2.attr_value}}</van-tag></block></view></van-cell></van-cell-group></block><van-button bindtap="onConfirmGoodsSku" type="primary" size="large">确定</van-button></van-popup>
/* pages/goods/index.wxss *//* miniprogram/pages/goods/index.wxss */.price .van-cell__title{color: rgba(181,154,81,1);font-size: 20pt;}.title .van-cell__title{font-size: 17pt;}.buydesc .van-cell__title{font-size: 13px;}.share{font-size:11px;background-color:#F5F9FA;color:#767A7B;border-radius:30px;padding: 5px 10px;margin-right: -27px;width: 50px;text-align: center;float: right;}.van-tag{margin-left: 10px;}.van-popup{background-color: #efefef;}
// miniprogram/pages/goods/index.jsPage({/*** 页面的初始数据*/data: {showLoginPanel:false,showSkuPanel: false,goodsId:0,goodsData:{},goodsImages: [],goodsContentInfo:{},goodsSkuData:{},selectedGoodsSku:{},selectedAttrValue:{},selectedGoodsSkuObject:{}},/*** 生命周期函数--监听页面加载*/onLoad: async function (options) {let goodsId = options.goodsIdthis.data.goodsId = goodsIdconst eventChannel = this.getOpenerEventChannel()eventChannel.on('goodsData', (res)=> {console.log(res)let goodsImages = res.data.goods_infos.filter(item=>(item.kind == 0))let goodsContentInfo = res.data.goods_infos.filter(item=>(item.kind == 1))[0]this.setData({goodsData:res.data,goodsImages,goodsContentInfo})})// 拉取sku规格数据let goodsSkuDataRes = await wx.wxp.request({url: `http://localhost:3000/goods/goods/${goodsId}/sku`,})if (goodsSkuDataRes){let goodsSkuData = goodsSkuDataRes.data.data this.setData({goodsSkuData})}},// 显示规格面板showSkuPanelPopup() {this.setData({showSkuPanel: true });},// 关闭规格面板onCloseSkuPanel(){this.setData({showSkuPanel: false });},//选择商品规格onTapSkuTag(e){// 获取及设置选择的规格let attrvalue = e.currentTarget.dataset.attrvaluelet attrKey = e.currentTarget.dataset.attrkeyconsole.log('attrvalueid',attrvalue,attrKey);let selectedAttrValue = this.data.selectedAttrValueselectedAttrValue[attrKey] = attrvaluethis.setData({selectedAttrValue})// 计算价格及库存let totalIdValue = 0let goodsAttrKeys = this.data.goodsSkuData.goodsAttrKeysfor (let j=0;j<goodsAttrKeys.length;j++){let attrKey = goodsAttrKeys[j].attr_keyif (selectedAttrValue[attrKey]){totalIdValue+=selectedAttrValue[attrKey].id}}console.log("totalIdValue", totalIdValue);let goodsSku = this.data.goodsSkuData.goodsSkulet tempTotalIdValue = 0for(let j=0;j<goodsSku.length;j++){let goodsAttrPath = goodsSku[j].goods_attr_path if (goodsAttrPath.length != goodsAttrKeys.length){break}tempTotalIdValue = 0goodsAttrPath.forEach(item=>tempTotalIdValue += item)console.log("tempTotalIdValue",tempTotalIdValue);if (tempTotalIdValue == totalIdValue){let selectedGoodsSku = goodsSku[j]this.setData({selectedGoodsSku})break;}}},// 确定选择当前规格onConfirmGoodsSku(){let goodsSkuData = this.data.goodsSkuDatalet selectedGoodsSkuObject = this.data.selectedGoodsSkuObjectselectedGoodsSkuObject.sku = Object.assign({}, this.data.selectedGoodsSku)selectedGoodsSkuObject.text = ''for (let j=0;j<goodsSkuData.goodsAttrKeys.length;j++){let item = goodsSkuData.goodsAttrKeys[j]if (!this.data.selectedAttrValue[item.attr_key]){wx.showModal({title: '没有选择全部规格',showCancel:false})return}selectedGoodsSkuObject.text += this.data.selectedAttrValue[item.attr_key].attr_value + ' '}this.setData({selectedGoodsSkuObject,showSkuPanel: false})},})
{"usingComponents": {"van-image": "@vant/weapp/image/index","van-row": "@vant/weapp/row/index","van-col": "@vant/weapp/col/index","van-cell": "@vant/weapp/cell/index","van-cell-group": "@vant/weapp/cell-group/index","van-popup": "@vant/weapp/popup/index","van-button": "@vant/weapp/button/index","van-tag": "@vant/weapp/tag/index","van-goods-action": "@vant/weapp/goods-action/index","van-goods-action-icon": "@vant/weapp/goods-action-icon/index","van-goods-action-button": "@vant/weapp/goods-action-button/index","LoginPanel":"../../components/login"}}
