xfapp/pages/setting/messagePush/messagePush.vue

<template>
	<view class="padding-sm messagePush">

		<form action="">

			<checkbox-group class="block" @change="CheckboxChange">
				<view class="margin-top  ">
					<view class="flex align-center checkItems" v-for="(item,index) in checkbox">
						<checkbox class="blue" :class="item.checked==1?'checked':''"
							:checked="item.checked==1?true:false" :value="item.value"></checkbox>
						<view class="title">{{item.title}}</view>


					</view>
				</view>
			</checkbox-group>

			<view class="btn-area submitBottomBtn padding-lr-sm">
				<button class="bg-blue round  margin-top" @click="$noMultipleClicks(btnSubmit)">提 交 </button>
			</view>

		</form>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				noClick: true,
				flag: false,
				getData: {},
				checkedValue: [],
				checkbox: [{
						value: 'm1',
						checked: false,
						title: '火警报警'
					},
					{
						value: 'm2',
						checked: false,
						title: '火警故障'
					},
					{
						value: 'm3',
						checked: false,
						title: '水压越线'
					},
					{
						value: 'm4',
						checked: false,
						title: '开关变化'
					},
					{
						value: 'm5',
						checked: false,
						title: '设备离线'
					},
					{
						value: 'm6',
						checked: false,
						title: '烟感报警'
					},
					{
						value: 'm7',
						checked: false,
						title: '电气火灾'
					},
					{
						value: 'm8',
						checked: false,
						title: '视频报警'
					},
					{
						value: 'm9',
						checked: false,
						title: '电梯监测'
					},
					{
						value: 'm10',
						checked: false,
						title: '井盖监测'
					}
				],

			}
		},
		onLoad: function(option) {
			this.getCheckList();
		},
		methods: {
			CheckboxChange(e) {
				this.flag = true;
				var items = this.checkbox,
					values = e.detail.value;
				this.checkedValue = values;
				// console.log(values)

				// console.log('点击复选框时this.checkedValue')
				// console.log(this.checkedValue)
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					items[i].checked = false;
					for (var j = 0, lenJ = values.length; j < lenJ; ++j) {
						if (items[i].value == values[j]) {
							items[i].checked = true;
							break
						}
					}
				}
			},


			// 回显数据请求
			async getCheckList(params = {}) {
				const res = await this.$myRequest({
					url: 'PushSettings/setperm',
					data: params,
					showLoading: true
				})
				this.getData = res.data.data[0];



				// 遍历checkbox数组对象
				for (let i = 0; i < this.checkbox.length; i++) {
					//判断value是否存在于返回对象中.存在的话checked重新赋值
					if (this.getData.hasOwnProperty(this.checkbox[i].value)) {
						// console.log(this.checkbox[i].value)
						this.checkbox[i].checked = true
					}
				}
			},


			//提交
			async btnSubmit() {

				// 提交验证
				// alert(this.aa);
				// alert(this.checkedValue)
				// if (!this.aa.length) {
				// 	uni.showToast({
				// 		title: "请选择推送选项",
				// 		icon: "none"
				// 	});
				// 	return
				// }


				let mingParams = {};
				if (!this.flag) {
					//不点击默认传参
					var obgj = this.getData;
					console.log('不点击默认传参obgj')
					console.log(obgj);
					var arr = [];
					for (var key in obgj) {
						console.log(key)
						console.log(obgj[key])
						arr.push([key][0])
					}
					arr.map((e) => {
						mingParams[e] = true;
					});
				} else {
					//点击复选框后传参
					var arr = this.checkedValue;
					console.log('自由选中复选框后传参arr')
					console.log(arr)


					arr.map((e) => {
						mingParams[e] = true;
					});
					console.log('mingParams')
					console.log(mingParams)


				}



				let res = await this.PushSettings(mingParams);
				// let res = await this.PushSettings({'m1':true,"m2":true,"m6":true});

				if (!res.data.flag) {
					uni.showToast({
						title: "添加失败",
						icon: "none"
					});
				} else {
					uni.showToast({
						title: "添加成功",
					});
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/setting/setting',
						});
					}, 1000);
					
				}
				
				

			},
			PushSettings(params = {}) {
				return this.$myRequest({
					url: 'PushSettings/setperm',
					data: params
				})
			},


		}
	}
</script>

<style lang="scss">
	.checkItems {
		width: 50%;
		display: inline-block;
		text-align: center;
		margin-bottom: 40rpx;

		.title {
			display: inline-block;
			margin-left: 10rpx;
		}
	}
</style>