321 lines
7.7 KiB
Vue
321 lines
7.7 KiB
Vue
<template>
|
||
<z-paging
|
||
ref="pagingRef"
|
||
v-model="prodOrShopList"
|
||
:paging-style="{'top': '0','background-color': '#f2f3f7'}"
|
||
:empty-view-text="`您还没有收藏过${ navStatus === 1 ? '店铺' : '商品' }`"
|
||
loading-more-no-more-text="没有更多了，看看别的吧"
|
||
empty-view-img="/static/empty-img/collect-empty.png"
|
||
@query="onQueryCollectData"
|
||
>
|
||
<view class="Mall4j page-my-collection">
|
||
<!-- tab -->
|
||
<view class="tab">
|
||
<view
|
||
:class="['item', navStatus === 0 ? 'active' : '']"
|
||
@tap="onSwitchNav(0)"
|
||
>
|
||
商品({{ prodCollectedNum }})
|
||
</view>
|
||
<view
|
||
:class="['item', navStatus === 1 ? 'active' : '']"
|
||
@tap="onSwitchNav(1)"
|
||
>
|
||
店铺({{ shopCollectedNum }})
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 产品列表 -->
|
||
<view
|
||
v-if="navStatus === 0 && prodOrShopList.length > 0"
|
||
class="line-prods"
|
||
>
|
||
<view
|
||
v-for="(item,index) in prodOrShopList"
|
||
:key="index"
|
||
class="item"
|
||
>
|
||
<view
|
||
class="img"
|
||
@tap="onToProdDetail(item.spuId, item.status)"
|
||
>
|
||
<img-show
|
||
:src="item.mainImgUrl"
|
||
img-mode="aspectFit"
|
||
/>
|
||
</view>
|
||
<view class="text-box">
|
||
<view
|
||
class="prod-info"
|
||
@tap="onToProdDetail(item.spuId, item.status)"
|
||
>
|
||
<view class="name">
|
||
{{ item.spuName }}
|
||
</view>
|
||
<view class="sku">
|
||
{{ item.sellingPoint }}
|
||
</view>
|
||
</view>
|
||
<view class="price-box">
|
||
<view
|
||
class="price"
|
||
@tap="onToProdDetail(item.spuId, item.status)"
|
||
>
|
||
<view class="symbol">
|
||
￥
|
||
</view>
|
||
<view class="big">
|
||
{{ wxs.parsePrice(item.priceFee)[0] }}
|
||
</view>
|
||
<view class="symbol">
|
||
.{{ wxs.parsePrice(item.priceFee)[1] }}
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="btn"
|
||
@tap="showDelPopup(item.spuId,'prod')"
|
||
>
|
||
取消收藏
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 店铺列表 -->
|
||
<view
|
||
v-if="navStatus === 1 && prodOrShopList.length > 0"
|
||
class="shop-list"
|
||
>
|
||
<view
|
||
v-for="(item,index) in prodOrShopList"
|
||
:key="index"
|
||
class="item"
|
||
>
|
||
<view
|
||
class="logo"
|
||
@tap="onToShopIndex(item)"
|
||
>
|
||
<image
|
||
v-if="item.shopLogo"
|
||
:src="util.addDomain(item.shopLogo)"
|
||
@error="prodOrShopList[index].shopLogo = ''"
|
||
/>
|
||
<image
|
||
v-else
|
||
src="@/package-activities/static/images/default-shop-logo.png"
|
||
/>
|
||
</view>
|
||
<view
|
||
class="text-box"
|
||
@tap="onToShopIndex(item)"
|
||
>
|
||
<view class="shop-name">
|
||
{{ item.shopName }}
|
||
</view>
|
||
<view class="focus">
|
||
<view
|
||
v-if="item.type === 1"
|
||
class="self"
|
||
>
|
||
自营
|
||
</view>
|
||
<view class="number">
|
||
关注人数：{{ wxs.parseCollectionNumber(item.collectionNum) }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view
|
||
class="del"
|
||
@tap="showDelPopup(item.shopId, 'shop')"
|
||
>
|
||
取消收藏
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 取消收藏确认弹窗 -->
|
||
<confirm-pop
|
||
:show-pop="showPop"
|
||
:pop-content="popContent"
|
||
@handle-pop-cancel="onPopCancel"
|
||
@handle-pop-confirm="onPopConfirm"
|
||
/>
|
||
</view>
|
||
</z-paging>
|
||
</template>
|
||
|
||
<script setup>
|
||
import util from '@/utils/util.js'
|
||
|
||
const wxs = number()
|
||
|
||
const showPop = ref(false) // 弹窗显隐
|
||
const navStatus = ref(0) // 0商品 1店铺
|
||
let selectItemId = null // 选中的item id
|
||
const popContent = reactive({
|
||
title: '是否确认取消收藏',
|
||
content: '商品取消收藏后将不容易被找到哦~'
|
||
})
|
||
|
||
onLoad(() => {
|
||
onGetNumberOfProdCollected()
|
||
onGetNumberOfShopCollected()
|
||
})
|
||
|
||
/**
|
||
* 切换nav
|
||
*/
|
||
const onSwitchNav = (nav) => {
|
||
navStatus.value = nav
|
||
popContent.content = nav === 0 ? '商品取消收藏后将不容易被找到哦~' : '店铺取消收藏后将不容易被找到哦~'
|
||
pagingRef.value.reload()
|
||
}
|
||
|
||
/**
|
||
* 获取商品收藏数量
|
||
*/
|
||
const prodCollectedNum = ref(0)
|
||
const onGetNumberOfProdCollected = () => {
|
||
http.request({
|
||
url: '/tmerclub_product/spu_collection/count',
|
||
method: 'GET'
|
||
}).then(res => {
|
||
prodCollectedNum.value = res
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 获取店铺收藏数量
|
||
*/
|
||
const shopCollectedNum = ref(0)
|
||
const onGetNumberOfShopCollected = () => {
|
||
http.request({
|
||
url: '/tmerclub_admin/user_collection_shop/count',
|
||
method: 'GET'
|
||
}).then(res => {
|
||
shopCollectedNum.value = res
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 请求 商品/店铺 收藏列表
|
||
*/
|
||
const pagingRef = ref(null)
|
||
const prodOrShopList = ref([])
|
||
const onQueryCollectData = (pageNum, pageSize) => {
|
||
let url = ''
|
||
if (navStatus.value === 0) {
|
||
url = '/tmerclub_product/spu_collection/page'
|
||
} else if (navStatus.value === 1) {
|
||
url = '/tmerclub_admin/user_collection_shop/page'
|
||
}
|
||
http.request({
|
||
url,
|
||
method: 'GET',
|
||
data: {
|
||
pageNum,
|
||
pageSize,
|
||
needActivity: 1 // 是否需要活动信息 1：需要 0：不需要
|
||
}
|
||
}).then(res => {
|
||
// 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
|
||
pagingRef.value.complete(res.list)
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 取消收藏
|
||
*/
|
||
const onCancelCollect = () => {
|
||
let url = ''
|
||
selectItemId = String(selectItemId)
|
||
if (navStatus.value === 0) {
|
||
url = '/tmerclub_product/spu_collection/add_or_cancel'
|
||
} else if (navStatus.value === 1) {
|
||
url = '/tmerclub_admin/user_collection_shop/add_or_cancel'
|
||
}
|
||
http.request({
|
||
url,
|
||
method: 'POST',
|
||
data: selectItemId
|
||
}).then(() => {
|
||
showPop.value = false
|
||
pagingRef.value.reload()
|
||
onGetNumberOfProdCollected()
|
||
onGetNumberOfShopCollected()
|
||
})
|
||
}
|
||
|
||
// 显示删除弹窗
|
||
const showDelPopup = (id) => {
|
||
selectItemId = id
|
||
showPop.value = true
|
||
}
|
||
|
||
/**
|
||
* 弹窗确认
|
||
*/
|
||
const onPopConfirm = () => {
|
||
onCancelCollect()
|
||
}
|
||
|
||
/**
|
||
* 弹窗取消事件
|
||
*/
|
||
const onPopCancel = () => {
|
||
showPop.value = false
|
||
}
|
||
|
||
/**
|
||
* 跳转到店铺首页
|
||
*/
|
||
const onToShopIndex = (shopInfo) => {
|
||
// shopStatus 店铺状态(-1:未开通 0: 停业中 1:营业中 2:平台下线 3:平台下线待审核)
|
||
if (shopInfo.shopStatus !== 1) {
|
||
uni.showToast({
|
||
title: '该店铺暂时无法访问',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
let url
|
||
if (shopInfo.renovationId) {
|
||
url = '/package-shop/shop-page/feature-index/feature-index?shopId=' + shopInfo.shopId + '&renovationId=' + shopInfo.renovationId
|
||
} else {
|
||
url = '/package-shop/shop-page/shop-index/shop-index?shopId=' + shopInfo.shopId
|
||
}
|
||
uni.navigateTo({
|
||
url
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 跳转到商品详情页
|
||
*/
|
||
const onToProdDetail = (spuId, status) => {
|
||
// status 商品状态 1:enable, 0:disable, -1:deleted
|
||
if (status === -1) {
|
||
uni.showToast({
|
||
title: '商品不存在',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
if (status === 0) {
|
||
uni.showToast({
|
||
title: '商品已被下架',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
uni.navigateTo({
|
||
url: '/pages/detail/detail?spuId=' + spuId
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@use "./my-collection.scss";
|
||
</style>
|