yikangyang-wx/pages/order/order.vue

<template>
  <view>
    <view class="wrap safe-area-inset-bottom">
      <view class="u-tabs-box">
        <u-tabs-swiper :height="76"
                       :font-size="24"
                       active-color="#c20d12"
                       bg-color="transparent"
                       inactive-color="#999"
                       ref="tabs"
                       :list="tabs"
                       :current="current"
                       @change="change"
                       :is-scroll="false"
                       :offset="[5,5]"
                       swiperWidth="750"></u-tabs-swiper>
      </view>
      <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
        <swiper-item class="swiper-item">
          <scroll-view
              refresher-enabled
              scroll-y
              style="height: 100%;width: 100%;"
              @scrolltolower="reachBottom">
            <view>
              <view class="order" v-for="i in 10" :key="i">
                <view class="title">
                  <view class="title__name">专享半天陪诊</view>
                  <view class="title__status">待支付</view>
                </view>

                <view class="price">
                  <view class="price-icon">
                    <u-icon name="integral" size="30"></u-icon>
                  </view>

                  <view class="price-text">
                    <view class="price-text__num">￥600</view>
                    <view class="price-text__no">订单号 PZ2024111855448048</view>
                  </view>
                </view>

                <view class="info">
                  <view class="info__item">
                    <text>就诊城市</text>
                    <text>苏州</text>
                  </view>
                  <view class="info__item">
                    <text>就诊医院</text>
                    <text>苏大附属</text>
                  </view>
                  <view class="info__item">
                    <text>就诊人</text>
                    <text>萍萍</text>
                  </view>
                  <view class="info__item">
                    <text>就诊时间</text>
                    <text>2024-12-18 17:00</text>
                  </view>
                </view>

                <view class="bottom">
                  <view class="time">
                    <text>下单时间: </text>
                    <text>2024-11-18 17:48:47</text>
                  </view>

                  <u-button ripple shape="circle" :custom-style="payBtnStyle">立即支付</u-button>
                </view>
              </view>
              <u-loadmore :status="loadStatus[0]" bgColor="#f2f2f2"></u-loadmore>
            </view>
          </scroll-view>

        </swiper-item>

        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">
            <view style="height: 100%;" class="d-flex ai-center jc-center">
              <u-empty mode="order"></u-empty>
            </view>
          </scroll-view>
        </swiper-item>

        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;">

          </scroll-view>
        </swiper-item>

        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">

          </scroll-view>
        </swiper-item>

        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">

          </scroll-view>
        </swiper-item>

        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom">

          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
    <Tabbar />
  </view>
</template>

<script>
import Tabbar from '@/component/Tabbar/Tabbar.vue'
export default {
  components: {
    Tabbar
  },
  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'
      },
      tabs: [
        {
          name: '全部'
        },
        {
          name: '待支付'
        },
        {
          name: '待评价'
        },
        {
          name: '服务中',
          count: 12
        },
        {
          name: '已完成'
        },
        {
          name: '已取消'
        }
      ],
      current: 0,
      swiperCurrent: 0,
      tabsHeight: 0,
      dx: 0,
      scrollTop: [],
      loadStatus: [],
      refresherStatus: [],
    };
  },
  onLoad() {
  },
  created() {
    for(let i = 0;i < this.tabs.length;i++) {
      this.refresherStatus.push(false)
      this.loadStatus.push('loadmore')
    }
  },
  computed: {
  },
  methods: {
    reachBottom() {
      // 此tab为空数据
      this.loadStatus.splice(this.current,1,"loading")

      setTimeout(() => {
        this.loadStatus.splice(this.current,1,"nomore")
      }, 2000)
    },
    // tab栏切换
    change(index) {
      this.swiperCurrent = index;
    },
    transition({ detail: { dx } }) {
      this.$refs.tabs.setDx(dx);
    },
    animationfinish({ detail: { current } }) {
      this.$refs.tabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;
    }
  }
};
</script>

<style>
page {
  height: 100%;
  background-color: #eee;
}
</style>

<style lang="scss" scoped>
::v-deep .u-load-more-wrap {
  padding: 20rpx 0;
}
.d-flex {
  display: flex;
}
.ai-center {
  align-items: center;
}
.jc-center {
  justify-content: center;
}
.wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--window-top) - calc(60px + 6px));
  width: 100%;
}
.swiper-box {
  flex: 1;
}
.swiper-item {
  height: 100%;
}
.order {
  margin: 0 25rpx;
  border-radius: 10rpx;
  filter: drop-shadow(0 0 10rpx rgba(211,211,214,0.3));
  background-color: #ffffff;
  margin-top: 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>