微信小程序 组件封装

我们使用的自己封装的订单组件，其中goodsOrderList目录引用了该组件，order-card目录定义了该组件

image.png

1、定义组件

• 订单列表组件放到order-card目录中,各个文件内容如下：
  image.png
• order-card目录下的index.js

// component/order-card.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    storeImage: String,
    storeName: String,
    status: Number,
    picPath: String,
    title: String,
    price: Number,
    num: String,
    total: Number,
    postFee: Number,
    showSep: Boolean
  },

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

  },

  /**
   * 组件的方法列表
   */
  methods: {
    store() {
      this.triggerEvent('store')
    },
    delete() {
      this.triggerEvent('delete')
    },
    pay() {
      console.log('pay-------');
      this.triggerEvent('pay')
    },
    detail() {
      this.triggerEvent('detail')
    },
    cancel() {
      console.log('cancel-------');
      this.triggerEvent('cancel')
    },
    comment() {
      this.triggerEvent('comment')
    },
    confirm () {
      this.triggerEvent('confirm')
    }
  }
})

• order-card目录下的index.json

{
  "component": true,
  "usingComponents": {}
}

• order-card目录下的index.wxml

<!--component/order-card.wxml-->
<wxs src="../../utils/utils.wxs" module="utils" />
<!-- 单个订单 -->
<view class="card" style="{{showSep ? 'margin-bottom: 20rpx':''}}">
  <!-- 店铺名称和删除按钮 -->
  <view class='top-warp'>
    <view catchtap="store" class="store-warp">
      <image class="store-img" src='{{storeImage}}'></image>
      <view style="margin:0 15rpx;">{{storeName}}</view>
      <van-icon name="arrow" />
    </view>
    <!-- 删除订单按钮 -->
    <view wx:if="{{status==6}}" class="delete-warp" catchtap="delete">
      <van-icon size="30rpx" name="delete" />
    </view>
  </view>
  <!-- 商品详情 -->
  <view class='product_info'>
    <view class="product-card">
      <view class='left'>
        <image src="{{picPath}}" class="goods-img"></image>
      </view>
      <view class='right'>
        <view class='r_title' style='font-size:30rpx;'>{{title}}</view>
        <view>
          <text><text style="font-size:24rpx;">￥</text>{{utils.toFixedPrice(price)}}</text>
          <view style='color:#999;font-size:26rpx;text-align:right;'>x {{num}}</view>
        </view>
      </view>
    </view>

    <view class='listDes total_text'>
      共{{num}}件商品，合计￥
      <text style='color:red'>{{ utils.toFixedPrice(total) }}</text>（含运费￥{{utils.toFixedPrice(postFee)}}元）
    </view>
    <view class='listDes'>
      <!-- 查看详情按钮 -->
      <view class="func-btn" catchtap="detail">
        查看详情
      </view>
      <view wx:if="{{status === 1}}" class="func-btn cancel-btn" catchtap="cancel">
        取消订单
      </view>
      <view wx:if="{{status === 1}}" class="func-btn" catchtap="pay">去付款</view>
      <view wx:if="{{status === 4}}" class="func-btn" catchtap="confirm">确认收货</view>
      <view wx:if="{{status === 5}}" class="func-btn" catchtap="comment">评价</view>
      <view wx:if="{{status === 6}}" class="func-btn">交易关闭</view>
    </view>
  </view>
</view>

• order-card目录下的index.wxss

/* component/order-card.wxss */
.card {
    background-color: #fff;
    margin: 0 20rpx;
    padding: 20rpx;
    border-radius: 20rpx;
}

.product_info {
    box-sizing: border-box;
}

.product-card {
    width: 100%;
    display: flex;
}

.product-card .left {
    flex: 0 0 200rpx;
}

.product-card .right {
    flex: 1;
    display: flex;
    justify-content: space-between;
}

.goods-img {
    width: 200rpx;
    height: 200rpx;
    border-radius: 10rpx;
}

.r_title {
    padding: 0 10rpx;
}

.listDes {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 20rpx;
}

.total_text {
    font-size: 26rpx;
    color: #333333;
}

.func-btn {
    text-align: center;
    padding: 6rpx 20rpx;
    font-size: 26rpx;
    border: 2rpx solid var(--shopThemeColor);
    color: var(--shopThemeColor);
    border-radius: 30rpx;
}

.func-btn:not(:last-child) {
    margin-right: 20rpx;
}

.cancel-btn {
    border: 2rpx solid #666666;
    color: #666666;
}

.delete-warp {
    padding: 0 15rpx;
    height: auto;
    text-align: center;
    display: flex;
    align-items: center;
}

.top-warp {
    width: 100%;
    height: auto;
    overflow: hidden;
    font-size: 28rpx;
    line-height: 30rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}

.store-warp {
    display: flex;
    align-items: center;
}

.store-img {
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
    vertical-align: middle
}

2、引入组件并使用

image.png

• goodsOrderList目录下 index.wxml文件的核心代码如下：

  <order-card showSep="{{index != orderList.length - 1 ? true : false}}" wx:for="{{orderList}}" wx:for-index="index"
    wx:key="index" title="{{item.title}}" storeImage="{{item.storeImage}}" storeName="{{item.storeName}}"
    picPath="{{item.picPath}}" price="{{item.price}}" num="{{item.num}}"
    total="{{utils.addFuction(item.payment, item.postFee)}}" postFee="{{item.postFee}}" status="{{item.status}}"
    bind:delete="onDelete" bind:pay="payNow" bind:cancel="cancelOrder" bind:comment="toComment" bind:detail="toDetail"
    data-item="{{item}}" bind:store="toStore" bind:confirm="confirm" />

• goodsOrderList目录下 index.json文件：

{
  "usingComponents": {
    "order-card": "../../../../../component/order-card/index" // 引入订单列表组件
    
  },
  "navigationBarTitleText": "商品订单"
}