From 1299f3237a11dc36eb399bf721dc369cad15a07e Mon Sep 17 00:00:00 2001
From: no99 <17663930442@163.com>
Date: Mon, 18 Aug 2025 17:28:59 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=91=E5=B8=81=E5=85=91=E6=8D=A2Token?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/homePage.vue | 119 ++++++++++++++++++++++++++++++++++++++++---------
 1 file changed, 97 insertions(+), 22 deletions(-)

diff --git a/src/views/homePage.vue b/src/views/homePage.vue
index e4874ed..db3b601 100644
--- a/src/views/homePage.vue
+++ b/src/views/homePage.vue
@@ -718,22 +718,27 @@ 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 shouldPay=ref(0);
-const gold=ref(0);
-
-
+const chooseLevel = (item) => {
+  activeLevel.value = item;
+};
+const shouldPay = ref(0);
+const gold = ref(0);
 
 // 8.18金币兑换Token end
 
@@ -1033,15 +1038,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>
@@ -1049,17 +1051,37 @@ 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>
         (金币余额：{{ gold }})
-
       </div>
       <div class="changeBtn">立即兑换</div>
     </el-dialog>
@@ -1640,6 +1662,8 @@ body {
   display: flex;
   width: 100%;
   margin-bottom: 30px;
+  flex-wrap: wrap;
+  gap: 20px;
 }
 
 .changeInfo {
@@ -1648,7 +1672,6 @@ body {
   border-radius: 5px;
   padding: 10px 20px;
   /* width: 40%; */
-  margin-right: 5%;
   white-space: nowrap;
 }
 
@@ -1657,11 +1680,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;
 }
 
@@ -1674,8 +1702,8 @@ body {
   justify-content: center;
   color: #4e86fe;
   white-space: nowrap;
-  padding: 5px;
-  width: 40%;
+  padding: 5px 20px;
+  min-width: 40%;
 }
 
 .changeLevel {
@@ -1685,6 +1713,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 {