h5-colexiu/src/tenant/activation-code/index.tsx

import TheSticky from '@/components/the-sticky'
import { defineComponent, onMounted, reactive } from 'vue'
import styles from './index.module.less'
import ColHeader from '@/components/col-header'
import bgImg from '../images/bg-image.png'
import { Button, List, Row, Col, Toast } from 'vant'
import icon1 from './icon-1.png'
import request from '@/helpers/request'
import ColResult from '@/components/col-result'

export default defineComponent({
  name: 'activation-code',
  setup() {
    // tenantActivationCode/page
    const state = reactive({
      refreshing: false,
      height: 0, // 页面头部高度，为了处理下拉刷新用的
      list: [],
      dataShow: true, // 判断是否有数据
      loading: false,
      finished: false,
      params: {
        page: 1,
        rows: 10
      },
      isClick: false,
      code: ''
    })
    const getList = async (hideLoading = false) => {
      try {
        if (state.isClick) return
        state.isClick = true
        const res = await request.post(
          '/api-student/tenantActivationCode/page',
          {
            data: {
              ...state.params
            },
            hideLoading: hideLoading
          }
        )
        state.isClick = false
        state.loading = false
        state.refreshing = false
        const result = res.data || {}
        // 处理重复请求数据
        if (state.list.length > 0 && result.current === 1) {
          return
        }
        state.list = state.list.concat(result.rows || [])
        state.finished = result.current >= result.pages
        state.params.page = result.current + 1
        state.dataShow = state.list.length > 0
      } catch {
        state.isClick = false
        state.dataShow = false
        state.refreshing = false
        state.finished = true
      }
    }

    const onSubmit = async () => {
      try {
        if (!state.code) {
          Toast('请输入激活码')
          return
        }

        await request.post(
          '/api-student/tenantActivationCode/active?activationCode=' +
            state.code
        )
        Toast.success('激活成功')
        state.params.page = 1
        state.list = []
        getList(true)
      } catch {
        //
      }
    }

    //
    const onActiveation = async (item: any) => {
      try {
        await request.post(
          '/api-student/tenantActivationCode/activeById?id=' + item.id
        )
        Toast.success('激活成功')
        state.params.page = 1
        state.list = []
        getList(true)
      } catch {
        //
      }
    }

    onMounted(() => {
      getList()
    })
    return () => (
      <div class={styles.activationCode}>
        <div class={styles.sticky}>
          <TheSticky position="top">
            <ColHeader
              background="transparent"
              isFixed={false}
              border={false}
              color="#131415"
            />
            <div class={styles.codeContainer}>
              <input
                v-model={state.code}
                placeholder="请输入激活码"
                class={styles.codeInput}
                maxlength={7}
              />

              <Button
                type="primary"
                round
                class={styles.codeBtn}
                block
                onClick={onSubmit}
              >
                立即兑换
              </Button>
            </div>
          </TheSticky>
          <img class={styles.bgImg} src={bgImg} />

          <List
            loading-text=" "
            finished={state.finished}
            finished-text=" "
            onLoad={getList}
            style={{ overflow: 'hidden' }}
          >
            <div class={styles.colGroup}>
              <div class={styles.title}>
                <img src={icon1} />
                激活记录
              </div>
              <Row class={styles.colRow}>
                <Col span={5}>激活码</Col>
                <Col span={4}>周期</Col>
                <Col span={6}>激活状态</Col>
                <Col span={9}>激活时间</Col>
              </Row>

              <div class={styles.codeList}>
                {state.list.map((item: any) => (
                  <Row>
                    <Col span={5}>{item.activationCode}</Col>
                    <Col span={4}>6个月</Col>
                    <Col
                      span={6}
                      class={item.activationStatus ? styles.c1 : styles.c3}
                    >
                      {item.activationStatus ? '已激活' : '待激活'}
                    </Col>
                    <Col span={9}>
                      {item.activationStatus ? (
                        item.activationTime
                      ) : (
                        <Button
                          class={styles.liveBtn}
                          color="#FE2451"
                          onClick={() => onActiveation(item)}
                        >
                          激活
                        </Button>
                      )}

                      {/* 2023-07-22 12:00:02 */}
                    </Col>
                  </Row>
                ))}
                {!state.dataShow && (
                  <div class={styles.emptyContainer}>
                    <ColResult tips="暂无激活码" btnStatus={false} />
                  </div>
                )}
              </div>
            </div>
          </List>
          {/* ) : (
            <div
              class={styles.emptyContainer}
            >
              <ColResult tips="暂无学练统计" btnStatus={false} />
            </div>
          )} */}
        </div>
      </div>
    )
  }
})