support consume point

src/pages/point/component/PointRuleTierEditor.vue

@@ -50,23 +50,35 @@
 						placeholder="请输入最大值"
 					/>
 				</t-form-item>
-				<t-form-item label="积分" required-mark>
+				<t-form-item label="积分动作" arrow @click="openActionPicker">
+					<span class="picker-text" v-text="getPointActionText(tierEditorDraft.pointAction)" />
+				</t-form-item>
+				<t-form-item label="积分数量" required-mark>
 					<t-input
 						v-model.trim="tierEditorDraft.pointValueText"
 						type="number"
 						align="right"
 						borderless
-						placeholder="请输入积分，可填写 0"
+						placeholder="请输入数量，可填写 0"
 					/>
 				</t-form-item>
 				<div class="tips">积分为 0 时规则仍会命中，但系统不会创建积分流水。</div>
 			</t-form>
 		</div>
 	</bottom-popup>
+	<t-popup v-model="actionPickerVisible" placement="bottom">
+		<t-picker
+			v-model="actionPickerDraft"
+			:columns="actionPickerColumns"
+			title="积分动作"
+			@cancel="actionPickerVisible = false"
+			@confirm="confirmActionPicker"
+		/>
+	</t-popup>
 </template>
 
 <script setup lang="ts">
-import type { PointRuleTierForm } from "@/types/Point";
+import type { PointAction, PointRuleTierForm } from "@/types/Point";
 import { getTierMinText, getTierMinValue, isLastTier, resolveNonNegativeInteger } from "@/utils/pointRule";
 import { Toast } from "tdesign-mobile-vue";
 
@@ -80,8 +92,16 @@ const tierEditorIndex = ref(-1);
 const tierEditorAdding = ref(false);
 const tierEditorDraft = reactive({
 	maxText: "",
+	pointAction: "EARN" as PointAction,
 	pointValueText: ""
 });
+const actionOptions: Array<{ label: string; value: PointAction }> = [
+	{ label: "发放积分", value: "EARN" },
+	{ label: "消耗积分", value: "CONSUME" }
+];
+const actionPickerVisible = ref(false);
+const actionPickerDraft = ref<Array<string | number>>([]);
+const actionPickerColumns = [actionOptions];
 const tierEditorTitle = computed(() => {
 	if (tierEditorIndex.value < 0) {
 		return "编辑分档";
@@ -107,7 +127,7 @@ function getTierPointText(tier: PointRuleTierForm): string {
 	if (pointValue === undefined) {
 		return "待填写";
 	}
-	return `+${pointValue} 积分`;
+	return `${tier.pointAction === "CONSUME" ? "消耗" : "发放"} ${pointValue} 分`;
 }
 
 function openTierEditor(index: number, adding = false): void {
@@ -118,6 +138,7 @@ function openTierEditor(index: number, adding = false): void {
 	tierEditorIndex.value = index;
 	tierEditorAdding.value = adding;
 	tierEditorDraft.maxText = adding ? "" : tier.maxText;
+	tierEditorDraft.pointAction = tier.pointAction;
 	tierEditorDraft.pointValueText = tier.pointValueText;
 	tierEditorVisible.value = true;
 }
@@ -140,7 +161,7 @@ function confirmTierEditor(): void {
 		return;
 	}
 	if (pointValue === undefined) {
-		Toast.warning("积分必须是大于等于 0 的整数，允许填写 0");
+		Toast.warning("积分数量必须是大于等于 0 的整数，允许填写 0");
 		return;
 	}
 	const shouldAddTier = tierEditorAdding.value && isLastTier(tiers.value, index);
@@ -155,6 +176,7 @@ function confirmTierEditor(): void {
 		tier.maxText = "";
 	}
 	tier.pointValueText = String(pointValue);
+	tier.pointAction = tierEditorDraft.pointAction;
 	if (shouldAddTier) {
 		tiers.value.push(createTierForm());
 	}
@@ -181,11 +203,29 @@ function removeTier(index: number): void {
 	tiers.value.splice(index, 1);
 }
 
+function openActionPicker(): void {
+	actionPickerDraft.value = [tierEditorDraft.pointAction];
+	actionPickerVisible.value = true;
+}
+
+function confirmActionPicker(value: Array<string | number>): void {
+	const action = value[0];
+	if (action === "EARN" || action === "CONSUME") {
+		tierEditorDraft.pointAction = action;
+	}
+	actionPickerVisible.value = false;
+}
+
+function getPointActionText(action: PointAction): string {
+	return action === "CONSUME" ? "消耗积分" : "发放积分";
+}
+
 function createTierForm(): PointRuleTierForm {
 	const key = tiers.value.reduce((max, tier) => Math.max(max, tier.key), -1) + 1;
 	return {
 		key,
 		maxText: "",
+		pointAction: "EARN",
 		pointValueText: "0"
 	};
 }