mudi-app/pages/user/beforehand_lease/beforehand_lease.vue

<!-- 租赁预约 -->
<template>
	<view class="lease">
		<u-navbar :is-back="false" :title-bold="true">
			<view class="slot-wrap">
				<view class="back" @click="back">
					<u-icon name="arrow-left"></u-icon>
				</view>
				<view class="center">
					<view class="left active">
						租赁预约
					</view>
					<view class="right " @click="toSigned">
						租赁签约
					</view>
				</view>
			</view>
		</u-navbar>
		<view class="screen">
			<u-tabs-swiper ref="uTabs" :list="vuex_lease_tabs" :current="current" @change="tabsChange"
				:is-scroll="false">
			</u-tabs-swiper>
		</view>

		<view class="list"  :style="{height: newsPanelHeight + 'px'}">
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in vuex_lease_tabs.length" :key="index">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
						<view class="" v-for="(item, __index) in list" :key="__index">
							<!-- 当切换全部时 -->
							<ListItem class="item" v-if="index === 0" :info="item" width="240rpx" height="210rpx"
								@click.native="toInfo(info)" @cancel="cancel(item)" @toPhone="toPhone(item)">
							</ListItem>
						
							<!-- 当切换待处理时 -->
							<ListItem class="item" v-if="index === 1 && item.returnVisitStatus === 'N'" :info="item"
								width="240rpx" height="210rpx" @click.native="toInfo(info)" @cancel="cancel(item)"
								@toPhone="toPhone(item)">
							</ListItem>
						
							<!-- 当切换已完成时 -->
							<ListItem class="item" v-if="index === 2 && item.returnVisitStatus === 'Y'" :info="item"
								width="240rpx" height="210rpx" @click.native="toInfo(info)" @cancel="cancel(item)"
								@toPhone="toPhone(item)">
							</ListItem>
						</view>
						<view class="loading" v-if="index === 0 && isLoading && !isTotle ">
							<u-loading mode="flower"></u-loading>
						</view>
						<view class="loading" style="height: 40px;" v-if="isTotle">
							我们是有底线的
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	
		
		<u-modal v-model="visible" :title-style="{color: '#000'}" title="联系方式" confirm-color="#42b983"
			:show-cancel-button="true" @confirm="confirm" confirm-text="拨打">
			<view class="slot-content u-m-50 u-text-center" v-if="info">
				<rich-text :nodes="info.brokerPhone"></rich-text>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import ListItem from '../../../components/lease_list_item.vue'
	export default {
		data() {
			return {
				newsPanelHeight:0,
				visible:false,
				current: 0,
				swiperCurrent: 0,
				totle: 0,
				info:null,
				isLoading:false,
				isTotle: false,
				list:[],
				queryData: {
					pageNum: 0,
					pageSize: 10,
					pagodaStatus: 'renting', // renting出租
				},
				vuex_lease_tabs: [{
						name: '全部'
					},
					{
						name: '待处理'
					},
					{
						name: '已完成'
					}
				],
			}
		},
		methods: {
			cancel(item) {
				this.info = item
				this.info.returnVisitStatus = "Y"
			},
			confirm() {
				uni.makePhoneCall({
					phoneNumber: this.info.brokerPhone,
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			},
			toPhone(item) {
				this.visible = true
				this.info = item
				console.log('00999000', item)
			},
			back() {
				console.log(this.vuex_backUrl, 88899)
				if (this.vuex_backUrl === 'mian') {
					// 清除状态
					this.$u.vuex('vuex_backUrl', '')
					uni.switchTab({
						url: '../../mian/mian'
					})
					return
				}
				uni.switchTab({
					url: '../user'
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				this.getList()
			},
			async getList() {
				if (this.isTotle) {
					return
				}
				this.isLoading = true
				this.queryData.pageNum = this.queryData.pageNum + 1
				let res = await this.$u.api.pagoda.getPagodaReservationList(this.queryData)
				this.total = res.data.total
				this.list.push(...res.data.rows)
				setTimeout(() => {
					this.isLoading = false
					if (this.list.length === this.total) {
						this.isTotle = true
					}
				}, 300)
			},
			toSigned() {
				uni.navigateTo({
					url: '../lease_signed/lease_signed'
				})
			},
			toInfo() {
				uni.navigateTo({
					url: '../leaseInfo/leaseInfo'
				})
			}
		},
		components: {
			ListItem,
		},
		onLoad() {
			this.getList()
		},
		onReady() {
			var _this = this;
			uni.getSystemInfo({
				success: function(res) {
					uni.createSelectorQuery().select(".list")
						.boundingClientRect(function(boundRect) {
							_this.newsPanelHeight = res.windowHeight - boundRect.top;
						}).exec();
				}
			});
			console.log(this.newsPanelHeight, 99999)
		}
	}
</script>

<style lang="scss" scoped>
	uni-page-body,
	.swiper-box,
	.list,
		{
		height: 100%;
	}

	.lease {
		height: calc(100% - 210rpx);
	}

	.slot-wrap {
		display: flex;
		flex: 1;
		align-items: center;
		font-weight: 600;
		font-size: 32rpx;

		.back {
			margin-left: 36rpx;
		}

		.center {
			display: flex;
			align-items: center;
			margin-left: 154rpx;

			.left {
				margin-right: 60rpx;
			}

			.active {
				color: #E67D29;
			}
		}

	}

	.navbar {
		height: 96rpx;
		display: flex;
		align-items: center;
		box-shadow: 0px 0px 30rpx 0px #f1f1f1;

		.left {
			margin-left: 36rpx;
		}

		.center {
			display: flex;
			align-items: center;
			margin-left: 134rpx;
			font-size: 32rpx;

			.left {
				margin-right: 60rpx;
			}


		}
	}

	/deep/.uni-scroll-view-content {
		border-bottom: 1rpx solid #f8f8f8;
	}

	.list {
		height: 100%;
		background-color: #f5f7fa;

		.item {
			height: 372rpx;
			margin-bottom: 12rpx;
			background-color: #FFFFFF;
			padding-top: 48rpx;
		}
	}
</style>