Homestay_manage_app/packageShang/pages/user/collect/collect.vue

<template>
	<view class="bg-drak" :class="[empty ? '' : 'padding-tb']">
		<!-- 空白页 -->
		<use-empty v-if="empty" e-style="round" tip="无收藏数据"></use-empty>

		<view v-else class="padding-lr" v-for="(item, index) in datas" :key="index">
			<view class="product border-radius-sm padding margin-bottom-sm bg-main" style="padding-bottom: 15rpx;">
				<view class="left" @click="togoods(item)">
					<image :src="item.goodsMainImageUrl" mode="aspectFill"></image>
				</view>
				<view class="margin-left-sm pos-r w-full">
					<text class="clamp-2" @click="togoods(item)">{{ item.goodsName }} </text>
					<view class="pos-a dflex-b price-box w-full">
						<text class="price padding-tb-sm" @click="togoods(item)">{{ item.goodsPrice }}</text>
						<view class="dflex-c ft-dark">
							<button class="btn no-border padding-0 fs-sm ft-dark" open-type="share" :id="item.goodsId">
								<view class="dflex-c fs-xs padding-tb-sm">
									<text class="iconfont iconfenxiang margin-left-xs"></text>
								</view>
							</button>
							<view @tap.stop="deleteCollect(item)" class="dflex-c margin-left-sm padding-tb-sm">
								<text class="iconfont iconlajitong-01 margin-left-xs"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 上拉加载更多 -->
		<use-loadmore v-if="!empty && hasmore" :type="loadmoreType"></use-loadmore>
		<!-- 置顶 -->
		<use-totop ref="usetop" bottom="150"></use-totop>

		<view v-if="!empty" class="fixed-top" @click="clear">
			<text class="iconfont iconlajitong-01 fs-xl"></text>
		</view>
	</view>
</template>

<script>
	import {
		collectlist,
		collectdelete,
		collectclear
	} from '../../../utils/api_user.js'
	import useEmpty from '../../../components/use-empty/use-empty.vue'
	import useLoadmore from '../../../components/use-loadmore/use-loadmore.vue'
	import useTotop from '../../../components/use-totop/use-totop.vue'
	const db = uniCloud.database();
	const _collect = 'usemall-member-collect'
	import { mapState } from 'vuex';
	export default {
		computed: {
			...mapState(['islogin', 'member'])
		},
		components:{
			useEmpty,
			useLoadmore,
			useTotop
		},
		data() {
			return {
				// 加载更多状态
				loadmoreType: 'nomore',
				// 数据源
				datas: [],
				empty: false,
				hasmore: 0,
				reqdata: {
					rows: 20,
					page: 1
				},
				scrollTop: 0,
			};
		},
		watch: {
			datas(e) {
				let empty = e.length === 0;
				if (this.empty !== empty) {
					this.empty = empty;
				}
			}
		},
		onShareAppMessage: function(ops) {
			let _this = this;
			console.log(_this.member)
			let mid = 0;
			if (_this.member && _this.member.id) {
				mid = _this.member.id;
			}

			let goods = _this.datas.find(x => x.goodsId == ops.target.id);
			let share_img = '';
			if (goods && goods.id > 0) {
				share_img = goods.share_img;
			}

			return {
				imageUrl: share_img,
				bgImgUrl: share_img, //[${_this.member.user_name}] 的
				title: `来自收藏夹`,
				path: `/pages/goods/goods?id=${ops.target.id}&mid=${mid}`,
				content: '大魏商城',
				desc: '大魏商城',
				success: function(res) {
					// 转发成功
					console.log(res);
					console.log('转发成功', JSON.stringify(res));
				},
				fail: function(res) {
					// 转发失败
					console.log('转发失败', JSON.stringify(res));
				}
			};
		},
		onPageScroll(e) {
			//this.scrollTop = e.scrollTop;
			this.$refs.usetop.change(e.scrollTop);
		},
		onShow() {
			this.loadData();
		},
		methods: {
			loadData() {
				let _self=this
				// const goodsTemp = db.collection('usemall-goods').getTemp();
				
				//收藏数据
				collectlist().then((res) => {
					if(res.success){
						let _historyDatas = [];
						res.data.list.forEach(x => {
							_historyDatas.push(x);
						});
						_self.datas = _historyDatas;
						if (_self.datas.length === 0) {
							_self.empty = true;
						}
						return
					}
					_self.$api.msg(res.msg);
				})
			},
			// 删除收藏
			deleteCollect(item) {
				let _this = this
				uni.showModal({
					title: '提示',
					content: '删除收藏',
					success: function(res) {
						if (res.confirm) {
							var data=item.goodsId
							collectdelete(data).then((res) => {
								if(res.success){
									_this.loadData();
									return
								}
								_this.$api.msg(res.msg);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 清空收藏
			clear() {
				let _this = this;
				uni.showModal({
					title: '提示',
					content: '清空收藏',
					success: function(res) {
						if (res.confirm) {
							collectclear().then((res) => {
								if(res.success){
									_this.datas = [];
									return
								}
								_this.$api.msg(res.msg);
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			togoods(item) {
				this.$api.togoods({
					id: item.goodsId
				});
			}
		}
	};
</script>

<style lang="scss">
	@import url('/packageShang/components/iconfont/iconfont.css');
	@import url('/packageShang/common/common.scss');
	page {
		background: $page-color-base;
	}

	.product {
		display: flex;

		.left {
			image {
				width: 180rpx;
				height: 180rpx;
			}
		}

		.price-box {
			bottom: -20rpx;
		}
	}
</style>