uniProject/pages/chanpinMy/duihuanma.vue

<template>
	<view class="ezy-dhm-page">
		<view class="icon-title-navBar-box">
			<view @click="handleBack" class="nav-bar-icon"></view>
			<text class="nav-bar-title">使用兑换码</text>
		</view>
		<view class="ezy-page-body dhm-body">
			<view class="dhm-head-box">
				<icon class="head-img-box" :style="{backgroundImage: 'url(' + myInfoData.icon + ')'}"></icon>
				<view class="head-content-box">
					<view>{{ myInfoData.nickName }}</view>
<!--					<view>{{ myInfoData.userName }}</view>-->
				</view>
			</view>
			<view class="duihuan-input-box">
				<icon class="duihuan-prefix-icon"></icon>
				<input class="duihuan-input" type="text" v-model="duihuamaValue" placeholder="请输入兑换码" />
			</view>
			<ezyActiveVue class="ezy-btn-active duihuan-confirm-btn" @aclick="confirmBtn">确定兑换
			</ezyActiveVue>
		</view>
	</view>
	<!-- 失败 -->
	<duihuanError ref="dhErrRef"></duihuanError>
	<!-- 成功 -->
	<duihuanSuccess ref="dhSucRef"></duihuanSuccess>
</template>

<script setup>
	import {
		ref,reactive
	} from 'vue';
	import ezyActiveVue from "@/components/ezyActive/ezyActive.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()
			}
		})
	}

	// 获取用户头像
	function getUserImg() {
    myInfoData.icon = 'static/images/my/head-img1.png'
	}


	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()
			}
		}).catch(err=> {
		  if (err && err.code == 1001) {
			dhErrRef.value.handleShow(err.data.msg)
		  }
		})
	}
</script>

<style>

</style>