1.新增底部导航单独配置页面
sws
parent
192daad5a7
commit
4624684fd9
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
|
|
@ -1,5 +1,6 @@
|
|||
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
|
||||
import Layout from '@/views/layout/index.vue';
|
||||
import Tabbar from '@/views/tabbar/index.vue';
|
||||
|
||||
export const constantRoutes: RouteRecordRaw[] = [
|
||||
{
|
||||
|
|
@ -18,6 +19,11 @@ export const constantRoutes: RouteRecordRaw[] = [
|
|||
component: Layout,
|
||||
meta: { hidden: true },
|
||||
},
|
||||
{
|
||||
path: '/tabbar',
|
||||
component: Tabbar,
|
||||
meta: { hidden: true },
|
||||
},
|
||||
// {
|
||||
// path: '/',
|
||||
// component: Layout,
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
<script setup lang="ts">
|
||||
import type { UploadFile } from 'element-plus';
|
||||
import { is_obj } from '@/utils';
|
||||
import { Navbar, Settings, AppMain } from './components/index';
|
||||
import { Settings, AppMain } from './components/index';
|
||||
import defaultSettings from './components/main/index';
|
||||
import { cloneDeep } from 'lodash';
|
||||
import DiyAPI, { diyData, headerAndFooter, diyConfig } from '@/api/diy';
|
||||
|
|
@ -183,6 +183,7 @@ const save_event = () => {
|
|||
const save_close_event = () => {
|
||||
save_formmat_form_data(form.value, true);
|
||||
};
|
||||
// save_formmat_form_data: 保存数据， data： 数据， close： 是否关闭， is_export： 是否导出， is_preview： 是否预览
|
||||
const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_export: boolean = false, is_preview: boolean = false) => {
|
||||
const clone_form = cloneDeep(data);
|
||||
clone_form.header.show_tabs = '1';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
export { default as Settings } from './settings/index.vue';
|
||||
export { default as AppMain } from './main/index.vue';
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
import defaultCommon from './index';
|
||||
import { online_url } from '@/utils';
|
||||
const new_url = await online_url('/static/app/tabbar/').then((res) => res);
|
||||
interface DefaultFooterNav {
|
||||
content: {
|
||||
nav_style: number;
|
||||
nav_type: number;
|
||||
nav_content: { id: string; name: string; img: uploadList[]; img_checked: uploadList[]; link: object }[];
|
||||
};
|
||||
style: {
|
||||
text_color_checked: string;
|
||||
default_text_color: string;
|
||||
common_style: object;
|
||||
};
|
||||
}
|
||||
const defaultFooterNav = ref<DefaultFooterNav>({
|
||||
content: {
|
||||
nav_style: 0,
|
||||
nav_type: 0,
|
||||
nav_content: [
|
||||
{ id: '1', name: '首页', img: [{ id: 1, url: new_url + 'home.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 2, url: new_url + 'active/home.png', original: '', title: '', ext: '.png', type: 'img' }], link: {} },
|
||||
{ id: '2', name: '分类', img: [{ id: 3, url: new_url + 'category.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 4, url: new_url + 'active/category.png', original: '', title: '', ext: '.png', type: 'img' }], link: {} },
|
||||
{ id: '3', name: '购物车', img: [{ id: 5, url: new_url + 'cart.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 6, url: new_url + 'active/cart.png', original: '', title: '', ext: '.png', type: 'img' }], link: {} },
|
||||
{ id: '4', name: '我的', img: [{ id: 7, url: new_url + 'user.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 8, url: new_url + 'active/user.png', original: '', title: '', ext: '.png', type: 'img' }], link: {} },
|
||||
],
|
||||
},
|
||||
style: {
|
||||
text_color_checked: 'rgba(255, 0, 0, 1)',
|
||||
default_text_color: 'rgba(0, 0, 0, 1)',
|
||||
common_style: { ...defaultCommon, color_list: [{ color: 'rgba(255,255,255,1)', color_percentage: undefined }] },
|
||||
},
|
||||
});
|
||||
|
||||
export default defaultFooterNav;
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
const defaultCommon: componentsCommonCommonStyle = {
|
||||
direction: '90deg',
|
||||
color_list: [{ color: '', color_percentage: undefined }],
|
||||
background_img_style: 2,
|
||||
floating_up: 0,
|
||||
padding: 0,
|
||||
padding_top: 0,
|
||||
padding_bottom: 0,
|
||||
padding_left: 0,
|
||||
padding_right: 0,
|
||||
margin: 0,
|
||||
margin_top: 0,
|
||||
margin_bottom: 0,
|
||||
margin_left: 0,
|
||||
margin_right: 0,
|
||||
radius: 0,
|
||||
radius_top_left: 0,
|
||||
radius_top_right: 0,
|
||||
radius_bottom_left: 0,
|
||||
radius_bottom_right: 0,
|
||||
box_shadow_color: '',
|
||||
box_shadow_x: 0,
|
||||
box_shadow_y: 0,
|
||||
box_shadow_blur: 0,
|
||||
box_shadow_spread: 0,
|
||||
background_img: [] as uploadList[],
|
||||
};
|
||||
|
||||
export default defaultCommon;
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import defaultFooterNav from './default/footer-nav';
|
||||
// 系统设置
|
||||
interface DefaultSettings {
|
||||
footer_nav: object;
|
||||
}
|
||||
|
||||
const defaultSettings: DefaultSettings = {
|
||||
footer_nav: defaultFooterNav,
|
||||
};
|
||||
|
||||
export default defaultSettings;
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<template>
|
||||
<!-- 视图渲染 -->
|
||||
<div class="main re">
|
||||
<div class="model">
|
||||
<div class="model-content box-shadow-sm">
|
||||
<div class="bg-f re">
|
||||
<image-empty v-model="header_image" error-img-style="width:100%;"></image-empty>
|
||||
</div>
|
||||
<div class="re">
|
||||
<image-empty v-model="content_image" error-img-style="width:100%;height:100%;"></image-empty>
|
||||
</div>
|
||||
<!-- 底部区域 -->
|
||||
<div class="model-bottom">
|
||||
<footer-nav :footer-data="footer_nav.com_data"></footer-nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
footer: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
const footer_nav = ref(props.footer);
|
||||
const header_image = ref(new URL(`../../../../assets/images/components/page-settings/theme-1.png`, import.meta.url).href);
|
||||
const content_image = ref(new URL(`../../../../assets/images/tabbar/phone-temp-bg.jpg`, import.meta.url).href);
|
||||
watch(
|
||||
() => props.footer,
|
||||
(newValue) => {
|
||||
footer_nav.value = newValue;
|
||||
console.log(newValue);
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
//#endregion
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.model {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
padding: 2rem 0;
|
||||
.model-content {
|
||||
position: relative;
|
||||
max-height: 84.6rem;
|
||||
height: 100%;
|
||||
width: 39rem;
|
||||
overflow: hidden;
|
||||
.model-bottom {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 2;
|
||||
.roll {
|
||||
border-top: 0.1rem solid #f5f5f5;
|
||||
height: 4rem;
|
||||
width: 39rem;
|
||||
background: #fff;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<!-- 顶部导航栏 -->
|
||||
<div class="settings">
|
||||
<card-container class="settings-title flex-row jc-sb align-c mb-8" padding="2.1rem 3.8rem">
|
||||
<div class="title">{{ value.name }}</div>
|
||||
<el-radio-group v-model="radio" class="radio-group" size="large" is-button>
|
||||
<el-radio-button class="radio-item" value="1">内容</el-radio-button>
|
||||
<el-radio-button class="radio-item" value="2">样式</el-radio-button>
|
||||
</el-radio-group>
|
||||
</card-container>
|
||||
<div class="setting-content">
|
||||
<!-- 底部导航 -->
|
||||
<template v-if="value.key == 'footer-nav'">
|
||||
<footer-nav-setting :type="radio" :value="value.com_data"></footer-nav-setting>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
value: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
console.log(props.value);
|
||||
const radio = ref('1'); // 创建一个响应式的数字变量，初始值为0
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.settings {
|
||||
width: 46rem;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.settings-title {
|
||||
height: 7.8rem;
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
.radio-group {
|
||||
background: #f4f4f4;
|
||||
border-radius: 100rem;
|
||||
.el-radio-button {
|
||||
overflow: hidden;
|
||||
border-radius: 100rem;
|
||||
:deep(.el-radio-button__inner) {
|
||||
border: 0;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
|
||||
background: $cr-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.setting-content {
|
||||
height: calc(100vh - 14.8rem);
|
||||
overflow: auto;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1560px) {
|
||||
.settings {
|
||||
width: 40rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,242 @@
|
|||
<template>
|
||||
<div></div>
|
||||
<div v-loading.fullscreen.lock="loading" class="app-wrapper no-copy" element-loading-background="rgba(255,255,255,1)" element-loading-custom-class="loading-custom">
|
||||
<template v-if="!loading_content">
|
||||
<template v-if="!is_empty">
|
||||
<div class="app-wrapper-content flex-row">
|
||||
<app-main :footer="form.footer"></app-main>
|
||||
<settings :key="key" :value="form.footer"></settings>
|
||||
</div>
|
||||
<div class="app-wrapper-footer flex-row align-c">
|
||||
<el-button type="primary" class="footer-save" @click="save_event">保存</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<no-data height="100vh" img-width="260px" size="16px" text="编辑数据有误"></no-data>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import type { UploadFile } from 'element-plus';
|
||||
import { is_obj } from '@/utils';
|
||||
import { Settings, AppMain } from './components/index';
|
||||
import defaultSettings from './components/main/index';
|
||||
import { cloneDeep } from 'lodash';
|
||||
import DiyAPI, { diyData, headerAndFooter, diyConfig } from '@/api/diy';
|
||||
import CommonAPI from '@/api/common';
|
||||
import { commonStore } from '@/store';
|
||||
const common_store = commonStore();
|
||||
interface diy_data_item {
|
||||
id: string;
|
||||
model: {
|
||||
logo: string;
|
||||
name: string;
|
||||
is_enable: string;
|
||||
describe: string;
|
||||
};
|
||||
footer: headerAndFooter;
|
||||
}
|
||||
const temp_form = ref<diy_data_item>({
|
||||
id: '',
|
||||
model: {
|
||||
logo: '',
|
||||
name: '',
|
||||
is_enable: '1',
|
||||
describe: '',
|
||||
},
|
||||
footer: {
|
||||
name: '底部导航',
|
||||
show_tabs: '0',
|
||||
key: 'footer-nav',
|
||||
com_data: defaultSettings.footer_nav,
|
||||
},
|
||||
});
|
||||
const form = ref<diy_data_item>({
|
||||
id: '',
|
||||
model: {
|
||||
logo: '',
|
||||
name: '',
|
||||
is_enable: '1',
|
||||
describe: '',
|
||||
},
|
||||
footer: {
|
||||
name: '底部导航',
|
||||
show_tabs: '0',
|
||||
key: 'footer-nav',
|
||||
com_data: {},
|
||||
},
|
||||
});
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
const key = ref('');
|
||||
//#region 页面初始化数据 ---------------------start
|
||||
// 页面加载
|
||||
onMounted(() => {
|
||||
common_init();
|
||||
});
|
||||
const is_empty = ref(false);
|
||||
const init = () => {
|
||||
if (get_id()) {
|
||||
DiyAPI.getInit({ id: get_id() }).then((res: any) => {
|
||||
if (res.data) {
|
||||
form.value = form_data_transfor_diy_data(res.data);
|
||||
} else {
|
||||
is_empty.value = true;
|
||||
}
|
||||
loading_event();
|
||||
});
|
||||
} else {
|
||||
temp_form.value.footer.com_data = defaultSettings.footer_nav;
|
||||
form.value = cloneDeep(temp_form.value);
|
||||
loading_event();
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化公共数据
|
||||
const common_init = () => {
|
||||
CommonAPI.getInit().then((res: any) => {
|
||||
common_store.set_common(res.data);
|
||||
init();
|
||||
});
|
||||
};
|
||||
// 加载动画
|
||||
const loading = ref(true);
|
||||
const loading_content = ref(true);
|
||||
const loading_event = () => {
|
||||
loading_content.value = false;
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
}, 1000);
|
||||
};
|
||||
//#endregion 页面初始化数据 ---------------------end
|
||||
|
||||
//#region 顶部导航回调方法 ---------------------start
|
||||
const save_event = () => {
|
||||
save_formmat_form_data(form.value);
|
||||
};
|
||||
// save_formmat_form_data: 保存数据， data： 数据， close： 是否关闭， is_export： 是否导出， is_preview： 是否预览
|
||||
const save_formmat_form_data = (data: diy_data_item, close: boolean = false, is_export: boolean = false, is_preview: boolean = false) => {
|
||||
const clone_form = cloneDeep(data);
|
||||
// 数据改造
|
||||
const new_data = diy_data_transfor_form_data(clone_form);
|
||||
DiyAPI.save(new_data).then((res) => {
|
||||
// 如果是导出或预览模式，则不显示保存成功的消息
|
||||
if (!(is_export || is_preview)) {
|
||||
ElMessage.success('保存成功');
|
||||
}
|
||||
if (close) {
|
||||
ElMessageBox.confirm('您确定要关闭本页吗？', '提示')
|
||||
.then(() => {
|
||||
// 关闭页面
|
||||
window.close();
|
||||
})
|
||||
.catch(() => {});
|
||||
} else {
|
||||
// 判断是否需要导出
|
||||
if (is_export) {
|
||||
const index = window.location.href.lastIndexOf('?s=');
|
||||
const pro_url = window.location.href.substring(0, index);
|
||||
const new_url = import.meta.env.VITE_APP_BASE_API == '/dev-api' ? import.meta.env.VITE_APP_BASE_API_URL : pro_url;
|
||||
window.open(new_url + '?s=diyapi/diydownload/id/' + res.data + '.html', '_blank');
|
||||
}
|
||||
form.value.id = String(res.data);
|
||||
history.pushState({}, '', '?s=diy/saveinfo/id/' + res.data + '.html');
|
||||
}
|
||||
});
|
||||
};
|
||||
//#endregion 顶部导航回调方法 ---------------------end
|
||||
// 数据改造
|
||||
const diy_data_transfor_form_data = (clone_form: diy_data_item) => {
|
||||
return {
|
||||
id: clone_form.id,
|
||||
logo: clone_form.model.logo,
|
||||
name: clone_form.model.name,
|
||||
is_enable: clone_form.model.is_enable,
|
||||
describe: clone_form.model.describe,
|
||||
config: JSON.stringify({
|
||||
footer: clone_form.footer,
|
||||
}),
|
||||
};
|
||||
};
|
||||
const form_data_transfor_diy_data = (clone_form: diyData) => {
|
||||
let temp_config = clone_form.config;
|
||||
let new_tem_form = cloneDeep(temp_form.value);
|
||||
try {
|
||||
return {
|
||||
id: clone_form.id,
|
||||
model: {
|
||||
logo: clone_form.logo,
|
||||
name: clone_form.name,
|
||||
is_enable: clone_form.is_enable,
|
||||
describe: clone_form.describe,
|
||||
},
|
||||
footer: is_obj(temp_config) ? (temp_config as diyConfig).footer : JSON.parse(temp_config as string).footer,
|
||||
};
|
||||
} catch (error) {
|
||||
return {
|
||||
id: clone_form.id,
|
||||
model: {
|
||||
logo: clone_form.logo,
|
||||
name: clone_form.name,
|
||||
is_enable: clone_form.is_enable,
|
||||
describe: clone_form.describe,
|
||||
},
|
||||
footer: new_tem_form.footer,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// 截取document.location.search字符串内id/后面的所有字段
|
||||
const get_id = () => {
|
||||
let new_id = '';
|
||||
if (document.location.search.indexOf('id/') !== -1) {
|
||||
new_id = document.location.search.substring(document.location.search.indexOf('id/') + 3);
|
||||
// 去除字符串的.html
|
||||
let html_index = new_id.indexOf('.html');
|
||||
if (html_index !== -1) {
|
||||
new_id = new_id.substring(0, html_index);
|
||||
}
|
||||
return new_id;
|
||||
} else {
|
||||
return new_id;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.app-wrapper {
|
||||
background-color: #fff;
|
||||
.app-wrapper-content {
|
||||
height: calc(100vh - 11.1rem);
|
||||
}
|
||||
.app-wrapper-footer {
|
||||
height: 11.1rem;
|
||||
padding: 3.5rem 2rem;
|
||||
.footer-save {
|
||||
height: 3.1rem;
|
||||
line-height: 3.1rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
font-size: 1.2rem;
|
||||
min-width: 8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.no-copy {
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-khtml-user-select: none; /* Konqueror HTML */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
|
||||
}
|
||||
:deep(.divider-line) {
|
||||
box-shadow: 0 0.5rem 2rem rgba(50, 55, 58, 0.1);
|
||||
}
|
||||
:deep(.settings) {
|
||||
box-shadow: 0 0.5rem 2rem rgba(50, 55, 58, 0.1);
|
||||
.settings-title {
|
||||
box-shadow: 0 0.5rem 2rem rgba(50, 55, 58, 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue