Merge branch 'dev-sws' into dev-yxl
commit
5fa51457ee
|
|
@ -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>
|
||||
|
|
@ -58,28 +58,29 @@ const props = defineProps({
|
|||
default: () => {},
|
||||
},
|
||||
});
|
||||
const form = reactive(props.value);
|
||||
const form = ref(props.value);
|
||||
const emit = defineEmits(['update:value']);
|
||||
const nav_style_change = (style: any) => {
|
||||
form.value.nav_style = style;
|
||||
emit('update:value', form);
|
||||
emit('update:value', form.value);
|
||||
};
|
||||
const nav_type_change = (type: any) => {
|
||||
form.value.nav_type = type;
|
||||
emit('update:value', form);
|
||||
emit('update:value', form.value);
|
||||
};
|
||||
const nav_content_remove = (index: number) => {
|
||||
form.value.nav_content.splice(index, 1);
|
||||
emit('update:value', form);
|
||||
emit('update:value', form.value);
|
||||
};
|
||||
const add = () => {
|
||||
form.value.nav_content.push({
|
||||
id: get_math(),
|
||||
name: '',
|
||||
src: [],
|
||||
src_checked: [],
|
||||
img: [],
|
||||
img_checked: [],
|
||||
link: {},
|
||||
});
|
||||
emit('update:value', form.value);
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<footer-nav-content :value="form.content" @update:value="content_update"></footer-nav-content>
|
||||
</template>
|
||||
<template v-else-if="type == '2'">
|
||||
<footer-nav-styles :value="form.style" @update:value="style_update"></footer-nav-styles>
|
||||
<footer-nav-styles :value="form.style"></footer-nav-styles>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -19,27 +19,23 @@ const props = defineProps({
|
|||
default: () => ({}),
|
||||
},
|
||||
});
|
||||
const form = reactive(props.value);
|
||||
const form = ref(props.value);
|
||||
const emit = defineEmits(['update:value']);
|
||||
const content_update = (value: any) => {
|
||||
form.content = value;
|
||||
let new_data = form.style.common_style;
|
||||
form.value.content = value;
|
||||
const new_arry = ['margin', 'margin_left', 'margin_right', 'margin_top', 'margin_bottom', 'padding', 'padding_left', 'padding_right', 'padding_top', 'padding_bottom', 'radius', 'radius_top_left', 'radius_top_right', 'radius_bottom_left', 'radius_bottom_right'];
|
||||
if (value.nav_type == '1') {
|
||||
if (value.nav_type == 1) {
|
||||
new_arry.forEach((item) => {
|
||||
if (item.indexOf('radius') !== -1) {
|
||||
new_data[item] = 100;
|
||||
form.value.style.common_style[item] = 100;
|
||||
} else {
|
||||
new_data[item] = 10;
|
||||
form.value.style.common_style[item] = 10;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
new_arry.forEach((item) => {
|
||||
new_data[item] = 0;
|
||||
form.value.style.common_style[item] = 0;
|
||||
});
|
||||
}
|
||||
};
|
||||
const style_update = (value: any) => {
|
||||
form.style = value;
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
<div class="footer-nav flex-row jc-c align-c" :class="showFooter ? 'br-2 br-primary' : ''" @click="footer_nav_event">
|
||||
<div class="footer-nav-content flex-row jc-c align-c w" :style="style_container">
|
||||
<ul class="flex-row jc-sa align-c w">
|
||||
<li v-for="(item, index) in footerData?.content?.nav_content" :key="index" class="flex-1 flex-col jc-c align-c gap-5" @mouseenter="is_hover = index" @mouseleave="is_hover = 0">
|
||||
<div v-if="footerData.content.nav_style !== '2'" class="img re">
|
||||
<li v-for="(item, index) in nav_content" :key="index" class="flex-1 flex-col jc-c align-c gap-5" @mouseenter="is_hover = index" @mouseleave="is_hover = 0">
|
||||
<div v-if="nav_style !== 2" class="img re">
|
||||
<div class="img-item abs radius-xs animate-linear w" :class="is_hover != index ? 'active' : ''">
|
||||
<image-empty v-model="item.img[0]" error-img-style="width:1.5rem;height:1.5rem;"></image-empty>
|
||||
</div>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<image-empty v-model="item.img_checked[0]" error-img-style="width:1.5rem;height:1.5rem;"></image-empty>
|
||||
</div>
|
||||
</div>
|
||||
<span v-if="footerData.content.nav_style !== '1'" class="animate-linear size-12 re z-i" :style="is_hover == index ? text_color_checked : default_text_color">{{ item.name }}</span>
|
||||
<span v-if="nav_style !== 1" class="animate-linear size-12 re z-i" :style="is_hover == index ? text_color_checked : default_text_color">{{ item.name }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -35,12 +35,23 @@ const style_container = ref('');
|
|||
const default_text_color = ref('');
|
||||
const text_color_checked = ref('');
|
||||
let is_hover = ref(0);
|
||||
interface footerNavData {
|
||||
id: string;
|
||||
name: string;
|
||||
img: uploadList[];
|
||||
img_checked: uploadList[];
|
||||
link: object;
|
||||
}
|
||||
const nav_content = ref<footerNavData[]>([]);
|
||||
const nav_style = ref(0);
|
||||
|
||||
watch(
|
||||
props.footerData,
|
||||
() => props.footerData,
|
||||
(newVal, oldValue) => {
|
||||
const new_content = newVal?.content || {};
|
||||
const new_style = newVal?.style || {};
|
||||
nav_content.value = new_content?.nav_content || [];
|
||||
nav_style.value = new_content?.nav_style || 0;
|
||||
default_text_color.value = 'color:' + new_style.default_text_color || 'rgba(0, 0, 0, 1)';
|
||||
text_color_checked.value = 'color:' + new_style.text_color_checked || 'rgba(204, 204, 204, 1)';
|
||||
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import { online_url } from '@/utils';
|
|||
const new_url = await online_url('/static/app/tabbar/').then((res) => res);
|
||||
interface DefaultFooterNav {
|
||||
content: {
|
||||
nav_style: string;
|
||||
nav_type: string;
|
||||
nav_style: number;
|
||||
nav_type: number;
|
||||
nav_content: { id: string; name: string; img: uploadList[]; img_checked: uploadList[]; link: object }[];
|
||||
};
|
||||
style: {
|
||||
|
|
@ -15,8 +15,8 @@ interface DefaultFooterNav {
|
|||
}
|
||||
const defaultFooterNav = ref<DefaultFooterNav>({
|
||||
content: {
|
||||
nav_style: '0',
|
||||
nav_type: '0',
|
||||
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: 1, url: new_url + 'active/home.png', original: '', title: '', ext: '.png', type: 'img' }], link: {} },
|
||||
{ id: '2', name: '分类', img: [{ id: 1, url: new_url + 'category.png', original: '', title: '', ext: '.png', type: 'img' }], img_checked: [{ id: 1, url: new_url + 'active/category.png', original: '', title: '', ext: '.png', type: 'img' }], link: {} },
|
||||
|
|
|
|||
|
|
@ -37,6 +37,28 @@ interface diy_data_item {
|
|||
footer: headerAndFooter;
|
||||
diy_data: Array<any>;
|
||||
}
|
||||
const temp_form = ref<diy_data_item>({
|
||||
id: '',
|
||||
model: {
|
||||
logo: '',
|
||||
name: '',
|
||||
is_enable: '1',
|
||||
describe: '',
|
||||
},
|
||||
header: {
|
||||
name: '页面设置',
|
||||
show_tabs: '1',
|
||||
key: 'page-settings',
|
||||
com_data: defaultSettings.header_nav,
|
||||
},
|
||||
footer: {
|
||||
name: '底部导航',
|
||||
show_tabs: '0',
|
||||
key: 'footer-nav',
|
||||
com_data: defaultSettings.footer_nav,
|
||||
},
|
||||
diy_data: [],
|
||||
});
|
||||
const form = ref<diy_data_item>({
|
||||
id: '',
|
||||
model: {
|
||||
|
|
@ -49,13 +71,13 @@ const form = ref<diy_data_item>({
|
|||
name: '页面设置',
|
||||
show_tabs: '1',
|
||||
key: 'page-settings',
|
||||
com_data: cloneDeep(defaultSettings.header_nav),
|
||||
com_data: {},
|
||||
},
|
||||
footer: {
|
||||
name: '底部导航',
|
||||
show_tabs: '0',
|
||||
key: 'footer-nav',
|
||||
com_data: defaultSettings.footer_nav,
|
||||
com_data: {},
|
||||
},
|
||||
diy_data: [],
|
||||
});
|
||||
|
|
@ -66,7 +88,7 @@ const api_count = ref(0);
|
|||
|
||||
const right_update = (item: any, diy: [Array<any>], header: headerAndFooter, footer: headerAndFooter) => {
|
||||
diy_data_item.value = item;
|
||||
// form.value.diy_data = diy;
|
||||
form.value.diy_data = diy;
|
||||
// form.value.header = header;
|
||||
// form.value.footer = footer;
|
||||
// 生成随机id
|
||||
|
|
@ -122,6 +144,7 @@ const init = () => {
|
|||
loading_event(api_count.value);
|
||||
});
|
||||
} else {
|
||||
form.value = cloneDeep(temp_form.value);
|
||||
api_count.value = 1;
|
||||
loading_event(api_count.value);
|
||||
}
|
||||
|
|
@ -172,9 +195,7 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false) =>
|
|||
// item1.goods_ids = item.goods_list.map((item2: any) => item2.data.id).join(',') || '';
|
||||
// item1.goods_list = [];
|
||||
// });
|
||||
// } else if (item.key == 'custom') {
|
||||
// item.com_data.content.data_source_content = {};
|
||||
//}
|
||||
// }
|
||||
return {
|
||||
...item,
|
||||
show_tabs: '0',
|
||||
|
|
|
|||
Loading…
Reference in New Issue