add cancel reason selector

src/pages/salesOrder/SalesOrderCancel.vue

@@ -22,10 +22,34 @@
 			v-entrance-transition="70"
 		>
 			<t-form-item label="取消原因" required-mark>
-				<t-textarea v-model.trim="reason" borderless autosize maxlength="500" placeholder="请输入取消原因"/>
+				<div class="reason">
+					<t-textarea
+						v-model="reason"
+						borderless
+						autosize
+						maxlength="500"
+						placeholder="请输入取消原因"
+					/>
+					<t-button
+						size="extra-small"
+						theme="primary"
+						variant="outline"
+						@click="openCancelReasonPicker"
+					>选择</t-button>
+				</div>
 			</t-form-item>
 		</t-form>
 		<t-empty v-if="!order" :description="loading ? '正在加载订单' : '订单不存在'"/>
+		<t-popup v-model="cancelReasonPickerVisible" placement="bottom">
+			<t-picker
+				v-if="cancelReasonPickerVisible"
+				v-model="cancelReasonPickerDraft"
+				:columns="cancelReasonPickerColumns"
+				title="选择取消原因"
+				@cancel="cancelReasonPickerVisible = false"
+				@confirm="confirmCancelReason"
+			/>
+		</t-popup>
 	</div>
 </template>
 
@@ -49,7 +73,30 @@ const order = ref<SalesOrder>();
 const loading = ref(false);
 const saving = ref(false);
 const reason = ref("");
+const cancelReasonPickerDraft = ref<string[]>([]);
+const cancelReasonPickerVisible = ref(false);
 const hasPendingFulfillment = ref(false);
+const cancelReasonOptions = [
+	"客户主动取消订单",
+	"客户重复下单",
+	"商品缺货，无法履约",
+	"订单信息有误",
+	"价格或优惠配置错误",
+	"客户需求变更",
+	"其他原因"
+];
+const cancelReasonPickerColumns = cancelReasonOptions.map(item => ({ label: item, value: item }));
+
+function openCancelReasonPicker(): void {
+	const currentReason = cancelReasonOptions.includes(reason.value) ? reason.value : cancelReasonOptions[0];
+	cancelReasonPickerDraft.value = [currentReason];
+	cancelReasonPickerVisible.value = true;
+}
+
+function confirmCancelReason(value: Array<string | number>): void {
+	reason.value = String(value[0] || cancelReasonPickerDraft.value[0] || "");
+	cancelReasonPickerVisible.value = false;
+}
 
 async function loadData(): Promise<void> {
 	const id = String(route.params.id || "");
@@ -107,5 +154,13 @@ onUnmounted(() => navBarStore.clearRight());
 	padding: var(--app-nav-height) 0 2rem;
 	display: flex;
 	flex-direction: column;
+
+	.form {
+
+		.reason {
+			gap: .5rem;
+			display: flex;
+		}
+	}
 }
 </style>