HDhotel/pages/roomconfirm/roomconfirm.vue

<template>
	<view class="pages roomconfirm">
		<view class="search-wrap wrap">
			<view class="write-radius search-block">
				<input type="text" class="search-input" v-model="searchparams.hotelId" value="" placeholder="酒店ID" />
				<input type="text" class="search-input" v-model="searchparams.search" value="" placeholder="订单编号或消费码关键字" />
				<button type="primary" @click="searchf" class="search-button">搜索</button>
			</view>
		</view>
		 <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<!-- //  @init="mescrollInit" @down="downCallback" @up="upCallback"为固定值,不可删改(与mescroll-mixins保持一致) 
			 // :down="downOption" :up="upOption" 绝大部分情况无需配置 
			 // :top="顶部偏移量" :bottom="底部偏移量" :topbar="状态栏" :safearea="安全区" (常用)
			 // 字节跳动小程序 ref="mescrollRef" 必须配置 
			 // 此处支持写入原生组件 -->
			 <view v-for="(data,index) in dataList" :key="index">
				<view class="writeoff-item" :data-id="data.id" @click="jumpDetails">
					<view class="writeoff-item-til">{{ data.hotel.title }}</view>
					<view class="writeoff-item-con">
						<view class="writeoff-item-img">
							<image class="image" :src="data.litpic" mode="scaleToFill"></image>
						</view>
						<view class="writeoff-item-info">
							<view class="writeoff-item-name">{{ data.room.title }}</view>
							<view class="writeoff-item-hd">
								<image class="image" src="/static/img/hotelCardIcon.png" mode="widthFix"></image>
								{{data.hd_num}} 张蝴蝶券
							</view>
							<view class="writeoff-item-time">入离日期: {{data.usedate}} -  {{data.departdate}}</view>						
						</view>
					</view>
				</view> 
			 </view>
		 </mescroll-body>
	</view>
	</template>

	<script>
		// 引入mescroll-mixins.js
		import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
		
		// 引入mescroll-body组件 (如已在main.js注册全局组件,则省略此步骤)
		import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"; // 注意.vue后缀不能省
		
		export default {
			mixins: [MescrollMixin], // 使用mixin
			components: {
				MescrollBody
			},
			onLoad() {
			},
			onShow() {
				let serf = this;
				//检查登录,获取token
				let loginRes = this.checkLogin('/pages/writeoff/writeoff', '2');
				// console.log('loginRes',loginRes);
				if(!loginRes){return false;}
				serf.params.token=loginRes[0];
				serf.searchparams.token=loginRes[0];
				// uni.getStorage({
				// 	key: 'token',
				// 	success: function(res) {
				// 		//数据成功获取，用户已登录
				// 		// console.log(res.data);
				// 		serf.params.token=res.data;
				// 		// console.log(serf.params.token);
				// 	},
				// 	fail: function(res) {
				// 		//数据未获取成功，用户没有登录，这里我们直接跳转到登录页面
				// 		uni.navigateTo({
				// 			url: '/pages/login/login',
				// 		});
				// 	}
				// });
				
			},
			data() {
				return {
					params:{
						token:'',
						startTime:'',
						endTime:'',
						search:'',
						hotelId:null,
						
					},
					mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
					// 下拉刷新的配置(可选, 绝大部分情况无需配置)
					downOption: { 
						// ...
					},
					// 上拉加载的配置(可选, 绝大部分情况无需配置)
					upOption: {
						page: {
							size: 10 // 每页数据的数量,默认10
						},
						noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
						empty: {
							tip: '暂无相关数据'
						}
					},
					// 列表数据
					dataList: [],
					//搜索
					searchparams:{
						token:'',
						hotelId:'',
						search:'',						
					}
				}
			},
			methods: {
				
				/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
				mescrollInit(mescroll) {
					this.mescroll = mescroll;
				},
				/*下拉刷新的回调, 有三种处理方式:*/
				downCallback(){

					// 第2种: 下拉刷新和上拉加载调同样的接口, 那么不用第1种方式, 直接mescroll.resetUpScroll()即可
					this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				},
				/*上拉加载的回调*/
				upCallback(page) {
					let pageNum = page.num; // 页码, 默认从1开始
					let pageSize = page.size; // 页长, 默认每页10条
					this.params = Object.assign(this.params,{page:pageNum,rows:pageSize});
					this.$api.http.post(this.config.apiBaseurl+'hotel/reserve/data',this.params,{
						header: {
							Accept:'application/json',
							Authorization: 'Bearer '+ this.params.token, //注意Bearer后面有一空格
						}
					}).then(data => {
						if(data.data.code=='1001'){
							uni.redirectTo({
								url:'/pages/login/login?backpage=/pages/roomconfirm/roomconfirm'+'&backtype='+2,
							});							
						};
						console.log(data);
						// 接口返回的当前页数据列表 (数组)
						let curPageData = data.data.rows; 
						console.log('curPageData',curPageData);
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length; 
						// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
						// let totalPage = data.xxx; 
						// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
						let totalSize = data.data.total; 
						// 接口返回的是否有下一页 (true/false)
						// let hasNext = data.xxx; 
						
						//设置列表数据
						if(page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
						this.dataList = this.dataList.concat(curPageData); //追加新数据
						
						//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
						this.mescroll.endBySize(curPageLen, totalSize); 

						setTimeout(()=>{
							this.mescroll.endSuccess(curPageLen)
						},20)
	
					}).catch(err => {
						this.mescroll.endErr()
						console.log(err)
					
					});
					
				},
				//跳转至详情
				jumpDetails(e) {
					let id = e.currentTarget.dataset.id;
					console.log('id',id);
					uni.navigateTo({						
						url: '/pages/roomconfirm/roomconfirmitem/roomconfirmitem?id=' + id
					});
				},
				//搜索
				searchf(){
					// console.log(this.searchparams);
					this.params = this.searchparams;
					this.mescroll.resetUpScroll();
				}
			}
		}
	</script>

<style lang="scss" scoped>
page{background-color: $uni-bg-color-grey;}
.writeoff-item{margin: 24rpx;padding: 24rpx;border-radius: 24rpx;background-color: #fff;box-shadow: 0px 18px 47px -19px rgba(0, 0, 0, 0.1);}
.writeoff-item-til{margin-bottom: 15rpx;font-size: 24rpx;}
.writeoff-item-con{display: flex;align-items: center;}
.writeoff-item-img{position: relative;margin-right: 24rpx;width: 150rpx;height: 150rpx;border-radius: 14rpx;overflow: hidden;}
.writeoff-item-img .image{height: 100%;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.writeoff-item-info{color: #666;}
.writeoff-item-name{margin-bottom: 4rpx;font-size: 32rpx;font-weight: bold;}
.writeoff-item-hd{margin-bottom: 4rpx;}
.writeoff-item-hd .image{width: 27rpx;height: 21rpx;margin-right: 5rpx;}
.writeoff-item-time{font-size: 24rpx;}	
</style>