功能增加

2025-10-09 17:24:09 +08:00
parent 513819ddce
commit 4b9277282a
4 changed files with 530 additions and 17 deletions
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -104,6 +104,14 @@ const routes = [
            title: '商品分类'
        }
    },
+    {
+        path: '/productCategoryFinal/:name',
+        name: 'ProductCategoryFinal',
+        component: () => import('@/views/ProductCategoryFinal.vue'),
+        meta: {
+            title: '商品分类'
+        }
+    },
    {
        path: '/product/:id',
        name: 'ProductDetail',
--- a/src/views/ProductCategory.vue
+++ b/src/views/ProductCategory.vue
@@ -12,27 +12,85 @@
    </div>

    <div class="bar">
-      <div v-for="(item, index) in barItems" :key="index" class="bar-item" :style="{ color: index === selectedCategory ? '#2938e0' : '' }" @click="selectCategory(index)">
+      <div v-for="(item, index) in barItems" :key="index" class="bar-item" :style="{ color: index === categoryChoice ? '#2938e0' : '' }" @click="selectCategory(index)">
        {{ item.name }}
      </div>
    </div>
    <div class="relative-bar">
-      <div v-for="(item, index) in barItems[selectedCategory].relative" :key="index" class="relative-item">
-        <!-- <img :src="item.img" alt="item.name"> -->
-        <img src="/imgs/shop/1.png" alt="item.name" class="relative-img">
-        {{ item.name }}
+      <div v-for="(item, index) in barItems[categoryChoice].relative" :key="index" class="relative-item" @click="$router.push(`/productCategoryFinal/${item.name}`)">
+        <img :src="item.img" :alt="item.name" class="relative-img">
+        <!-- <img src="/imgs/shop/1.png" alt="item.name" class="relative-img"> -->
+        <span class="relative-name">{{ item.name }}</span>
+      </div>
+    </div>
+
+    <div class="shop-content-wrapper">
+      <div class="shop-content-title">商品</div>
+      <div class="shop-content">
+        <div class="product-content" v-for="item in products" :key="item.id" @click="$router.push(`/productsummary/${item.id}`)">
+          <img :src="item.img" :alt="item.name" class="product-content-img">
+          <span class="product-content-name">{{ item.name }}</span>
+          <div class="price-info">
+            <el-icon><Coin /></el-icon>
+            <div class="product-content-price">{{ item.points_price }}</div>
+          </div>
+          <div class="price-info">
+            <img src="/imgs/profile/rongdou.png" alt="融豆" class="img-bean">
+            <div class="product-content-price">{{ item.rongdou_price }}</div>
+          </div>
+        </div>
      </div>
    </div>
  </div>
 </template>

 <script setup>
-import { ref } from 'vue'
+import { Search, Coin } from '@element-plus/icons-vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getImageUrl } from '@/config'
+import { ref, onMounted, watch } from 'vue'
+import api from '@/utils/api'

-const selectedCategory = ref(0)
+const categoryChoice = ref(0)

 const barItems = ref([
  {
+    name: '数码产品',
+    relative: [{
+      name: '华为',
+      img: ''
+    },{
+      name: '苹果',
+      img: ''
+    },{
+      name: '小米',
+      img: ''
+    },{
+      name: '荣耀',
+      img: ''
+    },{
+      name: 'iqoo',
+      img: ''
+    },{
+      name: 'realme',
+      img: ''
+    },{
+      name: 'vivo',
+      img: ''
+    },{
+      name: 'oppo',
+      img: ''
+    },{
+      name: '三星',
+      img: ''
+    }]
+  },{
+    name: '食品饮料',
+    relative: []
+  },{
+    name: '服装配饰',
+    relative: []
+  },{
    name: '手机',
    relative: [{
      name: '华为',
@@ -52,6 +110,15 @@ const barItems = ref([
    },{
      name: 'realme',
      img: ''
+    },{
+      name: 'vivo',
+      img: ''
+    },{
+      name: 'oppo',
+      img: ''
+    },{
+      name: '三星',
+      img: ''
    }]
  },{
    name: '家装',
@@ -125,24 +192,102 @@ const barItems = ref([
  }
 ])

+const products = ref([])
+const loading = ref(false)
+const loadingMore = ref(false)
+const page = ref(1)
+const hasMore = ref(true)
+const selectedCategory = ref(barItems.value[0].name)
+
+const searchKeyword = ref('')
+const sortBy = ref('')
+
 const selectCategory = (index) => {
-  selectedCategory.value = index
+  searchKeyword.value = ''
+  categoryChoice.value = index
+  selectedCategory.value = barItems.value[index].name
+  getProducts(false)
 }
+
+const getProducts = async (isLoadMore = false) => {
+  try {
+    if (!isLoadMore) {
+      loading.value = true
+      page.value = 1
+    } else {
+      loadingMore.value = true
+    }
+    
+    const {data} = await api.get('/products', {
+      params: {
+        page: page.value,
+        limit: 20,
+        category: selectedCategory.value === 'all' ? '' : selectedCategory.value,
+        search: searchKeyword.value,
+        sort: sortBy.value
+      }
+    })
+    
+    if (isLoadMore) {
+      const newProducts = data.data.products
+      // 处理新加载商品图片路径
+      newProducts.forEach(product => {
+        if (product.image) {
+          product.image = getImageUrl(product.image)
+        }
+      })
+      products.value.push(...newProducts)
+    } else {
+      products.value = data.data.products
+      // 处理商品图片路径
+      products.value.forEach(product => {
+        if (product.image) {
+          product.image = getImageUrl(product.image)
+        }
+      })
+    }
+    
+    hasMore.value = data.data.hasMore
+    page.value++
+  } catch (error) {
+    ElMessage.error('获取商品列表失败')
+    console.error('获取商品列表失败:', error)
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+const searchProducts = () => {
+  getProducts(false)
+}
+
+watch(searchKeyword, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    getProducts(false)
+  }
+})
+
+onMounted(() => {
+  getProducts()
+})
 </script>

 <style scoped>
 .category-container {
-  padding: 20px;
+  padding: 20px 0;
  display: flex;
  flex-direction: column;
  background: #b9d5ff;
  margin-bottom: -100px;
+  min-height: 100vh;
 }

 .header {
  display: flex;
  align-items: center;
-  justify-content: center;
+  justify-content: flex-start;
+  padding-left: 20px;
 }

 .back-btn {
@@ -152,7 +297,7 @@ const selectCategory = (index) => {
  color: #ffffff;
  background: transparent;
  border: none;
-  margin-left: -22px;
+  margin-left: -20px;
 }

 .back-text {
@@ -168,13 +313,14 @@ const selectCategory = (index) => {
  width: 64px;
  height: 28px;
  border-radius: 400px;
-  margin-left: 8px;
+  margin-left: 15px;
  color: #fff;
  background: linear-gradient(to right, #7b99ff, #002cc2);
  border: none;
 }

 .product-searcher {
+  margin-left: 25px;
  width: 180px;
  height: 32px;
 }
@@ -198,6 +344,7 @@ const selectCategory = (index) => {
  white-space: nowrap;
  height: 40px;
  width: 100%;
+  align-self: center;
 }

 .bar::-webkit-scrollbar {
@@ -218,6 +365,16 @@ const selectCategory = (index) => {
  gap: 30px;
  margin-top: 5px;
  justify-content: center;
+  background: #ffffff;
+  width: 100%;
+  top: 132px;
+  padding-top: 10px;
+  padding-right: 20px;
+  padding-bottom: 20px;
+  padding-left: 20px;
+  gap: 30px;
+  transform: rotate(0deg);
+  opacity: 1;
 }

 .relative-item {
@@ -233,4 +390,105 @@ const selectCategory = (index) => {
  margin-bottom: 8px;
 }

+.relative-name {
+  text-align: center;
+  font-size: 10px;
+  line-height: 1.2;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  width: 100%;
+}
+
+.shop-content-wrapper {
+  width: 100%;
+  background: #b9d5ff;
+  display: flex;
+  flex-direction: column;
+  padding: 0 20px;
+  box-sizing: border-box;
+  margin-top: -10px;
+  z-index: 1;
+  border-radius: 10px;
+}
+
+.shop-content-title {
+  width: 100%;
+  text-align: left;
+  color: #ffffff;
+  font-size: 16px;
+  font-weight: bold;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  margin-left: 5px;
+  padding-left: 10px;
+
+}
+
+.shop-content {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 26px;
+  row-gap: 14px;
+  justify-content: center;
+}
+
+.product-content {
+  width: 100%;
+  height: 240px;
+  border-radius: 5px;
+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-self: center;
+}
+
+.product-content-img {
+  width: 100%;
+  height: 153px;
+  border-radius: 5px 5px 0 0;
+  flex-shrink: 0;
+}
+
+.product-bottom {
+  flex: 1;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.product-content-name {
+  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-info {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-top: auto;
+  padding: 0 10px;
+  padding-bottom: 5px;
+}
+
+.product-content-price {
+  font-size: 12px;
+  color: #ff6b00;
+}
+
+.img-bean {
+  width: 16px;
+  height: 16px;
+}
+
 </style>
--- a/src/views/ProductCategoryFinal.vue
+++ b/src/views/ProductCategoryFinal.vue
@@ -0,0 +1,242 @@
+<template>
+  <div class="final-container">
+    <div class="shop-header">
+      <button @click="$router.go(-1)" class="back-btn"><</button>
+      <el-input placeholder="请输入商品名称或种类" v-model="searchKeyword" clearable class="product-searcher">
+        <template #prefix>
+          <el-icon><Search /></el-icon>
+        </template>
+      </el-input>
+    </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-info">
+          <div class="product-content-name">
+            {{ product.name }}
+          </div>
+          <div class="price-info">
+            <el-icon><Coin /></el-icon>
+            <div class="product-content-price">{{ product.points_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>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import api from '@/utils/api'
+import { getImageUrl } from '@/config'
+import { useUserStore } from '@/stores/user';
+
+const userStore = useUserStore();
+
+const route = useRoute()
+
+const searchKeyword = ref(route.params.name)
+const sortBy = ref('')
+
+const products = ref([])
+const loading = ref(false)
+const loadingMore = ref(false)
+const page = ref(1)
+const hasMore = ref(true)
+const selectedCategory = ref('all')
+
+const couponExist = ref(false)
+
+const getProducts = async (isLoadMore = false) => {
+  try {
+    if (!isLoadMore) {
+      loading.value = true
+      page.value = 1
+    } else {
+      loadingMore.value = true
+    }
+    
+    const {data} = await api.get('/products', {
+      params: {
+        page: page.value,
+        limit: 20,
+        category: selectedCategory.value === 'all' ? '' : selectedCategory.value,
+        search: searchKeyword.value,
+        sort: sortBy.value
+      }
+    })
+    
+    if (isLoadMore) {
+      const newProducts = data.data.products
+      // 处理新加载商品图片路径
+      newProducts.forEach(product => {
+        if (product.image) {
+          product.image = getImageUrl(product.image)
+        }
+      })
+      products.value.push(...newProducts)
+    } else {
+      products.value = data.data.products
+      // 处理商品图片路径
+      products.value.forEach(product => {
+        if (product.image) {
+          product.image = getImageUrl(product.image)
+        }
+      })
+    }
+    
+    hasMore.value = data.data.hasMore
+    page.value++
+  } catch (error) {
+    ElMessage.error('获取商品列表失败')
+    console.error('获取商品列表失败:', error)
+  } finally {
+    loading.value = false
+    loadingMore.value = false
+  }
+}
+
+const getCoupon = async () => {
+  try {
+    console.log(userStore)
+    const {data} = await api.get(`/coupon/${userStore.user.id}`)
+    if (data.success) {
+      ElMessage.success('优惠券领取成功')
+      isCouponExist()
+    } else {
+      ElMessage.error(data.msg || '优惠券领取失败')
+    }
+  } catch (error) {
+    ElMessage.error('优惠券领取失败')
+    console.error('优惠券领取失败:', error)
+  }
+}
+
+const isCouponExist = async () => {
+  try {
+    const {data} = await api.get(`/coupon`)
+    console.log(data)
+    couponExist.value = data.success
+  } catch (error) {
+    ElMessage.error('检查优惠券失败')
+    console.error('检查优惠券失败:', error)
+    couponExist.value = false
+  }
+}
+
+watch(searchKeyword, (newVal, oldVal) => {
+  if (newVal !== oldVal) {
+    getProducts(false)
+  }
+})
+
+onMounted(() => {
+  isCouponExist()
+  getProducts()
+})
+</script>
+
+<style scoped>
+
+.final-container {
+  padding: 20px;
+}
+
+.shop-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 20px;
+  position: relative;
+}
+
+.back-btn {
+  font-size: 15px;
+  width: 26px;
+  height: 26px;
+  color: #000000;
+  background: transparent;
+  border: none;
+  position: absolute;
+  left: 0;
+  margin-left: 0;
+}
+
+.product-searcher {
+  width: 265px;
+  height: 32px;
+  align-self: center;
+}
+
+.product-searcher :deep(.el-input__wrapper) {
+  border-radius: 400px;
+}
+
+.coupon-announcer {
+  width: 100%;
+  text-align: center;
+  background: #E5FFE2;
+  font-size: 16px;
+  font-weight: bold;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  margin-left: 5px;
+  padding-left: 10px;
+}
+
+.product-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.product-item {
+  width: 200px;
+  margin: 10px;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  min-width: 100%;
+  max-height: 110px;
+}
+
+.product-image {
+  width: 110px;
+  height: 110px;
+  flex-shrink: 0;
+}
+
+.price-info {
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  margin-top: auto;
+  padding: 0 10px;
+  flex: 1;
+}
+
+.product-content-name {
+  font-size: 16px;
+  padding: 0 10px;
+}
+
+.product-content-price {
+  font-size: 12px;
+  color: #ff6b00;
+}
+
+.img-bean {
+  width: 16px;
+  height: 16px;
+}
+</style>
--- a/src/views/Shop.vue
+++ b/src/views/Shop.vue
@@ -17,7 +17,7 @@
    </div>

    <div class="shop-tips">
-      <img src="/imgs/shop/tips.png" alt="融豆" class="tips-imgs">
+      <img src="/imgs/shop/tips.png" alt="提示" class="tips-imgs">
    </div>

    <div class="shop-content">
@@ -42,7 +42,7 @@
 </template>

 <script setup>
-import { Search } from '@element-plus/icons-vue'
+import { Search, Coin } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { getImageUrl } from '@/config'
 import { ref, onMounted, watch } from 'vue'
@@ -146,6 +146,7 @@ onMounted(() => {
  flex-direction: column;
  background: #79afff;
  margin-bottom: -100px;
+  min-height: 100vh;
 }

 .shop-header {
@@ -223,16 +224,17 @@ onMounted(() => {
 }

 .product-content {
-  width: 153px;
-  height: 220px;
+  width: 100%;
+  height: 240px;
  border-radius: 5px;
  background-color: #fff;
  display: flex;
  flex-direction: column;
+  justify-self: center;
 }

 .product-content-img {
-  width: 153px;
+  width: 100%;
  height: 153px;
  border-radius: 5px 5px 0 0;
  flex-shrink: 0;
@@ -256,6 +258,7 @@ onMounted(() => {
  overflow: hidden;
  line-height: 1.4;
  min-height: 2.8em;
+  padding: 3px 10px;
 }

 .price-info {
@@ -263,6 +266,8 @@ onMounted(() => {
  align-items: center;
  gap: 4px;
  margin-top: auto;
+  padding: 0 10px;
+  padding-bottom: 5px;
 }

 .product-content-price {