APP/pages/4877/BJQ4877CheckColor.vue

<template>
	<view class="contentBg mainContent">
		<view class="colorContent">
			<view v-for="item,index in colors" class="item" :class="{active:item.check,marginNoLeft:index%3===0}"
				@click.stop="CheckGroup(item,index)">

				<view class="polygon" :style="{backgroundColor:item.hex}">

				</view>
				<view class="text">{{item.name}}</view>
			</view>
		</view>
		<view class="footer">
			<view class="btnSave" @click.stop="CheckOver()">确定</view>
		</view>

		<MessagePopup :visible="Status.Pop.showPop" :type="Status.Pop.popType" :bgColor="Status.Pop.bgColor"
			:borderColor="Status.Pop.borderColor" :textColor="Status.Pop.textColor"
			:buttonBgColor="Status.Pop.buttonBgColor" :buttonTextColor="Status.Pop.buttonTextColor"
			:iconUrl="Status.Pop.iconUrl" :message="Status.Pop.message" :buttonText="Status.Pop.buttonText"
			@buttonClick="HidePop" :visiblePrompt="Status.Pop.visiblePrompt" :promptTitle="Status.Pop.promptTitle"
			v-model="Status.Pop.modelValue" @closePop="closePop" :buttonCancelText="Status.Pop.buttonCancelText"
			:showCancel="Status.Pop.showCancel" @cancelPop="closePop" />

	</view>
</template>

<script>
	import {
		colors
	} from '@/api/4877/BJQ4877.js';
	var eventChannel = null;
	var these=null;
	
	
	export default {
		data() {
			return {
				Status: {

					Pop: {
						showPop: false, //是否显示弹窗
						popType: 'custom',
						bgColor: '#383934bd',
						borderColor: '#BBE600',
						textColor: '#ffffffde',
						buttonBgColor: '#BBE600',
						buttonTextColor: '#232323DE',
						iconUrl: '',
						message: '您确定要这样做吗？',
						buttonText: '确定',
						clickEvt: '',
						visiblePrompt: false,
						promptTitle: '设备名称',
						modelValue: '',
						visibleClose: false,
						okCallback: null,
						buttonCancelText: '',
						showCancel: false,
					}
				},
				colors: [

				],
				device:{
					
				}
			}
		},
		onLoad() {
			 these=this;
			this.colors = Object.assign([], colors);
			eventChannel = this.getOpenerEventChannel();

			eventChannel.on('CheckGroup', function(data) {
			debugger;
				if (data && data.id) {
					these.device=data;
					uni.getStorage({
						key: "4877CheckColor_" + data.id,
						success: (res) => {
							if (res.data) {
								debugger;
								for (var index = 0; index < these.colors.length; index++) {
									let f=res.data.find(v=>{
										return v===these.colors[index].id;
									});
									if(f){
										these.$set(these.colors[index], 'check',true);
									}else{
										these.$set(these.colors[index], 'check',false);
									}
								}
								
						
							}
						}
					})
				}
			});
		},
		methods: {
			CheckOver() {

				let arr = this.colors.map(v => {
					return v.check ? 1 : 0;
				})
				if (!arr.length) {
					this.showMsg("请选择至少1个颜色配组");
					return;
				}

				let checks = this.colors.filter(v => {
					return v.check
				}).map(item => {
					return item.id
				});
				console.log("checks=", checks);

				eventChannel.emit('CheckGroupOver', {allFlag:arr,checkIds:checks});
				uni.setStorage({
					key: "4877CheckColor_" + this.device.id,
					data: checks
				});
				uni.navigateBack();

			},
			CheckGroup(item, index) {
				this.$set(this.colors[index], 'check', !item.check)
			},
			closePop: function() {
				this.Status.Pop.showPop = false;

				if (this.Status.Pop.cancelCallback) {
					this.Status.Pop.cancelCallback();
				}
			},
			HidePop: function() {
				if (this.Status.Pop.clickEvt == 'SendUsr') {

				}


				this.Status.Pop.showPop = false;
				if (this.Status.Pop.okCallback) {
					this.Status.Pop.okCallback();
				}
			},
			showPop: function(option) {
				hideLoading(this);
				let def = {
					showPop: true, //是否显示弹窗
					popType: 'custom',
					bgColor: '#383934bd',
					borderColor: '#BBE600',
					textColor: '#ffffffde',
					buttonBgColor: '#BBE600',
					buttonTextColor: '#232323DE',
					iconUrl: '',
					message: '',
					buttonText: '确定',
					clickEvt: '',
					visiblePrompt: false,
					promptTitle: '',
					modelValue: '',
					visibleClose: false,
					okCallback: null,
					showSlot: false,
					buttonCancelText: '',
					showCancel: false,
				}

				let keys = Object.keys(def);

				for (let i = 0; i < keys.length; i++) {
					let key = keys[i];
					if (key in option) {
						continue;
					}
					this.Status.Pop[key] = def[key];
				}
				if (option) {
					keys = Object.keys(option);
					for (let i = 0; i < keys.length; i++) {
						let key = keys[i];

						this.Status.Pop[key] = option[key];
					}
				}

				if (!option.borderColor) {
					option.borderColor = '#BBE600';
					option.buttonBgColor = '#BBE600';
				}
				these.Status.Pop.showPop = true;
			},
			showMsg(msg, isSucc) {
				let icoUrl = '/static/images/6155/DeviceDetail/uploadErr.png';
				let borderColor = "#e034344d";
				let buttonBgColor = "#E03434";
				if (isSucc) {
					icoUrl = '/static/images/common/success.png';
					borderColor = "#BBE600";
					buttonBgColor = "#BBE600";
				}
				this.showPop({
					message: msg,
					iconUrl: icoUrl,
					borderColor: borderColor,
					buttonBgColor: buttonBgColor,
					buttonText: '确定',
					okCallback: null
				});
			}
		}
	}
</script>

<style>
	.mainContent {
		width: 100%;
		min-height: 100vh;
		box-sizing: border-box;
		padding: 30rpx
	}

	.colorContent {
		display: flex;
		align-content: center;
		justify-content: flex-start;
		justify-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		box-sizing: border-box;

	}

	.polygon {
		/* 矩形 235 */
		width: 30rpx;
		height: 30rpx;
		border-radius: 8rpx;

	}

	.text {
		color: rgba(255, 255, 255, 0.87);
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 2rpx;
		margin-left: 15rpx;
	}

	.item {
		background-color: #1A1A1A;
		margin-left: 36rpx;
		width: calc(calc(100% - 72rpx) / 3);
		height: 90rpx;
		margin-top: 24rpx;
		box-sizing: border-box;
		padding-left: 25rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		align-content: center;
		border-width: 1rpx;
		border-style: solid;
		border-color: #00000000;
		border-radius: 8rpx;
	}

	.item.active {
		border-color: #AED600 !important;
	}

	.marginNoLeft {
		margin-left: 0rpx !important;
	}

	.footer {
		position: fixed;
		bottom: 75px;
		left: 00rpx;
		width: 100%;
		height: 100rpx;
		box-sizing: border-box;
		padding: 0rpx 120rpx;
	}

	.btnSave {

		background-color: #BBE600;
		color: #232323DE;
		text-align: center;
		border-radius: 60rpx;
		width: 100%;
		height: 100rpx;
		font-family: PingFang SC;
		font-size: 32rpx;
		font-weight: 400;
		line-height: 100rpx;
		letter-spacing: 12rpx;

	}
</style>