修改笔记预览样式
This commit is contained in:
parent
0a81cadeb2
commit
dfda574ca2
BIN
src/assets/images/address.png
Normal file
BIN
src/assets/images/address.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 9.2 KiB |
BIN
src/assets/images/bgm.png
Normal file
BIN
src/assets/images/bgm.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 13 KiB |
120
src/components/note/index.vue
Normal file
120
src/components/note/index.vue
Normal file
@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div class="note">
|
||||
<div class="content">
|
||||
<img src="" />
|
||||
<div class="title">{{ form.title }}</div>
|
||||
<!-- <div>{{ formatlocation(form.location) }}</div>-->
|
||||
<div v-html="form.content"></div>
|
||||
<div class="tagid">{{ formatTag(form.tagId) }}</div>
|
||||
<div class="address" v-if="form.location">
|
||||
<img src="../../assets/images/address.png" />
|
||||
{{ formatlocation(form.location) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { string } from 'vue-types';
|
||||
import { contentall, tagall } from '@/api/manage/notebook';
|
||||
import { hotelall } from '@/api/manage/route';
|
||||
const sys_user_tagOptions = ref([]); //标签库
|
||||
const sys_user_contentOptions = ref([]); //标签库
|
||||
const props = defineProps({
|
||||
form: {
|
||||
type: [String, Object, Array],
|
||||
default: () => {}
|
||||
}
|
||||
});
|
||||
const form = ref(props.form);
|
||||
const getContent = async () => {
|
||||
const res = await contentall({ status: 2 });
|
||||
const arr = await hotelall({ status: 1 });
|
||||
sys_user_contentOptions.value = res.concat(arr); //地点
|
||||
};
|
||||
const getTag = async () => {
|
||||
const res = await tagall();
|
||||
sys_user_tagOptions.value = res; //标签库
|
||||
};
|
||||
/**
|
||||
* 标签格式化
|
||||
*/
|
||||
const formatTag = (tagId: string | null) => {
|
||||
let tagString = '';
|
||||
// for (let i = 0; i < sys_user_tagOptions.value.length; i++) {
|
||||
// const element = sys_user_tagOptions.value[i];
|
||||
// if (tagId?.includes(element.id)) {
|
||||
// tagString += ',' + element.title;
|
||||
// }
|
||||
// }
|
||||
for (let i = 0; i < sys_user_tagOptions.value.length; i++) {
|
||||
const element = sys_user_tagOptions.value[i];
|
||||
if (tagId != null) {
|
||||
let filteredArray = tagId.split(',').filter((item) => item == element.id);
|
||||
if (filteredArray.length > 0) {
|
||||
tagString += '#' + element.title;
|
||||
}
|
||||
}
|
||||
}
|
||||
return tagString;
|
||||
};
|
||||
/**
|
||||
* 标记地点格式化
|
||||
*/
|
||||
const formatlocation = (tagId: string | null) => {
|
||||
let tagString = '';
|
||||
let arrlist = tagId?.split(',').map(Number);
|
||||
for (let i = 0; i < sys_user_contentOptions.value.length; i++) {
|
||||
const element = sys_user_contentOptions.value[i];
|
||||
for (let j = 0; j < arrlist.length; j++) {
|
||||
const conten = arrlist[j];
|
||||
if (conten == element.id) {
|
||||
tagString += ',' + element.name;
|
||||
}
|
||||
}
|
||||
}
|
||||
return tagString.substring(1);
|
||||
};
|
||||
onMounted(() => {
|
||||
getTag(); //标签库
|
||||
getContent();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.note {
|
||||
margin: 0 auto;
|
||||
width: 350px;
|
||||
height: 700px;
|
||||
background: url('../../assets/images/bgm.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding-top: 70px;
|
||||
.content {
|
||||
width: 88%;
|
||||
height: 580px;
|
||||
overflow-y: auto;
|
||||
margin: 0 auto;
|
||||
.title {
|
||||
font-weight: 600;
|
||||
padding-top: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.tagid {
|
||||
color: #1c84c6;
|
||||
}
|
||||
.address {
|
||||
line-height: 40px;
|
||||
color: #2b2f3a;
|
||||
img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.content::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
}
|
||||
</style>
|
@ -575,8 +575,9 @@ const submitForm = () => {
|
||||
|
||||
/** 删除按钮操作 */
|
||||
const handleDelete = async (row?: ActivityVO) => {
|
||||
const _ids = row?.activityName || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除活动信息编号为"' + _ids + '"的数据项?').finally(() => (loading.value = false));
|
||||
const _ids = row?.id || ids.value;
|
||||
const _idsname = row?.activityName || ids.value;
|
||||
await proxy?.$modal.confirm('是否确认删除活动信息编号为"' + _idsname + '"的数据项?').finally(() => (loading.value = false));
|
||||
await delActivity(_ids);
|
||||
proxy?.$modal.msgSuccess('删除成功');
|
||||
await getList();
|
||||
|
@ -156,11 +156,8 @@
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 笔记详情-->
|
||||
<el-dialog v-model="concentdialog.visible" title="笔记详情" width="50%" append-to-body>
|
||||
<div>{{ form.title }}</div>
|
||||
<div>{{ formatTag(form.tagId) }}</div>
|
||||
<div>{{ formatlocation(form.location) }}</div>
|
||||
<div v-html="form.content"></div>
|
||||
<el-dialog v-model="concentdialog.visible" title="笔记详情" width="500px" append-to-body>
|
||||
<note :form="form"></note>
|
||||
</el-dialog>
|
||||
<!-- 评论详情 -->
|
||||
<el-dialog v-model="comment.visible" title="评论详情" width="600px" append-to-body>
|
||||
|
Loading…
Reference in New Issue
Block a user