program/src/components/user_center/order_list.vue

<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.pay_status == 1">
              <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.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>
@import "order_list.css";
</style>