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

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

const recordList = ref<any[]>([])
const ui = useUi();
const code = ref<string>('')
const loading = ref<boolean>(false)
onMounted(() => {
  if (!user.info.value?.userInfo) {
    user.logout()
    return
  }
  fetchSubjectFeeRecord({
    createdUserId: user.info.value?.userInfo.userId
  }).then(res => {
    recordList.value = res
  })
})
async function handleExchange() {

  if (!code.value) {
    uni.showToast({
      title: '请输入兑换码',
      icon: 'none'
    })
    return
  }
  loading.value = true
  try {
    await exchangeCode({
      exchangeCode: code.value,
      subjectId: dict.getValueByLabelMapByType('index_subject_id')['物理'],
    })
    await user.get()
    ui.showConfirm({
      title: "提示",
      message: "兑换成功",
      showCancel: false,
      callback(action) {
        console.log("用户已确认:", action);
      },
    });
    loading.value = false
  } catch (err: any) {
    uni.showToast({
      title: err.message,
      icon: 'error'
    })
    loading.value = false
  }
}
</script>
<template>
  <view class="content" v-if="user.info.value?.userInfo && user.info.value?.userInfo?.memberLevel === 'default'">
    <view class="text-[30px] font-bold">
      兑换码
    </view>
    <cl-input v-model="code" :pt="{
      className: '!h-[40px] ',
    }" placeholder="请输入兑换码"></cl-input>
    <cl-button type="warn" :pt="{
      className: 'text-[18px] w-[140px] rounded-full text-black  text-center check to-pink-500 py-[5px] ',
    }" @tap="handleExchange()" :loading="loading">兑换</cl-button>

  </view>
  <view class="content2" v-else>
    <view v-for="item in recordList" :key="item" class="box flex flex-row  items-center gap-2">
      <view class="h-full">
        <image src="https://oss.xiaoxiongcode.com/static/个人中心/图层 13.png" mode="heightFix" class=" h-full" />
      </view>
      <view class="flex flex-col justify-around h-full">
        <view class="text-[5vh]  font-bold text-[#FC500F]">
          {{ item.mainTitle }}
        </view>
        <view class="text-[3vh] text-[#999]">
          兑换时间：{{ item.createdTime }}
        </view>
        <view class="text-[3vh]  text-[#999]">
          到期时间：{{ item.updateTime }}
        </view>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.content {
  @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-black w-[120vh] border-[3px] border-[#fff] border-solid rounded-[30px] px-10 py-4 h-[44vh] flex items-center justify-center gap-4 bg-white;

}

.content2 {
  @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
  overflow: hidden;
  border-radius: 10px;
}

.box {
  width: 120vh;
  // 宽高比3/1
  aspect-ratio: 4 / 1;
  padding: 5px;
  border-radius: 10px;
  background: linear-gradient(0deg, #FFFBF7 0%, #FFE0CC 100%);
  box-shadow: 3px 6px 4px 0px rgba(239, 103, 36, 0.48);
}

.check {
  background: linear-gradient(0deg, #FBD00E 0%, #FBEC92 100%);
}
</style>