【愚公系列】2022年11月 微信小程序-优购电商项目-商品列表⻚⾯

2022-11-14 17:10:26 浏览数 (1)

文章目录

  • 前言
  • 一、商品详情页
    • 1.业务逻辑
    • 2.涉及的接口数据
    • 3. 关键技术
  • 二、商品列表⻚⾯相关代码
    • 1.tabs组件
    • 2.页面代码
    • 3.效果

前言

商品详情页是展示商品详细信息的一个页面，承载在网站的大部分流量和订单的入口。京东商城目前有通用版、全球购、闪购、易车、惠买车、服装、拼购、今日抄底等许多套模板。各套模板的元数据是一样的，只是展示方式不一样。目前商品详情页个性化需求非常多，数据来源也是非常多的，而且许多基础服务做不了的都放我们这，因此我们需要一种架构能快速响应和优雅的解决这些需求问题。因此我们重新设计了商品详情页的架构，主要包括三部分：商品详情页系统、商品详情页统一服务系统和商品详情页动态服务系统；商品详情页系统负责静的部分，而统一服务负责动的部分，而动态服务负责给内网其他系统提供一些数据服务。

一、商品详情页

1.业务逻辑

  1. 加载商品列表数据
  2. 启⽤下拉⻚⾯功能
  3. ⻚⾯的json⽂件中开启设置 enablePullDownRefresh:true
  4. ⻚⾯的js中，绑定事件 onPullDownRefresh
  5. 启⽤上拉⻚⾯功能 onReachBottom ⻚⾯触底事件
  6. 加载下⼀⻚功能

2.涉及的接口数据

  1. 商品列表搜索
代码语言：javascript复制
{
    "message": {
        "total": 57445, 
        "pagenum": 1, 
        "goods": [
            {
                "goods_id": 57445, 
                "cat_id": 9, 
                "goods_name": "创维（Skyworth）65V9E 65英寸25核4K HDR高清智能电视", 
                "goods_price": 6499, 
                "goods_number": 100, 
                "goods_weight": 100, 
                "goods_big_logo": "", 
                "goods_small_logo": "", 
                "add_time": 1516663280, 
                "upd_time": 1516663280, 
                "hot_mumber": 0, 
                "is_promote": false, 
                "cat_one_id": 1, 
                "cat_two_id": 3, 
                "cat_three_id": 9
            }, 
            {
                "goods_id": 57444, 
                "cat_id": 9, 
                "goods_name": "创维（Skyworth）42X6 42英寸10核智能酷开网络平板液晶电视（黑色）", 
                "goods_price": 1899, 
                "goods_number": 100, 
                "goods_weight": 100, 
                "goods_big_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_800x800.jpg", 
                "goods_small_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0070078057-000000000634917020_1_400x400.jpg", 
                "add_time": 1516663280, 
                "upd_time": 1516663280, 
                "hot_mumber": 0, 
                "is_promote": false, 
                "cat_one_id": 1, 
                "cat_two_id": 3, 
                "cat_three_id": 9
            }, 
            {
                "goods_id": 57443, 
                "cat_id": 9, 
                "goods_name": "创维(Skyworth) 65M6E 65英寸 4K超高清智能酷开网络液晶电视", 
                "goods_price": 4999, 
                "goods_number": 100, 
                "goods_weight": 100, 
                "goods_big_logo": "", 
                "goods_small_logo": "", 
                "add_time": 1516663280, 
                "upd_time": 1516663280, 
                "hot_mumber": 0, 
                "is_promote": false, 
                "cat_one_id": 1, 
                "cat_two_id": 3, 
                "cat_three_id": 9
            }, 
            {
                "goods_id": 57442, 
                "cat_id": 9, 
                "goods_name": "创维彩电40G6A", 
                "goods_price": 2999, 
                "goods_number": 100, 
                "goods_weight": 100, 
                "goods_big_logo": "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000601395527_1_800x800.jpg", 
                "goods_small_logo": "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000601395527_1_400x400.jpg", 
                "add_time": 1516663277, 
                "upd_time": 1516663277, 
                "hot_mumber": 0, 
                "is_promote": false, 
                "cat_one_id": 1, 
                "cat_two_id": 3, 
                "cat_three_id": 9
            }, 
            {
                "goods_id": 57441, 
                "cat_id": 9, 
                "goods_name": "创维(Skyworth) G7 4K超高清彩电HDR 智能网络液晶平板电视(玫瑰金) 65G7 (65英寸)", 
                "goods_price": 9699, 
                "goods_number": 100, 
                "goods_weight": 100, 
                "goods_big_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000168415104_1_800x800.jpg", 
                "goods_small_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000168415104_1_400x400.jpg", 
                "add_time": 1516663273, 
                "upd_time": 1516663273, 
                "hot_mumber": 0, 
                "is_promote": false, 
                "cat_one_id": 1, 
                "cat_two_id": 3, 
                "cat_three_id": 9
            }, 
            {
                "goods_id": 57440, 
                "cat_id": 9, 
                "goods_name": "创维彩电55G3", 
                "goods_price": 4699, 
                "goods_number": 100, 
                "goods_weight": 100, 
                "goods_big_logo": "http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000632066713_1_800x800.jpg", 
                "goods_small_logo": "http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000632066713_1_400x400.jpg", 
                "add_time": 1516663269, 
                "upd_time": 1516663269, 
                "hot_mumber": 0, 
                "is_promote": false, 
                "cat_one_id": 1, 
                "cat_two_id": 3, 
                "cat_three_id": 9
            }, 
            {
                "goods_id": 57439, 
                "cat_id": 9, 
                "goods_name": "创维电视55G720S 55英寸4色4K 23核智能彩电网络液晶平板电视", 
                "goods_price": 4999, 
                "goods_number": 100, 
                "goods_weight": 100, 
                "goods_big_logo": "http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000611474169_1_800x800.jpg", 
                "goods_small_logo": "http://image5.suning.cn/uimg/b2c/newcatentries/0000000000-000000000611474169_1_400x400.jpg", 
                "add_time": 1516663265, 
                "upd_time": 1516663265, 
                "hot_mumber": 0, 
                "is_promote": false, 
                "cat_one_id": 1, 
                "cat_two_id": 3, 
                "cat_three_id": 9
            }, 
            {
                "goods_id": 57438, 
                "cat_id": 9, 
                "goods_name": "创维（Skyworth）55H9A 55英寸超薄 全面屏 4K超高清智能电视(黑色)", 
                "goods_price": 3999, 
                "goods_number": 100, 
                "goods_weight": 100, 
                "goods_big_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000185518945_2_800x800.jpg", 
                "goods_small_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000185518945_2_400x400.jpg", 
                "add_time": 1516663261, 
                "upd_time": 1516663261, 
                "hot_mumber": 0, 
                "is_promote": false, 
                "cat_one_id": 1, 
                "cat_two_id": 3, 
                "cat_three_id": 9
            }, 
            {
                "goods_id": 57437, 
                "cat_id": 9, 
                "goods_name": "创维（Skyworth）55V6 55英寸 4色4K超高清 18核 智能网络液晶电视 银色", 
                "goods_price": 3099, 
                "goods_number": 100, 
                "goods_weight": 100, 
                "goods_big_logo": "http://image3.suning.cn/uimg/b2c/newcatentries/0070078057-000000000136928577_1_800x800.jpg", 
                "goods_small_logo": "http://image3.suning.cn/uimg/b2c/newcatentries/0070078057-000000000136928577_1_400x400.jpg", 
                "add_time": 1516663258, 
                "upd_time": 1516663258, 
                "hot_mumber": 0, 
                "is_promote": false, 
                "cat_one_id": 1, 
                "cat_two_id": 3, 
                "cat_three_id": 9
            }, 
            {
                "goods_id": 57436, 
                "cat_id": 9, 
                "goods_name": "创维(Skyworth) 43M9 43英寸 4K超高清智能网络LED液晶平板电视", 
                "goods_price": 2399, 
                "goods_number": 100, 
                "goods_weight": 100, 
                "goods_big_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0070078057-000000000751129836_1_800x800.jpg", 
                "goods_small_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0070078057-000000000751129836_1_400x400.jpg", 
                "add_time": 1516663255, 
                "upd_time": 1516663255, 
                "hot_mumber": 0, 
                "is_promote": false, 
                "cat_one_id": 1, 
                "cat_two_id": 3, 
                "cat_three_id": 9
            }, 
            {
                "goods_id": 57435, 
                "cat_id": 9, 
                "goods_name": "创维(Skyworth) G7 4K超高清彩电HDR 智能网络液晶平板电视(玫瑰金) 50G7 (50英寸)", 
                "goods_price": 4999, 
                "goods_number": 100, 
                "goods_weight": 100, 
                "goods_big_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000174647582_1_800x800.jpg", 
                "goods_small_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000174647582_1_400x400.jpg", 
                "add_time": 1516663249, 
                "upd_time": 1516663249, 
                "hot_mumber": 0, 
                "is_promote": false, 
                "cat_one_id": 1, 
                "cat_two_id": 3, 
                "cat_three_id": 9
            }, 
            {
                "goods_id": 57434, 
                "cat_id": 9, 
                "goods_name": "创维（Skyworth）60V8E 60英寸 4色4K 21核金属机身超高清智能网络液晶电视（金色）", 
                "goods_price": 4499, 
                "goods_number": 100, 
                "goods_weight": 100, 
                "goods_big_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0070078057-000000000154099975_1_800x800.jpg", 
                "goods_small_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0070078057-000000000154099975_1_400x400.jpg", 
                "add_time": 1516663246, 
                "upd_time": 1516663246, 
                "hot_mumber": 0, 
                "is_promote": false, 
                "cat_one_id": 1, 
                "cat_two_id": 3, 
                "cat_three_id": 9
            }, 
            {
                "goods_id": 57433, 
                "cat_id": 9, 
                "goods_name": "创维(skyworth) 55V8E 55英寸 4K超高清HDR纤薄全金属机身智能酷开网络液晶电视", 
                "goods_price": 3299, 
                "goods_number": 100, 
                "goods_weight": 100, 
                "goods_big_logo": "http://image3.suning.cn/uimg/b2c/newcatentries/0070078057-000000000153983248_1_800x800.jpg", 
                "goods_small_logo": "http://image3.suning.cn/uimg/b2c/newcatentries/0070078057-000000000153983248_1_400x400.jpg", 
                "add_time": 1516663242, 
                "upd_time": 1516663242, 
                "hot_mumber": 0, 
                "is_promote": false, 
                "cat_one_id": 1, 
                "cat_two_id": 3, 
                "cat_three_id": 9
            }, 
            {
                "goods_id": 57432, 
                "cat_id": 9, 
                "goods_name": "创维(Skyworth) 58V6 58英寸 4K超高清智能网络LED液晶平板电视", 
                "goods_price": 3299, 
                "goods_number": 100, 
                "goods_weight": 100, 
                "goods_big_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000137137563_1_800x800.jpg", 
                "goods_small_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000137137563_1_400x400.jpg", 
                "add_time": 1516663239, 
                "upd_time": 1516663239, 
                "hot_mumber": 0, 
                "is_promote": false, 
                "cat_one_id": 1, 
                "cat_two_id": 3, 
                "cat_three_id": 9
            }, 
            {
                "goods_id": 57431, 
                "cat_id": 9, 
                "goods_name": "创维（Skyworth）55E5 55吋4K超高清智能电视", 
                "goods_price": 2956, 
                "goods_number": 100, 
                "goods_weight": 100, 
                "goods_big_logo": "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000147767325_1_800x800.jpg", 
                "goods_small_logo": "http://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000147767325_1_400x400.jpg", 
                "add_time": 1516663236, 
                "upd_time": 1516663236, 
                "hot_mumber": 0, 
                "is_promote": false, 
                "cat_one_id": 1, 
                "cat_two_id": 3, 
                "cat_three_id": 9
            }, 
            {
                "goods_id": 57430, 
                "cat_id": 9, 
                "goods_name": "创维（Skyworth）65M9 65英寸15核HDR 4K超高清智能电视", 
                "goods_price": 0, 
                "goods_number": 100, 
                "goods_weight": 100, 
                "goods_big_logo": "", 
                "goods_small_logo": "", 
                "add_time": 1516663233, 
                "upd_time": 1516663233, 
                "hot_mumber": 0, 
                "is_promote": false, 
                "cat_one_id": 1, 
                "cat_two_id": 3, 
                "cat_three_id": 9
            }, 
            {
                "goods_id": 57429, 
                "cat_id": 9, 
                "goods_name": "创维（Skyworth）50M9 50英寸15核HDR 4K超高清智能电视", 
                "goods_price": 2603, 
                "goods_number": 100, 
                "goods_weight": 100, 
                "goods_big_logo": "", 
                "goods_small_logo": "", 
                "add_time": 1516663213, 
                "upd_time": 1516663213, 
                "hot_mumber": 0, 
                "is_promote": false, 
                "cat_one_id": 1, 
                "cat_two_id": 3, 
                "cat_three_id": 9
            }, 
            {
                "goods_id": 57428, 
                "cat_id": 9, 
                "goods_name": "创维.PPTV W42S 42英寸 全高清智能网络LED液晶平板电视", 
                "goods_price": 1799, 
                "goods_number": 100, 
                "goods_weight": 100, 
                "goods_big_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000721208036_1_800x800.jpg", 
                "goods_small_logo": "http://image2.suning.cn/uimg/b2c/newcatentries/0000000000-000000000721208036_1_400x400.jpg", 
                "add_time": 1516663210, 
                "upd_time": 1516663210, 
                "hot_mumber": 0, 
                "is_promote": false, 
                "cat_one_id": 1, 
                "cat_two_id": 3, 
                "cat_three_id": 9
            }, 
            {
                "goods_id": 57427, 
                "cat_id": 9, 
                "goods_name": "创维(Skyworth) 32X6 32英寸 高清智能网络LED液晶平板电视", 
                "goods_price": 1201, 
                "goods_number": 100, 
                "goods_weight": 100, 
                "goods_big_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000775604287_1_800x800.jpg", 
                "goods_small_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0000000000-000000000775604287_1_400x400.jpg", 
                "add_time": 1516663203, 
                "upd_time": 1516663203, 
                "hot_mumber": 0, 
                "is_promote": false, 
                "cat_one_id": 1, 
                "cat_two_id": 3, 
                "cat_three_id": 9
            }, 
            {
                "goods_id": 57426, 
                "cat_id": 9, 
                "goods_name": "创维（Skyworth）55M9 55英寸15核HDR 4K超高清智能电视M7", 
                "goods_price": 2999, 
                "goods_number": 100, 
                "goods_weight": 100, 
                "goods_big_logo": "", 
                "goods_small_logo": "", 
                "add_time": 1516663200, 
                "upd_time": 1516663200, 
                "hot_mumber": 0, 
                "is_promote": false, 
                "cat_one_id": 1, 
                "cat_two_id": 3, 
                "cat_three_id": 9
            }
        ]
    }, 
    "meta": {
        "msg": "获取成功", 
        "status": 200
    }
}

3. 关键技术

⼩程序配置⽂件中 启⽤上拉 和下拉功能 搜索框和tab栏是⼩程序的⾃定义组件(有组件事件和参数交互)

二、商品列表⻚⾯相关代码

1.tabs组件

代码语言：javascript复制
<view class="tabs">
  <view class="tabs_title">
    <view
    wx:for="{{tabs}}"
    wx:key="id"
    class="title_item  {{item.isActive?'active':''}} "
    bindtap="handleItemTap"
    data-index="{{index}}"
    >

    {{item.value}}
  </view>
  </view>
  <view class="tabs_content">
    <slot></slot>
  </view>
</view>
代码语言：javascript复制
// components/Tabs/Tabs.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    tabs:{
      type:Array,
      value:[]
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 点击事件
    handleItemTap(e){
      // 1 获取点击的索引
      const {index}=e.currentTarget.dataset;
      // 2 触发 父组件中的事件 自定义
      this.triggerEvent("tabsItemChange",{index});
    }
  }
})
代码语言：javascript复制
.tabs{}
.tabs_title{
  display: flex;
 
}
.title_item{
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 15rpx 0;
}
.active{
  color:var(--themeColor);
  border-bottom: 5rpx solid currentColor;
}
.tabs_content{}

2.页面代码

代码语言：javascript复制
<SearchInput></SearchInput>
<!-- 监听自定义事件 -->
<Tabs tabs="{{tabs}}" bindtabsItemChange="handleTabsItemChange" >
  
  <block wx:if="{{tabs[0].isActive}}">
    <view class="first_tab">
        <navigator class="goods_item"
        wx:for="{{goodsList}}"
        wx:key="goods_id"
        url="/pages/goods_detail/index?goods_id={{item.goods_id}}"
        >
            <!-- 左侧 图片容器 -->
            <view class="goods_img_wrap">
              <image mode="widthFix" src="{{item.goods_small_logo?item.goods_small_logo:'https://ww1.sinaimg.cn/large/007rAy9hgy1g24by9t530j30i20i2glm.jpg'}}"></image>
            </view>
            <!-- 右侧 商品容器 -->
            <view class="goods_info_wrap">
              <view class="goods_name">{{item.goods_name}}</view>
              <view class="goods_price">￥{{item.goods_price}}</view>
            </view>
          </navigator>
    </view>
  </block>
  <block wx:elif="{{tabs[1].isActive}}">1</block>
  <block wx:elif="{{tabs[2].isActive}}">2</block>

</Tabs>
代码语言：javascript复制
/* 
1 用户上滑页面 滚动条触底 开始加载下一页数据
  1 找到滚动条触底事件  微信小程序官方开发文档寻找
  2 判断还有没有下一页数据
    1 获取到总页数  只有总条数
      总页数 = Math.ceil(总条数 /  页容量  pagesize)
      总页数     = Math.ceil( 23 / 10 ) = 3
    2 获取到当前的页码  pagenum
    3 判断一下 当前的页码是否大于等于 总页数 
      表示 没有下一页数据

  3 假如没有下一页数据 弹出一个提示
  4 假如还有下一页数据 来加载下一页数据
    1 当前的页码   
    2 重新发送请求
    3 数据请求回来  要对data中的数组 进行 拼接 而不是全部替换！！！
2 下拉刷新页面
  1 触发下拉刷新事件 需要在页面的json文件中开启一个配置项
    找到 触发下拉刷新的事件
  2 重置 数据 数组 
  3 重置页码 设置为1
  4 重新发送请求
  5 数据请求回来 需要手动的关闭 等待效果

 */
import { request } from "../../request/index.js";
import regeneratorRuntime from '../../lib/runtime/runtime';
Page({
  data: {
    tabs: [
      {
        id: 0,
        value: "综合",
        isActive: true
      },
      {
        id: 1,
        value: "销量",
        isActive: false
      },
      {
        id: 2,
        value: "价格",
        isActive: false
      }
    ],
    goodsList:[]
  },
  // 接口要的参数
  QueryParams:{
    query:"",
    cid:"",
    pagenum:1,
    pagesize:10
  },
  // 总页数
  totalPages:1,
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.QueryParams.cid=options.cid||"";
    this.QueryParams.query=options.query||"";
    this.getGoodsList();


  },

  // 获取商品列表数据
  async getGoodsList(){
    const res=await request({url:"/goods/search",data:this.QueryParams});
    // 获取 总条数
    const total=res.total;
    // 计算总页数
    this.totalPages=Math.ceil(total/this.QueryParams.pagesize);
    // console.log(this.totalPages);
    this.setData({
      // 拼接了数组
      goodsList:[...this.data.goodsList,...res.goods]
    })

    // 关闭下拉刷新的窗口 如果没有调用下拉刷新的窗口 直接关闭也不会报错  
    wx.stopPullDownRefresh();
      
  },


  // 标题点击事件 从子组件传递过来
  handleTabsItemChange(e){
    // 1 获取被点击的标题索引
    const {index}=e.detail;
    // 2 修改源数组
    let {tabs}=this.data;
    tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
    // 3 赋值到data中
    this.setData({
      tabs
    })
  },
  // 页面上滑 滚动条触底事件
  onReachBottom(){
  //  1 判断还有没有下一页数据
    if(this.QueryParams.pagenum>=this.totalPages){
      // 没有下一页数据
      //  console.log('%c' "没有下一页数据","color:red;font-size:100px;background-image:linear-gradient(to right,#0094ff,pink)");
      wx.showToast({ title: '没有下一页数据' });
        
    }else{
      // 还有下一页数据
      //  console.log('%c' "有下一页数据","color:red;font-size:100px;background-image:linear-gradient(to right,#0094ff,pink)");
      this.QueryParams.pagenum  ;
      this.getGoodsList();
    }
  },
  // 下拉刷新事件 
  onPullDownRefresh(){
    // 1 重置数组
    this.setData({
      goodsList:[]
    })
    // 2 重置页码
    this.QueryParams.pagenum=1;
    // 3 发送请求
    this.getGoodsList();
  }
})
代码语言：javascript复制
/* pages/goods_list/index.wxss */
.first_tab .goods_item {
  display: flex;
  border-bottom: 1px solid #ccc;
}
.first_tab .goods_item .goods_img_wrap {
  flex: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}
.first_tab .goods_item .goods_img_wrap image {
  width: 70%;
}
.first_tab .goods_item .goods_info_wrap {
  flex: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.first_tab .goods_item .goods_info_wrap .goods_name {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.first_tab .goods_item .goods_info_wrap .goods_price {
  color: var(--themeColor);
  font-size: 32rpx;
}

3.效果

json tabs

0 人点赞