ui更新

src/components/BottomNav.vue

@@ -1,76 +1,82 @@
 <template>
-  <div class="bottom-nav">
+  <div class="bottom-nav" :style="{ backgroundImage: 'url(' + backgroundImage + ')' }">
+    <!-- 融豆匹配 -->
     <div 
-      class="nav-item" 
+      class="nav-item nav-item-first" 
-      :class="{ active: isActive('/mainpage') }"
-      @click="handleNavClick('/mainpage')"
-    >
-      <HomeFilled class="nav-icon" />
-      <span class="nav-label">主页</span>
-    </div>
-    <div 
-      class="nav-item" 
       :class="{ active: isActive('/mymatching') }"
       @click="handleNavClick('/mymatching')"
     >
-      <Connection class="nav-icon" />
+      <img 
+        src="/imgs/bottomnav/融豆匹配.png"
+        alt="融豆匹配" 
+        class="nav-image"
+        :class="{ 'nav-image-active': isActive('/mymatching') }"
+      />
       <span class="nav-label">融豆匹配</span>
     </div>
+    <!-- 融豆明细 -->
     <div 
-      class="nav-item" 
+      class="nav-item nav-item-second" 
-      :class="{ active: isActive('/myshop') }"
-      @click="handleNavClick('/myshop')"
-    >
-      <Coin class="nav-icon" />
-      <span class="nav-label">积分商城</span>
-    </div>
-    <div 
-      class="nav-item" 
       :class="{ active: isActive('/transfers') }"
       @click="handleNavClick('/transfers')"
     >
-      <Money class="nav-icon" />
+      <img 
+        src="/imgs/bottomnav/融豆明细.png"
+        alt="融豆明细" 
+        class="nav-image"
+        :class="{ 'nav-image-active': isActive('/transfers') }"
+      />
       <span class="nav-label">融豆明细</span>
     </div>
+    <!-- 主页 -->
     <div 
-      class="nav-item" 
+      class="nav-item nav-item-third" 
+      :class="{ active: isActive('/mainpage') }"
+      @click="handleNavClick('/mainpage')"
+    >
+      <img 
+        src="/imgs/bottomnav/主页.png"
+        alt="主页" 
+        class="nav-image"
+        :class="{ 'nav-image-active': isActive('/mainpage') }"
+      />
+      <span class="nav-label">主页</span>
+    </div>
+    <!-- 积分商城 -->
+    <div 
+      class="nav-item nav-item-fourth" 
+      :class="{ active: isActive('/myshop') }"
+      @click="handleNavClick('/myshop')"
+    >
+      <img 
+        src="/imgs/bottomnav/积分商城.png"
+        alt="积分商城" 
+        class="nav-image"
+        :class="{ 'nav-image-active': isActive('/myshop') }"
+      />
+      <span class="nav-label">积分商城</span>
+    </div>
+    <!-- 个人中心 -->
+    <div 
+      class="nav-item nav-item-last" 
       :class="{ active: isActive('/myprofile') }"
       @click="handleNavClick('/myprofile')"
     >
-      <User class="nav-icon" />
+      <img 
+        src="/imgs/bottomnav/个人中心.png"
+        alt="个人中心" 
+        class="nav-image"
+        :class="{ 'nav-image-active': isActive('/myprofile') }"
+      />
       <span class="nav-label">个人中心</span>
     </div>
-    <!-- <div 
-      class="nav-item" 
-      :class="{ active: isActive('/matching') }"
-      @click="handleNavClick('/matching')"
-    >
-      <Connection class="nav-icon" />
-      <span class="nav-label">资金匹配</span>
-    </div>
-    <div 
-      class="nav-item" 
-      :class="{ active: isActive('/points-history') }"
-      @click="handleNavClick('/points-history')"
-    >
-      <Coin class="nav-icon" />
-      <span class="nav-label">积分记录</span>
-    </div>
-    <div 
-      class="nav-item" 
-      :class="{ active: isActive('/profile') }"
-      @click="handleNavClick('/profile')"
-    >
-      <User class="nav-icon" />
-      <span class="nav-label">个人中心</span>
-    </div> -->
   </div>
 </template>
 
 <script setup>
 import { useRouter, useRoute } from 'vue-router'
+import { computed } from 'vue'
 import { useUserStore } from '@/stores/user'
-import { Money, Coin, User, Connection, HomeFilled } from '@element-plus/icons-vue'
 
 const router = useRouter()
 const route = useRoute()
@@ -87,6 +93,25 @@ const handleNavClick = (path) => {
   }
   router.push(path)
 }
+
+// 根据当前路由计算背景图片
+const backgroundImage = computed(() => {
+  const currentPath = route.path
+  switch (currentPath) {
+    case '/mymatching':
+      return '/imgs/bottomnav/融豆匹配背景.png'
+    case '/transfers':
+      return '/imgs/bottomnav/融豆明细背景.png'
+    case '/mainpage':
+      return '/imgs/bottomnav/主页背景.png'
+    case '/myshop':
+      return '/imgs/bottomnav/积分商城背景.png'
+    case '/myprofile':
+      return '/imgs/bottomnav/个人中心背景.png'
+    default:
+      return '/imgs/bottomnav/默认背景.png'
+  }
+})
 </script>
 
 <style scoped>
@@ -95,137 +120,202 @@ const handleNavClick = (path) => {
   bottom: 0;
   left: 0;
   right: 0;
-  background: white;
+  background-size: cover;
-  border-top: 1px solid #e4e7ed;
+  background-position: center;
+  background-repeat: no-repeat;
   display: flex;
   justify-content: space-around;
   align-items: center;
-  padding: 8px 0;
+  padding: 20px 0;
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
   z-index: 1000;
   padding-bottom: env(safe-area-inset-bottom);
+  height: 80px;
 }
 
 .nav-item {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 8px 16px;
+  justify-content: center;
   cursor: pointer;
   transition: all 0.3s ease;
-  border-radius: 12px;
   min-width: 60px;
+  height: 60px;
 }
 
-.nav-item:hover {
+.nav-image {
-  transform: translateY(-2px);
+  width: 40px;
-  background: rgba(64, 158, 255, 0.1);
+  height: 40px;
-}
+  object-fit: contain;
-
-.nav-item:active {
-  transform: translateY(0);
-}
-
-.nav-item.active {
-  background: rgba(64, 158, 255, 0.15);
-}
-
-.nav-item.active .nav-icon {
-  color: #409eff;
-  transform: scale(1.1);
-}
-
-.nav-item.active .nav-label {
-  color: #409eff;
-  font-weight: 600;
-}
-
-.nav-icon {
-  font-size: 20px;
-  color: #909399;
-  margin-bottom: 4px;
   transition: all 0.3s ease;
 }
 
-.nav-item:hover .nav-icon {
+.nav-image-active {
-  color: #409eff;
+  transform: translateY(-30px);
-  transform: scale(1.1);
 }
 
 .nav-label {
   font-size: 12px;
-  color: #606266;
+  color: white;
-  transition: all 0.3s ease;
+  margin-top: 4px;
   text-align: center;
 }
 
-.nav-item:hover .nav-label {
+.nav-item-first {
-  color: #409eff;
+  margin-left: 20px;
+}
+
+.nav-item-second {
+  margin-left: -10px;
+}
+
+.nav-item-third {
+  margin-left: 15px;
+}
+
+.nav-item-fourth {
+  margin-right: -10px;
+}
+
+.nav-item-last {
+  margin-right: 20px;
 }
 
 /* 移动端适配 */
 @media (max-width: 768px) {
   .bottom-nav {
-    padding: 6px 0;
+    padding: 15px 0;
-    padding-bottom: max(8px, env(safe-area-inset-bottom));
+    padding-bottom: max(15px, env(safe-area-inset-bottom));
+    height: 70px;
   }
   
   .nav-item {
-    padding: 6px 8px;
     min-width: 50px;
-    min-height: 44px; /* 触摸友好的最小尺寸 */
+    height: 50px;
-    justify-content: center;
   }
   
-  .nav-icon {
+  .nav-image {
-    font-size: 18px;
+    width: 35px;
-    margin-bottom: 2px;
+    height: 35px;
+  }
+  
+  .nav-image-active {
+    transform: translateY(-25px);
   }
   
   .nav-label {
-    font-size: 11px;
+    font-size: 10px;
-    line-height: 1.2;
+  }
+  
+  .nav-item-first {
+    margin-left: 15px;
+  }
+  
+  .nav-item-second {
+    margin-left: -8px;
+  }
+  
+  .nav-item-third {
+    margin-left: 12px;
+  }
+  
+  .nav-item-fourth {
+    margin-right: -8px;
+  }
+  
+  .nav-item-last {
+    margin-right: 15px;
   }
 }
 
 @media (max-width: 480px) {
   .bottom-nav {
-    padding: 4px 0;
+    padding: 10px 0;
-    padding-bottom: max(6px, env(safe-area-inset-bottom));
+    padding-bottom: max(10px, env(safe-area-inset-bottom));
+    height: 60px;
   }
   
   .nav-item {
-    padding: 4px 6px;
     min-width: 45px;
+    height: 45px;
   }
   
-  .nav-icon {
+  .nav-image {
-    font-size: 16px;
+    width: 40px;
-    margin-bottom: 1px;
+    height: 40px;
+  }
+  
+  .nav-image-active {
+    transform: translateY(-20px);
   }
   
   .nav-label {
-    font-size: 10px;
+    font-size: 9px;
+  }
+  
+  .nav-item-first {
+    margin-left: 10px;
+  }
+  
+  .nav-item-second {
+    margin-left: -6px;
+  }
+  
+  .nav-item-third {
+    margin-left: 10px;
+  }
+  
+  .nav-item-fourth {
+    margin-right: -6px;
+  }
+  
+  .nav-item-last {
+    margin-right: 10px;
   }
 }
 
 /* 横屏适配 */
 @media (max-height: 500px) and (orientation: landscape) {
   .bottom-nav {
-    padding: 4px 0;
+    padding: 8px 0;
+    height: 50px;
   }
   
   .nav-item {
-    padding: 4px 8px;
+    height: 40px;
   }
   
-  .nav-icon {
+  .nav-image {
-    font-size: 16px;
+    width: 25px;
-    margin-bottom: 1px;
+    height: 25px;
+  }
+  
+  .nav-image-active {
+    transform: translateY(-18px);
   }
   
   .nav-label {
-    font-size: 10px;
+    font-size: 8px;
+  }
+  
+  .nav-item-first {
+    margin-left: 15px;
+  }
+  
+  .nav-item-second {
+    margin-left: -8px;
+  }
+  
+  .nav-item-third {
+    margin-left: 12px;
+  }
+  
+  .nav-item-fourth {
+    margin-right: -8px;
+  }
+  
+  .nav-item-last {
+    margin-right: 15px;
   }
 }
 </style>

src/views/BuyDetails.vue

@@ -141,7 +141,7 @@ const specIdToOrder = ref({}) // 规格ID到顺序编号的映射
 // 计算属性
 const totalPrice = computed(() => {
   if (!product.value) return 0
-  return product.value.points * quantity.value
+  return product.value.rongdou_price * quantity.value
 })
 
 const canPurchase = computed(() => {

src/views/MyShop.vue

@@ -55,7 +55,7 @@
                 <div class="product-info">
                   <div class="product-name">{{ product.name }}</div>
                   <div class="product-price">
-                    <span class="points">{{ product.points }}</span>
+                    <span class="points">{{ product.rongdou_price }}</span>
                     <span class="original-price" v-if="product.originalPoints">{{ product.originalPoints }}</span>
                   </div>
                 </div>

src/views/Orders.vue

@@ -259,10 +259,6 @@
 
         <div class="detail-section">
           <h4>配送信息</h4>
-          <div class="detail-item">
-            <span class="label">收货地址：</span>
-            <span class="value">{{ orderDetail.shippingAddress || '虚拟商品，无需配送' }}</span>
-          </div>
           <div class="detail-item">
             <span class="label">物流信息：</span>
             <span class="value">{{ orderDetail.trackingNumber || '暂无' }}</span>

src/views/ProductDetail.vue

@@ -58,8 +58,8 @@
           <div class="product-price">
             <div class="current-price">
               <el-icon><Coin /></el-icon>
-              <span class="price-number">{{ product.points }}</span>
+              <span class="price-number">{{ product.rongdou_price }}</span>
-              <span class="price-unit">积分</span>
+              <span class="price-unit">融豆</span>
             </div>
             <div v-if="product.originalPoints" class="original-price">
               原价：{{ product.originalPoints }}积分

src/views/ProductSummary.vue

@@ -32,7 +32,7 @@
         <img :src="firstProduct.image" :alt="firstProduct.name" class="small-image" />
         <div class="product-info">
           <span class="product-name">{{ firstProduct.name }}</span>
-          <span class="product-price">{{ firstProduct.points }} 积分</span>
+          <span class="product-price">{{ firstProduct.rongdou_price }} 融豆</span>
         </div>
         <span @click="$router.push(`/product/${firstProduct.id}`)" class="link">详情></span>
       </div>
@@ -68,7 +68,7 @@
         <img :src="product.image" :alt="product.name" class="small-image" />
         <div class="product-info">
           <span class="product-name">{{ product.name }}</span>
-          <span class="product-price">{{ product.points }} 积分</span>
+          <span class="product-price">{{ product.rongdou_price }} 融豆</span>
         </div>
         <span @click="$router.push(`/product/${product.id}`)" class="link">详情></span>
       </div>

src/views/Shop.vue

@@ -66,7 +66,7 @@
             <div class="recommend-price-container">
               <div class="recommend-price">
                 <el-icon><Coin /></el-icon>
-                {{ product.points }}
+                {{ product.rongdou_price }}
               </div>
               <div v-if="product.originalPoints" class="recommend-original-price">
                 {{ product.originalPoints }}
@@ -91,7 +91,7 @@
             <div class="recommend-price-container">
               <div class="recommend-price">
                 <el-icon><Coin /></el-icon>
-                {{ product.points }}
+                {{ product.rongdou_price }}
               </div>
               <div v-if="product.originalPoints" class="recommend-original-price">
                 {{ product.originalPoints }}
@@ -139,7 +139,7 @@
           <div class="product-price">
             <span class="current-price">
               <el-icon><Coin /></el-icon>
-              {{ product.points }}
+              {{ product.rongdou_price }}
             </span>
             <span v-if="product.originalPoints" class="original-price">
               {{ product.originalPoints }}