hm-examples/pagesA/makeAnPppointment/makeAnPppointment.vue

<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :titleVal="'自主预约'" :statusTitle="true"></status-nav>
		<!-- 自定义二级分类 -->
		<!-- 列表 -->
		<view v-if="isLoading" :style="{paddingTop: statusHeight+'px'}" class="pad-zy30" style="padding-bottom: 160rpx;">
			<view v-if="dataList.length!=0" class="mar-s30 bacf pad20" v-for="(item,index) in dataList" :key="index" style="border-radius: 28rpx;">
				<view class="disjbac">
					<view class="disac">
						<image class="radius20 mar-y20 flexs" src="/static/public/logo.png" style="width: 98rpx;height: 98rpx;" mode=""></image>
						<view>
							<view class="fon36 col3 bold clips1">{{item.name}}</view>
							<view class="fon24 col3 mar-s10">{{item.content}}</view>
						</view>
					</view>
					<view :style="{background:[ingColor,publicColor,failColor,failColor,failColor][item.status]}" class="fon24 colf radius10 flexs" style="padding: 14rpx 24rpx;">{{['审核中...','预约成功','预约失败','预约取消','预约完成'][item.status]}}</view>
				</view>
				<view class="mar-s36 fon24 col3">预约时间：{{item.yuTime}}</view>
				<view class="disjbac fon24 col3 mar-s30">
					<!-- <view>联系人：{{item.lname}}</view> -->
					<view>联系电话：{{item.lphone}}</view>
				</view>
				<view @tap="quyuy(index)" class="disjcac mar-s40 width100 colf fon30 radius10 posir" :style="{background:[quColor,quColor,publicColor,publicColor,publicColor][item.status]}" style="height: 90rpx;line-height: 90rpx;">
					{{['取消预约','取消预约','重新预约','再次预约','再次预约'][item.status]}}
					<!-- <button :disabled="(item.status==2 || item.status==3 || item.status==4)?true:false" class="posia" 
					style="top: 0;left: 0;right: 0;bottom: 0;background-color: #000000;opacity: 0;">{{['取消预约','取消预约','重新预约','再次预约','再次预约'][item.status]}}</button> -->
				</view>
			</view>
			<nothing-page v-if="dataList.length==0" :content="'暂无更多预约内容'"></nothing-page>
		</view>
		<!-- 底部按钮 -->
		<view class="posixzy bacf pad-sx25">
			<view @tap="goYu" class="fon30 radius20 tc colf bold" style="margin: 0 83rpx;height: 90rpx;line-height: 90rpx;" :style="{background:publicColor}">我要预约</view>
		</view>
		<!-- 弹框 -->
		<pu-po :isShowT="isShowT" :contentVal="'是否取消当前预约？'" :clearVal="'否'" :comfrimVal="'是'" @comfirmev="comfirmev" @cancleev="isShowT=false"></pu-po>
		<!-- 底部客服 -->
		<public-customer></public-customer>
		<!-- 用户信息授权，手机号授权 -->
		<auth-userInfo-mobileInfo></auth-userInfo-mobileInfo>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				failColor:'#CCCCCC',//失败背景颜色
				ingColor:'#FFBE4D',//审核中背景颜色
				quColor:'#FF4D4D',//取消预约背景色
				dataList:[
					// {status:0,imgSrc:'',name:'陈高医生',content:'植发',yuTime:'2021年07月08日 14:30至15:30',lname:'甄先生',lphone:'18888888888'},
					// {status:1,imgSrc:'',name:'陈高医生',content:'植发',yuTime:'2021年07月08日 14:30至15:30',lname:'甄先生',lphone:'18888888888'},
					// {status:2,imgSrc:'',name:'陈高医生',content:'植发',yuTime:'2021年07月08日 14:30至15:30',lname:'甄先生',lphone:'18888888888'},
				],
				btnCon:'取消预约',//取消预约/重新预约
				page:1,
				size:20,
				total:'',//总数
				isZanw:true,
				isLoading:false,
				isShowT:false,
				zzId:''//自主预约ID
			}
		},
		computed: {
			// 主题颜色
			publicColor() {
				return this.$store.state.publicColor
			},
			statusHeight() {
				return this.$store.state.statusHeight
			}
		},
		onReachBottom() {
			if(this.total!=this.dataList.length){
				this.page++
				this.checkPoint()//调用自主预约列表事件
			} else {
				if(this.isZanw) this.$toolAll.tools.showToast('暂无更多预约记录','none',1000)
				this.isZanw = false
			}
		},
		onShow() {
			if(uni.getStorageSync('phone_active')!=0 && uni.getStorageSync('is_active')!=0){
				this.$toolAll.tools.showToast('加载中...','loading')
				this.checkPoint()//调用自主预约列表事件
			}
		},
		methods: {
			checkPoint(){//查询自主预约列表事件
				this.$requst.post('user/appointment-list',{page:this.page,size:this.size}).then(res=>{
					// console.log('查询自主预约列表：',res);
					if(res.code==0){
						if(this.page==1) this.dataList = []
						if(res.data.list.length!=0){
							this.total = res.data.total
							res.data.list.forEach(item=>{
								let timeStr = item.appointment_at.slice(0,10).split('-')
								let timeZui = item.period.name.split('-')
								let newStatus = ''
								if(item.status_text=='审核中') newStatus = 0
								if(item.status_text=='预约成功') newStatus = 1
								if(item.status_text=='预约失败') newStatus = 2
								if(item.status_text=='预约取消') newStatus = 3
								if(item.status_text=='预约完成') newStatus = 4
								let obj = {
									id:item.id,
									status:newStatus,
									imgSrc:	uni.getStorageSync('userLogo'),//缓存token,
									name:item.name,
									content:item.typeInfo.title,
									yuTime:`${timeStr[0]}年${timeStr[1]}月${timeStr[2]}日 ${timeZui[0]}至${timeZui[1]}`,
									lname:item.name,
									lphone:item.phone
								}
								this.dataList.push(obj)
							})
						}
						this.isLoading = true
					}
				},error=>{})
			},
			goYu(){//去预约
				uni.navigateTo({
					url:'/pagesA/ppointmentEv/ppointmentEv'
				})
			},
			quyuy(index){//取消预约事件
				if(this.dataList[index].status==0 || this.dataList[index].status==1){
					this.zzId = this.dataList[index].id
					this.isShowT = true
				} else {
					uni.navigateTo({
						url:'/pagesA/ppointmentEv/ppointmentEv'
					})
				}
				
			},
			comfirmev(){
				this.isShowT = false
				this.$requst.post('user/appointment-cancel',{appointment_id:this.zzId}).then(res=>{
					// console.log('取消预约成功返回：',res);
					if(res.code==0){
						this.$toolAll.tools.showToast('取消预约成功')
						setTimeout(()=>{
							this.checkPoint()
						},1500)
					}
				},error=>{})
			}
		}
	}
</script>

<style>
</style>