|
|
|
|
@ -13,9 +13,11 @@ |
|
|
|
|
<el-table v-loading="listLoading" ref="table" :data="list" default-expand-all class="table" header-align="center" |
|
|
|
|
@selection-change="handleSelectionChange" row-key="id"> |
|
|
|
|
<el-table-column type="selection" width="50" align="center" :reserve-selection="true"></el-table-column> |
|
|
|
|
<el-table-column prop="schemeName" show-overflow-tooltip label="页脚名称" min-width="140"></el-table-column> |
|
|
|
|
<el-table-column prop="footerName" show-overflow-tooltip label="页脚名称" min-width="140"></el-table-column> |
|
|
|
|
<el-table-column prop="scopeOfApplication" label="应用范围" min-width="100"></el-table-column> |
|
|
|
|
<el-table-column prop="numberOfContentModules" label="模块名称" min-width="100"></el-table-column> |
|
|
|
|
<el-table-column prop="templateName" label="模块名称" min-width="100"> |
|
|
|
|
<!-- <template slot-scope="scope">{{ styles[scope.row.floatingBarStyle].name }}</template> --> |
|
|
|
|
</el-table-column> |
|
|
|
|
<el-table-column prop="createTime" label="创建时间" min-width="100"></el-table-column> |
|
|
|
|
<el-table-column prop="updateTime" label="最近编辑" min-width="100"></el-table-column> |
|
|
|
|
<el-table-column prop="editorSName" label="编辑人" min-width="100"></el-table-column> |
|
|
|
|
@ -39,84 +41,139 @@ |
|
|
|
|
layout="total, prev, pager, next" :total="total"></el-pagination> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<el-dialog title="模块管理" :visible.sync="moduleVisible" width="1000px" :close-on-click-modal="false"> |
|
|
|
|
<el-dialog title="模块管理" :visible.sync="moduleVisible" width="1200px" :close-on-click-modal="false" |
|
|
|
|
@closed="moduleClose"> |
|
|
|
|
<el-form ref="form" :model="form" :rules="rules" label-suffix="："> |
|
|
|
|
<div class="flex"> |
|
|
|
|
<el-form-item prop="schemeName" label="页脚名称" label-width="100px"> |
|
|
|
|
<el-input style="width: 200px" placeholder="请输入页脚名称" v-model="form.schemeName" clearable |
|
|
|
|
<el-form-item prop="footerName" label="页脚名称" label-width="100px"> |
|
|
|
|
<el-input style="width: 200px" placeholder="请输入页脚名称" v-model="form.footerName" clearable |
|
|
|
|
maxlength="10"></el-input> |
|
|
|
|
</el-form-item> |
|
|
|
|
<el-form-item prop="style" label="页脚样式" label-width="110px"> |
|
|
|
|
<el-select v-model="form.floatingBarStyle" clearable> |
|
|
|
|
<el-select v-model="form.floatingBarStyle" @change="styleChange"> |
|
|
|
|
<el-option v-for="item in styles" :key="item.id" :label="item.name" :value="item.id"> |
|
|
|
|
</el-option> |
|
|
|
|
</el-select> |
|
|
|
|
</el-form-item> |
|
|
|
|
</div> |
|
|
|
|
<!-- <div class="contact"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<div class="title c-wrap"> |
|
|
|
|
<h6>{{ modules[10].form.title }}</h6> |
|
|
|
|
<p class="text">{{ modules[10].form.des }}</p> |
|
|
|
|
<div class="cover" @click="toSet(10)">点击更改标题与描述</div> |
|
|
|
|
<div v-if="modules.length" class="m-b-20"> |
|
|
|
|
<!-- 常规样式 --> |
|
|
|
|
<div v-if="form.floatingBarStyle === 1" class="contact"> |
|
|
|
|
<div class="c-wrap"> |
|
|
|
|
<div class="title"> |
|
|
|
|
<h6>{{ modules[0].form.title }}</h6> |
|
|
|
|
<p class="text">{{ modules[0].form.des }}</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="region"> |
|
|
|
|
<img class="dot" src="https://huorantech.com/images/about/dot.png" alt=""> |
|
|
|
|
<p class="name">深圳</p> |
|
|
|
|
<p class="name">{{ modules[0].form.area }}</p> |
|
|
|
|
</div> |
|
|
|
|
<div class="cover" @click="toSet(0)">点击更改标题、描述与地区</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="info"> |
|
|
|
|
<img class="logo" :src="modules[11].form.pic" alt=""> |
|
|
|
|
<img class="logo" :src="modules[1].form.pic" alt=""> |
|
|
|
|
<div class="texts c-wrap"> |
|
|
|
|
<div class="item"> |
|
|
|
|
<div class="line"> |
|
|
|
|
<img class="icon" src="https://huorantech.com/images/about/site.png" alt=""> |
|
|
|
|
{{ modules[11].form.siteName }} |
|
|
|
|
{{ modules[1].form.siteName }} |
|
|
|
|
</div> |
|
|
|
|
<div class="line"> |
|
|
|
|
<img class="icon" src="https://huorantech.com/images/about/address.png" alt=""> |
|
|
|
|
{{ modules[11].form.address }} |
|
|
|
|
{{ modules[1].form.address }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="item"> |
|
|
|
|
<div class="line"> |
|
|
|
|
<img class="icon" src="https://huorantech.com/images/about/phone.png" alt=""> |
|
|
|
|
{{ modules[11].form.phone }} |
|
|
|
|
{{ modules[1].form.phone }} |
|
|
|
|
</div> |
|
|
|
|
<div class="line"> |
|
|
|
|
<img class="icon" src="https://huorantech.com/images/about/mail.png" alt=""> |
|
|
|
|
{{ modules[11].form.mail }} |
|
|
|
|
{{ modules[1].form.mail }} |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="cover" style="width: 800px" @click="toSet(11)">点击更改信息</div> |
|
|
|
|
<div class="cover" style="width: 760px" @click="toSet(1)">点击更改信息</div> |
|
|
|
|
<div class="qrcode c-wrap"> |
|
|
|
|
<img width="103" :src="modules[12].form.pic" alt=""> |
|
|
|
|
<p class="text">{{ modules[12].form.title }}</p> |
|
|
|
|
<div class="cover" @click="toSet(12)">点击更改信息</div> |
|
|
|
|
<img width="103" :src="modules[2].form.pic" alt=""> |
|
|
|
|
<p class="text">{{ modules[2].form.title }}</p> |
|
|
|
|
<div class="cover" @click="toSet(2)">点击更改信息</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="qrcode c-wrap m-l-30"> |
|
|
|
|
<img width="103" :src="modules[13].form.pic" alt=""> |
|
|
|
|
<p class="text">{{ modules[13].form.title }}</p> |
|
|
|
|
<div class="cover" @click="toSet(13)">点击更改信息</div> |
|
|
|
|
<img width="103" :src="modules[3].form.pic" alt=""> |
|
|
|
|
<p class="text">{{ modules[3].form.title }}</p> |
|
|
|
|
<div class="cover" @click="toSet(3)">点击更改信息</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- 含网站导航 --> |
|
|
|
|
<div v-else-if="form.floatingBarStyle === 2" class="footer"> |
|
|
|
|
<div class="relative text-center"> |
|
|
|
|
<img :src="modules[0].form.pic" alt=""> |
|
|
|
|
<div class="flex j-center a-center m-t-20"> |
|
|
|
|
<div class="flex"> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="flex j-center a-center m-t-20"> |
|
|
|
|
<div class="flex"> |
|
|
|
|
<div v-for="(item, i) in columns.slice(0, 5)" :key="i" class="column"> |
|
|
|
|
<h6>{{ item.columnName }}</h6> |
|
|
|
|
<ul v-if="item.children.length" class="children"> |
|
|
|
|
<li v-for="(column, j) in item.children" :key="j">{{ column.columnName }}</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div v-html="modules[0].form.info"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="cover" @click="toSet(0)">点击更改页脚信息</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- 英文字母 --> |
|
|
|
|
<div v-else-if="form.floatingBarStyle === 3" class="footer3"> |
|
|
|
|
<div class="flex j-between"> |
|
|
|
|
<div class="c-wrap"> |
|
|
|
|
<div v-html="modules[0].form.info"></div> |
|
|
|
|
<div class="cover" @click="toSet(0)">点击更改页脚信息</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="flex text-center"> |
|
|
|
|
<div class="qrcode"> |
|
|
|
|
<p class="title">{{ modules[1].form.title }}</p> |
|
|
|
|
<img width="103" :src="modules[1].form.pic" alt=""> |
|
|
|
|
<p class="text">{{ modules[1].form.des }}</p> |
|
|
|
|
<div class="cover" @click="toSet(1)">点击更改信息</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="qrcode m-l-30"> |
|
|
|
|
<p class="title">{{ modules[2].form.title }}</p> |
|
|
|
|
<img width="103" :src="modules[2].form.pic" alt=""> |
|
|
|
|
<p class="text">{{ modules[2].form.des }}</p> |
|
|
|
|
<div class="cover" @click="toSet(2)">点击更改信息</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="c-wrap"> |
|
|
|
|
<div v-html="modules[3].form.info"></div> |
|
|
|
|
<div class="cover" @click="toSet(3)">点击更改版权信息</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> --> |
|
|
|
|
<el-form-item label="应用范围"> |
|
|
|
|
<div class="flex"> |
|
|
|
|
<el-radio-group class="m-t-10" v-model="range"> |
|
|
|
|
<el-radio :label="0">网站全局</el-radio> |
|
|
|
|
<el-radio :label="1">选择栏目</el-radio> |
|
|
|
|
<el-radio-group class="m-t-10" v-model="form.isGlobal"> |
|
|
|
|
<el-radio :label="1">网站全局</el-radio> |
|
|
|
|
<el-radio :label="0">选择栏目</el-radio> |
|
|
|
|
</el-radio-group> |
|
|
|
|
|
|
|
|
|
<el-cascader v-if="range" class="m-l-30" v-model="selectColumn" :options="columns" :props="columnProps" |
|
|
|
|
clearable></el-cascader> |
|
|
|
|
<el-cascader v-if="!form.isGlobal" class="m-l-30" v-model="selectColumn" :options="columns" |
|
|
|
|
:props="columnProps" clearable></el-cascader> |
|
|
|
|
</div> |
|
|
|
|
</el-form-item> |
|
|
|
|
</el-form> |
|
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
|
<el-button @click="moduleVisible = false">取消</el-button> |
|
|
|
|
<el-button type="primary" @click="moduleSubmit">确定</el-button> |
|
|
|
|
<el-button type="primary" @click="moduleSave">确定</el-button> |
|
|
|
|
</span> |
|
|
|
|
</el-dialog> |
|
|
|
|
|
|
|
|
|
@ -125,16 +182,14 @@ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
import Setting from '@/setting' |
|
|
|
|
import Util from '@/libs/util' |
|
|
|
|
import Axios from 'axios' |
|
|
|
|
import Editor from '@tinymce/tinymce-vue' |
|
|
|
|
import editorConfig from '@/components/editor' |
|
|
|
|
import Modules from '@/const/modules' |
|
|
|
|
import mixins from '@/mixins/page' |
|
|
|
|
import _ from 'lodash' |
|
|
|
|
export default { |
|
|
|
|
mixins: [mixins], |
|
|
|
|
data () { |
|
|
|
|
return { |
|
|
|
|
editorConfig, |
|
|
|
|
siteId: this.$store.state.content.site.id, |
|
|
|
|
siteName: this.$store.state.content.site.siteName, |
|
|
|
|
keyword: '', |
|
|
|
|
@ -145,9 +200,23 @@ export default { |
|
|
|
|
total: 0, |
|
|
|
|
multipleSelection: [], |
|
|
|
|
listLoading: false, |
|
|
|
|
range: 0, |
|
|
|
|
selectColumn: [], |
|
|
|
|
styles: [], |
|
|
|
|
allModule: Modules.footer, |
|
|
|
|
modules: Modules.footer[0], |
|
|
|
|
styles: [ |
|
|
|
|
{ |
|
|
|
|
id: 1, |
|
|
|
|
name: '常规样式' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 2, |
|
|
|
|
name: '含网站导航' |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 3, |
|
|
|
|
name: '英文字母' |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
columns: [], |
|
|
|
|
columnProps: { |
|
|
|
|
multiple: true, |
|
|
|
|
@ -157,90 +226,21 @@ export default { |
|
|
|
|
originForm: {}, |
|
|
|
|
form: { |
|
|
|
|
editorId: this.$store.state.user.userId, |
|
|
|
|
schemeName: '', |
|
|
|
|
floatingBarStyle: '1', |
|
|
|
|
footerName: '', |
|
|
|
|
floatingBarStyle: 1, |
|
|
|
|
siteId: this.$store.state.content.site.id, |
|
|
|
|
floatingColumnSchemeModules: [ |
|
|
|
|
{ |
|
|
|
|
pictureAddress: 'https://huorantech.com/images/index/wechat.png', |
|
|
|
|
schemeTitle: '微信扫码添加职站售前咨询', |
|
|
|
|
isDisable: 0, |
|
|
|
|
schemeContentJson: ` |
|
|
|
|
<div style="width: 168px;text-align: center;line-height: normal;"> |
|
|
|
|
<p style="margin: 5px 0 15px;font-size: 12px;color: #333;">提供付费咨询及解决方案</p> |
|
|
|
|
<img width="150" src="https://huorantech.com/images/index/customer.png" alt=""> |
|
|
|
|
</div> |
|
|
|
|
` |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
pictureAddress: 'https://huorantech.com/images/index/tel.png', |
|
|
|
|
schemeTitle: '', |
|
|
|
|
isDisable: 0, |
|
|
|
|
schemeContentJson: ` |
|
|
|
|
<div style="width: 190px;line-height: normal;"> |
|
|
|
|
<div style="display: flex;margin-bottom: 20px;"> |
|
|
|
|
<div> |
|
|
|
|
<img src="https://huorantech.com/images/index/tel-2.png" alt=""> |
|
|
|
|
</div> |
|
|
|
|
<div style="margin-left: 15px;"> |
|
|
|
|
<p style="font-size: 14px;cursor: pointer;">售前咨询</p> |
|
|
|
|
<p style="margin: 5px 0;font-size: 12px;color: #006eff;">金老师</p> |
|
|
|
|
<p style="font-size: 12px;color: #006eff;">15218726836</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div style="display: flex;"> |
|
|
|
|
<div> |
|
|
|
|
<img src="https://huorantech.com/images/index/sug.png" alt=""> |
|
|
|
|
</div> |
|
|
|
|
<div style="margin-left: 15px;"> |
|
|
|
|
<a style="font-size: 14px;color: #333;text-decoration: none;cursor: pointer;" target="_blank" href="https://www.wjx.cn/vm/wB0RcMm.aspx">咨询，建议与反馈</a> |
|
|
|
|
<p style="margin-top: 5px;font-size: 12px;color: #686868;">您的每一条建议声音，我们都认真对待</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
` |
|
|
|
|
} |
|
|
|
|
], |
|
|
|
|
floatingColumnSchemeScopeOfApplications: [], |
|
|
|
|
}, |
|
|
|
|
originModules: { |
|
|
|
|
pictureAddress: '', |
|
|
|
|
schemeContentJson: '', |
|
|
|
|
schemeTitle: '', |
|
|
|
|
isDisable: 0, |
|
|
|
|
isGlobal: 1, |
|
|
|
|
footerSetupScopeOfApplications: [], |
|
|
|
|
footerContent: '', |
|
|
|
|
}, |
|
|
|
|
rules: { |
|
|
|
|
schemeName: [ |
|
|
|
|
{ required: true, message: '请输入悬浮栏目名称', trigger: 'blur' } |
|
|
|
|
footerName: [ |
|
|
|
|
{ required: true, message: '请输入页脚名称', trigger: 'blur' } |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
moduleVisible: false, |
|
|
|
|
modules: [], |
|
|
|
|
|
|
|
|
|
curRow: {}, |
|
|
|
|
curModule: 0, |
|
|
|
|
contentVisible: false, |
|
|
|
|
contentRules: { |
|
|
|
|
pictureAddress: [ |
|
|
|
|
{ required: true, message: '请上传图片', trigger: 'change' } |
|
|
|
|
], |
|
|
|
|
// schemeTitle: [ |
|
|
|
|
// { required: true, message: '请输入标题', trigger: 'blur' } |
|
|
|
|
// ], |
|
|
|
|
schemeContentJson: [ |
|
|
|
|
{ required: true, message: '请输入内容', trigger: 'blur' } |
|
|
|
|
], |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
cropperModel: false, |
|
|
|
|
isUpload: false, |
|
|
|
|
fixedNumber: [1, 1], |
|
|
|
|
file: {}, // 当前被选择的图片文件 |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
components: { |
|
|
|
|
Editor, |
|
|
|
|
}, |
|
|
|
|
watch: { |
|
|
|
|
keyword: function (val) { |
|
|
|
|
clearTimeout(this.searchTimer) |
|
|
|
|
@ -262,13 +262,14 @@ export default { |
|
|
|
|
name: '页脚设置' |
|
|
|
|
} |
|
|
|
|
]) |
|
|
|
|
// this.originForm = _.cloneDeep(this.form) |
|
|
|
|
// this.getData() |
|
|
|
|
// this.getColumn() |
|
|
|
|
this.originForm = _.cloneDeep(this.form) |
|
|
|
|
console.log(111, Modules.footer, this.modules) |
|
|
|
|
this.getData() |
|
|
|
|
this.getColumn() |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
getData () { |
|
|
|
|
this.$post(this.api.listFloating, { |
|
|
|
|
this.$post(this.api.footerList, { |
|
|
|
|
siteId: this.siteId, |
|
|
|
|
search: this.keyword, |
|
|
|
|
pageNum: this.page, |
|
|
|
|
@ -299,37 +300,15 @@ export default { |
|
|
|
|
this.columns = data |
|
|
|
|
}, |
|
|
|
|
add () { |
|
|
|
|
this.range = 0 |
|
|
|
|
this.modules = this.allModule[0] |
|
|
|
|
this.selectColumn = [] |
|
|
|
|
this.form = _.cloneDeep(this.originForm) |
|
|
|
|
this.moduleVisible = true |
|
|
|
|
}, |
|
|
|
|
// 添加行 |
|
|
|
|
addRow () { |
|
|
|
|
this.curRow = _.cloneDeep(this.originModules) |
|
|
|
|
this.curModule = -1 |
|
|
|
|
this.contentVisible = true |
|
|
|
|
}, |
|
|
|
|
// 编辑内容 |
|
|
|
|
editRow (row, i = 0) { |
|
|
|
|
this.curRow = _.cloneDeep(row) |
|
|
|
|
this.curModule = i |
|
|
|
|
this.contentVisible = true |
|
|
|
|
}, |
|
|
|
|
// 删除行（通用） |
|
|
|
|
delRow (i) { |
|
|
|
|
this.$confirm('确定要删除吗？', '提示', { |
|
|
|
|
type: 'warning' |
|
|
|
|
}).then(() => { |
|
|
|
|
this.form.floatingColumnSchemeModules.splice(i, 1) |
|
|
|
|
}).catch(() => { }) |
|
|
|
|
}, |
|
|
|
|
async edit (row) { |
|
|
|
|
this.moduleVisible = true |
|
|
|
|
const { data } = await this.$post(`${this.api.findFloating}?id=${row.floatingBarSchemeId}`) |
|
|
|
|
const range = data.floatingColumnSchemeScopeOfApplications |
|
|
|
|
// 应用范围数组里有一个对象的applicationScopeId为0，则是网站全局 |
|
|
|
|
this.range = row.isGlobal ? 0 : 1 |
|
|
|
|
const { data } = await this.$post(`${this.api.findFooter}?id=${row.footerId}`) |
|
|
|
|
const range = data.footerSetupScopeOfApplications |
|
|
|
|
if (!row.isGlobal) { |
|
|
|
|
const column = [] |
|
|
|
|
// 选择栏目 |
|
|
|
|
@ -337,40 +316,44 @@ export default { |
|
|
|
|
column.push(e.applicationScopeId.split(',').map(n => +n)) |
|
|
|
|
}) |
|
|
|
|
this.selectColumn = column |
|
|
|
|
console.log("🚀 ~ edit ~ this.selectColumn:", this.selectColumn) |
|
|
|
|
} |
|
|
|
|
this.modules = JSON.parse(data.footerContent) |
|
|
|
|
|
|
|
|
|
this.form = data |
|
|
|
|
}, |
|
|
|
|
// 样式切换回调 |
|
|
|
|
styleChange (id) { |
|
|
|
|
this.modules = this.allModule[id - 1] |
|
|
|
|
}, |
|
|
|
|
// 模块设置提交 |
|
|
|
|
moduleSubmit () { |
|
|
|
|
moduleSave () { |
|
|
|
|
this.$refs.form.validate(async (valid) => { |
|
|
|
|
if (valid) { |
|
|
|
|
if (this.submiting) return false |
|
|
|
|
const form = JSON.parse(JSON.stringify(this.form)) |
|
|
|
|
if (!form.floatingColumnSchemeModules.length) return Util.warningMsg('请添加内容模块') |
|
|
|
|
const column = this.selectColumn |
|
|
|
|
if (this.range && !column.length) return Util.warningMsg('请选择栏目') |
|
|
|
|
if (!form.isGlobal && !column.length) return Util.warningMsg('请选择栏目') |
|
|
|
|
|
|
|
|
|
this.submiting = true |
|
|
|
|
if (this.range) { |
|
|
|
|
// 选择栏目 |
|
|
|
|
if (!form.isGlobal) { |
|
|
|
|
const scope = [] |
|
|
|
|
// debugger |
|
|
|
|
column.map(e => { |
|
|
|
|
scope.push({ |
|
|
|
|
applicationScopeId: typeof e === 'number' ? e : e.join(',') |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
form.floatingColumnSchemeScopeOfApplications = scope |
|
|
|
|
form.footerSetupScopeOfApplications = scope |
|
|
|
|
} else { |
|
|
|
|
form.floatingColumnSchemeScopeOfApplications = [{ |
|
|
|
|
form.footerSetupScopeOfApplications = [{ |
|
|
|
|
applicationScopeId: 0 |
|
|
|
|
}] |
|
|
|
|
} |
|
|
|
|
if (!form.floatingBarSchemeId) form.founderId = form.editorId |
|
|
|
|
// debugger |
|
|
|
|
form.footerContent = JSON.stringify(this.modules) |
|
|
|
|
form.isDisable = 1 |
|
|
|
|
if (!form.footerId) form.founderId = form.editorId // 新增则创建人即编辑人 |
|
|
|
|
try { |
|
|
|
|
await this.$post(this.api.saveFloating, form) |
|
|
|
|
await this.$post(this.api.saveFooter, form) |
|
|
|
|
Util.successMsg('新增成功！') |
|
|
|
|
this.moduleVisible = false |
|
|
|
|
this.getData() |
|
|
|
|
@ -383,29 +366,16 @@ export default { |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 内容设置提交 |
|
|
|
|
contentSubmit () { |
|
|
|
|
this.$refs.contentForm.validate(async (valid) => { |
|
|
|
|
if (valid) { |
|
|
|
|
this.contentVisible = false |
|
|
|
|
const row = this.curRow |
|
|
|
|
if (this.curModule === -1) { |
|
|
|
|
this.form.floatingColumnSchemeModules.push(_.cloneDeep(row)) |
|
|
|
|
} else { |
|
|
|
|
const list = this.form.floatingColumnSchemeModules[this.curModule] |
|
|
|
|
for (const i in row) { |
|
|
|
|
this.$set(list, i, row[i]) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
// 模块弹框关闭回调 |
|
|
|
|
moduleClose () { |
|
|
|
|
this.modules = [] |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
del (row) { |
|
|
|
|
this.$confirm('确定要删除吗？', "提示", { |
|
|
|
|
type: "warning" |
|
|
|
|
}).then(() => { |
|
|
|
|
this.$post(`${this.api.batchDeletionFloating}?id=${row.floatingBarSchemeId}`).then(res => { |
|
|
|
|
this.$post(`${this.api.batchDeletionFooter}?ids=${row.footerId}`).then(res => { |
|
|
|
|
Util.successMsg("删除成功") |
|
|
|
|
this.getData() |
|
|
|
|
}).catch(res => { }) |
|
|
|
|
@ -414,21 +384,24 @@ export default { |
|
|
|
|
// 禁用启用 |
|
|
|
|
async switchOff (row) { |
|
|
|
|
try { |
|
|
|
|
const { code, msg } = await this.$post(`${this.api.checkEnableOrDisable}?id=${row.floatingBarSchemeId}&isDisable=${row.isDisable}`) |
|
|
|
|
// debugger |
|
|
|
|
const { code, msg } = await this.$post(`${this.api.checkEnableOrDisableFooter}?id=${row.footerId}&isDisable=${row.isDisable}`) |
|
|
|
|
if (code === 300) { |
|
|
|
|
// 悬浮栏管理里的禁用启用返回300要弹询问框选择是否继续 |
|
|
|
|
this.$confirm(msg, '提示', { |
|
|
|
|
type: "warning" |
|
|
|
|
}).then(async () => { |
|
|
|
|
await this.$post(`${this.api.enableOrDisableScheme}?id=${row.floatingBarSchemeId}&isDisable=${row.isDisable}`) |
|
|
|
|
await this.$post(`${this.api.enableOrDisableSchemeFooter}?id=${row.footerId}&isDisable=${row.isDisable}`) |
|
|
|
|
this.getData() |
|
|
|
|
}).catch(() => { |
|
|
|
|
row.isDisable = row.isDisable ? 0 : 1 |
|
|
|
|
}) |
|
|
|
|
} else { |
|
|
|
|
await this.$post(`${this.api.enableOrDisableScheme}?id=${row.floatingBarSchemeId}&isDisable=${row.isDisable}`) |
|
|
|
|
await this.$post(`${this.api.enableOrDisableSchemeFooter}?id=${row.footerId}&isDisable=${row.isDisable}`) |
|
|
|
|
this.getData() |
|
|
|
|
} |
|
|
|
|
} catch (e) { |
|
|
|
|
row.isDisable = row.isDisable ? 0 : 1 |
|
|
|
|
} |
|
|
|
|
} catch (e) { } |
|
|
|
|
}, |
|
|
|
|
// 批量删除 |
|
|
|
|
batchDel () { |
|
|
|
|
@ -438,9 +411,9 @@ export default { |
|
|
|
|
type: 'warning' |
|
|
|
|
}).then(() => { |
|
|
|
|
const ids = list.map(e => { |
|
|
|
|
return 'id=' + e.floatingBarSchemeId |
|
|
|
|
return 'ids=' + e.footerId |
|
|
|
|
}) |
|
|
|
|
this.$post(`${this.api.batchDeletionFloating}?${ids.join('&')}`).then(res => { |
|
|
|
|
this.$post(`${this.api.batchDeletionFooter}?${ids.join('&')}`).then(res => { |
|
|
|
|
this.$refs.table.clearSelection() |
|
|
|
|
Util.successMsg("删除成功") |
|
|
|
|
this.getData() |
|
|
|
|
@ -462,89 +435,126 @@ export default { |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
.plus { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
font-size: 20px; |
|
|
|
|
text-align: center; |
|
|
|
|
color: $main-color; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
@import '../../styles/page/page.scss'; |
|
|
|
|
|
|
|
|
|
.del { |
|
|
|
|
margin-left: 8px; |
|
|
|
|
font-size: 18px; |
|
|
|
|
color: #333; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
.contact { |
|
|
|
|
position: relative; |
|
|
|
|
padding: 0 0 106px 0; |
|
|
|
|
background: url(https://huorantech.com/images/about/map.png) 0 0 / cover no-repeat; |
|
|
|
|
|
|
|
|
|
$upload-width: 220px; |
|
|
|
|
$upload-height: 102px; |
|
|
|
|
$upload-lg-height: 102px; |
|
|
|
|
.inner { |
|
|
|
|
padding: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/deep/ .avatar-uploader { |
|
|
|
|
.el-upload { |
|
|
|
|
position: relative; |
|
|
|
|
width: $upload-width; |
|
|
|
|
height: $upload-height; |
|
|
|
|
border: 1px solid #dcdee0; |
|
|
|
|
border-radius: 2px; |
|
|
|
|
cursor: pointer; |
|
|
|
|
overflow: hidden; |
|
|
|
|
.title { |
|
|
|
|
width: 419px; |
|
|
|
|
height: 258px; |
|
|
|
|
padding: 113px 0 0 43px; |
|
|
|
|
background-color: #0854fe; |
|
|
|
|
|
|
|
|
|
h6 { |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
font-size: 46px; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.uploader-default { |
|
|
|
|
.text { |
|
|
|
|
font-size: 28px; |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.region { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 152px; |
|
|
|
|
left: 70%; |
|
|
|
|
display: flex; |
|
|
|
|
height: $upload-height; |
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
text-align: center; |
|
|
|
|
background: #fafafa; |
|
|
|
|
font-size: 20px; |
|
|
|
|
color: #fff; |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #333; |
|
|
|
|
line-height: 20px; |
|
|
|
|
img { |
|
|
|
|
margin-right: 20px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.info { |
|
|
|
|
margin: 86px 0 0 44px; |
|
|
|
|
|
|
|
|
|
.texts { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-top: 24px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.avatar-uploader-lg { |
|
|
|
|
.el-upload { |
|
|
|
|
width: 100%; |
|
|
|
|
max-width: 820px; |
|
|
|
|
height: $upload-lg-height; |
|
|
|
|
.item { |
|
|
|
|
margin-right: 30px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.uploader-default { |
|
|
|
|
height: $upload-lg-height; |
|
|
|
|
.line { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
font-size: 16px; |
|
|
|
|
color: #fff; |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
margin-right: 8px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.avatar { |
|
|
|
|
display: block; |
|
|
|
|
width: $upload-width; |
|
|
|
|
height: $upload-height; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.avatar-lg { |
|
|
|
|
display: block; |
|
|
|
|
width: 100%; |
|
|
|
|
height: $upload-lg-height; |
|
|
|
|
.footer { |
|
|
|
|
position: relative; |
|
|
|
|
padding: 48px 20% 25px; |
|
|
|
|
color: #fff; |
|
|
|
|
background-color: #091733; |
|
|
|
|
overflow: hidden; |
|
|
|
|
background: rgba(0, 5, 12, .8) url(../../assets/images/footer-bg.png) no-repeat; |
|
|
|
|
|
|
|
|
|
.meta { |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
font-size: 14px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.el-upload__tip { |
|
|
|
|
margin-top: 0; |
|
|
|
|
.column { |
|
|
|
|
margin: 0 20px; |
|
|
|
|
|
|
|
|
|
p { |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #333; |
|
|
|
|
h6 { |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
font-size: 16px; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.copyright { |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #6d7384; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.pic { |
|
|
|
|
max-width: 100px; |
|
|
|
|
.footer3 { |
|
|
|
|
padding: 30px; |
|
|
|
|
background-color: #303246; |
|
|
|
|
|
|
|
|
|
.qrcode { |
|
|
|
|
position: relative; |
|
|
|
|
color: #fff; |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
margin: 10px 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.title { |
|
|
|
|
font-size: 14px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
|
font-size: 12px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
