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

举报
愚公搬代码 发表于 2022/10/31 19:23:03 2022/10/31
【摘要】 前言vant-weapp的van-goods-action商品导航apiGoodsAction Props参数说明类型默认值safe-area-inset-bottom是否为 iPhoneX 留出底部安全距离booleantrueGoodsActionIcon Props参数说明类型默认值text按钮文字string-icon图标类型,可选值见icon组件string-info图标右上角提...

前言

vant-weapp的van-goods-action商品导航api

GoodsAction Props

参数 说明 类型 默认值
safe-area-inset-bottom 是否为 iPhoneX 留出底部安全距离 boolean true

GoodsActionIcon Props

参数 说明 类型 默认值
text 按钮文字 string -
icon 图标类型,可选值见icon组件 string -
info 图标右上角提示信息 string/ number -
url 点击后跳转的链接地址 string -
link-type 链接跳转类型,可选值为 redirectTo switchTab reLaunch string navigateTo
id 标识符 string -
disabled 是否禁用按钮 boolean false
loading 是否显示为加载状态 boolean false
open-type 微信开放能力,具体支持可参考 微信官方文档 string -
app-parameter 打开 APP 时,向 APP 传递的参数 string -
lang 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文 string en
session-from 会话来源 string -
send-message-title 会话内消息卡片标题 string 当前标题
send-message-path 会话内消息卡片点击跳转小程序路径 string 当前分享路径
send-message-img sendMessageImg string 截图
show-message-card 显示会话内消息卡片 string false
class-prefix v1.10.1 类名前缀 string van-icon

GoodsActionButton Props

参数 说明 类型 默认值
text 按钮文字 string -
color 按钮颜色,支持传入 linear-gradient 渐变色 string -
url 点击后跳转的链接地址 string -
link-type 链接跳转类型,可选值为 redirectTo switchTab reLaunch string navigateTo
id 标识符 string -
type 按钮类型,可选值为 primary warning danger string danger
plain 是否为朴素按钮 boolean false
size 按钮尺寸,可选值为 normal large small mini string normal
disabled 是否禁用按钮 boolean false
loading 是否显示为加载状态 boolean false
open-type 微信开放能力,具体支持可参考 微信官方文档 string -
app-parameter 打开 APP 时,向 APP 传递的参数 string -
lang 指定返回用户信息的语言,zh_CN 简体中文,zh_TW 繁体中文,en 英文 string en
session-from 会话来源 string -
send-message-title 会话内消息卡片标题 string 当前标题
send-message-path 会话内消息卡片点击跳转小程序路径 string 当前分享路径
send-message-img sendMessageImg string 截图
show-message-card 显示会话内消息卡片 string false

Events

事件名 说明 参数
bind:click 按钮点击事件回调 -

GoodsActionIcon Slot

名称 说明
icon 自定义图标

GoodsActionButton Slot

名称 说明
/ 按钮显示内容

GoodsActionIcon 外部样式类

名称 说明
icon-class 图标样式类
text-class 文字样式类

GoodsActionButton 外部样式类

名称 说明
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>
/* 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"
  }
}

二、效果

在这里插入图片描述

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。