xiaochengxu/components/NeedsSelect/NeedsSelect.vue

<!--需求选择弹出-->
<template>
	<view class="main">
		<view class="top">
			<view class="button_box_left" @click="onClickButtonCancel">
				<text class="cancel_text">取消</text>
			</view>
			<view class="button_box_right" @click="onClickButtonOk">
				<text class="ok_text">确定</text>
			</view>
		</view>
		<u-line color="#E2E2E2" length="750rpx" customStyle="position: relative;border: 1px solid #E2E2E2;" :hairline="true" margin="99rpx 0 0 0"></u-line>
		<text class="duoxuan_text">支持多选</text>
		<u-gap height="40rpx"/>
		<u-grid
			col="3"
		>
			<u-grid-item 
			:customStyle="{width:250+'rpx',height:100+'rpx'}"
				v-for="(item,index) in allneeds" :key="item.key"
				@click="onClickOneItem"
			>
				<view class="out_box">
					<view v-if="isSelected(index)" class="selected_box" :key="item.key">
						<text class="selected_text">{{item.name}}</text>
					</view>
					<view v-else class="unselected_box" :key="item.key">
						<text class="unselected_text">{{item.name}}</text>
					</view>
				</view>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
	export default {
		name:"NeedsSelect",
		
		props:{
			selected :{
				type : Array,
				default : [
					false,false,false,
					false,false,false,
					false,false,false,
				],
			}
		},
		
		data() {
			return {
				allneeds : this.init(),
			};
		},
		methods:{
			
			init(){
				var allneeds = [];
				var names = this.$Define.UserNeeds;
				for(var i = 0;i<names.length;i++){
					var into = {
						name : names[i],
						key : new Date().getTime(),
					};
					allneeds.push(into);
				}
				//console.log(allneeds);
				return allneeds;
			},
			///检查传递进来的index是否被选中了
			isSelected(index){
				if(index < 0 || index >= this.selected.length){
					return false;
				}
				return this.selected[index];
			},
			/**
			 * @param {number} index 点中哪一个需求了 
			 */
			onClickOneItem(index){
				var indo = this.selected[index];
				this.selected[index] 		= !indo;
				this.allneeds[index].key 	= new Date().getTime();
			},
			///点击确认
			onClickButtonOk(){
				var key = this.$Define.FireKeys.NeedsSelectedCallback;
				this.$fire.fire(key,{status:true,selected : this.selected});
			},
			///点击取消
			onClickButtonCancel(){
				var key = this.$Define.FireKeys.NeedsSelectedCallback;
				this.$fire.fire(key,{status:false,selected : []});
			},
		},
	}
</script>
	
<style lang="scss" scoped>
	.main {
		width: 750rpx;
		height: 512rpx;
		background: #FFFFFF;
		border: 1rpx solid #E2E2E2;
		opacity: 1;
		border-radius: 20rpx;
		position: relative;
	}
	.top{
		position: absolute;
		height: 94rpx;
		width: 100%;
		//background-color: #0081FF;
		top: 0;
	}
	.button_box_left{
		position: absolute;
		left: 10rpx;
		width: 100rpx;
		height: 94rpx;
		top: 0;
		//background-color: #39B54A;
	}
	
	.button_box_right{
		position: absolute;
		right: 10rpx;
		width: 100rpx;
		height: 94rpx;
		top: 0;
		//background-color: #39B54A;
	}
	
	.cancel_text{
		width: 64rpx;
		height: 45rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
		opacity: 1;
		position: absolute;
		top: 25rpx;
		left: 24rpx;
	}
	.ok_text{
		width: 64rpx;
		height: 45rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #41CF41;
		opacity: 1;
		position: absolute;
		top: 25rpx;
		right: 24rpx;
	}
	
	.duoxuan_text{
		width: 112rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		opacity: 1;
		position: relative;
		left: 24rpx;
		top: 30rpx;
	}
	.unselected_box{
		width: 180rpx;
		height: 70rpx;
		background: #FFFFFF;
		border: 1rpx solid #E2E2E2;
		opacity: 1;
		border-radius: 10rpx;
		position: absolute;
		top: 5rpx;
		align-items: center;
		text-align: center;
	}
	
	.out_box{
		width: 234rpx;
		height: 80rpx;
		//background-color: #1CBBB4;
		position: relative;
		align-items: center;
	}
	
	.selected_box{
		width: 180rpx;
		height: 70rpx;
		background: #FFFFFF;
		border: 1rpx solid #D49B4B;
		opacity: 1;
		border-radius: 10rpx;
		position: absolute;
		top: 5rpx;
		align-items: center;
		text-align: center;
	}
	
	.selected_text{
		height: 70rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #D49B4B;
		opacity: 1;
		position: absolute;
		vertical-align: middle;
		line-height: 70rpx;
		display: inline-block;
	}
	
	.unselected_text{
		///字体高度需要和外框一致，居中才好弄
		height: 70rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #999999;
		opacity: 1;
		position: absolute;
		vertical-align: middle;
		line-height: 70rpx;
		display: inline-block;
	}
</style>