h5-colexiu/src/views/award-activity/index.tsx

import { CellGroup, Cell, Image, Button, Popup, List } from 'vant'
import { defineComponent } from 'vue'
import styles from './index.module.less'
import award from './images/award.png'
import cert from './images/cert.png'
import request from '@/helpers/request'
import ColResult from '@/components/col-result'
import { state } from '@/state'
import dayjs from 'dayjs'
import ColPopup from '@/components/col-popup'
import UserAuth from '../order-detail/userAuth'
import ColHeader from '@/components/col-header'

export default defineComponent({
  name: 'award-activity',
  data() {
    return {
      status: false,
      type: 'auth',
      list: [],
      dataShow: true, // 判断是否有数据
      loading: false,
      finished: false,
      params: {
        // receive: 2,
        page: 1,
        rows: 20
      },
      exists: false,
      popupShow: false,
      receiveRewardId: null as any
    }
  },
  //   /student-server/activity/receiveRewardList 学生端查看未领奖列表接口
  // /student-server/activity/receiveReward/{receiveRewardId}  学生端领奖接口
  // /teacher-server/activity/receiveRewardList 老师端查看未领奖列表接口
  // /teacher-server/activity/receiveReward/{receiveRewardId} 学生端领奖接口
  async mounted() {
    this.getUserRegisterProtocol()
    this.getList()
  },
  methods: {
    async getUserRegisterProtocol() {
      // 获取是否签署过《用户注册协议》
      try {
        const res = await request.get(
          state.platformApi + '/sysUserContractRecord/checkContractSign',
          {
            params: {
              contractType: 'REGISTER'
            }
          }
        )
        this.exists = res.data
      } catch {
        //
      }
    },
    async onGetAward() {
      try {
        const users = state.user.data
        // 判断是否需要实名认证, 姓名，卡号，是否签协议
        if (!users?.realName || !users?.idCardNo || !this.exists) {
          this.status = true
          this.type = 'auth'
          return
        }
        await request.post(
          `${state.platformApi}/activity/receiveReward/${this.receiveRewardId}`
        )
        this.status = true
        this.type = 'success'
        this.receiveRewardId = null
      } catch {
        //
      }
    },
    async onAuthSuccess() {
      this.popupShow = false
      this.status = false
      await this.getUserRegisterProtocol()
      this.onGetAward()
    },
    async getList() {
      try {
        const params = this.params
        const res = await request.post(
          `${state.platformApi}/activity/receiveRewardList`,
          {
            data: {
              ...params
            }
          }
        )
        this.loading = false
        const result = res.data || {}
        // 处理重复请求数据
        if (this.list.length > 0 && result.pageNo === 1) {
          return
        }
        this.list = this.list.concat(result.rows || [])
        this.finished = result.pageNo >= result.totalPage
        this.params.page = result.pageNo + 1
        this.dataShow = this.list.length > 0
      } catch {
        this.dataShow = false
        this.finished = true
      }
    }
  },
  render() {
    return (
      <div class={styles.award}>
        <ColHeader />
        {this.dataShow ? (
          <List
            class={styles.videoList}
            v-model:loading={this.loading}
            finished={this.finished}
            finishedText=" "
            immediateCheck={false}
            onLoad={this.getList}
          >
            {this.list.map((item: any) => (
              <CellGroup inset class={styles.cellGroup}>
                <Cell
                  v-slots={{
                    icon: () => (
                      <Image src={item.imgUrl} class={styles.image} />
                    ),
                    title: () => (
                      <div class={styles.title}>{item.rewardName}</div>
                    ),
                    label: () => (
                      <div class={styles.label}>{item.rewardDescribe}</div>
                    )
                  }}
                />
                <Cell
                  center
                  title={`获奖时间：${dayjs(item.winningTime).format(
                    'YYYY-MM-DD'
                  )}`}
                  titleClass={styles.cellTitle}
                  v-slots={{
                    value: () => (
                      <Button
                        color="linear-gradient(180deg, #FF8636 0%, #FF4E19 100%)"
                        size="small"
                        class={styles.button}
                        onClick={() => {
                          this.receiveRewardId = item.receiveRewardId
                          this.onGetAward()
                        }}
                      >
                        立即领取
                      </Button>
                    )
                  }}
                />
              </CellGroup>
            ))}
          </List>
        ) : (
          <ColResult btnStatus={false} classImgSize="SMALL" tips="暂无数据" />
        )}

        <Popup v-model:show={this.status} class={styles.popup}>
          <div class={styles.popupContainer}>
            {this.type === 'auth' && (
              <>
                <Image src={cert} class={styles.cert} />
                <h3>您还没有实名认证</h3>
                <p>完成实名认证后即可领取奖品</p>
                <div class={[styles.btnGroup, styles.btnMore]}>
                  <Button
                    type="primary"
                    block
                    class={styles.lastBtn}
                    onClick={() => {
                      this.status = false
                    }}
                  >
                    以后再说
                  </Button>
                  <Button
                    type="primary"
                    block
                    color="linear-gradient(180deg, #59E5D5 0%, #2DC7AA 100%)"
                    onClick={() => {
                      this.popupShow = true
                    }}
                  >
                    立即认证
                  </Button>
                </div>
              </>
            )}

            {this.type === 'success' && (
              <>
                <Image src={award} class={styles.award} />
                <h3>奖品领取成功！</h3>
                <p>请耐心等待，活动奖品将会到达～</p>
                <div class={[styles.btnGroup]}>
                  <Button
                    type="primary"
                    block
                    color="linear-gradient(180deg, #59E5D5 0%, #2DC7AA 100%)"
                    onClick={() => {
                      this.status = false
                      this.list = []
                      this.params.page = 1
                      this.getList()
                    }}
                  >
                    我知道了
                  </Button>
                </div>
              </>
            )}
          </div>
        </Popup>

        <ColPopup v-model={this.popupShow}>
          <UserAuth exists={this.exists} onSuccess={this.onAuthSuccess} />
        </ColPopup>
      </div>
    )
  }
})