duihuanma.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124
  1. <template>
  2. <view class="ezy-dhm-page">
  3. <view class="icon-title-navBar-box">
  4. <view @click="handleBack" class="nav-bar-icon"></view>
  5. <text class="nav-bar-title">使用兑换码</text>
  6. </view>
  7. <view class="ezy-page-body dhm-body">
  8. <view class="dhm-head-box">
  9. <icon class="head-img-box" :style="{backgroundImage: 'url(' + myInfoData.icon + ')'}"></icon>
  10. <view class="head-content-box">
  11. <view>{{ myInfoData.nickName }}</view>
  12. <view>{{ myInfoData.userName }}</view>
  13. </view>
  14. </view>
  15. <view class="duihuan-input-box">
  16. <icon class="duihuan-prefix-icon">+86</icon>
  17. <input class="duihuan-input" type="text" focus v-model="duihuamaValue" placeholder="请输入兑换码" />
  18. </view>
  19. <ezyActiveVue class="ezy-btn-active duihuan-confirm-btn" @aclick="confirmBtn">确定兑换
  20. </ezyActiveVue>
  21. </view>
  22. </view>
  23. <!-- 失败 -->
  24. <duihuanError ref="dhErrRef"></duihuanError>
  25. <!-- 成功 -->
  26. <duihuanSuccess ref="dhSucRef"></duihuanSuccess>
  27. </template>
  28. <script setup>
  29. import {
  30. ref,reactive
  31. } from 'vue';
  32. import ezyActiveVue from "@/components/ezyActive/ezyActive.vue"
  33. import duihuanError from "./components/duihuanma/duihuanError";
  34. import duihuanSuccess from "./components/duihuanma/duihuanSuccess";
  35. import {
  36. duihuanmaCodeNew,
  37. } from '@/api/my.js'
  38. import cacheManager from '@/utils/cacheManager';
  39. import {toast} from "@/utils/common";
  40. import {myInfo} from "@/api/my";
  41. import {
  42. onLoad,
  43. onShow
  44. } from '@dcloudio/uni-app';
  45. const duihuamaValue = ref(''); // 索引
  46. const dhErrRef = ref(null);
  47. const dhSucRef = ref(null);
  48. const myInfoData = reactive({
  49. userName: '',
  50. nickName: '',
  51. icon: '',
  52. });
  53. onLoad(() => {
  54. getMyInfo();
  55. })
  56. // 获取用户数据
  57. function getMyInfo() {
  58. myInfo({}).then(res => {
  59. myInfoData.userName = res.data.userName;
  60. myInfoData.nickName = res.data.nickName;
  61. if (res.data.nickName) {
  62. myInfoData.nickName = res.data.nickName;
  63. } else {
  64. myInfoData.nickName = '鹅状元';
  65. }
  66. if (res.data.icon) {
  67. myInfoData.icon = res.data.icon;
  68. } else {
  69. getUserImg(res.data.growthType)
  70. }
  71. })
  72. }
  73. // 获取用户头像
  74. function getUserImg(data) {
  75. switch (data) {
  76. case 0:
  77. myInfoData.icon = 'static/images/my/head-img0.png'
  78. break;
  79. case 1:
  80. myInfoData.icon = 'static/images/my/head-img1.png'
  81. break;
  82. case 2:
  83. myInfoData.icon = 'static/images/my/head-img2.png'
  84. break;
  85. case 3:
  86. myInfoData.icon = 'static/images/my/head-img3.png'
  87. break;
  88. default:
  89. myInfoData.icon = 'static/images/my/head-unlogin-img.png'
  90. break;
  91. }
  92. }
  93. function handleBack() {
  94. uni.navigateBack()
  95. }
  96. // 确认
  97. function confirmBtn() {
  98. let req = {
  99. code: duihuamaValue.value
  100. }
  101. duihuanmaCodeNew(req).then(res => {
  102. if (res.code == 0) {
  103. toast('兑换成功')
  104. // 清空缓存
  105. cacheManager.remove("contentInfo");
  106. duihuamaValue.value = '';
  107. } else {
  108. toast('兑换失败请重试或联系管理员')
  109. }
  110. })
  111. }
  112. </script>
  113. <style>
  114. </style>