mabao/pages/order/payment.vue

<template>
	<view>
		<!-- 弹窗  v-model双向绑定值 mode弹出位置 border-radius弹出层圆角-->
		<u-popup v-model="popupShow" mode="center" border-radius="14" width="80%" height="40%" close-icon-pos="top-left"
		 :closeable="true" close-icon-color="#333333" negative-top="250">
			<view style="height: 100%;width: 100%;">
				<!-- 标题占20% -->
				<view style="height: 20%;width: auto;">
					<text style="font-size: 30rpx;font-weight: bold;display: flex;justify-content: center;align-items: flex-end;height: 100%;">超级妈力</text>
				</view>
				<!-- 金额占30% -->
				<view style="height: 30%;width: auto;border-bottom: 1rpx solid #EFEFEF;margin-left: 20rpx;margin-right: 20rpx;">
					<text style="font-size: 78rpx;font-weight: 700;display: flex;justify-content: center;align-items: center;height: 100%;">¥{{norderAmount}}</text>
				</view>
				<!-- 支付方式占20% -->
				<view style="height: 20%;width: auto;padding-left: 40rpx;">
					<view style="font-size: 30rpx;display: flex;align-items: center;height: 100%;">
						<text>余额支付 (余额¥{{info.balance/100}}元)</text>
						<!-- <text v-else>微信支付</text> -->
					</view>
				</view>
				<!-- 按钮占25% -->
				<!-- <view style="height: 25%;width: auto;">
					<view style="display: flex;justify-content: center;align-items: center;height: 100%;">
						<u-button type="primary" style="width: 100%;" @click="payment">确认支付</u-button>
					</view>
				</view> -->
				<u-message-input :maxlength="maxnum" :disabled-keyboard="true" :value="password" mode="bottomLine" :breathe="true"
				 :focus="true" :dot-fill="true"></u-message-input>
			</view>
		</u-popup>
		<uni-list :border="false">
			<image src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/caixian.png" style="width: 100%; height: 5rpx; background-color: #FFFFFF;"></image>
			<uni-list-item :border="false">
				<view slot="header" style="color:#666666 ; font-size: 28rpx;">
					<text v-if="infodata.product_type == '1' ">{{infodata.doctorname}} 电话咨询</text>
					<text v-if="infodata.product_type == '2' ">{{infodata.doctorname}} 图文咨询</text>
					<text v-if="infodata.product_type == '3' ">{{infodata.doctorname}} 门诊预约</text>
					<text v-if="infodata.product_type == '4' ">疫苗接种预约</text>
					<text v-if="infodata.product_type == '5' ">儿保预约</text>
					<text v-if="infodata.product_type == '6' ">服务包</text>
				</view>
				<view slot="footer" style="color:#FF4F61 ;font-weight: 500;">
					{{orderAmount}}
				</view>
			</uni-list-item>
			<!-- 线条 -->
			<u-line color="#EFEFEF" />
			<uni-list-item :border="false" :link="true">
				<view slot="header" style="color:#666666 ; font-size: 28rpx;">
					优惠券
				</view>
				<view slot="footer" style="font-size: 30rpx;">
					{{coupon}}
				</view>
			</uni-list-item>
		</uni-list>
		<u-gap height="20" bg-color="#F6F6F6"></u-gap>
		<uni-list :border="false">
			<uni-list-item :border="false">
				<view slot="header" style="font-size: 28rpx; font-weight: 500;color: #666666;">支付方式</view>
			</uni-list-item>
			<!-- 加一个单选 -->
			<u-radio-group v-model="value" v-for="(item, index) in paymenMethod">
				<uni-list-item :border="false" @click="value=item.name" :clickable="true">
					<view slot="header">
						<text style="font-size: 28rpx;font-weight: 400;color: #333333;">{{item.name}}</text>
					</view>
					<view slot="footer">
						<u-radio @change="radioChange" :key="index" :name="item.name" :disabled="item.disabled">
						</u-radio>
					</view>
				</uni-list-item>
				<u-line color="#EFEFEF" />
			</u-radio-group>
		</uni-list>
		<!-- 按钮 -->
		<view class="cu-bar bg-white tabbar border shop" style="position: fixed; bottom: 0; z-index: 99;width: 100%;">
			<view class="" style="width:75%;">
				<text style="padding-left: 30rpx;font-size: 32rpx;">合计：</text>
				<text style="padding-left: 20rpx;font-size: 36;font-weight: 500;color: #FF4F61;">{{orderAmount}}</text>
			</view>
			<view class="submit text-white" @click="popupShow=true,show=true" style="background-color: rgb(11,115,186); font-size: 32rpx;">确认支付</view>
		</view>
		<u-keyboard @change="valChange" @backspace="backspace" ref="uKeyboard" mode="number" v-model="popupShow" :tooltip="false"
		 :mask="false"></u-keyboard>
	</view>
</template>

<script>
	import store from '@/store'
	export default {
		onLoad(op) {
			this.infodata = JSON.parse(op.data)
			this.norderAmount = this.infodata.total_amount
			console.log(this.infodata)
		},
		mounted() {
			this.getUserInfo()
		},
		data() {
			return {
				//医生名称
				doctorName: '',
				ndoctorName: '渣渣宝',
				//订单金额
				orderAmount: '',
				norderAmount: 19.9,
				//优惠券
				coupon: '不使用优惠券',
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: '钱包余额支付',
				paymenMethod: [{
					name: '钱包余额支付',
					disabled: false
				}],
				//弹出层控制
				popupShow: false,
				//订单类型
				//支付数据类型
				infodata: {},
				info: {},
				show: false,
				maxnum: 6,
				password: ""
			}
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			//充值
			recharge(e) {

			},
			click(e) {
				console.log(e)
			},
			getUserInfo: async function() {
				let res = await this.$request.post('/api/v1/user/userInfo')
				if (res.status == 0) {
					this.info = res.data
					console.log(this.info)
				}
			},
			payyuyue: async function() {
				let res = await this.$request.post("/api/v1/order/appointPlaceOrder", {
					product_type: this.infodata.product_type,
					docter_id: this.infodata.docter_id,
					patient_id: this.infodata.patient_id,
					total_amount: this.infodata.total_amount * 100,
					organization_id: this.infodata.organization_id,
					schedule_date: this.infodata.schedule_date,
					time_period_id: this.infodata.time_period_id,
					payment_type: this.infodata.payment_type,
					pay_password:this.password
				})
				if (res.status == 0) {
					this.popupShow = false
					this.show = false
					uni.showToast({
						title: "支付成功!",
						duration: 1500
					})
					setTimeout(() => {
						uni.redirectTo({
							url: "order?type=" + this.infodata.product_type
						})
					}, 1500)
				}
			},
			paypacks: async function() {
				let res = await this.$request.post("/api/v1/order/packPlaceOrder", {
					patient_id: this.infodata.patient_id,
					total_amount: this.infodata.total_amount * 100,
					service_pack_id: this.infodata.service_pack_id,
					is_security: this.infodata.is_security,
					guardian_name: this.infodata.guardian_name,
					relationship_type: this.infodata.relationship_type,
					payment_type: this.infodata.payment_type,
					pay_password:this.password
				})
				console.log(res)
				if (res.status == 0) {
					this.popupShow = false
					this.show = false
					uni.showToast({
						title: "支付成功!",
						duration: 1500
					})
					setTimeout(() => {
						uni.redirectTo({
							url: "order?type=" + this.infodata.product_type
						})
					}, 1500)
				}
			},
			payphone: async function() {
				let res = await this.$request.post("/api/v1/order/consultPlaceOrder", {
					product_type: this.infodata.product_type,
					docter_id: this.infodata.docter_id,
					patient_id: this.infodata.patient_id,
					total_amount: this.infodata.total_amount * 100,
					phone: this.infodata.phone,
					phone_minutes: this.infodata.phone_minutes,
					payment_type: 2,
					pay_password:this.password
				})
				console.log(res)
				if (res.status == 0) {
					this.popupShow = false
					this.show = false
					uni.showToast({
						title: "支付成功!",
						duration: 1500
					})
					setTimeout(() => {
						uni.redirectTo({
							url: "order?type=" + this.infodata.product_type
						})
					}, 1500)
				}
			},
			paychat: async function() {
				let res = await this.$request.post("/api/v1/order/consultPlaceOrder", {
					product_type: this.infodata.product_type,
					docter_id: this.infodata.docter_id,
					patient_id: this.infodata.patient_id,
					total_amount: this.infodata.total_amount * 100,
					symptoms: this.infodata.symptoms,
					medical_imgs: JSON.stringify(this.infodata.medical_imgs),
					payment_type: 2,
					pay_password:this.password
				})
				if (res.status == 0) {
					this.popupShow = false
					this.show = false
					uni.showToast({
						title: "支付成功!",
						duration: 1500
					})
					setTimeout(() => {
						uni.redirectTo({
							url: "order?type=" + this.infodata.product_type
						})
					}, 1500)
				}
			},
			//点击确认支付
			payment(e) {
				if (this.infodata.product_type == 1) {
					this.payphone()
				} else if (this.infodata.product_type == 2) {
					this.paychat()
				} else if (this.infodata.product_type == 6) {
					this.paypacks()
				} else if(this.infodata.product_type == 3){
					this.payyuyue()
				}
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.password += val;
				console.log(this.password)
				if (this.password.length == 6) {
					this.payment()
				}
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if (this.password.length) this.password = this.password.substr(0, this.password.length - 1);
				console.log(this.password);
			}
		},
		onShow() {
			this.orderAmount = this.norderAmount + "元"
		},
		onHide() {
			this.popupShow = false
		},
	}
</script>

<style>
	/* 支付文字 */
	.paymentText {
		height: 60rpx;
		width: auto;
		background-color: #FFFFFF;
		padding: 30rpx 0 0 30rpx;
		font-size: 24rpx;
	}
</style>