Wechat mini program record – Shopping cart page

First, browse the entire page

Part of the

The entire page is divided into three sections:

• 1, is the search part
• 2. It is the first layer classification on the left
• 3. The small category and product list on the right

Parent component part

<view class="main"> <! <view class="enum "> <van-search class="search" value="{{keyword}}" use-action-slot="true" Bind :search="onSearch" bind:change="searchChangeHandle" placeholder=" please input product name "> Bind :tap="searchHandle"> </view> </van-search> </view> <! <view class="content"> <view class=" class-wrap "wx:if="option.length"> <view wx:for="{{option}}" wx:key="id" class="classfiy"> <view bindtap="clickHandle" data-id="{{item.id}}" data-note1="{{item.note1}}" data-note2="{{item.note2}}" class="{{curIndex===item.id? 'active':''}}"> {{item.name}}</view> </view> </view> <view class="product"> <! Secondary classification -- -- - > < scroll - check enumns = '{{xiaolei}}' bind: click = "clickMe" / > <! Wx :for="{{productList}}" wx:key='id'> <product-card bind:onChange="onChange" productdetail="{{item}}" bind:getVal='getVal' /> </view> <! <view class="shop-car "> <van-icon bind:click="shoppingDetailHandle" size="70rpx" color="# FFF" name="cart-o" /> </view> <van-notify id="van-notify" /> </view> </view> </view>Copy the code

const app = getApp()
Page({
  /** * initial data for the page */
  data: {
    option: [].xiaolei: [].value1: 0.value: 0.productList: [].cargoList: [].keyword: ' '.curIndex: 0,},// Click on the small class to trigger
  clickMe(e) {
    this.getOrderList(e.detail)
  },
  searchHandle() {
    this.getOrderList(e.detail)
  },
  searchChangeHandle(e) {
   this.getOrderList(e.detail)
    this.setData({
      keyword: e.detail.keyword
    })
  },
  onSearch(e) {
    console.log(e);
  },
  // Bind to view shopping cart details
  shoppingDetailHandle(e){},clickHandle(e) {
    const id = e.currentTarget.dataset.id
    let args = e.currentTarget.dataset
    this.getEnums(args)
    this.setData({
      curIndex: id
    })
  },
// The key part is that we need to fetch the number of boxes and bottles at the end of each input, and merge them into an object and insert them into the array. The array is passed to the back end as a parameter
  getVal(e) {
    let arr = this.data.cargoList; // The initial array
    let data = e.detail / / object {}
    let length = arr.length
    if(! length) { arr.push(data) }else {
      arr.map(item= > {
        if (item.id === data.id) {
          const args = Object.assign({}, item, data)
          let newArr = arr.filter(item= >item.id ! == data.id) arr = [...newArr, args] }else {
          arr.push(data)
        }
      })
    }
  // [{ping:0,xiang:0,Id:0}]
    this.setData({
      cargoList: arr
    })
  },
  getEnums(args) {
   // Get enumeration (size classification)
   this.getOrderList(args)
  },
  getOrderList(args) {
    // Get the order list
  },
  /** * lifecycle function -- listens for page loading */
  onLoad: function (options) {
    const that = this; that.getEnums(); }})Copy the code

.main {
    background: #fff;
    width: 750rpx;
    height: 100vh;

    / / classification
    .content {
        position: relative;
        height: 89%;

        .classify-wrap {
            position: absolute;
            top: 0;
            bottom: -12px;
            left: 0;
            width: 200rpx;
            background: #f9f9f9;
            overflow-y: auto;

            .classfiy {
                height: 100rpx;
                line-height: 100rpx;
                text-align: center;
            }

            .active {
                background-color: #fff;
                color: @green; }}/ / product
        .product {
            overflow-y: auto;
            margin-left: 200rpx;
            padding: 0 12rpx;

            .product-content {
                margin-bottom: 16rpx;
            }

            / / shopping cart
            .shop-car {
                position: fixed;
                right: 20px;
                bottom: 100rpx;
                width: 100rpx;
                height: 100rpx;
                border-radius: 100%;
                border: 1px solid @green;
                background: @green;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 2}}}}@import ".. /.. /.. /styles/common.less"; // This side uses some color, can be changed by oneself
Copy the code

There are only two sub-components: the product list and the sub-categories

The first is the product list card

Marginbt4 </view> <view class="marginbt4"> <view class="product-detail"> <view class="marginbt4"> {{productdetail.name}}</view> <view class="fontSize12 marginbt4"> Uom}}</view> <view class="fontSize12 marginbt4"> {{productdetail.unitPrice}}/{{productdetail.uom}}</view> <view class="product-btn"> <view class="wrap"> <view class="input-wrap"> <input type="number" bindinput="inputEdit" data-name="curPackqty" data-id="{{productdetail.id}}" type="text" value="{{curPackqty}}" placeholder="0" style="padding:0; width:80rpx; font-size:24rpx; Text-align :center" /> <text> box </text> </view> <view class="input-wrap"> <input type="number" bindinput="inputEdit" data-id="{{productdetail.id}}" data-name="curQty" type="text" placeholder="0" value="{{curQty}}" style="padding:0; width:80rpx; font-size:24rpx; Text - align: center "/ > < text > bottle < / text > < view > < / view > < / view > < / view >Copy the code

// components/productCard/productCard.js
Component({
  /** * Component property list */
  properties: {
    productdetail: {
      type: Object.default: {},}},/** * The initial data of the component */
  data: {
    curPackqty: null./ / box
    curQty: null./ / bottle
    activity: false
  },
  // Executed when the component instance enters the page node tree
  attached() {
    this.setData({
      curPackqty: this.properties.productdetail.value,
      curQty: this.properties.productdetail.volume
    })
  },

  /** * list of component methods */
  methods: {
    // Applet two-way data binding
    inputEdit(e) {
      const dataSet = e.currentTarget.dataset;
      const value = e.detail.value; / / value
      const name = dataSet.name;
      this.data[name] = value;
      this.setData({
        name: this.data[name]
      })
      this.triggerEvent('getVal', {
        [dataSet.name]: this.data[name],
        id: dataSet.id,
      })
    },
  }
})
Copy the code

.product-detail {
    margin-bottom: 8px;

    .fontSize12 {
        font-size: 12px;
        color: # 999
    }

    .marginbt4 {
        margin-bottom: 4px;
    }

    .product-btn {
        font-size: 24rpx;
        display: flex;
        justify-content: flex-end;
        padding: 4px;

        .wrap {
            border: 1px solid #eee;
            border-radius: 4px;
            display: flex;

            .input-wrap {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 8px;
                padding: 0 8px; }}}}Copy the code

Next comes the subcategories

<view class="enum-wrap-small"> <view wx:for="{{enumns}}" wx:key="id"> <view bindtap="clickHandle" data-operation="{{item.id}}" class="tags {{curIndex===item.id? 'active':''}}"> {{item.name}} </view> </view> </view>Copy the code

// components/scrollCheck/scrollCheck.js
Component({
  /** * Component property list */
  properties: {
    enumns: {
      type: Array.// The type of data to receive
      value: 0 // Default value (optional)}},/** * The initial data of the component */
  data: {},/** * list of component methods */
  methods: {
    clickHandle: function (e) {
      const that = this;
      const id = e.currentTarget.dataset.operation
      that.triggerEvent("click", {
        id
      })
      that.setData({
        curIndex: id
      })
    }
  }
})
Copy the code

/ / small classification
.enum-wrap-small {
    display: flex;
    margin: 4px 0;
    overflow-x: auto;

    &: :-webkit-scrollbar {
        width: 0 ! important;
        height: 0 ! important;
    }

    .tags {
        border: 1px solid #eee;
        padding: 2px;
        margin: 4px 0;
        width: 160rpx;
        margin-right: 8px;
        border-radius: 4px;
        font-size: 12px;
        color: # 999;
        overflow: hidden;
        text-align: center;
    }

    .active {
        color: #1989fa;
        border: 1px solid #1989fa; }}Copy the code