qzw_xcx/pages/myCenter/myCollect.vue

<template>
	<view>
		<van-tabs :active="active" @change="onChange">
		  <van-tab :name="1" title="酒店">
		  </van-tab>
		  <van-tab :name="2"  title="商品">
		  </van-tab>
		</van-tabs>
		<scroll-view  style="height: 95vh;" class="floor-list"
		  :scroll-top="scrollTop" scroll-y="true"  @scroll="scroll"  @scrolltoupper="upper" @scrolltolower="lower"
		   :refresher-enabled="false">
		  <view v-if="active == 1" @click="goitem(item)"  v-for="(item,index) in store_list" :key="index">
		  				  <van-cell :title="item.store_name" title-class="titlepadding">
		  					  <template slot="icon">
								  <image :src="pictureUrl+'/uploads/home/store/'+item.store_id+'/'+item.store_logo" style="border-radius: 50%;
								  width: 50upx;height: 50upx;vertical-align: middle;"></image>
		  					  </template>
		  				  </van-cell>
		  				  <view class="hotelcontent">
		  					 <view class="contentleft">
		  						 <image :src="pictureUrl+'/uploads/home/store/'+item.store_id+'/'+item.store_avatar" 
								 style="width: 100%;height: 100%;vertical-align: middle;"></image>
		  					  </view>
		  					  <view class="contentitle">
		  						  <view>{{item.store_name}}</view>
		  						  <view class="contentip">{{item.store_summary}}</view>
		  					  </view>
		  				  </view>
		  </view>
		  <view v-if="active == 2" v-for="(item,index) in goods_list" @click="goshop(item)" :key="index">
		  				  <van-cell :title="item.store_name"  title-class	="titlepadding">
		  					  <template slot="icon">
		  						 <image :src="pictureUrl+'/uploads/home/store/'+item.store_id+'/'+item.store_avatar" style="border-radius: 50%;
		  						 width: 50upx;height: 50upx;vertical-align: middle;"></image>
		  					  </template>
		  				  </van-cell>
		  				 <view style="border-bottom: 20upx solid #F5F5F5;">
		  					  <van-card
		  						title-class="priceClass"
		  						desc-class="desclass"	
		  						price-class ="priceClass"
		  						:price="item.favlog_price"
		  						:desc="item.descire"
		  						:title="item.desarray"
		  						:thumb="pictureUrl+'/uploads/home/store/goods/' + item.goods_image.substr(0, item.goods_image.indexOf('\_')) + '/' + item.goods_image "
		  					  >
		  					  </van-card>
		  				 </view>
		  </view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pictureUrl: this.pictureUrl,
				active: 1,
				type: 'store',
				page: 1,
				page_size:　10,
				scrollTop:0,
				old: {
					scrollTop: 0
				},
				store_list:[],
				goods_list:[]
			}
		},
		onLoad() {
			this.getlist();
		},
		methods: {
			goitem(item) {
				let id = item.store_id;
				 uni.navigateTo({
				              url: `/pages/index/hotel?id=${id}`
				        });
			},
			goshop(item) {
				let store_id = item.store_id;
				let id = item.fav_id;
				   uni.navigateTo({
				          url: `/pages/index/shop?id=${id}&store_id=${store_id}`
				        });
			},
			upper(e) {
				console.log(e)
				console.log("顶部")
			},
			// 滚到底部
			lower(e) {
				console.log("底部")
			},
			// 滚动时触发
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			onChange(e) {
				console.log(e);
				this.active = e.detail.name;
				this.store_list = [];
				this.goods_list  = [];
				this.page = 1;
				if(e.detail.name == 1) {
					this.type = 'store';
					
				}else {
					this.type = 'goods';
				}
				this.getlist();
			},
			getlist() {
				this.request({
					url: '/v1/favorites/get',
					method: 'post',
					scrollTop: 0,
					data: {
						type:　this.type,
						page: this.page,
						page_size: this.page_size
					},
					success: (res) => {
						let { data } = res.data;
						console.log(data.goods_list);
						let good = data.goods_list;
						if(good!=0) {
							good.forEach((items,index) => {
								console.log(items);
									let arr = items.goods_name.split(' ');
									items.desarray = arr[0];
									items.descire = items.goods_name.replace(arr[0], '');
							})
						}
						this.store_list = this.store_list.concat(data.store_list);
						this.goods_list = this.goods_list.concat(good);
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.titlepadding {
		padding-left: 10upx;
	}
	.hotelcontent {
		display: flex;
		flex-direction: row;
		padding: 18upx 32upx;
		border-bottom: 20upx solid #F5F5F5;

		.contentleft {
			width: 200upx;
			height: 180upx;
			background-color: red;
		}
		.contentitle {
			padding-left: 35upx;
				
			.contentip {
				float: left;
				color: #909399;
				padding-top: 15upx;
				font-size: 24upx;
			}
		}
	}
	.van-card {
		background-color: #fff!important;
	}
    .priceClass {
		color: #303133!important;
		font-size: 28upx!important;
		font-weight: normal!important;
	}
	.desclass {
		color: #909399!important;
		font-size: 24upx;
	}
</style>