61 lines
2.3 KiB
Vue
61 lines
2.3 KiB
Vue
<script setup lang="ts">
|
||
import { computed, reactive, watch } from "vue";
|
||
|
||
import type { AdminUser } from "../types/api";
|
||
|
||
const props = defineProps<{
|
||
modelValue: boolean;
|
||
users: AdminUser[];
|
||
submitting: boolean;
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
"update:modelValue": [value: boolean];
|
||
submit: [payload: { extensionDays: number; remark: string }];
|
||
}>();
|
||
|
||
const form = reactive({ extensionDays: 30, remark: "" });
|
||
const title = computed(() => props.users.length > 1 ? `批量续期（${props.users.length} 人）` : "用户权益续期");
|
||
const userNames = computed(() => props.users.map((user) => user.name || user.phone).join("、"));
|
||
|
||
watch(() => props.modelValue, (open) => {
|
||
if (open) Object.assign(form, { extensionDays: 30, remark: "" });
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<el-dialog
|
||
:model-value="modelValue"
|
||
:title="title"
|
||
width="min(520px, calc(100vw - 32px))"
|
||
destroy-on-close
|
||
@update:model-value="$emit('update:modelValue', $event)"
|
||
>
|
||
<div class="renew-summary">
|
||
<span>续期对象</span>
|
||
<strong>{{ userNames }}</strong>
|
||
<small>未到期权益从原到期日顺延；已到期权益从当前时间重新生效。长期有效或未分配专属权益的用户不会被误续期。</small>
|
||
</div>
|
||
<el-form label-position="top" @submit.prevent>
|
||
<el-form-item label="延长天数">
|
||
<el-input-number v-model="form.extensionDays" :min="1" :max="3650" controls-position="right" />
|
||
</el-form-item>
|
||
<el-form-item label="续期备注（可选）">
|
||
<el-input v-model="form.remark" maxlength="255" show-word-limit placeholder="例如：线下续费确认、活动补偿" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button :disabled="submitting" @click="$emit('update:modelValue', false)">取消</el-button>
|
||
<el-button type="primary" :loading="submitting" @click="emit('submit', form)">确认续期</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.renew-summary { display: grid; gap: 6px; margin-bottom: 18px; padding: 14px; border-radius: 10px; background: #f4f8f6; }
|
||
.renew-summary span, .renew-summary small { color: #6d7e78; font-size: 12px; }
|
||
.renew-summary strong { color: #25483e; line-height: 1.55; }
|
||
.renew-summary small { line-height: 1.6; }
|
||
.el-input-number { width: 100%; }
|
||
</style>
|