senyao
/
travel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改

This commit is contained in:
faiz 2024-08-09 15:06:54 +08:00
parent 9a51d08428
commit ea5813bea7
2 changed files with 329 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

231
admin/src/views/qa/problem.vue
View File

@ -3,9 +3,19 @@
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<div class="problem_form"> <div class="problem_form">
<el-form :inline="true" ref="form" :model="dataForm" label-width="60px"> <el-form
:inline="true"
ref="form"
:model="dataForm"
label-width="60px"
>
<el-form-item label="关键字:"> <el-form-item label="关键字:">
<el-input v-model="dataForm.keyword" placeholder="请输入搜索关键字" style="width: 400px;" class="filter-item" /> <el-input
v-model="dataForm.keyword"
placeholder="请输入搜索关键字"
style="width: 400px"
class="filter-item"
/>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="success" @click="onSubmit">查询</el-button> <el-button type="success" @click="onSubmit">查询</el-button>
@ -15,26 +25,58 @@
</el-col> </el-col>
</el-row> </el-row>
<div class="problem_container"> <div class="problem_container">
<div class="problem_left" v-infinite-scroll="load" :infinite-scroll-immediate="false" style="overflow:auto;padding: 10px;"> <div
<div @click="handleQacityl(item.city_id)" class="btn" v-for="item in getQaCityList">{{ item.city_name }}</div> class="problem_left"
v-infinite-scroll="load"
:infinite-scroll-immediate="false"
style="overflow: auto; padding: 10px"
>
<div
@click="handleQacityl(item.city_id)"
class="btn"
v-for="item in getQaCityList"
>
{{ item.city_name }}
</div>
</div> </div>
<div class="problem_right"> <div class="problem_right">
<ul class="infinite-list" v-infinite-scroll="load" :infinite-scroll-immediate="false" style="overflow:auto"> <ul
class="infinite-list"
v-infinite-scroll="load"
:infinite-scroll-immediate="false"
style="overflow: auto"
>
<li class="problem_right_container" v-for="item in getQaLists"> <li class="problem_right_container" v-for="item in getQaLists">
<div class="title"> <div class="title">
<span v-html="handleprant(item.title)"></span> <span v-html="handleprant(item.title)"></span>
<!-- <el-button @click="handleZip(item.img_zip)" type="primary">下载图片</el-button> <!-- <el-button @click="handleZip(item.img_zip)" type="primary">下载图片</el-button>
<el-button @click="handleZip(item.trip_zip)" type="primary">下载行程</el-button> --> <el-button @click="handleZip(item.trip_zip)" type="primary">下载行程</el-button> -->
<el-button @click="showImgDialog(item.img_zip)" type="primary">下载图片</el-button> <el-button @click="showImgDialog(item.img_zip)" type="primary"
<el-button @click="showFileList(item.trip_zip)" type="primary" style="margin-left: 10px;">下载行程</el-button> >下载图片</el-button
>
<el-button
@click="showFileList(item.trip_zip)"
type="primary"
style="margin-left: 10px"
>下载行程</el-button
>
</div> </div>
<div class="desc_container" v-for="list in item.qaQuestions"> <div class="desc_container" v-for="list in item.qaQuestions">
<span style="font-weight: 700;color: #46a6ff;" class="desc" v-html="handleprant(list.title)"> <span
style="font-weight: 700; color: #46a6ff"
class="desc"
v-html="handleprant(list.title)"
>
</span> </span>
<el-button @click="copyToClipboard(list.content)" type="primary" size="mini" style="margin-left: 10px;">复制</el-button> <el-button
@click="copyToClipboard(list.content)"
type="primary"
size="mini"
style="margin-left: 10px"
>复制</el-button
>
<div class="desc" v-html="handleprantHtml(list.content)"> <div class="desc" v-html="handleprantHtml(list.content)"></div>
</div>
</div> </div>
</li> </li>
</ul> </ul>
@ -50,10 +92,18 @@
class="image-card" class="image-card"
:body-style="{ padding: '10px' }" :body-style="{ padding: '10px' }"
> >
<img :src="image.url" class="image-preview" /> <div style="text-align: center">{{ image.desc }}</div>
<img :src="image.file" class="image-preview" />
<div class="image-footer"> <div class="image-footer">
<el-button @click="handlePreview(image.url)" size="mini">查看</el-button> <el-button @click="handlePreview(image.file)" size="mini"
<el-button @click="handleDownload(image.url)" type="success" size="mini">下载</el-button> >查看</el-button
>
<el-button
@click="handleDownload(image.file)"
type="success"
size="mini"
>下载</el-button
>
</div> </div>
</el-card> </el-card>
</div> </div>
@ -74,12 +124,17 @@
> >
<div class="file-info"> <div class="file-info">
<el-icon class="file-icon"> <el-icon class="file-icon">
<i :class="getFileIcon(file.url)"></i> <i :class="getFileIcon(file.file)"></i>
</el-icon> </el-icon>
<span class="file-name">{{ file.name }}</span> <span class="file-name">{{ file.desc }}</span>
</div> </div>
<div class="file-footer"> <div class="file-footer">
<el-button @click="handleDownload(file.url)" type="success" size="mini">下载</el-button> <el-button
@click="handleDownload(file.file)"
type="success"
size="mini"
>下载</el-button
>
</div> </div>
</el-card> </el-card>
</div> </div>
@ -99,7 +154,7 @@
</template> </template>
<script> <script>
import { getQaCityList, getQaList } from '@/api/qa' import { getQaCityList, getQaList } from "@/api/qa";
export default { export default {
data() { data() {
@ -107,110 +162,115 @@ export default {
getQaCityList: [], getQaCityList: [],
getQaLists: [], getQaLists: [],
dataForm: { dataForm: {
keyword: '', keyword: "",
city_id: '' city_id: "",
}, },
dialogImage: false, // 控制图片列表对话框的显示 dialogImage: false, // 控制图片列表对话框的显示
previewVisible: false, // 控制图片预览对话框的显示 previewVisible: false, // 控制图片预览对话框的显示
previewImageUrl: '', // 预览图片的 URL previewImageUrl: "", // 预览图片的 URL
previewTitle: '', // 预览图片的标题 previewTitle: "", // 预览图片的标题
imageList: [ // 示例图片列表 imageList: [
// 示例图片列表
], ],
fileList: [ // 示例图片列表 fileList: [
// 示例图片列表
], ],
dialogFile: false, dialogFile: false,
} };
}, },
created() { created() {
getQaCityList().then(res => { getQaCityList().then((res) => {
this.getQaCityList = res.data this.getQaCityList = res.data;
}) });
}, },
watch: { watch: {
'dataForm.keyword': function (newVal) { "dataForm.keyword": function (newVal) {
if (newVal) { if (newVal) {
this.onSubmit(); this.onSubmit();
} }
} },
}, },
methods: { methods: {
// 显示文件列表对话框 // 显示文件列表对话框
showFileList(fileUrl) { showFileList(fileUrl) {
this.fileList = []; if (fileUrl.length) {
if (fileUrl) { this.fileList = fileUrl;
this.fileList = fileUrl.split(',').map(url => ({ url, name: url.split('/').pop() }));
} }
this.dialogFile = true; this.dialogFile = true;
}, },
// 根据文件 URL 获取文件图标 // 根据文件 URL 获取文件图标
getFileIcon(url) { getFileIcon(url) {
const ext = url.split('.').pop().toLowerCase(); const ext = url.split(".").pop().toLowerCase();
console.log(ext);
switch (ext) { switch (ext) {
case 'pdf': case "pdf":
return 'el-icon-file-pdf'; return "el-icon-file-pdf";
case 'docx': case "docx":
return 'el-icon-file-word'; return "el-icon-file-word";
case 'pptx': case "pptx":
return 'el-icon-file-ppt'; return "el-icon-file-ppt";
case 'xlsx': case "xlsx":
return 'el-icon-file-excel'; return "el-icon-file-excel";
default: default:
return 'el-icon-file'; return "el-icon-file";
} }
}, },
handleQacityl(val) { handleQacityl(val) {
getQaList({ city_id: val }).then(res => { getQaList({ city_id: val }).then((res) => {
this.getQaLists = res.data.data this.getQaLists = res.data.data;
}) });
}, },
handleZip(url) { handleZip(url) {
if (url) { if (url) {
// window.open(url) // window.open(url)
fetch(url) fetch(url)
.then(response => response.blob()) .then((response) => response.blob())
.then(blob => { .then((blob) => {
const link = document.createElement('a'); const link = document.createElement("a");
const objectUrl = URL.createObjectURL(blob); const objectUrl = URL.createObjectURL(blob);
link.href = objectUrl; link.href = objectUrl;
link.download = url.split('/').pop(); // Extract filename from URL link.download = url.split("/").pop(); // Extract filename from URL
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
document.body.removeChild(link); document.body.removeChild(link);
URL.revokeObjectURL(objectUrl); URL.revokeObjectURL(objectUrl);
}) })
.catch(error => { .catch((error) => {
this.$message({ this.$message({
showClose: true, showClose: true,
message: '下载失败', message: "下载失败",
type: 'error' type: "error",
}); });
console.error('Download error:', error); console.error("Download error:", error);
}); });
} else { } else {
this.$message({ this.$message({
showClose: true, showClose: true,
message: '暂无下载链接', message: "暂无下载链接",
type: 'warning' type: "warning",
}); });
} }
}, },
load() { load() {
console.log('load') console.log("load");
}, },
handleprant(val) { handleprant(val) {
if (!val) return ''; // 处理空值情况，避免返回 undefined 或其他非字符串值 if (!val) return ""; // 处理空值情况，避免返回 undefined 或其他非字符串值
let replaceReg = new RegExp(this.dataForm.keyword, "ig"); let replaceReg = new RegExp(this.dataForm.keyword, "ig");
let replaceString = `<span style="color: #fff;background-color: #FC0421FF;">${this.dataForm.keyword}</span>`; let replaceString = `<span style="color: #fff;background-color: #FC0421FF;">${this.dataForm.keyword}</span>`;
return val.replace(replaceReg, replaceString); return val.replace(replaceReg, replaceString);
}, },
handleprantHtml(val) { handleprantHtml(val) {
if (!val) return ''; if (!val) return "";
let p = this.dataForm.keyword; let p = this.dataForm.keyword;
let regexp = new RegExp(p, "g"); let regexp = new RegExp(p, "g");
let replacedHtml = val.replace(/(?<=>)[^>]+(?=<[/]?\w+.*>)/g, (v) => { let replacedHtml = val.replace(/(?<=>)[^>]+(?=<[/]?\w+.*>)/g, (v) => {
return v.replace(regexp, `<span style='color: #fff;background-color: #FC0421FF;'>${p}</span>`); return v.replace(
regexp,
`<span style='color: #fff;background-color: #FC0421FF;'>${p}</span>`
);
}); });
// 检查是否有替换发生 // 检查是否有替换发生
if (replacedHtml === val) { if (replacedHtml === val) {
@ -220,32 +280,31 @@ export default {
return replacedHtml; return replacedHtml;
}, },
onSubmit() { onSubmit() {
getQaList(this.dataForm).then(res => { getQaList(this.dataForm).then((res) => {
this.getQaLists = res.data.data this.getQaLists = res.data.data;
}) });
}, },
copyToClipboard(html) { copyToClipboard(html) {
const text = this.stripHtml(html); const text = this.stripHtml(html);
const input = document.createElement('textarea'); const input = document.createElement("textarea");
input.value = text; input.value = text;
document.body.appendChild(input); document.body.appendChild(input);
input.select(); input.select();
document.execCommand('copy'); document.execCommand("copy");
document.body.removeChild(input); document.body.removeChild(input);
this.$message({ this.$message({
showClose: true, showClose: true,
message: '内容已复制' message: "内容已复制",
}); });
}, },
stripHtml(html) { stripHtml(html) {
const div = document.createElement('div'); const div = document.createElement("div");
div.innerHTML = html; div.innerHTML = html;
return div.textContent || div.innerText || ''; return div.textContent || div.innerText || "";
}, },
showImgDialog(imagesUrls) { showImgDialog(imagesUrls) {
this.imageList = [] if (imagesUrls.length) {
if (imagesUrls) { this.imageList = imagesUrls;
this.imageList = imagesUrls.split(',').map(url => ({ url }));
} }
this.dialogImage = true; this.dialogImage = true;
@ -253,7 +312,7 @@ export default {
// 处理图片预览 // 处理图片预览
handlePreview(url) { handlePreview(url) {
this.previewImageUrl = url; this.previewImageUrl = url;
this.previewTitle = '图片预览'; this.previewTitle = "图片预览";
this.previewVisible = true; this.previewVisible = true;
}, },
// 处理图片删除 // 处理图片删除
@ -265,35 +324,35 @@ export default {
if (url) { if (url) {
// window.open(url) // window.open(url)
fetch(url) fetch(url)
.then(response => response.blob()) .then((response) => response.blob())
.then(blob => { .then((blob) => {
const link = document.createElement('a'); const link = document.createElement("a");
const objectUrl = URL.createObjectURL(blob); const objectUrl = URL.createObjectURL(blob);
link.href = objectUrl; link.href = objectUrl;
link.download = url.split('/').pop(); // Extract filename from URL link.download = url.split("/").pop(); // Extract filename from URL
document.body.appendChild(link); document.body.appendChild(link);
link.click(); link.click();
document.body.removeChild(link); document.body.removeChild(link);
URL.revokeObjectURL(objectUrl); URL.revokeObjectURL(objectUrl);
}) })
.catch(error => { .catch((error) => {
this.$message({ this.$message({
showClose: true, showClose: true,
message: '下载失败', message: "下载失败",
type: 'error' type: "error",
}); });
console.error('Download error:', error); console.error("Download error:", error);
}); });
} else { } else {
this.$message({ this.$message({
showClose: true, showClose: true,
message: '暂无下载链接', message: "暂无下载链接",
type: 'warning' type: "warning",
}); });
} }
} },
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -365,7 +424,7 @@ body {
font-weight: 600; font-weight: 600;
margin-bottom: 10px; margin-bottom: 10px;
color: #46a6ff; color: #46a6ff;
&>:nth-child(1) { & > :nth-child(1) {
margin-right: 40px; margin-right: 40px;
} }
} }

54
admin/src/views/qa/qa.vue
View File

@ -96,14 +96,20 @@
@pagination="getList" @pagination="getList"
/> />
<el-dialog :title="title" :visible.sync="dialogCreate"> <el-dialog
<el-button v-if="dialogCreate"
class="filter-items" ref="dialog"
v-loading="loading" :title="title"
type="primary" :visible.sync="dialogCreate"
@click="onSave" >
<div
style="display: flex; justify-content: flex-end; margin-bottom: 10px"
>
<el-button v-loading="loading" type="primary" @click="onSave"
>保 存</el-button >保 存</el-button
> >
</div>
<el-scrollbar ref="scrollbar" class="scrollable-container">
<el-form ref="addForm" label-width="120px" :model="anchors"> <el-form ref="addForm" label-width="120px" :model="anchors">
<el-form-item label="城市" prop="city_id"> <el-form-item label="城市" prop="city_id">
<el-select v-model="anchors.city_id" placeholder="请选择"> <el-select v-model="anchors.city_id" placeholder="请选择">
@ -172,7 +178,11 @@
/> />
</el-form-item> </el-form-item>
<div <div
style="display: flex; justify-content: flex-end; margin-bottom: 10px" style="
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
"
> >
<el-button type="primary" @click="onAddImg()">添加图片</el-button> <el-button type="primary" @click="onAddImg()">添加图片</el-button>
</div> </div>
@ -183,7 +193,6 @@
@click.stop="handleClose('img_zip', index)" @click.stop="handleClose('img_zip', index)"
class="close el-icon-close" class="close el-icon-close"
/> />
<el-input v-model="item.desc" placeholder="图片说明"></el-input>
<el-upload <el-upload
class="avatar-uploader" class="avatar-uploader"
action="" action=""
@ -210,12 +219,17 @@
</div> </div>
<i v-else class="el-icon-plus avatar-uploader-icon" /> <i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload> </el-upload>
<el-input v-model="item.desc" placeholder="图片说明"></el-input>
</div> </div>
</div> </div>
<div style="color: red">(请上传.jpg, png的图片)</div> <div style="color: red">(请上传.jpg, png的图片)</div>
</el-form-item> </el-form-item>
<div <div
style="display: flex; justify-content: flex-end; margin-bottom: 10px" style="
display: flex;
justify-content: flex-end;
margin-bottom: 10px;
"
> >
<el-button type="primary" @click="onAddtrip()">添加行程</el-button> <el-button type="primary" @click="onAddtrip()">添加行程</el-button>
</div> </div>
@ -226,7 +240,6 @@
@click.stop="handleClose('trip_zip', index)" @click.stop="handleClose('trip_zip', index)"
class="close el-icon-close" class="close el-icon-close"
/> />
<el-input v-model="item.desc" placeholder="行程说明"></el-input>
<el-upload <el-upload
class="avatar-uploader" class="avatar-uploader"
action="" action=""
@ -253,12 +266,15 @@
</div> </div>
<i v-else class="el-icon-plus avatar-uploader-icon" /> <i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload> </el-upload>
<el-input v-model="item.desc" placeholder="行程说明"></el-input>
</div> </div>
</div> </div>
<span style="color: red">(本行程请上传,ppt,word,pdf格式的文件)</span> <span style="color: red"
>(本行程请上传,ppt,word,pdf格式的文件)</span
>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"></div> </el-scrollbar>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
@ -524,18 +540,30 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.scrollable-container {
// position: relative;
height: 500px; /* 可以根据实际情况调整高度 */
// overflow-y: auto;
}
::v-deep.el-scrollbar .el-scrollbar__wrap {
overflow-x: hidden;
}
.upload-list { .upload-list {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.wu-yu { .wu-yu {
margin-bottom: 10px; margin-bottom: 10px;
position: relative; position: relative;
display: flex;
width: 110px;
flex-wrap: wrap;
align-content: space-between;
& + .wu-yu { & + .wu-yu {
margin-left: 5px; margin-left: 5px;
} }
::v-deep.el-input { ::v-deep.el-input {
width: 100px; width: 100px;
margin: 0 0 10px 10px; margin: 10px 0 10px 10px;
} }
} }
} }