Ci2Order.vue/App/pages/remind/index/reserve.vue

<template>
	<view class="reserve">
		<z-date-slide :dataList="headerList" @getDateInfo="getDateInfo" @getDateRange="getDateRange"></z-date-slide>
		<scroll-view class="reserve_scroll" scroll-y @scrolltolower="scrolltolower" 
		 :show-scrollbar="false" @scroll="scroll">
			<view class="mt-50  mb-20">
				<z-card class="mt-10 card_item flex-n fac" v-for="(item,index) in dataList" :key="index" @click.native="gotoDetail(item.orderId)">
					<!-- 	<view class="card_item_level">
					<view class="flex-1 card_item_level_item"></view>
					<view class="flex-1 card_item_level_item"></view>
					<view class="flex-1 "></view>
				</view> -->
					<view class="ml-50 flex-1">
						<view class="card_item_text1">{{item.customName}} {{item.orderDateRange}}</view>
						<view class="card_item_text2">{{item.houseName}} 699套餐(20)</view>
					</view>
					<template v-if="item.orderState=='01'">
						<view class="card_item_state flex-n fac ml-20">
							<view class="card_item_state_img iconfont iconjuxing18"></view>
							<view class="card_item_state_text">{{item.orderStateText}}</view>
						</view>
					</template>
					<template v-if="item.orderState=='02'">
						<view class="card_item_state flex-n fac ml-20">
							<view class="card_item_state_img iconfont iconjuxing20"></view>
							<view class="card_item_state_text">{{item.orderStateText}}</view>
						</view>
					</template>
					<template v-if="item.orderState=='03'">
						<view class="card_item_state flex-n fac ml-20">
							<view class="card_item_state_img iconfont iconjuxing21kaobei"></view>
							<view class="card_item_state_text">{{item.orderStateText}}</view>
						</view>
					</template>
					<view class="card_item_tel ml-30 mr-20 iconfont icondianhua-copy" v-if="item.phone" @click.stop="showMakePhone=true;callPhone=item.phone"></view>
					<view class="card_item_tel ml-30 mr-20 iconfont icondianhua-copy" style="color: #eee;" v-else></view>
				</z-card>

			</view>
			<z-nodata state="nodata" v-if="dataList.length==0"></z-nodata>
			<z-loading :showLoading="showLoading" v-else></z-loading>
		</scroll-view>
		<z-select-popup :visible.sync="showMakePhone">
			<view @click="gotoMakePhone">{{callPhone||'无联系电话'}}</view>
		</z-select-popup>
	</view>
</template>

<script>
	const app = getApp({
		allowDefault: true
	});
	export default {
		props: {
			refresh: Boolean
		},
		data() {
			return {
				dataList: [],
				headerList: [],

				showMakePhone: false,
				callPhone: '',

				daterange: [],
				date: '',

				total: 0,
				pageNum: 1,
				scrollTop: 0,
				showLoading: false,
			}
		},
		watch: {
			refresh(newval, oldval) {
				if (newval) {
					// setTimeout(()=>{
					this.dataList=[];
					this.bookList(this.date);
					this.bookHeader(this.daterange[0].date, this.daterange[6].date)
					// },100)
				}
			}
		},
		methods: {
			//获取预定表头
			bookHeader(startTime, endTime) {
				var houseTypeIds = uni.getStorageSync('searchField') || [];
				this.$axios.post('app/order/orderAlertHeader', {
					"storeId": uni.getStorageSync('storeId'),
					"startTime": startTime,
					"endTime": endTime,
					"houseTypeIds": houseTypeIds
				}).then(res => {
					console.log('预定提醒表头', res)
					var data = res.data.list;
					var headerList = [];
					for (var i in data) {
						headerList.push({
							record: data[i].record,
							isImportant: data[i].importantDates.length > 0 ? true : false
						});
					}
					this.headerList = headerList;
				}).catch(err => {
					this.$message.error(err.msg)
				})
			},
			//获取预定列表
			bookList(date) {
				var houseTypeIds = uni.getStorageSync('searchField') || [];
				this.$axios.post('app/order/orderAlertByDate', {
					"storeId": uni.getStorageSync('storeId'),
					"alertDate": date,
					"pageNum": this.pageNum,
					"houseTypeIds": houseTypeIds,
					"pageSize": 10
				}).then(res => {
					console.log(res)
					this.dataList = this.dataList.concat(res.data.list);
					this.total = res.data.total;
					this.showLoading = false;
				}).catch(err => {
					this.$message.error(err.msg)
					this.showLoading = false;
				})
			},
			//拨打电话
			gotoMakePhone() {
				var that = this;
				uni.makePhoneCall({
					phoneNumber: this.callPhone,
					complete: function() {
						that.showMakePhone = false;
					}
				});
			},
			getDateInfo(date) {
				console.log(date)
				this.dataList = [];
				this.$emit('getDateInfo', date);
				this.bookList(date.date)
				this.date = date.date;
			},
			getDateRange(daterange) {
				// console.log('日期区间',datarange)

				this.bookHeader(daterange[0].date, daterange[6].date);
				this.daterange = daterange;
			},
			gotoDetail(id) {
				uni.navigateTo({
					url: '../../book/detail/index?id=' + id
				})
			},
			scroll(e) {
				this.scrollTop = e.detail.scrollTop
			},
			scrolltolower() {
				var totalPage = Math.ceil(Number(this.total) / 10)
				if (this.pageNum < totalPage) {
					this.pageNum++;
					this.showLoading = true;
					this.bookList(this.date);
				}
			},
			scrolltoupper() {
				this.pageNum = 1;
				this.dataList = [];
				this.showLoading = true;
				this.bookList(this.date);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nodata {
		width: 457rpx;
		margin-left: 147rpx;
		margin-top: 40rpx;
	}

	.reserve {
		.card_item {
			height: 86rpx;
			position: relative;

			.card_item_level {
				position: absolute;
				left: 0;
				display: flex;
				flex-direction: column-reverse;
				width: 9rpx;
				height: 86rpx;
				background: rgba(36, 129, 238, 0.15);
				border: 1px solid #2481EE;

				.card_item_level_item {
					background: #2481EE;
					width: 9rpx;
				}
			}

			.card_item_text1 {
				color: #999999;
				font-size: 24rpx;
			}

			.card_item_text2 {
				color: #333333;
				font-size: 24rpx;
			}

			.card_item_state {
				.card_item_state_img {
					width: 25rpx;
					height: 25rpx;
					font-size: 25rpx;
					color: #007AFF;
				}

				.card_item_state_text {
					font-size: 25rpx;
					color: #999999;
					margin-left: 10rpx;
					transform: scale(0.8);
				}
			}

			.card_item_tel {
				width: 38rpx;
				height: 38rpx;
				font-size: 38rpx;
				color: #007AFF;
			}
		}
	}
</style>