dl_uniapp/pages/notice/subscribe-set.vue

<template>
	<view class="dingyue-box">
		<navigation-bar-vue style="width: 100%;" title="报名" background-color="#FFFFFF"
			title-color="#3D3D3D"></navigation-bar-vue>
		<view class="select-box-dom">
			<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="dataObj.bloggerTypeCode.indexOf(t.code)>-1?'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="dataObj.platformCode.indexOf(t.code)>-1?'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 settleTypeList">
						<view v-for="(t,i) in item"
							:class="dataObj.settleTypeCode==t.code?'line-item click':'line-item'"
							@click="changeChooseValue(t,'settleTypeCode')">
							{{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="dataObj.rewardTypeCode.indexOf(t.code)>-1?'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>
		</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 navigationBarVue from '@/components/navigation/navigationBar.vue';
	import {
		getCatgByCode
	} from '@/api/system/config.js'
	import {
		getSubscribeSet,
		saveSubscribe
	} from '@/api/business/subscribeSet.js'
	export default {
		components: {
			navigationBarVue
		},
		data() {
			return {
				//一行显示几个
				showNum: 4,
				//平台列表
				platformList: [],
				//博主分类
				bloggerTypeList: [],
				//通告类型--这个只能固定死
				settleTypeList: [
					[{
						code: "-1",
						title: "不限"
					}, {
						code: "0",
						title: "普通结算"
					}, {
						code: "1",
						title: "平台结算"
					}]
				],
				//奖励--这个只能固定死
				rewardTypeList: [
					[{
						code: "-1",
						title: "不限"
					}, {
						code: "money",
						title: "稿费"
					}, {
						code: "gift",
						title: "赠品"
					}]
				],
				//订阅设置对象---后端存储
				dataObj: {
					bloggerTypeCode: [],
					platformCode: [],
					settleTypeCode: '',
					//关键词集和
					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: "-1"
						}]
						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) {

				if (key == 'settleTypeCode') {
					this.dataObj[key] = item.code
					console.log(this.dataObj[key], 320);
					return
				}
				if (item.code == '-1') {
					this.dataObj[key] = []
					this.dataObj[key].push(item.code)
				} else {
					let tempList = []
					this.dataObj[key].push(item.code)
					this.dataObj[key].forEach(it => {
						if (it != '-1') {
							tempList.push(it)
						}
					})
					this.dataObj[key] = tempList

				}

			},
			/**
			 * 添加关键词
			 */
			addNewKeys() {
				this.$refs.inputDialog.open()
			}
		}
	}
</script>

<style lang="scss">
	.dingyue-box {
		padding-top: calc(90rpx + var(--status-bar-height));
		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;

		.select-box-dom {
			width: 100%;
			height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 90rpx);
			overflow-y: scroll;

			.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>