页面更改

src/views/Distribution.vue

@@ -189,8 +189,8 @@ const generateInviteLink = () => {
   const userId = userStore.user?.id || 'guest'
   console.log(userId)
   const baseUrl = `${window.location.origin}/frontend`
-  // return `${baseUrl}/register?inviter=${userId}`// 实施用
-  return `http://192.168.1.250:5173/register?inviter=${userId}`// 测试用
+  return `${baseUrl}/register?inviter=${userId}`// 实施用
+  // return `http://192.168.1.250:5173/register?inviter=${userId}`// 测试用
 }
 
 // 生成二维码

src/views/ProductCategory.vue

@@ -58,31 +58,31 @@ const barItems = ref([
     name: '数码产品',
     relative: [{
       name: '华为',
-      img: ''
+      img: '/imgs/shop/shumachanping/1.png'
     },{
       name: '苹果',
-      img: ''
+      img: '/imgs/shop/shumachanping/2.png'
     },{
       name: '小米',
-      img: ''
+      img: '/imgs/shop/shumachanping/3.png'
     },{
       name: '荣耀',
-      img: ''
+      img: '/imgs/shop/shumachanping/4.png'
     },{
       name: 'iqoo',
-      img: ''
+      img: '/imgs/shop/shumachanping/5.png'
     },{
       name: 'realme',
-      img: ''
+      img: '/imgs/shop/shumachanping/6.png'
     },{
       name: 'vivo',
-      img: ''
+      img: '/imgs/shop/shumachanping/7.png'
     },{
       name: 'oppo',
-      img: ''
+      img: '/imgs/shop/shumachanping/8.png'
     },{
       name: '三星',
-      img: ''
+      img: '/imgs/shop/shumachanping/9.png'
     }]
   },{
     name: '食品饮料',
@@ -94,31 +94,31 @@ const barItems = ref([
     name: '手机',
     relative: [{
       name: '华为',
-      img: ''
+      img: '/imgs/shop/shumachanping/1.png'
     },{
       name: '苹果',
-      img: ''
+      img: '/imgs/shop/shumachanping/2.png'
     },{
       name: '小米',
-      img: ''
+      img: '/imgs/shop/shumachanping/3.png'
     },{
       name: '荣耀',
-      img: ''
+      img: '/imgs/shop/shumachanping/4.png'
     },{
       name: 'iqoo',
-      img: ''
+      img: '/imgs/shop/shumachanping/5.png'
     },{
       name: 'realme',
-      img: ''
+      img: '/imgs/shop/shumachanping/6.png'
     },{
       name: 'vivo',
-      img: ''
+      img: '/imgs/shop/shumachanping/7.png'
     },{
       name: 'oppo',
-      img: ''
+      img: '/imgs/shop/shumachanping/8.png'
     },{
       name: '三星',
-      img: ''
+      img: '/imgs/shop/shumachanping/9.png'
     }]
   },{
     name: '家装',
@@ -361,7 +361,8 @@ onMounted(() => {
 
 .relative-bar {
   display: grid;
-  grid-template-columns: repeat(5, 40px);
+  grid-template-columns: repeat(5, 45px);
+  grid-template-rows: repeat(2, 66px);
   gap: 30px;
   margin-top: 5px;
   justify-content: center;
@@ -386,7 +387,7 @@ onMounted(() => {
 
 .relative-img {
   width: 40px;
-  height: 40px;
+  height: 45px;
   margin-bottom: 8px;
 }
 

src/views/ProductCategoryFinal.vue

@@ -9,24 +9,39 @@
       </el-input>
     </div>
 
+    <div class="product-container">
+      <div class="product-header">
+
+        <div class="product-filter">
+          <div :class="['filter', { active: filter.active }]" v-for="(filter, index) in filters" :key="index" @click="switchFilter(index)">
+            {{ filter.name }}
+          </div>
+        </div>
+
+        <div class="style-btn">
+          <img src="/imgs/shop/style-change.png" alt="改变" class="img-style" @click="changeStyle">
+        </div>
+      </div>
+
       <div class="coupon-announcer" @click="getCoupon" v-if="couponExist">
         你有优惠券待领取
       </div>
 
-    <div class="product-list">
-      <div v-for="product in products" :key="product.id" class="product-item" @click="$router.push(`/productsummary/${product.id}`)">
-        <img :src="product.image" :alt="product.name" class="product-image">
+      <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}`)">
+          <img :src="product.image" :alt="product.name" :class="{'product-image1': !isGridStyle, 'product-image2': isGridStyle}">
           <div class="product-info">
-          <div class="product-content-name">
+            <div :class="{'product-content-name1': !isGridStyle, 'product-content-name2': isGridStyle}">
               {{ product.name }}
             </div>
-          <div class="price-info">
+            <div :class="{'price-info1': !isGridStyle, 'price-info2': isGridStyle}">
               <el-icon><Coin /></el-icon>
-            <div class="product-content-price">{{ product.points_price }}</div>
+              <div class="product-content-price1">{{ product.points_price }}</div>
+            </div>
+            <div :class="{'price-info1': !isGridStyle, 'price-info2': isGridStyle}">
+              <img src="/imgs/profile/rongdou.png" alt="融豆" :class="{'img-bean1': !isGridStyle, 'img-bean2': isGridStyle}">
+              <div :class="{'product-content-price1': !isGridStyle, 'product-content-price2': isGridStyle}">{{ product.rongdou_price }}</div>
             </div>
-          <div class="price-info">
-            <img src="/imgs/profile/rongdou.png" alt="融豆" class="img-bean">
-            <div class="product-content-price">{{ product.rongdou_price }}</div>
           </div>
         </div>
       </div>
@@ -50,6 +65,7 @@ const searchKeyword = ref(route.params.name)
 const sortBy = ref('')
 
 const products = ref([])
+const filteredProducts = ref([])
 const loading = ref(false)
 const loadingMore = ref(false)
 const page = ref(1)
@@ -58,6 +74,55 @@ const selectedCategory = ref('all')
 
 const couponExist = ref(false)
 
+const isGridStyle = ref(false)
+
+const filters = ref([{
+  name: '默认',
+  sort: 'null'
+}, {
+  name: '价格高到低',
+  sort: 'price_desc'
+}, {
+  name: '价格低到高',
+  sort: 'price_asc'
+}, {
+  name: '销量',
+  sort: 'sales_desc'
+}])
+
+const switchFilter = (index) => {
+  filters.value.forEach((filter, i) => {
+    filter.active = i === index
+  })
+
+  const selectedFilter = filters.value[index]
+  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 changeStyle = () => {
+  isGridStyle.value = !isGridStyle.value
+}
+
 const getProducts = async (isLoadMore = false) => {
   try {
     if (!isLoadMore) {
@@ -98,6 +163,7 @@ const getProducts = async (isLoadMore = false) => {
     
     hasMore.value = data.data.hasMore
     page.value++
+    filteredProducts.value = products.value
   } catch (error) {
     ElMessage.error('获取商品列表失败')
     console.error('获取商品列表失败:', error)
@@ -144,6 +210,7 @@ watch(searchKeyword, (newVal, oldVal) => {
 onMounted(() => {
   isCouponExist()
   getProducts()
+  filters.value[0].active = true
 })
 </script>
 
@@ -183,6 +250,40 @@ onMounted(() => {
   border-radius: 400px;
 }
 
+.product-header {
+  display: flex;
+  align-items: center;
+}
+
+.product-filter {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.filter {
+  font-size: 12px;
+  padding: 5px 10px;
+  border-radius: 20px;
+}
+
+.filter.active {
+  color: #305DEF;
+}
+
+.filter:hover {
+  color: #305DEF;
+}
+
+.style-btn {
+  margin-left: auto;
+}
+
+.img-style {
+  width: 12px;
+  height: 12px;
+}
+
 .coupon-announcer {
   width: 100%;
   text-align: center;
@@ -195,12 +296,12 @@ onMounted(() => {
   padding-left: 10px;
 }
 
-.product-list {
+.product-list1 {
   display: flex;
   flex-wrap: wrap;
 }
 
-.product-item {
+.product-item1 {
   width: 200px;
   margin: 10px;
   display: flex;
@@ -210,13 +311,13 @@ onMounted(() => {
   max-height: 110px;
 }
 
-.product-image {
+.product-image1 {
   width: 110px;
   height: 110px;
   flex-shrink: 0;
 }
 
-.price-info {
+.price-info1 {
   display: flex;
   align-items: flex-start;
   gap: 4px;
@@ -225,18 +326,76 @@ onMounted(() => {
   flex: 1;
 }
 
-.product-content-name {
+.product-content-name1 {
   font-size: 16px;
   padding: 0 10px;
 }
 
-.product-content-price {
+.product-content-price1 {
   font-size: 12px;
   color: #ff6b00;
 }
 
-.img-bean {
+.img-bean1 {
   width: 16px;
   height: 16px;
 }
+
+.product-list2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 26px;
+  row-gap: 14px;
+  justify-content: center;
+}
+
+.product-item2 {
+  width: 100%;
+  height: 240px;
+  border-radius: 5px;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-self: center;
+}
+
+.product-image2 {
+  width: 100%;
+  height: 153px;
+  border-radius: 5px 5px 0 0;
+  flex-shrink: 0;
+}
+
+.product-content-name2 {
+  font-size: 12px;
+  text-align: left;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.4;
+  min-height: 2.8em;
+  padding: 3px 10px;
+}
+
+.price-info2 {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: auto;
+  padding: 0 10px;
+  padding-bottom: 5px;
+}
+
+.product-content-price2 {
+  font-size: 12px;
+  color: #ff6b00;
+}
+
+.img-bean2 {
+  width: 16px;
+  height: 16px;
+}
+
 </style>

src/views/Shop.vue

@@ -63,15 +63,15 @@ const selectedCategory = ref('all')
 
 const shopBarItems = [
   {name: '商品分类',img: '/imgs/shop/1.png',path: '/productCategory'},
-  {name: '2',img: '/imgs/shop/2.png',path: ''},
-  {name: '3',img: '/imgs/shop/3.png',path: ''},
-  {name: '4',img: '/imgs/shop/4.png',path: ''},
-  {name: '5',img: '/imgs/shop/5.png',path: ''},
-  {name: '6',img: '/imgs/shop/6.png',path: ''},
-  {name: '7',img: '/imgs/shop/7.png',path: ''},
-  {name: '8',img: '/imgs/shop/8.png',path: ''},
-  {name: '9',img: '/imgs/shop/9.png',path: ''},
-  {name: '10',img: '/imgs/shop/10.png',path: ''},
+  {name: '观看直播',img: '/imgs/shop/2.png',path: ''},
+  {name: '违规通告',img: '/imgs/shop/3.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: ''},
 ]
 
 const getProducts = async (isLoadMore = false) => {

vite.config.js

@@ -11,15 +11,15 @@ export default defineConfig({
     }
   },
   server: {
-    host: '0.0.0.0', // 添加这一行
+    host: '0.0.0.0',
     port: 5173,
     proxy: {
       '/api': {
-        target: 'http://localhost:3000',
+        target: 'http://192.168.0.26:3000',
         changeOrigin: true
       },
       '/uploads': {
-        target: 'http://localhost:3000',
+        target: 'http://192.168.0.26:3000',
         changeOrigin: true
       }
     }