#yyds干货盘点#愚公系列2023年02月 微信小程序-电商项目-商品详情页面的标题及价格功能实现

Posted 2023-02-07

前言

vant-weapp的Layout布局api

Row Props

参数	说明	类型	默认值
gutter	列元素之间的间距（单位为 px）	string/number	-

Col Props

参数	说明	类型	默认值
span	列元素宽度	string /number	-
offset	列元素偏移距离	string / number	-

外部样式类

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

基础使用： Layout 组件提供了24列栅格，通过在Col上添加span属性设置列所占的宽度百分比。此外，添加offset属性可以设置列的偏移宽度，计算方式与 span 相同。

<van-row>
  <van-col span="8">span: 8</van-col>
  <van-col span="8">span: 8</van-col>
  <van-col span="8">span: 8</van-col>
</van-row>

<van-row>
  <van-col span="4">span: 4</van-col>
  <van-col span="10" offset="4">offset: 4, span: 10</van-col>
</van-row>

<van-row>
  <van-col offset="12" span="12">offset: 12, span: 12</van-col>
</van-row>

<van-row gutter="20">
  <van-col span="8">span: 8</van-col>
  <van-col span="8">span: 8</van-col>
  <van-col span="8">span: 8</van-col>
</van-row>

一、商品详情页面的轮播图功能实现

<!--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>

/* 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"
  

二、效果