nherp-shop/pages/views/user/allFootprint.vue

<template>
	<!-- 我的足迹 -->
	<view>
		<view class="mycollection" :class="['theme', themeObj.name]">
			<view class="cart_box">
				<view v-for="(item, index) in dataList" :key="index" class="cart_list">
					<view class="cover" @tap="jumpDetails(item,index)" >
						<image :src="item.url" mode="aspectFill"></image>
					</view>
					<view class="right">
						<view class="goods_name" @tap="jumpDetails(item,index)">
							{{item.goodsName}}
						</view>
						<view class="sku">
							<!-- 浏览时间：2020-08-05 14:15 -->
						</view>
						<view class="numbers">
							<view>
								<text  class="price" >￥{{item.price}}</text>
								<text>/{{item.unit}}</text>
							</view>
							
							<!-- <text class="browse">
								浏览：15
							</text> -->
						</view>
					</view>
				</view>
				<view class="daodi" v-if="dataList.length >= 5">—— 到底啦 ——</view>
				<nodata :colors="colors" title="暂无收藏" v-if="dataList.length == 0"></nodata>
			</view>
		</view>
		<loading v-if="isShow == true"></loading>
	</view>
</template>

<script>
	var app = getApp();
	import loading from "../../commponent/public/loading";

		import { getGoodsHistory } from '@/utils/auth';
	export default {
		data() {
			return {
				colors: '',
				themeObj: app.globalData.themeObj,
				dataList: getGoodsHistory(),
				isShow: true
			};
		},

		components: {
			loading,
		
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.setData({
				colors: app.globalData.newColor
			});
			setTimeout(() => {
				this.setData({
					isShow: false
				});
			}, 600);
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			jumpDetails(item,index) {
				//跳转详情
				uni.navigateTo({
					url: '/pages/views/goods/goodsDetails?id=' + item.id
				});
			},
		}
	};
</script>
<style scoped lang="scss">
	.mycollection {
		padding: 10upx 4%;
		padding-top: 90upx;
	}

	.cart_box {
		margin-top: 20upx;
		padding-bottom: 100upx;
	}

	.cart_list {
		width: 92vw;
		height: calc(22vw + 34upx);
		border-radius: 12upx;
		box-shadow: 0px 4upx 16upx rgba(0, 0, 0, .1);
		z-index: 4;
		overflow: hidden;
		border: 0;
		display: flex;
		align-items: center;
		position: relative;
		margin-bottom: 20upx;
	}

	.cart_list .checkbox-box {
		padding-left: 16upx;
		flex-shrink: 0;
		height: 22vw;
		margin-right: 16upx;
		align-items: center;
		position: relative;
		width: 50upx;
	}

	.cart_list .checkbox-box .checkbox {
		width: 28upx;
		height: 28upx;
		border-radius: 100%;
		border: solid 1upx;
		position: absolute;
		top: 50%;
		left: 20upx;
		display: flex;
		align-items: center;
		justify-content: center;
		transform: translateY(-50%);
	}

	.cart_list .checkbox-box .checkbox .on {
		width: 20upx;
		height: 20upx;
		border-radius: 100%;
		align-items: center;
	}

	.cart_list .cover {
		width: 22vw;
		height: 22vw;
		flex-shrink: 0;
		margin-left: 10upx;
		border-radius: 8upx;
		overflow: hidden;
		margin-right: 20upx;
	}

	.cart_list .cover image {
		width: 100%;
		height: 100%;
		display: block;
	}

	.daodi {
		text-align: center;
		font-size: 24upx;
		color: #ccc;
		margin-top: 30upx;
	}

	.right {
		height: 22vw;
		width: 100%;
		/* overflow: hidden; */
		display: flex;
		flex-wrap: wrap;
		padding-right: 15upx;
		position: relative;
	}

	.right .goods_name {
		width: 100%;
		font-size: 24upx;
		line-height: 34upx;
		max-height: 68upx;
		color: #333;
		overflow: hidden;
		font-weight: bold;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.sku {
		font-size: 22upx;
		height: 50upx;
		line-height: 50upx;
		color: #a7a7a7;
		margin-bottom: 40upx;
	}

	.numbers {
		position: absolute;
		width: 100%;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 50upx;
		bottom: -5upx;
		.browse{
			font-size: 24upx;
			color: #999;
			margin-right: 20upx;
		}
	}

	.numbers .price {
		font-size: 30upx;
		line-height: 50upx;
		color: $mycolor;
	}

	.numbers .right_btn {
		display: flex;
		justify-content: center;
		align-items: flex-end;
		margin-right: 20upx;
	}

	.right_btn .sub {
		width: 40upx;
		height: 40upx;
		font-size: 40upx;
		background-color: #f3f3f3;
		border-radius: 4upx;
		text-align: center;
		line-height: 40upx;
	}

	.right_btn .sub:active {
		background-color: #f8f8f8;
	}

	.right_btn .input {
		width: 50upx;
		height: 50upx;
		margin: 0 8upx;
		background-color: #f3f3f3;
	}

	.right_btn .input input {
		width: 50upx;
		height: 50upx;
		display: flex;
		font-size: 22upx;
		text-align: center;
		align-items: center;
		justify-content: center;
	}

	.right_btn .add {
		width: 40upx;
		height: 40upx;
		font-size: 40upx;
		background-color: #f3f3f3;
		border-radius: 4upx;
		text-align: center;
		line-height: 40upx;
	}

	.right_btn .add:active {
		background-color: #f8f8f8;
	}

	.del_mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -21;
	}

	.dask_del {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .5);
		z-index: -20;
		display: flex;
		align-items: center;
		opacity: 0;
		transition: all 0.3s;
	}

	.dask_del .del,
	.cencal {
		width: 100upx;
		height: 100upx;
		display: flex;
		justify-content: center;
		line-height: 100upx;
		border-radius: 100%;
		text-align: center;
		font-size: 24upx;
		background: linear-gradient(#FF5D39, #FFAF48);
		color: #ffffff;
		font-weight: 500;
		margin: 0 auto;
	}

	.dask_del text:active {
		opacity: 0.9;
	}

	.cencal {
		background: linear-gradient(#FFE846, #FFCD43);
	}
</style>