|
|
@@ -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() {
|