【愚公系列】2022年10月 微信小程序-电商项目-商品详情页面运费说明

---

前言

vant-weapp的van-cell单元格api

CellGroup Props

参数	说明	类型	默认值
title	分组标题	string	-
inset v1.7.2	是否展示为圆角卡片风格	boolean	false
border	是否显示外边框	boolean	true

CellGroup 外部样式类

类名	说明
custom-class	根节点样式类

Cell Props

参数	说明	类型	默认值
icon	左侧图标名称或图片链接，可选值见 Icon 组件	string	-
title	左侧标题	string/number	-
title-width	标题宽度，须包含单位	string	-
value	右侧内容	string / number	-
label	标题下方的描述信息	string	-
size	单元格大小，可选值为 large	string	-
border	是否显示下边框	boolean	true
center	是否使内容垂直居中	boolean	false
url	点击后跳转的链接地址	string	-
link-type	链接跳转类型，可选值为 redirectTo switchTab reLaunch	string	navigateTo
clickable	是否开启点击反馈	boolean	false
is-link	是否展示右侧箭头并开启点击反馈	boolean	false
required	是否显示表单必填星号	boolean	false
arrow-direction	箭头方向，可选值为 left up down	string	-
use-label-slot	是否使用 label slot	boolean	false
title-style v1.4.0	标题样式	string	-

Cell Event

事件名	说明	参数
bind:click	点击单元格时触发	-

Cell Slot

名称	说明
/	自定义value显示内容，如果设置了value属性则不生效
title	自定义title显示内容，如果设置了title属性则不生效
label	自定义label显示内容，需要设置 use-label-slot属性
icon	自定义icon显示内容，如果设置了icon属性则不生效
right-icon	自定义右侧按钮，默认是arrow，如果设置了is-link属性则不生效

Cell 外部样式类

类名	说明
custom-class	根节点样式类
title-class	标题样式类
label-class	描述信息样式类
value-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>

/* 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:{
    
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: 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
      })
    }
  },

})

{
    
    
  "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"
  }
}

二、效果