uniProject/pages/chanpinMy/components/duihuanma/duihuanmaDialog.vue

<!-- 小弹窗 一行文字 -->
<template>
  <uni-popup ref="tipSmallPopup" :animation="true" :is-mask-click="false"
             mask-background-color="rgba(255, 255, 255, 0.6);">
    <view class="icon-title-navBar-box">
      <view @click="handleBack" class="nav-bar-icon"></view>
      <text class="nav-bar-title">兑换码</text>
    </view>
    <view class="ezy-tip-dialog tip-small-dialog duihuan-dialog" style="height: 100vh">
      <view class="tip-content-box">
        <view class="icon-title-navBar-box">
          <view class="nav-bar-title">{{ title }}</view>
        </view>
		<icon class="head-img-box" :style="{backgroundImage: 'url(' + icon + ')'}"></icon>
        <view>{{ nickName }}</view>
        <view>{{ 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>
  </uni-popup>
  <!-- 失败 -->
  <duihuanError ref="dhErrRef"></duihuanError>
  <!-- 成功 -->
  <duihuanSuccess ref="dhSucRef"></duihuanSuccess>
</template>

<script setup>
import {ref} from 'vue';
import duihuanError from "./duihuanError";
import duihuanSuccess from "./duihuanSuccess";
import {
		duihuanmaCode,
	} from '@/api/my.js'
import cacheManager from '@/utils/cacheManager';

const props = defineProps({
  title: {
    type: String,
    default: '提示'
  },
  content: {
    type: String,
    require: true,
    default: ''
  },
  userName: {
    type: String,
    default: ''
  },
  nickName: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
  },
});
const tipSmallPopup = ref(null); // 索引
const duihuamaValue = ref(''); // 索引
const $emit = defineEmits(['confirm-btn'])
const dhErrRef = ref(null);
const dhSucRef = ref(null);


function handleBack() {
  handleClose();
}

// 打开弹窗
function handleShow() {
  tipSmallPopup.value.open('bottom');
}

// 取消
function handleClose() {
  duihuamaValue.value = ''
  tipSmallPopup.value.close();
}

// 确认
function confirmBtn() {
	
	let req = {
		code: duihuamaValue.value
	}
	duihuanmaCode(req).then(res => {
		if (res.code == 0) {
			toast('兑换成功')

			// 清空缓存
			cacheManager.updateObject('auth', {})
			
			// 关窗清空
			tipSmallPopup.value.close();
			duihuamaValue.value = ''
		} else {
			toast('兑换失败请重试或联系管理员')
			return false
		}
	})
}

defineExpose({
  handleShow
})
</script>

<style>
</style>