更换下方tab图片情绪度。金币兑换Token弹窗

src/views/homePage.vue

@@ -733,12 +733,42 @@ const changeLevelList = ref([
 const activeLevel = ref(
   changeLevelList.value[0] || { position: 10, calculatedPosition: 10 }
 );
+const gold = ref(0);
+
+const rechargeDialogVisible = ref(false);
 
 const chooseLevel = (item) => {
   activeLevel.value = item;
 };
-const shouldPay = ref(0);
-const gold = ref(0);
+
+const changeToken = () => {
+  if (gold.value < activeLevel.value.position) {
+    rechargeDialogVisible.value = true;
+    return;
+  }
+};
+
+const goRecharge = () => {
+  if (isMobile.value) {
+    console.log("用户是移动端");
+  } else {
+    console.log("用户是pc端");
+    const env = import.meta.env.VITE_ENV;
+    console.log("当前的环境为：", env);
+    if (env == "development" || env == "test") {
+      window.parent.location.href =
+        "http://192.168.1.24:8080/user/myGold?token=" +
+        localStorage.getItem("localToken") +
+        "&where=xiaocaishen&successUrl=http://192.168.1.5:3000/aixiaocaishen/homePage";
+    } else if (env == "product") {
+      // window.parent.location.href =
+      // 'https://web.homilychart.com/product/hljw/homepage?menu=999999991'
+    } else if (env == "production") {
+      // window.parent.location.href = 'https://web.homilychart.com/hljw/homepage?menu=999999991'
+    }
+    // window.parent.location.href = window.parent.document.referrer
+  }
+};
 
 // 8.18金币兑换Token end
 
@@ -767,6 +797,14 @@ onMounted(async () => {
 
   // 添加原生事件监听器
   window.addEventListener("resize", throttledJudgeDevice);
+
+  if (getQueryVariable("successType") == "success") {
+    dialogVisible.value = true;
+    window.parent.location.href = window.parent.location.href.replace(
+      "successType=success",
+      ""
+    );
+  }
 });
 
 onUnmounted(() => {
@@ -1080,10 +1118,32 @@ onUnmounted(() => {
       </div>
       <div class="changeNow">
         应付金额
-        <div class="changePay">{{ shouldPay }}</div>
+        <div class="changePay">{{ activeLevel.position }}</div>
+
         (金币余额：{{ gold }})
       </div>
-      <div class="changeBtn">立即兑换</div>
+      <div class="changeBtn" @click="changeToken">立即兑换</div>
+    </el-dialog>
+
+    <el-dialog
+      v-model="rechargeDialogVisible"
+      :width="isMobile ? '60%' : '40%'"
+      :show-close="false"
+    >
+      <div class="rechargeDialogTitle">温馨提示</div>
+      <div class="rechargeDialogContent">
+        尊敬的用户您好！您当前的金币余额不足，无法进行兑换，可充值金币后进行兑换。点击下方的“前往充值”可进行充值。
+      </div>
+      <div class="rechargeDialogBtnGroup">
+        <div class="recharge" @click="goRecharge">前往充值</div>
+
+        <div
+          class="rechargeDialogCancel"
+          @click="rechargeDialogVisible = false"
+        >
+          取消
+        </div>
+      </div>
     </el-dialog>
   </div>
 </template>
@@ -1767,10 +1827,12 @@ body {
   white-space: nowrap;
   /* font-weight: bold; */
   margin-bottom: 15px;
+  align-items: center;
 }
 .changePay {
   color: #4e86fe;
   margin: 0px 5px;
+  font-size: 1.1rem;
 }
 
 .changeBtn {
@@ -1788,4 +1850,52 @@ body {
 .changeBtn:hover {
   background-color: #3a73e6;
 }
+
+.rechargeDialogTitle {
+  font-size: 1.7rem;
+  /* font-weight: bold; */
+  color: #4e86fe;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  letter-spacing: 10px;
+}
+.rechargeDialogContent {
+  padding: 20px;
+  font-size: 1.2rem;
+}
+
+.rechargeDialogBtnGroup {
+  display: flex;
+  font-size: 1.2rem;
+  padding: 0px 20px;
+  justify-content: space-between;
+}
+
+.recharge {
+  color: white;
+  background-color: #4e86fe;
+  padding: 10px 20px;
+  border-radius: 13px;
+  cursor: pointer;
+  width: 20%;
+  text-align: center;
+}
+
+.recharge:hover {
+  background-color: #3a73e6;
+}
+
+.rechargeDialogCancel {
+  border: 1px solid rgb(202, 202, 202);
+  padding: 10px 20px;
+  border-radius: 13px;
+  cursor: pointer;
+  width: 20%;
+  text-align: center;
+}
+
+.rechargeDialogCancel:hover {
+  background-color: #ecf2ff;
+}
 </style>