<template>
  <div id="order_list_container">
    <van-card
      v-for="(order,index) in orders"
      :key="index"
    >
      <!--      抬头部分-->
      <div slot="title" class="flex justify-between">
        <div>
          <text class="text-gray">订单号&nbsp;</text>
          <text class>{{ order.sn }}</text>
        </div>
        <div>
          <text class="text-gray">{{ order.create_time }}</text>
          <view class="text-right">
            <template v-if="order.status">
              <text class="text-bold">交易完成</text>
            </template>
            <template>
              <text>待支付</text>
            </template>
          </view>
        </div>
      </div>
      <!--      图标部分-->
      <div slot="thumb" class="thumb_container">
        <img  src="https://img.shuimuai.com/web/icon_dingdan.png" class="order_icon" alt="">
      </div>
      <!--      消费产品-->
      <div slot="desc">
        <div>
          <text class="text-gray">消费产品&nbsp;</text>
          <text>{{ order.production.name }} x {{ order.production.count }}</text>
        </div>
        <div class="padding-tb-lg flex justify-between align-center">
          <div>
            <text class="text-gray">付款方式&nbsp;</text>
            <template v-if="order.pay_type == 'wechat'">
              <text class="text-bold">微信支付</text>
            </template>
            <template>
              <text>其他支付</text>
            </template>
          </div>
          <div>
            <text class="text-gray">实付款&nbsp;</text>
            <text class="text-gray text-xxl">{{ order.total_price }}</text>
          </div>

        </div>
      </div>

      <!--      联系客服的按钮-->
      <div slot="price">
        <!--        <van-button type="default" open-type="contact">联系客服</van-button>-->
        <button class="cu-btn" open-type="contact">联系客服</button>

      </div>
    </van-card>
  </div>
</template>

<script>
export default {
  name: "order_list",
  props: ['status'],
  data() {
    return {
      orders: [
        {
          id: 1,
          sn: "201708161601",
          production:
            {
              id: 1,
              name: '钻石会员卡',
              count: 1
            }
          ,
          total_price: 23678.99,
          pay_type: 'wechat',
          status: 2,
          create_time: "2018/09/24 10:44"
        }
      ],
    }
  }
}
</script>

<style>
@import "order_list.css";
</style>
