Merge branch 'milestone-20250710-上线前优化' of http://39.101.133.168:8807/hongxilin/AIxiaocaishen into milestone-20250710-上线前优化

src/views/homePage.vue

@@ -890,22 +890,57 @@ const backToHome = () => {
 const userInfo = ref({
   username: "HomilyLink",
   jwcode: "90042088",
+  img: "	https://d31zlh4on95l9h.cloudfront.net/images/403ef762dd2f335df3b0c9e3fe488375.png",
 });
 const changeRule = ref("1金币=1Token");
 const changeLevelList = ref([
-  { gold: 10, token: 10 },
-  { gold: 20, token: 20 },
-  { gold: 50, token: 50 },
-  { gold: 100, token: 100 },
-  { gold: 200, token: 200 },
-  { gold: 500, token: 500 },
-  { gold: 1000, token: 1000 },
+  { position: 10, calculatedPosition: 10 },
+  { position: 20, calculatedPosition: 20 },
+  { position: 50, calculatedPosition: 50 },
+  { position: 100, calculatedPosition: 100 },
+  { position: 200, calculatedPosition: 200 },
+  { position: 500, calculatedPosition: 500 },
+  { position: 1000, calculatedPosition: 1000 },
 ]);
+const activeLevel = ref(
+  changeLevelList.value[0] || { position: 10, calculatedPosition: 10 }
+);
+const gold = ref(0);
 
-const shouldPay=ref(0);
-const gold=ref(0);
+const rechargeDialogVisible = ref(false);
 
+const chooseLevel = (item) => {
+  activeLevel.value = item;
+};
 
+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
 
@@ -934,6 +969,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(() => {
@@ -1232,15 +1275,12 @@ onUnmounted(() => {
     </el-container>
     <!-- 弹窗 -->
     <!-- 新增弹窗组件 -->
-    <el-dialog v-model="dialogVisible" max-width="65%">
+    <el-dialog v-model="dialogVisible" :width="isMobile ? '80%' : '60%'">
       <!-- 中间内容部分 -->
       <div class="changeMsg">
         <div class="changeInfo">
           <div class="changeImg">
-            <img
-              src="https://d31zlh4on95l9h.cloudfront.net/images/74e20c65c9ef2526477c63ad68698a50.png"
-              alt="头像"
-            />
+            <img :src="userInfo.img" alt="头像" class="changeImgClass" />
           </div>
           <div class="changeContent">
             <div class="changeUsername">{{ userInfo.username }}</div>
@@ -1248,19 +1288,61 @@ onUnmounted(() => {
           </div>
         </div>
         <div class="changeRule">兑换规则：{{ changeRule }}</div>
-
       </div>
       <div class="changeLevel">
         <div class="changeLevelTitle">兑换Token</div>
-        <div class="changeLevelItems"></div>
+        <div class="changeLevelContent">
+          <div
+            class="changeLevelItems"
+            v-for="item in changeLevelList"
+            :key="item"
+            :class="{
+              changeLevelItemsActive: item.position == activeLevel.position,
+            }"
+            @click="chooseLevel(item)"
+          >
+            <div class="changeLevelItem">
+              <div class="changeLevelItemToken">
+                <img
+                  src="https://d31zlh4on95l9h.cloudfront.net/images/403ef762dd2f335df3b0c9e3fe488375.png"
+                  alt="token"
+                  class="changeLevelItemTokenImg"
+                />
+                {{ item.calculatedPosition }}
+              </div>
+              <div class="changeLevelItemToken">{{ item.position }} 金币</div>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="changeNow">
         应付金额
-        <div class="changePay">{{ shouldPay }}</div>
+        <div class="changePay">{{ activeLevel.position }}</div>
+
         (金币余额：{{ gold }})
+      </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>
-      <div class="changeBtn">立即兑换</div>
     </el-dialog>
   </div>
 </template>
@@ -1839,6 +1921,8 @@ body {
   display: flex;
   width: 100%;
   margin-bottom: 30px;
+  flex-wrap: wrap;
+  gap: 20px;
 }
 
 .changeInfo {
@@ -1847,7 +1931,6 @@ body {
   border-radius: 5px;
   padding: 10px 20px;
   /* width: 40%; */
-  margin-right: 5%;
   white-space: nowrap;
 }
 
@@ -1856,11 +1939,16 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-right: 10px;
+}
+
+.changeImgClass {
 }
 
 .changeContent {
   display: flex;
   flex-direction: column;
+  justify-content: center;
   font-weight: bold;
 }
 
@@ -1873,8 +1961,8 @@ body {
   justify-content: center;
   color: #4e86fe;
   white-space: nowrap;
-  padding: 5px;
-  width: 40%;
+  padding: 5px 20px;
+  min-width: 40%;
 }
 
 .changeLevel {
@@ -1884,6 +1972,53 @@ body {
 
 .changeLevelTitle {
   font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.changeLevelContent {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  margin-bottom: 10px;
+}
+
+.changeLevelItems {
+  display: flex;
+  background-color: #f8f8f8;
+  width: 20%;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  border-radius: 10px;
+  padding: 5px;
+  cursor: pointer;
+}
+
+.changeLevelItems:hover {
+  background-color: #ecf2ff;
+}
+
+.changeLevelItemsActive {
+  border: 1px solid #4e86fe;
+  background-color: #ecf2ff;
+}
+
+.changeLevelItem {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.changeLevelItemToken {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.changeLevelItemTokenImg {
+  width: 40px;
+  height: 40px;
 }
 
 .changeNow {
@@ -1891,10 +2026,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 {
@@ -1912,4 +2049,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>