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

<template>
	<view class="flex-col page">
	  <text class="self-center text">确认取消该订单？</text>
	  <view class="flex-row justify-between self-stretch mt-33">
	    <view class="flex-col justify-start items-center text-wrapper" @click="cancel"><text class="font text_2">取消</text></view>
	    <view class="flex-col justify-start items-center text-wrapper_2" @click="confirm"><text class="font text_3">确定</text></view>
	  </view>
	</view>
</template>

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

	const oid = ref(0)
	const cookie = wx.getStorageSync("cookie")  //请求头
	onMounted(() => {
		emitter.on('sendBookingOrderId', sendBookingOrderIdHandler)
	})
	
	const sendBookingOrderIdHandler = (orderId:any) => {
		oid.value = orderId
		console.log(oid.value)
	}
	
	onUnmounted(() => {
		emitter.off('sendBookingOrderId', sendBookingOrderIdHandler)
	})

	const cancelBookingOrder = async () => {
		const res = await uni.request({
			url: baseUrl + '/advanceOrder/cancel/id',
			method: 'POST',
			header: {
				cookie
			},
			data: {
				id: oid.value
			}
		})
		console.log(res.data.data)
	}
	const cancel = () => {
		emitter.emit('closeCancelOrderPopup')
	}

	const confirm = async () => {
		await cancelBookingOrder()
		emitter.emit('closeCancelOrderPopup')
		emitter.emit('flushAdvanceOrderList')
	}
</script>

<style scoped lang="scss">
	.mt-33 {
	  margin-top: 77.59rpx;
	}
	.page {
	  padding: 65.83rpx 73.45rpx 58.78rpx;
	  background-color: #ffffff;
	  border-radius: 25.02rpx;
	  width: 100%;
	  overflow-y: auto;
	  overflow-x: hidden;
	  height: 100%;
	}
	.text {
	  color: #000000;
	  font-size: 37.32rpx;
	  font-family: FZSongKeBenXiuKaiS-R-GB;
	  line-height: 41.66rpx;
	}
	.text-wrapper {
	  padding: 23.51rpx 0;
	  background-color: #d9d9d9;
	  border-radius: 47.02rpx;
	  width: 216.3rpx;
	  height: 84.64rpx;
	  margin-right: 20rpx;
	}
	.font {
	  font-size: 37.62rpx;
	  font-family: FZSongKeBenXiuKaiS-R-GB;
	  line-height: 35.41rpx;
	}
	.text_2 {
	  color: #000000;
	  font-size: 30rpx;
	}
	.text-wrapper_2 {
	  padding: 23.51rpx 0;
	  background-color: #ffb6b9;
	  border-radius: 47.02rpx;
	  width: 216.3rpx;
	  height: 84.64rpx;
	  margin-left: 20rpx;
	}
	.text_3 {
	  color: #ffffff;
	  font-size: 30rpx;
	}
	@import url(../../../common/css/global.css);
</style>