mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-uniapp.git
synced 2026-08-06 19:07:23 +08:00
41e8cff749
- 在 myCollect.vue 中优化收藏页面的布局和样式，增加主题支持 - 在 searchPage.vue 中修复搜索组件的输入值设置逻辑 - 在 coupon/index.vue 中重构优惠券列表的展示逻辑，提升可用性 - 在 m-search-revision.vue 中调整搜索组件的样式和功能，增加清除图标的交互 - 在 pages.json 中禁用下拉刷新功能以改善性能
493 lines
11 KiB
Vue
493 lines
11 KiB
Vue
<template>
|
|
<view class="page" :style="themeStyle">
|
|
<u-navbar
|
|
title="收藏"
|
|
:fixed="true"
|
|
:placeholder="true"
|
|
:border="false"
|
|
:auto-back="true"
|
|
></u-navbar>
|
|
|
|
<view class="tabs-wrap">
|
|
<u-tabs
|
|
:list="navList"
|
|
:scrollable="false"
|
|
:lineColor="lightColor"
|
|
:activeStyle="{ color: lightColor, fontWeight: '600' }"
|
|
:inactiveStyle="{ color: '#666' }"
|
|
v-model:current="tabCurrentIndex"
|
|
@change="onTabChange"
|
|
></u-tabs>
|
|
</view>
|
|
|
|
<scroll-view
|
|
class="list-scroll"
|
|
scroll-y
|
|
enable-back-to-top
|
|
:refresher-enabled="true"
|
|
:refresher-triggered="refreshing"
|
|
@refresherrefresh="onRefresh"
|
|
@scrolltolower="loadMore"
|
|
>
|
|
<!-- 商品 -->
|
|
<view v-if="tabCurrentIndex === 0" class="tab-content">
|
|
<u-empty
|
|
v-if="!goodsLoading && goodsEmpty"
|
|
class="empty-box"
|
|
text="暂无收藏商品"
|
|
mode="favor"
|
|
></u-empty>
|
|
<template v-else>
|
|
<u-swipe-action
|
|
v-for="(item, index) in goodsList"
|
|
:key="item.skuId || item.goodsId || index"
|
|
class="collect-swipe"
|
|
>
|
|
<u-swipe-action-item
|
|
@open="openSwipeItem(item, 'goods')"
|
|
:show="item.selected"
|
|
:options="swipeOptions"
|
|
@click="removeGoodsCollection(item)"
|
|
:name="index"
|
|
>
|
|
<view class="goods" @click="goGoodsDetail(item)">
|
|
<u-image width="140rpx" height="140rpx" radius="12rpx" :src="item.image" mode="aspectFill">
|
|
<template #loading><u-loading-icon></u-loading-icon></template>
|
|
</u-image>
|
|
<view class="goods-intro">
|
|
<view class="goods-name wes-2">{{ item.goodsName }}</view>
|
|
<view class="goods-price">￥{{ unitPrice(item.price) }}</view>
|
|
</view>
|
|
</view>
|
|
</u-swipe-action-item>
|
|
</u-swipe-action>
|
|
<view class="load-status" v-if="goodsList.length">
|
|
{{ goodsFinished ? '没有更多了' : goodsLoading ? '加载中...' : '上拉加载更多' }}
|
|
</view>
|
|
</template>
|
|
</view>
|
|
|
|
<!-- 店铺 -->
|
|
<view v-else class="tab-content">
|
|
<u-empty
|
|
v-if="!storeLoading && storeEmpty"
|
|
class="empty-box"
|
|
text="暂无收藏店铺"
|
|
mode="favor"
|
|
></u-empty>
|
|
<template v-else>
|
|
<u-swipe-action
|
|
v-for="(item, index) in storeList"
|
|
:key="item.id || index"
|
|
class="collect-swipe"
|
|
>
|
|
<u-swipe-action-item
|
|
@open="openSwipeItem(item, 'store')"
|
|
:show="item.selected"
|
|
:options="swipeOptions"
|
|
@click="removeStoreCollection(item)"
|
|
:name="index"
|
|
>
|
|
<view class="store" @click="goStoreMainPage(item.id)">
|
|
<view class="store-logo">
|
|
<u-image
|
|
width="96rpx"
|
|
height="96rpx"
|
|
shape="circle"
|
|
:src="item.storeLogo"
|
|
mode="aspectFill"
|
|
>
|
|
<template #loading><u-loading-icon></u-loading-icon></template>
|
|
</u-image>
|
|
</view>
|
|
<view class="store-info">
|
|
<view class="store-name-row">
|
|
<text class="store-name wes">{{ item.storeName }}</text>
|
|
<u-tag
|
|
v-if="item.selfOperated"
|
|
size="mini"
|
|
type="error"
|
|
:color="mainColor"
|
|
text="自营"
|
|
plain
|
|
shape="circle"
|
|
/>
|
|
</view>
|
|
<view class="store-tip">左滑可取消收藏</view>
|
|
</view>
|
|
<view class="store-enter">进店逛逛</view>
|
|
</view>
|
|
</u-swipe-action-item>
|
|
</u-swipe-action>
|
|
<view class="load-status" v-if="storeList.length">
|
|
{{ storeFinished ? '没有更多了' : storeLoading ? '加载中...' : '上拉加载更多' }}
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import { onShow } from '@dcloudio/uni-app'
|
|
import { useStore } from '@/store'
|
|
import { unitPrice } from '@/utils/filters.js'
|
|
import { getThemeStyle } from '@/utils/theme'
|
|
import {
|
|
getGoodsCollection,
|
|
getStoreCollection,
|
|
deleteGoodsCollection,
|
|
deleteStoreCollection,
|
|
} from '@/api/members.js'
|
|
|
|
const store = useStore()
|
|
|
|
const lightColor = computed(() => store.getters.lightColor)
|
|
const mainColor = computed(() => store.getters.mainColor)
|
|
const themeStyle = computed(() => getThemeStyle(store.state.theme))
|
|
|
|
const swipeOptions = computed(() => [
|
|
{
|
|
text: '取消',
|
|
style: { backgroundColor: lightColor.value },
|
|
},
|
|
])
|
|
|
|
const tabCurrentIndex = ref(0)
|
|
const navList = ref([
|
|
{ name: '商品(0)' },
|
|
{ name: '店铺(0)' },
|
|
])
|
|
|
|
const goodsParams = ref({ pageNumber: 1, pageSize: 10 })
|
|
const storeParams = ref({ pageNumber: 1, pageSize: 10 })
|
|
|
|
const goodsEmpty = ref(false)
|
|
const storeEmpty = ref(false)
|
|
const goodsList = ref<any[]>([])
|
|
const storeList = ref<any[]>([])
|
|
const goodsLoading = ref(false)
|
|
const storeLoading = ref(false)
|
|
const goodsFinished = ref(false)
|
|
const storeFinished = ref(false)
|
|
const refreshing = ref(false)
|
|
const inited = ref(false)
|
|
|
|
onShow(() => {
|
|
if (!inited.value) {
|
|
inited.value = true
|
|
reloadAll()
|
|
return
|
|
}
|
|
reloadCurrent()
|
|
})
|
|
|
|
function hideLoadingIfNeeded() {
|
|
if (store.state.isShowToast) uni.hideLoading()
|
|
}
|
|
|
|
function onTabChange(e: any) {
|
|
const index = typeof e === 'number' ? e : e?.index
|
|
if (typeof index === 'number') {
|
|
tabCurrentIndex.value = index
|
|
}
|
|
if (tabCurrentIndex.value === 0 && !goodsList.value.length && !goodsEmpty.value) {
|
|
reloadGoods()
|
|
}
|
|
if (tabCurrentIndex.value === 1 && !storeList.value.length && !storeEmpty.value) {
|
|
reloadStore()
|
|
}
|
|
}
|
|
|
|
function onRefresh() {
|
|
refreshing.value = true
|
|
reloadCurrent()
|
|
}
|
|
|
|
function loadMore() {
|
|
if (tabCurrentIndex.value === 0) {
|
|
if (goodsLoading.value || goodsFinished.value || goodsEmpty.value) return
|
|
goodsParams.value.pageNumber++
|
|
fetchGoodsList()
|
|
} else {
|
|
if (storeLoading.value || storeFinished.value || storeEmpty.value) return
|
|
storeParams.value.pageNumber++
|
|
fetchStoreList()
|
|
}
|
|
}
|
|
|
|
function reloadAll() {
|
|
reloadGoods()
|
|
reloadStore()
|
|
}
|
|
|
|
function reloadCurrent() {
|
|
if (tabCurrentIndex.value === 0) {
|
|
reloadGoods()
|
|
} else {
|
|
reloadStore()
|
|
}
|
|
}
|
|
|
|
function reloadGoods() {
|
|
goodsParams.value.pageNumber = 1
|
|
goodsFinished.value = false
|
|
goodsEmpty.value = false
|
|
goodsList.value = []
|
|
fetchGoodsList()
|
|
}
|
|
|
|
function reloadStore() {
|
|
storeParams.value.pageNumber = 1
|
|
storeFinished.value = false
|
|
storeEmpty.value = false
|
|
storeList.value = []
|
|
fetchStoreList()
|
|
}
|
|
|
|
function openSwipeItem(val: any, type: 'goods' | 'store') {
|
|
const targetList = type === 'goods' ? goodsList.value : storeList.value
|
|
targetList.forEach((item) => {
|
|
item.selected = false
|
|
})
|
|
val.selected = true
|
|
}
|
|
|
|
function removeGoodsCollection(val: any) {
|
|
deleteGoodsCollection(val.skuId).then((res) => {
|
|
if (res.statusCode === 200) {
|
|
reloadGoods()
|
|
}
|
|
})
|
|
}
|
|
|
|
function removeStoreCollection(val: any) {
|
|
deleteStoreCollection(val.id).then((res) => {
|
|
if (res.statusCode === 200) {
|
|
reloadStore()
|
|
}
|
|
})
|
|
}
|
|
|
|
function goGoodsDetail(val: any) {
|
|
uni.navigateTo({
|
|
url: `/pages/product/goods?id=${val.skuId}&goodsId=${val.goodsId}`,
|
|
})
|
|
}
|
|
|
|
function goStoreMainPage(id: string) {
|
|
uni.navigateTo({
|
|
url: `/pages/product/shopPage?id=${id}`,
|
|
})
|
|
}
|
|
|
|
function fetchGoodsList() {
|
|
if (goodsLoading.value) return
|
|
goodsLoading.value = true
|
|
uni.showLoading({ title: '加载中' })
|
|
getGoodsCollection(goodsParams.value, 'GOODS')
|
|
.then((res) => {
|
|
goodsLoading.value = false
|
|
refreshing.value = false
|
|
hideLoadingIfNeeded()
|
|
if (res.data.success) {
|
|
const data = res.data.result
|
|
navList.value[0].name = `商品(${data.total || 0})`
|
|
goodsEmpty.value = !data.total
|
|
const records = (data.records || []).map((item: any) => ({
|
|
...item,
|
|
selected: false,
|
|
}))
|
|
if (goodsParams.value.pageNumber === 1) {
|
|
goodsList.value = records
|
|
} else {
|
|
goodsList.value.push(...records)
|
|
}
|
|
goodsFinished.value =
|
|
!records.length || goodsList.value.length >= (data.total || 0)
|
|
}
|
|
})
|
|
.catch(() => {
|
|
goodsLoading.value = false
|
|
refreshing.value = false
|
|
hideLoadingIfNeeded()
|
|
})
|
|
}
|
|
|
|
function fetchStoreList() {
|
|
if (storeLoading.value) return
|
|
storeLoading.value = true
|
|
uni.showLoading({ title: '加载中' })
|
|
getStoreCollection(storeParams.value, 'STORE')
|
|
.then((res) => {
|
|
storeLoading.value = false
|
|
refreshing.value = false
|
|
hideLoadingIfNeeded()
|
|
if (res.data.success) {
|
|
const data = res.data.result
|
|
navList.value[1].name = `店铺(${data.total || 0})`
|
|
storeEmpty.value = !data.total
|
|
const records = (data.records || []).map((item: any) => ({
|
|
...item,
|
|
selected: false,
|
|
}))
|
|
if (storeParams.value.pageNumber === 1) {
|
|
storeList.value = records
|
|
} else {
|
|
storeList.value.push(...records)
|
|
}
|
|
storeFinished.value =
|
|
!records.length || storeList.value.length >= (data.total || 0)
|
|
}
|
|
})
|
|
.catch(() => {
|
|
storeLoading.value = false
|
|
refreshing.value = false
|
|
hideLoadingIfNeeded()
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #f8f8f8;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #f8f8f8;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.tabs-wrap {
|
|
flex-shrink: 0;
|
|
background: #fff;
|
|
border-bottom: 1rpx solid #f0f0f0;
|
|
}
|
|
|
|
.list-scroll {
|
|
flex: 1;
|
|
height: 0;
|
|
min-height: 0;
|
|
}
|
|
|
|
.tab-content {
|
|
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.empty-box {
|
|
margin-top: 120rpx;
|
|
}
|
|
|
|
.collect-swipe,
|
|
:deep(.u-swipe-action),
|
|
:deep(.u-swipe-action-item),
|
|
:deep(.u-swipe-action-item__content) {
|
|
width: 100%;
|
|
}
|
|
|
|
:deep(.u-swipe-action-item__content) {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.goods {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 24rpx;
|
|
margin-top: 16rpx;
|
|
background: #fff;
|
|
|
|
.goods-intro {
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin-left: 24rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
min-height: 140rpx;
|
|
}
|
|
|
|
.goods-name {
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.goods-price {
|
|
margin-top: 16rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: var(--theme-light, #ff6b35);
|
|
}
|
|
}
|
|
|
|
.store {
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
width: calc(100% - 32rpx);
|
|
margin: 16rpx auto 0;
|
|
padding: 24rpx;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
}
|
|
|
|
.store-logo {
|
|
flex-shrink: 0;
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.store-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
margin: 0 20rpx;
|
|
}
|
|
|
|
.store-name-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
.store-name {
|
|
max-width: 360rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.store-tip {
|
|
margin-top: 10rpx;
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
}
|
|
|
|
.store-enter {
|
|
flex-shrink: 0;
|
|
padding: 12rpx 20rpx;
|
|
border-radius: 100px;
|
|
border: 1rpx solid var(--theme-light, #ff6b35);
|
|
color: var(--theme-light, #ff6b35);
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.load-status {
|
|
padding: 24rpx 0 8rpx;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
</style>
|