xinelu-applet-ui/pagesC/Myappointment/Myappointment.vue

<template>
	<view class="app">
		<u-tabs :list="tabslist" :is-scroll="false" :current="tabscurrent" @change="tabschange" :show-bar='false'
			active-color='#26A888'></u-tabs>
		<u-empty v-if="appointmentlist==0" text="暂无"></u-empty>
		<view class="record" v-for="(item,index) in appointmentlist" :key="index" v-else>
			<view class="top">
				<span>{{item.formName}}</span>
				<span v-if="item.bookingStatus=='1'">已完成 </span>
				<span v-if="item.approvalStatus=='1'&&item.bookingStatus=='0'">已同意</span>
				<span v-if="item.bookingStatus=='0' &&item.approvalStatus=='2'">已拒绝</span>
				<span v-if="item.bookingStatus=='0' &&item.approvalStatus=='0'">待审批</span>
				<span v-if="item.bookingStatus=='2'">已取消</span>
			</view>
			<view class="recorddata">
				<view class="recorditem">
					{{item.packageName}}
				</view>

				<!-- <view class="recorditem"
					v-if="item.bookingStatus=='0'||item.bookingStatus=='1'||item.bookingStatus=='2'">
					申请时间：{{item.applyTime}}
				</view> -->
				<view class="recorditem" v-if="item.bookingStatus=='1'&&item.completeTime">
					完成时间：{{item.completeTime}}
				</view>
				<view class="recorditem">
					预约时间：{{item.bookingTime}}
				</view>
				<view class="recorditem" v-if="item.bookingStatus=='2'">
					取消时间：{{item.cancelTime}}
				</view>
			</view>
			<view class="evaluate" @tap="evaluatetime(item)" v-if="item.bookingStatus=='0'&&item.approvalStatus=='0'">
				<view class="evaluatedata">
					取消预约
				</view>
			</view>
			<u-toast ref="uToast" />
		</view>

	</view>
</template>

<script>
	import {
		list,
		cancel
	} from '@/api/pagesC/myappointment/myappointment.js'
	export default {
		data() {
			return {
				name: '',
				tabslist: [{
					name: '全部',
					completed: '',
				}, {
					name: '已完成',
					completed: '2',
				}, {
					name: '未完成',
					completed: '1',
				}, ],
				tabscurrent: 0,
				listtotal: 0,
				query: {
					pageNum: 1,
					pageSize: 10,
					identity: '',
					completed: '',
				},
				appointmentlist: [],
			}
		},
		mounted() {
			const value = uni.getStorageSync('userinfo');
			this.query.identity = value.cardNo
			this.info();
		},
		onReachBottom() { //下滑加载
			if (this.appointmentlist.length >= this.listtotal) {} else {
				this.query.pageNum++
				list(this.query).then(res => {
					this.appointmentlist = res.rows
				})
			}
		},
		onPullDownRefresh() { //下拉刷新
			this.info();
			// this.query.pageNum++
			this.query.pageNum = 1;
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);

		},
		methods: {
			info() {
				list(this.query).then(res => {
					this.appointmentlist = res.rows
					this.listtotal = res.total
				})
			},
			evaluatetime(item) {
				uni.showModal({
					title: '提示',
					content: '确定取消预约吗',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮文字  
					success: (res) => {
						console.log(res, '78')
						if (res.confirm) {
							cancel(item.bookingNo).then(res => {
								if (res.code == 200) {
									uni.showModal({
										title: '提示',
										content: '取消预约成功',
									})
									this.info();
								} else if (res.code == 500) {
									uni.showModal({
										title: '提示',
										content: res.msg,
									})
								}
							})
						}
					}
				})
			},
			//点击tabs
			tabschange(index) {
				this.tabscurrent = index
				if (index == '1') {
					this.query.completed = '1'
					this.info();
				} else if (index == '2') {
					this.query.completed = '2'
					this.info();
				} else if (index == '0') {
					this.query.completed = ''
					this.info();
				}
			},
		}
	}
</script>

<style lang="scss">
	@import './Myappointment.scss'
</style>