h5-colexiu/src/views/coupons/list.tsx

import ColResult from '@/components/col-result'
import { useList } from '@/helpers/hooks'
import request from '@/helpers/request'
import { state } from '@/state'
import { List } from 'vant'
import { defineComponent, PropType } from 'vue'
import styles from './index.module.less'
import Item from './item'

// 使用状态: EXPIRED(已失效) USABLE(可使用) USED(已使用)
export default defineComponent({
  name: 'coupon-list',
  props: {
    useState: {
      type: String as PropType<'USABLE' | 'USED' | 'EXPIRED'>,
      default: 'USABLE'
    }
  },
  data() {
    return {
      list: [] as any,
      listState: {
        dataShow: true, // 判断是否有数据
        loading: false,
        finished: false
      },
      params: {
        useState: this.useState,
        page: 1,
        rows: 20
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      try {
        const result = await useList(`${state.platformApi}/couponInfo/page`, {
          params: this.params,
          list: this.list,
          ...this.listState
        })
        const { params, list, ...res } = result
        this.params = params
        this.list = list
        this.listState = res
      } catch {
        //
      }
    }
  },
  render() {
    return (
      <>
        {this.listState.dataShow ? (
          <List
            v-model:loading={this.listState.loading}
            finished={this.listState.finished}
            finishedText=" "
            // 为了处理体验问题
            class={[this.list.length > 0 && styles.list]}
            onLoad={this.getList}
            immediateCheck={false}
          >
            {this.list.map((item: any) => (
              <Item item={item} />
            ))}
          </List>
        ) : (
          <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无优惠券" />
        )}
      </>
    )
  }
})