discounts-minapp/invite/history.vue

<template>
  <view class="order">
    <view class="tab-box">
      <view class="tab" :class="[query.orderType == null ? 'active' : '']"
        v-if="appAuth.includes(0) || appAuth.includes(2)" @click="handleTab(null)">
        已邀请
      </view>
      <view class="tab" :class="[query.orderType == 'USED' ? 'active' : '']"
        v-if="appAuth.includes(0) || appAuth.includes(3)" @click="handleTab('USED')">
        成功邀请
      </view>
      <view class="tab" v-if="appAuth.includes(0) || appAuth.includes(4)"
        :class="[query.orderType == 'APPLY_REFUND' ? 'active' : '']" @click="handleTab('APPLY_REFUND')">
        已失效
      </view>
    </view>
    <zs-list class="store-box" mt="0" @load="loadMore" :status="status">
      <view style="border-radius: 16rpx;overflow: hidden;">
        <view class="item" v-for="(item, index) in list" :key="index" @click="goDetail(item)">
          <view class="user-card">
            <view class="avatar">
              <u-avatar :src="item.headImgUrl" size="80rpx"></u-avatar>
            </view>
            <view class="info">
              <view class="phone">1233232378</view>
              <view class="time">{{ item.createTime }}</view>
            </view>
          </view>
        </view>
      </view>

    </zs-list>

    <u-empty v-if="list.length == 0">
    </u-empty>
  </view>
</template>

<script>

import { details } from "@/api/invite"
export default {
  data() {
    return {
      query: {
        page: 0,
        size: 10,
        orderType: null,
        "endTime": "",
        "noOrGName": "",
        "sort": "",
        "startTime": ""
      },
      status: 'more',
      list: [],
      appAuth: []
    }
  },
  filters: {
    filterType: function (val) {
      if (val.refundLog && val.refundLog.refund == 'REFUSAL_REFUND') {
        return '拒绝退款'
      }
      else if (val.jobFlowMap == 'Hotel' && JSON.parse(val.extend).orderInfo) {
        return JSON.parse(val.extend).orderInfo.orderStatus
      }
      else if (val.goodsState == 'APPLY_REFUND') {
        return '申请退款'
      } else if (val.goodsState == 'CLOSE') {
        return '关闭订单'
      } else if (val.goodsState == 'REFUNDED') {
        return '已退款'
      } else if (val.goodsState == 'REFUSAL_REFUND') {
        return '拒绝退款'
      } else if (val.goodsState == 'APPLY_REFUNDING') {
        return '退款中'
      } else if (val.goodsState == 'USED') {
        return '已核销'
      } else if (val.goodsState == 'WAIT_PAYMENT') {
        return '待付款'
      } else if (val.goodsState == 'WAIT_USE') {
        return '待使用'
      } else {
        return ''
      }
    }
  },
  methods: {
    handleTab(val) {
      this.query.orderType = val
      this.query.page = 0
      this.list = []
      this.details()
    },
    goDetail(item) {
      uni.setStorageSync('order', JSON.stringify(item))
      uni.navigateTo({
        url: './detail?id=' + item.orderNo
      })
    },
    details() {
      this.status = 'loading'
      details(this.query).then(res => {
        if (res.state == 'Success') {
          this.total = res.content.totalElements
          this.list = this.list.concat(res.content.content)
          this.list.length >= this.total ? this.status = 'noMore' : this.status = 'more'
          this.query.page++
          uni.stopPullDownRefresh()
        }
      })
    },
    onPullDownRefresh() {
      this.query.page = 0
      this.list = []
      this.status = 'more'
      this.details()
    },
    loadMore() {
      this.details()
    },
  },
  onLoad() {
    let epid = uni.getStorageSync('epid')
    let shopList = JSON.parse(uni.getStorageSync('shopList'))
    shopList.map(item => {
      if (item.shopId == epid) {
        this.appAuth = item.appAuth.split(',').map(Number)
      }
    })
    if (this.appAuth.includes(2)) {
      this.query.orderType = null
    } else if (this.appAuth.includes(3)) {
      this.query.orderType = 'USED'
    } else if (this.appAuth.includes(4)) {
      this.query.orderType = 'APPLY_REFUND'
    }
  }
}
</script>

<style lang="scss" scoped>
.order {
  padding: 90rpx 32rpx 24rpx;
  background: #F9F9F9;
  min-height: 100vh;

  .tab-box {
    display: flex;
    position: fixed;
    width: 750rpx;
    height: 70rpx;
    left: 0%;
    top: 0%;
    z-index: 9;
    background: #fff;

    .tab {
      flex: 1;
      text-align: center;
      padding: 15rpx 0;
      font-size: 28rpx;
      color: #999999;
    }

    .tab.active {
      font-size: 32rpx;
      color: #222222;
      position: relative;

      &::after {
        content: '';
        width: 40rpx;
        height: 8rpx;
        box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(255, 255, 255, 0.16);
        border-radius: 46rpx 46rpx 46rpx 46rpx;
        background: $uni-color-primary;
        position: absolute;
        bottom: 0%;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }

  .item {
    background: #FFFFFF;
    position: relative;
    padding: 24rpx;
    border-top: 1px solid #F0F0F0;

    &:first-child {
      border-top: none;
    }

    .user-card {
      display: flex;
      align-items: center;

      .avatar {
        margin-right: 20rpx;
      }

      .info {
        .phone {
          color: #181818;
          font-size: 28rpx;
          margin-bottom: 8rpx;
        }

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