youxi-app/pages/index/components/exchange.uvue

<script setup lang='ts'>
import { ref, computed, onMounted } from 'vue'
import { exchangeCode } from '@/services/user'
import { dict } from '@/.cool/store'
import { user, parse, userInfo } from '@/.cool'
import { type SubjectFeeRecord, fetchSubjectFeeRecord } from '@/services/subject/record'
import { useUi } from "@/uni_modules/cool-ui";

const recordList = ref<SubjectFeeRecord[]>([])
const ui = useUi();
const code = ref<string>('')
const loading = ref<boolean>(false)

onMounted(() => {
  if (userInfo.value == null) {
    user.logout()
    return
  }
  fetchSubjectFeeRecord({
    createdUserId: userInfo.value.userInfo.userId
  }).then(res => {
    recordList.value = res
  })
})
async function handleExchange() {
  if (code.value == "" || code.value == null) {
    uni.showToast({
      title: '请输入兑换码',
      icon: 'none'
    })
    return
  }
  try {
    const subject = dict.getValueByLabelMapByType('index_subject_id')
    console.log(subject)
    const id = subject['物理'] as string
    loading.value = true
    await exchangeCode({
      exchangeCode: code.value,
      subjectId: id,
    })
    await user.get()
    ui.showConfirm({
      title: "提示",
      message: "兑换成功",
      showCancel: false,
      callback(action) {
        if (userInfo.value == null) {
          return
        }
        fetchSubjectFeeRecord({
          createdUserId: userInfo.value.userInfo.userId
        }).then(res => {
          recordList.value = res
        })
      },
    });
    loading.value = false
  } catch (err: Error) {
    uni.showToast({
      title: err.message,
      icon: 'error'
    })
    loading.value = false
  }
}
</script>
<template>
  <view class="cc">
    <view class="cont2" v-if="userInfo != null && userInfo?.userInfo?.memberLevel != 'default'">
      <image src="https://oss.xiaoxiongcode.com/static/home/6293.png" mode="scaleToFill" lazy-load alt=""
        class="w-full h-full object-cover absolute top-0 left-0 z-[1]" />
      <view class="relative z-[2] w-full h-full  pt-[70rpx] px-[50rpx] pr-[56rpx]">
        <cl-row :gutter="12">
          <cl-col :span="8" :pt="{
            className: 'bg-[#FDE6BD]',
          }">
            <text class="text-[16rpx] font-bold py-[5rpx] text-center text-[#A57138]">课程名称</text>
          </cl-col>
          <cl-col :span="8" :pt="{
            className: 'bg-[#FDE6BD]',
          }">
            <text class="text-[16rpx] font-bold py-[5rpx] text-center text-[#A57138]">兑换时间</text>
          </cl-col>
          <cl-col :span="8" :pt="{
            className: 'bg-[#FDE6BD]',
          }">
            <text class="text-[16rpx] font-bold py-[5rpx] text-center text-[#A57138]">到期时间</text>
          </cl-col>
        </cl-row>
        <cl-row :gutter="12" v-for="item in recordList" :key="item.id as string" :pt="{
          className: 'border-b-[1rpx] border-[#FFE9C0] border-solid align-center',
        }">
          <cl-col :span="8">
            <text class="text-[14rpx] font-bold py-[5rpx] text-center text-[#333]">{{ item.mainTitle }}</text>
          </cl-col>
          <cl-col :span="8">
            <text class="text-[14rpx] font-bold py-[5rpx] text-center text-[#333]">{{ item.createdTime }}</text>
          </cl-col>
          <cl-col :span="8">
            <text class="text-[14rpx] font-bold py-[5rpx] text-center text-[#333]">{{ item.updateTime }}</text>
          </cl-col>
        </cl-row>
      </view>

    </view>
    <view class="cont" v-else>
      <image src="https://oss.xiaoxiongcode.com/static/home/6292.png" mode="widthFix" lazy-load alt=""
        class="w-full h-full object-cover absolute top-0 left-0 z-[1]" />

      <text class="text-[30px] font-bold relative z-[2]  pb-[20rpx]">
        —— 兑换码 ——
      </text>
      <cl-input v-model="code" :pt="{
        className: '!h-[40px] relative z-[2] w-[200rpx]',
      }" placeholder="请输入兑换码">
        <template #append>
          <cl-button type="primary" :pt="{
            className: 'text-[18px] w-[100px] scale-[1.1] transform translate-x-[3rpx]',
          }" @tap="handleExchange()" :loading="loading">兑换</cl-button>
        </template>
      </cl-input>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.cc {
  @apply w-full flex items-center justify-center;
  height: calc(97vh - 85px);
}

.cont {
  @apply mx-auto mt-[10rpx] text-black w-[420rpx] rounded-[30px] px-10 h-[270rpx] flex items-center justify-center pb-[20rpx] relative;
}

.cont2 {
  @apply w-[600rpx] h-[250rpx] relative;
}
</style>