ChuangHengWx/components/CusTeamInfoFill/index.vue

<template>
	<view class="ti_page">
		<view class="form">
			<view class="form-item adfacjb">
				<view class="form-item-title">团队名称</view>
				<view class="form-item-inp">
					<u-input v-model="teamInfo.aaa" placeholder="请输入团队名称" border="none" inputAlign="right" fontSize="28rpx" color="#002846"/>
				</view>
			</view>
			<view class="form-item adfacjb">
				<view class="form-item-title">所在公司</view>
				<view class="form-item-inp">
					<u-input v-model="teamInfo.bbb" placeholder="请输入公司名称" border="none" inputAlign="right" fontSize="28rpx" color="#002846"/>
				</view>
			</view>
			<view class="form-item adfacjb">
				<view class="form-item-title">所属地区</view>
				<view class="form-item-inp adfac" @click="pickerShow('areaShow')">
					<text :class="{'active':areaText!=='请选择'}">{{areaText}}</text>
					<u-icon name="arrow-right" size="24rpx" color="#B9C0C8"></u-icon>
				</view>
			</view>
			<view class="form-item adfacjb">
				<view class="form-item-title red">所属行业</view>
				<view class="form-item-inp adfac" @click="pickerShow('industryShow')">
					<text :class="{'active':industryText!=='请选择'}">{{industryText}}</text>
					<u-icon name="arrow-right" size="20rpx" color="#B9C0C8"></u-icon>
				</view>
			</view>
			<view class="form-item adfacjb">
				<view class="form-item-title red">团队职能类型</view>
				<view class="form-item-inp adfac" @click="pickerShow('functionTypeShow')">
					<text :class="{'active':functionTypeText!=='请选择'}">{{functionTypeText}}</text>
					<u-icon name="arrow-right" size="20rpx" color="#B9C0C8"></u-icon>
				</view>
			</view>
			<view class="form-item adfacjb">
				<view class="form-item-title red">团队架构类型</view>
				<view class="form-item-inp adfac" @click="pickerShow('architectureTypeShow')">
					<text :class="{'active':architectureTypeText!=='请选择'}">{{architectureTypeText}}</text>
					<u-icon name="arrow-right" size="20rpx" color="#B9C0C8"></u-icon>
				</view>
			</view>
			<view class="form-item adfacjb">
				<view class="form-item-title">团队规模</view>
				<view class="form-item-inp adfac" @click="pickerShow('teamScaleShow')">
					<text :class="{'active':teamScaleText!=='请选择'}">{{teamScaleText}}</text>
					<u-icon name="arrow-right" size="20rpx" color="#B9C0C8"></u-icon>
				</view>
			</view>
			<view class="form-item adfacjb">
				<view class="form-item-title">团队层级</view>
				<view class="form-item-inp adfac" @click="pickerShow('teamLevelShow')">
					<text :class="{'active':teamLevelText!=='请选择'}">{{teamLevelText}}</text>
					<u-icon name="arrow-right" size="20rpx" color="#B9C0C8"></u-icon>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="box-title">团队介绍</view>
			<view class="box-textarea">
				<u-textarea border="none" height="320rpx" fontSize="28rpx" color="#002846" v-model="teamInfo.iii" placeholder="示例：爱丽丝的前任乔治在收购之前担任该职位。作为家庭的远亲，他⾮常亲⼒亲为，是个指令（Directive）及控制（Control）型的管理者。毫不掩饰地利⽤⾃⼰的关系。随着公司的发展和对营销团队的更多要求，他通过施加更多的控制来回应。尽管乔治反对，杰克被新的销售和营销副总裁约翰作为创新者引⼊。虽然乔治的退休被标榜为⾃愿的，但他在这件事上别⽆选择。"></u-textarea>
			</view>
		</view>
		<view class="btn" @click="handleConfirm">{{confirmText}}</view>
		<view class="dialog" v-if="areaShow">
			<view class="dialog-box">
				<cus-province-city-area @cancel="areaShow=false" @confirm="areaConfirm"></cus-province-city-area>
			</view>
		</view>
		<u-picker :itemHeight="88" :immediateChange="true" :show="industryShow" :columns="industryData" title="所属行业"
			@cancel="industryShow=false" @confirm="e=>pickerConfirm(e,'ddd','industryText','industryShow')"></u-picker>
		<u-picker :itemHeight="88" :immediateChange="true" :show="functionTypeShow" :columns="functionTypeData" title="团队职能类型"
			@cancel="functionTypeShow=false" @confirm="e=>pickerConfirm(e,'eee','functionTypeText','functionTypeShow')"></u-picker>
		<u-picker :itemHeight="88" :immediateChange="true" :show="architectureTypeShow" :columns="architectureTypeData" title="团队架构类型"
			@cancel="architectureTypeShow=false" @confirm="e=>pickerConfirm(e,'fff','architectureTypeText','architectureTypeShow')"></u-picker>
		<u-picker :itemHeight="88" :immediateChange="true" :show="teamScaleShow" :columns="teamScaleData" title="团队规模"
			@cancel="teamScaleShow=false" @confirm="e=>pickerConfirm(e,'ggg','teamScaleText','teamScaleShow')"></u-picker>
		<u-picker :itemHeight="88" :immediateChange="true" :show="teamLevelShow" :columns="teamLevelData" title="团队层级"
			@cancel="teamLevelShow=false" @confirm="e=>pickerConfirm(e,'hhh','teamLevelText','teamLevelShow')"></u-picker>
	</view>
</template>

<script>
	import CusProvinceCityArea from '@/components/CusProvinceCityArea/index.vue'
	export default {
		components:{ CusProvinceCityArea },
		props:{
			confirmText:{
				typeof:String,
				default:'下一步'
			}
		},
		data(){
			return {
				teamInfo:{
					aaa:'',
					bbb:'',
					ccc:'',
					ddd:'',
					eee:'',
					fff:'',
					ggg:'',
					hhh:'',
					iii:'',
				},
				areaShow:false,
				areaText:'请选择',
				industryShow:false,
				industryData:[['行业1','行业2']],
				industryText:'请选择',
				functionTypeShow:false,
				functionTypeData:[['职能类型1','职能类型2']],
				functionTypeText:'请选择',
				architectureTypeShow:false,
				architectureTypeData:[['架构类型1','架构类型2']],
				architectureTypeText:'请选择',
				teamScaleShow:false,
				teamScaleData:[['1-10人','10-20人','20-50人']],
				teamScaleText:'请选择',
				teamLevelShow:false,
				teamLevelData:[['初级','中级','高级']],
				teamLevelText:'请选择',
			}
		},
		methods:{
			confirm(e) {
				const { value } = e;
				this.areaText = value.map(item => item.label).join('-');
				this.areaShow = false;
			},
			cancel() {
				this.areaShow = false;
			},
			close() {
				this.areaShow = false;
			},
			pickerShow(key){
				this[key] = true;
			},
			pickerConfirm(e,key1,key2,key3){
				this.teamInfo[key1] = e.value[0];
				this[key2] = e.value[0];
				this[key3] = false;
			},
			handleConfirm(){
				// if(!this.teamInfo.ddd) return this.$showToast('请选择所属行业')
				// if(!this.teamInfo.eee) return this.$showToast('请选择团队职能类型')
				// if(!this.teamInfo.fff) return this.$showToast('请选择团队架构类型')
				
				// console.log(this.teamInfo);
				this.$emit('handleConfirm')
			},
			areaConfirm(e){
				this.areaShow = false;
				console.log(e);
			}
		}
	}
</script>

<style scoped lang="scss">
	.ti_page{
		width: 100%;
		padding: 0 24rpx 162rpx;
		box-sizing: border-box;
		
		.form{
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			&-item{
				padding: 28rpx 24rpx;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
				&-title{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #002846;
					line-height: 42rpx;
					position: relative;
					padding-right: 23rpx;
					&.red{
						&::after{
							content: "*";
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #FD4F66;
							line-height: 42rpx;
							position: absolute;
							right: 0;
						}
					}
				}
				&-inp{
					text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #B3BFC8;
						line-height: 40rpx;
						margin-right: 10rpx;
						&.active{
							color: #002846;
							line-height: 30rpx;
						}
					}
				}
			}
		}
	
		.box{
			background: #FFFFFF;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx rgba(229,231,235,0.5);
			border-radius: 24rpx;
			margin-top: 20rpx;
			padding: 28rpx 24rpx;
		}
		
		.btn{
			width: calc(100% - 100rpx);
			height: 88rpx;
			background: linear-gradient( 90deg, #33A7A7 0%, #64BBBB 100%);;
			border-radius: 44rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			letter-spacing: 2rpx;
			position: fixed;
			left: 50rpx;
			bottom: 54rpx;
			z-index: 1000;
		}
	}
</style>