20261008
This commit is contained in:
+359
-190
@@ -1,220 +1,389 @@
|
||||
<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>
|
||||
<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-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>
|
||||
</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>
|
||||
<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>
|
||||
<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>
|
||||
<el-divider></el-divider>
|
||||
<el-button type="danger" round @click.native="save">保存设置</el-button>
|
||||
</el-card>
|
||||
</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 {
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
components: {CheckCorrect},
|
||||
data() {
|
||||
return {
|
||||
provinceData: provinces,
|
||||
cityData: citys,
|
||||
areaData: areas,
|
||||
addressIndex: [null, null, null],
|
||||
addressList: [],
|
||||
settingList: {
|
||||
article: {
|
||||
title: '现货推送服务',
|
||||
status: false
|
||||
},
|
||||
async getCate() {
|
||||
const {rows} = await vk.callFunction({
|
||||
url: 'client/spot/category/pub/getTree',
|
||||
title: '请求中...',
|
||||
});
|
||||
this.productList = rows.map(item => {
|
||||
item.idList = []
|
||||
return item
|
||||
})
|
||||
process: {
|
||||
title: '找加工信息推送服务',
|
||||
status: false
|
||||
},
|
||||
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: '保存成功'
|
||||
})
|
||||
}
|
||||
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 {
|
||||
.item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin: 5px auto;
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.badge {
|
||||
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;
|
||||
}
|
||||
}
|
||||
align-items: center;
|
||||
padding: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-title {
|
||||
color: #bf2b28;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 2em;
|
||||
margin-bottom: 10px;
|
||||
color: #bf2b28;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 2em;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form {
|
||||
padding: 10px;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user