pupil/components/productsBtn/productsBtn.vue

<template>
	<view>
		<view class="products_box">
			<u-grid :border="false" col="2">
				<u-grid-item v-for="(item,index) in productList" :key="index">
					<u-image src="/static/products/sy_bb.png" width="354rpx" height="539rpx" :lazy-load="true">
					</u-image>
					<view class="bgContent" @click="toDetailPage(item)">
						<view>
							<u-image :src="imgUrl+item.cover" width="346rpx" height="320rpx" :lazy-load="true"
								@click="toDetailPage()">
							</u-image>
							<view class="img_tag">{{item.cate_name}}</view>
						</view>
						<view style="padding: 14rpx 24rpx 14rpx 16rpx;">
							<view class="title_box">
								<text class="title">{{item.name}}</text>
								<u-tag :text="item.tags" type="warning" shape="circle"></u-tag>
							</view>
							<view class="product_desc">
								{{item.title}}
							</view>
							<view class="releaseDate">
								<u-image src="/static/products/xp_icon_sjf.png" width="22rpx" height="22rpx"
									:lazy-load="true">
								</u-image>
								<text class="release">发布日期：</text>
								<text>{{item.create_time}}</text>
							</view>
						</view>
					</view>
					<u-button v-if="type==1" type="success" text="取消收藏" color="#0EBB5B" @click="cancelCollect(item)">
					</u-button>
					<u-button v-if="type==2" type="success" text="移除" color="#0EBB5B" @click="deleteProduct(item)">
					</u-button>
				</u-grid-item>
			</u-grid>
			<view style="font-size: 24rpx;color: #A3A3A3;text-align: center;padding: 26rpx 0;"
				v-if="type==1&&productList.length==0">
				暂无更多收藏记录</view>
			<view style="font-size: 24rpx;color: #A3A3A3;text-align: center;padding: 26rpx 0;"
				v-if="type==2&&productList.length==0">
				暂无更多浏览记录</view>
		</view>
	</view>
</template>

<script>
	import {
		dateFormatHistory
	} from '../../utills/date.js'
	export default {
		data() {
			return {
				productId: '',
				imgUrl: '',
				tagsArray: [],
				productList: [],
				content: '您确定移除吗?'
			}
		},
		props: {
			type: String
		},
		options: {
			styleIsolation: 'shared', // 解除样式隔离
		},
		created() {
			this.imgUrl = uni.getStorageSync('img_url')
			this.getHistoryOrCollection()
		},
		methods: {
			//获取历史记录
			getHistoryOrCollection() {
				this.$apiServe.getHistoryOrCollection(this.type).then(res => {
					let data = res.data.data
					console.log('浏览记录或收藏', res.data);
					if (data) {
						for (const item of data) {
							let tag = item.tags
							if (tag) {
								this.tagsArray = tag.split(',')
								item.tags = this.tagsArray[0]
							}
							item.create_time = dateFormatHistory(item.create_time)
						}
						this.productList = data
					}
				}).finally(_ => {

				})
			},
			//移除按钮
			deleteProduct(item) {
				var that = this
				uni.showModal({
					title: '提示',
					content: '你确定要移除吗',
					success: function(res) {
						if (res.confirm) {
							that.$apiServe.deleteHistoryOrCollection(item.id).then(res => {
								if (res.data.code == 1) {
									that.$toast.warn('移除成功')
								}
								that.getHistoryOrCollection()
							}).finally(_ => {})
						} else if (res.cancel) {
							that.$toast.warn('取消移除')
						}
					}
				})
			},
			//取消收藏按钮
			cancelCollect(item) {
				var that = this
				uni.showModal({
					title: '提示',
					content: '你确定要取消收藏吗',
					success: function(res) {
						if (res.confirm) {
							that.$apiServe.deleteHistoryOrCollection(item.id).then(res => {
								if (res.data.code == 1) {
									that.$toast.warn('取消收藏成功')
								}
								that.getHistoryOrCollection()
							}).finally(_ => {})
						} else if (res.cancel) {
							that.$toast.warn('取消操作')
						}
					}
				})
			},
			//点击图片跳转到详情页
			toDetailPage(item) {
				uni.navigateTo({
					url: '/pages/detail/productsDetail/productsDetail?id=' + item.product_id
				})
			}
		}
	}
</script>

<style lang="less">
	.u-modal__content {
		padding: 43rpx 104rpx !important;
		text-indent: 25rpx;
	}

	.u-button {
		width: 150rpx !important;
		height: 50rpx !important;
		background: #0EBB5B;
		border-radius: 10rpx !important;
		margin-top: 22rpx;
		margin-bottom: 50rpx;
	}

	.u-button__text {
		font-size: 24rpx !important;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 33px;
	}
</style>