jiangchengfeiyi-xiaochengxu/pages/book/component/confirmBookingInfo.vue

<template>
	<view class="flex-col page">
	  <text class="self-center text">请确认您的预约信息</text>
	  <text class="self-start font text_2">写真产品：{{ orderObj.name }}</text>
	  <text class="self-start font text_3">拍摄时间：{{ orderObj.bookingDate }} {{ orderObj.bookingTime }}</text>
	  <text class="self-start font text_4">妆造服务：{{ orderObj.isMakeup ? '本店上妆' : '无需妆造' }}</text>
	  <text class="self-start font text_5">拍摄场地：{{ orderObj.scene }}</text>
	  <view @click="closeConfirmBookingPopup" class="flex-col justify-start items-center self-stretch text-wrapper">
	    <text class="font text_6">确定</text>
	  </view>
	</view>
</template>

<script setup>
import { onMounted, onUnmounted, ref } from 'vue';
import emitter from '../../../utils/emitter';
import { baseUrl } from '../../../api/request';
import { dealResult } from '../../../common/globalFunction';
import { onLoad } from "@dcloudio/uni-app";
import { getFonts } from '../../../common/globalFont';

onLoad(() => {
	getFonts()
})


const cookie = wx.getStorageSync("cookie")  //请求头
	
	const orderObj = ref({})
	const getBookingOrderDataHandler = (val) => {
		orderObj.value = val
		console.log(val)
	}
	
	onMounted(() => {
		emitter.on('getBookingOrderData', getBookingOrderDataHandler)
	})
	
	onUnmounted(() => {
		emitter.off('getBookingOrderData', getBookingOrderDataHandler)
	})

	const closeConfirmBookingPopup = async () => {
		emitter.emit('closeConfirmBookingInfo')
		emitter.emit('openMask')
		await createOrder()
	}

	
	const createOrder = async () => {
		
		const res = await uni.request({
			url: baseUrl + '/advanceOrder/add',
			method: 'POST',
			header: {
				cookie
			},
			data: {
			  photoProductId: orderObj.value.id,
			  contactsId: orderObj.value.contactId,
			  bookingDateId: orderObj.value.bookingDateId,
			  bookingTimeId: orderObj.value.bookingTimeId,
			  isIndoors: orderObj.value.scene === '室内' ? 1 : 0,
			  isMakeup: orderObj.value.isMakeup ? 1 : 0
			}
		})
		console.log('订单id==========================>', res.data.data)
		if (!dealResult(res)) {
			emitter.emit('closeMask')
			return 
		} 
		wxPay(res.data.data)
	}
	
	
	const wxPay = async ( oid )=> {  //传入订单id
		try {
			const res = await uni.request({
				url: baseUrl + '/wechat/payment/photo/create',
				method: 'POST',
				header: {
					'cookie': wx.getStorageSync("cookie")
				},
				data: { id: oid }
			})
			const paymentData = res.data.data
			wx.requestPayment({
				appid: paymentData.appId,
				nonceStr: paymentData.nonceStr,
				package: paymentData.packageVal,
				paySign: paymentData.paySign,
				timeStamp: paymentData.timeStamp,
				signType: paymentData.signType,
				success(res) {
					uni.showModal({
						content: '支付成功',
						showCancel: false
					})
					console.log('支付成功res--->',res);
				},
				fail(e) {
					uni.showModal({
						content: '支付失败，原因为:' + e.errMsg,
						showCancel: false
					})
					console.log('e.errMsg--->',e.errMsg);
				},
				complete() {
					uni.redirectTo({
						url: '/pages/book/photoProductsOrderDetail/photoProductsOrderDetail'
					})
				}
			})
			
		}catch(error) {
			console.error('支付请求失败',error);
			uni.showModal({
				content: '支付请求失败,请重试',
				showCancel: false
			})
		}
	}
</script>

<style scoped lang="scss">
	
	.page {
	  padding: 56.46rpx 59.18rpx;
	  background-color: #ffffff;
	  border-radius: 41.2rpx;
	  box-shadow: 0rpx 9.49rpx 9.49rpx #00000061;
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden;
	  height: 100%;
	}
	.text {
	  color: #000000;
	  font-size: 37.72rpx;
	  font-family: FangZhengFonts;
	  line-height: 41.72rpx;
	}
	.font {
	  font-size: 30.97rpx;
	  font-family: FangZhengFonts;
	  line-height: 35.46rpx;
	  color: #000000;
	}
	.text_2 {
	  margin-top: 61.71rpx;
	  line-height: 36.93rpx;
	}
	.text_3 {
	  margin-top: 37.97rpx;
	}
	.text_4 {
	  margin-top: 37.97rpx;
	  line-height: 34.41rpx;
	}
	.text_5 {
	  margin-top: 37.97rpx;
	  line-height: 35.01rpx;
	}
	.text-wrapper {
	  margin: 66.46rpx 37.97rpx 0;
	  padding: 28.48rpx 0;
	  background-color: #e79ea1;
	  border-radius: 94.94rpx;
	}
	.text_6 {
	  color: #ffffff;
	}
	@import url(../../../common/css/global.css);
</style>