样式调整，bug修复

2025-10-23 17:26:14 +08:00
parent db228d91ed
commit 545c90f13b
17 changed files with 72 additions and 62 deletions
--- a/public/imgs/background.png
+++ b/public/imgs/background.png
--- a/public/imgs/profile/icon/dizhi.png
+++ b/public/imgs/profile/icon/dizhi.png
--- a/public/imgs/profile/icon/gouwuche.png
+++ b/public/imgs/profile/icon/gouwuche.png
--- a/public/imgs/profile/icon/kabaoguanli.png
+++ b/public/imgs/profile/icon/kabaoguanli.png
--- a/public/imgs/profile/rongdou.png
+++ b/public/imgs/profile/rongdou.png
--- a/public/imgs/shop/tips.png
+++ b/public/imgs/shop/tips.png
--- a/src/views/MainPage.vue
+++ b/src/views/MainPage.vue
@@ -540,6 +540,7 @@ export default {
  object-fit: contain;
  border-radius: 8px;
  z-index: 1;
+  margin-left: -5px;
 }

 .action-image3 {
--- a/src/views/MyPointsHistory.vue
+++ b/src/views/MyPointsHistory.vue
@@ -12,7 +12,7 @@
          <h1 class="nav-title">积分记录</h1>
        </div>
        <div class="nav-right">
-          <el-button type="text" @click="$router.push('/myshop')" class="shop-btn">
+          <el-button type="text" @click="$router.push('/shop')" class="shop-btn">
            <el-icon><ShoppingBag /></el-icon>
            商城
          </el-button>
@@ -30,7 +30,7 @@
              <div class="points-value">{{ userPoints }}</div>
              <!-- <div class="points-label">当前积分</div> -->
            </div>
-            <img src="/imgs/point.png" alt="我的积分图标" class="balance-image">
+            <!-- <img src="/imgs/point.png" alt="我的积分图标" class="balance-image"> -->
          </div>
          <div class="points-stats">
            <div class="stat-item">
@@ -119,8 +119,8 @@
      <!-- 积分规则说明 -->
      <div class="points-rules">
        <el-collapse v-model="activeRules">
-          <el-collapse-item title="积分获取规则" name="earn">
-            <!-- <div class="rules-content">
+          <!-- <el-collapse-item title="积分获取规则" name="earn">
+            <div class="rules-content">
              <div class="rule-item">
                <el-icon><UserFilled /></el-icon>
                <span>注册账户：+100积分</span>
@@ -141,8 +141,8 @@
                <el-icon><Trophy /></el-icon>
                <span>完成任务：+50积分</span>
              </div>
-            </div> -->
-          </el-collapse-item>
+            </div>
+          </el-collapse-item> -->
          <el-collapse-item title="积分使用规则" name="spend">
            <div class="rules-content">
              <div class="rule-item">
@@ -209,8 +209,8 @@ const filterTabs = ref([
  { label: '全部', value: 'all' },
  { label: '获得', value: 'earn' },
  { label: '消费', value: 'spend' },
-  { label: '任务', value: 'task' },
-  { label: '兑换', value: 'exchange' }
+  // { label: '任务', value: 'task' },
+  // { label: '兑换', value: 'exchange' }
 ])

 // 计算属性
@@ -486,16 +486,16 @@ onMounted(() => {
  width: 100%;
 }

-.overview-card {
+/* .overview-card {
  border-radius: 12px;
  padding: 24px;
  color: white;
  width: 100%;
  overflow: hidden;
-}
+} */

 .transparent-card {
-  background: rgba(255, 255, 255, 0.2);
+  /* background: rgba(255, 255, 255, 0.2); */
  box-shadow: none;
 }

@@ -511,7 +511,6 @@ onMounted(() => {
  border-radius: 50%;
  width: 48px;
  height: 48px;
-  background: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
@@ -997,8 +996,10 @@ onMounted(() => {
  position: relative;
  border-radius: 12px;
  padding: 24px;
-  color: white;
  width: 100%;
-  overflow: hidden;
+  background-image: url('/imgs/background.png');
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
 }
 </style>
--- a/src/views/MyProfile.vue
+++ b/src/views/MyProfile.vue
@@ -295,10 +295,10 @@ export default {
      {text: '隐私政策', path: '', click: showPrivacyText},
    ]);
    const functionItems = ref([
-      {image: "/imgs/mainpage/jiaoyijilu.png", text: "购物车", path: "/cart"},
-      {image: "/imgs/mainpage/dingdanchaxun.png", text: "地址", path: "/address"},
-      {image: "/imgs/mainpage/kefuzhongxin.png", text: "收藏", path: ""},
-      {image: "/imgs/mainpage/xitonggonggao.png", text: "卡包管理", path: "/couponmanage"},
+      {image: "/imgs/profile/icon/gouwuche.png", text: "购物车", path: "/cart"},
+      {image: "/imgs/profile/icon/dizhi.png", text: "地址", path: "/address"},
+      // {image: "/imgs/mainpage/kefuzhongxin.png", text: "收藏", path: ""},
+      {image: "/imgs/profile/icon/kabaoguanli.png", text: "卡包管理", path: "/couponmanage"},
    ]);

    // 加载账户信息
@@ -828,7 +828,7 @@ export default {

 .function-grid {
  display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
 }

--- a/src/views/MyShop.vue
+++ b/src/views/MyShop.vue
@@ -14,9 +14,9 @@
      </div>
      
      <!-- 公告区域 -->
-      <div class="announcement-section">
+      <!-- <div class="announcement-section">
        这里是公告内容
-      </div>
+      </div> -->
      
      <!-- 空白间隔 -->
      <div class="empty-spacer">
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@@ -40,7 +40,7 @@ const router = useRouter()

 // 方法
 const goHome = () => {
-  router.push('/transfers')
+  router.push('/mainpage')
 }

 const goBack = () => {
--- a/src/views/Pay.vue
+++ b/src/views/Pay.vue
@@ -730,6 +730,7 @@ const fetchPaymentData = async () => {
      throw new Error(response.data.message || '获取订单信息失败')
    }
  } catch (error) {
+    router.push('/shop')
    ElMessage.error(error.message || '获取订单信息失败')
  } finally {
    loading.value = false
@@ -809,7 +810,7 @@ const confirmPayment = async () => {
        amount: Math.round(discountedRMB * 100),
        couponRecordId: selectedCoupon.value || undefined,
        coupon_id: selectedCoupon.value || undefined,
-        returnUrl: `http://192.168.0.26:5173/frontend/pay/${paymentData.value.orderId}`
+        returnUrl: `http://192.168.0.11:5173/frontend/pay/${paymentData.value.orderId}`
      })
      
      if (response?.data?.success) {
--- a/src/views/ProductCategory.vue
+++ b/src/views/ProductCategory.vue
@@ -249,7 +249,7 @@ onMounted(() => {
  gap: 30px;
  margin-top: 5px;
  justify-content: center;
-  background: #ffffff;
+  background: #F5F8FF;
  width: 100%;
  top: 132px;
  padding-top: 10px;
--- a/src/views/ProductCategoryFinal.vue
+++ b/src/views/ProductCategoryFinal.vue
@@ -28,7 +28,7 @@
      </div>

      <div :class="{'product-list1': !isGridStyle, 'product-list2': isGridStyle}">
-        <div v-for="product in filteredProducts" :key="product.id" :class="{'product-item1': !isGridStyle, 'product-item2': isGridStyle}" @click="$router.push(`/productsummary/${product.id}`)">
+        <div v-for="product in products" :key="product.id" :class="{'product-item1': !isGridStyle, 'product-item2': isGridStyle}" @click="$router.push(`/productsummary/${product.id}`)">
          <img :src="product.image" :alt="product.name" :class="{'product-image1': !isGridStyle, 'product-image2': isGridStyle}">
          <div class="product-info">
            <div :class="{'product-content-name1': !isGridStyle, 'product-content-name2': isGridStyle}">
@@ -67,7 +67,7 @@ const searchKeyword = ref('')
 const sortBy = ref('')

 const products = ref([])
-const filteredProducts = ref([])
+// const filteredProducts = ref([])
 const loading = ref(false)
 const loadingMore = ref(false)
 const page = ref(1)
@@ -98,34 +98,36 @@ const switchFilter = (index) => {
  })

  const selectedFilter = filters.value[index]
-  sortProducts(selectedFilter.sort)
+  console.log(selectedFilter.sort)
+  getProducts(false, selectedFilter.sort)
+  // sortProducts(selectedFilter.sort)
 }

-const sortProducts = (sortType) => {
-  switch (sortType) {
-    case 'null':
-      filteredProducts.value = products.value
-      break
-    case 'price_desc':
-      filteredProducts.value = products.value.sort((a, b) => b.points_price - a.points_price)
-      break
-    case 'price_asc':
-      filteredProducts.value = products.value.sort((a, b) => a.points_price - b.points_price)
-      break
-    case 'sales_desc':
-      filteredProducts.value = products.value.sort((a, b) => b.sales - a.sales)
-      break
-    default:
-      filteredProducts.value = products.value
-      break
-  }
-}
+// const sortProducts = (sortType) => {
+//   switch (sortType) {
+//     case 'null':
+//       // filteredProducts.value = products.value
+//       break
+//     case 'price_desc':
+//       // filteredProducts.value = products.value.sort((a, b) => b.points_price - a.points_price)
+//       break
+//     case 'price_asc':
+//       // filteredProducts.value = products.value.sort((a, b) => a.points_price - b.points_price)
+//       break
+//     case 'sales_desc':
+//       // filteredProducts.value = products.value.sort((a, b) => b.sales - a.sales)
+//       break
+//     default:
+//       // filteredProducts.value = products.value
+//       break
+//   }
+// }

 const changeStyle = () => {
  isGridStyle.value = !isGridStyle.value
 }

-const getProducts = async (isLoadMore = false) => {
+const getProducts = async (isLoadMore = false, sort) => {
  try {
    if (!isLoadMore) {
      loading.value = true
@@ -140,7 +142,7 @@ const getProducts = async (isLoadMore = false) => {
        limit: 20,
        category: selectedCategory.value === 'all' ? '' : selectedCategory.value,
        search: searchKeyword.value,
-        sort: sortBy.value
+        sort: sort
      }
    })
    
@@ -165,7 +167,7 @@ const getProducts = async (isLoadMore = false) => {
    
    hasMore.value = data.data.hasMore
    page.value++
-    filteredProducts.value = products.value
+    // filteredProducts.value = products.value
  } catch (error) {
    ElMessage.error('获取商品列表失败')
    console.error('获取商品列表失败:', error)
--- a/src/views/ProductSummary.vue
+++ b/src/views/ProductSummary.vue
@@ -2,7 +2,7 @@
  <!-- 头部 -->
  <div class="header">
    <span @click="$router.go(-1)"><返回</span>
-    <el-icon @click="$router.push(`/product/${firstProduct.id}`)" style="color: #ffffff;"><ShoppingCart /></el-icon>
+    <el-icon @click="$router.push(`/cart`)" style="color: #ffffff;"><ShoppingCart /></el-icon>
  </div>

  <div class="products-container">
--- a/src/views/Shop.vue
+++ b/src/views/Shop.vue
@@ -63,15 +63,15 @@ const selectedCategory = ref('all')

 const shopBarItems = [
  {name: '商品分类',img: '/imgs/shop/1.png',path: '/productCategory'},
-  {name: '观看直播',img: '/imgs/shop/2.png',path: ''},
+  // {name: '观看直播',img: '/imgs/shop/2.png',path: ''},
  {name: '卡包管理',img: '/imgs/shop/3.png',path: '/couponmanage'},
-  {name: '百亿补贴',img: '/imgs/shop/4.png',path: ''},
-  {name: '现时秒杀',img: '/imgs/shop/5.png',path: ''},
-  {name: '会员专区',img: '/imgs/shop/6.png',path: ''},
-  {name: '商品收藏',img: '/imgs/shop/7.png',path: ''},
-  {name: '充值缴费',img: '/imgs/shop/8.png',path: ''},
-  {name: '资质认证',img: '/imgs/shop/9.png',path: ''},
-  {name: '联系客服',img: '/imgs/shop/10.png',path: ''},
+  // {name: '百亿补贴',img: '/imgs/shop/4.png',path: ''},
+  // {name: '现时秒杀',img: '/imgs/shop/5.png',path: ''},
+  // {name: '会员专区',img: '/imgs/shop/6.png',path: ''},
+  // {name: '商品收藏',img: '/imgs/shop/7.png',path: ''},
+  // {name: '充值缴费',img: '/imgs/shop/8.png',path: ''},
+  // {name: '资质认证',img: '/imgs/shop/9.png',path: ''},
+  {name: '联系客服',img: '/imgs/shop/10.png',path: '/customerservice'},
 ]

 const getProducts = async (isLoadMore = false) => {
@@ -176,10 +176,15 @@ onMounted(() => {

 .shop-bar {
  display: grid;
-  grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(3, 1fr);
  column-gap: 21px;
  row-gap: 12px;
  margin-top: 20px;
+  background: #FFFFFF80;
+  border-radius: 10px;
+  width: 92%;
+  align-self: center;
+  padding: 12px 10px;
 }

 .shop-bar-item {
@@ -205,7 +210,7 @@ onMounted(() => {
  margin-top: 15px;
  border-radius: 5px;
  height: 30px;
-  width: auto;
+  width: 92%;
 }

 .tips-imgs {
--- a/vite.config.js
+++ b/vite.config.js
@@ -15,7 +15,7 @@ export default defineConfig({
    port: 5173,
    proxy: {
      '/api': {
-        target: 'http://192.168.0.26:3000',
+        target: 'http://192.168.0.11:3000',
        changeOrigin: true,
      },
      '/mid': {
@@ -24,7 +24,7 @@ export default defineConfig({
        // rewrite: (path) => path.replace(/^\/mid/, '')
      },
      '/uploads': {
-        target: 'http://192.168.0.26:3000',
+        target: 'http://192.168.0.11:3000',
        changeOrigin: true
      }
    }