修改完成
This commit is contained in:
@@ -13,12 +13,6 @@
|
||||
'settings-state--no-permission': settingsState === 'no-permission',
|
||||
}"
|
||||
>
|
||||
<image
|
||||
class="settings-panel__skin"
|
||||
src="/static/assets/modules/genealogy/transparent/g01-empty-panel-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
|
||||
<AppLoading
|
||||
v-if="settingsState === 'loading'"
|
||||
text="正在读取家谱设置"
|
||||
@@ -32,10 +26,6 @@
|
||||
>
|
||||
|
||||
<view class="settings-field">
|
||||
<image
|
||||
src="/static/assets/modules/genealogy/transparent/g-form-field-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text>家谱名称</text>
|
||||
<input
|
||||
v-model="genealogyDraft.name"
|
||||
@@ -79,13 +69,10 @@
|
||||
</view>
|
||||
|
||||
<view class="settings-field settings-field--note">
|
||||
<image
|
||||
src="/static/assets/modules/genealogy/transparent/g-form-field-frame.png"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
<text>访问说明</text>
|
||||
<textarea
|
||||
v-model="genealogyDraft.accessNote"
|
||||
auto-height
|
||||
maxlength="80"
|
||||
placeholder="向访问者说明家谱用途"
|
||||
placeholder-class="settings-placeholder"
|
||||
@@ -93,10 +80,6 @@
|
||||
</view>
|
||||
|
||||
<view class="settings-action" @click="saveSettings">
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text>保存设置</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -124,10 +107,6 @@
|
||||
: "请从家谱总览重新进入，当前修改不会被保留。"
|
||||
}}</text>
|
||||
<view class="settings-action" @click="settingsState = 'form'">
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-primary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text>{{
|
||||
settingsState === "success" ? "继续调整" : "重新查看"
|
||||
}}</text>
|
||||
@@ -135,10 +114,6 @@
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="feedbackVisible" class="settings-feedback">
|
||||
<image
|
||||
src="/static/assets/foundation/transparent/a01-scroll-secondary-v3.png"
|
||||
mode="aspectFit"
|
||||
/>
|
||||
<text>设置已保存</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -156,11 +131,27 @@ const settingsState = ref("loading");
|
||||
const nameError = ref("");
|
||||
const feedbackVisible = ref(false);
|
||||
let feedbackTimer = null;
|
||||
const settingsFixtures = {
|
||||
1001: {
|
||||
name: "汤氏家谱",
|
||||
visibility: "MEMBER_ONLY",
|
||||
accessNote: "家族资料，请妥善保存",
|
||||
},
|
||||
1002: {
|
||||
name: "汤氏宗谱",
|
||||
visibility: "PUBLIC_APPLY",
|
||||
accessNote: "公开家谱身份，成员资料需审核后查看",
|
||||
},
|
||||
};
|
||||
const genealogyDraft = reactive({
|
||||
name: "汤氏家谱",
|
||||
visibility: "MEMBER_ONLY",
|
||||
accessNote: "家族资料，请妥善保存",
|
||||
});
|
||||
const originalDraft = ref("");
|
||||
const isDirty = computed(
|
||||
() => JSON.stringify(genealogyDraft) !== originalDraft.value,
|
||||
);
|
||||
const visibilityOptions = [
|
||||
{ value: "MEMBER_ONLY", label: "仅成员可见" },
|
||||
{ value: "PUBLIC_APPLY", label: "公开可申请" },
|
||||
@@ -178,6 +169,11 @@ const visibilityHint = computed(() =>
|
||||
|
||||
onLoad((query) => {
|
||||
genealogyId.value = query.genealogyId || "";
|
||||
Object.assign(
|
||||
genealogyDraft,
|
||||
settingsFixtures[genealogyId.value] || settingsFixtures[1001],
|
||||
);
|
||||
originalDraft.value = JSON.stringify(genealogyDraft);
|
||||
settingsState.value =
|
||||
query.state === "loading"
|
||||
? "loading"
|
||||
@@ -198,6 +194,11 @@ const saveSettings = () => {
|
||||
nameError.value = "请填写家谱名称";
|
||||
return;
|
||||
}
|
||||
if (genealogyDraft.name.trim().length > 30) {
|
||||
nameError.value = "家谱名称不能超过 30 个字";
|
||||
return;
|
||||
}
|
||||
originalDraft.value = JSON.stringify(genealogyDraft);
|
||||
settingsState.value = "success";
|
||||
feedbackVisible.value = true;
|
||||
feedbackTimer = setTimeout(() => {
|
||||
@@ -209,31 +210,29 @@ const saveSettings = () => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.settings-page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
flex-direction: column;
|
||||
background: $paper;
|
||||
}
|
||||
.settings-page__header {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
}
|
||||
.settings-panel {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: calc(100% - 32rpx);
|
||||
height: min(620px, calc((100vw - 16px) * 1.43));
|
||||
min-height: min(620px, calc((100vw - 16px) * 1.43));
|
||||
margin: 18rpx auto 0;
|
||||
padding: 70rpx 8%;
|
||||
box-sizing: border-box;
|
||||
background: url("/static/assets/modules/genealogy/transparent/g01-empty-panel-frame.png")
|
||||
center / 100% 100% no-repeat;
|
||||
}
|
||||
.settings-panel__skin {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.settings-panel > .app-loading {
|
||||
grid-area: 1 / 1 / -1 / -1;
|
||||
}
|
||||
.settings-form {
|
||||
position: absolute;
|
||||
inset: 7.5% 8%;
|
||||
min-width: 0;
|
||||
}
|
||||
.settings-form__eyebrow,
|
||||
.settings-result__eyebrow {
|
||||
@@ -260,34 +259,30 @@ const saveSettings = () => {
|
||||
line-height: 1.55;
|
||||
}
|
||||
.settings-field {
|
||||
position: relative;
|
||||
height: 92rpx;
|
||||
display: grid;
|
||||
min-height: 92rpx;
|
||||
margin-top: 17rpx;
|
||||
}
|
||||
.settings-field > image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("/static/assets/modules/genealogy/transparent/g-form-field-frame.png")
|
||||
center / 100% 100% no-repeat;
|
||||
}
|
||||
.settings-field > text {
|
||||
position: absolute;
|
||||
top: 31rpx;
|
||||
left: 24rpx;
|
||||
z-index: 1;
|
||||
grid-area: 1 / 1;
|
||||
align-self: center;
|
||||
margin-left: 24rpx;
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.settings-field input,
|
||||
.settings-field textarea {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 20rpx;
|
||||
bottom: 0;
|
||||
left: 164rpx;
|
||||
z-index: 1;
|
||||
height: 92rpx;
|
||||
grid-area: 1 / 1;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
min-height: 92rpx;
|
||||
margin-right: 20rpx;
|
||||
margin-left: 164rpx;
|
||||
color: $ink;
|
||||
font-size: 24rpx;
|
||||
line-height: 92rpx;
|
||||
@@ -323,20 +318,19 @@ const saveSettings = () => {
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
.visibility-option {
|
||||
position: relative;
|
||||
display: grid;
|
||||
width: calc(50% - 7rpx);
|
||||
height: 64rpx;
|
||||
min-height: 64rpx;
|
||||
}
|
||||
.visibility-option image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
grid-area: 1 / 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.visibility-option text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
grid-area: 1 / 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
@@ -358,36 +352,30 @@ const saveSettings = () => {
|
||||
margin-top: 14rpx;
|
||||
}
|
||||
.settings-action {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 78rpx;
|
||||
margin-top: 19rpx;
|
||||
}
|
||||
.settings-action image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.settings-action text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 78rpx;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
margin-top: 19rpx;
|
||||
background: url("/static/assets/foundation/transparent/a01-scroll-primary-v3.png")
|
||||
center / contain no-repeat;
|
||||
}
|
||||
.settings-action text {
|
||||
z-index: 1;
|
||||
color: #fff9ed;
|
||||
font-size: 26rpx;
|
||||
font-weight: 700;
|
||||
letter-spacing: 3rpx;
|
||||
}
|
||||
.settings-result {
|
||||
position: absolute;
|
||||
top: 29%;
|
||||
right: 12%;
|
||||
left: 12%;
|
||||
text-align: center;
|
||||
}
|
||||
.settings-state--success,
|
||||
.settings-state--error,
|
||||
.settings-state--no-permission {
|
||||
padding: 180rpx 12% 70rpx;
|
||||
}
|
||||
.settings-result__eyebrow {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -411,15 +399,10 @@ const saveSettings = () => {
|
||||
justify-content: center;
|
||||
padding: 0 34rpx;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.settings-feedback image {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url("/static/assets/foundation/transparent/a01-scroll-secondary-v3.png")
|
||||
center / contain no-repeat;
|
||||
}
|
||||
.settings-feedback text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: $ink;
|
||||
font-size: 22rpx;
|
||||
@@ -428,9 +411,5 @@ const saveSettings = () => {
|
||||
.settings-panel {
|
||||
width: calc(100% - 48rpx);
|
||||
}
|
||||
.settings-form {
|
||||
right: 9%;
|
||||
left: 9%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user