Browse Source

feat:积分商城-商品列表接口对接(并处理图片加载失败的效果)

xyh 5 months ago
parent
commit
ca39c13cc5

+ 1 - 69
src/api/shop.js

@@ -10,77 +10,9 @@ export function getShopType(data) {
 }
 // 积分商品列表
 export function getPointShopList(data) {
-    console.log(data)
-    // 模拟数据返回
-    return new Promise((resolve, reject) => {
-        setTimeout(() => {
-            const mockData = {
-                "code": 200,
-                "msg": "操作成功",
-                "data": {
-                    "records": [
-                        {
-                            id: 1,
-                            name: '广誉源会员定制玻璃杯1',
-                            pricePoint: '10元+1000积分',
-                            priceMoney: '100',
-                            sales: 10,
-                            productMainImage: 'https://test.baoxianzhanggui.com/nightFragrance/profile/upload/2025/01/03/b43f6087c815cdab8828eb68529d96bc73203b941ab71e-xrpfmn_fw1200webp_20250103175413A002.png'
-                        },
-                        {
-                            id: 2,
-                            name: '广誉源会员定制玻璃杯2',
-                            pricePoint: '10元+1000积分',
-                            priceMoney: '100',
-                            sales: 10,
-                            productMainImage: 'https://test.baoxianzhanggui.com/nightFragrance/profile/upload/2025/01/03/b43f6087c815cdab8828eb68529d96bc73203b941ab71e-xrpfmn_fw1200webp_20250103175413A002.png'
-                        },
-                        {
-                            id: 3,
-                            name: '广誉源会员定制玻璃杯3',
-                            pricePoint: '10元+1000积分',
-                            priceMoney: '100',
-                            sales: 10,
-                            productMainImage: 'https://test.baoxianzhanggui.com/nightFragrance/profile/upload/2025/01/03/b43f6087c815cdab8828eb68529d96bc73203b941ab71e-xrpfmn_fw1200webp_20250103175413A002.png'
-                        },
-                        {
-                            id: 4,
-                            name: '广誉源会员定制玻璃杯',
-                            pricePoint: '10元+1000积分',
-                            priceMoney: '100',
-                            sales: 10,
-                            productMainImage: 'https://test.baoxianzhanggui.com/nightFragrance/profile/upload/2025/01/03/b43f6087c815cdab8828eb68529d96bc73203b941ab71e-xrpfmn_fw1200webp_20250103175413A002.png'
-                        },
-                        {
-                            id: 5,
-                            name: '广誉源会员定制玻璃杯',
-                            pricePoint: '10元+1000积分',
-                            priceMoney: '100',
-                            sales: 10,
-                            productMainImage: 'https://test.baoxianzhanggui.com/nightFragrance/profile/upload/2025/01/03/b43f6087c815cdab8828eb68529d96bc73203b941ab71e-xrpfmn_fw1200webp_20250103175413A002.png'
-                        },
-                    ],
-                    "total": 2,
-                    "size": 10,
-                    "current": 1,
-                    "orders": [],
-                    "optimizeCountSql": true,
-                    "searchCount": true,
-                    "countId": null,
-                    "maxLimit": null,
-                    "pages": 1
-                }
-            }
-            resolve(mockData);
-        }, 800);
-    });
-
-    // 真实API调用
-    /*
     return request({
         method: 'get',
-        url: '/api/order/v1/wx/getOrder',
+        url: '/product/h5List',
         data
     });
-    */
 }

+ 1 - 0
src/common/config.js

@@ -11,6 +11,7 @@ let baseUrl = 'https://test.baoxianzhanggui.com/nightFragrance';
 if (process.env.NODE_ENV == 'development') {
     // baseUrl = 'https://test.baoxianzhanggui.com/locallive-java' // 测试环境
     //baseUrl = 'http://192.168.1.190:8087' // 靳
+    //baseUrl = 'http://192.168.1.222:8087' // 志珺
 }
 
 // 同时导出所有变量(命名导出)

+ 10 - 5
src/components/swiper/components/image.vue

@@ -1,5 +1,11 @@
 <template>
-    <image class="image" mode="aspectFill" :src="src" :draggable="draggable"></image>
+    <image 
+        class="image" 
+        mode="aspectFill" 
+        :src="src" 
+        :draggable="draggable"
+        @error="handleImageError"
+    ></image>
 </template>
 
 <script>
@@ -15,12 +21,11 @@ export default {
         return {
             draggable: false
         }
-    },
-    mounted() {
-
     },
     methods: {
-        
+        handleImageError() {
+            this.$emit('image-error');
+        }
     }
 }
 </script>

+ 56 - 24
src/points/components/product-list/product-list.vue

@@ -50,14 +50,26 @@
     <view class="product-grid" v-else-if="products.length > 0">
       <view class="product-item" v-for="(product, index) in products" :key="index">
         <view class="product-image">
-          <ImageItem :src="product.productMainImage" mode="aspectFill"/>
+          <view v-if="!imageErrorMap[product.id]">
+            <ImageItem 
+              :src="getImageUrl(product.productMainImage)"
+              @image-error="handleImageError(product.id)"
+            />
+          </view>
+          <view v-else style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 248rpx; background-color: #f5f5f5; border-radius: 8rpx;">
+            <uni-icons type="image" size="64rpx" color="#999" @click="resetImageError(product.id)"></uni-icons>
+            <text style="font-size: 24rpx; color: #999; margin-top: 16rpx;">加载失败</text>
+          </view>
+
         </view>
         <view class="product-info">
           <u--text class="product-name" :lines="1" :text="product.name"></u--text>
-          <text class="product-price">{{ product.pricePoint }}</text>
+          <text class="product-price" v-if="product.paymentType == 1">{{ product.pricePoint }}积分</text>
+          <text class="product-price" v-if="product.paymentType == 2">¥{{ product.priceMoney }}</text>
+          <text class="product-price" v-if="product.paymentType == 3">¥{{ product.priceMoney }}+{{ product.pricePoint }}积分</text>
           <view class="product-details">
             <view class="product-detail">
-              <text class="product-value">价值{{ product.priceMoney }}元</text>
+              <text class="product-value">价值{{ product.originalPrice }}元</text>
               <text class="product-sales">销量{{ product.sales }}</text>
             </view>
             <button class="exchange-btn" @click="handleExchange(product)">
@@ -69,6 +81,7 @@
     </view>
     <u-loadmore :status="status" loading-text="努力加载中" nomore-text="没有更多了" lineColor="#E6E8EB" v-if="products.length > 0"/>
     <u-empty
+        style="margin-top:100rpx"
         v-if="products.length <= 0 && status !== 'loading'"
         icon="car-fill"
         text="暂无积分商品"
@@ -94,15 +107,15 @@ export default {
       // 搜索关键词
       keyword: '',
       // 分类数据
-      activeCategory: 'all',
+      activeCategory: '',
       categories: [],
       // 排序选项
       sortOptions: [
-        { key: '综合', name: '综合' },
+        { key: 'comprehensive', name: '综合' },
         { key: 'price', name: '价格' },
         { key: 'sales', name: '销量' }
       ],
-      activeSort: '综合',
+      activeSort: 'comprehensive',
       sortDirection: '',
       // 商品数据
       products:[],
@@ -114,7 +127,9 @@ export default {
       // 吸顶状态
       isSticky: false,
       // 吸顶元素的初始位置
-      stickyTop: 0
+      stickyTop: 0,
+      // 图片加载状态
+      imageErrorMap: {}
     }
   },
   mounted() {
@@ -138,13 +153,13 @@ export default {
       const res = await getShopType();
       const {data} = res.data;
       this.categories = [
-        { key: 'all', name: '全部' },
-          ...data.map(item => {
-            return {
-              name:item.childName,
-              key:item.childCode
-            }
-          })
+        { key: '', name: '全部' },
+        ...(Array.isArray(data) ? data.map(item => {
+          return {
+            name: item.childName,
+            key: item.childCode
+          }
+        }) : [])
       ]
     },
     // 获取吸顶元素的初始位置
@@ -159,21 +174,23 @@ export default {
     // 加载商品数据
     fetchProducts(page) {
       return getPointShopList({
-        page: page,
-        pageSize: this.pageSize,
+        current: page,
+        size: this.pageSize,
         name:this.keyword,
-        category: this.activeCategory,
-        sort: this.activeSort,
-        sortDirection: this.sortDirection
+        categoryId: this.activeCategory,
+        sortField: this.activeSort,
+        sortOrder: this.sortDirection
       })
     },
     // 加载初始数据
     loadData() {
       this.status = 'loading'
       this.fetchProducts(1).then(res => {
-        if (res.code === 200) {
-          this.products = res.data.records
-          this.hasMore = res.data.records.length === this.pageSize
+        const {data} = res;
+        console.log(res)
+        if (data.code === 200) {
+          this.products = data.data.records
+          this.hasMore = data.data.records.length === this.pageSize
           this.status = this.hasMore ? 'more' : 'nomore'
         } else {
           this.status = 'error'
@@ -228,8 +245,9 @@ export default {
       this.status = 'loading'
       this.page++
       this.fetchProducts(this.page).then(res => {
-        if (res.code === 200) {
-          const newProducts = res.data.records
+        const {data} = res;
+        if (data.code === 200) {
+          const newProducts = data.data.records
           this.products = [...this.products, ...newProducts]
           this.hasMore = newProducts.length === this.pageSize
           this.status = this.hasMore ? 'more' : 'nomore'
@@ -241,6 +259,20 @@ export default {
         this.status = 'error'
       })
     },
+    // 获取图片 URL
+    getImageUrl(imagePath) {
+      if (!imagePath) return '';
+      const publicUrl = this.$globalData?.publicUrl || '';
+      return publicUrl + imagePath;
+    },
+    // 处理图片加载失败
+    handleImageError(productId) {
+      this.$set(this.imageErrorMap, productId, true);
+    },
+    // 重置图片加载状态
+    resetImageError(productId) {
+      this.$set(this.imageErrorMap, productId, false);
+    },
   },
   computed: {
     activeCategoryIndex() {