feat: 浏览记录

mer_uniapp/api/user.js

@@ -511,6 +511,13 @@ export function browseRecordApi() {
   return request.get("user/center/browse/record");
 }
 
+
+/*
+ * 足迹记录2
+ * */
+export function browseRecordApiv2(data) {
+  return request.get("user/center/browse/store", data);
+}
 /*
  * 我的经验
  * */

mer_uniapp/pages/goods/browsing_history/index.vue

@@ -1,47 +1,29 @@
 <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 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><text>24分钟</text>
 						</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 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>
@@ -58,13 +40,13 @@
 	// +----------------------------------------------------------------------
 	import emptyPage from '@/components/emptyPage.vue'
 	import {
-		browseRecordApi,
+		browseRecordApiv2,
 		historyDelete,
 		historyBatchDelete,
 		historyBatchCollect
 	} from '@/api/user.js'
 	import {
-    goProductDetail
+		goProductDetail
 	} from '@/libs/order.js'
 	import {
 		mapGetters
@@ -85,22 +67,68 @@
 				allArr: [],
 				total: 0,
 				theme: app.globalData.theme,
-				loading: true
+				loading: true,
+				isRefreshing: false,
+				page: 1,
+				isEnd:false,
+				lastBrowseTag:{
+					1:'刚刚浏览',
+					2:'一天前测览',
+					3:'三天前浏览',
+					4:'一周前浏览',
+					5:'一个月前浏览',
+					6:'一年前浏览'
+				}
 			}
 		},
 		onLoad() {
-			this.getList();
+			// 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 = [];
-				browseRecordApi().then(({
+				browseRecordApiv2().then(({
 					data
 				}) => {
 					this.list = data;
-				    data.map(item => {
+					data.map(item => {
 						this.total += item.list.length;
-						item.date = item.date.slice(5, 7)+'月'+item.date.slice(8, 10)+'日' ;
+						item.date = item.date.slice(5, 7) + '月' + item.date.slice(8, 10) + '日';
 					})
 					this.loading = false;
 				}).catch(err => {
@@ -111,8 +139,8 @@
 				});
 			},
 			goPage(item) {
-				if(!item.isShow) return;
-        goProductDetail(item.productId, 0,'');
+				if (!item.isShow) return;
+				goProductDetail(item.productId, 0, '');
 			}
 		},
 		// 滚动监听
@@ -124,9 +152,10 @@
 </script>
 
 <style lang="scss" scoped>
-	.pictrue{
+	.pictrue {
 		position: relative;
 	}
+
 	page {
 		background: #ffffff;
 	}
@@ -152,7 +181,7 @@
 			}
 		}
 
-	.list {
+		.list {
 			margin-top: 20rpx;
 
 			.item_time {
@@ -282,8 +311,8 @@
 					position: absolute;
 					top: 0;
 					right: 0;
-			}
 				}
+			}
 		}
 	}
 
@@ -318,7 +347,44 @@
 			border-color: var(--view-theme);
 		}
 	}
+
 	.empty-box {
 		margin-top: 60%;
 	}
-</style>
+	.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>

mer_uniapp/pages/goods/browsing_history/index_copy.vue

@@ -0,0 +1,324 @@
+<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>