mz/pages/patient/appointment.vue

<template>
	<view class="content">
		<view class="top">
			<!-- 病人姓名 -->
			<view class="input_box flex_item">
				<view class="input_left">病人姓名：</view>
				<input type="text" value="" placeholder="请输入病人真实姓名" class="input_right" />
			</view>
			<!-- 联系电话 -->
			<view class="input_box flex_item">
				<view class="input_left">联系电话：</view>
				<input type="number" value="" placeholder="请输入联系电话" class="input_right" />
			</view>
			<!-- 预约时间 -->
			<view class="input_box flex_item">
				<view class="input_left">主营项目：</view>
				<input type="text" value="" placeholder="请输入详细预约时间" class="input_right" />
			</view>
			<!-- 详细地址 -->
			<view class="input_box flex_item">
				<view class="input_left">详细地址：</view>
				<input type="text" value="" placeholder="请输入预约的详细地址" class="input_right" />
			</view>
		</view>
		<!-- 提交按钮 -->
		<view class="sub-bottom" @click="payopen">提交预约</view>
		<!-- 支付弹窗 -->
		<!-- 支付弹出窗 -->
		<uni-popup ref="popup" 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">200.0</text>
					</view>
					<view class="two2" @click.stop="confirm"><text>立即支付</text></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	components: {
		uniPopup
	},
	data() {
		return {
			payType: '1', //支付类型
			payName: 'weixin',
		};
	},
	methods: {
		//选择支付方式
		changePayType(type) {
			this.payType = type;
			if (this.payType == 1) {
				this.payName = 'weixin';
			}
			if (this.payType == 2) {
				this.payName = 'yue';
			}
			console.log(this.payName,"payName")
		},
		//确认支付
		confirm: async function() {
			// let obj = this;
			// // 判断是否余额不足
			// if (obj.payName == 'yue' && +obj.now_money < obj.money) {
			// 	uni.showModal({
			// 		title: '提示',
			// 		content: '账户余额不足！',
			// 		showCancel: false,
			// 		success: res => {},
			// 		fail: () => {},
			// 		complete: () => {}
			// 	});
			// 	return;
			// }
			// // #ifdef H5
			// // 获取当前是否为微信浏览器
			// obj.froms = uni.getStorageSync('weichatBrowser') || '';
			// // #endif
			// firstCreateOrder();
			 // window.location.href = "http://192.168.0.102/wap/service/service_ing/to_uid/1"
			 uni.navigateTo({
			 	url: '/pages/order/success'
			 });
		},
		// 初次订单创建
		firstCreateOrder() {
			let obj = this;
			// 获取下单页面数据
			let data = {
				payType: obj.payName, //支付类型  weixin-微信 yue-余额
				// #ifdef H5
				from: obj.froms ? 'weixin' : 'H5', //来源
				// #endif
				// #ifdef MP-WEIXIN
				from: 'routine', //来源
				// #endif
				// #ifdef APP-PLUS
				from: 'app', //来源
				// #endif
			};
			// 生成订单
			createOrderkey(data)
				.then(({ data, status, msg }) => {
					// 判断是否为余额支付
					if (obj.payName == 'yue') {
						if (status == 200&&data.status == 'SUCCESS') {
							// obj.paySuccessTo();
						} else {
							obj.$api.msg(msg);
						}
					} else {
						// 立即支付
						obj.orderMoneyPay();
					}
				})
				.catch(e => {
					console.log(e);
				});
		},
		// 支付金额
		orderMoneyPay() {
			let obj = this;
			orderPay({
				uni: obj.orderId,
				// #ifdef H5
				from: obj.froms ? 'weixin' : 'H5', //来源
				// #endif
				// #ifdef MP-WEIXIN
				from: 'routine', //来源
				// #endif
				// #ifdef APP-PLUS
				from: 'app', //来源
				// #endif
				paytype: obj.payName //支付类型  weixin-微信 yue-余额
			}).then(e => {
					// 判断是否为余额支付
					if (obj.payName == 'yue') {
						if (e.status == 200) {
							// obj.paySuccessTo();
						} else {
							obj.$api.msg(msg);
						}
					}
					// #ifdef H5
					if (obj.payName == 'weixin') {
						let da = e.data.result.jsConfig;
						obj.weichatObj.chooseWXPay({
							timestamp: da.timestamp,
							nonceStr: da.nonceStr,
							package: da.package,
							signType: da.signType,
							paySign: da.paySign,
							success: function(res) {
								// obj.paySuccessTo();
							},
							fail: function (res) {
								console.log(res,"失败")
								console.log(res.errMsg)	
							}
						});
					}
					// #endif
					// #ifdef MP-WEIXIN
					if (obj.payName == 'weixin') {
						let da = e.data.result.jsConfig;
						wx.requestPayment({
							timeStamp: da.timestamp,
							nonceStr: da.nonceStr,
							package: da.package,
							signType: da.signType,
							paySign: da.paySign,
							success: function(res) {
								// obj.paySuccessTo();
							}
						});
					}
					// #endif
				})
				.catch(e => {
					// 支付完成
					console.log(e.message)
					if(e.message == "该订单已支付!"){
						// obj.paySuccessTo();
					}
				});
		},
		//支付弹窗
		payopen() {
			this.$refs.popup.onTap();
			this.$refs.popup.open();
		},
		//支付支付弹窗
		payclose() {
			this.$refs.popup.close();
		},
	}
};
</script>

<style lang="scss">
.content {
	padding-top: 25rpx;
}
.top {
	width: 90%;
	margin: 0rpx auto;
	background: #FFFFFF;
	border-radius: 10rpx;
}

//输入框样式
.input_box {
	font-size: 28rpx;
	border-bottom: 1rpx solid rgba(240, 240, 240, 1);
	padding: 37rpx 28rpx;
	.input_left {
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
	}
	.input_right {
		font-size: 28rpx;
	}
}
.sub-bottom {
	width: 560rpx;
	height: 80rpx;
	background: $background-color;
	box-shadow: 0px 0px 13rpx 3rpx rgba(209, 212, 217, 0.31);
	border-radius: 40rpx;
	font-size: $font-lg - 2rpx;
	font-weight: 500;
	color: rgba(255, 255, 255, 1);
	line-height: 80rpx;
	text-align: center;
	margin: 123rpx auto 0;
}

.payment {
	background-color: #ffffff;
	border-radius: 15rpx 15rpx 0rpx 0rpx;
	.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;
		}
	}
	.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;
		}
	}
	.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;
		}
	}
}
.flex {
	display: flex;
	align-items: center;
}
.flex1 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
</style>