221 lines
8.2 KiB
Vue
221 lines
8.2 KiB
Vue
<template>
|
||
<el-card class="box-card">
|
||
<div slot="header" class="clearfix" style="text-align: center">
|
||
<span style="font-size: 20px;line-height: 2em;">消息推送设置</span>
|
||
<div style="color: #999999">我们将针对您的选择，为您精准推送询价信息</div>
|
||
</div>
|
||
<el-row class="setting-list" :gutter="50">
|
||
<el-col :span="12" v-for="(item,index) in settingList" :key="index">
|
||
<div class="item">
|
||
<div class="title">
|
||
<el-badge is-dot class="badge"></el-badge>
|
||
{{ item.title }}
|
||
</div>
|
||
<div class="btn">
|
||
<el-switch
|
||
v-model="item.status">
|
||
</el-switch>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
<el-divider></el-divider>
|
||
<div class="form">
|
||
<div class="form-title">
|
||
* 请选择产品：
|
||
</div>
|
||
<el-form ref="form" :model="form" label-position="left" label-width="120px">
|
||
<el-form-item :label="item.name" v-for="(item, index) in productList" :key="index">
|
||
<el-checkbox-group v-model="productList[index].idList" size="small">
|
||
<el-checkbox v-for="(productItem, productIndex) in item.children" :key="productIndex"
|
||
:label="productItem._id" border
|
||
:checked="productList[index].idList.includes(item._id)">
|
||
{{ item.name }}
|
||
</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<el-divider></el-divider>
|
||
<div class="form">
|
||
<div class="form-title">
|
||
* 请选择服务地区：
|
||
</div>
|
||
<el-row :gutter="10">
|
||
<el-col :span="4">
|
||
<el-select v-model="addressIndex[0]" placeholder="请选择省">
|
||
<el-option v-for="(item, index) in provinceData" :key="index"
|
||
:label="item.name"
|
||
:value="index">
|
||
</el-option>
|
||
</el-select>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-select v-model="addressIndex[1]" placeholder="请选择市"
|
||
:disabled="addressIndex.length === 0">
|
||
<template v-if="addressIndex[0] !== null">
|
||
<el-option v-for="(item, index) in cityData[addressIndex[0]]"
|
||
:key="index"
|
||
:label="item.name"
|
||
:value="index">
|
||
</el-option>
|
||
</template>
|
||
</el-select>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<el-select v-model="addressIndex[2]" placeholder="请选择区"
|
||
:disabled="addressIndex.length === 1">
|
||
<template
|
||
v-if="addressIndex[0] !== null && addressIndex[1] !== null">
|
||
<el-option
|
||
v-for="(item, index) in areaData[addressIndex[0]][addressIndex[1]]"
|
||
:key="index"
|
||
:label="item.name"
|
||
:value="index">
|
||
</el-option>
|
||
</template>
|
||
</el-select>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<el-divider></el-divider>
|
||
<el-button type="danger" round @click.native="save">保存设置</el-button>
|
||
</el-card>
|
||
</template>
|
||
|
||
<script>
|
||
import provinces from "@/uni_modules/vk-uview-ui/libs/address/provinces.json";
|
||
import citys from "@/uni_modules/vk-uview-ui/libs/address/citys.json";
|
||
import areas from "@/uni_modules/vk-uview-ui/libs/address/areas.json";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
provinceData: provinces,
|
||
cityData: citys,
|
||
areaData: areas,
|
||
addressIndex: [null, null, null],
|
||
settingList: {
|
||
article: {
|
||
title: '行情信息推送服务',
|
||
status: false
|
||
},
|
||
process: {
|
||
title: '找加工信息推送服务',
|
||
status: false
|
||
},
|
||
old: {
|
||
title: '旧货交易信息推送服务',
|
||
status: false
|
||
},
|
||
enquiry: {
|
||
title: '询价单和选项推送服务',
|
||
status: false
|
||
},
|
||
},
|
||
form: {},
|
||
group1: [],
|
||
productList: [],
|
||
addressRegion: {}
|
||
}
|
||
},
|
||
async created() {
|
||
await this.getCate()
|
||
await this.getConfig()
|
||
},
|
||
methods: {
|
||
async getConfig() {
|
||
const res = await vk.callFunction({
|
||
url: 'client/message/config/kh/getConfig'
|
||
})
|
||
for (let key in this.settingList) this.settingList[key].status = res[key]
|
||
this.productList.forEach((item, index) => {
|
||
item.children.forEach(productItem => {
|
||
if (res.productList.includes(productItem._id)) {
|
||
this.productList[index].idList.push(productItem._id)
|
||
}
|
||
})
|
||
})
|
||
if (res.addressRegion.province) {
|
||
this.addressIndex[0] = this.provinceData.findIndex(item => item.code === res.addressRegion.province.code)
|
||
if (this.addressIndex[0] !== -1) {
|
||
this.addressIndex[1] = this.cityData[this.addressIndex[0]].findIndex(item => item.code === res.addressRegion.city.code)
|
||
if (this.addressIndex[1] !== -1) {
|
||
this.addressIndex[2] = this.areaData[this.addressIndex[0]][this.addressIndex[1]].findIndex(item => item.code === res.addressRegion.area.code)
|
||
}
|
||
}
|
||
}
|
||
},
|
||
async getCate() {
|
||
const {rows} = await vk.callFunction({
|
||
url: 'client/spot/category/pub/getTree',
|
||
title: '请求中...',
|
||
});
|
||
this.productList = rows.map(item => {
|
||
item.idList = []
|
||
return item
|
||
})
|
||
},
|
||
async save() {
|
||
let productList = []
|
||
this.productList.forEach(item => {
|
||
productList = [...productList, ...item.idList]
|
||
})
|
||
await vk.callFunction({
|
||
url: 'client/message/config/kh/update',
|
||
data: {
|
||
article: this.settingList.article.status,
|
||
process: this.settingList.process.status,
|
||
old: this.settingList.old.status,
|
||
enquiry: this.settingList.enquiry.status,
|
||
productList,
|
||
addressRegion: {
|
||
province: this.provinceData[this.addressIndex[0]],
|
||
city: this.cityData[this.addressIndex[0]][this.addressIndex[1]],
|
||
area: this.areaData[this.addressIndex[0]][this.addressIndex[1]][this.addressIndex[2]],
|
||
}
|
||
}
|
||
})
|
||
this.$message({
|
||
type: 'success',
|
||
message: '保存成功'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.setting-list {
|
||
.item {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
margin: 5px auto;
|
||
|
||
.title {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.badge {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.form-title {
|
||
color: #bf2b28;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
line-height: 2em;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.form {
|
||
padding: 10px;
|
||
}
|
||
</style>
|