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