Merge branch 'dev-sws' into dev-yxl

v1.0.0
于肖磊 2024-08-23 16:28:57 +08:00
commit 97b6a65e6d
13 changed files with 153 additions and 30 deletions

36
src/api/diy.ts Normal file
View File

@ -0,0 +1,36 @@
import { id } from 'element-plus/es/locale';
import request from '@/utils/request';
class DiyAPI {
/** diy初始化接口--获取详情 */
static getInit(data: diy) {
return request({
url: `diyapi/diydetail`,
method: 'post',
data,
});
}
/** diy接口--保存 */
static save(data: diyData) {
return request({
url: `diyapi/diysave`,
method: 'post',
data,
});
}
}
export default DiyAPI;
interface diy {
/** 主键 */
id: string;
}
export interface diyData {
id: string;
logo: string;
name: string;
describe: string;
config: string;
is_enable: string;
}

View File

@ -1,7 +1,7 @@
<template>
<div class="flex-col align-c jc-c w h bg-f" :style="container_style">
<img :style="style" :src="noData_image" />
<p class="size-14 cr-c mt-12">暂无数据</p>
<p class="cr-c mt-12" :style="text_style">{{ text }}</p>
</div>
</template>
@ -9,20 +9,29 @@
interface Props {
imgWidth?: string;
height?: string;
size?: string;
text?: string;
}
const props = withDefaults(defineProps<Props>(), {
imgWidth: '100',
height: '200',
imgWidth: '100px',
height: '200px',
size: '14px',
text: '暂无数据',
});
const noData_image = ref(new URL(`../../../assets/images/noData.png`, import.meta.url).href);
const style = computed(() => {
return {
width: props.imgWidth.search('px') > -1 ? props.imgWidth : props.imgWidth + 'px',
width: props.imgWidth,
};
});
const container_style = computed(() => {
return {
height: props.height.search('px') > -1 ? props.height : props.height + 'px',
height: props.height,
};
});
const text_style = computed(() => {
return {
fontSize: props.size,
};
});
</script>

View File

@ -121,7 +121,7 @@
</div>
</div>
<div v-else>
<no-data height="440"></no-data>
<no-data height="440px"></no-data>
</div>
</el-scrollbar>
<div v-if="preview_switch_video && upload_type == 'video'">

View File

@ -136,7 +136,7 @@
</el-scrollbar>
</div>
<div v-else>
<no-data height="280"></no-data>
<no-data height="280px"></no-data>
</div>
</div>
</template>

View File

@ -40,7 +40,7 @@
</template>
<script lang="ts" setup>
import UrlValueAPI from '@/api/url-value';
import { urlValueStore, urlValue, pageLinkList } from '@/store';
import { urlValueStore } from '@/store';
const url_value_store = urlValueStore();
const props = defineProps({
//

View File

@ -41,7 +41,7 @@
</template>
<script lang="ts" setup>
import UrlValueAPI from '@/api/url-value';
import { urlValueStore, urlValue, pageLinkList } from '@/store';
import { urlValueStore } from '@/store';
const url_value_store = urlValueStore();
const props = defineProps({
//

View File

@ -30,7 +30,7 @@
</div>
</template>
<script lang="ts" setup>
import { urlValueStore, urlValue, pageLinkList } from '@/store';
import { urlValueStore } from '@/store';
const url_value_store = urlValueStore();
const props = defineProps({
//

View File

@ -43,7 +43,7 @@
</template>
<script lang="ts" setup>
import UrlValueAPI from '@/api/url-value';
import { urlValueStore, urlValue, pageLinkList } from '@/store';
import { urlValueStore } from '@/store';
const url_value_store = urlValueStore();
const props = defineProps({
//

View File

@ -24,7 +24,7 @@
</div>
</template>
<template v-else>
<no-data height="480"></no-data>
<no-data height="480px"></no-data>
</template>
</div>
</el-scrollbar>
@ -32,7 +32,7 @@
</div>
</template>
<script lang="ts" setup>
import { urlValueStore, urlValue, pageLinkList } from '@/store';
import { urlValueStore } from '@/store';
const url_value_store = urlValueStore();
const props = defineProps({
//

View File

@ -2,7 +2,7 @@
<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 + 1" @mouseleave="is_hover = 0">
<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 + 1" @mouseleave="is_hover = 0">
<div v-if="footerData.content.nav_style !== '2'" class="img re">
<img class="img-item abs radius-xs animate-linear w" :class="is_hover != index + 1 ? 'active' : ''" :src="item.src[0]?.url" width="22" height="22" />
<img class="img-item abs radius-xs animate-linear w" :class="is_hover == index + 1 ? 'active' : ''" :src="item.src_checked[0]?.url" width="22" height="22" />

View File

@ -172,6 +172,7 @@ watch(
() => props.diyData,
(newValue) => {
diy_data.value = newValue;
console.log(newValue);
}
);
//
@ -183,9 +184,11 @@ watch(
}
);
watchEffect(() => {
const content = props.header.com_data?.content || {};
const container_common_styles = gradient_computer(content) + background_computer(content);
content_style.value = container_common_styles;
if (props.header.com_data?.content) {
const content = props.header.com_data?.content;
const container_common_styles = gradient_computer(content) + background_computer(content);
content_style.value = container_common_styles;
}
});
watch(
() => props.footer,

View File

@ -37,6 +37,7 @@
</div>
</div>
<upload v-model:visible-dialog="is_custom_dialog" is-custom-dialog :is-check-confirm="false"></upload>
</template>
<script setup lang="ts">
const modelValue = defineModel({ type: Object, default: {} });

View File

@ -1,10 +1,15 @@
<template>
<div class="app-wrapper no-copy">
<navbar v-model="form.model" @preview="preview" @save="save" @save-close="save_close" />
<div class="app-wrapper-content flex-row">
<app-main :diy-data="form.diy_data" :header="form.header" :footer="form.footer" @right-update="right_update"></app-main>
<settings :key="key" :value="diy_data_item"></settings>
</div>
<template v-if="!is_empty">
<navbar v-model="form.model" @preview="preview" @save="save" @save-close="save_close" />
<div class="app-wrapper-content flex-row">
<app-main :diy-data="form.diy_data" :header="form.header" :footer="form.footer" @right-update="right_update"></app-main>
<settings :key="key" :value="diy_data_item"></settings>
</div>
</template>
<template v-else>
<no-data height="100vh" img-width="300" size="40px" text="编辑数据有误"></no-data>
</template>
</div>
</template>
@ -12,6 +17,7 @@
import { Navbar, Settings, AppMain } from './components/index';
import defaultSettings from './components/main/index';
import { cloneDeep } from 'lodash';
import DiyAPI, { diyData } from '@/api/diy';
interface headerAndFooter {
name: string;
show_tabs: boolean;
@ -19,6 +25,7 @@ interface headerAndFooter {
com_data: any;
}
interface diy_data_item {
id: string;
model: {
img: string;
name: string;
@ -26,11 +33,13 @@ interface diy_data_item {
header: headerAndFooter;
footer: headerAndFooter;
diy_data: Array<any>;
is_enable: string;
}
const form = ref<diy_data_item>({
id: '',
model: {
img: '',
name: 'demo',
name: '',
},
header: {
name: '页面设置',
@ -45,6 +54,7 @@ const form = ref<diy_data_item>({
com_data: defaultSettings.footer_nav,
},
diy_data: [],
is_enable: '1',
});
const diy_data_item = ref({});
@ -63,12 +73,31 @@ const right_update = (item: any, diy: [Array<any>], header: headerAndFooter, foo
onMounted(() => {
init();
});
const is_empty = ref(false);
const init = () => {
// localStorage
const diy_data = localStorage.getItem('diy_data');
if (diy_data) {
form.value = JSON.parse(diy_data);
// const diy_data = localStorage.getItem('diy_data');
// if (diy_data) {
// form.value = JSON.parse(diy_data);
// }
// document.location.searchid/
let new_data = { id: '' };
if (document.location.search.indexOf('id/') !== -1) {
new_data.id = document.location.search.substring(document.location.search.indexOf('id/') + 3);
// .html
let html_index = new_data.id.indexOf('.html');
if (html_index !== -1) {
new_data.id = new_data.id.substring(0, html_index);
}
}
if (new_data.id) {
DiyAPI.getInit(new_data).then((res: any) => {
if (res.data) {
form.value = form_data_transfor_diy_data(res.data);
} else {
is_empty.value = true;
}
});
}
};
//#endregion ---------------------end
@ -79,11 +108,9 @@ const preview = () => {
};
const save = () => {
formmat_form_data(form.value);
ElMessage.success('保存成功');
};
const save_close = () => {
formmat_form_data(form.value);
ElMessage.success('保存成功');
};
const formmat_form_data = (data: diy_data_item) => {
const clone_form = cloneDeep(data);
@ -96,9 +123,56 @@ const formmat_form_data = (data: diy_data_item) => {
};
});
// localStorage
localStorage.setItem('diy_data', JSON.stringify(clone_form));
// localStorage.setItem('diy_data', JSON.stringify(clone_form));
//
const new_data = diy_data_transfor_form_data(clone_form);
DiyAPI.save(new_data).then((res) => {
ElMessage.success('保存成功');
});
};
//#endregion ---------------------end
//
const diy_data_transfor_form_data = (clone_form: diy_data_item) => {
return {
id: clone_form.id,
logo: clone_form.model.img,
name: clone_form.model.name,
describe: '',
config: JSON.stringify({
header: clone_form.header,
footer: clone_form.footer,
diy_data: clone_form.diy_data,
}),
is_enable: clone_form.is_enable,
};
};
const form_data_transfor_diy_data = (clone_form: diyData) => {
try {
return {
id: clone_form.id,
model: {
img: clone_form.logo,
name: clone_form.name,
},
header: JSON.parse(clone_form.config).header,
footer: JSON.parse(clone_form.config).footer,
diy_data: JSON.parse(clone_form.config).diy_data,
is_enable: clone_form.is_enable,
};
} catch (error) {
return {
id: clone_form.id,
model: {
img: clone_form.logo,
name: clone_form.name,
},
header: form.value.header,
footer: form.value.footer,
diy_data: form.value.diy_data,
is_enable: clone_form.is_enable,
};
}
};
</script>
<style scoped lang="scss">