phone_uni_xiongan_LBG/pages/myReserve/myReserve.vue

<template>
	<view class="v-page">
		<view class="box_1">
			<view class="dy_fx yue_tab_box">
				<view :class="class1" @click="getResverveList('')">全部</view>
				<view :class="class2" @click="getResverveList('0')">待核销</view>
				<view :class="class3" @click="getResverveList('1')">已核销</view>
				<view :class="class4" @click="getResverveList('3')">已取消</view>
			</view>
		</view>

		<view class="an_box">
			<!-- 列表 -->
			<view v-if="dataList.length>0">
				<view class="amt_30 rcd_box box_1" v-for="(item,index) in dataList" :key="index"
					@click="goToDetail(item.id)">
					<view class="an_pbl yue_lst">
						<view class="amt-order">预约单号：{{item.appointment_number}}</view>
						<view class="an_t_2">参观时间：{{item.periodTime}}</view>
						<view class="an_t_2">预约人数：{{item.appointment_count}}人</view>
					</view>
				</view>
			</view>
			<view v-else>
				<noContent text="暂无数据"></noContent>
			</view>
			<view style="text-align: center;margin-top: 20px;" v-if="isDate">
				<button size="mini" @click="more()">+查看更多</button>
			</view>
		</view>
	</view>
</template>

<script>
	import aes from "@/common/aes.js";
	import noContent from "@/components/ui-noContent/ui-noContent.vue";
	export default {
		components:{noContent},
		data() {
			return {
				dataList: null,
				pageno: 1,
				isDate: false,
				type: '',
				class1: "fx_1 yue_tab tab_cur",
				class2: "fx_1 yue_tab",
				class3: "fx_1 yue_tab",
				class4: "fx_1 yue_tab",
				netType: true
			}
		},
		onLoad() {
			var that = this;
			this.getResverveList('');
		},
		methods: {
			more: function() {
				var that = this;
				var data = {
					type: that.type,
					pageno: this.pageno,
					pageSize: 10,
					userId: aes.aesDecrypt(uni.getStorageSync("userid"))
				}
				this.$Request.post(this.$config.myReserve, data).then(res => {
					var flag = that.$util.isSuccess(res);
					if (!flag) {
						return;
					}
					var length = res.data.length;
					if (length < data.pageSize) {
						that.isDate = false;
					} else {
						that.pageno += 1;
						that.isDate = true;
					}
					for (var i = 0; i < res.data.length; i++) {
						that.dataList.push(res.data[i]);
					}
				})
			},
			//获取预约列表
			getResverveList: function(type) {
				this.pageno = 1;
				if (type == "") {
					this.class1 = "fx_1 yue_tab tab_cur";
					this.class2 = "fx_1 yue_tab";
					this.class3 = "fx_1 yue_tab";
					this.class4 = "fx_1 yue_tab";
				} else if (type == "0") {
					this.class1 = "fx_1 yue_tab";
					this.class2 = "fx_1 yue_tab tab_cur";
					this.class3 = "fx_1 yue_tab";
					this.class4 = "fx_1 yue_tab";
				} else if (type == "1") {
					this.class1 = "fx_1 yue_tab";
					this.class2 = "fx_1 yue_tab";
					this.class3 = "fx_1 yue_tab tab_cur";
					this.class4 = "fx_1 yue_tab";
				} else {
					this.class1 = "fx_1 yue_tab";
					this.class2 = "fx_1 yue_tab";
					this.class3 = "fx_1 yue_tab";
					this.class4 = "fx_1 yue_tab tab_cur";
				}
				var that = this;
				that.type = type;
				var ids = uni.getStorageSync('unionid')
				console.log(ids)
				var data = {
					"page": "1",
					"limit": "10",
					"scenicId": this.$param.scenicId,
					// "unionId": "unionIdewrqrfb",
					"unionId": ids,
					"state": that.type
				}
				uni.request({
					url: this.$config.appletsAppointmentRecord,
					data: data,
					method: "POST",
					header: {
						"content-type": 'application/json',
						// 'Cookie':'ybsj-session=88942A641DDF00DD2E1676F4C2403CC1'
					},
					xhrFields: {
						withCredentials: true // 这里设置了withCredentials
					},
					success: function(result) {
						if (result.data.status == 200) {
							that.dataList = result.data.data.data;
						}
					},
					fail: function(e) {
						//error.call(self, e)
					}
				})
				// this.$Request.post(this.$config.appletsAppointmentRecord, data).then(res => {
				// 	var flag = that.$util.isSuccess(res);
				// 	if(!flag){
				// 		return;
				// 	}
				// 	var length = res.data.length;
				// 	if(length < data.pageSize){
				// 		that.isDate = false;
				// 	}else{
				// 		that.pageno+=1;
				// 		that.isDate = true;
				// 	}
				// 	that.dataList = res.data;
				// })
			},
			//跳转详情
			goToDetail: function(reserveId) {
				uni.navigateTo({
					url: "/sunPackIndex/scenic/subscribe/yuyue/yue_detail_js?id=" + reserveId
				})
			},
		}
	}
</script>

<style>
	.v-page {
		padding-bottom: 5rpx;
	}
</style>