This commit is contained in:
parent
04f4850b1c
commit
18cdc81d38
|
|
@ -74,7 +74,7 @@
|
|||
type="primary"
|
||||
size="small"
|
||||
icon="el-icon-edit"
|
||||
@click="onEdit(scope.row)"
|
||||
@click="onAdd(scope.row)"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
|
|
@ -96,9 +96,16 @@
|
|||
@pagination="getList"
|
||||
/>
|
||||
|
||||
<el-dialog title="添加QA" :visible.sync="dialogCreate">
|
||||
<el-form label-width="120px" :model="anchors">
|
||||
<el-form-item label="城市">
|
||||
<el-dialog :title="title" :visible.sync="dialogCreate">
|
||||
<el-button
|
||||
class="filter-items"
|
||||
v-loading="loading"
|
||||
type="primary"
|
||||
@click="onSave"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-form ref="addForm" label-width="120px" :model="anchors">
|
||||
<el-form-item label="城市" prop="city_id">
|
||||
<el-select v-model="anchors.city_id" placeholder="请选择">
|
||||
<el-form-item
|
||||
style="display: inline-flex; text-align: left; width: 770px"
|
||||
|
|
@ -113,7 +120,7 @@
|
|||
</el-form-item>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="旅游路线">
|
||||
<el-form-item label="旅游路线" prop="title">
|
||||
<el-input
|
||||
v-model="anchors.title"
|
||||
type="text"
|
||||
|
|
@ -164,196 +171,93 @@
|
|||
inactive-color="#ff4949"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div
|
||||
style="display: flex; justify-content: flex-end; margin-bottom: 10px"
|
||||
>
|
||||
<el-button type="primary" @click="onAddImg()">添加图片</el-button>
|
||||
</div>
|
||||
<el-form-item label="上传图片">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action="admin/upload/index"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
>
|
||||
<div v-for="(item, index) in anchors.img_zip" class="img-box">
|
||||
<div class="upload-list">
|
||||
<div class="wu-yu" v-for="(item, index) in anchors.img_zip">
|
||||
<i
|
||||
@click.stop="handleClose('img_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 class="desc">{{ handleRegex(item) }}</div>
|
||||
</div>
|
||||
<i class="el-icon-plus avatar-uploader-icon" />
|
||||
</el-upload>
|
||||
<div style="color: red">(请上传.jpg, png的图片)</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="上传行程">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action="admin/upload/index"
|
||||
:show-file-list="false"
|
||||
:on-success="handleSuccess"
|
||||
>
|
||||
<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 class="desc">{{ handleRegex(item) }}</div>
|
||||
</div>
|
||||
<i class="el-icon-plus avatar-uploader-icon" />
|
||||
</el-upload>
|
||||
<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
|
||||
>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="编辑内容" :visible.sync="dialogEdit">
|
||||
<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-option
|
||||
v-for="item in getQaCitys"
|
||||
:key="item.city_id"
|
||||
style="
|
||||
width: 250px;
|
||||
display: inline-flex;
|
||||
word-break: break-all;
|
||||
<el-input v-model="item.desc" placeholder="图片说明"></el-input>
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action=""
|
||||
:show-file-list="false"
|
||||
:http-request="handlesAvatarSuccess"
|
||||
:on-success="
|
||||
(response, file, fileList) =>
|
||||
handleAvatarSuccess(response, file, fileList, index)
|
||||
"
|
||||
:label="item.city_name"
|
||||
:value="item.city_id"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="旅游路线">
|
||||
<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-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="请输入副标题"
|
||||
/>
|
||||
</div>
|
||||
<div>内容</div>
|
||||
<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
|
||||
>
|
||||
<div v-if="!!item.file" class="img-box">
|
||||
<i
|
||||
v-if="!checkIfUrlContainsImage(item.file)"
|
||||
class="el-icon-folder"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
style="width: 100px; height: 100px"
|
||||
:src="item.file"
|
||||
class="avatar"
|
||||
alt=""
|
||||
/>
|
||||
<div class="desc">{{ handleRegex(item.file) }}</div>
|
||||
</div>
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon" />
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mistake-btn">
|
||||
<el-button type="primary" @click="handleAdd">添加</el-button>
|
||||
</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-form-item>
|
||||
<el-form-item label="上传图片">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action="admin/upload/index"
|
||||
:show-file-list="false"
|
||||
:on-success="handleAvatarSuccess"
|
||||
>
|
||||
<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(item)" class="el-icon-folder" />
|
||||
<img
|
||||
v-else
|
||||
style="width: 100px; height: 100px"
|
||||
:src="item"
|
||||
class="avatar"
|
||||
alt=""
|
||||
/>
|
||||
<div class="desc">{{ handleRegex(item) }}</div>
|
||||
</div>
|
||||
<i class="el-icon-plus avatar-uploader-icon" />
|
||||
</el-upload>
|
||||
<div style="color: red">(请上传.jpg, png的图片)</div>
|
||||
</el-form-item>
|
||||
<div
|
||||
style="display: flex; justify-content: flex-end; margin-bottom: 10px"
|
||||
>
|
||||
<el-button type="primary" @click="onAddtrip()">添加行程</el-button>
|
||||
</div>
|
||||
<el-form-item label="上传行程">
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action="admin/upload/index"
|
||||
:show-file-list="false"
|
||||
:on-success="handleSuccess"
|
||||
>
|
||||
<div v-for="(item, index) in anchors.trip_zip" class="img-box">
|
||||
<div class="upload-list">
|
||||
<div class="wu-yu" v-for="(item, index) in anchors.trip_zip">
|
||||
<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 class="desc">{{ handleRegex(item) }}</div>
|
||||
<el-input v-model="item.desc" placeholder="行程说明"></el-input>
|
||||
<el-upload
|
||||
class="avatar-uploader"
|
||||
action="/dev-api/admin/upload/index"
|
||||
:show-file-list="false"
|
||||
:on-success="
|
||||
(response, file, fileList) =>
|
||||
handleSuccess(response, file, fileList, index)
|
||||
"
|
||||
>
|
||||
<div v-if="!!item.file" class="img-box">
|
||||
<i
|
||||
v-if="!checkIfUrlContainsImage(item.file)"
|
||||
class="el-icon-folder"
|
||||
/>
|
||||
<img
|
||||
v-else
|
||||
style="width: 100px; height: 100px"
|
||||
:src="item.file"
|
||||
class="avatar"
|
||||
alt=""
|
||||
/>
|
||||
<div class="desc">{{ handleRegex(item.file) }}</div>
|
||||
</div>
|
||||
<i v-else class="el-icon-plus avatar-uploader-icon" />
|
||||
</el-upload>
|
||||
</div>
|
||||
<i class="el-icon-plus avatar-uploader-icon" />
|
||||
</el-upload>
|
||||
</div>
|
||||
<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
|
||||
>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer"></div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -361,13 +265,14 @@
|
|||
<script>
|
||||
import Pagination from "@/components/PaginationFixed";
|
||||
import myEditor from "@/components/Wangeditor/index.vue";
|
||||
|
||||
import { getToken } from "@/utils/auth";
|
||||
export default {
|
||||
name: "getQa",
|
||||
components: { Pagination, myEditor },
|
||||
data() {
|
||||
return {
|
||||
statusArr: { 0: "禁用", 1: "启用" },
|
||||
title: "",
|
||||
list: [],
|
||||
total: 0,
|
||||
loading: false,
|
||||
|
|
@ -387,8 +292,8 @@ export default {
|
|||
item: {},
|
||||
anchors: {
|
||||
qaQuestions: [],
|
||||
img_zip: [],
|
||||
trip_zip: [],
|
||||
img_zip: [{ desc: "", file: "" }],
|
||||
trip_zip: [{ desc: "", file: "" }],
|
||||
},
|
||||
getQaCitys: {},
|
||||
};
|
||||
|
|
@ -411,19 +316,42 @@ export default {
|
|||
".svg",
|
||||
".webp",
|
||||
];
|
||||
console.log(url);
|
||||
console.log(
|
||||
"========fffff====" +
|
||||
imageExtensions.some((extension) =>
|
||||
url.toLowerCase().endsWith(extension)
|
||||
)
|
||||
);
|
||||
console.log(url);
|
||||
return imageExtensions.some((extension) =>
|
||||
url.toLowerCase().endsWith(extension)
|
||||
);
|
||||
},
|
||||
|
||||
async handlesAvatarSuccess(file) {
|
||||
try {
|
||||
var formdata = new FormData();
|
||||
formdata.append("file", file.file);
|
||||
|
||||
this.upLoading = true;
|
||||
const _this = this;
|
||||
const res = await this.$axios.post("/admin/upload/index", formdata, {
|
||||
headers: {
|
||||
"Content-type": "multipart/form-data",
|
||||
"X-Token": getToken(),
|
||||
},
|
||||
});
|
||||
// if (![200].includes(res.data.code)) {
|
||||
// this.$message.error("上传失败");
|
||||
// return;
|
||||
// }
|
||||
// 主动回调success方法
|
||||
file.onSuccess(res);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
},
|
||||
handleClose(val, i) {
|
||||
if (this.anchors[val].length == 1) {
|
||||
this.$message({
|
||||
message: "至少保留一条",
|
||||
type: "warning",
|
||||
});
|
||||
return;
|
||||
}
|
||||
console.log("i===", i);
|
||||
this.anchors[val].splice(i, 1);
|
||||
},
|
||||
|
|
@ -461,19 +389,26 @@ export default {
|
|||
this.listLoading = false;
|
||||
});
|
||||
},
|
||||
handleAvatarSuccess(res, file) {
|
||||
console.log("====1111===" + res);
|
||||
this.anchors.img_zip.push(
|
||||
`${window.location.protocol}//${window.location.host}${res.data}`
|
||||
);
|
||||
console.log("====111122222===" + this.anchors.img_zip);
|
||||
onAddImg() {
|
||||
this.anchors.img_zip.push({ desc: "", file: "" });
|
||||
},
|
||||
handleSuccess(res, file) {
|
||||
console.log("====222222===" + res);
|
||||
this.anchors.trip_zip.push(
|
||||
`${window.location.protocol}//${window.location.host}${res.data}`
|
||||
);
|
||||
console.log("====111122222===" + this.anchors.trip_zip);
|
||||
onAddtrip() {
|
||||
this.anchors.trip_zip.push({ desc: "", file: "" });
|
||||
},
|
||||
handleAvatarSuccess(res, file, fileList, index) {
|
||||
if (!res.data) return;
|
||||
this.anchors.img_zip[
|
||||
index
|
||||
].file = `${window.location.protocol}//${window.location.host}${res.data}`;
|
||||
// this.anchors.img_zip.push(
|
||||
// `${window.location.protocol}//${window.location.host}${res.data}`
|
||||
// );
|
||||
},
|
||||
handleSuccess(res, file, fileList, index) {
|
||||
if (!res.data) return;
|
||||
this.anchors.trip_zip[
|
||||
index
|
||||
].file = `${window.location.protocol}//${window.location.host}${res.data}`;
|
||||
},
|
||||
handleRegex(val) {
|
||||
const regex = /\/([^\/]+)$/;
|
||||
|
|
@ -484,51 +419,54 @@ export default {
|
|||
this.listQuery.page = 1;
|
||||
this.getList();
|
||||
},
|
||||
onAdd() {
|
||||
this.anchors.qaQuestions = [
|
||||
{
|
||||
sort: 1,
|
||||
title: "",
|
||||
content: "",
|
||||
},
|
||||
];
|
||||
// 初始化时默认排序值为0
|
||||
this.anchors.img_zip = [];
|
||||
this.anchors.trip_zip = [];
|
||||
onAdd(item) {
|
||||
this.dialogCreate = true;
|
||||
},
|
||||
onEdit(item) {
|
||||
if (!item.qaQuestions.length) {
|
||||
this.anchors = {
|
||||
...item,
|
||||
qaQuestions: [
|
||||
{
|
||||
sort: 1,
|
||||
title: "",
|
||||
content: "",
|
||||
},
|
||||
],
|
||||
};
|
||||
if (!item.id) {
|
||||
this.title = "添加QA";
|
||||
this.anchors.qaQuestions = [
|
||||
{
|
||||
sort: 1,
|
||||
title: "",
|
||||
content: "",
|
||||
},
|
||||
];
|
||||
// 初始化时默认排序值为0
|
||||
this.anchors.img_zip = [{ desc: "", file: "" }];
|
||||
this.anchors.trip_zip = [{ desc: "", file: "" }];
|
||||
} else {
|
||||
this.anchors = { ...item };
|
||||
this.title = "编辑QA";
|
||||
if (!item.qaQuestions.length) {
|
||||
this.anchors = {
|
||||
...item,
|
||||
qaQuestions: [
|
||||
{
|
||||
sort: 1,
|
||||
title: "",
|
||||
content: "",
|
||||
},
|
||||
],
|
||||
};
|
||||
} else {
|
||||
this.anchors = { ...item };
|
||||
}
|
||||
this.anchors.img_zip = item.img_zip
|
||||
? item.img_zip
|
||||
: [{ desc: "", file: "" }];
|
||||
this.anchors.trip_zip = item.trip_zip
|
||||
? item.trip_zip
|
||||
: [{ desc: "", file: "" }];
|
||||
}
|
||||
this.anchors.img_zip = item.img_zip;
|
||||
this.anchors.trip_zip = item.trip_zip;
|
||||
// this.anchors.img_zip =
|
||||
// typeof item.img_zip == "string" ? [item.img_zip] : item.img_zip;
|
||||
// this.anchors.trip_zip =
|
||||
// typeof item.trip_zip == "string" ? [item.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";
|
||||
const api =
|
||||
this.title == "添加QA" ? "/admin/qa/addQa" : "/admin/qa/editQa";
|
||||
this.$axios
|
||||
.post(api, this.anchors)
|
||||
.then(() => {
|
||||
this.dialogCreate = false;
|
||||
this.dialogEdit = false;
|
||||
// this.dialogEdit = false;
|
||||
this.loading = false;
|
||||
this.getList();
|
||||
})
|
||||
|
|
@ -585,11 +523,33 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.upload-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.wu-yu {
|
||||
margin-bottom: 10px;
|
||||
position: relative;
|
||||
& + .wu-yu {
|
||||
margin-left: 5px;
|
||||
}
|
||||
::v-deep.el-input {
|
||||
width: 100px;
|
||||
margin: 0 0 10px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.filter-items {
|
||||
position: fixed;
|
||||
// right: 0;
|
||||
left: 70%;
|
||||
z-index: 66;
|
||||
}
|
||||
.img-box {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: 10px;
|
||||
& + .img-box {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
|
@ -615,7 +575,7 @@ export default {
|
|||
.close {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -8px;
|
||||
right: -15px;
|
||||
font-size: 18px;
|
||||
color: #409eff;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ module.exports = {
|
|||
proxy: {
|
||||
'/dev-api': { // 接口地址 以 api开头的都走下面的配置
|
||||
// target: 'https://www.szjinao.cn', // 代理目标地址为后端服务器地址 127.0.0.1 192.168.1.2
|
||||
target: 'http://0.0.0.0:8787', // 代理目标地址为后端服务器地址 127.0.0.1 192.168.1.2
|
||||
target: 'http://192.168.1.4:8787', // 代理目标地址为后端服务器地址 127.0.0.1 192.168.1.2
|
||||
ws: true, // 是否支持 websocket 请求 支持
|
||||
changeOrigin: true, // 是否启用跨域
|
||||
pathRewrite: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue