uniProject/pages/chanpinMy/duihuanma.vue

<template>
	<view class="icon-title-navBar-box1">
		<view @click="handleBack" class="nav-bar-icon"></view>
		<text class="nav-bar-title">使用兑换码</text>
	</view>
	<view>
		<view class="tip-content-box">
			<icon class="head-img-box" :style="{backgroundImage: 'url(' + myInfoData.icon + ')'}"></icon>
			<view>{{ myInfoData.nickName }}</view>
			<view>{{ myInfoData.userName }}</view>
			<input class="duihuan-input" type="text" focus v-model="duihuamaValue" placeholder="请输入兑换码" />
			<view class="tip-btn-box">
				<view class="confirm-btn" @click="confirmBtn">兑换码</view>
			</view>
		</view>
	</view>

	<!-- 失败 -->
	<duihuanError ref="dhErrRef"></duihuanError>
	<!-- 成功 -->
	<duihuanSuccess ref="dhSucRef"></duihuanSuccess>
</template>

<script setup>
	import {
		ref,reactive
	} from 'vue';
	import duihuanError from "./components/duihuanma/duihuanError";
	import duihuanSuccess from "./components/duihuanma/duihuanSuccess";
	import {
		duihuanmaCodeNew,
	} from '@/api/my.js'
	import cacheManager from '@/utils/cacheManager';
  import {toast} from "@/utils/common";
  import {myInfo} from "@/api/my";
  import {
    onLoad,
    onShow
  } from '@dcloudio/uni-app';

	const duihuamaValue = ref(''); // 索引
	const dhErrRef = ref(null);
	const dhSucRef = ref(null);
	const myInfoData = reactive({
		userName: '',
		nickName: '',
		icon: '',
	});

	onLoad(() => {
		getMyInfo();
	})

	// 获取用户数据
	function getMyInfo() {
		myInfo({}).then(res => {
			myInfoData.userName = res.data.userName;
			myInfoData.nickName = res.data.nickName;
			if (res.data.nickName) {
				myInfoData.nickName = res.data.nickName;
			} else {
				myInfoData.nickName = '鹅状元';
			}
			if (res.data.icon) {
				myInfoData.icon = res.data.icon;
			} else {
				getUserImg(res.data.growthType)
			}
		})
	}

	// 获取用户头像
	function getUserImg(data) {
		switch (data) {
			case 0:
				myInfoData.icon = 'static/images/my/head-img0.png'
				break;
			case 1:
				myInfoData.icon = 'static/images/my/head-img1.png'
				break;
			case 2:
				myInfoData.icon = 'static/images/my/head-img2.png'
				break;
			case 3:
				myInfoData.icon = 'static/images/my/head-img3.png'
				break;
			default:
				myInfoData.icon = 'static/images/my/head-unlogin-img.png'
				break;
		}
	}


	function handleBack() {
		uni.navigateBack()
	}

	// 确认
	function confirmBtn() {

    if (!duihuamaValue.value) {
      toast('请输入兑换码')
      return;
    }

		let req = {
			code: duihuamaValue.value
		}
		duihuanmaCodeNew(req).then(res => {
			if (res.code == 0) {
				// toast('兑换成功')
				// 清空缓存
				cacheManager.remove("contentInfo");
				duihuamaValue.value = '';
        dhSucRef.value.handleShow()
			} else {
				// toast('兑换失败请重试或联系管理员')
        dhErrRef.value.handleShow()
			}
		}).catch(err=> {
      toast('兑换失败请重试或联系管理员')
    })
	}
</script>

<style>

</style>