fix style and tips

src/assets/styles/global.less

@@ -53,6 +53,12 @@ html.theme-dark body {
 	border-radius: 1rem;
 }
 
+.form-tips {
+	color: var(--td-text-color-secondary);
+	font-size: .8125rem;
+	line-height: 1.5;
+}
+
 .t-input--password {
 	letter-spacing: 0;
 }

src/pages/event/EventEdit.vue

@@ -28,12 +28,14 @@
 			<t-form-item label="业务类型" :arrow="isCreateMode" @click="isCreateMode && openBizTypePicker()">
 				<div class="picker-text" v-text="getBizTypeText(formModel.bizType)" />
 			</t-form-item>
-			<div v-if="formModel.bizType === 'PACKAGE_PURCHASE'" class="biz-type-tip">
-				套餐购买事件必须绑定一个套餐配置。实际购买时只能使用此处绑定的套餐，不能临时更换。
-			</div>
 			<t-form-item v-if="formModel.bizType === 'PACKAGE_PURCHASE'" label="绑定套餐" required-mark arrow @click="openPackageConfigPicker">
 				<div class="picker-text" v-text="selectedPackageConfig?.name || '请选择套餐配置'" />
 			</t-form-item>
+			<t-form-item
+				label-width="0"
+				v-if="formModel.bizType === 'PACKAGE_PURCHASE'"
+				class="form-tips bg-white"
+			>套餐购买事件必须绑定一个套餐配置。登记该事件即视为购买</t-form-item>
 			<t-form-item label="说明">
 				<t-textarea
 					class="description"
@@ -42,7 +44,12 @@
 					borderless
 				/>
 			</t-form-item>
-			<t-form-item label="数值类型" arrow @click="openValueTypePicker">
+			<t-form-item
+				label="数值类型"
+				:class="{ disabled: isPackagePurchase }"
+				:arrow="!isPackagePurchase"
+				@click="openValueTypePicker"
+			>
 				<div class="picker-text" v-text="getValueTypeText(formModel.valueType)" />
 			</t-form-item>
 			<t-form-item v-if="isNumberValueType(formModel.valueType)" label="数值单位" required-mark arrow @click="openValueUnitPicker">
@@ -51,28 +58,43 @@
 			<t-form-item v-if="isNumberValueType(formModel.valueType)" label="登记必填数值" content-align="right">
 				<t-switch v-model="formModel.requireValue" />
 			</t-form-item>
-			<t-form-item label="起始时间" arrow @click="openBeginAtPicker">
+			<t-form-item
+				label="起始时间"
+				:class="{ disabled: isPackagePurchase }"
+				:arrow="!isPackagePurchase"
+				@click="openBeginAtPicker"
+			>
 				<div class="begin-at">
 					<div class="picker-text" v-text="formModel.beginAtText || '不限'" />
 					<t-button
 						v-if="formModel.beginAtText"
+						:disabled="isPackagePurchase"
 						size="extra-small"
 						content="不限"
 						@click.stop="clearBeginAt"
 					/>
 				</div>
 			</t-form-item>
-			<t-form-item label="终止时间" arrow @click="openEndAtPicker">
+			<t-form-item
+				label="终止时间"
+				:class="{ disabled: isPackagePurchase }"
+				:arrow="!isPackagePurchase"
+				@click="openEndAtPicker"
+			>
 				<div class="end-at">
 					<div class="picker-text" v-text="formModel.endAtText || '不限'" />
 					<t-button
 						v-if="formModel.endAtText"
+						:disabled="isPackagePurchase"
 						size="extra-small"
 						content="不限"
 						@click.stop="clearEndAt"
 					/>
 				</div>
 			</t-form-item>
+			<t-form-item label-width="0">
+				<div class="form-tips">套餐购买类型的事件中，事件数值、起止时间、核销状况由套餐系统处理</div>
+			</t-form-item>
 			<t-form-item label="约束" arrow @click="openLimitPicker">
 				<div class="picker-text" v-text="getLimitText(formModel.limitType)" />
 			</t-form-item>
@@ -88,14 +110,14 @@
 			<t-form-item label="需要拍照" content-align="right">
 				<t-switch v-model="formModel.requirePhoto" />
 			</t-form-item>
-			<t-form-item label="需要核销" content-align="right">
-				<t-switch v-model="formModel.requireVerification" :disabled="formModel.bizType === 'PACKAGE_PURCHASE'" />
+			<t-form-item label="需要核销" content-align="right" :class="{ disabled: isPackagePurchase }">
+				<t-switch v-model="formModel.requireVerification" :disabled="isPackagePurchase" />
 			</t-form-item>
 			<t-form-item label="状态" arrow @click="openStatusPicker">
 				<div class="picker-text" v-text="getStatusText(formModel.status)" />
 			</t-form-item>
 			<t-form-item label-width="0">
-				<div class="status-tips">
+				<div class="form-tips status-tip">
 					<div class="status">
 						<span class="orange">草稿：</span>
 						<span class="gray">普通店员角色不可见，不可登记、查询</span>
@@ -311,6 +333,7 @@ const formModel = reactive({
 	endAtText: "",
 	roleCodeList: [] as string[]
 });
+const isPackagePurchase = computed(() => formModel.bizType === "PACKAGE_PURCHASE");
 
 // ---------- 业务类型 ----------
 
@@ -583,11 +606,17 @@ function getValueUnitText(value: EventValueUnit | null): string {
 }
 
 function openValueTypePicker(): void {
+	if (isPackagePurchase.value) {
+		return;
+	}
 	valueTypePickerDraft.value = [formModel.valueType];
 	valueTypePickerVisible.value = true;
 }
 
 function confirmValueType(value: Array<string | number>): void {
+	if (isPackagePurchase.value) {
+		return;
+	}
 	const valueType = value[0];
 	if (valueType !== "NONE" && valueType !== "NUMBER") {
 		return;
@@ -725,32 +754,50 @@ function validateForm(): boolean {
 // ---------- 生效时间 ----------
 
 function openBeginAtPicker(): void {
+	if (isPackagePurchase.value) {
+		return;
+	}
 	beginAtDraftText.value = formModel.beginAtText || nowDateTimeText.value;
 	beginAtPickerVisible.value = true;
 }
 
 function openEndAtPicker(): void {
+	if (isPackagePurchase.value) {
+		return;
+	}
 	endAtDraftText.value = formModel.endAtText || defaultEndAtText.value;
 	endAtPickerVisible.value = true;
 }
 
 function confirmBeginAt(value: string | number): void {
+	if (isPackagePurchase.value) {
+		return;
+	}
 	formModel.beginAtText = String(value);
 	beginAtPickerVisible.value = false;
 }
 
 function confirmEndAt(value: string | number): void {
+	if (isPackagePurchase.value) {
+		return;
+	}
 	formModel.endAtText = String(value);
 	endAtPickerVisible.value = false;
 }
 
 function clearBeginAt(): void {
+	if (isPackagePurchase.value) {
+		return;
+	}
 	formModel.beginAtText = "";
 	beginAtDraftText.value = "";
 	beginAtPickerVisible.value = false;
 }
 
 function clearEndAt(): void {
+	if (isPackagePurchase.value) {
+		return;
+	}
 	formModel.endAtText = "";
 	endAtDraftText.value = "";
 	endAtPickerVisible.value = false;
@@ -887,6 +934,16 @@ onUnmounted(() => navBarStore.clearRight());
 			height: 4rem;
 		}
 
+		.disabled {
+			color: var(--td-text-color-disabled);
+			pointer-events: none;
+
+			:deep(.t-form__label),
+			.picker-text {
+				color: var(--td-text-color-disabled);
+			}
+		}
+
 		.end-at,
 		.begin-at {
 			--td-button-extra-small-height: 24px;
@@ -898,19 +955,11 @@ onUnmounted(() => navBarStore.clearRight());
 			justify-content: end;
 		}
 
-		.status-tips {
+		.status-tip {
 			display: flex;
 			font-size: .875rem;
 			flex-direction: column;
 		}
-
-		.biz-type-tip {
-			padding: .75rem 1rem;
-			color: var(--td-text-color-secondary);
-			font-size: .8125rem;
-			line-height: 1.5;
-			background: var(--td-bg-color-secondarycontainer);
-		}
 	}
 
 	.picker-text {