添加102

pages/4877/BJQ4877CheckColor.vue

@@ -0,0 +1,310 @@
+<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>