修改笔记预览样式
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 handleDelete = async (row?: ActivityVO) => {
|
||||||
const _ids = row?.activityName || ids.value;
|
const _ids = row?.id || ids.value;
|
||||||
await proxy?.$modal.confirm('是否确认删除活动信息编号为"' + _ids + '"的数据项?').finally(() => (loading.value = false));
|
const _idsname = row?.activityName || ids.value;
|
||||||
|
await proxy?.$modal.confirm('是否确认删除活动信息编号为"' + _idsname + '"的数据项?').finally(() => (loading.value = false));
|
||||||
await delActivity(_ids);
|
await delActivity(_ids);
|
||||||
proxy?.$modal.msgSuccess('删除成功');
|
proxy?.$modal.msgSuccess('删除成功');
|
||||||
await getList();
|
await getList();
|
||||||
|
@ -156,11 +156,8 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
<!-- 笔记详情-->
|
<!-- 笔记详情-->
|
||||||
<el-dialog v-model="concentdialog.visible" title="笔记详情" width="50%" append-to-body>
|
<el-dialog v-model="concentdialog.visible" title="笔记详情" width="500px" append-to-body>
|
||||||
<div>{{ form.title }}</div>
|
<note :form="form"></note>
|
||||||
<div>{{ formatTag(form.tagId) }}</div>
|
|
||||||
<div>{{ formatlocation(form.location) }}</div>
|
|
||||||
<div v-html="form.content"></div>
|
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
<!-- 评论详情 -->
|
<!-- 评论详情 -->
|
||||||
<el-dialog v-model="comment.visible" title="评论详情" width="600px" append-to-body>
|
<el-dialog v-model="comment.visible" title="评论详情" width="600px" append-to-body>
|
||||||
|
Loading…
Reference in New Issue
Block a user