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

<template>
	<view class="page-wrapper history" :data-theme="theme">
		<view class="history_count" style="padding-top: 20rpx;">
			
			<scroll-view scroll-y refresher-enabled :refresher-triggered="isRefreshing" @refresherrefresh="onRefresh"
				@scrolltolower="onLoadMore">
				<!-- 数据列表 -->
				<view class="his-item"  v-for="item in list" @click="toStore(item)">
					<img :src="item.avatar" alt="" />
					<view class="item-info-box">
						<view class="item-name">
							<text>{{item.merName}}</text>
							<text class="buy-count">买过{{item.buyCount}}次</text>
						</view>
						<view class="item-info">
							<text class="mr10 score">⭐️ {{item.starLevel}}分</text><text class="mr10">{{lastBrowseTag[item.lastBrowseTag]}}</text><text class="mr10">|</text><text class="mr10">{{item.distance}}km</text>
						</view>
					</view>
				</view>
				<!-- 加载提示 -->
				<view style="text-align: center;" v-if="isEnd">没有更多了...</view>
				<view style="text-align: center;" v-if="loading">加载中...</view>
				<block v-if="(list.length==0 && !loading ) ">
					<emptyPage title="暂无浏览记录~" :imgSrc="urlDomain+'crmebimage/presets/noJilu.png'"></emptyPage>
				</block>
			</scroll-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 {
		browseRecordApiv2,
		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,
				isRefreshing: false,
				page: 1,
				isEnd:false,
				lastBrowseTag:{
					1:'刚刚浏览',
					2:'一天前测览',
					3:'三天前浏览',
					4:'一周前浏览',
					5:'一个月前浏览',
					6:'一年前浏览'
				}
			}
		},
		onLoad() {
			// this.getList();
		this.getData(() => this.loading = false);
		},
		methods: {
			toStore(item) {
				uni.navigateTo({
					url: `/pages/merchant/home/index?merId=${item.merId}`
					// url: `/pages/goods_cate/index?id=${item.id}`
				})
			},
			onRefresh() { // 下拉刷新
				this.isRefreshing = true;
				this.page = 1;
				this.isEnd = false
				this.list = [];
				this.getData(() => this.isRefreshing = false);
			},
			onLoadMore() { // 上拉加载
				if (this.loading || this.isEnd) return;
				this.loading = true;
				this.page++;
				this.getData(() => this.loading = false);
			},
			getData(callback) {
				const send = {
					latitude: uni.getStorageSync('user_latitude'),
					longitude: uni.getStorageSync('user_longitude'),
					limit: 20,
					page: this.page
				}
				browseRecordApiv2(send).then(({data}) => {
					this.list.push(...data.list);
					if(this.list.length >= data.total) {
						this.isEnd = true
					}
					callback()
				})
			},
			getList() {
				this.list = [];
				browseRecordApiv2().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%;
	}
	.his-item{
		display: flex;
		align-items: center;
		padding: 20rpx;
		margin-bottom: 20rpx;
		img {
			width: 80rpx;
			height: 80rpx;
			padding-right: 20rpx;
		}
		.item-info-box{
			width: 100%;
			.item-name {
				font-size: 38rpx;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
			}
			.buy-count{
				font-size: 23rpx;
				margin-top: 5rpx;
				padding: 0 5rpx;
				border: 1rpx solid orange;
				color:  coral;
			}
			.score{
				color:  coral;
			}
			.item-info{
				font-size: 25rpx
			}
		}
	}
	.mr10{
		margin-right: 10rpx;
	}
</style>