ydd_front/mer_uniapp/pages/goods/browsing_history/index.vue

<template>
	<view class="page-wrapper history" :data-theme="theme">
		<view class="history_count">
			<block v-if="list.length>0">
				<view class="history_header acea-row">
					<text>共{{total}}条，最多为您保存100条</text>
				</view>
				<view class="list" v-for="(item,index) in list">
					<view class="item_time">
						<view>{{item.date}}</view>
					</view>
					<view class="item_main acea-row">
						<view class="item acea-row" :class="{gary :(!itemn.isDel && itemn.isShow ==1) }"
							v-for="(itemn,indexn) in item.list">
							<view class="item item_count" @click="goPage(itemn)">
								<view class="pictrue">
									<easy-loadimage class="easy-img" mode="widthFix" :image-src="itemn.image">
									</easy-loadimage>
									<view v-if="item.activityStyle" :style="{ backgroundImage: `url(${item.activityStyle})` }" class="border-picture"></view>
								</view>
								<view class="info">
									<view class="msg">
										<block v-if="!itemn.isDel && itemn.isShow">
											<view class="price line2"><text></text>￥{{itemn.price}}</view>
										</block>
										<block v-else-if="itemn.isDel">
											<view class="tips">该商品已删除</view>
										</block>
										<block v-else>
											<view class="tips">该商品已下架</view>
										</block>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<block v-if="(list.length==0 && !loading ) " >
				<emptyPage title="暂无浏览记录~" :imgSrc="urlDomain+'crmebimage/presets/noJilu.png'"></emptyPage>
			</block>
			<view class='loadingicon acea-row row-center-wrapper'>
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>
			</view>
		</view>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2025 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import emptyPage from '@/components/emptyPage.vue'
	import {
		browseRecordApi,
		historyDelete,
		historyBatchDelete,
		historyBatchCollect
	} from '@/api/user.js'
	import {
    goProductDetail
	} from '@/libs/order.js'
	import {
		mapGetters
	} from "vuex";
	import animationType from '@/utils/animationType.js'
	import easyLoadimage from '@/components/base/easy-loadimage.vue';
	let app = getApp();
	export default {
		components: {
			emptyPage,
			easyLoadimage
		},
		computed: mapGetters(['uid', 'globalData']),
		data() {
			return {
				urlDomain: this.$Cache.get("imgHost"),
				list: [],
				allArr: [],
				total: 0,
				theme: app.globalData.theme,
				loading: true
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			getList() {
				this.list = [];
				browseRecordApi().then(({
					data
				}) => {
					this.list = data;
				    data.map(item => {
						this.total += item.list.length;
						item.date = item.date.slice(5, 7)+'月'+item.date.slice(8, 10)+'日' ;
					})
					this.loading = false;
				}).catch(err => {
					this.loading = false;
					return this.$util.Tips({
						title: err
					});
				});
			},
			goPage(item) {
				if(!item.isShow) return;
        goProductDetail(item.productId, 0,'');
			}
		},
		// 滚动监听
		onPageScroll(e) {
			// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
			uni.$emit('scroll');
		}
	}
</script>

<style lang="scss" scoped>
	.pictrue{
		position: relative;
	}
	page {
		background: #ffffff;
	}

	.history {
		margin-bottom: 96rpx;

		.history_count {
			padding: 0 30rpx;
		}

		.history_header {
			justify-content: space-between;
			margin: 30rpx 0;

			text {
				font-size: 26rpx;
				color: #666666;
			}

			.text {
				color: var(--view-theme);
			}
		}

	.list {
			margin-top: 20rpx;

			.item_time {
				font-size: 36rpx;
				color: #282828;
				font-weight: bold;
				display: flex;
				align-items: center;
			}

			.item_main {
				margin-top: 30rpx;
			}
		}

		.item {
			width: 217rpx;
			border-radius: 16rpx;
			margin: 0 20rpx 20rpx 0;
			position: relative;

			&:nth-child(3n) {
				margin-right: 0;
			}

			/deep/image,
			/deep/.easy-loadimage,
			uni-image {
				width: 217rpx;
				height: 217rpx;
				border-radius: 16rpx;
			}

			.info {
				margin-top: 20rpx;
				color: var(--view-priceColor);
				font-size: 24rpx;
			}
		}
	}

	/deep/.loadfail-img,
	.easy-img {
		width: 217rpx;
		height: 217rpx;
		border-radius: 16rpx;
		display: block;
	}

	.item_time .checkbox .iconfont {
		font-size: 38rpx;
		color: #999999;
		margin-right: 10rpx;

		&.icon-xuanzhong1 {
			color: var(--view-theme);
		}
	}

	.item_main .checkbox .iconfont {
		font-size: 40rpx;
		color: #DEDEDE;
		position: absolute;
		right: 12rpx;
		top: 12rpx;
		z-index: 10;
		border-radius: 100%;

		&.icon-weixuanzhong {
			&::after {
				content: "";
				display: block;
				width: 36rpx;
				height: 36rpx;
				background: rgba(0, 0, 0, .38);
				position: absolute;
				top: 2rpx;
				left: 2rpx;
				border-radius: 100%;
				border: 1rpx solid #DEDEDE;
			}
		}
	}

	.history .item .icon-xuanzhong1 {
		color: var(--view-theme);
	}

	.history .footer {
		z-index: 99;
		width: 100%;
		height: 96rpx;
		background-color: #ffffff;
		position: fixed;
		padding: 0 20rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #eee;
		bottom: var(--window-bottom);
	}

	.area-edit {
		justify-content: center;

		.area-item {
			width: 50%;
			text-align: center;
			position: relative;
			align-items: center;
			color: #333333;

			.text {
				position: relative;
				top: -1px;
			}

			.iconfont {
				color: #333333;
			}

			&:nth-child(1) {
				&::after {
					content: '';
					display: inline-block;
					width: 2rpx;
					height: 42rpx;
					background: #CCCCCC;
					position: absolute;
					top: 0;
					right: 0;
			}
				}
		}
	}

	.history .footer .checkAll {
		font-size: 28rpx;
		color: #282828;
		margin-left: 16rpx;
	}

	.allcheckbox .iconfont {
		margin-right: 11px;
		font-size: 40rpx;
		color: #cccccc;
	}

	.allcheckbox .icon-xuanzhong1 {
		color: var(--view-theme);
	}

	.history .footer .button .bnt {
		font-size: 28rpx;
		color: #999;
		border-radius: 50rpx;
		border: 1px solid #999;
		width: 160rpx;
		height: 60rpx;
		text-align: center;
		line-height: 60rpx;

		&.collect_btn {
			color: var(--view-theme);
			border-color: var(--view-theme);
		}
	}
	.empty-box {
		margin-top: 60%;
	}
</style>