CjyTravel/subPageC/bookShop/bookShop.vue

<template>
	<view class="v-pages bgcolor p-b-24">
		<view class="v-card order small container-fluid m-t-24" style="padding-bottom: 60rpx;">
			<view>{{orderInfo.goodsName}}</view><!-- 商品名称 -->
			<view>{{orderInfo.price}}</view><!-- 单价 -->
			<view>{{orderInfo.merchantId}}</view><!-- 商户id -->
			<view>{{orderInfo.merchantName}}</view><!-- 商户名称 -->
		</view>
		<view class="v-card order small container-fluid m-t-24">
			<view class="v-order-title m-b-24">
				<view class="text"><text>信息</text></view>
			</view>
			<uni-forms class="v-order-form" ref="form" :modelValue="formData">
				<uni-forms-item label="联系人" name="name">
					<uni-easyinput class="v-input" type="text" :inputBorder="false" placeholderStyle="fontSize:24rpx"
						v-model="formData.name" placeholder="请输入联系人姓名" />
				</uni-forms-item>
				<uni-forms-item label="联系电话" name="phoneNumber">
					<uni-easyinput class="v-input" type="number" :inputBorder="false" placeholderStyle="fontSize:24rpx"
						v-model="formData.phoneNumber" placeholder="请输入手机号码" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="v-card order small bg1 container-fluid m-t-24">
			<view class="v-order-title">
				<view class="text"><text>下单说明</text></view>
			</view>
			<view class="m-t-24 v-form-content">订单需等待商家确认后才生效，订单确认结果以平台订单信息为准。</view>
		</view>

		<view class="v-order-submit row flex-align-center">
			<view class="col price">
				<text class="text">总价</text>
				<text class="yuan">&yen;</text>
				<text class="number">{{totalPrice}}</text>
			</view>
			<view class="btn" @click="orderSubmit">提交订单</view>
		</view>
		<u-popup :show="isPayPopup" mode="bottom" @close="closePay" round="10">
			<f-pay :show-title="false" :show="isPayPopup" :order="orderPay"
				:payMoney="orderPay.orderAmount" :tradeNo="orderPay.orderNumber"
				@payResult="payResult"></f-pay>
		</u-popup>
	</view>
</template>

<script>
	import fPay from "../components/f-pay/f-pay";
	import uPopup from "../components/uview-ui/components/u-popup/u-popup.vue";

	export default {
		components: {
			fPay,
			uPopup
		},
		data() {
			return {
				//是否支付弹窗
				isPayPopup: false,

				orderInfo: {},
				formData: {
					name: undefined,
					phoneNumber: undefined
				},
				orderPay: undefined,
				totalPrice: undefined, //总价格
				totalNum:undefined, //总数量
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '联系人姓名不能为空！',
						}]
					},
					phoneNumber: {
						rules: [{
								required: true,
								errorMessage: '联系手机不能为空！',
							},
							{
								validateFunction: function(rule, value, data, callback) {
									const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
									if (reg.test(value) == false) {
										callback('请输入正确的手机号码！')
									}
									return true
								}
							}
						]
					}
				}
			}
		},
		onReady() {
			// 需要在onReady中设置规则
			this.$refs.form.setRules(this.rules)
		},
		onLoad(options) {
			const shop = JSON.parse(decodeURIComponent(options.shop));
			this.orderInfo = shop
		},
		methods: {
			orderSubmit() {
				this.$refs.form.validate().then(res => {

					const extConfig = uni.getExtConfigSync ? uni.getExtConfigSync() : {};
					let appId = extConfig.app_id

					var data = {
						"customerName":this.formData.name,
						"customerPhone": this.formData.phoneNumber,
						"openid": this.orderInfo.openid,
						"appid": appId,
						"tenantId": "1",
						"merchantId":this.orderInfo.merchantId,
						"merchantName":this.orderInfo.merchantName,
						"orderAmount":this.totalPrice,
						"goodsId":this.orderInfo.id,
						"goodsNum":this.orderInfo.goodsNum
					};

					this.$Request.post(this.$config.createMerchantOrder, data, 'json', null, false, true).then((
						res) => {
						if (res.code == 0) {
							this.orderPay = res.data							
							this.payOrder()
						} else if (res.code == 600) {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: "网络拥挤，请稍后重试",
								icon: 'none',
								duration: 2000
							})
						}
					});

				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},

			payOrder(val) {
				console.log("订单==========", val)
				this.isPayPopup = true
			},

			//支付结果
			payResult(data) {
				if (data.payStatus == 1) {
					uni.showToast({
						title: '支付成功',
						icon: 'none'
					});					
					setTimeout(() => {
						uni.redirectTo({
							url: "/subPageC/orderHomestay/orderList"
						});
						this.isPayPopup = false
					}, 1000)
				} else {
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					});
					setTimeout(() => {
						uni.redirectTo({
							url: "/subPageC/orderHomestay/orderList"
						});
						this.isPayPopup = false
					}, 1000)
				}
				//uni.showToast({title: data.detail.errMsg,icon:'none'});
			},
			
			closePay() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定取消支付？',
					cancelText: '再想想',
					showCancel: true,
					success: function(res) {
						if (res.confirm) {							
							setTimeout(() => {
								uni.redirectTo({
									url: "/subPageC/orderHomestay/orderList"
								});
								that.isPayPopup = false
							}, 500)
						} else if (res.cancel) {
							console.log('用户点击取消');
							that.isPayPopup = false
						}
					}
				})
			}			
		}
	}
</script>

<style lang="scss" scoped>
</style>