微信小程序创建组件

1、在component文件夹下创建组件的文件夹并在该文件夹下创建组件(一般微信开发者工具 右键 >> 新建Component)

2、编写相关的js、wxml、wxss代码

// components/coach_order_item/coach_order_item.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    orderInfoList: {
      type: Array,
      value: [
        {
          id: 0,
          coding: '123457879451',
          status: 1,
          statusTitle: "预约成功",
          title: '跑步训练',
          orderTime: '2020-06-23 08:55:06',
          reserveTimeArray: [
            {id:0,timeItem:'09:00-10:00'},
            {id:1,timeItem:'10:00-11:00'},
            {id:2,timeItem:'13:00-14:00'},
            {id:3,timeItem:'14:00-15:00'},
            {id:4,timeItem:'16:00-17:00'},
            {id:5,timeItem:'19:00-20:00'}
          ],
          hourPrice: '79',
          addr: "广州市天河区",
          phone: '15000000088',
          hourMun: 2,
          countPrice: 159
        },
        {
          id: 1,
          coding: '123457879451',
          status: 2,
          statusTitle: "已上完",
          title: '泡泡训练',
          orderTime: '2020-06-23 08:55:06',
          reserveTimeArray: [
            {id:0,timeItem:'09:00-10:00'},
            {id:1,timeItem:'10:00-11:00'},
            {id:2,timeItem:'13:00-14:00'},
            {id:3,timeItem:'14:00-15:00'},
            {id:4,timeItem:'16:00-17:00'},
            {id:5,timeItem:'19:00-20:00'}
          ],
          hourPrice: '79',
          addr: "广州市天河区",
          phone: '15811111188',
          hourMun: 2,
          countPrice: 159
        }
      ]
    },
    status: {
      type: String,
      value: 'all'
    }
  },

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

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

<!--components/coach_order_item/coach_order_item.wxml-->
<view>
  <block wx:for="{{orderInfoList}}" wx:for-item="orderItem" wx:key="id">
    <view wx:if="{{status == orderItem.status}}" class="order-info">
      <view class="d-f-jc-sb">
        <view class="order-coding">订单编号； {{orderItem.coding}}</view>
        <view class="order-status">{{orderItem.statusTitle}}</view>
      </view>
      <view class="list-box">
        <view class="d-f-jc-sb">
          <view class="project-title">{{orderItem.title}}</view>
          <view class="order-time" >{{orderItem.orderTime}}</view>
        </view>
        <view class="d-f">
          <view class="time-title">时间：</view>
          <view class="d-f-w">
            <block wx:for="{{orderItem.reserveTimeArray}}" wx:for-item="timeItem"  wx:key="id">
            <view class="time-item">{{timeItem.timeItem}}</view>
            </block>
          </view>
        </view>
        <view class="price">(每个小时{{orderItem.hourPrice}}元)</view>
        <view>地点：{{orderItem.addr}}</view>
        <view>电话：{{orderItem.phone}}</view>
      </view>
      <view class="count">
        <view class="count-proce">￥ {{orderItem.countPrice}}</view>
        <view class="count-desc"><text decode="{{true}}">共{{orderItem.hourMun}}小时 &emsp;合计：</text></view>
      </view>
      <view style="overflow: hidden;">
        <view wx:if="{{orderItem.status == 1}}" class="btm-EB5A52">签到</view>
        <view wx:else class="btm-F5F5F5">去评价</view>
      </view>
    </view>
    <view wx:elif="{{status == 'all'}}" class="order-info">
      <view class="d-f-jc-sb">
        <view class="order-coding">订单编号； {{orderItem.coding}}</view>
        <view class="order-status">{{orderItem.statusTitle}}</view>
      </view>
      <view class="list-box">
        <view class="d-f-jc-sb">
          <view class="project-title">{{orderItem.title}}</view>
          <view class="order-time" >{{orderItem.orderTime}}</view>
        </view>
        <view class="d-f">
          <view class="time-title">时间：</view>
          <view class="d-f-w">
            <block wx:for="{{orderItem.reserveTimeArray}}" wx:for-item="timeItem"  wx:key="id">
            <view class="time-item">{{timeItem.timeItem}}</view>
            </block>
          </view>
        </view>
        <view class="price">(每个小时{{orderItem.hourPrice}}元)</view>
        <view>地点：{{orderItem.addr}}</view>
        <view>电话：{{orderItem.phone}}</view>
      </view>
      <view class="count">
        <view class="count-proce">￥ {{orderItem.countPrice}}</view>
        <view class="count-desc"><text decode="{{true}}">共{{orderItem.hourMun}}小时 &emsp;合计：</text></view>
      </view>
      <view style="overflow: hidden;">
        <view wx:if="{{orderItem.status == 1}}" class="btm-EB5A52">签到</view>
        <view wx:else class="btm-F5F5F5">去评价</view>
      </view>
    </view>
  </block>
</view>

.d-f,.d-f-w,.d-f-jc-sb{
  display: flex;
}
.d-f-w{
  flex-wrap: wrap;
}
.d-f-jc-sb{
  justify-content:space-between;
}

.order-info{
  font-size: 12px;
  line-height: 22px;
  padding: 0 30rpx;
  padding-bottom: 40rpx;
  margin: 20rpx 0;
  background-color: white;
}

.order-info .order-coding{
  padding: 20rpx 0;
}
.order-info .order-status{
  padding: 20rpx 0;
}
.list-box{
  background-color: #F5F5F5;
  padding: 30rpx;
}
.list-box .project-title{
  font-size: 13px;
}
.list-box .order-time{
  font-size: 10px;
  color: #b9b9b9;
}
.list-box .time-title{
  flex: 0 0 38px;
}
.list-box .time-item{
  padding-right: 5px;
}
.list-box .price{
  text-indent:36px;
  color:red;
  font-size: 10px;
}
.order-info .count{
  overflow: hidden;
  font-size: 12px;
  line-height: 40px;
}
.order-info .count view{
  float: right;
}
.order-info .count .count-proce{
  color: red;
  padding-right: 5px;
}

.btm-EB5A52{
  background-color: #EB5A52;
  padding: 0 40rpx;
  border-radius: 50px; 
  font-size: 12px;
  line-height: 30px;
  color: white;
  width: 40px;
  text-align: center;
  float: right;
}

.btm-F5F5F5{
  background-color: #F5F5F5;
  padding: 0 40rpx;
  border-radius: 50px; 
  font-size: 12px;
  line-height: 30px;
  color: black;
  width: 40px;
  text-align: center;
  float: right;
}

3、引入该组件

(1) 在Pages页面中的json文件

{
  "usingComponents": {
    "coach-order-item": "/components/coach_order_item/coach_order_item"
  }
}

(2)使用这个组件(向组件上传数据<coach-order-item orderInfoList="{{orderInfoList}}" status="2" />)

<!--pages/abctest1/abctest1.wxml-->
<view>
  <coach-order-item status="all" />
</view>

4、运行效果