390 lines
14 KiB
Vue
390 lines
14 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 active-text="开启"
|
||
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" class="flex justify-start items-start flex-wrap">-->
|
||
<!-- <el-checkbox v-for="(productItem, productIndex) in item.children" :key="productIndex"-->
|
||
<!-- :label="productItem.name" border style="margin: 10px 10px 0 0"-->
|
||
<!-- :checked="productList[index].idList.includes(productItem.name)">-->
|
||
<!-- {{ productItem.name }}-->
|
||
<!-- </el-checkbox>-->
|
||
<!-- </el-checkbox-group>-->
|
||
<!-- </el-form-item>-->
|
||
<!-- </el-form>-->
|
||
<div class="flex justify-center items-start">
|
||
<div v-for="(item, index) in productList" class="flex-1 mx-15" :key="index">
|
||
<div class="flex justify-start items-center">
|
||
<image :src="item.icon" style="width: 15px; height: 15px"/>
|
||
<span class="ml-10">{{ item.name }}</span>
|
||
</div>
|
||
<div class="ml-25 flex flex-wrap justify-start items-start">
|
||
<span class="mr-25 mt-20 pointer" @click="changeCheck(productItem)"
|
||
:class="[allSelectedProductList.includes(productItem.name) ? 'text-main' : '']"
|
||
v-for="(productItem, productIndex) in item.children"
|
||
:key="productIndex"> {{ productItem.name }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex justify-start items-center flex-wrap mt-20">
|
||
<span style="margin: 10px 10px 0 0">已选:</span>
|
||
<div class="flex justify-start items-center pointer" @click="changeCheck(productItem)"
|
||
v-for="(productItem, productIndex) in allProductList.filter(all => allSelectedProductList.includes(all.name))"
|
||
:key="productIndex" style="margin: 10px 10px 0 0">
|
||
<image src="/static/images/check.png" style="width: 12px; height: 12px; margin-right: 5px"/>
|
||
<span style="line-height: 18px">{{ productItem.parentName }}-{{ productItem.name }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-divider></el-divider>
|
||
<div class="form">
|
||
<div class="form-title">
|
||
* 请选择服务地区：
|
||
</div>
|
||
<el-row :gutter="10">
|
||
<el-col :span="4">
|
||
<el-select size="small" 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 size="small" v-model="addressIndex[1]" placeholder="请选择市"
|
||
:disabled="addressIndex[0] === null">
|
||
<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 size="small" v-model="addressIndex[2]" placeholder="请选择区"
|
||
:disabled="addressIndex[1] === null">
|
||
<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-col :span="4">
|
||
<div class="flex justify-start items-center">
|
||
<el-button type="primary" size="mini" @click="addAddress">添加</el-button>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="flex justify-start items-start flex-wrap mt-20">
|
||
<div class="flex justify-start items-center pointer" @click="deleteAddress(item)"
|
||
v-for="(item, index) in addressList"
|
||
:key="index" style="margin: 10px 10px 0 0">
|
||
<image src="/static/images/check.png" style="width: 12px; height: 12px; margin-right: 5px"/>
|
||
<span style="line-height: 18px">{{ item.province.name }}-{{
|
||
item.city ? item.city.name : '不限'
|
||
}}-{{ item.area ? item.area.name : '不限' }}</span>
|
||
</div>
|
||
</div>
|
||
<el-divider></el-divider>
|
||
<div class="form">
|
||
<div class="form-title">
|
||
* 请选择单笔交易额：
|
||
</div>
|
||
<div class="flex justify-start items-center">
|
||
<el-input size="small" v-model="tradeAmount[0]" placeholder="请输入金额" style="width: 200px">
|
||
<template #suffix>元</template>
|
||
</el-input>
|
||
<span class="mx-20">~</span>
|
||
<el-input size="small" v-model="tradeAmount[1]" placeholder="请输入金额" style="width: 200px">
|
||
<template #suffix>元</template>
|
||
</el-input>
|
||
</div>
|
||
</div>
|
||
<el-divider></el-divider>
|
||
<div class="form">
|
||
<div class="form-title">
|
||
* 请选择交易方式：
|
||
</div>
|
||
<el-row :gutter="10">
|
||
<el-col :span="4">
|
||
<div class="flex justify-start items-center pointer" @click="changeItemCheck('tradeSelf')"
|
||
style="margin: 10px 10px 0 0">
|
||
<image :src="tradeSelf ? '/static/images/check.png' : '/static/images/uncheck.png'"
|
||
style="width: 12px; height: 12px; margin-right: 5px"/>
|
||
<span style="line-height: 18px">自主交易</span>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="4">
|
||
<div class="flex justify-start items-center pointer" @click="changeItemCheck('tradePlatform')"
|
||
style="margin: 10px 10px 0 0">
|
||
<image :src="tradePlatform ? '/static/images/check.png' : '/static/images/uncheck.png'"
|
||
style="width: 12px; height: 12px; margin-right: 5px"/>
|
||
<span style="line-height: 18px">金久信公证</span>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<el-divider></el-divider>
|
||
<div class="form">
|
||
<div class="form-title">
|
||
* 请设置免打扰时间段：
|
||
</div>
|
||
<div class="flex justify-start items-center">
|
||
<!-- <el-time-picker v-model="doNotDisturbRange" range-separator="~" is-range style="width: 200px"/>-->
|
||
<el-cascader v-model="settingList.doNotDisturbStart" :options="timeList"/>
|
||
<span class="mx-15">至</span>
|
||
<el-cascader v-model="settingList.doNotDisturbEnd" :options="timeList"/>
|
||
</div>
|
||
</div>
|
||
<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";
|
||
import {CheckCorrect} from '@icon-park/vue'
|
||
import dayjs from "dayjs";
|
||
|
||
export default {
|
||
components: {CheckCorrect},
|
||
data() {
|
||
return {
|
||
provinceData: provinces,
|
||
cityData: citys,
|
||
areaData: areas,
|
||
addressIndex: [null, null, null],
|
||
addressList: [],
|
||
settingList: {
|
||
article: {
|
||
title: '现货推送服务',
|
||
status: false
|
||
},
|
||
process: {
|
||
title: '找加工信息推送服务',
|
||
status: false
|
||
},
|
||
old: {
|
||
title: '旧货交易信息推送服务',
|
||
status: false
|
||
},
|
||
enquiry: {
|
||
title: '询价单和选项推送服务',
|
||
status: false
|
||
},
|
||
doNotDisturbStart: [],
|
||
doNotDisturbEnd: [],
|
||
},
|
||
form: {},
|
||
group1: [],
|
||
productList: [],
|
||
allProductList: [],
|
||
allSelectedProductList: [],
|
||
addressRegion: {},
|
||
tradeSelf: false,
|
||
tradePlatform: false,
|
||
doNotDisturbRange: [new Date(2024, 1, 1, 0, 0), new Date(2024, 1, 1, 0, 0)],
|
||
tradeAmount: [],
|
||
timeList: []
|
||
}
|
||
},
|
||
async created() {
|
||
await this.getCate()
|
||
await this.getConfig()
|
||
this.timeList = []
|
||
for (let i = 0; i < 24; i++) {
|
||
const minuteList = []
|
||
const secondList = []
|
||
for (let j = 0; j < 60; j++) {
|
||
secondList.push({
|
||
label: j.toString().padStart(2, '0') + '秒',
|
||
value: j
|
||
})
|
||
}
|
||
for (let j = 0; j < 60; j++) {
|
||
minuteList.push({
|
||
label: j.toString().padStart(2, '0') + '分',
|
||
value: j,
|
||
children: secondList
|
||
})
|
||
}
|
||
this.timeList.push({
|
||
label: i.toString().padStart(2, '0') + '时',
|
||
value: i,
|
||
children: minuteList
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
async getConfig() {
|
||
const res = await vk.callFunction({
|
||
url: 'client/message/config/kh/getConfig'
|
||
})
|
||
this.allProductList = []
|
||
this.allSelectedProductList = []
|
||
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.name)) {
|
||
this.productList[index].idList.push(productItem.name)
|
||
this.allSelectedProductList.push(productItem.name)
|
||
}
|
||
this.allProductList.push({
|
||
...productItem,
|
||
parentName: item.name
|
||
})
|
||
})
|
||
})
|
||
this.tradeSelf = res.tradeSelf ?? false
|
||
this.tradePlatform = res.tradePlatform ?? false
|
||
if (res.addressList) this.addressList = res.addressList
|
||
else {
|
||
this.addressList = []
|
||
}
|
||
this.settingList.doNotDisturbStart = res.doNotDisturbStart ?? []
|
||
this.settingList.doNotDisturbEnd = res.doNotDisturbEnd ?? []
|
||
const today = dayjs().format('YYYY-MM-DD')
|
||
this.tradeAmount = res.tradeAmount ?? []
|
||
},
|
||
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 = []
|
||
// console.log(this.allSelectedProductList)
|
||
// 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: this.allSelectedProductList,
|
||
addressList: this.addressList,
|
||
tradeSelf: this.tradeSelf,
|
||
tradePlatform: this.tradePlatform,
|
||
doNotDisturbRange: this.doNotDisturbRange,
|
||
tradeAmount: this.tradeAmount,
|
||
doNotDisturbStart: this.settingList.doNotDisturbStart,
|
||
doNotDisturbEnd: this.settingList.doNotDisturbEnd,
|
||
}
|
||
})
|
||
this.$message({
|
||
type: 'success',
|
||
message: '保存成功'
|
||
})
|
||
},
|
||
changeCheck(product) {
|
||
const index = this.allSelectedProductList.findIndex(item => item === product.name)
|
||
if (index > -1) {
|
||
this.allSelectedProductList.splice(index, 1)
|
||
} else {
|
||
this.allSelectedProductList.push(product.name)
|
||
}
|
||
},
|
||
addAddress() {
|
||
if (!this.addressIndex[0]) return
|
||
this.addressList.push({
|
||
province: this.provinceData[this.addressIndex[0]],
|
||
city: this.addressIndex[1] != null ? this.cityData[this.addressIndex[0]][this.addressIndex[1]] : null,
|
||
area: this.addressIndex[2] != null ? this.areaData[this.addressIndex[0]][this.addressIndex[1]][this.addressIndex[2]] : null
|
||
})
|
||
this.addressIndex = [null, null, null]
|
||
},
|
||
deleteAddress(index) {
|
||
this.addressList.splice(index, 1)
|
||
},
|
||
changeItemCheck(field) {
|
||
this[field] = !this[field]
|
||
}
|
||
}
|
||
}
|
||
</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;
|
||
}
|
||
|
||
/deep/ .i-icon {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/deep/ .el-input__suffix {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
</style>
|