yogaApp/pages/product/collect.vue

<template>
	<view class="page">
		<!-- <view class="swiper-bg">
			<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" placeholder="请输入商品关键字" 
			bg-color="#FFFFFF" @cancel="cancel" @clear="clear">
			</uni-search-bar>
		</view> -->
		<!-- 商品列表 -->
		<view class="f-list">
			<view class="guess-section" v-if="goodsList.length>0">
				<view 
					v-for="(item, index) in goodsList" :key="index"
					class="guess-item"
					@click="navToList(item.id)"
				>
					<view class="image-wrapper imgload">
						<image :src="item.img" mode="aspectFill" lazy-load></image>
					</view>
					
					<view class="cnt">
						<view class="title">{{item.name}}</view>
						<view class="price">
							<text class="txt">￥</text>
							<text class="tint">{{item.int}}</text>
							<text class="tint">{{item.decimal}} / </text>
							<text class="txtt"> 天</text>
						</view>
					</view>
					 
					
				</view>
			</view>
			<view v-else class="skcon">
				<image v-if="loadStatus=='noMore'" class="skimg" src="@/static/image/nocollect.png" mode="aspectFill" ></image>
			</view>
			<uni-load-more v-if="loadStatus!=='noMore' || goodsList.length>0"   iconType="circle" :status="loadStatus" :content-text="contentText" />
		</view>
		
		<!-- 是否登录 -->
		<openlogin ref="loginId" @getPhoneNumber="getPhoneNumber"></openlogin>
		
		<!-- service 客服-->
		<service ref="serviceId" @goservice="goservice"></service>
		
		<!-- top 返回顶部-->
		<top ref="topId"></top>
		
	</view>
</template>

<script>
	import { myCache,getRemoteFile } from '../../utils/utils.js';
	import openlogin from "../components/openlogin.vue";
	import top from "../components/top.vue";
	import service from "../components/service.vue";
	export default {
		components: {
		  openlogin,top,service
		},
		data() {
			return {
				openId:"",
				phone:"",
				customer_id:"",
				searchValue:"",
				contentText: {
					contentdown: '查看更多',
					contentrefresh: '加载中',
					contentnomore: ''
				},
				goodsListall: [
				],
				goodsList: [
				],
				loadStatus:'more',
				page: {
					pageNum: 1,
					pageSize: 10
				}
			};
		},
		onLoad() {
			this.openId = myCache('openId');
			this.phone = myCache('phone');
			this.customer_id = myCache('customer_id');
			if(this.customer_id==""||this.customer_id=="0"){
				this.$refs.loginId.open();
			}
			this.loadStatus="loading";
			setTimeout(() => {
				this.loadStatus='noMore';
			}, 300);
			this.getList();
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.stopPullDownRefresh()
			},500);
		},
		// onReachBottom() {
		// 	console.log('onReachBottom');
		// 	 this.loadData();
		// },
		onShareAppMessage: function(options){
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
				title: "飞租客 全品类数码租赁平台 二手/租赁-消费品租赁-其他租赁", // 默认是小程序的名称(可以写slogan等)
				path: `/pages/index/index`,    // 默认是当前页面，必须是以‘/'开头的完整路径
				imageUrl: '/static/image/logo.png',  //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
				success: function(res){
					console.log("success",res)
					// 转发成功之后的回调
					if(res.errMsg == 'shareAppMessage:ok'){
						console.log("转发成功")
					}
				},
				fail: function(res){
					// 转发失败之后的回调
					if(res.errMsg == 'shareAppMessage:fail cancel'){
						// 用户取消转发
						console.log("用户取消转发")
					}
					else if(res.errMsg == 'shareAppMessage:fail'){
						// 转发失败，其中 detail message 为详细失败信息
						console.log("转发失败")
					}
				}
			};
		    return shareObj;
		},
		// 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			// 设置菜单中的转发按钮触发转发事件时的转发内容
			var shareObj = {
			  title: "飞租客 全品类数码租赁平台 二手/租赁-消费品租赁-其他租赁", // 默认是小程序的名称(可以写slogan等)
			  path: `/pages/index/index`,    // 默认是当前页面，必须是以‘/'开头的完整路径
			  imageUrl: '/static/image/logo.png',  //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
			  success: function(res){
				console.log("success",res)
			    // 转发成功之后的回调
			    if(res.errMsg == 'shareAppMessage:ok'){
					console.log("转发成功")
			    }
			  },
			  fail: function(){
			    // 转发失败之后的回调
			    if(res.errMsg == 'shareAppMessage:fail cancel'){
			      // 用户取消转发
				  console.log("用户取消转发")
			    }
				else if(res.errMsg == 'shareAppMessage:fail'){
			      // 转发失败，其中 detail message 为详细失败信息
				  console.log("转发失败")
			    }
			  }
			};
			return shareObj;
		},
		onPageScroll(e) {
			//调用子组件方法
			this.$refs.topId.topData(e.scrollTop);
		},
		methods: {
			goservice(val){
				console.log(val);
			},
			search(res) {
				// uni.showToast({
				// 	title: '搜索：' + res.value,
				// 	icon: 'none'
				// })
				this.searDo();
			},
			clear(res) {
				// uni.showToast({
				// 	title: 'clear事件，清除值为：' + res.value,
				// 	icon: 'none'
				// })
				this.searDo();
			},
			cancel(res) {
				// uni.showToast({
				// 	title: '点击取消，输入值为：' + res.value,
				// 	icon: 'none'
				// })
				this.searDo();
			},
			getPhoneNumber(e){
				if(e.customer_id){
					this.customer_id = e.customer_id
				}
				this.getmember();
			},
			async getList() {
				// console.log('customer_id2',this.customer_id)
				uni.showLoading({
					title: '数据加载中...'
				});
				const {data: res1} = await uni.$http.post('/platform/getFavorites',{buyerId:this.customer_id});
				this.loadStatus="noMore";
				this.contentText.contentnomore="亲，没有商品数据了...";
				if (res1&&res1.prolist) {
					// console.log(res1.prolist)
					// console.log(JSON.parse(res1.prolist));
					var retdata=JSON.parse(res1.prolist);
					if(retdata.count){
						uni.setNavigationBarTitle({
						  title: "我的收藏（"+retdata.count+"）",
						});
					}
					if(retdata.list&&retdata.list.length>0){
						var lists=[];
						retdata.list.forEach((cell)=>{
							// 价格
							var prices=cell.price?cell.price.split(','):[];
							var zqsel=cell.zuqi?parseInt((cell.zuqi.split(','))[0]):6;// 默认6
							var rate=1;
							if(zqsel==6){
								rate=parseFloat(cell.rate6);
							}
							else if(zqsel==9){
								rate=parseFloat(cell.rate9);
							} 
							else if(zqsel==12){
								rate=parseFloat(cell.rate12);
							}
							var price=Math.floor(parseFloat(prices.length>0?prices[0]:0)*rate-(cell.price_lgj?parseFloat(cell.price_lgj):0)).toFixed(0);
							price= (parseFloat(price)/365).toFixed(2);
							if(!price){
								price='0.00'
							}
							const { intPart, decimalPart } = this.splitNumber(price);
							var pics=cell.pics?cell.pics.split(','):[];
							var cells={
								id:cell.id,
								img:pics[0]?getRemoteFile(pics[0]):'',
								name:cell.title,
								int:intPart,
								decimal:'.'+decimalPart,
								sfss:cell.sfss
							};
							lists.push(cells);
						});
						this.goodsList=lists;
						this.goodsListall=lists;
						this.$forceUpdate();
					}
					
				}
			},
			searDo(){
				if(this.searchValue){
					this.goodsList=this.goodsListall.filter((p) => {
						return (p.sfss==1 && p.name && p.name.indexOf(this.searchValue) !== -1);
					});
					this.$forceUpdate();
				}
				else{
					this.goodsList=this.goodsListall;
					this.$forceUpdate();
				}
			},
			loadData(){
				// 加载
				if(this.loadStatus=="more") {
					this.loadStatus="loading";
					setTimeout(() => {
						this.getList();
					}, 300);
				}
			},
			splitNumber(num) {
				var nums=num.split('.');
				const intPart = nums[0]; // 获取整数部分
				const decimalPart = nums[1]; // 获取小数部分
				return { intPart, decimalPart };
			},
			navToList(id){
				uni.navigateTo({
					url: `/pages/product/detail?id=${id}`
				})
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding: 0;
		position: relative;
	}
	
	.skcon{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		.skimg{
			width: 338rpx;
			height: 300rpx;
			margin-top: 200rpx;
		}
	}
	.f-list {
		margin: 20rpx 20rpx 20rpx 20rpx;
		padding:20rpx 20rpx 20rpx 20rpx;
		background: #FFF;
		box-shadow:0 1px 3px 2px rgba(0, 0, 0, 0.03),inset 0 30px 15px #f5f5f5;
		border-radius: 20rpx;
		.guess-section{
			display:flex;
			flex-wrap:wrap;
			padding: 0;
			background: #fff;
			.guess-item{
				display:flex;
				flex-direction: row;
				width: 100%;
				padding: 15rpx 0;
				margin-bottom: 15rpx;
				border-bottom: 1rpx solid #eee;
			}
			.cnt{
				display: flex;
				flex: 1;
				flex-direction: column;
				width: 100%;
				position: relative;
			}
			.image-wrapper{
				width: 220rpx;
				height: 220rpx;
				border-radius: 6rpx;
				overflow: hidden;
				margin-right: 20rpx;
				image{
					width: 100%;
					height: 100%;
					opacity: 1;
				}
			}
			.title{
				line-height: 36rpx;
				color: #000000;
				font-size: 28rpx;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}
			.price{
				line-height: 1;
				color: #1492e7;
				.txt{
					font-size: 22rpx;
				}
				.tint{
					font-size: 28rpx;
					font-weight: 600;
				}
				.txtt{
					font-size: 20rpx;
					margin-left: 7rpx;
				}
			}
		}
	}
</style>