web: Allow customize start button

This commit is contained in:
Fam Zheng 2025-08-17 12:24:08 +01:00
parent 69726802bf
commit aa670811e8
2 changed files with 42 additions and 1 deletions

View File

@ -19,7 +19,7 @@
</div>
</div>
</div>
<button class="scan">开始扫码</button>
<button class="scan section" @click="click_section('scan_button')" :style="scan_button_style">{{ scan_button_text }}</button>
</div>
<div class="bottom">
<div class="static section" @click="click_section('static')">
@ -59,6 +59,21 @@ export default {
}
return ret;
},
scan_button_text: function() {
return this.data && this.data.scan_button ? this.data.scan_button.text : '开始扫码';
},
scan_button_style: function() {
var ret = {};
if (this.data && this.data.scan_button) {
if (this.data.scan_button.color) {
ret.backgroundColor = this.data.scan_button.color;
}
if (this.data.scan_button.text_color) {
ret.color = this.data.scan_button.text_color;
}
}
return ret;
},
},
methods: {
click_section: function (section) {

View File

@ -16,6 +16,7 @@
<button class="btn btn-secondary edit-bg" @click="update_editing('carousel')">修改轮播图片</button>
<button class="btn btn-secondary edit-bg" @click="update_editing('video')">修改视频</button>
<button class="btn btn-secondary edit-bg" @click="update_editing('icons')">修改图标链接</button>
<button class="btn btn-secondary edit-bg" @click="update_editing('scan_button')">修改扫码按钮</button>
<button class="btn btn-secondary edit-bg" @click="update_editing('static')">修改底部静态图片</button>
<button class="btn btn-secondary edit-bg" @click="update_editing('background')">修改背景</button>
<hr>
@ -73,6 +74,26 @@
</div>
<button class="btn btn-secondary return" @click="editing=null">返回</button>
</div>
<div v-if="editing=='scan_button'">
<h5>扫码按钮</h5>
<div class="alert alert-secondary">
按钮文字
<input class="form-control my-1" type="text" v-model="data.scan_button.text" placeholder="开始扫码" />
</div>
<div class="alert alert-secondary">
按钮颜色
<input class="form-control my-1" type="color" v-model="data.scan_button.color" />
RGB
<input class="form-control my-1" type="text" v-model="data.scan_button.color" />
</div>
<div class="alert alert-secondary">
按钮文字颜色
<input class="form-control my-1" type="color" v-model="data.scan_button.text_color" />
RGB
<input class="form-control my-1" type="text" v-model="data.scan_button.text_color" />
</div>
<button class="btn btn-secondary return" @click="editing=null">返回</button>
</div>
<div v-if="editing=='static'">
<h5> 图片展示 </h5>
<ImageLinks @update="set_static" :items="data.static" />
@ -188,6 +209,11 @@ export default {
d.icons ||= [];
d.icons_per_line ||= 3;
d.static ||= [];
d.scan_button ||= {
text: '开始扫码',
color: '#008000',
text_color: '#ffffff',
};
var white = '#ffffff';
d.background ||= {
type: 'none',