细节调整
This commit is contained in:
		| @@ -455,7 +455,12 @@ const selectPaymentMethod = async (method) => { | |||||||
|     paymentData.value.totalAmount = totalPointsPrice |     paymentData.value.totalAmount = totalPointsPrice | ||||||
|     paymentData.value.pointsAmount = availablePoints |     paymentData.value.pointsAmount = availablePoints | ||||||
|     paymentData.value.beansAmount = requiredBeans |     paymentData.value.beansAmount = requiredBeans | ||||||
|   } |    }// else if (method === 'alipay_wap') { | ||||||
|  |   //   const requiredBeans = Math.ceil(totalPointsPrice / EXCHANGE_RATE) | ||||||
|  |   //   paymentData.value.totalAmount = totalPointsPrice | ||||||
|  |   //   paymentData.value.pointsAmount = 0 | ||||||
|  |   //   paymentData.value.beansAmount = requiredBeans | ||||||
|  |   // } | ||||||
| } | } | ||||||
|  |  | ||||||
| // 获取用户地址列表 | // 获取用户地址列表 | ||||||
|   | |||||||
| @@ -2,7 +2,7 @@ | |||||||
|   <!-- 头部 --> |   <!-- 头部 --> | ||||||
|   <div class="header"> |   <div class="header"> | ||||||
|     <span @click="$router.go(-1)"><返回</span> |     <span @click="$router.go(-1)"><返回</span> | ||||||
|     <el-icon @click="$router.push(`/product/${firstProduct.id}`)"><ShoppingCart /></el-icon> |     <el-icon @click="$router.push(`/product/${firstProduct.id}`)" style="color: #ffffff;"><ShoppingCart /></el-icon> | ||||||
|   </div> |   </div> | ||||||
|  |  | ||||||
|   <div class="products-container"> |   <div class="products-container"> | ||||||
| @@ -260,14 +260,7 @@ onMounted(async () => { | |||||||
| .header { | .header { | ||||||
|   /* 基础布局 */ |   /* 基础布局 */ | ||||||
|   padding: 16px 20px; |   padding: 16px 20px; | ||||||
|   background-color: #ffffff; |   background: #72c9ffae; | ||||||
|   border-bottom: 1px solid #f0f0f0; |  | ||||||
|   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); |  | ||||||
|  |  | ||||||
|   /* 固定在顶部 */ |  | ||||||
|   position: sticky; |  | ||||||
|   top: 0; |  | ||||||
|   z-index: 100; |  | ||||||
|  |  | ||||||
|   /* 内容居中 */ |   /* 内容居中 */ | ||||||
|   display: flex; |   display: flex; | ||||||
| @@ -304,7 +297,7 @@ onMounted(async () => { | |||||||
|  |  | ||||||
| .header span { | .header span { | ||||||
|   /* 返回按钮样式 */ |   /* 返回按钮样式 */ | ||||||
|   color: #333333; |   color: #ffffff; | ||||||
|   font-size: 16px; |   font-size: 16px; | ||||||
|   font-weight: 500; |   font-weight: 500; | ||||||
|   cursor: pointer; |   cursor: pointer; | ||||||
| @@ -312,6 +305,8 @@ onMounted(async () => { | |||||||
|   border-radius: 6px; |   border-radius: 6px; | ||||||
|   transition: all 0.2s ease; |   transition: all 0.2s ease; | ||||||
|  |  | ||||||
|  |   margin-left: -15px; | ||||||
|  |  | ||||||
|   /* 添加返回图标占位 */ |   /* 添加返回图标占位 */ | ||||||
|   display: inline-flex; |   display: inline-flex; | ||||||
|   align-items: center; |   align-items: center; | ||||||
| @@ -334,7 +329,7 @@ onMounted(async () => { | |||||||
|   box-shadow: 0 2px 8px rgba(0,0,0,0.1); |   box-shadow: 0 2px 8px rgba(0,0,0,0.1); | ||||||
|   transition: all 0.3s ease; |   transition: all 0.3s ease; | ||||||
|   overflow: hidden; |   overflow: hidden; | ||||||
|   width: 374px; |   width: 100%; | ||||||
|   min-height: 526px; |   min-height: 526px; | ||||||
|   display: flex; |   display: flex; | ||||||
|   flex-direction: column; /* 改为垂直布局 */ |   flex-direction: column; /* 改为垂直布局 */ | ||||||
|   | |||||||
| @@ -4,17 +4,21 @@ | |||||||
|     <nav class="navbar"> |     <nav class="navbar"> | ||||||
|       <!-- 移除 nav-left 部分 --> |       <!-- 移除 nav-left 部分 --> | ||||||
|       <div class="nav-center"> |       <div class="nav-center"> | ||||||
|         <h1 class="nav-title">积分商城</h1> |         <h1 class="nav-title">全部商品</h1> | ||||||
|       </div> |       </div> | ||||||
|       <div class="nav-right"> |       <div class="nav-right"> | ||||||
|         <el-button  |         <div class="points-btn"> | ||||||
|           type="text"  |  | ||||||
|           @click="$router.push('#')" |  | ||||||
|           class="points-btn" |  | ||||||
|         > |  | ||||||
|           <el-icon><Coin /></el-icon> |           <el-icon><Coin /></el-icon> | ||||||
|  |           积分余额: | ||||||
|           {{ userPoints }} |           {{ userPoints }} | ||||||
|         </el-button> |         </div> | ||||||
|  |         <div class="points-btn"> | ||||||
|  |           <div class="beans-container"> | ||||||
|  |             <img src='/imgs/profile/rongdou.png' alt="融豆" class="rongdou-icon" /> | ||||||
|  |             融豆余额: | ||||||
|  |             {{ userBeans }} | ||||||
|  |           </div> | ||||||
|  |         </div> | ||||||
|       </div> |       </div> | ||||||
|     </nav> |     </nav> | ||||||
|  |  | ||||||
| @@ -92,11 +96,11 @@ | |||||||
|             <div class="recommend-price-container"> |             <div class="recommend-price-container"> | ||||||
|               <div class="main-price"> |               <div class="main-price"> | ||||||
|                 <img src='/imgs/profile/rongdou.png' alt="融豆" class="rongdou-icon" /> |                 <img src='/imgs/profile/rongdou.png' alt="融豆" class="rongdou-icon" /> | ||||||
|                 <span class="rongdou-price">{{ product.rongdou_price }}</span> |                 <span class="rongdou-price">{{ product.flash_price }}</span> | ||||||
|               </div> |               </div> | ||||||
|               <div class="sub-price"> |               <div class="sub-price"> | ||||||
|                 <el-icon class="points-icon"><Coin /></el-icon> |                 <el-icon class="points-icon"><Coin /></el-icon> | ||||||
|                 <span class="points-price">{{ product.points_price }}</span> |                 <span class="points-price">{{ product.flash_price*10000 }}</span> | ||||||
|               </div> |               </div> | ||||||
|             </div> |             </div> | ||||||
|           </div> |           </div> | ||||||
| @@ -203,6 +207,10 @@ const hasMore = ref(true) | |||||||
| // 用户积分 | // 用户积分 | ||||||
| const userPoints = ref(0) | const userPoints = ref(0) | ||||||
|  |  | ||||||
|  | // 用户融豆 | ||||||
|  | const userBeans = ref(0) | ||||||
|  |  | ||||||
|  |  | ||||||
| // 分类数据 | // 分类数据 | ||||||
| const categories = ref([ | const categories = ref([ | ||||||
|   { id: 'all', name: '全部', icon: '🛍️' }, |   { id: 'all', name: '全部', icon: '🛍️' }, | ||||||
| @@ -352,6 +360,20 @@ const getUserPoints = async () => { | |||||||
|   } |   } | ||||||
| } | } | ||||||
|  |  | ||||||
|  | // 获取用户融豆 | ||||||
|  | const getUserBeans = async () => { | ||||||
|  |   try { | ||||||
|  |     const {data} = await api.get('/user/profile') | ||||||
|  |     console.log(data.user.balance,'beans'); | ||||||
|  |      | ||||||
|  |     userBeans.value = data.user.balance | ||||||
|  |   } catch (error) { | ||||||
|  |     console.error('获取用户融豆失败:', error) | ||||||
|  |   } | ||||||
|  | } | ||||||
|  |  | ||||||
|  |  | ||||||
|  |  | ||||||
| const truncateText = (text, maxLength) => { | const truncateText = (text, maxLength) => { | ||||||
|   if (text.length <= maxLength) return text |   if (text.length <= maxLength) return text | ||||||
|   return text.substring(0, maxLength) + '...' |   return text.substring(0, maxLength) + '...' | ||||||
| @@ -403,6 +425,7 @@ onMounted(() => { | |||||||
|    |    | ||||||
|   getProducts() |   getProducts() | ||||||
|   getUserPoints() |   getUserPoints() | ||||||
|  |   getUserBeans() | ||||||
|   getHotProducts() |   getHotProducts() | ||||||
|   getCheapProducts() |   getCheapProducts() | ||||||
| }) | }) | ||||||
| @@ -418,11 +441,9 @@ onMounted(() => { | |||||||
| .navbar { | .navbar { | ||||||
|   display: flex; |   display: flex; | ||||||
|   align-items: center; |   align-items: center; | ||||||
|   justify-content: space-between; |  | ||||||
|   padding: 0 16px; |   padding: 0 16px; | ||||||
|  |   justify-content: space-between; | ||||||
|   height: 56px; |   height: 56px; | ||||||
|   background: white; |  | ||||||
|   border-bottom: 1px solid #eee; |  | ||||||
|   position: sticky; |   position: sticky; | ||||||
|   top: 0; |   top: 0; | ||||||
|   z-index: 100; |   z-index: 100; | ||||||
| @@ -440,12 +461,31 @@ onMounted(() => { | |||||||
|   margin: 0 auto; |   margin: 0 auto; | ||||||
|   font-size: 18px; |   font-size: 18px; | ||||||
|   font-weight: 500; |   font-weight: 500; | ||||||
|   color: #333; |   color: #ffffff; | ||||||
|   display: inline-block; /* 使文本能够真正居中 */ |   display: inline-block; /* 使文本能够真正居中 */ | ||||||
| } | } | ||||||
|  |  | ||||||
| .nav-right { | .nav-right { | ||||||
|   margin-left: auto; /* 将积分按钮推到最右侧 */ |   margin-left: auto; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .points-btn { | ||||||
|  |   display: flex; | ||||||
|  |   align-items: center; | ||||||
|  |   gap: 4px; | ||||||
|  |   color: #409eff; | ||||||
|  |   font-size: 14px; | ||||||
|  |   white-space: nowrap; /* 防止换行 */ | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .beans-container { | ||||||
|  |   display: flex; | ||||||
|  |   align-items: center; | ||||||
|  |   gap: 4px; | ||||||
|  | } | ||||||
|  |  | ||||||
|  | .beans-container img { | ||||||
|  |   margin-right: -2px; | ||||||
| } | } | ||||||
|  |  | ||||||
| .back-btn, | .back-btn, | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user