Merge branch 'dev-sws' into dev-yxl
于肖磊
commit
cfc46458b7
|
|
@ -0,0 +1,22 @@
|
|||
import request from '@/utils/request';
|
||||
|
||||
class ShopAPI {
|
||||
/** 获取tabbar列表 */
|
||||
static getTabbar(data: any) {
|
||||
return request({
|
||||
url: `diyapi/apptabbardata`,
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
/** 保存tabbar */
|
||||
static saveTabbar(data: any) {
|
||||
return request({
|
||||
url: `diyapi/apptabbarsave`,
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default ShopAPI;
|
||||
|
|
@ -5,15 +5,15 @@
|
|||
<div class="mb-12">展示设置</div>
|
||||
<el-form-item label="导航样式">
|
||||
<el-radio-group v-model="form.nav_style" is-button @change="nav_style_change">
|
||||
<el-radio :value="0">图片加文字</el-radio>
|
||||
<el-radio :value="1">图片</el-radio>
|
||||
<el-radio :value="2">文字</el-radio>
|
||||
<el-radio value="0">图片加文字</el-radio>
|
||||
<el-radio value="1">图片</el-radio>
|
||||
<el-radio value="2">文字</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="导航类型">
|
||||
<el-radio-group v-model="form.nav_type" is-button @change="nav_type_change">
|
||||
<el-radio :value="0">底部固定</el-radio>
|
||||
<el-radio :value="1">底部悬浮</el-radio>
|
||||
<el-radio value="0">底部固定</el-radio>
|
||||
<el-radio value="1">底部悬浮</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</card-container>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import defaultCommon from './index';
|
||||
import { online_url } from '@/utils';
|
||||
const new_url = await online_url('/static/app/tabbar/').then((res) => res);
|
||||
interface DefaultFooterNav {
|
||||
export interface DefaultFooterNav {
|
||||
content: {
|
||||
nav_style: number;
|
||||
nav_type: number;
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import defaultFooterNav from './default/footer-nav';
|
||||
// 系统设置
|
||||
interface DefaultSettings {
|
||||
footer_nav: object;
|
||||
}
|
||||
|
||||
interface DefaultSettings {
|
||||
footer_nav: any;
|
||||
}
|
||||
const defaultSettings: DefaultSettings = {
|
||||
footer_nav: defaultFooterNav,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
</div>
|
||||
<!-- 底部区域 -->
|
||||
<div class="model-bottom">
|
||||
<footer-nav :footer-data="footer_nav.com_data"></footer-nav>
|
||||
<footer-nav :footer-data="footer_nav"></footer-nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -31,7 +31,6 @@ watch(
|
|||
() => props.footer,
|
||||
(newValue) => {
|
||||
footer_nav.value = newValue;
|
||||
console.log(newValue);
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,18 +1,17 @@
|
|||
<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>
|
||||
<div class="settings-title flex-row jc-c align-c mb-8 w">
|
||||
<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 class="box-shadow-sm">
|
||||
<div class="setting-content">
|
||||
<!-- 底部导航 -->
|
||||
<footer-nav-setting :type="radio" :value="value"></footer-nav-setting>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -23,17 +22,16 @@ const props = defineProps({
|
|||
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;
|
||||
padding: 2.1rem 3.8rem;
|
||||
.title {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
|
|
@ -42,11 +40,14 @@ const radio = ref('1'); // 创建一个响应式的数字变量，初始值为0
|
|||
.radio-group {
|
||||
background: #f4f4f4;
|
||||
border-radius: 100rem;
|
||||
width: 100%;
|
||||
.el-radio-button {
|
||||
overflow: hidden;
|
||||
width: 50%;
|
||||
border-radius: 100rem;
|
||||
:deep(.el-radio-button__inner) {
|
||||
border: 0;
|
||||
width: 100%;
|
||||
background: #f4f4f4;
|
||||
}
|
||||
:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
<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>
|
||||
<app-main :footer="form"></app-main>
|
||||
<settings :key="key" :value="form"></settings>
|
||||
</div>
|
||||
<div class="app-wrapper-footer flex-row align-c">
|
||||
<el-button type="primary" class="footer-save" @click="save_event">保存</el-button>
|
||||
|
|
@ -18,55 +18,16 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { UploadFile } from 'element-plus';
|
||||
import { is_obj } from '@/utils';
|
||||
import { get_math } 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 DiyAPI from '@/api/tabbar';
|
||||
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: {},
|
||||
},
|
||||
});
|
||||
const temp_form = ref(defaultSettings.footer_nav);
|
||||
const form = ref<any>({});
|
||||
|
||||
const key = ref('');
|
||||
//#region 页面初始化数据 ---------------------start
|
||||
|
|
@ -76,20 +37,19 @@ onMounted(() => {
|
|||
});
|
||||
const is_empty = ref(false);
|
||||
const init = () => {
|
||||
if (get_id()) {
|
||||
DiyAPI.getInit({ id: get_id() }).then((res: any) => {
|
||||
DiyAPI.getTabbar({ type: 'home' })
|
||||
.then((res: any) => {
|
||||
if (res.data) {
|
||||
form.value = form_data_transfor_diy_data(res.data);
|
||||
form.value = res.data;
|
||||
} else {
|
||||
is_empty.value = true;
|
||||
form.value = cloneDeep(temp_form.value);
|
||||
}
|
||||
key.value = get_math();
|
||||
loading_event();
|
||||
})
|
||||
.catch(() => {
|
||||
is_empty.value = true;
|
||||
});
|
||||
} else {
|
||||
temp_form.value.footer.com_data = defaultSettings.footer_nav;
|
||||
form.value = cloneDeep(temp_form.value);
|
||||
loading_event();
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化公共数据
|
||||
|
|
@ -112,106 +72,32 @@ const loading_event = () => {
|
|||
|
||||
//#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 clone_form = cloneDeep(form.value);
|
||||
const new_data = {
|
||||
type: 'home',
|
||||
config: clone_form,
|
||||
};
|
||||
// 数据改造
|
||||
const new_data = diy_data_transfor_form_data(clone_form);
|
||||
DiyAPI.save(new_data).then((res) => {
|
||||
DiyAPI.saveTabbar(new_data).then((res: any) => {
|
||||
// 如果是导出或预览模式，则不显示保存成功的消息
|
||||
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');
|
||||
}
|
||||
ElMessage.success('保存成功');
|
||||
});
|
||||
};
|
||||
//#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);
|
||||
height: calc(100vh - 6.2rem);
|
||||
}
|
||||
.app-wrapper-footer {
|
||||
height: 11.1rem;
|
||||
padding: 3.5rem 2rem;
|
||||
height: 6.2rem;
|
||||
padding: 1.5rem;
|
||||
border-top: 0.1rem solid #f5f5f5;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
.footer-save {
|
||||
height: 3.1rem;
|
||||
line-height: 3.1rem;
|
||||
|
|
@ -234,9 +120,9 @@ const get_id = () => {
|
|||
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);
|
||||
// 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);
|
||||
// box-shadow: 0 0.5rem 2rem rgba(50, 55, 58, 0.1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue