nurseWeChatAppletUI/pages/ServiceDetails/ServiceDetails.vue

<template>
	<view class="app" v-if="list">
		<view class="time" style="" v-if="list.orderStatus=='WAIT_PAY'">
			剩余付款时间：
			<u-count-down style='' :timestamp="timestamp">
			</u-count-down>
		</view>
		<view class="OrderStatus" v-if="list.orderStatus=='REFUNDED'||list.orderStatus=='CANCEL'">
			订单已关闭
		</view>
		<view class="content">
			<view class="name">
				服务商家
			</view>
			<view class="details">
				<view class="detailslist">
					<image :src="baseurl+list.stationPictureUrl" mode=""></image>
					<view class="model">
						<view class="top">
							<view v-if="list.nurseStationName">{{list.nurseStationName}}</view>
						</view>
						<view class="bottom">
							<view v-if="list.address">{{list.address}}</view>
						</view>
						<view class="callme" @tap="gophone()" v-if='list.stationPhone'>
							<u-icon class='icon' name="phone-fill" color="#ffffff" size="30"></u-icon>
							<view class="text">联系我们</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="name">
				服务项目
			</view>
			<view class="drug">·{{list.nurseItemName}} </view>
		</view>
		<view class="content">服务信息
			<view class="contacts">·联系人：{{list.patientName}}</view>
			<view class="contacts">·电话：{{list.patientPhone}}</view>
			<view class="contacts">·地址：{{list.serviceAddress}}</view>
			<view class="contacts">·预约时间：{{list.serviceDate}} {{list.serviceStartTime}}</view>
			<view class="contacts">·下单时间：{{list.createTime}}</view>
		</view>
		<view class="Package">套餐信息：
			<span>￥{{list.nurseItemPrice}}</span>
			<view class="detail">
				·{{list.nurseItemName}}
			</view>
		</view>
		<view class="Consumablespackage" v-if='list.itemConsumableList'>耗材包详情：
			<span v-if="list.consumableTotalPrice">￥{{list.consumableTotalPrice}}</span>
			<span v-else>￥0</span>
			<view class="detail" v-for='(item,index) in list.itemConsumableList' :key="index">
				·{{item.orderConsumableName}}
				<span
					style='font-size: 30rpx;'>{{item.orderConsumableCount}}{{item.consumableUnit}}/￥{{item.orderConsumablePrice}}</span>
			</view>
		</view>
		<view class="remarks">
			<view>备注：</view>
			<input v-model='list.remark' :disabled="list.orderStatus=='WAIT_PAY'?false :true">
		</view>
		<view class="evaluate">
			<view class="price">
				￥{{list.totalPrice}}
			</view>
			<view class="cancelorder" @tap="cancelorderment()"
				v-if="list.orderStatus=='PAY'||list.orderStatus=='WAIT_DISPATCH'||list.orderStatus=='NOT_FINISH'">取消订单
			</view>
			<view class="cancelorder" style="background: #60c5f1;" @tap='rateshowtrue'
				v-if="list.orderStatus=='COMPLETE'">立即评价
			</view>
			<view class="cancelorder" @tap='buy' style="background-color: darkorange;"
				v-if="list.orderStatus=='WAIT_PAY'">
				去支付
			</view>
			<view class="cancelorder" style="background: #4C7BC9;" v-if="list.orderStatus=='EVALUATED'"
				@tap='lookrate(list)'>查看评价</view>
		</view>
		<u-popup v-model="rateshow" mode="bottom" length="50%" border-radius="20" :closeable='true' class='masks'>
			<view class="title">
				综合评价
			</view>
			<view class="mask">
				<u-rate :count="5" v-model="rateval" :size='70' active-color='#F4EA2A'></u-rate>
			</view>
			<view class="rateitem">
				{{rateval==5?'非常满意':''}}
				{{rateval==4?'满意':''}}
				{{rateval==3?'一般':''}}
				{{rateval==2?'差':''}}
				{{rateval==1?'非常差':''}}
			</view>
			<view class="btn" @tap='taprate'>
				确认
			</view>
			<!-- 			<view class="mask">
				<view class="rateitem" @tap="taprate('SATISFIED')">
					满意
				</view>
				<view class="rateitem" @tap="taprate('COMMONLY')">
					一般
				</view>
				<view class="rateitem" @tap="taprate('DISSATISFIED')">
					不满意
				</view>
			</view> -->
		</u-popup>
		<u-popup v-model="lookrateshow" mode="bottom" length="60%" border-radius="20" :closeable='true' class='masks'>
			<image :src="baseurl+rateimgtitle.img" mode=""></image>
			<view class="ratetitle">
				{{rateimgtitle.title}}
			</view>
			<view class="mask" style="top: 450rpx;">
				<u-rate :count="5" v-model="rateval" :size='70' active-color='#F4EA2A' disabled></u-rate>
			</view>
			<view class="rateitem" style="top: 580rpx;">
				{{rateval==5?'非常满意':''}}
				{{rateval==4?'满意':''}}
				{{rateval==3?'一般':''}}
				{{rateval==2?'差':''}}
				{{rateval==1?'非常差':''}}
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import {
		appletAppointmentOrderPay
	} from '@/api/appointmenttime/appointmenttime.js'
	import baseurl from '@/api/baseurl.js'
	import {
		getAppointmentDetailsInfo,
		addAppointmentEvaluate,
		handCloseOrder
	} from '@/api/ServiceDetails/ServiceDetails.js'
	import {
		lookrate
	} from '@/api/lookrate/index.js'
	export default {
		data() {
			return {
				rateshow: false, //评价
				rateval: 0, //评价星数
				evaluateSatisfaction: null, //非常差/差/一般/满意/非常满意
				baseurl: '',
				patientId: '', //id
				openid: '', //id
				list: null,
				orderNo: '',
				timer: null,
				timestamp: 0,
				timecount: 0,
				lookrateshow: false, //查看评价
				ratelist: null,
				rateimgtitle: {
					img: null,
					title: null,
				},
				Timers: null,
			}
		},
		onUnload() {
			clearInterval(this.Timers); //清除该函数
		},
		onShow() {
			this.getlist()
		},
		onLoad(options) {
			this.baseurl = baseurl
			this.orderNo = options.orderNo
			var that = this
			const value = uni.getStorageSync('patientId');
			const value2 = uni.getStorageSync('openid');
			if (value && value2) {
				that.patientId = value
				that.openid = value2
			}
			this.getlist()
			if (this.timecount > 0) {
				this.Timers = setInterval(() => {
					this.timecount--;
				}, 1000)
			}
		},
		watch: { //监听
			timecount() {
				if (this.timecount <= 0) {
					clearInterval(this.Timers); //清除该函数
					handCloseOrder().then(res => {
						this.list.orderStatus = 'CANCEL'
					})
				}
			},
			rateval() {
				if (this.rateval == 5) {
					this.evaluateSatisfaction = 'VERYSATISFIED'
				} else if (this.rateval == 4) {
					this.evaluateSatisfaction = 'SATISFIED'
				} else if (this.rateval == 3) {
					this.evaluateSatisfaction = 'COMMONLY'
				} else if (this.rateval == 2) {
					this.evaluateSatisfaction = 'DISSATISFIED'
				} else if (this.rateval == 1) {
					this.evaluateSatisfaction = 'VERYDISSATISFIED'
				}
			},
		},
		methods: {
			//去评价
			rateshowtrue() {
				this.rateval = 0
				this.evaluateSatisfaction = null
				this.rateshow = true
			},
			//查看评价
			lookrate(item) {
				this.rateval = 0
				this.evaluateSatisfaction = null
				this.rateimgtitle.img = item.itemPictureUrl
				this.rateimgtitle.title = item.nurseItemName
				lookrate(item.orderNo).then(res => {
					this.ratelist = res.data
					this.rateval = res.data.compositeScore
					this.lookrateshow = true
				})
			},
			//支付
			buy() {
				let obj = {
					patientId: this.patientId,
					openid: this.openid,
					orderNo: this.list.orderNo,
					orderChannel: "WECHAT_APPLET",
					paymentPrice: this.list.totalPrice,
					payType: "WECHAT_PAY",
					buySource: "NURSE_STATION",
				}
				var that = this
				appletAppointmentOrderPay(obj).then(response => {
					if (response.code == 200) {
						uni.requestPayment({
							timeStamp: response.data.timeStamp,
							nonceStr: response.data.nonceStr,
							package: response.data.prepayId,
							signType: response.data.signType,
							paySign: response.data.paySign,
							success: function(res) {
								uni.setStorageSync("Refresh", 'Refresh')
								that.getlist()
								that.$refs.uToast.show({
									title: '支付成功',
									type: 'success',
									duration: 1500,
									url: `/pages/paysuccess/paysuccess?delta=${3}`
								})
							},
							fail: function(err) {
								that.$refs.uToast.show({
									title: '取消支付',
									type: 'error',
									duration: 1500,
								})
							}
						});
					} else {
						this.$refs.uToast.show({
							title: response.msg,
							type: 'error',
							duration: 2000
						})
					}
				})
			},
			//评价
			taprate() {
				var obj = {
					"patientId": this.patientId,
					"openid": this.openid,
					"orderNo": this.orderNo,
					"evaluateChannel": "WE_CHAT_APPLET",
					"evaluateSatisfaction": this.evaluateSatisfaction,
					"compositeScore": this.rateval
				}
				addAppointmentEvaluate(obj).then(res => {
					if (res.code == 200) {
						this.getlist();
						this.$refs.uToast.show({
							title: '评价成功',
							type: 'success',
							duration: '1500'
						})
						this.rateshow = false
						uni.setStorageSync("Refresh", 'Refresh')
						if (this.timer) {
							clearTimeout(this.timer)
						}
						this.timer = setTimeout(e => {
							uni.navigateTo({
								url: `/pages/ratesuccess/ratesuccess?delta=${1}`
							})
						}, 1500)
					} else {
						this.$refs.uToast.show({
							title: '评价失败',
							type: 'error',
							duration: '1500'
						})
					}
				})
			},
			//打电话
			gophone() {
				var that = this
				uni.getSystemInfo({
					success: function(res) {
						if (res.platform == 'ios') {
							uni.makePhoneCall({
								phoneNumber: that.list.stationPhone //仅为示例
							});
						} else {
							uni.showActionSheet({
								itemList: ['呼叫', ],
								success: function(res) {
									if (res.tapIndex + 1 == 1) {
										uni.makePhoneCall({
											phoneNumber: that.list.stationPhone //仅为示例
										});
									}
								},
								fail: function(res) {}
							});
						}
					}
				});
			},
			// 信息
			getlist() {
				getAppointmentDetailsInfo(this.orderNo).then(res => {
					this.list = res.data
					var ordertimes = this.list.createTime.replaceAll(/\-/gi, "/")
					var time = new Date(ordertimes).getTime() / 1000 + (60 * 60 * 2)
					var times = new Date().getTime() / 1000
					this.timestamp = time - times
					this.timecount = this.timestamp
				})
			},
			cancelorderment() {
				uni.navigateTo({
					url: `/pages/cancelorder/cancelorder?nurseItemPrice=${this.list.totalPrice}&appointmentOrderId=${this.list.appointmentOrderId}`
				})
			},
		}
	}
</script>

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