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

1

This commit is contained in:
faiz 2024-07-31 09:31:25 +08:00
parent 3c0ca34c5c
commit ea5e45b584
1 changed files with 406 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,47 +1,112 @@
<template>
<div class="app-container">
<div class="filter-container">
<el-input v-model="listQuery.title" placeholder="标题" style="width: 200px;" class="filter-item" />
<el-select v-model="listQuery.status" filterable placeholder="状态" class="filter-item" style="width: 120px;">
<el-input
v-model="listQuery.title"
placeholder="标题"
style="width: 200px"
class="filter-item"
/>
<el-select
v-model="listQuery.status"
filterable
placeholder="状态"
class="filter-item"
style="width: 120px"
>
<el-option key="" label="请选择" value="" />
<el-option v-for="(v, k) in statusArr" :key="k" :label="v" :value="k" />
</el-select>
<el-button class="filter-item search" type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
<el-button class="filter-item" type="primary" icon="el-icon-circle-plus" @click="onAdd">添加</el-button>
<el-button
class="filter-item search"
type="primary"
icon="el-icon-search"
@click="getList"
>搜索</el-button
>
<el-button
class="filter-item"
type="primary"
icon="el-icon-circle-plus"
@click="onAdd"
>添加</el-button
>
</div>
<el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%; padding-bottom: 60px !important">
<el-table
v-loading="listLoading"
:data="list"
border
fit
highlight-current-row
style="width: 100%; padding-bottom: 60px !important"
>
<el-table-column align="center" label="ID" width="80" prop="id" />
<el-table-column align="center" label="城市" width="80" prop="qaCitys.city_name" />
<el-table-column align="center" label="标题" width="280" style="overflow: hidden;">
<el-table-column
align="center"
label="城市"
width="80"
prop="qaCitys.city_name"
/>
<el-table-column
align="center"
label="标题"
width="280"
style="overflow: hidden"
>
<template slot-scope="scope">
<div class="ellipsis-text">{{ scope.row.title }}</div>
</template>
</el-table-column>
<el-table-column align="center" label="状态" width="100">
<template #default="scope">
<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="updateStatus(scope.row)" />
<el-switch
v-model="scope.row.status"
:active-value="1"
:inactive-value="0"
@change="updateStatus(scope.row)"
/>
</template>
</el-table-column>
<el-table-column align="center" width="220" label="操作">
<template #default="scope">
<el-button type="primary" size="small" icon="el-icon-edit" @click="onEdit(scope.row)">编辑</el-button>
<el-button type="danger" size="small" icon="el-icon-delete" @click="onDel(scope.row)">删除</el-button>
<el-button
type="primary"
size="small"
icon="el-icon-edit"
@click="onEdit(scope.row)"
>编辑</el-button
>
<el-button
type="danger"
size="small"
icon="el-icon-delete"
@click="onDel(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
<pagination
v-show="total > 0"
:total="total"
:page.sync="listQuery.page"
:limit.sync="listQuery.limit"
@pagination="getList"
/>
<el-dialog title="添加QA" :visible.sync="dialogCreate">
<el-form label-width="120px" :model="anchors">
<el-form-item label="城市">
<el-select v-model="anchors.city_id" placeholder="请选择">
<el-form-item style="display: inline-flex;text-align: left;width: 770px;">
<el-form-item
style="display: inline-flex; text-align: left; width: 770px"
>
<el-option
v-for="item in getQaCitys"
:key="item.city_id"
style="display: inline-flex;word-break: break-all;"
style="display: inline-flex; word-break: break-all"
:label="item.city_name"
:value="item.city_id"
/>
@ -49,23 +114,41 @@
</el-select>
</el-form-item>
<el-form-item label="旅游路线">
<el-input v-model="anchors.title" type="text" placeholder="请输入旅游路线" />
<el-input
v-model="anchors.title"
type="text"
placeholder="请输入旅游路线"
/>
</el-form-item>
<el-form-item label="QA内容">
<div class="mistake-content" v-for="(item, index) in anchors.qaQuestions">
<div
class="mistake-content"
v-for="(item, index) in anchors.qaQuestions"
>
<div class="mistake-left">
<div>副标题</div>
<div class="qa-desc">
<el-input style="width: 100px;margin-right: 10px;" v-model="item.sort" type="text" placeholder="序号" />
<el-input v-model="item.title" type="text" placeholder="请输入副标题" />
<el-input
style="width: 100px; margin-right: 10px"
v-model="item.sort"
type="text"
placeholder="序号"
/>
<el-input
v-model="item.title"
type="text"
placeholder="请输入副标题"
/>
</div>
<div>内容</div>
<div style="border: 1px solid #ccc;">
<div style="border: 1px solid #ccc">
<myEditor v-model="item.content" />
</div>
</div>
<div class="mistake-right">
<el-button @click="handleDel(index)" type="danger">删除</el-button>
<el-button @click="handleDel(index)" type="danger"
>删除</el-button
>
</div>
</div>
<div class="mistake-btn">
@ -73,7 +156,13 @@
</div>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="anchors.status" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" />
<el-switch
v-model="anchors.status"
:active-value="1"
:inactive-value="0"
active-color="#13ce66"
inactive-color="#ff4949"
/>
</el-form-item>
<el-form-item label="上传图片">
<el-upload
@ -82,12 +171,26 @@
:show-file-list="false"
:on-success="handleAvatarSuccess"
>
<div v-if="anchors.img_zip" class="img-box">
<i @click.stop="handleClose('img_zip')" class="close el-icon-close" />
<i v-if="!checkIfUrlContainsImage(anchors.img_zip)" class="el-icon-folder" />
<img v-else style="width: 100px;height: 100px;" :src="anchors.img_zip" class="avatar" alt="">
<div v-if="anchors.img_zip">
<div v-for="(item, index) in anchors.img_zip" class="img-box">
<i
@click.stop="handleClose('img_zip', index)"
class="close el-icon-close"
/>
<i
v-if="!checkIfUrlContainsImage(anchors.img_zip)"
class="el-icon-folder"
/>
<img
v-else
style="width: 100px; height: 100px"
:src="item"
class="avatar"
alt=""
/>
</div>
<i v-else class="el-icon-plus avatar-uploader-icon"/>
</div>
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
<span>{{ anchors.img_zip }}</span>
<div style="color: red">(请上传zip格式的文件图片)</div>
@ -99,19 +202,53 @@
:show-file-list="false"
:on-success="handleSuccess"
>
<div v-if="anchors.trip_zip" class="img-box">
<i @click.stop="handleClose('trip_zip')" class="close el-icon-close" />
<i v-if="!checkIfUrlContainsImage(anchors.trip_zip)" class="el-icon-folder" />
<img v-else style="width: 100px;height: 100px;" :src="anchors.trip_zip" class="avatar" alt="">
<!-- <div v-if="anchors.trip_zip" class="img-box">
<i
@click.stop="handleClose('trip_zip')"
class="close el-icon-close"
/>
<i
v-if="!checkIfUrlContainsImage(anchors.trip_zip)"
class="el-icon-folder"
/>
<img
v-else
style="width: 100px; height: 100px"
:src="anchors.trip_zip"
class="avatar"
alt=""
/>
</div>
<i v-else class="el-icon-plus avatar-uploader-icon"/>
<i v-else class="el-icon-plus avatar-uploader-icon" /> -->
<div v-if="anchors.trip_zip">
<div v-for="(item, index) in anchors.trip_zip" class="img-box">
<i
@click.stop="handleClose('trip_zip', index)"
class="close el-icon-close"
/>
<i
v-if="!checkIfUrlContainsImage(item)"
class="el-icon-folder"
/>
<img
v-else
style="width: 100px; height: 100px"
:src="item"
class="avatar"
alt=""
/>
</div>
</div>
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
<span>{{ anchors.trip_zip }}</span>
<span style="color: red">(本行程请上传,ppt,word,pdf格式的文件)</span>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button v-loading="loading" type="primary" @click="onSave">保 存</el-button>
<el-button v-loading="loading" type="primary" @click="onSave"
>保 存</el-button
>
</div>
</el-dialog>
@ -119,11 +256,17 @@
<el-form label-width="120px" :model="anchors">
<el-form-item label="城市">
<el-select v-model="anchors.city_id" placeholder="请选择">
<el-form-item style="display: inline-flex;text-align: left;width: 770px;">
<el-form-item
style="display: inline-flex; text-align: left; width: 770px"
>
<el-option
v-for="item in getQaCitys"
:key="item.city_id"
style="width: 250px;display: inline-flex;word-break: break-all;"
style="
width: 250px;
display: inline-flex;
word-break: break-all;
"
:label="item.city_name"
:value="item.city_id"
/>
@ -131,23 +274,41 @@
</el-select>
</el-form-item>
<el-form-item label="旅游路线">
<el-input v-model="anchors.title" type="text" placeholder="请输入旅游路线" />
<el-input
v-model="anchors.title"
type="text"
placeholder="请输入旅游路线"
/>
</el-form-item>
<el-form-item label="QA内容">
<div class="mistake-content" v-for="(item,index) in anchors.qaQuestions">
<div
class="mistake-content"
v-for="(item, index) in anchors.qaQuestions"
>
<div class="mistake-left">
<div>副标题</div>
<div class="qa-desc">
<el-input style="width: 100px;margin-right: 10px;" v-model="item.sort" type="text" placeholder="序号" />
<el-input v-model="item.title" type="text" placeholder="请输入副标题" />
<el-input
style="width: 100px; margin-right: 10px"
v-model="item.sort"
type="text"
placeholder="序号"
/>
<el-input
v-model="item.title"
type="text"
placeholder="请输入副标题"
/>
</div>
<div>内容</div>
<div style="border: 1px solid #ccc;">
<myEditor v-model="item.content"/>
<div style="border: 1px solid #ccc">
<myEditor v-model="item.content" />
</div>
</div>
<div class="mistake-right">
<el-button @click="handleDel(index)" type="danger">删除</el-button>
<el-button @click="handleDel(index)" type="danger"
>删除</el-button
>
</div>
</div>
<div class="mistake-btn">
@ -155,7 +316,13 @@
</div>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="anchors.status" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949" />
<el-switch
v-model="anchors.status"
:active-value="1"
:inactive-value="0"
active-color="#13ce66"
inactive-color="#ff4949"
/>
</el-form-item>
<el-form-item label="上传图片">
<el-upload
@ -165,11 +332,23 @@
:on-success="handleAvatarSuccess"
>
<div v-if="anchors.img_zip" class="img-box">
<i @click.stop="handleClose('img_zip')" class="close el-icon-close" />
<i v-if="!checkIfUrlContainsImage(anchors.img_zip)" class="el-icon-folder" />
<img v-else style="width: 100px;height: 100px;" :src="anchors.img_zip" class="avatar" alt="">
<i
@click.stop="handleClose('img_zip')"
class="close el-icon-close"
/>
<i
v-if="!checkIfUrlContainsImage(anchors.img_zip)"
class="el-icon-folder"
/>
<img
v-else
style="width: 100px; height: 100px"
:src="anchors.img_zip"
class="avatar"
alt=""
/>
</div>
<i v-else class="el-icon-plus avatar-uploader-icon"/>
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
<span>{{ anchors.img_zip }}</span>
<div style="color: red">(请上传zip格式的文件图片)</div>
@ -182,33 +361,47 @@
:on-success="handleSuccess"
>
<div v-if="anchors.trip_zip" class="img-box">
<i @click.stop="handleClose('trip_zip')" class="close el-icon-close" />
<i v-if="!checkIfUrlContainsImage(anchors.trip_zip)" class="el-icon-folder" />
<img v-else style="width: 100px;height: 100px;" :src="anchors.trip_zip" class="avatar" alt="">
<i
@click.stop="handleClose('trip_zip')"
class="close el-icon-close"
/>
<i
v-if="!checkIfUrlContainsImage(anchors.trip_zip)"
class="el-icon-folder"
/>
<img
v-else
style="width: 100px; height: 100px"
:src="anchors.trip_zip"
class="avatar"
alt=""
/>
</div>
<i v-else class="el-icon-plus avatar-uploader-icon"/>
<i v-else class="el-icon-plus avatar-uploader-icon" />
</el-upload>
<span>{{ anchors.trip_zip }}</span>
<div style="color: red">(本行程请上传,ppt,word,pdf格式的文件)</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button v-loading="loading" type="primary" @click="onSave">保 存</el-button>
<el-button v-loading="loading" type="primary" @click="onSave"
>保 存</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
import Pagination from '@/components/PaginationFixed'
import myEditor from '@/components/Wangeditor/index.vue'
import Pagination from "@/components/PaginationFixed";
import myEditor from "@/components/Wangeditor/index.vue";
export default {
name: 'getQa',
components: { Pagination, myEditor},
name: "getQa",
components: { Pagination, myEditor },
data() {
return {
statusArr: { 0: '禁用', 1: '启用' },
statusArr: { 0: "禁用", 1: "启用" },
list: [],
total: 0,
loading: false,
@ -217,182 +410,224 @@ export default {
page: 1,
limit: 10,
status: null,
city_name: '',
title: '',
content: '',
img_zip:'',
trip_zip:''
city_name: "",
title: "",
content: "",
img_zip: [],
trip_zip: [],
},
dialogCreate: false,
dialogEdit: false,
item: {},
anchors: {
qaQuestions:[],
img_zip:'',
trip_zip:''
qaQuestions: [],
img_zip: [],
trip_zip: [],
},
getQaCitys: {}
}
getQaCitys: {},
};
},
created() {
this.listQuery.status = this.$route.query.status || null
this.listQuery.content = this.$route.query.content || null
this.getList()
this.getQaCity()
this.listQuery.status = this.$route.query.status || null;
this.listQuery.content = this.$route.query.content || null;
this.getList();
this.getQaCity();
// this.onChange()
},
methods: {
checkIfUrlContainsImage(url) {
const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.svg', '.webp'];
console.log('========fffff====' + imageExtensions.some(extension => url.toLowerCase().endsWith(extension)))
return imageExtensions.some(extension => url.toLowerCase().endsWith(extension));
const imageExtensions = [
".jpg",
".jpeg",
".png",
".gif",
".bmp",
".svg",
".webp",
];
console.log(
"========fffff====" +
imageExtensions.some((extension) =>
url.toLowerCase().endsWith(extension)
)
);
return imageExtensions.some((extension) =>
url.toLowerCase().endsWith(extension)
);
},
handleClose(val){
this.anchors[val] = ''
handleClose(val) {
this.anchors[val] = "";
},
handleAdd(){
handleAdd() {
this.anchors.qaQuestions.push({
sort:this.anchors.qaQuestions[this.anchors.qaQuestions.length-1].sort+1,
title: '',
content: ''
})
},
handleDel(id){
if(this.anchors.qaQuestions.length==1){
this.$message({
message: '至少保留一条',
type: 'warning'
sort:
this.anchors.qaQuestions[this.anchors.qaQuestions.length - 1].sort +
1,
title: "",
content: "",
});
return
},
handleDel(id) {
if (this.anchors.qaQuestions.length == 1) {
this.$message({
message: "至少保留一条",
type: "warning",
});
return;
}
this.anchors.qaQuestions = this.anchors.qaQuestions.filter((item,i)=>i!==id)
this.anchors.qaQuestions = this.anchors.qaQuestions.filter(
(item, i) => i !== id
);
},
getList() {
this.listLoading = true
this.$axios.get('/admin/qa/getQa', { params: this.listQuery }).then(response => {
this.list = response.data.data
this.total = response.data.total
this.listLoading = false
}).catch(() => {
this.listLoading = false
this.listLoading = true;
this.$axios
.get("/admin/qa/getQa", { params: this.listQuery })
.then((response) => {
this.list = response.data.data;
this.total = response.data.total;
this.listLoading = false;
})
.catch(() => {
this.listLoading = false;
});
},
handleAvatarSuccess(res, file) {
console.log('====1111===' + res)
this.anchors.img_zip = `${window.location.protocol}//${window.location.host}${res.data}`
console.log('====111122222===' + this.anchors.img_zip)
console.log("====1111===" + res);
this.anchors.img_zip.push(
`${window.location.protocol}//${window.location.host}${res.data}`
);
console.log("====111122222===" + this.anchors.img_zip);
},
handleSuccess(res, file) {
console.log('====222222===' + res)
this.anchors.trip_zip = `${window.location.protocol}//${window.location.host}${res.data}`
console.log('====111122222===' + this.anchors.trip_zip)
console.log("====222222===" + res);
this.anchors.trip_zip.push(
`${window.location.protocol}//${window.location.host}${res.data}`
);
console.log("====111122222===" + this.anchors.trip_zip);
},
onAdd() {
this.anchors.qaQuestions=[{
sort:1,
title: '',
content: ''
}]
this.anchors.qaQuestions = [
{
sort: 1,
title: "",
content: "",
},
];
// 初始化时默认排序值为0
this.anchors.img_zip = ''
this.anchors.trip_zip = ''
this.dialogCreate = true
this.anchors.img_zip = [];
this.anchors.trip_zip = [];
this.dialogCreate = true;
},
onEdit(item) {
if(!item.qaQuestions.length){
if (!item.qaQuestions.length) {
this.anchors = {
...item,
qaQuestions:[{
sort:1,
title: '',
content: ''
}]
qaQuestions: [
{
sort: 1,
title: "",
content: "",
},
],
};
} else {
this.anchors = { ...item };
}
}else{
this.anchors = { ...item}
}
this.anchors.img_zip = item.img_zip
this.anchors.trip_zip = item.trip_zip
this.dialogEdit = true
this.anchors.img_zip = item.img_zip;
this.anchors.trip_zip = item.trip_zip;
this.dialogEdit = true;
},
onSave() {
if (this.loading) return
this.loading = true
const api = this.dialogCreate ? '/admin/qa/addQa' : '/admin/qa/editQa'
this.$axios.post(api, this.anchors).then(() => {
this.dialogCreate = false
this.dialogEdit = false
this.loading = false
this.getList()
}).catch(() => {
this.loading = false
if (this.loading) return;
this.loading = true;
const api = this.dialogCreate ? "/admin/qa/addQa" : "/admin/qa/editQa";
this.$axios
.post(api, this.anchors)
.then(() => {
this.dialogCreate = false;
this.dialogEdit = false;
this.loading = false;
this.getList();
})
.catch(() => {
this.loading = false;
});
},
onDel(item) {
this.$axios.post('/admin/qa/delQa', { id: item.id }).then(() => {
this.getList()
}).catch(() => {
this.$axios
.post("/admin/qa/delQa", { id: item.id })
.then(() => {
this.getList();
})
.catch(() => {});
},
getQaCity(){
this.$axios.post('/admin/qacity/getQaCity').then(response => {
this.getQaCitys = response.data
this.getList()
}).catch(() => {
getQaCity() {
this.$axios
.post("/admin/qacity/getQaCity")
.then((response) => {
this.getQaCitys = response.data;
this.getList();
})
.catch(() => {});
},
updateSort(item) {
this.$axios.post('/admin/qa/editQa', { id: item.id, sort: item.sort }).then(() => {
this.getList()
}).catch(() => {
this.$axios
.post("/admin/qa/editQa", { id: item.id, sort: item.sort })
.then(() => {
this.getList();
})
.catch(() => {});
},
updateStatus(item) {
this.$axios.post('/admin/qa/editQa', { id: item.id, status: item.status }).then(() => {
this.getList()
}).catch(() => {
this.$axios
.post("/admin/qa/editQa", { id: item.id, status: item.status })
.then(() => {
this.getList();
})
}
.catch(() => {});
},
},
mounted() {
// 模拟 ajax 请求，异步渲染编辑器
setTimeout(() => {
this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
}, 1500)
this.html = "<p>模拟 Ajax 异步设置内容 HTML</p>";
}, 1500);
},
beforeDestroy() {
const editor = this.editor
if (editor == null) return
editor.destroy() // 组件销毁时，及时销毁编辑器
}
}
const editor = this.editor;
if (editor == null) return;
editor.destroy(); // 组件销毁时，及时销毁编辑器
},
};
</script>
<style scoped>
.img-box{
.img-box {
position: relative;
display: inline-block;
}
.el-icon-folder{
color: #409EFF !important;
.el-icon-folder {
color: #409eff !important;
font-size: 100px;
}
.close{
.close {
position: absolute;
top: -10px;
right: -8px;
font-size: 18px;
color: #409EFF;
color: #409eff;
}
.qa-desc{
.qa-desc {
display: flex;
}
.mistake-content{
.mistake-content {
display: flex;
}
.mistake-left{
.mistake-left {
width: 90%;
}
.mistake-right{
.mistake-right {
padding-left: 20px;
height: auto;
display: flex;
@ -409,7 +644,7 @@ export default {
.el-table {
padding-bottom: 52px; /* 分页条的高度，以避免内容重叠 */
}
.mistake-btn{
.mistake-btn {
display: flex;
flex-direction: row-reverse;
margin-top: 10px;
@ -425,7 +660,7 @@ export default {
overflow: hidden;
}
.avatar-uploader .el-upload:hover {
border-color: #409EFF;
border-color: #409eff;
}
.avatar-uploader-icon {
border: 1px solid #979797;