460 lines
11 KiB
Vue
460 lines
11 KiB
Vue
<template>
|
|
<view class="dingyue-box">
|
|
|
|
<view class="line-box">
|
|
<view class="dl-title">领域</view>
|
|
<view class="dl-content">
|
|
<view class="line-row" v-for="(item,index) in bloggerTypeList">
|
|
<view v-for="(t,i) in item" :class="t.code==dataObj.bloggerTypeCode?'line-item click':'line-item'"
|
|
@click="changeChooseValue(t,'bloggerTypeCode')">
|
|
{{t.title}}
|
|
</view>
|
|
<view style="clear: both;"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="line-box">
|
|
<view class="dl-title">平台</view>
|
|
<view class="dl-content">
|
|
<view class="line-row" v-for="(item,index) in platformList">
|
|
<view v-for="(t,i) in item" :class="t.code==dataObj.platformCode?'line-item click':'line-item'"
|
|
@click="changeChooseValue(t,'platformCode')">
|
|
{{t.title}}
|
|
</view>
|
|
<view style="clear: both;"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="line-box">
|
|
<view class="dl-title">通告类型</view>
|
|
<view class="dl-content">
|
|
<view class="line-row" v-for="(item,index) in noticeTypeList">
|
|
<view v-for="(t,i) in item" :class="t.code==dataObj.noticeTypeCode?'line-item click':'line-item'"
|
|
@click="changeChooseValue(t,'noticeTypeCode')">
|
|
{{t.title}}
|
|
</view>
|
|
<view style="clear: both;"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="line-box">
|
|
<view class="dl-title">关键词<text>包含以下关键词的通告将被收入订阅</text></view>
|
|
<view class="dl-content">
|
|
<view class="line-row">
|
|
<view class="keywords-item" v-for="(item,index) in dataObj.keywordsList">
|
|
{{checkKeywords(item)}} <uni-icons class="icon-text" type="closeempty" size="13"
|
|
@click="delKeywords(item)"></uni-icons>
|
|
</view>
|
|
<view class="keywords-item" @click="addNewKeys()">
|
|
<uni-icons type="plusempty" size="13"></uni-icons>
|
|
</view>
|
|
<view style="clear: both;"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="line-box">
|
|
<view class="dl-title">粉丝</view>
|
|
<view class="dl-content">
|
|
<view class="line-row">
|
|
<uni-data-select v-model="dataObj.fansLimit" :localdata="range" @change="change($event,'fans')"
|
|
:clear="false"></uni-data-select>
|
|
</view>
|
|
<view class="line-row" v-show="dataObj.fansLimit">
|
|
<view class="dl-drawer-item">
|
|
<input class="uni-input" v-model="dataObj.fansDown" type="digit" placeholder="最低" />
|
|
<view>—</view>
|
|
<input class="uni-input" v-model="dataObj.fansUp" type="digit" placeholder="最高" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="line-box">
|
|
<view class="dl-title">奖励</view>
|
|
<view class="dl-content">
|
|
<view class="line-row" v-for="(item,index) in rewardTypeList">
|
|
<view v-for="(t,i) in item" :class="t.code==dataObj.rewardTypeCode?'line-item click':'line-item'"
|
|
@click="changeChooseValue(t,'rewardTypeCode')">
|
|
{{t.title}}
|
|
</view>
|
|
<view style="clear: both;"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="line-box">
|
|
<view class="dl-title">稿费要求</view>
|
|
<view class="dl-content">
|
|
<view class="line-row">
|
|
<uni-data-select v-model="dataObj.feeLimit" :localdata="range" @change="change($event,'fee')"
|
|
:clear="false"></uni-data-select>
|
|
</view>
|
|
<view class="line-row" v-show="dataObj.feeLimit">
|
|
<view class="dl-drawer-item">
|
|
<input class="uni-input" v-model="dataObj.feeDown" type="digit" placeholder="最低" />
|
|
<view>—</view>
|
|
<input class="uni-input" v-model="dataObj.feeUp" type="digit" placeholder="最高" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="line-box">
|
|
<view class="dl-title">推送</view>
|
|
<view class="dl-content">
|
|
<view class="line-row">
|
|
<view class="seting-view"><text>符合订阅设置的新通告</text>
|
|
<switch v-if="dataObj.newNotice" style="float: right;display: flex;" checked color="#FC1F3E"
|
|
@change="switchChange($event,'newNotice')" />
|
|
<switch v-else style="float: right;display: flex;" color="#FC1F3E"
|
|
@change="switchChange($event,'newNotice')" />
|
|
</view>
|
|
<view class="seting-view"><text>订阅通告主新通告</text>
|
|
<switch v-if="dataObj.forkNotice" style="float: right;display: flex;" checked color="#FC1F3E"
|
|
@change="switchChange($event,'forkNotice')" />
|
|
<switch v-else style="float: right;display: flex;" color="#FC1F3E"
|
|
@change="switchChange($event,'forkNotice')" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="line-box" style="align-items: center;">
|
|
<view class="submit-box" @click="saveSet()">保存</view>
|
|
</view>
|
|
<!-- 输入框示例 -->
|
|
<uni-popup ref="inputDialog" type="dialog" :key="keywordsValue">
|
|
<uni-popup-dialog ref="inputClose" mode="input" title="新增关键词" placeholder="请输入关键词"
|
|
@confirm="dialogInputConfirm"></uni-popup-dialog>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getCatgByCode
|
|
} from '@/api/system/config.js'
|
|
import {
|
|
getSubscribeSet,
|
|
saveSubscribe
|
|
} from '@/api/business/subscribeSet.js'
|
|
export default {
|
|
data() {
|
|
return {
|
|
//一行显示几个
|
|
showNum: 4,
|
|
//平台列表
|
|
platformList: [],
|
|
//博主分类
|
|
bloggerTypeList: [],
|
|
//通告类型--这个只能固定死
|
|
noticeTypeList: [
|
|
[{
|
|
code: "",
|
|
title: "不限"
|
|
}, {
|
|
code: "money",
|
|
title: "高奖励"
|
|
}, {
|
|
code: "gift",
|
|
title: "品牌置换"
|
|
}]
|
|
],
|
|
//奖励--这个只能固定死
|
|
rewardTypeList: [
|
|
[{
|
|
code: "",
|
|
title: "不限"
|
|
}, {
|
|
code: "money",
|
|
title: "稿费"
|
|
}, {
|
|
code: "gift",
|
|
title: "赠品"
|
|
}]
|
|
],
|
|
//订阅设置对象---后端存储
|
|
dataObj: {
|
|
bloggerTypeCode: "",
|
|
platformCode: "",
|
|
noticeTypeCode: "",
|
|
//关键词集和
|
|
keywordsList: [],
|
|
rewardTypeCode: "",
|
|
//粉丝是否限制
|
|
fansLimit: false,
|
|
fansUp: null,
|
|
fansDown: null,
|
|
feeLimit: false,
|
|
feeDown: null,
|
|
feeUp: null,
|
|
newNotice: true,
|
|
forkNotice: false
|
|
},
|
|
//是否限制下拉框可选值
|
|
range: [{
|
|
value: false,
|
|
text: "不限制"
|
|
},
|
|
{
|
|
value: true,
|
|
text: "限制"
|
|
}
|
|
],
|
|
subscribeSet: {}
|
|
}
|
|
},
|
|
computed: {
|
|
keywords(value) {
|
|
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.initData("dl_platform", "platformList")
|
|
this.initData("dl_blogger_type", "bloggerTypeList")
|
|
},
|
|
onShow() {
|
|
this.getSet()
|
|
|
|
},
|
|
mounted() {
|
|
|
|
},
|
|
methods: {
|
|
getSet() {
|
|
getSubscribeSet().then(res => {
|
|
if (res.data) {
|
|
this.subscribeSet = res.data
|
|
this.dataObj = JSON.parse(res.data.jsonObj)
|
|
} else {
|
|
this.subscribeSet = {}
|
|
}
|
|
})
|
|
},
|
|
saveSet() {
|
|
this.subscribeSet.jsonObj = JSON.stringify(this.dataObj)
|
|
saveSubscribe(this.subscribeSet).then(res => {
|
|
uni.showToast({
|
|
title: '保存成功',
|
|
icon: 'success'
|
|
})
|
|
setTimeout(function() {
|
|
uni.navigateBack()
|
|
}, 800)
|
|
})
|
|
},
|
|
switchChange(e, code) {
|
|
this.dataObj[code] = e.detail.value
|
|
},
|
|
//改变选中值
|
|
change(e, type) {
|
|
// if('fans'==type){
|
|
// //粉丝
|
|
|
|
// }else if('fee'==type){
|
|
// //稿费
|
|
|
|
// }
|
|
// console.log("e:", e);
|
|
// console.log("type", type);
|
|
},
|
|
dialogInputConfirm(val) {
|
|
this.dataObj.keywordsList.push(val)
|
|
// 关闭窗口后，恢复默认内容
|
|
this.$refs.inputDialog.close()
|
|
},
|
|
/**
|
|
* 计算关键词的长度
|
|
* @param {Object} value
|
|
*/
|
|
checkKeywords(value) {
|
|
if (value.length > 5) {
|
|
return value.substring(0, 5) + "..."
|
|
} else {
|
|
return value
|
|
}
|
|
},
|
|
/**
|
|
* 删除某个关键词
|
|
* @param {Object} value
|
|
*/
|
|
delKeywords(value) {
|
|
this.dataObj.keywordsList = this.dataObj.keywordsList.filter(item => item !== value);
|
|
},
|
|
/**
|
|
* 初始化数据
|
|
* @param {Object} code
|
|
* @param {Object} dataObj
|
|
*/
|
|
initData(code, dataObj) {
|
|
let that = this
|
|
getCatgByCode({
|
|
code: code
|
|
}).then(res => {
|
|
if (res.code == 200) {
|
|
let thisArray = [{
|
|
id: '0',
|
|
title: "不限",
|
|
code: ""
|
|
}]
|
|
thisArray = thisArray.concat(res.data)
|
|
for (let i = 0; i < thisArray.length; i += this.showNum) {
|
|
this[dataObj].push(thisArray.slice(i, i + this.showNum));
|
|
}
|
|
console.log(this.bloggerTypeList, this.platformList)
|
|
}
|
|
}).catch((e) => {
|
|
uni.showToast({
|
|
icon: 'error',
|
|
duration: 2000,
|
|
title: e
|
|
});
|
|
})
|
|
},
|
|
/**
|
|
* 改变选中值
|
|
* @param {Object} item
|
|
* @param {Object} key
|
|
*/
|
|
changeChooseValue(item, key) {
|
|
this.dataObj[key] = item.code
|
|
},
|
|
/**
|
|
* 添加关键词
|
|
*/
|
|
addNewKeys() {
|
|
this.$refs.inputDialog.open()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.dingyue-box {
|
|
border-top: 1rpx solid #F4F4F4;
|
|
width: 100%;
|
|
color: #363636;
|
|
background-color: white;
|
|
font-size: 30rpx;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
.line-box {
|
|
width: 100%;
|
|
padding: 30rpx 30rpx 20rpx 30rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: self-start;
|
|
justify-content: inherit;
|
|
|
|
.submit-box {
|
|
padding: 15rpx 0;
|
|
background-color: #FC1F3E;
|
|
color: white;
|
|
width: 70%;
|
|
margin-bottom: 30rpx;
|
|
border-radius: 10rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.dl-title {
|
|
font-weight: bold;
|
|
font-size: 38rpx;
|
|
|
|
text {
|
|
margin-left: 20rpx;
|
|
font-weight: normal !important;
|
|
font-size: 22rpx;
|
|
color: #929292;
|
|
}
|
|
}
|
|
|
|
.dl-content {
|
|
width: 100%;
|
|
font-size: 24rpx;
|
|
padding: 15rpx;
|
|
border-bottom: 1rpx solid #F7F7F7;
|
|
|
|
.line-row {
|
|
width: 100%;
|
|
|
|
.line-item {
|
|
width: calc(25% - 16rpx);
|
|
border: 1rpx solid #E9E9E9;
|
|
margin: 8rpx 8rpx;
|
|
float: left;
|
|
border-radius: 25rpx;
|
|
color: #363636;
|
|
text-align: center;
|
|
padding: 8rpx 15rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.keywords-item {
|
|
border: 1rpx solid #E9E9E9;
|
|
margin: 8rpx 8rpx;
|
|
float: left;
|
|
border-radius: 25rpx;
|
|
color: #363636;
|
|
text-align: center;
|
|
padding: 8rpx 20rpx;
|
|
|
|
.icon-text {
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
|
|
.dl-drawer-item {
|
|
display: flex;
|
|
color: #929292;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-bottom: 1px solid #F4F4F4;
|
|
margin-bottom: 20rpx;
|
|
|
|
input {
|
|
width: 100%;
|
|
border: 1rpx solid #F4F4F4;
|
|
border-radius: 15rpx;
|
|
color: #929292;
|
|
padding: 5rpx 10rpx;
|
|
margin: 10rpx 0;
|
|
text-align: center;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
}
|
|
|
|
.dl-reward-type {
|
|
flex: 1;
|
|
text-align: center;
|
|
border: 1rpx solid #F4F4F4;
|
|
color: #929292;
|
|
border-radius: 15rpx;
|
|
padding: 10rpx 25rpx;
|
|
margin: 10rpx;
|
|
}
|
|
}
|
|
|
|
.seting-view {
|
|
padding: 20rpx 0;
|
|
font-size: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
|
|
text {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.click {
|
|
color: #FC1F3E !important;
|
|
border: 1rpx solid #FC1F3E !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |