Welcome to
Magic house ！！

The article contains columns
2022 Wechat applet Jingdong Mall actual battle

Column content
Jingdong Mall uni-app Project structures,
Jingdong Mall uni-app To configure tabBar & Window style
Jingdong Mall uni-app Developed subcontracting configuration
Jingdong Mall uni-app Developed rotation chart
Jingdong Mall uni-app The classified navigation area
Jingdong Mall uni-app Home floor products
Jingdong Mall uni-app Product classification page （ On ）
Jingdong Mall uni-app Product classification page （ Next ）
Jingdong Mall uni-app Custom search component （ On ）
Jingdong Mall uni-app Custom search component （ in ）
Jingdong Mall uni-app Custom search component （ Next ） – Search history

One 、 Introduction

There are mainly three ways to enter the product page

1. Click on the commodity floor （ The ginseng query Inquire about )
2. Click on the classification page （ The ginseng cid classification ）
3. Click on the search page （ The ginseng query Inquire about ）

Add product page compilation mode

Two 、 establish goodlist Branch （ the selected readings *)

 git checkout -b goodlist

3、 ... and 、 Product list search data request

Product list search

• Request path ：https:// Request domain name /api/public/v1/goods/search

• Request method ：GET

• Request parameters

• The response data

{
    
    "message": {
    
        "total": 2058,
        "pagenum": "1",
        "goods": [
            {
    
                "goods_id": 57332,
                "cat_id": 998,
                "goods_name": "400 ml   Seafood frozen ice packs   Water filled ice bags, medical ice bags, outdoor cold storage, fresh preservation, cold storage of cooked food, repeated use （10 Individual outfit ）",
                "goods_price": 14,
                "goods_number": 100,
                "goods_weight": 100,
                "goods_big_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0070083251-000000000168369396_1_800x800.jpg",
                "goods_small_logo": "http://image4.suning.cn/uimg/b2c/newcatentries/0070083251-000000000168369396_1_400x400.jpg",
                "add_time": 1516662792,
                "upd_time": 1516662792,
                "hot_mumber": 0,
                "is_promote": false,
                "cat_one_id": 962,
                "cat_two_id": 981,
                "cat_three_id": 998
            },
            {
    
                "goods_id": 57194,
                "cat_id": 992,
                "goods_name": " Yili car washing tools, car beauty products, sponge brush, no damage to the car paint, wipe the car, sponge cleaning sponge ",
                "goods_price": 29,
                "goods_number": 100,
                "goods_weight": 100,
                "goods_big_logo": "",
                "goods_small_logo": "",
                "add_time": 1516662312,
                "upd_time": 1516662312,
                "hot_mumber": 0,
                "is_promote": false,
                "cat_one_id": 962,
                "cat_two_id": 980,
                "cat_three_id": 992
            }
        ]
    },
    "meta": {
    
        "msg": " To be successful ",
        "status": 200
    }
}

• data Define data storage parameters

<script>
  export default {
    
    data() {
    
      return {
    
        title:'',
        // queryobject
        queryObj: {
    
          query: '',
          cid:"",
           //  page 
          pagenum: 1,
           //  Number of data 
          pagesize: 10
        }
      };
    },
    onLoad(options){
    
      console.log(options)
      this.title = options.name
      this.queryObj.query = options.query || ''
      this.queryObj.cid = options.cat_id || ''
      },

Four 、 Call the interface to get the list data

1. data Define data storage
2. onload The load function
3. Define the data retrieval function

<script>
  export default {
    
    data() {
    
      return {
    
        goodlist: [],
        //  Total number of goods 
        total: 0
      };
    },
    onLoad(options){
    
      this.getGoodlist()
      },
      methods: {
    
      async getGoodlist(){
    
        const {
    data:res} = await uni.$http.get('/api/public/v1/goods/search',this.queryObj)
        console.log(res)
        if (res.meta.status != 200) return uni.$showMsg(" Data retrieval failed ") 
        this.goodlist = res.message.goods
        this.total = res.message.total
        }
    }

5、 ... and 、 Render the product list page

1. Because some pictures cannot be displayed , Define a default picture

    //  The default image 
        defaultimg: "your image url"

2. wxml structure

<template>
  <view>
    <!--  List of pp.  -->
    <view class="goods-list">
      <view class="good-item">
        <block v-for="(item,i) in goodlist" v-bind:key="i">
          <!--  Left box  -->
          <view class="good-item-left">
            <!--   If not, use the default picture   -->
            <image :src="item.goods_big_logo || defaultimg" mode=""></image>
          </view>
          <!--  Right side box  -->
          <view class="good-item-right">
            <view class="good-item-name">{
    {
    item.goods_name}}</view>
            <view class="good-item-info">
              <view class="good-price">￥ {
    {
    item.goods_price}}</view>
            </view>
          </view>
        </block>
      </view>
    </view>


  </view>
</template>

• effect
  

3. Style beautification

<style lang="scss">
  .goods-list {
    
    .good-item {
    
      display: flex;
      border-bottom: 2px solid #f1f1f1;

      .good-item-left {
    
        image {
    
          height: 200rpx;
          width: 200rpx;
          display: block;
        }

        padding: 20rpx;
      }

      .good-item-right {
    
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20rpx;

        .good-item-name {
    
          font-size: 14px;

        }

        .good-item-info {
    
          .good-price {
    
            font-size: 16px;
            color: #c00000;
          }
        }
      }
    }
  }
</style>

• effect ：
  

6、 ... and 、 Put the goods item Components are encapsulated as custom components

1. stay component Create under file my_goods Components
   

2. Migrate the corresponding structure and style

<template>
  <view>
    <view class="good-item">
      <!--  Left box  -->
      <view class="good-item-left">
        <!--  If not, use the default picture  -->
        <image :src="good.goods_big_logo || defaultimg" mode=""></image>
      </view>
      <!--  Right side box  -->
      <view class="good-item-right">
        <view class="good-item-name">{
   {good.goods_name}}</view>
        <view class="good-item-info">
          <view class="good-price">￥ {
   {good.goods_price}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script> export default {
       name: "my-goods", props: {
       good: {
       type: Object, default: {
      } } }, data() {
       return {
       //  The default image  defaultimg: "https://ts1.cn.mm.bing.net/th/id/R-C.e74289455bec048b0ba2feb90e3b74f2?rik=fYpAtit%2bc2W4ZA&riu=http%3a%2f%2fimage.woshipm.com%2fwp-files%2f2017%2f04%2ftAd0ldHk60s3GAI6TNqd.jpg&ehk=RWuC%2f9spxWPWcW3w4axPrb3YP9Nt3JXlajvJWKRXV5k%3d&risl=&pid=ImgRaw&r=0" }; } } </script>

<style lang="scss"> .good-item {
       display: flex; border-bottom: 2px solid #f1f1f1; .good-item-left {
       image {
       height: 200rpx; width: 200rpx; display: block; } padding: 20rpx; } .good-item-right {
       display: flex; flex-direction: column; justify-content: space-between; padding: 20rpx; .good-item-name {
       font-size: 14px; } .good-item-info {
       .good-price {
       font-size: 16px; color: #c00000; } } } } </style>

7、 ... and 、 Use filters to process commodity prices

Let the commodity price be displayed with a decimal point

1. Definition filter

 filters: {
    
      tofixed(num){
    
        //  Returns a two digit value 
        return Number(num).toFixed(2)
      }
    },

2. Use filters

    <view class="good-price">￥ {
    {
    good.goods_price | tofixed }}</view>

3. effect

	   Come here , If there are any questions 
 Welcome private bloggers to ask questions , Bloggers will do their best to answer your doubts ！
 	 🥳 If it helps you , Your praise is the greatest support for bloggers ！！🥳