ChuangHengWx/pagesMy/teamUserDetail.vue

<template>
	<view class="default_page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header :title='title'></cus-header>
		<view class="form">
			<view class="form-item adfacjb">
				<view class="form-item-left">姓名</view>
				<view class="form-item-right">
					<u-input v-model="userInfo.realName" placeholder="请输入团队人员姓名" border="none" style="font-size: 28rpx;color: #B3BFC8;line-height: 28rpx;" inputAlign="right"></u-input>
				</view>
			</view>
			<view class="form-item adfacjb">
				<view class="form-item-left">手机号码</view>
				<view class="form-item-right adf">
					<cus-phone ref="phoneInput"
					  :init-code="areaCode"
					  @validate="handleValidate"
					  @phone-change="handlePhoneChange">
					</cus-phone>
					
					<u-input v-model="userInfo.mobile" placeholder="请输入手机号码" border="none" style="font-size: 28rpx;color: #B3BFC8;line-height: 28rpx;" inputAlign="right"></u-input>
				</view>
			</view>
			<view class="form-item adfacjb">
				<view class="form-item-left">邮箱</view>
				<view class="form-item-right">
					<u-input v-model="userInfo.email" placeholder="请输入邮箱" border="none" style="font-size: 28rpx;color: #B3BFC8;line-height: 28rpx;" inputAlign="right"></u-input>
				</view>
			</view>
		</view>
		<!-- <view class="type adfacjb" @click="typeShow=true">
			<view class="type-left">团队人员身份类型</view>
			<view class="type-right adfac">
				<text>{{typeText}}</text>
				<image :src="imgBase+'my_arrow_right.png'"></image>
			</view>
		</view> -->
		<view class="zt_btn" @click="handleConfirm">确定</view>
		<u-picker :itemHeight="88" :immediateChange="true" :show="typeShow" :columns="typeData" title="成员身份类型"
			@cancel="typeShow=false" @confirm="typeConfirm" keyName="name" ></u-picker>
	</view>
</template>

<script>
	import CusPhone from '@/components/CusPhone/index.vue'
	export default {
		components:{CusPhone},
		data(){
			return {
				type:'',
				title:'团队成员',
				userInfo:{
					id:'',
					coachId:JSON.parse(uni.getStorageSync('userInfo')).id,
					realName:'',
					areaCode:'+86',
					mobile:'',
					email:'',
				},
				typeText:'请选择',
				typeShow:false,
				typeData:[[
					{id:1,name:'团队Leader'},
					{id:2,name:'团队成员Member'},
					{id:3,name:'利益相关者Stakeholder'},
					{id:4,name:'赞助人Sponsor'}
				]],
				areaCode:'+86',
				phoneRuleMap: {
					'+86': { len: 11, reg: /^1[3-9]\d{9}$/, tip: '中国大陆' }, // 中国内地
					'+852': { len: 8, reg: /^\d{8}$/, tip: '中国香港' }, // 中国香港
					'+853': { len: 8, reg: /^\d{8}$/, tip: '中国澳门' }, // 中国澳门
					'+886': { len: 10, reg: /^09\d{8}$/, tip: '中国台湾' }, // 中国台湾（09开头）
					'+1': { len: 10, reg: /^[2-9]\d{2}[2-9]\d{6}$/, tip: '美国/加拿大' }, // 美加（首位非0/1）
					'+81': { len: 11, reg: /^0[1-9]\d{9}$/, tip: '日本' }, // 日本（0开头）
					'+82': { len: 11, reg: /^01[0-9]\d{8}$/, tip: '韩国' }, // 韩国（01开头）
					'+65': { len: 8, reg: /^[689]\d{7}$/, tip: '新加坡' }, // 新加坡（6/8/9开头）
					'+60': { len: 10, reg: /^01[0-9]\d{7}$/, tip: '马来西亚' }, // 马来西亚（01开头）
					'+91': { len: 10, reg: /^[6-9]\d{9}$/, tip: '印度' }, // 印度（6-9开头）
					'+61': { len: 9, reg: /^\d{9}$/, tip: '澳大利亚' }, // 澳大利亚
					'+44': { len: 11, reg: /^7\d{10}$/, tip: '英国' }, // 英国（7开头）
					'+33': { len: 10, reg: /^[67]\d{9}$/, tip: '法国' }, // 法国（6/7开头）
					'+49': { len: 11, reg: /^[1-9]\d{10}$/, tip: '德国' }, // 德国
					'+34': { len: 9, reg: /^[67]\d{8}$/, tip: '西班牙' }, // 西班牙（6/7开头）
					'+39': { len: 10, reg: /^3\d{9}$/, tip: '意大利' }, // 意大利（3开头）
					'+66': { len: 10, reg: /^0\d{9}$/, tip: '泰国' }, // 泰国（0开头）
					'+84': { len: 10, reg: /^0\d{9}$/, tip: '越南' }, // 越南（0开头）
					'+971': { len: 9, reg: /^[569]\d{8}$/, tip: '阿联酋' }, // 阿联酋（5/6/9开头）
					'+90': { len: 10, reg: /^5\d{9}$/, tip: '土耳其' }, // 土耳其（5开头）
					'+32': { len: 9, reg: /^[45]\d{8}$/, tip: '比利时' }, // 比利时（4/5开头）
					'+31': { len: 9, reg: /^[6]\d{8}$/, tip: '荷兰' }, // 荷兰（6开头）
					'+46': { len: 10, reg: /^[7]\d{9}$/, tip: '瑞典' }, // 瑞典（7开头）
					'+41': { len: 9, reg: /^[7]\d{8}$/, tip: '瑞士' }, // 瑞士（7开头）
					'+358': { len: 9, reg: /^[45]\d{8}$/, tip: '芬兰' }, // 芬兰（4/5开头）
					'+45': { len: 8, reg: /^\d{8}$/, tip: '丹麦' }, // 丹麦
					'+30': { len: 10, reg: /^[69]\d{9}$/, tip: '希腊' }, // 希腊（6/9开头）
					'+36': { len: 9, reg: /^[23789]\d{8}$/, tip: '匈牙利' }, // 匈牙利
					'+359': { len: 9, reg: /^[89]\d{8}$/, tip: '保加利亚' }, // 保加利亚（8/9开头）
					'+380': { len: 10, reg: /^[34569]\d{9}$/, tip: '乌克兰' }, // 乌克兰
					'+7': { len: 11, reg: /^[9]\d{10}$/, tip: '俄罗斯/哈萨克斯坦' }, // 俄/哈（9开头）
					'+27': { len: 10, reg: /^[6789]\d{9}$/, tip: '南非' }, // 南非（6-9开头）
					'+63': { len: 11, reg: /^09\d{9}$/, tip: '菲律宾' }, // 菲律宾（09开头）
					'+92': { len: 11, reg: /^[3456789]\d{10}$/, tip: '巴基斯坦' }, // 巴基斯坦
					'+94': { len: 10, reg: /^[7]\d{9}$/, tip: '斯里兰卡' }, // 斯里兰卡（7开头）
					'+880': { len: 11, reg: /^01\d{9}$/, tip: '孟加拉国' }, // 孟加拉国（01开头）
					'+62': { len: 12, reg: /^0\d{11}$/, tip: '印度尼西亚' }, // 印尼
					'+966': { len: 9, reg: /^5\d{8}$/, tip: '沙特阿拉伯' }, // 沙特（5开头）
					'+971': { len: 9, reg: /^[569]\d{8}$/, tip: '阿联酋' }, // 阿联酋
					'+974': { len: 8, reg: /^[345679]\d{7}$/, tip: '卡塔尔' }, // 卡塔尔
					'+965': { len: 8, reg: /^[569]\d{7}$/, tip: '科威特' }, // 科威特
					'+20': { len: 10, reg: /^[120]\d{9}$/, tip: '埃及' }, // 埃及
					'+234': { len: 11, reg: /^[789]\d{10}$/, tip: '尼日利亚' }, // 尼日利亚
					'+254': { len: 9, reg: /^[7]\d{8}$/, tip: '肯尼亚' }, // 肯尼亚（7开头）
					'+66': { len: 10, reg: /^0\d{9}$/, tip: '泰国' }, // 泰国
					'+855': { len: 9, reg: /^[01]\d{8}$/, tip: '柬埔寨' }, // 柬埔寨
					'+84': { len: 10, reg: /^0\d{9}$/, tip: '越南' }, // 越南
					'+95': { len: 9, reg: /^[9]\d{8}$/, tip: '缅甸' }, // 缅甸（9开头）
				}
			}
		},
		onLoad(options) {
			this.type = options.type;
			if(options.id){
				this.title = '编辑成员';
				this.getDetail(options.id)
			} 
		},
		methods:{
			// 手机号校验回调
			handleValidate(res) {
			  this.areaCode = res.fullPhone;
			  this.userInfo.areaCode = res.fullPhone;
			},
			getDetail(id){
				this.$api.get(`/core/member/${id}`).then(({data:res})=>{
					if(res.code!==0) return this.$showToast(res.msg)
					this.userInfo = {...this.userInfo,...res.data}
					this.areaCode = this.userInfo.areaCode||'+86';
					if(this.userInfo.areaCode) this.userInfo.mobile = this.userInfo.mobile.replace(this.userInfo.areaCode,'');
				})
			},
			typeConfirm(e){
				this.typeShow = false;
			},
			handleConfirm(){
				if(!this.userInfo.realName) return this.$showToast('请输入姓名')
				const rule = this.phoneRuleMap[this.areaCode];
				const phone = this.userInfo.mobile;
				if (rule) {
					if (phone.length !== rule.len) {
					  return this.$showToast(`请输入${rule.len}位${rule.tip}手机号`)
					} else if (!rule.reg.test(phone)) {
					  return this.$showToast(`请输入正确的${rule.tip}手机号`)
					}
				} else return this.$showToast(`请输入正确的手机号`)
				// if(!this.$reg.email(this.userInfo.email)) return this.$showToast('请输入正确的邮箱')
				
				const userInfo = JSON.parse(JSON.stringify(this.userInfo));
				if(this.areaCode!=='+86') userInfo.mobile = this.areaCode+userInfo.mobile;
				this.$api[this.userInfo.id?'put':'post']('/core/member',userInfo).then(({data:res})=>{
					if(res.code!==0) return this.$showToast(res.msg)
					this.$showToast(`${this.userInfo.id?'编辑':'添加'}成功`);
					uni.navigateBack();
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.default_page{
		padding: 0 24rpx 54rpx;
		box-sizing: border-box;
		background: #F7F7F7;
		
		.form{
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0rpx 0rpx;
			margin-top: 20rpx;
			&-item{
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
				padding: 28rpx 24rpx;
				&-left{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #002846;
					line-height: 42rpx;
				}
				&-right{
					flex: 1;
					padding-left: 40rpx;
				}
			}
		}
		
		.type{
			background: #FFFFFF;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx rgba(229,231,235,0.5);
			border-radius: 24rpx;
			margin-top: 20rpx;
			padding: 28rpx 24rpx;
			&-left{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #002846;
				line-height: 42rpx;
			}
			&-right{
				text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #B3BFC8;
					line-height: 40rpx;
				}
				image{
					width: 30rpx;
					height: 30rpx;
					box-sizing: border-box;
				}
			}
		}
		
		.zt_btn{
			width: calc(100% - 100rpx);
			position: fixed;
			left: 50rpx;
			bottom: 54px;
		}
	}
</style>