shop-uniapp-240426/pages/collect/collect.vue

<template>
	<view class="collect">
		<u-navbar
			:title="$t('page.collect.title')"
			:safeAreaInsetTop="false"
			placeholder
			@leftClick="leftClick"
			>
		</u-navbar>
		
		<view class="list" v-if="list.length">
			
			<view class="item" 
			v-for="(item, index) in list"
			v-if="item.shoplist"
			:key="index">
				<view class="top-info" @click="toProductDetail(item.shoplist.id)">
					<view class="left-img">
						<image
					mode="aspectFill" :src="item.shoplist.image ? item.shoplist.image.split(',')[0] : ''" alt="" />
					</view>
					<view class="right-text">
						<view class="title">
							<u--text :lines="2" :text="item.shoplist.title"></u--text>
						</view>
						<view class="price">
							{{ item.shoplist.price }}
						</view>
					</view>
				</view>
				<view class="bottom-info">
					<view class="date">
						{{ item.createTime }}
						<!-- <uni-dateformat :date="item.shoplist.date" format="yyyy-MM-dd hh:mm"></uni-dateformat> -->
					</view>
					<view class="btn">
						<button class="delete" @click="del(item.shoplist.id)">{{ $t('page.collect.detele') }}</button>
					</view>
				</view>
			</view>
			
		</view>
		
		<view v-else class="no-product">
			<view class="box">
				<view class="no-product-title">{{ $t('page.cart.none-product') }}</view>
				<view @click="toHome()" class="to-home">{{ $t('page.cart.stroll')}}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list : [
					{
						price : '199.0',
						oldPrice : '299.0',
						date : new Date('2024-04-25 00:46').getTime(),
						title : 'Huawei Enjoy 70/ ProHuawei Enjoy 70 Pro/Huawei Enjoy 70 Pro',
					}
				]
			};
		},
		onShow() {
			this.getData()
		},
		methods : {
			getData(){
				this.request('collectionPage', {}, {
					"pageSize":999,
					"currentPage": 0
				})
				.then(res => {
					if(res.code == 200){
						let arr = []
						res.result.records.forEach(n => {
							if(n.shoplist){
								arr.push(n)
							}
						})
						this.list = arr
					}
				})
			},
			toProductDetail(shop_id) {
				uni.navigateTo({
					url: '/pages/productDetail/productDetail?id=' + shop_id
				})
			},
			del(shopId){
				this.request('collectionShop', {}, {
					shopId
				})
				.then(res => {
					if(res.code == 200){
						this.getData()
						uni.$u.toast(this.$t('success-operation'))
					}
				})
			},
			leftClick(){
				uni.switchTab({
					url: '/pages/user/user'
				})
			},
			toHome(){
				uni.switchTab({
					url: '/pages/home/home'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.collect{
	.list{
		.item{
			background-color: #fff;
			margin-top: 10px;
			.top-info{
				display: flex;
				width: 100%;
				box-sizing: border-box;
				padding: 20px;
				.left-img{
					flex: 1;
					width: 170px;
					height: 20vw;
					image{
						width: 100%;
						height: 100%;
					}
				}
				.right-text{
					flex: 3;
					padding-left: 10px;
					.title{
						font-size: 28rpx;
						margin-bottom: 5px;
					}
					.price{
						font-size: 39rpx;
						padding-right: 8px;
						color: #E01717;
					}
				}
			}
			.bottom-info{
				border-top: 1px solid #00000033;
				padding: 10px 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.date{
					font-size: 13px;
					color: #777;
				}
				.btn{
					.delete{
						border-radius: 5px;
						height: 30px;
						font-size: 13px;
						line-height: 30px;
					}
				}
			}
		}
	}
}
.no-product {
	height: calc(100vh - 44px);
	display: flex;
	justify-content: center;

	.box {
		margin-top: 400rpx;
		font-size: 26rpx;
		text-align: center;

		.to-home {
			padding: 20rpx 140rpx;
			border: 1px solid #ccc;
			border-radius: 5px;
			text-align: center;
			margin: 20rpx 0px;
		}
	}
}
</style>