sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1.新增预览功能

v1.0.0
sws 2024-09-06 17:05:00 +08:00
parent 2217220914
commit f6831f75b7
7 changed files with 89 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/base/qrcode/index.vue
View File

@ -13,7 +13,7 @@
</template>
</el-image>
</div>
<div v-if="src !== ''" class="flex-row align-c gap-10 size-12">
<div v-if="src !== '' && isSrc" class="flex-row align-c gap-10 size-12">
{{ src }}
<div class="copy" @click="clipboard_event">复制</div>
</div>
@ -27,6 +27,10 @@ const props = defineProps({
type: String,
default: '',
},
isSrc: {
type: Boolean,
default: true,
},
isMask: {
type: Boolean,
default: false,

52
src/components/common/preview/index.vue Normal file
View File

@ -0,0 +1,52 @@
<template>
<el-dialog v-model="dialog_visible" class="radius-lg" width="1168" draggable :close-on-click-modal="false" append-to-body>
<template #header>
<div class="title re">
<div class="middle size-16 fw">预览</div>
</div>
</template>
<div class="flex-row pt-16 iframe-content">
<iframe :src="new_link" width="100%" height="100%" frameborder="0"></iframe>
</div>
</el-dialog>
</template>
<script setup lang="ts">
import { get_cookie } from '@/utils';
const props = defineProps({
dataId: {
type: String,
default: '',
},
});
const dialog_visible = defineModel({ type: Boolean, default: false });
const new_link = ref('');
const index = window.location.href.lastIndexOf('?s=');
const pro_url = window.location.href.substring(0, index);
// 如果是本地则使用静态tonken如果是线上则使用cookie的token
const cookie = get_cookie('admin_info');
const token = ref('');
onMounted(async () => {
if (import.meta.env.VITE_APP_BASE_API == '/dev-api') {
let temp_data = await import(import.meta.env.VITE_APP_BASE_API == '/dev-api' ? '../../../../temp.d.ts' : '../../../../temp_pro.d');
token.value = '&token=' + temp_data.default.temp_token;
} else {
if (cookie) {
token.value = '&token=' + JSON.parse(cookie).token;
}
}
});
// 监听dialog_visible
watch(
() => dialog_visible.value,
(newVal) => {
if (newVal) {
new_link.value = (import.meta.env.VITE_APP_BASE_API == '/dev-api' ? import.meta.env.VITE_APP_BASE_API_URL : pro_url) + '?s=diy/preview/id/' + props.dataId + '&system_type=default' + token.value;
}
}
);
</script>
<style lang="scss" scoped>
.iframe-content {
height: 60rem;
}
</style>

3
src/components/common/upload/index.scss
View File

@ -154,6 +154,7 @@
background: transparent;
border: 1px solid #dddddd;
display: flex;
border-radius: 0.2rem;
justify-content: center;
align-items: center;
.upload-btn-bottom-text {
@ -169,6 +170,8 @@
display: flex;
align-items: center;
justify-content: center;
border-bottom-left-radius: 0.1rem;
border-bottom-right-radius: 0.1rem;
}
}
&-style-2 {

2
src/components/common/upload/index.vue
View File

@ -188,7 +188,7 @@
</div>
</template>
<template v-else>
<el-image :src="item.url" fit="contain" class="w h">
<el-image :src="item.url" fit="contain" class="w h radius-xs">
<template #error>
<div class="bg-f5 img flex-row jc-c align-c radius h w">
<icon name="error-img" :size="Number(size) / 2 + ''" color="9"></icon>

2
src/utils/index.ts
View File

@ -341,7 +341,7 @@ export const tabs_style = (color: string, style: string | number | boolean | und
* @param directory {string} - 资源目录名称
* @returns {Promise<string>} 返回一个Promise，解析为包含资源URL的字符串
*/
export const online_url = async (directory: string) => {
export const online_url = async (directory: string = '') => {
if (import.meta.env.VITE_APP_BASE_API == '/dev-api') {
let temp_data = await import(import.meta.env.VITE_APP_BASE_API == '/dev-api' ? '../../temp.d' : '../../temp_pro.d');
return temp_data.default.temp_attachment_host + directory;

2
src/views/layout/components/navbar/index.vue
View File

@ -37,7 +37,7 @@
<el-form-item label="描述">
<el-input v-model="form.describe" placeholder="请输入描述" :rows="4" type="textarea" clearable />
</el-form-item>
<el-form-item label="开关">
<el-form-item label="状态">
<el-switch v-model="form.is_enable" active-value="1" inactive-value="0"></el-switch>
</el-form-item>
</el-form>

45
src/views/layout/index.vue
View File

@ -2,7 +2,7 @@
<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">
<navbar v-model="form.model" @preview="preview" @save="save" @save-close="save_close" />
<navbar v-model="form.model" @preview="preview_event" @save="save_event" @save-close="save_close_event" />
<div class="app-wrapper-content flex-row">
<app-main :diy-data="form.diy_data" :header="form.header" :footer="form.footer" @right-update="right_update" @import="import_data_event" @export="export_data_event"></app-main>
<settings :key="key" :value="diy_data_item"></settings>
@ -12,6 +12,7 @@
<no-data height="100vh" img-width="260px" size="16px" text="编辑数据有误"></no-data>
</template>
</template>
<preview v-model="preview_dialog" :data-id="diy_id"></preview>
</div>
</template>
@ -110,18 +111,7 @@ const import_data_event = (uploadFile: UploadFile) => {
});
};
const export_data_event = () => {
if (get_id()) {
ElMessageBox.confirm('导出前需先保存最新数据，是否继续？', '提示')
.then(() => {
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/' + get_id() + '.html', '_blank');
})
.catch(() => {});
} else {
ElMessage.warning('请先保存,再导出');
}
save_formmat_form_data(form.value, false, true);
};
//#region 页面初始化数据 ---------------------start
// 页面加载
@ -172,16 +162,18 @@ const loading_event = (count: number) => {
//#endregion 页面初始化数据 ---------------------end
//#region 顶部导航回调方法 ---------------------start
const preview = () => {
console.log('预览');
const preview_dialog = ref(false);
const diy_id = ref('');
const preview_event = () => {
save_formmat_form_data(form.value, false, false, true);
};
const save = () => {
const save_event = () => {
save_formmat_form_data(form.value);
};
const save_close = () => {
const save_close_event = () => {
save_formmat_form_data(form.value, true);
};
const save_formmat_form_data = (data: diy_data_item, close: boolean = false) => {
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';
clone_form.footer.show_tabs = '0';
@ -206,7 +198,11 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false) =>
// 数据改造
const new_data = diy_data_transfor_form_data(clone_form);
DiyAPI.save(new_data).then((res) => {
ElMessage.success('保存成功');
if (is_export || is_preview) {
// 如果是导出或预览模式，则不显示保存成功的消息
} else {
ElMessage.success('保存成功');
}
if (close) {
ElMessageBox.confirm('您确定要关闭本页吗？', '提示')
.then(() => {
@ -215,6 +211,17 @@ const save_formmat_form_data = (data: diy_data_item, close: boolean = false) =>
})
.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');
}
if (is_preview) {
preview_dialog.value = true;
diy_id.value = String(res.data);
}
history.pushState({}, '', '?s=diy/saveinfo/id/' + res.data + '.html');
}
});