init

project-wl-yonghuduan-uniapp-vue3/subPages/order-cancel/index.scss

@@ -0,0 +1,61 @@
+.order-cancel{
+	background-color:#F3F5F9 ;
+	.orderCancel-bg{
+		width: 100%;
+		height: 236rpx;
+	}
+	.cancel{
+		background: #FFFFFF;
+		border-radius: 24rpx;
+		margin: 0 20rpx;
+		padding: 29rpx;
+		.customerBox,.senderBox{
+			border-bottom: 2rpx solid #F5F5F5;
+			padding-bottom: 46rpx;
+			.title{
+				font-size: 26rpx;
+				font-weight: bold;
+				margin-bottom: 20rpx;
+			}
+			.reason-item{
+				display: flex;
+				align-items: center;
+				margin-top: 26rpx;
+				font-size: 28rpx;
+				.label{
+					margin-left: 9rpx;
+				}
+			}
+		}
+		.senderBox{
+			margin-top: 28rpx;
+			border-bottom: none;
+		}
+	}
+	.footer{
+		height: 164rpx;
+		background-color: white;
+		display: flex;
+		position: fixed;
+		bottom: 0;
+		width: 100%;
+		justify-content: center;
+		.cancel-btn,.confirm-btn{
+			width: 276rpx;
+			height: 88rpx;
+			border-radius: 44rpx;
+			text-align: center;
+			line-height: 88rpx;
+			margin-top: 17rpx;
+		}
+		.cancel-btn{
+			border: 2rpx solid #191919;
+			margin-right: 20rpx;
+		}
+		.confirm-btn{
+			background: #E84134;
+			color: white;
+			margin-left: 20rpx;
+		}
+	}
+}

project-wl-yonghuduan-uniapp-vue3/subPages/order-cancel/index.vue

@@ -0,0 +1,128 @@
+<template>
+	<!-- 头部导航栏 -->
+	<nav-bar title='取消订单'></nav-bar>
+	<view class="order-cancel">
+		<image class="orderCancel-bg" src='../../static/order-cancel-bg.png'></image>
+		<view class="cancel">
+			<view class="customerBox">
+				<view class="title">客户相关</view>
+				<view class="reason-item" v-for='(item,index) in customerReason' :key="index"
+					@click="checkbox(item.value)">
+					<view class="checkRadio">
+						<radio style="transform:scale(0.8)" color="#E44232" :value="String(item.value)"
+							:checked="item.value === defaultReason" />
+					</view>
+					<view class="label">{{item.label}}</view>
+				</view>
+			</view>
+
+			<view class="senderBox">
+				<view class="title">快递员/服务相关</view>
+				<view class="reason-item" v-for='(item,index) in senderReason' :key="index"
+					@click="checkbox(item.value)">
+					<view class="checkRadio">
+						<radio style="transform:scale(0.8)" color="#E44232" :value="String(item.value)"
+							:checked="item.value === defaultReason" />
+					</view>
+					<view class="label">{{item.label}}</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="footer">
+			<view class="cancel-btn" @click="handleNoCancel">暂不取消</view>
+			<view class="confirm-btn" @click="handleConfirmCancel">确定取消</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		reactive,
+		onMounted
+	} from 'vue';
+	import {
+		onLoad,
+		onShow
+	} from '@dcloudio/uni-app';
+	import {
+		cancelOrder
+	} from '@/pages/api/order.js'
+	const orderId = ref()
+	let defaultReason = ref(1)
+	onLoad((options) => {
+		orderId.value = options.orderId
+	})
+	const customerReason = reactive([{
+			value: 1,
+			label: '计划有变，不需要寄了'
+		},
+		{
+			value: 2,
+			label: '换个时间再寄'
+		},
+		{
+			value: 3,
+			label: '去服务点自寄'
+		}
+	])
+
+	const senderReason = reactive(
+		[{
+				value: 4,
+				label: '送达时间不能达到我的要求'
+			},
+			{
+				value: 5,
+				label: '运费太贵了'
+			},
+			{
+				value: 6,
+				label: '快递员未及时取件'
+			},
+			{
+				value: 7,
+				label: '快递员不上门'
+			},
+			{
+				value: 8,
+				label: '快递员服务态度差'
+			}
+		])
+	//确定取消订单
+	const handleConfirmCancel = () => {
+		cancelOrder(orderId.value).then((res) => {
+				uni.showToast({
+					title: '取消成功',
+					icon: 'none',
+					success: () => {
+
+					},
+					duration: 2000
+				})
+				setTimeout(() => {
+					uni.switchTab({
+						url: '/pages/index/index'
+					})
+				}, 2500)
+			}
+
+		).catch(()=>{
+			uni.showToast({
+				title: '网络异常',
+				duration: 2000,
+				icon: 'none'
+			});
+		})
+	}
+	//暂不取消
+	const handleNoCancel = () => {
+		uni.navigateBack()
+	}
+	const checkbox = (value) => {
+		defaultReason.value = value
+	}
+</script>
+
+<style src="./index.scss" lang="scss" scoped></style>