cesuan/pages/phoneliuyao/phoneliuyao.vue

<template>
	<view class="page">
	  <view class="box_1">
	    <view class="box_2">
		  <view class="nav-bar_1">
		  	<view @click="goback" class="arr-right">&lt;&lt;&lt;</view>
		  	<view class="arr-right">批量验证</view>
		  </view>
	    </view>
	    <view class="box_4">
			<view class="box_title">请输入手机号码</view>
			<textarea class="phonetextarea" name="" v-model="phonestr" id="" cols="30" rows="10"></textarea>
	    </view>
		<view class="btn_hand" @click="batchphone">查看验证结果</view>
		<view v-if="showres" class="showres">
			
			<view v-if="resdata.length>0">
				恭喜您！下面是您通过六爻验证的
				可使用的加磁能量数字如下：
				<view v-for="item in resdata">
					{{item}}
				</view>
			
				
				
			</view>
			<view v-else>
				
				继续努力！以上号码没有通过六爻验证！
			
			</view>
		</view>

	  </view>
	</view>
</template>
<script>
	  import * as Verify from '@/utils/verify'
	import * as YYApi from '@/api/yingyong'
	export default {
		data() {
			return {
				phonestr:'',
				resdata:[],
				showres:false
			}
		},
		methods: {
			batchphone()
			{
				var app = this;
				if(this.phonestr=='')
				{
						
					this.$toast('请输入手机号')
					return false
				}
				
				  this.phonestr= this.phonestr.replace(/\s+/g,"");
				
				
				var phonestrlen = this.phonestr.length;
				
				
				 if(phonestrlen % 11 != 0){ 
					 
					 this.$toast('部分手机号码格式错误')
					 return false
				 }
				 
				 var phonearr = [];
				 var lineindex= 1;
				 for(var curentindex = 0;curentindex<phonestrlen; curentindex+=11)
				 {
					 var phonecur = this.phonestr.substring(curentindex,curentindex+11);
					 if (!Verify.isMobile(phonecur)) {
					   this.$toast('第'+lineindex+'行手机号码格式错误:'+phonecur)
					   return false
					 }
					 
					 lineindex++;
					 phonearr.push(phonecur);
				 }
				 
				 console.log(phonearr);
				
				var handlemobile =  phonearr.join(',');
				
				YYApi.batchphone({mobile:handlemobile})
				  .then(result => {
						app.resdata = result.data;
						app.showres = true;
				  })
			},

			goback()
			{
				this.$navTo('pages/yingyong/yingyong')
			}
		}
	}
</script>

<style>
	
	.showres
	{
		font-size: 24rpx;
		color:black;
		width: 600rpx;
		margin:20rpx auto;
	}
	
	.showres>view
	{
		margin-bottom: 50rpx;
	}
	
	.showres>view>view
	{
		margin:30rpx 0 ;
	}
	
.page {
  background-color: rgba(255,255,255,1.000000);
  position: relative;
  width: 750rpx;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 50rpx;
}
.box_1 {
  width: 750rpx;
  margin-top: 1rpx;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
}
.box_2 {
  width: 750rpx;
  display: flex;
  flex-direction: column;
}

.box_4 {
  height: 1276rpx;
  border:1px solid rgba(0,0,0,1);
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  width: 600rpx;
  margin: 0 auto;
  padding:20rpx;
  border-radius: 20rpx;;
  margin-top: 50rpx;
  font-size: 24rpx;
}

.box_title
{
	text-align: center;
	
}

.phonetextarea
{
	width: 223px;
	height: 100%;
	margin:20rpx auto 0 auto;
	letter-spacing: 5px;
	font-size: 28px;
	font-family: 黑体;
	text-size-adjust: none;
}


.btn_hand
{
	background-color: brown;
	color:#fff;
	border-radius: 20rpx;
	text-align: center;
	width: 600rpx;
	margin:30rpx auto;
	font-size: 30rpx;
	height: 70rpx;
	line-height: 70rpx;
}
</style>