|
@@ -1,62 +1,63 @@
|
|
|
<template>
|
|
<template>
|
|
|
<view class="product-list-container">
|
|
<view class="product-list-container">
|
|
|
<u-sticky bgColor="#ffffff">
|
|
<u-sticky bgColor="#ffffff">
|
|
|
- <!-- 商品列表头部 -->
|
|
|
|
|
- <view class="product-header">
|
|
|
|
|
- <view class="title-text" :class="{ 'hide': isSticky }"><text>精选好物</text>兑换</view>
|
|
|
|
|
- <u-search placeholder="搜索" v-model="keyword" :showAction="false" :class="{ 'expand': isSticky }"></u-search>
|
|
|
|
|
- </view>
|
|
|
|
|
|
|
+ <!-- 商品列表头部 -->
|
|
|
|
|
+ <view class="product-header">
|
|
|
|
|
+ <view class="title-text" :class="{ 'hide': isSticky }"><text>精选好物</text>兑换</view>
|
|
|
|
|
+ <u-search placeholder="搜索" v-model="keyword" :showAction="false" :class="{ 'expand': isSticky }"></u-search>
|
|
|
|
|
+ </view>
|
|
|
|
|
|
|
|
- <!-- 分类标签 -->
|
|
|
|
|
- <u-tabs
|
|
|
|
|
- :list="categories"
|
|
|
|
|
- :current="activeCategoryIndex"
|
|
|
|
|
- @change="handleCategoryChange"
|
|
|
|
|
- lineWidth="30"
|
|
|
|
|
- lineColor="#20CAC2"
|
|
|
|
|
- :activeStyle="{
|
|
|
|
|
- color: '#303133',
|
|
|
|
|
- fontWeight: 'bold',
|
|
|
|
|
- transform: 'scale(1.05)'
|
|
|
|
|
- }"
|
|
|
|
|
- :inactiveStyle="{
|
|
|
|
|
- color: '#606266',
|
|
|
|
|
- transform: 'scale(1)'
|
|
|
|
|
- }"
|
|
|
|
|
- itemStyle="padding:0 43rpx; height: 72rpx;font-size:28rpx"
|
|
|
|
|
- class="category-tabs"
|
|
|
|
|
- ></u-tabs>
|
|
|
|
|
|
|
+ <!-- 分类标签 -->
|
|
|
|
|
+ <u-tabs
|
|
|
|
|
+ :list="categories"
|
|
|
|
|
+ :current="activeCategoryIndex"
|
|
|
|
|
+ @change="handleCategoryChange"
|
|
|
|
|
+ lineWidth="30"
|
|
|
|
|
+ :scrollable="categories.length > 5 ? true : false"
|
|
|
|
|
+ lineColor="#20CAC2"
|
|
|
|
|
+ :activeStyle="{
|
|
|
|
|
+ color: '#303133',
|
|
|
|
|
+ fontWeight: 'bold',
|
|
|
|
|
+ transform: 'scale(1.05)'
|
|
|
|
|
+ }"
|
|
|
|
|
+ :inactiveStyle="{
|
|
|
|
|
+ color: '#606266',
|
|
|
|
|
+ transform: 'scale(1)'
|
|
|
|
|
+ }"
|
|
|
|
|
+ itemStyle="padding:0 43rpx; height: 72rpx;font-size:28rpx"
|
|
|
|
|
+ class="category-tabs"
|
|
|
|
|
+ ></u-tabs>
|
|
|
|
|
|
|
|
- <!-- 排序选项 -->
|
|
|
|
|
- <view class="sort-options">
|
|
|
|
|
- <view
|
|
|
|
|
- v-for="(sort, index) in sortOptions"
|
|
|
|
|
- :key="index"
|
|
|
|
|
- class="sort-option"
|
|
|
|
|
- @click="switchSort(sort.key)"
|
|
|
|
|
- >
|
|
|
|
|
- <text :class="['sort-text', { active: activeSort === sort.key }]">{{ sort.name }}</text>
|
|
|
|
|
- <view v-if="['price','sales'].includes(sort.key)" style="margin-top: -8rpx;">
|
|
|
|
|
- <ImageItem src="/static/points/arrow-up.png" v-if="activeSort === sort.key && sortDirection === 'asc'"></ImageItem>
|
|
|
|
|
- <ImageItem src="/static/points/arrow-down.png" v-else-if="activeSort === sort.key && sortDirection === 'desc'"></ImageItem>
|
|
|
|
|
- <ImageItem src="/static/points/details.png" v-else></ImageItem>
|
|
|
|
|
|
|
+ <!-- 排序选项 -->
|
|
|
|
|
+ <view class="sort-options">
|
|
|
|
|
+ <view
|
|
|
|
|
+ v-for="(sort, index) in sortOptions"
|
|
|
|
|
+ :key="index"
|
|
|
|
|
+ class="sort-option"
|
|
|
|
|
+ @click="switchSort(sort.key)"
|
|
|
|
|
+ >
|
|
|
|
|
+ <text :class="['sort-text', { active: activeSort === sort.key }]">{{ sort.name }}</text>
|
|
|
|
|
+ <view v-if="['price','sales'].includes(sort.key)" style="margin-top: -8rpx;">
|
|
|
|
|
+ <ImageItem src="/static/points/arrow-up.png" v-if="activeSort === sort.key && sortDirection === 'asc'"></ImageItem>
|
|
|
|
|
+ <ImageItem src="/static/points/arrow-down.png" v-else-if="activeSort === sort.key && sortDirection === 'desc'"></ImageItem>
|
|
|
|
|
+ <ImageItem src="/static/points/details.png" v-else></ImageItem>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
- </view>
|
|
|
|
|
</u-sticky>
|
|
</u-sticky>
|
|
|
<!-- 商品列表 -->
|
|
<!-- 商品列表 -->
|
|
|
<u-loading-icon text="加载中" textSize="18" v-if="status === 'loading' && products.length <= 0" style="margin-top: 200rpx;"/>
|
|
<u-loading-icon text="加载中" textSize="18" v-if="status === 'loading' && products.length <= 0" style="margin-top: 200rpx;"/>
|
|
|
<view class="product-grid" v-else-if="products.length > 0">
|
|
<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-item" v-for="(product, index) in products" :key="index">
|
|
|
<view class="product-image">
|
|
<view class="product-image">
|
|
|
- <ImageItem :src="product.image" mode="aspectFill"/>
|
|
|
|
|
|
|
+ <ImageItem :src="product.productMainImage" mode="aspectFill"/>
|
|
|
</view>
|
|
</view>
|
|
|
<view class="product-info">
|
|
<view class="product-info">
|
|
|
<u--text class="product-name" :lines="1" :text="product.name"></u--text>
|
|
<u--text class="product-name" :lines="1" :text="product.name"></u--text>
|
|
|
- <text class="product-price">{{ product.price }}</text>
|
|
|
|
|
|
|
+ <text class="product-price">{{ product.pricePoint }}</text>
|
|
|
<view class="product-details">
|
|
<view class="product-details">
|
|
|
<view class="product-detail">
|
|
<view class="product-detail">
|
|
|
- <text class="product-value">价值{{ product.value }}元</text>
|
|
|
|
|
|
|
+ <text class="product-value">价值{{ product.priceMoney }}元</text>
|
|
|
<text class="product-sales">销量{{ product.sales }}</text>
|
|
<text class="product-sales">销量{{ product.sales }}</text>
|
|
|
</view>
|
|
</view>
|
|
|
<button class="exchange-btn" @click="handleExchange(product)">
|
|
<button class="exchange-btn" @click="handleExchange(product)">
|
|
@@ -93,21 +94,14 @@ export default {
|
|
|
// 搜索关键词
|
|
// 搜索关键词
|
|
|
keyword: '',
|
|
keyword: '',
|
|
|
// 分类数据
|
|
// 分类数据
|
|
|
- categories: [
|
|
|
|
|
- { key: 'all', name: '全部' },
|
|
|
|
|
- { key: 'leisure', name: '休闲' },
|
|
|
|
|
- { key: 'entertainment', name: '娱乐' },
|
|
|
|
|
- { key: 'daily', name: '日用品' },
|
|
|
|
|
- { key: 'other', name: '其他' }
|
|
|
|
|
- ],
|
|
|
|
|
|
|
+ activeCategory: 'all',
|
|
|
|
|
+ categories: [],
|
|
|
// 排序选项
|
|
// 排序选项
|
|
|
sortOptions: [
|
|
sortOptions: [
|
|
|
{ key: '综合', name: '综合' },
|
|
{ key: '综合', name: '综合' },
|
|
|
{ key: 'price', name: '价格' },
|
|
{ key: 'price', name: '价格' },
|
|
|
{ key: 'sales', name: '销量' }
|
|
{ key: 'sales', name: '销量' }
|
|
|
],
|
|
],
|
|
|
- // 当前选中的分类和排序
|
|
|
|
|
- activeCategory: 'all',
|
|
|
|
|
activeSort: '综合',
|
|
activeSort: '综合',
|
|
|
sortDirection: '',
|
|
sortDirection: '',
|
|
|
// 商品数据
|
|
// 商品数据
|
|
@@ -140,8 +134,18 @@ export default {
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
//获取分类
|
|
//获取分类
|
|
|
- getTypeShop(){
|
|
|
|
|
- const res = getShopType();
|
|
|
|
|
|
|
+ async getTypeShop() {
|
|
|
|
|
+ const res = await getShopType();
|
|
|
|
|
+ const {data} = res.data;
|
|
|
|
|
+ this.categories = [
|
|
|
|
|
+ { key: 'all', name: '全部' },
|
|
|
|
|
+ ...data.map(item => {
|
|
|
|
|
+ return {
|
|
|
|
|
+ name:item.childName,
|
|
|
|
|
+ key:item.childCode
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ ]
|
|
|
},
|
|
},
|
|
|
// 获取吸顶元素的初始位置
|
|
// 获取吸顶元素的初始位置
|
|
|
getStickyTop() {
|
|
getStickyTop() {
|
|
@@ -166,10 +170,9 @@ export default {
|
|
|
loadData() {
|
|
loadData() {
|
|
|
this.status = 'loading'
|
|
this.status = 'loading'
|
|
|
this.fetchProducts(1).then(res => {
|
|
this.fetchProducts(1).then(res => {
|
|
|
- console.log(res)
|
|
|
|
|
if (res.code === 200) {
|
|
if (res.code === 200) {
|
|
|
- this.products = res.data.list
|
|
|
|
|
- this.hasMore = res.data.list.length === this.pageSize
|
|
|
|
|
|
|
+ this.products = res.data.records
|
|
|
|
|
+ this.hasMore = res.data.records.length === this.pageSize
|
|
|
this.status = this.hasMore ? 'more' : 'nomore'
|
|
this.status = this.hasMore ? 'more' : 'nomore'
|
|
|
} else {
|
|
} else {
|
|
|
this.status = 'error'
|
|
this.status = 'error'
|
|
@@ -221,13 +224,11 @@ export default {
|
|
|
// 加载更多
|
|
// 加载更多
|
|
|
loadMore() {
|
|
loadMore() {
|
|
|
if (this.status === 'loading' || !this.hasMore) return
|
|
if (this.status === 'loading' || !this.hasMore) return
|
|
|
-
|
|
|
|
|
this.status = 'loading'
|
|
this.status = 'loading'
|
|
|
this.page++
|
|
this.page++
|
|
|
-
|
|
|
|
|
this.fetchProducts(this.page).then(res => {
|
|
this.fetchProducts(this.page).then(res => {
|
|
|
if (res.code === 200) {
|
|
if (res.code === 200) {
|
|
|
- const newProducts = res.data.list
|
|
|
|
|
|
|
+ const newProducts = res.data.records
|
|
|
this.products = [...this.products, ...newProducts]
|
|
this.products = [...this.products, ...newProducts]
|
|
|
this.hasMore = newProducts.length === this.pageSize
|
|
this.hasMore = newProducts.length === this.pageSize
|
|
|
this.status = this.hasMore ? 'more' : 'nomore'
|
|
this.status = this.hasMore ? 'more' : 'nomore'
|
|
@@ -255,7 +256,7 @@ export default {
|
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
|
padding-bottom: 32rpx;
|
|
padding-bottom: 32rpx;
|
|
|
margin-top: -20rpx;
|
|
margin-top: -20rpx;
|
|
|
- overflow: hidden;
|
|
|
|
|
|
|
+ overflow: clip;
|
|
|
.product-header {
|
|
.product-header {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|