样式修改以及接口完善

src/views/MainPage.vue

@@ -79,6 +79,7 @@
       @close="closeWelcomeDialog"
       center
       class="welcome-dialog"
+      :lock-scroll="false"
     >
       <div class="welcome-content">
         <div class="welcome-icon">🎉</div>

src/views/MyProfile.vue

@@ -26,12 +26,9 @@
           <span class="username">{{ userStore.user?.username || '用户' }}</span>
           <div class="user-role">
             <template v-if="accountInfo.distribution">
-              <el-tag v-if="accountInfo.user_type==='agent_directly'" type="primary">直营代理</el-tag>
+              <el-tag type="primary">{{ getUserType(accountInfo.user_type) }}</el-tag>
-              <el-tag v-if="accountInfo.user_type==='directly_operated'" type="primary">直营商户</el-tag>
-              <el-tag v-if="accountInfo.user_type==='agent'" type="primary">代理</el-tag>
-              <el-tag v-if="accountInfo.user_type==='user'" type="primary">融豆商户</el-tag>
             </template>
-            <el-tag v-else type="primary">普通用户</el-tag>
+            <el-tag v-if="!accountInfo.distribution" type="primary">普通用户</el-tag>
           </div>
         </template>
         <template v-else>
@@ -301,6 +298,21 @@ export default {
       {image: "/imgs/profile/icon/kabaoguanli.png", text: "卡包管理", path: "/couponmanage"},
     ]);
 
+    const getUserType = (type) => {
+      switch (type) {
+        case 'agent_directly':
+          return '直营代理';
+        case 'directly_operated':
+          return '直营商户';
+        case 'agent':
+          return '代理';
+        case 'user':
+          return '融豆商户';
+        default:
+          return '普通用户';
+      }
+    }
+
     // 加载账户信息
     const loadAccountInfo = async () => {
       try {
@@ -664,7 +676,8 @@ export default {
       handleDistributeChange,
       showAgreement,
       userStore,
-      getImageUrl
+      getImageUrl,
+      getUserType,
     };
   }
 };

src/views/MyShop.vue

@@ -367,9 +367,9 @@ export default {
   font-weight: 600;
   color: var(--dark-color);
   padding: 16px;
-  background-color: #cae5ff;
   border-radius: 8px;
   margin-bottom: 16px; /* 增加与分类项的间距 */
+  text-align: center;
 }
 
 .category-items-vertical {

src/views/Orders.vue

@@ -39,7 +39,7 @@
     <!-- 订单列表 -->
     <div class="orders-content">
       <div v-loading="loading" class="orders-list">
-        <div v-if="filteredOrders.length === 0" class="empty-state">
+        <div v-if="orders.length === 0" class="empty-state">
           <el-icon size="60"><Box /></el-icon>
           <p>{{ getEmptyText() }}</p>
           <el-button type="primary" @click="$router.push('/shop')">
@@ -48,7 +48,7 @@
         </div>
 
         <div v-else class="orders-container">
-          <div v-for="order in filteredOrders" :key="order.id" class="order-card">
+          <div v-for="order in orders" :key="order.id" class="order-card">
             <!-- 订单头部 -->
             <div class="order-header">
               <div class="order-info">
@@ -300,7 +300,8 @@
             <div class="value">
               <span class="detail-price-group">
                 <img src='/imgs/profile/rongdou.png' alt="融豆" class="cost-rongdou-icon" />
-                <span>{{ orderDetail.totalRongdou }}</span>
+                <!-- <span>{{ order.totalRongdou }}</span> -->
+                <span>{{ orderDetail.realPay.rongdou }}{{ orderDetail.realPay.points }}</span>
               </span>
             </div>
           </div>
@@ -331,7 +332,7 @@ const userStore = useUserStore()
 // 响应式数据
 const loading = ref(false)
 const loadingMore = ref(false)
-const selectedStatus = ref('all')
+const selectedStatus = ref('')
 const orders = ref([])
 const page = ref(1)
 const hasMore = ref(true)
@@ -343,7 +344,7 @@ const submittingReview = ref(false)
 
 // 状态标签
 const statusTabs = ref([
-  { label: '全部', value: 'all', count: 0 },
+  { label: '全部', value: '', count: 0 },
   { label: '待发货', value: 'pending', count: 0 },
   { label: '待支付', value: 'pre_order', count: 0 },
   { label: '已发货', value: 'shipped', count: 0 },
@@ -352,21 +353,22 @@ const statusTabs = ref([
 ])
 
 // 计算属性
-const filteredOrders = computed(() => {
+/* const filteredOrders = computed(() => {
   if (selectedStatus.value === 'all') {
     return orders.value
   }
   return orders.value.filter(order => order.status === selectedStatus.value)
-})
+}) */
 
 // 方法
 const selectStatus = (status) => {
   selectedStatus.value = status
+  getOrders()
 }
 
 const getEmptyText = () => {
   const textMap = {
-    all: '暂无订单',
+    '': '暂无订单',
     pending: '暂无待发货订单',
     pre_order: '暂无待支付订单',
     shipped: '暂无已发货订单',
@@ -409,6 +411,8 @@ const getStatusText = (status) => {
   return textMap[status] || '未知状态'
 }
 
+const chooseStatus = ref('')
+
 const formatDate = (date) => {
   return new Date(date).toLocaleDateString('zh-CN')
 }
@@ -549,7 +553,11 @@ const viewOrderDetail = (orderId) => {
       totalQuantity: order.totalQuantity,
       items: order.items || [],
       shippingAddress: order.shippingAddress || null,
-      trackingNumber: order.trackingNumber || null
+      trackingNumber: order.trackingNumber || null,
+      realPay: {
+        rongdou: order.real_rongdou,
+        points: order.real_points
+      }
     }
     
     console.log('设置的订单详情数据:', orderDetail.value)
@@ -572,13 +580,15 @@ const getOrders = async (isLoadMore = false) => {
     const {data} = await api.get('/orders', {
       params: {
         page: page.value,
-        limit: 10
+        limit: 10,
+        status: selectedStatus.value || null
       }
     })
-    console.log(data,'response');
+    // console.log(data,'response');
     
     // 映射后端数据结构到前端需要的格式
     const mappedOrders = data.data.orders.map(order => ({
+      ...order,
       id: order.id,
       orderNumber: order.order_no,
       createdAt: order.created_at,

src/views/PayLoading.vue

@@ -61,7 +61,7 @@
             <img :src="item.image" :alt="item.name" class="product-image" />
             <div class="product-info">
               <div class="product-name">{{ item.name }}</div>
-              <div class="product-spec">{{ item.specification || '默认规格' }}</div>
+              <!-- <div class="product-spec">{{ item.specification || '默认规格' }}</div> -->
               <div class="product-price">
                 <div class="item-price-container">
                   <div class="item-main-price">
@@ -99,7 +99,7 @@
           <span class="label">商品总价：</span>
           <span class="value">
             <img src='/imgs/profile/rongdou.png' alt="融豆" class="cost-rongdou-icon" />
-            {{ orderData.totalAmount || 0 }}
+            {{ orderData.total_rongdou || 0 }}
           </span>
         </div>
         <div class="cost-item">
@@ -113,7 +113,7 @@
           <span class="label">总计：</span>
           <span class="value">
             <img src='/imgs/profile/rongdou.png' alt="融豆" class="cost-rongdou-icon" />
-            {{ orderData.totalAmount || 0 }}
+            {{ orderData.total_rongdou + orderData.shippingFee || 0 }}
           </span>
         </div>
       </div>
@@ -195,6 +195,7 @@ const fetchOrderData = async () => {
       const data = response.data.data
       const order = data.order || data
       orderData.value = {
+        ...order,
         orderNumber: order.order_no || 'ORD' + Date.now(),
         createTime: order.created_at || new Date().toISOString(),
         totalAmount: order.total_amount || 0,
@@ -219,6 +220,7 @@ const fetchOrderData = async () => {
           quantity: item.quantity || 1
         }))
       }
+      console.log(1,orderData.value)
     } else {
       throw new Error(response.data.message || '获取订单信息失败')
     }

src/views/ProductDetail.vue

@@ -44,7 +44,6 @@
             ref="carouselRef"
             :autoplay="false"
             :initial-index="currentIndex"
-            type="card" 
             height="300px"
             indicator-position="outside"
             @change="handleCarouselChange"
@@ -476,7 +475,7 @@ watch(
 <style scoped>
 .product-detail-page {
   min-height: 100vh;
-  background: linear-gradient(to bottom, #72c9ffae, #f3f3f3);
+  background:#e2e6f7;
 }
 
 .navbar {
@@ -485,8 +484,7 @@ watch(
   justify-content: space-between;
   padding: 0 16px;
   height: 56px;
-  background: white;
+  background: rgb(173, 199, 255);
-  border-bottom: 1px solid #eee;
   position: sticky;
   top: 0;
   z-index: 100;
@@ -524,15 +522,15 @@ watch(
 }
 
 .product-images {
-  padding: 20px;
+  margin-top: -10px;
-  background: transparent;
+  padding: 10px;
+  background: #f8f9ff;
 }
 
 .product-image {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  object-fit: contain;
-  border-radius: 8px;
 }
 
 /* 小图容器样式 */
@@ -552,6 +550,7 @@ watch(
 
   justify-content: center;
   justify-items: center;
+  margin-top: -5px;
 }
 
 .small-images::-webkit-scrollbar {
@@ -623,7 +622,7 @@ watch(
 .rongdou-price {
   font-size: 28px;
   font-weight: 700;
-  color: #ff6b35;
+  color: #305DEF;
 }
 
 .sub-price {

src/views/Shop.vue

@@ -221,11 +221,14 @@ onMounted(() => {
 
 .shop-content {
   display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(2, 153px);
+  justify-content: center;
+  justify-items: center;
   column-gap: 26px;
   row-gap: 14px;
   align-self: center;
   margin-top: 14px;
+  width: 100%;
 }
 
 .product-content {
@@ -235,7 +238,7 @@ onMounted(() => {
   background-color: #fff;
   display: flex;
   flex-direction: column;
-  justify-self: center;
+  /* justify-self: center; */
 }
 
 .product-content-img {