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

<script setup lang='ts'>
import { ref } from 'vue'
import { exchangeCode } from '@/services/user'
import { dict } from '@/.cool/store'
import { user } from '@/.cool'


const code = ref<string>('')

async function handleExchange() {
  if (!code.value) {
    uni.showToast({
      title: '请输入兑换码',
      icon: 'none'
    })
    return
  }
  try {
    await exchangeCode({
      exchangeCode: code.value,
      subjectId: dict.getValueByLabelMapByType('index_subject_id')['物理'],
    })
    await user.get()
    uni.showToast({
      title: '兑换成功',
      icon: 'success'
    })
  } catch (err: any) {
    uni.showToast({
      title: err.message,
      icon: 'error'
    })
  }
}
</script>
<template>
  <view class="content">
    <view class="text-[30px] font-bold">
      兑换码
    </view>
    <cl-input v-model="code" :pt="{
      className: '!h-[40px] ',
    }" placeholder="请输入兑换码"></cl-input>
    <view class="text-[18px] w-[140px] rounded-full text-black  text-center check
               to-pink-500 py-[5px] " @tap="handleExchange()">
      兑换
    </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;

}

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