143 lines
3.4 KiB
Vue
143 lines
3.4 KiB
Vue
<script setup>
|
||
import { onMounted, ref } from "vue";
|
||
import { useAuthStore } from "../../stores/auth.js";
|
||
import AdminImageUpload from "../../components/oem/OemImageUpload.vue";
|
||
import {
|
||
loadOemAppBrandingApi,
|
||
saveOemAppBrandingApi,
|
||
} from "../../api/oemAppBranding.js";
|
||
|
||
const auth = useAuthStore();
|
||
|
||
const form = ref({
|
||
softwareName: "",
|
||
logo: "",
|
||
contactWechat: "",
|
||
contactQq: "",
|
||
wechatQr: "",
|
||
qqQr: "",
|
||
});
|
||
|
||
const loading = ref(false);
|
||
const saving = ref(false);
|
||
const feedback = ref({ severity: "", message: "" });
|
||
|
||
function showMessage(severity, message) {
|
||
feedback.value = { severity, message };
|
||
}
|
||
|
||
function onImageError(message) {
|
||
showMessage("warn", message);
|
||
}
|
||
|
||
async function loadSettings() {
|
||
loading.value = true;
|
||
feedback.value = { severity: "", message: "" };
|
||
const res = await loadOemAppBrandingApi(auth.token);
|
||
loading.value = false;
|
||
|
||
if (!res.ok) {
|
||
showMessage("error", res.message || "加载失败");
|
||
return;
|
||
}
|
||
|
||
form.value = { ...res.data.form };
|
||
}
|
||
|
||
async function saveSettings() {
|
||
saving.value = true;
|
||
feedback.value = { severity: "", message: "" };
|
||
const res = await saveOemAppBrandingApi(auth.token, form.value);
|
||
saving.value = false;
|
||
|
||
if (!res.ok) {
|
||
showMessage("error", res.message || "保存失败");
|
||
return;
|
||
}
|
||
|
||
showMessage("success", res.message || "已保存");
|
||
await loadSettings();
|
||
}
|
||
|
||
onMounted(() => {
|
||
loadSettings();
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div class="admin-page admin-overview">
|
||
<div class="admin-users__header">
|
||
<div>
|
||
<h1 class="admin-page__title gradient-text">软件配置</h1>
|
||
<p class="text-sm text-text-muted">
|
||
欢迎，{{ auth.currentUser?.username }}
|
||
</p>
|
||
</div>
|
||
<Button label="保存配置" :loading="saving" :disabled="loading" @click="saveSettings" />
|
||
</div>
|
||
|
||
<Message
|
||
v-if="feedback.message"
|
||
:severity="feedback.severity"
|
||
:closable="true"
|
||
class="admin-users__message"
|
||
@close="feedback.message = ''"
|
||
>
|
||
{{ feedback.message }}
|
||
</Message>
|
||
|
||
<div v-if="loading" class="py-12 text-center text-sm text-text-muted">加载中…</div>
|
||
|
||
<form
|
||
v-else
|
||
class="admin-overview__form"
|
||
@submit.prevent="saveSettings"
|
||
>
|
||
<div class="admin-overview__field">
|
||
<label class="admin-overview__label">软件名称</label>
|
||
<InputText
|
||
v-model="form.softwareName"
|
||
class="admin-overview__input"
|
||
placeholder="请输入软件名称"
|
||
/>
|
||
</div>
|
||
|
||
<AdminImageUpload
|
||
v-model="form.logo"
|
||
label="软件 logo"
|
||
@error="onImageError"
|
||
/>
|
||
|
||
<div class="admin-overview__field">
|
||
<label class="admin-overview__label">联系微信</label>
|
||
<InputText
|
||
v-model="form.contactWechat"
|
||
class="admin-overview__input"
|
||
placeholder="微信号或联系方式"
|
||
/>
|
||
</div>
|
||
|
||
<div class="admin-overview__field">
|
||
<label class="admin-overview__label">联系 QQ</label>
|
||
<InputText
|
||
v-model="form.contactQq"
|
||
class="admin-overview__input"
|
||
placeholder="QQ 号或联系方式"
|
||
/>
|
||
</div>
|
||
|
||
<AdminImageUpload
|
||
v-model="form.wechatQr"
|
||
label="微信二维码"
|
||
@error="onImageError"
|
||
/>
|
||
|
||
<AdminImageUpload
|
||
v-model="form.qqQr"
|
||
label="QQ 二维码"
|
||
@error="onImageError"
|
||
/>
|
||
</form>
|
||
</div>
|
||
</template>
|