mz/pages/patient/evaluate.vue

<template>
	<view class="content">
		<view class="equity_box">
			<view class="text-box uni-textarea">
				<textarea auto-height placeholder-style="color:#999" maxlength="-1" :placeholder="placeholder" @blur="bindTextAreaBlur"></textarea>
			</view>
			<view class="flex_item zhil">
				<view>评分</view>
				<view><uniRate text="1" size="20" margin="10" :value="rateValue" @change="rateChange"></uniRate></view>
			</view>
		</view>
		<view @click.stop="submit" class="submit-btn">提交评论</view>
		<!-- 打赏金额弹出层 -->
		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="row">
					<view class="row-1">给医生打打赏吧</view>
					<input class="row-2" type="number" v-model="money" placeholder="请输入打赏金额" />
					<button class="row-3 flex" @click="Reward">立即打赏</button>
					<view class="close_icon" @click="close">残忍跳过</view>
				</view>
			</view>
		</uni-popup>
		<!-- 支付弹窗 -->
		<uni-popup ref="popup2" style="z-index: 999;" type="bottom">
			<view class="payment">
				<view class="first flex " @click="payclose()">
					<text class="word">选择支付方式</text>
					<image src="../../static/img/img25.png"></image>
				</view>
				<view class="pay-type-list">
					<view class="type-item b-b" @click="changePayType(1)">
						<view class="img"><image class="yue" src="../../static/img/img26.png"></image></view>
						<view class="con"><text class="tit">微信支付</text></view>
						<label class="radio"><radio value="" color="#FC4141" :checked="payType == 1"></radio></label>
					</view>
					<view class="type-item flex_item" @click="changePayType(2)">
						<view class="img"><image class="yue" src="../../static/img/img017.png"></image></view>
						<view class="con"><text class="tit">余额支付</text></view>
						<label class="radio"><radio value="" color="#FC4141" :checked="payType == 2"></radio></label>
					</view>
				</view>
				<view class="one"></view>
				<view class="Third flex">
					<view class="two1">
						<text class="two1-1 ">合计：</text>
						<text class="two1-2">￥</text>
						<text class="two1-2 size">{{ money }}</text>
					</view>
					<view class="two2" :class="{ clickbg: payLoding }" @click.stop="!payLoding ? confirm() : ''"><text>立即支付</text></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { comment } from '@/api/patient.js';
import uniRate from '@/components/uni-rate/uni-rate.vue';
import { reward } from '@/api/patient.js';
export default {
	components: {
		uniRate
	},
	data() {
		return {
			order_id: '', //订单id
			text: '', //评论内容
			rateValue: '', //评分
			placeholder: '说说你的就医体验，分享给更多的病友吧',
			
			money:'',
			payType: 1, //支付类型
			payLoding: false, //判断是否支付中
			// #ifdef H5
			froms: '', //当前是否为微信浏览器
			// #endif
			type: '', //判断是否从订单中进入
		};
	},
	onLoad(option) {
		this.order_id = option.id;
	},
	onShow() {},
	methods: {
		//评论内容
		bindTextAreaBlur: function(e) {
			this.text = e.detail.value;
		},
		//评分
		rateChange(val) {
			this.rateValue = val.value;
		},
		//提交评论
		submit(e) {
			let obj = this;
			console.log(obj.text, 22);
			obj.open();
			comment({
				comment: obj.text,
				score: obj.rateValue,
				order_id: obj.order_id
			})
				.then(e => {
					obj.open();
				})
				.catch(e => {
					console.log(e.message);
				});
		},
		//打开打赏弹窗
		open() {
			this.$refs.popup.open();
		},
		//关闭打赏弹窗
		close() {
			this.$refs.popup.close();
			uni.switchTab({
				url: '/pages/patient/patient'
			});
		},
		//立即打赏
		Reward() {
			if (this.money == '') {
				this.$api.msg('请输入打赏金额');
				return;
			}
			this.$refs.popup.close();
			this.payopen();
		},
		//打开支付弹窗
		payopen() {
			this.$refs.popup2.onTap();
			this.$refs.popup2.open();
		},
		//关闭支付弹窗
		payclose() {
			this.$refs.popup2.close();
			uni.switchTab({
				url: '/pages/patient/patient'
			});
		},
		//选择支付方式
		changePayType(type) {
			this.payType = type;
		},
		//确认支付
		confirm: async function() {
			let obj = this;
			// 支付中
			obj.payLoding = true;
			// #ifdef H5
			// 获取当前是否为微信浏览器
			obj.froms = uni.getStorageSync('weichatBrowser') || '';
			// #endif
			obj.CreateOrder();
		},
		//订单创建
		CreateOrder() {
			let obj = this;
			// 生成订单
			reward({
				order_id: obj.order_id, //
				money: obj.money, //医生类型 1 普通预约 2 私人医生
				pay_type: obj.payType //支付类型  1是微信 2是余额
			})
				.then(data => {
					// 判断是否为余额支付
					if (obj.payType == 2) {
						if (data.code == 200) {
							if (data.msg == '余额支付成功') {
								obj.$api.msg('打赏成功');
								setTimeout(function() {
									uni.switchTab({
										url: '/pages/patient/patient'
									});
								  }, 1000);
							}
						
							obj.loadData('Refresh');
							obj.payLoding = false;
						} else {
							obj.payLoding = false;
							obj.$api.msg(msg);
						}
					}
					if (obj.payType == 1) {
						console.log('orderMoneyPay', data);
						let item = data.data;
						// 立即支付
						obj.orderMoneyPay(item);
					}
				})
				.catch(e => {
					// 支付完成
					console.log(e.message);
					obj.payLoding = false;
					if (e.message == '该订单已支付!') {
						// obj.paySuccessTo();
					}
				});
		},
		// 页面跳转
		navto(e) {
			uni.navigateTo({
				url: e
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f8f6f6;
	height: 100%;
	.content {
		background: #f8f6f6;
		height: 100%;
		padding-top: 25rpx;
	}
}
.zhil {
	font-size: 28rpx !important;
	padding: 15rpx 15rpx;
	margin-top: 25rpx;
}
.equity_box {
	background-color: #ffffff;
	padding: 25rpx 25rpx;
	.text-box {
		min-height: 200rpx;
		textarea {
			font-size: 25rpx;
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 5;
		}
	}
}
.submit-btn {
	width: 80%;
	padding: 25rpx 0rpx;
	margin: 80rpx auto;
	text-align: center;
	background-color: #6786fb !important;
	box-shadow: 0rpx 8rpx 12rpx rgba(0, 0, 0, 0.16);
	border-radius: 56rpx;
	font-size: 39rpx;
	font-weight: bold;
	color: rgba(255, 255, 255, 1);
}
//弹窗
.popup {
	width: 536rpx;
	.img {
		width: 100%;
	}
	.row {
		background: #ffffff;
		padding: 45rpx 45rpx;
		border-radius: 25rpx;
		.row-1 {
			color: #323333;
			font-size: 36rpx;
			text-align: center;
			width: 100%;
			padding: 30rpx 0rpx;
			padding-bottom: 50rpx !important;
		}
		.row-2 {
			background: #eaeaea;
			padding: 15rpx 25rpx;
			font-size: 26rpx;
			height: 80rpx;
			border-radius: 15rpx;
		}
		.row-3 {
			width: 80%;
			margin: 20rpx auto;
			margin-top: 50rpx;
			background: linear-gradient(0deg, rgba(126, 153, 254, 1), rgba(151, 143, 250, 1));
			border-radius: 34rpx;
			justify-content: center;
			font-size: $uni-font-size-lg + 4rpx;
			font-weight: 500;
			color: #f8f9f9;
		}
		.close_icon {
			width:100%;
			text-align: center;
			font-size: 30rpx;
			padding-top: 80rpx;
			text-decoration:underline;
		}
	}
}
//支付弹窗

.pay-type-list {
	margin-top: 20upx;
	background-color: #fff;
	padding-left: 40upx;
	.type-item {
		height: 120upx;
		padding: 20upx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 60upx;
		font-size: 30upx;
		position: relative;
	}
	.icon {
		width: 100upx;
		font-size: 52upx;
	}
	.img {
		color: #fe8e2e;
		width: 50rpx;
		height: 50rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.tit {
		font-size: $font-lg;
		color: $font-color-dark;
		margin-bottom: 4upx;
	}
	.con {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding-left: 25rpx;
		font-size: $font-sm;
		color: $font-color-light;
	}
}
.payment {
	background-color: #ffffff;
	border-radius: 15rpx 15rpx 0rpx 0rpx;
	z-index: 999;
	.first {
		border-bottom: 2rpx solid $border-color-light;
		padding: 38rpx 25rpx;
		.word {
			font-size: $uni-font-size-base;
			font-weight: bold;
			color: $font-color-dark;
		}
		image {
			width: 25rpx;
			height: 25rpx;
		}
	}
	.one {
		height: 20rpx;
		background-color: #f6f6f6;
	}
	.Third {
		.two1 {
			width: 55%;
			background-color: #ffffff;
			padding-left: 25rpx;
			.two1-1 {
				font-size: $uni-font-size-base;
				font-weight: 400;
				color: $font-color-dark;
			}
			.two1-2 {
				font-size: $uni-font-size-sm;
				font-weight: bold;
				color: $color-red1;
			}
			.size {
				font-size: $uni-font-size-lg + 4rpx;
			}
		}
		.two2 {
			width: 45%;
			background: $color-red1;
			color: #ffffff;
			font-size: $uni-font-size-lg;
			font-weight: 550;
			text-align: center;
			padding: 30rpx 0rpx;
		}
		.clickbg {
			background-color: $color-gray !important;
		}
	}
}
</style>