H5_module/onlineregistration/cancelappointment/cancelappointment.vue

<template>
	<view class="box" v-if="isShowPage">
		<view class="ddinfo">
			<view class="li">
				<text>预约院区</text>
				<view>{{params.storeName}}</view>
			</view>
			<view class="li">
				<text>预约服务</text>
				<view>{{params.serviceTitle}}</view>
			</view>
			<view class="li">
				<text>预约序号</text>
				<view>{{params.serialNumber}}</view>
			</view>
			<view class="li">
				<text>预约时间</text>
				<view class="textcolor-orange">{{params.appointmentTime}}  {{getWeek(params.appointmentTime)}}<!-- <view class="textcolor-orange">10:00~11:30</view> --></view>
			</view>
		</view>
		<view class="ddinfo">
			<view class="li">
				<text>姓名</text>
				<view>{{params.name}}</view>
			</view>
			<view class="li">
				<text>电话</text>
				<view>{{params.phone}}</view>
			</view>
			<view class="li">
				<text>症状描述</text>
				<view>{{params.brief}}</view>
			</view>
		</view>
		<view class="ddinfo" v-if="isShowReason">
			<view class="li">
				<text>请选择取消原因</text>
			</view>
			<view class="cancel-bar">
				<view :class="'reason-item'+(reasonIndex==item.id ? ' active' : '')" v-for="(item,index) in reasonList" :key="index" @tap="selectReason(item,index)">
					{{item.text}}
				</view>
				<textarea placeholder="其他原因" placeholder-class="placeholder" v-model="otherReason" @focus="focusOhter"></textarea>
			</view>
		</view>
		<view class="cancel-sta" v-if="params.state == 8">服务已取消</view>
		<view class="cancel-sta end" v-if="params.state == 7">服务已完成</view>
		<view class="regist-bottom-btn" @click="cancelService" v-if="params.state == 3">取消预约</view>
	</view>
</template>

<script> 
	// mine/coupons/coupons.js
	const req = require("../../utils/request.js");
	const api = require("../../utils/api.js");
	const app = getApp();

	export default {
		data() {
			return {
				isShowPage: false,
				id: '',
				params: {},
				reasonList:[
					{text:'临时有事',id:0},
					{text:'重复预约',id:1},
					{text:'不想去了',id:2},
					{text:'约错时间',id:3}
				],
				reasonIndex: -1,
				reason:'',
				otherReason: '',
				isCancel: false,
				isShowReason: false
			};
		},

		components: {},
		props: {},
		onLoad(options) {
			this.id = options.id
			if(this.isCancel){
				this.isCancel = true
				uni.setNavigationBarTitle({
					title: '取消预约'
				})
			}
			this.getDetail()
		},
		onShow: function() {
		},

		methods: {
			getWeek(dateString) {
				var dateArray = dateString.split('-');
				var date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
				return '星期' + '日一二三四五六'.charAt(date.getDay());
			},
			getDetail(){
				req.getRequest(api.reservation_service_record_detail,{id: this.id},data=>{
					this.params = data;
					this.isShowPage = true;
				})
			},
			cancelService(){
				if(!this.reason&&!this.otherReason){
					req.msg('请选择取消原因')
					this.isShowReason = true
					return false
				}
				let params = {
					id: this.id
				}
				if(this.otherReason){
					params.reason = this.otherReason
				}else{
					params.reason = this.reason
				}
				req.msgConfirm('取消之后需重新预约，确认取消预约吗？',suc=>{
					req.postRequest(api.reservation_service_cancel,params,data=>{
						req.msg('预约已取消')
						this.isShowReason = false
						this.getDetail()
					})
				})
			},
			jumpUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			selectReason(item,index){
				this.reasonIndex = index
				this.reason = item.text
			},
			focusOhter(e){
				this.reasonIndex = -1
				this.reason = ''
			}
		}
	};
</script>

<style>
	@import './cancelappointment.css';
</style>