MeiMeiZhuan/pages/favorites/favorites.vue

<template>
	<view class="container">
		<!-- 空白页 -->
		<empty v-if="favoriteList.length < 1"></empty>
		<view class="favorites flex" v-for="ls in favoriteList" @click="toproduct(ls)">
			<view class="favorites_img"><image :src="ls.image"></image></view>
			<view class="favorites_list">
				<view class="favorites_name">{{ ls.store_name }}</view>
				<view class="favorites_peice flex">
					<view>
						<text >￥</text>
						<text style="font-size: 40rpx;">{{ ls.price }}</text>
					</view>
					<view @click.prevent.stop="del(ls.pid)">
						<image src="../../static/img/aixin.png"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import { getcollectList, delcollect } from '@/api/favorite.js';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
export default {
	components: {
		uniLoadMore,
		empty
	},
	data() {
		return {
			tabCurrentIndex: 0,
			favoriteList:[],
			delshow: false
		};
	},
	onLoad() {
		this.loadData();
	},
	methods: {
		onNavigationBarButtonTap(){
			if(this.delshow == false){
				this.delshow = true;
			}
			else{
				this.delshow = false;
			}
			
		},
		//获取收藏夹列表
		loadData() {
			let obj = this;
			getcollectList({
				page: '1',
				limit: '10'
			})
				.then(function(e) {
					obj.favoriteList = e.data;
					console.log(obj.favoriteList,9);
				})
				.catch(function(e) {
					console.log(e);
				});
		},
		//删除收藏夹商品
		del(item) {
			let obj = this;
			
			uni.showModal({
				title: '提示',
				content: '是否取消收藏该商品',
				success: e => {
					if (e.confirm) {
						delcollect({
							id: item,
						})
							.then(function(e) {
								uni.showToast({
									title: '已取消收藏',
									duration: 1500,
								});
								obj.loadData();
							})
							.catch(function(e) {
								console.log(e);
							});
					}
				}
			});
		},
		//跳转商品详情页
		toproduct(item) {
			let id = item;
			let type = 2;
			uni.navigateTo({
				// url: `/pages/product/product?id=${id}`
						url: '/pages/product/product?id=' + item.pid +'&type=' + type
			});
		}
		// //跳转忘记密码
		// forget() {
		// 	uni.navigateTo({
		// 		url: `/pages/public/forget`
		// 	});
		// },
		// // 后退
		// navBack() {
		// 	uni.navigateBack();
		// }
	}
};
</script>

<style lang="scss">
	
.uni-page-head-ft{
	margin-right: 10px !important;
}
page {
	height: 100%;
}
.del-btn{
	font-size: 30rpx;
}
%flex-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
%section {
	display: flex;
	justify-content: space-around;
	align-content: center;
	background: #fff;
	border-radius: 10rpx;
}
.container {
	height: 100%;
	background-color: $page-color-base;
	padding: 15rpx 0rpx;
	font-size: 28rpx;
}
.favorites {
	background-color: #ffffff;
	border-radius: 15rpx;
	margin: 15rpx 25rpx 25rpx 25rpx;
	padding: 25rpx 25rpx;
}
.favorites_img {
	width: 80px !important;
	height: 80px;
}
.favorites_img image {
	width: 100%;
	height: 100%;
}
.favorites_list {
	width: 70%;
	padding-left: 20rpx;
}
.icon_del {
	color: #999;
}
.favorites_name {
	font-size: 28rpx;
	overflow: hidden;
	line-height: 40rpx;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.favorites_peice {
	margin-top:45rpx;
	font-size: 30rpx;
	color: #FA2740;
	image{
		width: 30rpx;
		height: 30rpx;
	}
}
</style>