baiyuchengpin/components/likeProduct.vue

<template>
   <view>
		<view class="like-title" v-show="list &&list.length > 0">
			<!-- <image src="https://jnlzjk-1323137866.cos.ap-chongqing.myqcloud.com/shop/images/like.png" mode=""></image> -->
			<text class="text">猜你喜欢</text>
		</view>
		<view class="like-list">
			<view class="item" v-for="(item,index) in list" :key="index" @click="showProduct(item)">
				<view class="img-box">
					<image class="img" :src="item.image" mode="aspectFill"></image>
					<view class="tag-row" v-if="item.tagList && item.tagList.length > 0">
						<text class="tag-chip" v-for="(t, i) in item.tagList" :key="i">{{ t }}</text>
					</view>
				</view>
				<view class="info-box">
					<view class="title ellipsis2">{{ item.productName }}</view>
					<view class="price-box">
						<view class="now">
							<text class="unit">¥</text>
							<text class="num">{{item.price.toFixed(2)}}</text>
							<text class="numOld" v-if="item.otPrice != null">原价¥{{item.otPrice.toFixed(2)}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<Loading :loaded="loaded" :loading="loading"></Loading>
   </view>
</template>

<script>
  import {getGoodsProducts} from '@/api/product'
  import {getUserInfo} from '@/api/user'
  import Loading from "@/components/Loading";
  export default {
	components: {Loading },
    name: "likeProduct",
	data() {
		return {
			page:{
				page: 1,
				pageSize: 10
			},
			total:0,
			list:[],
			loaded: false,
			loading: false,
			userinfoa:[],
			isuser:false,
		};
	},
	created() {
	},
	mounted() {
		this.getGoodsProducts();
		if(uni.getStorageSync('AppToken')){
			this.getUserInfos()
		}else{
			this.isuser=true
		}
	},
	watch: {
		UserInfo() {
		    return uni.getStorageSync('AppToken')
		}
	},
	methods: {
		getUserInfos(){
			getUserInfo().then(res => {
					if(res.code==200){
						if(res.user!=null){
							// if(res.user.isPromoter==null||res.user.isPromoter==0){
							// 	this.tuiModalControl=true
							// }
							this.userinfoa=res.user
							console.log(this.userinfoa.isShow,78787)
						}
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
					}
				},
				rej => {}
			);
		},
		getGoodsProducts(){
			console.log(1)
			var that=this;
			if (that.loaded == true || that.loading == true) return;
			that.loading = true;
			uni.showLoading({
				title:"加载中..."
			})
			getGoodsProducts(that.page).then(
				res => {
					if(res.code==200){
						that.total=res.data.total;
						that.list.push.apply(that.list, res.data.list);
						that.loading = false;
						that.loaded = that.list.length<that.total?false:true;
						that.page.page = that.page.page + 1;
						uni.hideLoading()
					}
				},
				err => {
					uni.hideLoading()
					uni.showToast({
						title: err.msg ,
						icon: 'none',
						duration: 2000
					});
				}
			);
		},
		showProduct(item){
			uni.navigateTo({
				url: '/pages/shopping/productDetails?productId='+item.productId
			})
		},
	}
 
  };
</script>
<style lang="scss">
	.like-title{
		display: flex;
		align-items: center;
		justify-content: left;
		padding-bottom:24rpx;
		image{
			width: 37upx;
			height: 37upx;
			margin-right: 20upx;
		}
		.text{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 40rpx;
			color: #222222;
			line-height: 56rpx;
			color: #111111;
		}
	}
	.like-list{
		display: flex;
		flex-direction: column;
		//flex-wrap: wrap;
		.item{
			//margin-right: 20rpx;
			margin-bottom: 20rpx;
			//width: 345rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
			border-radius: 20rpx;
			overflow: hidden;
			// &:nth-child(2n) {
			// 	margin-right: 0;
			// }
			.img-box{
				width: 100%;
				height: 394rpx;
				position: relative;
				image{
					width: 100%;
					height: 100%;
				}
				.tag-row {
					position: absolute;
					bottom:0;
					display: flex;
					flex-wrap: wrap;
					gap: 12rpx;
					padding: 0 12rpx;
					margin-bottom: 12rpx;
				}
				.tag-chip {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #AA4726;
					line-height: 42rpx;
					background: #FFF4F1;
					padding: 4rpx 12rpx;
					border-radius: 6rpx;
				}
			}
			
			.info-box{
				box-sizing: border-box;
				//height: 182upx;
				padding: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.title{
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #111111;
					line-height: 50rpx;
				}
				.price-box{
					margin-top: 8rpx;
					display: flex;
					align-items: flex-end;
					.now{
						display: flex;
						align-items: baseline;
						margin-right: 20upx;
						.unit{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #FF233C;
							
							margin-right: 4upx;
						}
						.num{
							font-size: 44rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #FF233C;
							
						}
						.numOld{
							margin-left: 12rpx;
							font-size: 28rpx;
							color: #999;
							text-decoration: line-through;
						}
					}
					.old{
						font-size: 26upx;
						font-family: PingFang SC;
						font-weight: 500;
						text-decoration: line-through;
						color: #BBBBBB;
						line-height: 1.1;
					}
				}
			}
		}
	}
</style>