<template>
|
<view>
|
<view class="hdbj"></view>
|
<view class='collectionGoods' v-if="collectProductList.length"
|
style="background-color: #F5F5F5;min-height: 100vh;">
|
<!-- #ifdef H5 || MP-->
|
<view class='nav acea-row row-between-wrapper'>
|
<view>共收藏 <text class='num'>{{ totals }}</text></view>
|
<view class='administrate acea-row row-center-wrapper btn-operate' @click='manage'>
|
{{ footerswitch ? '管理' : '取消管理'}}
|
</view>
|
</view>
|
<!-- #endif -->
|
<view class="list">
|
<checkbox-group @change="checkboxChange" class="centent">
|
<view v-for="(item,index) in collectProductList" :key="index" class='item acea-row row-middle'>
|
<checkbox :value="item.id.toString()" :checked="item.checked" v-if="!footerswitch"
|
style="margin-right: 10rpx;" />
|
<navigator :url='"/pages/goods_details/index?id="+item.productId' hover-class='none'
|
class="acea-row">
|
<view class='pictrue'>
|
<image :src="item.image"></image>
|
</view>
|
<view>
|
<view class='name line1' style="margin-bottom: 0;white-space: normal">{{item.storeName}}</view>
|
<view class='money' style="display: none;">
|
<div class="price" v-if="item.payWay==2||item.payWay=='2'">
|
<span>¥{{item.price}}</span>
|
</div>
|
<div class="price" v-else-if="item.payWay==3||item.payWay=='3'"><span
|
class="color-green">{{item.careBeanNumber}}悦养豆</span></div>
|
|
<div class="price" v-else-if="item.payWay==1||item.payWay=='1'">
|
<span
|
v-if="getSelectPrice(item.price,item.careBeanNumber)>0">¥{{getSelectPrice(item.price,item.careBeanNumber)}}</span>
|
<span
|
v-if="getSelectPrice(item.price,item.careBeanNumber)>0&&item.careBeanNumber>0"
|
class="color-green">+</span>
|
<span v-if="item.careBeanNumber>0"
|
class="color-green">{{item.careBeanNumber}}悦养豆</span>
|
|
</div>
|
|
<text class='iconfont icon-shanchu' v-if="!footerswitch"
|
@click.stop="delCollection(item)"></text>
|
</view>
|
<!-- 商品外层默认显示的价格逻辑：
|
|
1.纯悦养豆支付
|
- 只显示悦养豆即可，字段是careBeanNumber
|
|
2.纯现金
|
- 只显示售价，字段是price
|
|
3.混合支付
|
- 理论上不存在售价为0的情况
|
- 最小悦养豆会存在0的情况
|
- 如果售价和最小悦养豆都 > 0 ，显示售价+CA悦养豆 - 如果售价=0,最小悦养豆大于0，如何显示（不存在售价为0的 售价为0的就不是混合支付了）
|
- 如果售价>0,最小悦养豆=0，显示售价
|
- 如果售价和最小悦养豆都=0，如何显示（不存在售价为0的 售价为0的就不是混合支付了） -->
|
</view>
|
</navigator>
|
</view>
|
</checkbox-group>
|
</view>
|
<view class='loadingicon acea-row row-center-wrapper'>
|
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
|
</view>
|
<view v-if="!footerswitch" class='footer acea-row row-between-wrapper'>
|
<view>
|
<checkbox-group @change="checkboxAllChange">
|
<checkbox value="all" :checked="!!isAllSelect" />
|
<text class='checkAll'>全选</text>
|
</checkbox-group>
|
</view>
|
<view class='button acea-row row-middle'>
|
<view>总计<text class="num">{{selectValue.length}}</text>条</view>
|
<form @submit="delCollectionAll" report-submit='true'>
|
<button class='bnt' formType="submit">
|
<!-- <text class='iconfont icon-shanchu'></text> -->移除</button>
|
</form>
|
</view>
|
</view>
|
</view>
|
<view class='noCommodity' v-else-if="!collectProductList.length && page > 1">
|
<view class='pictrue'>
|
暂无收藏商品
|
<!-- <image src='../static/noCollection.png'></image> -->
|
</view>
|
<recommend :pageName="'我的收藏'" :hostProduct="hostProduct"></recommend>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import BigNumber from 'bignumber.js';
|
import {
|
getCollectUserList,
|
getProductHot,
|
collectDelete
|
} from '@/api/store.js';
|
import {
|
mapGetters
|
} from "vuex";
|
import {
|
toLogin
|
} from '@/libs/login.js';
|
import recommend from '@/components/recommend';
|
import home from '@/components/home';
|
export default {
|
components: {
|
recommend,
|
home
|
},
|
data() {
|
return {
|
footerswitch: true,
|
hostProduct: [],
|
loadTitle: '加载更多',
|
loading: false,
|
loadend: false,
|
collectProductList: [],
|
limit: 8,
|
page: 1,
|
isAuto: false, //没有授权的不会自动授权
|
isShowAuth: false, //是否隐藏授权
|
hotScroll: false,
|
hotPage: 1,
|
hotLimit: 10,
|
isAllSelect: false, //全选
|
selectValue: [], //选中的数据
|
delBtnWidth: 80, //左滑默认宽度
|
totals: 0,
|
careBeanRate: 0,
|
loginBackFn:null,
|
};
|
},
|
computed: mapGetters(['isLogin']),
|
onLoad() {
|
if (this.isLogin) {
|
let that = this;
|
if (that.$store.getters.careBeanRate) {
|
that.$nextTick(() => {
|
that.$set(that, 'careBeanRate', that.$store.getters.careBeanRate)
|
})
|
}
|
uni.$once('updateCareBeanRate', () => {
|
that.$nextTick(() => {
|
that.$set(that, 'careBeanRate', that.$store.getters.careBeanRate)
|
})
|
});
|
}
|
},
|
onShow() {
|
let that = this;
|
let pages = getCurrentPages(),
|
currPage = pages[pages.length - 1];
|
console.log('------------------page onShow start-----------------');
|
console.log('route', currPage.route);
|
console.log('options', currPage.options);
|
console.log('------------------page onShow end-----------------');
|
|
this.loadend = false;
|
this.page = 1;
|
this.collectProductList = [];
|
this.selectValue = []
|
this.footerswitch = true;
|
if (that.$store.getters.isBelong) {
|
that.belongInfoReadyFn({
|
isRegister: false
|
})
|
} else {
|
uni.$once('BELONG_READY', that.belongInfoReadyFn);
|
}
|
},
|
onHide() {
|
let that = this;
|
uni.$off('loginFlSuccess', that.registerFn);
|
uni.$off('BELONG_READY', that.belongInfoReadyFn);
|
},
|
methods: {
|
belongInfoReadyFn(data) {
|
let that = this;
|
if (!data.isRegister) {
|
that.checkLoginFn()
|
}
|
},
|
checkLoginFn() {
|
let that = this;
|
let pages = getCurrentPages(),
|
currPage = pages[pages.length - 1];
|
that.addTrack('yy_pageView', {
|
pageTitle_var: '我的收藏',
|
pagePath_var: currPage.$page.fullPath,
|
pageType_var: '我的收藏'
|
});
|
if (that.$store.getters.isLogin) {
|
that.onLoadFn()
|
} else {
|
toLogin(that);
|
}
|
that.loginBackFn = function() {
|
that.onLoadFn();
|
}
|
uni.$once('loginFlSuccess', that.registerFn);
|
},
|
registerFn() {
|
console.log('registerFn');
|
let that = this;
|
if (that.loginBackFn) {
|
that.loginBackFn();
|
}
|
that.loginBackFn = null;
|
},
|
onLoadFn: function() {
|
console.log('onLoadFn');
|
let that = this;
|
this.get_user_collect_product();
|
this.get_host_product();
|
},
|
// #ifdef MP
|
drawStart(e) {
|
var touch = e.touches[0];
|
this.startX = touch.clientX;
|
},
|
getSelectPrice(price, careBeanNumber) {
|
return BigNumber(price).minus(BigNumber(careBeanNumber).div(this.careBeanRate)).toFixed(2);
|
},
|
//触摸滑动
|
drawMove(e) {
|
var touch = e.touches[0];
|
var item = this.collectProductList[e.currentTarget.dataset.index];
|
var disX = this.startX - touch.clientX;
|
if (disX >= 20) {
|
if (disX > this.delBtnWidth) {
|
disX = this.delBtnWidth;
|
}
|
this.$set(this.collectProductList[e.currentTarget.dataset.index], 'right', disX);
|
} else {
|
this.$set(this.collectProductList[e.currentTarget.dataset.index], 'right', 0);
|
}
|
},
|
//触摸滑动结束
|
drawEnd(e) {
|
var item = this.collectProductList[e.currentTarget.dataset.index];
|
if (item.right >= this.delBtnWidth / 2) {
|
this.$set(this.collectProductList[e.currentTarget.dataset.index], 'right', this.delBtnWidth);
|
} else {
|
this.$set(this.collectProductList[e.currentTarget.dataset.index], 'right', 0);
|
}
|
},
|
// #endif
|
manage: function() {
|
this.footerswitch = !this.footerswitch;
|
},
|
|
checkboxChange: function(event) {
|
var items = this.collectProductList,
|
values = event.detail.value;
|
for (var i = 0, lenI = items.length; i < lenI; ++i) {
|
const item = items[i]
|
if (values.includes(item.id.toString())) {
|
this.$set(item, 'checked', true)
|
} else {
|
this.$set(item, 'checked', false)
|
}
|
}
|
this.selectValue = values;
|
this.isAllSelect = items.length === values.length;
|
},
|
checkboxAllChange: function(event) {
|
let value = event.detail.value;
|
if (value.length > 0) {
|
this.setAllSelectValue(1)
|
} else {
|
this.setAllSelectValue(0)
|
}
|
},
|
setAllSelectValue: function(status) {
|
let selectValue = [];
|
if (this.collectProductList.length > 0) {
|
this.collectProductList.map(item => {
|
if (status) {
|
this.$set(item, 'checked', true)
|
selectValue.push(item.id);
|
this.isAllSelect = true;
|
} else {
|
this.$set(item, 'checked', false)
|
this.isAllSelect = false;
|
}
|
});
|
this.selectValue = selectValue;
|
}
|
},
|
// 授权关闭
|
authColse: function(e) {
|
this.isShowAuth = e
|
},
|
/**
|
* 获取收藏产品
|
*/
|
get_user_collect_product: function() {
|
let that = this;
|
if (this.loading) return;
|
if (this.loadend) return;
|
that.loading = true;
|
that.loadTitle = "";
|
getCollectUserList({
|
page: that.page,
|
limit: that.limit
|
}).then(res => {
|
res.data.list.map(item => {
|
that.$set(item, 'right', 0);
|
});
|
that.totals = res.data.total;
|
let collectProductList = res.data.list;
|
let loadend = collectProductList.length < that.limit;
|
that.collectProductList = that.$util.SplitArray(collectProductList, that
|
.collectProductList);
|
that.$set(that, 'collectProductList', that.collectProductList);
|
if (that.collectProductList.length === 0) that.get_host_product();
|
that.loadend = loadend;
|
that.loadTitle = loadend ? '我也是有底线的' : '加载更多';
|
that.page = that.page + 1;
|
that.loading = false;
|
}).catch(err => {
|
that.loading = false;
|
that.loadTitle = "加载更多";
|
});
|
},
|
/**
|
* 取消收藏
|
*/
|
delCollection: function(item) {
|
this.selectValue = [item.id];
|
this.del();
|
},
|
delCollectionAll: function() {
|
if (!this.selectValue || this.selectValue.length == 0) return this.$util.Tips({
|
title: '请选择商品'
|
});
|
this.del();
|
},
|
del: function() {
|
let that = this;
|
let pages = getCurrentPages(),
|
currPage = pages[pages.length - 1];
|
let idArr = that.selectValue.concat([])
|
this.collectProductList.concat([]).forEach((item) => {
|
if (idArr.indexOf(item.id + '') >= 0) {
|
that.addTrack('yy_favoriteClick', {
|
'pageTitle_var': '我的收藏',
|
'pageType_var': '我的',
|
'pagePath_var': currPage.$page.fullPath,
|
'productID_var': item.id,
|
'productName_var': item.storeName,
|
'favoriteStatus_var': '取消收藏'
|
});
|
}
|
});
|
collectDelete({
|
ids: this.selectValue.join(',')
|
}).then(res => {
|
this.$util.Tips({
|
title: '取消收藏成功',
|
icon: 'success'
|
});
|
// this.collectProductList = this.collectProductList.filter(item=>item!==this.selectValue)
|
this.collectProductList = [];
|
this.loadend = false;
|
this.page = 1;
|
this.selectValue = []
|
this.get_user_collect_product();
|
}).catch(err => {
|
return this.$util.Tips({
|
title: (err&&err.message)?err.message:err
|
})
|
});
|
},
|
/**
|
* 获取我的推荐
|
*/
|
get_host_product: function() {
|
let that = this;
|
if (that.hotScroll) return
|
getProductHot(
|
that.hotPage,
|
that.hotLimit,
|
).then(res => {
|
that.hotPage++
|
that.hotScroll = res.data.list.length < that.hotLimit
|
that.hostProduct = that.hostProduct.concat(res.data.list)
|
});
|
}
|
},
|
/**
|
* 页面上拉触底事件的处理函数
|
*/
|
onReachBottom() {
|
this.get_user_collect_product();
|
this.get_host_product();
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.hdbj {
|
width: 100%;
|
height: 30rpx;
|
background-color: #f5f5f5;
|
z-index: 999999;
|
position: fixed;
|
top: 0;
|
}
|
|
.order-item {
|
width: 100%;
|
display: flex;
|
position: relative;
|
align-items: right;
|
flex-direction: row;
|
}
|
|
.remove {
|
width: 120rpx;
|
height: 100%;
|
background-color: $theme-color;
|
color: white;
|
position: absolute;
|
top: 0;
|
right: -160rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 24rpx;
|
}
|
|
.collectionGoods {
|
|
.nav {
|
width: 92%;
|
height: 90rpx;
|
background-color: #fff;
|
padding: 0 24rpx;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
font-size: 28rpx;
|
color: #979797;
|
position: fixed;
|
left: 30rpx;
|
z-index: 5;
|
top: 30rpx;
|
// border-bottom: 1px solid #EEEEEE;
|
border-radius: 14rpx;
|
|
text {
|
color: #000000;
|
font-weight: bold;
|
margin-left: 20rpx;
|
}
|
|
.btn-operate {
|
background-color: #FFE20E;
|
color: #000000;
|
border-radius: 8rpx;
|
padding: 8rpx 20rpx;
|
font-weight: bold;
|
}
|
}
|
|
.list {
|
padding: 120rpx 30rpx 30rpx 30rpx;
|
// margin-top: 90rpx;
|
|
.name {
|
width: 434rpx;
|
margin-bottom: 56rpx;
|
}
|
|
|
}
|
|
.centent {
|
/* #ifdef H5 || MP */
|
// background-color: #fff;
|
/* #endif */
|
border-radius: 14rpx;
|
margin-top: 20rpx;
|
|
.money {
|
color: #FF780D;
|
font-weight: bold;
|
display: flex;
|
justify-content: space-between;
|
|
text {
|
color: #979797;
|
}
|
}
|
|
.name {
|
font-weight: bold;
|
}
|
}
|
}
|
|
.collectionGoods .item {
|
background-color: #fff;
|
padding-left: 24rpx;
|
height: 180rpx;
|
margin-bottom: 20rpx;
|
border-radius: 14rpx;
|
|
::v-deep .uni-checkbox-input-checked {
|
background-color: #FFE20E !important;
|
color: #000000 !important;
|
border: 1px solid #FFE20E !important;
|
}
|
}
|
|
.collectionGoods .item .pictrue {
|
width: 130rpx;
|
height: 130rpx;
|
margin-right: 20rpx;
|
}
|
|
.collectionGoods .item .pictrue image {
|
width: 100%;
|
height: 100%;
|
border-radius: 14rpx;
|
}
|
|
.collectionGoods .item .text {
|
width: 535rpx;
|
height: 130rpx;
|
font-size: 28rpx;
|
color: #282828;
|
}
|
|
.collectionGoods .item .text .name {
|
width: 100%;
|
}
|
|
.collectionGoods .item .text .money {
|
font-size: 26rpx;
|
}
|
|
.collectionGoods .item .text .delete {
|
font-size: 26rpx;
|
color: #282828;
|
width: 144rpx;
|
height: 46rpx;
|
border: 1px solid #bbb;
|
border-radius: 4rpx;
|
text-align: center;
|
line-height: 46rpx;
|
}
|
|
.noCommodity {
|
background-color: #fff;
|
padding-top: 1rpx;
|
border-top: 0;
|
}
|
|
.noCommodity .pictrue {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.footer {
|
z-index: 9;
|
width: 100%;
|
height: 96rpx;
|
// background: linear-gradient(0deg, #dfff83, #a1ffc7);
|
background: linear-gradient(0deg, #F5F5F5, #FFFFFF);
|
// background-color: #fff;
|
position: fixed;
|
padding: 0 30rpx;
|
// box-sizing: border-box;
|
// border-top: 1rpx solid #eee;
|
// border-bottom: 1px solid #EEEEEE;
|
/* #ifdef H5 || MP */
|
bottom: 20rpx;
|
|
/* #endif */
|
/* #ifndef MP */
|
// bottom: 98rpx;
|
// bottom: calc(98rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
|
// bottom: calc(98rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
|
/* #endif */
|
::v-deep .uni-checkbox-input-checked {
|
background-color: #FFE20E !important;
|
color: #000000 !important;
|
border: 1px solid #FFE20E !important;
|
}
|
|
.checkAll {
|
font-size: 24rpx;
|
color: #282828;
|
margin-left: 16rpx;
|
}
|
|
.button {
|
|
.bnt {
|
font-size: 28rpx;
|
color: #fff;
|
border-radius: 16rpx;
|
width: 160rpx;
|
height: 80rpx;
|
text-align: center;
|
line-height: 80rpx;
|
margin-left: 20rpx;
|
background-color: #016DCC;
|
}
|
}
|
|
.num {
|
color: #FF780D;
|
padding: 0 10rpx;
|
}
|
}
|
</style>
|
