<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">
            <text>交易成功</text>
          </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.goods_name }} x 1</text>
        </div>
        <div class="padding-tb-lg flex justify-between align-center">
          <div>
            <text class="text-gray">付款方式&nbsp;</text>
            <text class="text-bold">微信支付</text>
          </div>
          <div>
            <text class="text-gray">实付款&nbsp;</text>
            <text class="text-gray text-xxl">{{ order.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>

var $this
export default {
  name: "order_list",
  props: ['status', 'orders'],
  data() {
    return {}
  },
  methods: {},
  mounted() {
  },
  created() {
    $this = this
  }
}
</script>

<style>
.van-card__thumb {
  width: 50px !important;
}

.order_icon {
  width: 37px;
  height: 37px;
}

.thumb_container {
  width: 100%;
  text-align: center;
}
</style>
