yikangyang-wx/package_sub/pages/OrderList/OrderList.vue

<template>
  <view class="page">
    <scroll-view
        scroll-y
        style="height: 100%; width: 100%"
        @scrolltolower="reachBottom"
    >
      <view>
        <view class="order" v-for="i in list" :key="i.id">
          <view class="title">
            <view class="title__name">
              <u-tag size="mini" type="primary" mode="dark" shape="circleLeft"  :text="i.type === 1 ? '陪诊' : '陪护'"></u-tag>
              <text style="padding-left: 10rpx;">专享半天陪诊</text>
            </view>
            <view class="title__status">{{ statusFormat(i.pay_status) }}</view>
          </view>

          <view class="price">
            <view class="price-icon">
              <u-icon :name="i.cover ? i.cover.url : vuex_default_icon" size="30"></u-icon>
            </view>

            <view class="price-text">
              <view class="price-text__num">￥{{ i.accompany_product ? i.accompany_product.price : 0 }}</view>
              <view class="price-text__no"
              >订单号 {{ i.no }}</view
              >
            </view>
          </view>

          <view class="info"
                @click.stop.native="$u.route({
                              url: '/package_sub/pages/AddOrder/AddOrder',
                              params: {
                                order_id: i.id,
                                type: i.type,
                                site_id: i.hospital.site_id
                              }
                            })">
            <view class="info__item">
              <text>就诊城市</text>
              <text>{{ i.city || ((i.hospital && i.hospital.site) ? i.hospital.site.name : "") || " " }}</text>
            </view>
            <view class="info__item">
              <text>就诊医院</text>
              <text>{{ i.hospital ? i.hospital.name : '' }}</text>
            </view>
            <view class="info__item">
              <text>就诊人</text>
              <text>{{ i.user_archive ? i.user_archive.name : i.user_archive_id }}</text>
            </view>
            <view class="info__item">
              <text>就诊时间</text>
              <text>{{ i.time ? $moment(i.time).format('YYYY年MM月DD日 HH:mm') : '' }}</text>
            </view>
          </view>

          <view class="bottom">
            <view class="time">
              <text>下单时间： </text>
              <text>{{ i.created_at ? $moment(i.created_at).format('YYYY年MM月DD日 HH:mm') : '' }}</text>
            </view>

            <u-button ripple
                      shape="circle"
                      :custom-style="payBtnStyle"
                      :throttle-time="2000"
                      @click="$u.route({
                              url: '/package_sub/pages/AddOrder/AddOrder',
                              params: {
                                order_id: i.id,
                                type: i.type,
                                site_id: i.hospital.site_id
                              }
                            })"
            >{{ i.pay_status === 0 ? '立即支付' : '查看订单' }}</u-button
            >
          </view>
        </view>

        <u-loadmore
            :status="loadStatus"
            bgColor="#f2f2f2"
        ></u-loadmore>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      payBtnStyle: {
        "background-image":
            "linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%)",
        "font-weight": "500",
        "font-size": "28rpx",
        color: "#fff",
        width: "185rpx",
        height: "60rpx",
        "line-height": "60rpx",
      },
      loadStatus: 'loadmore',
      list: [],
      total: 0,
      select: {
        page: 1,
        pay_status: "",
        page_size: 20,
      },
    };
  },
  computed: {
    statusFormat() {
      return function (status) {
        return this.vuex_order_status.find(i => i.value === status)?.name
      }
    }
  },
  methods: {
    reachBottom() {
      this.getOrder()
    },
    query2select(option) {
      for (let key in option) {
        this.select[key] = option[key]
      }
    },
    async getOrder(isRefresh=false) {
      if (isRefresh) {
        this.select.page = 1;
        this.loadStatus = 'loadmore'
      }
      if (this.loadStatus === 'nomore') return
      try {
        this.loadStatus = 'loading'
        const res = await this.$u.api.accompanyOrders(this.select);
        console.log(res);
        this.total = res.total;
        if (isRefresh) {
          this.list.length = 0;
        }
        this.list.push(...res.data)
        if (this.list.length >= res.total) {
          this.loadStatus = 'nomore'
        } else {
          this.loadStatus = 'loadmore'
        }
      } catch (err) {
        console.error(err);
        this.loadStatus = 'loadmore'
      }
    },
  },
  onLoad(option) {
    this.query2select(option)
    this.getOrder(true)
  },
}
</script>

<style lang="scss">
.page {
  padding-top: 24rpx;
  padding-bottom: calc(20rpx);
  padding-bottom: calc(
      constant(safe-area-inset-bottom) + 20rpx
  );
  padding-bottom: calc(
      env(safe-area-inset-bottom) + 20rpx
  );
}
.order {
  border-radius: 10rpx;
  filter: drop-shadow(0 0 10rpx rgba(211, 211, 214, 0.3));
  background-color: #ffffff;
  margin: 0 25rpx 24rpx;

  .title {
    display: flex;
    align-items: center;
    padding: 37rpx 39rpx 32rpx 45rpx;
    position: relative;

    &__name {
      font-size: 24rpx;
      color: #333333;
      font-weight: bold;
    }
    &__status {
      font-size: 24rpx;
      color: #c20d12;
      font-weight: 500;
      margin-left: auto;
    }
    &::after {
      content: "";
      height: 2rpx;
      background: #999999;
      opacity: 0.302;

      position: absolute;
      bottom: 0;
      left: 39rpx;
      right: 39rpx;
    }
  }

  .price {
    display: flex;
    align-items: center;
    padding: 28rpx 0 0 44rpx;

    &-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 90rpx;
      height: 84rpx;
      border-radius: 10rpx;
      background-color: #f3e7d8;
    }
    &-text {
      padding-left: 28rpx;
      &__num {
        font-size: 24rpx;
        color: #000000;
        font-weight: bold;
      }
      &__no {
        font-size: 24rpx;
        color: #999999;
        font-weight: 500;
        padding-top: 14rpx;
      }
    }
  }

  .info {
    display: flex;
    flex-wrap: wrap;
    padding: 35rpx 45rpx 0;

    &__item {
      flex-basis: 50%;
      color: #333;
      font-size: 24rpx;
      font-weight: 500;
      display: flex;
      margin-bottom: 32rpx;

      & > text {
        display: block;
      }
      & > text:nth-child(1) {
        color: #999;
        padding-right: 20rpx;
        flex: 0;
        word-break: keep-all;
      }
      & > text:nth-child(2) {
      }
    }
  }

  .bottom {
    padding: 6rpx 28rpx 35rpx 43rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .time {
      font-size: 24rpx;
      color: #999999;
      font-weight: 500;
    }
  }
}
</style>