增加区号选择

pagesMy/teamUserDetail.vue

@@ -10,7 +10,13 @@
 			</view>
 			<view class="form-item adfacjb">
 				<view class="form-item-left">手机号码</view>
-				<view class="form-item-right">
+				<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>
@@ -35,7 +41,9 @@
 </template>
 
 <script>
+	import CusPhone from '@/components/CusPhone/index.vue'
 	export default {
+		components:{CusPhone},
 		data(){
 			return {
 				type:'',
@@ -44,6 +52,7 @@
 					id:'',
 					coachId:JSON.parse(uni.getStorageSync('userInfo')).id,
 					realName:'',
+					areaCode:'+86',
 					mobile:'',
 					email:'',
 				},
@@ -55,6 +64,57 @@
 					{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) {
@@ -65,10 +125,17 @@
 			} 
 		},
 		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){
@@ -76,10 +143,20 @@
 			},
 			handleConfirm(){
 				if(!this.userInfo.realName) return this.$showToast('请输入姓名')
-				if(!this.$reg.mobile(this.userInfo.mobile)) 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('请输入正确的邮箱')
 				
-				this.$api[this.userInfo.id?'put':'post']('/core/member',this.userInfo).then(({data:res})=>{
+				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();