前言
vant-weapp的Popup 弹出层api
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| show | 是否显示弹出层 | boolean | false |
| z-index | z-index 层级 | number | 100 |
| overlay | 是否显示遮罩层 | boolean | true |
| position | 弹出位置，可选值为 top bottom right left | string | center |
| duration | 动画时长，单位为毫秒 | number/object | 300 |
| round | 是否显示圆角 | boolean | false |
| custom-style | 自定义弹出层样式 | string | '' |
| overlay-style | 自定义遮罩层样式 | string | '' |
| close-on-click-overlay | 是否在点击遮罩层后关闭 | boolean | true |
| closeable | 是否显示关闭图标 | boolean | false |
| close-icon | 关闭图标名称或图片链接 | string | cross |
| safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | boolean | true |
| safe-area-inset-top | 是否留出顶部安全距离（状态栏高度） | boolean | false |
| lock-scroll v1.7.3 | 是否锁定背景滚动 | boolean | true |
Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| bind:close | 关闭弹出层时触发 | - |
| bind:click-overlay | 点击遮罩层时触发 | - |
| bind:before-enter | 进入前触发 | - |
| bind:enter | 进入中触发 | - |
| bind:after-enter | 进入后触发 | - |
| bind:before-leave | 离开前触发 | - |
| bind:leave | 离开中触发 | - |
| bind:after-leave | 离开后触发 | - |
外部样式类
| 类名 | 说明 |
|---|---|
| custom-class | 根节点样式类 |
一、商品详情页面规格选择功能实现
<!--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.js
Page({
/**
* 页面的初始数据
*/
data: {
showLoginPanel:false,
showSkuPanel: false,
goodsId:0,
goodsData:{},
goodsImages: [],
goodsContentInfo:{},
goodsSkuData:{},
selectedGoodsSku:{},
selectedAttrValue:{},
selectedGoodsSkuObject:{}
},
/**
* 生命周期函数--监听页面加载
*/
onl oad: async function (options) {
let goodsId = options.goodsId
this.data.goodsId = goodsId
const 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.attrvalue
let attrKey = e.currentTarget.dataset.attrkey
console.log('attrvalueid',attrvalue,attrKey);
let selectedAttrValue = this.data.selectedAttrValue
selectedAttrValue[attrKey] = attrvalue
this.setData({
selectedAttrValue
})
// 计算价格及库存
let totalIdValue = 0
let goodsAttrKeys = this.data.goodsSkuData.goodsAttrKeys
for (let j=0;j<goodsAttrKeys.length;j++){
let attrKey = goodsAttrKeys[j].attr_key
if (selectedAttrValue[attrKey]){
totalIdValue+=selectedAttrValue[attrKey].id
}
}
console.log("totalIdValue", totalIdValue);
let goodsSku = this.data.goodsSkuData.goodsSku
let tempTotalIdValue = 0
for(let j=0;j<goodsSku.length;j++){
let goodsAttrPath = goodsSku[j].goods_attr_path
if (goodsAttrPath.length != goodsAttrKeys.length){
break
}
tempTotalIdValue = 0
goodsAttrPath.forEach(item=>tempTotalIdValue += item)
console.log("tempTotalIdValue",tempTotalIdValue);
if (tempTotalIdValue == totalIdValue){
let selectedGoodsSku = goodsSku[j]
this.setData({
selectedGoodsSku
})
break;
}
}
},
// 确定选择当前规格
onConfirmGoodsSku(){
let goodsSkuData = this.data.goodsSkuData
let selectedGoodsSkuObject = this.data.selectedGoodsSkuObject
selectedGoodsSkuObject.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"
}
}
二、效果
