mobile_uniapp_mmhy/pages/flowDetails/flowDetails.vue

<template>
	<view class="flowDetails">
		<!-- #ifdef H5 -->
		<!-- <view class="tab">
			<u-icon name="arrow-left" color="#fff" size="40" @click="goBack"></u-icon>
			<span>流量卡</span>
			<span></span>
		</view> -->
		<u-navbar  back-text=" " :custom-back='goBack' title="流量卡" :border-bottom="false" :background="{backgroundColor: '#d52e4c'}" back-icon-color="#fff" title-color="#fff"></u-navbar>
		<!-- #endif -->
		
		<u-toast ref="uToast" />
		<view class="img">
			<image :src="showData.info.flow_images[1]" mode="widthFix"></image>
		</view>
		<view class="selectphone u-flex u-row-between" @click="openShow" v-if="showData.select_num_status==1">
			<text>选择号码</text>
			<view class="">
				<text class="selectText" v-if="current==null">点击选择号码，不选将随机选号</text>
				<text class="selectText1" v-else >{{boxList1[current]}}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="form">
			<view class="formInput">
				<u-form :model="form" label-width="220">
					<u-form-item label="姓名" v-if="!orderId">
						<u-input v-model="form.name" placeholder-style="font-size:26rpx;" :clearable="false"
							placeholder="请输入真实姓名" />
					</u-form-item>
					<view class="" v-if="!configAll.system_sms_open&&!orderId">
						<u-form-item label="手机号" >
							<u-input v-model="form.phone" placeholder-style="font-size:26rpx;" :clearable="false"
								placeholder="请输入手机号" />
						</u-form-item>
					</view>
					
					<u-form-item label="手机号" v-if="configAll.system_sms_open&&!orderId">
						<!--  -->
						<view class="sendSMS" v-if="configAll.system_sms_open">			
							<view>
								<input type="number" maxlength="11" v-model="form.phone" placeholder-style="font-size:28rpx;" :clearable="false" placeholder="请输入手机号"/>
							</view>
							<view class="sms" >
								
								<u-verification-code :seconds="seconds" start-text="验证码" @end="end" @start="start" ref="uCode"
								@change="codeChange"></u-verification-code>
								<view class="tips" @tap="getCode" >{{tips}}</view>
							</view>
						</view>
						<!--  -->
						
					
					</u-form-item>
					<u-form-item label="验证码" v-if="configAll.system_sms_open&&!orderId">
							<input maxlength="4" v-model="form.sms_code" placeholder-style="font-size:28rpx;" :clearable="false" placeholder="请输入验证码"/>
					</u-form-item>
					<u-form-item label="身份证号" v-if="!orderId">
						<u-input v-model="form.id_no" placeholder-style="font-size:26rpx;" :clearable="false"
							placeholder="请输入身份证号" />
					</u-form-item>
					<u-form-item label="城市" v-if="!orderId">
						<view class="county" @tap="countyHide=!countyHide">
							{{countyName}}
						</view>
						<!-- 快手小程序 出现异常抖动更换 -->
						<!-- 						<u-select v-model="countyHide" :default-value='countyIndex' mode="mutil-column-auto" lchild-name="children" :list="selector" @confirm="confirm"></u-select> -->
						<w-picker :visible.sync="countyHide" mode="region" :value="countyIndex" default-type="value"
							:hide-area="false" @confirm="onConfirm($event,'region')" @cancel="onCancel" ref="region">
						</w-picker>
					</u-form-item>
					<u-form-item label="详细地址" v-if="!orderId">
						<u-input v-model="form.address" placeholder-style="font-size:26rpx;" :clearable="false"
							placeholder="请输入街道/镇+村/小区+门牌号  " />
					</u-form-item>
				</u-form>

				<view class="" v-if="showData.card_status==1||orderId">
					<view class="upload">
						<view class="flexJu">
							<image src="@/static/img/uUploadID11.png" mode="widthFix"></image>
							<image class="ding" src="../../static/img/uploadadd.png" mode=""></image>
							<u-upload ref="uUpload1" :multiple="false" width="600rpx" height="300rpx" max-count="1" @on-change="progress1"
								:action="action"></u-upload>
						</view>
						<view style="font-size: 32rpx;color: #333;margin-top: 20rpx;margin-top: 30rpx;">身份证正面照</view>
						<view style="color: rgba(187, 187, 187);font-size: 20rpx;margin-top: 10rpx;">
							证件四角边缘空隙2厘米以上，手机横排，照片清晰不模糊，无水印，无反光，无PS</view>
					</view>
					<view class="upload">
						<view class="flexJu">
							<image src="../../static/img/uUploadID22.png" mode=""></image>
							<image class="ding" src="../../static/img/uploadadd.png" mode=""></image>
							<u-upload max-count="1" :multiple="false" ref="uUpload2" width="600rpx" height="300rpx" @on-change="progress2"
								:action="action"></u-upload>
						</view>
						<view style="font-size: 32rpx;color: #333;margin-top: 20rpx;margin-top: 30rpx;">身份证反面照</view>
						<view style="color: rgba(187, 187, 187);font-size: 20rpx;margin-top: 10rpx;">
							证件四角边缘空隙2厘米以上，手机横排，照片清晰不模糊，无水印，无反光，无PS</view>
					</view>
					<view class="upload">
						<view class="flexJu">
							<image src="../../static/img/uUploadID33.png" mode=""></image>
							<image class="ding" src="../../static/img/uploadadd.png" mode=""></image>
							<u-upload max-count="1" :multiple="false" ref="uUpload3" width="600rpx" height="300rpx" @on-change="progress3"
								:action="action"></u-upload>
						</view>
						<view style="font-size: 32rpx;color: #333;margin-top: 20rpx;margin-top: 30rpx;">本人免冠正面照</view>
						<view style="color: rgba(187, 187, 187);font-size: 20rpx;margin-top: 10rpx;">
							无需手持身份证，胸部以上，露出双肩，人像面部比例不低于1/3，无水印，无反光，无PS</view>
					</view>
					<!-- <view class="card">
						<view class="cardImg u-flex u-row-between">
							<image src="../../static/img/id1@2x.png" mode=""></image>
							<image src="../../static/img/id2@2x.png" mode=""></image>
						</view>
						<view class="cardTitle">
							身份证正面照
						</view>
						<view class="intro">
							证件四角边缘空隙2厘米以上，手机横拍，照片清晰
							不模糊，无水印，无反光，无PS。
						</view>
					</view>
					 
					<view class="card">
						<view class="cardImg u-flex u-row-between">
							<image src="../../static/img/id4@2x.png" mode=""></image>
							<image src="../../static/img/id2@2x.png" mode=""></image>
						</view>
						<view class="cardTitle">
							身份证反面照
						</view>
						<view class="intro">
							证件四角边缘空隙2厘米以上，手机横拍，照片清晰
							不模糊，无水印，无反光，无PS。
						</view>
					</view>
					<view class="card">
						<view class="cardImg u-flex u-row-between">
							<image src="../../static/img/id3@2x.png" mode=""></image>
							<image src="../../static/img/id2@2x.png" mode=""></image>
						</view>
						<view class="cardTitle">
							本人免冠正面照
						</view>
						<view class="intro">
							无需手持身份证，胸部以上，露出双肩，人像面部比例
							不低于1/3，无水印，无反光，无PS。
						</view>
					</view> -->
				</view>
				<view class="btn" @tap="apply()" v-if="!orderId">
					立即领取
				</view>
				<view class="btn" @tap="submitOrder()" v-if="orderId">
					立即提交
				</view>
			</view>

		</view>

		<!-- <view class="img">
			<image v-for="(item,index) in showData.info.flow_images" :key="index" v-if="index>1" :src="item"
				mode="widthFix"></image>
		</view> -->

		<view class="img">
			<image
				v-for="(item,index) in Object.keys(showData.info.flow_images).map((i,j)=>j?showData.info.flow_images[i].split(','):'').filter(i=>i).flat()"
				:key="index"
				:src="item"
				mode="widthFix"
			></image>
		</view>
		<view class="popupBox">
			<view class="maskName" v-if="login_show"></view>
			<view class="newForm" v-if="login_show">
				<view class="alertContent">
					<view class="title">温馨提示</view>
					<view class="content">{{login_content}}</view>
					<view class="u-flex u-col-center u-row-center btn" style="border-top: 1px solid #ececec;">
						<text style="border-right: 1px solid #ececec;" @tap="login_cancel">取消</text>
						<text style="color: #D52E4C;" v-if="mixin_type=='TOUTIAO'" @tap="userLogin">确认</text>
						<button v-else
							style="box-shadow: none; background: transparent;box-sizing:border-box;width: 50%;border: 0px solid #f3f3f3;color: #D52E4C;"
							type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">确认</button>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="30" height="1000">
			<view class="popup">
				<view class="search u-flex u-row-between">
					<view class="inputBox u-flex u-row-between">
						<input type="text" confirm-type="done" maxlength="11" v-model="searchNumber">
						<view class="searchIcon" @click="query" >
							<image src="../../static/img/whitesearch.png" mode=""></image>
						</view>
					</view>
					<view class="check">
						<u-checkbox-group size='20'>
							<u-checkbox shape="circle" @change="search_lastChange" active-color="#E30029"
								v-model="searchChecked" style="white-space: nowrap;">尾号</u-checkbox>
						</u-checkbox-group>
					</view>
				</view>
				<view class="" v-if="empty" style="text-align: center;margin-top:100rpx">
					没有找到该号码
				</view>
				<view class="numberList u-flex u-row-between">
					<view class="numberItem" :class="{'selectItem':index==current}" v-for="(item,index) in boxList"
						@tap="ListClick(index)" :key="index">
						<view v-html="item"></view>
					</view>

				</view>
				
				<view class="last u-flex u-row-center" @click="query">
					<image src="../../static/img/reset.png" mode=""></image>
					<text>换一批</text>
				</view>
				<view class="btn" @tap="submit">
					确认选择
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import wPicker from "@/components/w-picker/w-picker.vue"
	export default {
		data() {
			return {
				empty:false,
				searchNumber:'',
				orderId:'',
				tips:'',
				seconds: 60,//倒计时秒数
				// 上传地址
				action: '',
				current: null,
				// 列表参数
				listData: {
					city_id: "city_id", //地区id 'city_id'全部
					exclude_num: [], //排除 复选 值
					is_activity: 0, //是否是优惠号码
					keyword: ["1", "", "", "", "", "", "", "", "", "", ""], //搜索内容,模糊就是字符串，精准就是数组
					limit: 20,
					network: "",
					num_max: "", //数字较多，传数字
					page: 1, //
					price_max: "", //价格最高数字
					price_min: "", //价格最低数字
					rule_name: "", //规律名，AAAA什么的
					rule_position: "tail", //规律位置,middle中间，tail尾部
					search_last: 1, //0,1是否搜索尾部
					search_type: "precise", //fuzzy模糊，precise精准
					sort: "", //price_asc价格从低到高,price_desc价格从高到低
					is_offer: 0, //是否为特价号
				},
				page: 1,
				boxList: [],
				boxList1: [],
				searchChecked: false,
				show: false,
				id: '',
				countyName: '城市名称',
				countyHide: false,
				countyIndex: [1], //城市弹窗下标
				selector: [],
				showData: {
					info: {
						flow_images: []
					}
				}, //号码详情
				form: {
					sms_code:'', //	验证码
					address: '', //详细地址
					chanId: '',
					county: 1480, //城市ID,区县id
					id_no: '', //身份号码,
					mobile_id: '',
					name: '', //姓名
					pay_type: 5,
					phone: '', //手机号
					return_url: '',
					clickid: '',
					open_idcard_face_img:'',
					open_idcard_back_img:'',
					open_face_img:'',
					orderId:'',
					no:''
				},
				chanId:''

			}
		},
		onLoad(option) {
			if(option.chanId){
				uni.setStorageSync('chanId', option.chanId);
				this.chanId=option.chanId
			}else{
				uni.removeStorageSync('chanId');
			}
			// if(option.chanId){
			// 	this.form.chanId=option.chanId
			// }
			this.action = this.$httpUrl + '/api/common/upload'
			
			console.log(option)
			if (option.id) {
				this.showDetails(option.id)
				this.form.mobile_id = option.id
			}
			if (option.orderId) {
				this.orderId=option.orderId
			}
			
		},
		
		onShow() {
			this.area_tree()
		},
		
		components: {
			wPicker
		},
		methods: {
			goBack(){
			if(getCurrentPages().length==1){
				return
			}else{
				uni.redirectTo({
									url:'/pages/flow/flow?chanId='+this.chanId
								})
			}
				
			},
			openShow(){
				
					// this.show=true
					// this.searchNumber=''
					// this.phoneList()
					this.show=true
					if(this.current==null){
						this.searchNumber=''
						this.phoneList()
					}
			},
			// 获取短信
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					if(this.form.phone==''){
						this.$refs.uToast.show({
							title: '请输入手机号',
							type: 'error ',
						})
						return;
					}
					if(!this.$check.checkMobile(this.form.phone)){
						this.$refs.uToast.show({
							title: '请输入正确手机号的格式',
							type: 'error ',
						})
						return;
					}
					// this.$u.toast('验证码已发送');
					// this.$refs.uCode.start();
					this.$http.send({mobile:this.form.phone,event:'order'})
					.then(res=>{
						if(res.data.code==1){
							this.$u.toast('验证码已发送');
							this.$refs.uCode.start();
							
						}else{
							this.$refs.uToast.show({
								title: res.data.msg,
								type: 'error ',
							})
						}
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			codeChange(text) {
					this.tips = text;
				},
			start() {
				this.$u.toast('倒计时开始');
			},
			end() {
				this.$u.toast('倒计时结束');
			},
			progress1(res, index, lists, name) {
				// console.log(JSON.parse(res.data))
				if (JSON.parse(res.data).code == 0) {
					this.$refs.uToast.show({
						title: JSON.parse(res.data).msg,
						type: 'error ',
					})
					this.$refs.uUpload1.clear()
				}
			},
			progress2(res, index, lists, name) {
				// console.log(JSON.parse(res.data))
				if (JSON.parse(res.data).code == 0) {
					this.$refs.uToast.show({
						title: JSON.parse(res.data).msg,
						type: 'error ',
					})
					this.$refs.uUpload2.clear()
				}
			},
			progress3(res, index, lists, name) {
				// console.log(JSON.parse(res.data))
				if (JSON.parse(res.data).code == 0) {
					this.$refs.uToast.show({
						title: JSON.parse(res.data).msg,
						type: 'error ',
					})
					this.$refs.uUpload3.clear()
				}
			},
			ListClick(index) {
				if (this.current != index) {
					this.current = index
				}
			},
			submit() {
				if(this.current==null){
					this.$refs.uToast.show({
						title: '请选择号码',
						type: 'error ',
					})
					return
				}else{
					this.show = false
				}
			},
			// 查询按钮
			query() {

				this.phoneList()
			},
			// 按照账号规则匹配
			numberTypeHits(type, no) {
				let arrStr = ''
				type.forEach((item, index) => {
					if (item) {
						arrStr += '<span class="active">' + no[index] + '</span>'
					} else {
						arrStr += no[index]
					}
				})
				return arrStr
			},
			// 搜索选中红色
			numberType(val,index) {
				let str = val+'';
				// console.log(str)
				let html, num;
				let first=str.substr(0, 3)
				let second=str.substr(3, 4)
				let third=str.substr(7, str.length)
				if (!this.searchNumber) {
					
					return '<span class="active2">' + first + '</span>' + second +
						'<span class="active2">' + third + '</span>'
					// return '<span class="active">' + str.substr(0, 3) + '</span>' + str.substr(3, 4) +
					// 	'<span class="active">' + str.substr(7, str.length) + '</span>'
						
					// if (this.searchNumber!= ["1", "", "", "", "", "", "", "", "", "", ""].toString()) {
					// 	let arrStr = ''
					// 	let strArr = str.split('');
					// 	let list = this.searchNumber
					// 	strArr.forEach((item, index) => {
					// 		if (item == list[index] && index != 0) {
					// 			arrStr += '<span class="active">' + item + '</span>'
					// 		} else {
					// 			arrStr += item
					// 		}
					// 	})
					// 	return arrStr
					// } else {
						
					// }
				} else {
					return str.replace(new RegExp(this.searchNumber, 'g'), '<span class="active">' + this.searchNumber + '</span>')
						
				}
				// if (this.searchNumber) {
					
				// 	return str.replace(new RegExp(num, 'g'), '<span class="active">' + num + '</span>')
				// } else {
				// 	return '<span class="active1">' + str.substr(0, 3) + '</span>' + str.substr(3, 4) +
				// 		'<span class="active1">' + str.substr(7, str.length) + '</span>'
				// }
			},
			// 初始化列表
			phoneList() {
				this.boxList = []
				this.boxList1 = []
				this.current=null
				this.$http.searchList({'product_sku':this.showData.product_sku}).then(res => {
					if (res.data.code == 1) {
						let boxList = res.data.data
						boxList.forEach((item,index) => {
							if(this.searchNumber&&!this.searchChecked){
								if((item+'').indexOf(this.searchNumber)!=-1){
									this.boxList1.push(JSON.parse(JSON.stringify(item)))
									let item1='<div>' + this.numberType(item,index) + '</div>'
									this.boxList.push(item1)
									
									
								}else{
									return
								}
								
							}if(this.searchNumber&&this.searchChecked){
								// console.log((boxList+'').substr((boxList+'').substr(7, (boxList+'').length),this.searchNumber)
								if((item+'').substr(-this.searchNumber.length)==this.searchNumber){
									this.boxList1.push(JSON.parse(JSON.stringify(item)))
									item='<div>' + this.numberType(item,index) + '</div>'
									this.boxList.push(item)
								}
								
							}
							else{
								this.boxList1.push(JSON.parse(JSON.stringify(item)))
								item='<div>' + this.numberType(item,index) + '</div>'
								this.boxList.push(item)
							}
							
							
							
							// this.$set(item, 'phoneHtml', '<div>' + this.numberType(item) + '</div>')
							// if (item.hits) {
							// 	this.$set(item, 'phoneHtml', '<div>' + this.numberTypeHits(item.hits, item
							// 		.no) + '</div>')

							// } else {
							// 	this.$set(item, 'phoneHtml', '<div>' + this.numberType(item.no) + '</div>')
							// }
						})
						this.$nextTick(()=>{
							if(this.boxList.length==0){
								this.empty=true
							}else{
								this.empty=false
							}
						})
					}
				})
			},
			// 是否是尾号
			search_lastChange(e) {
				this.listData.search_last = e.value ? 1 : 0
				this.phoneList()
			},
			onConfirm(res) {
				console.log(res)
				this.form.county = res.value[2]
				this.countyName = res.result
				this.countyIndex = res.value
			},
			onCancel() {

			},
			// 区域内容
			area_tree() {
				this.$http.area_tree().then(res => {
					if (res.data.code === 1) {
						this.selector = res.data.data
						console.log(this.selector)
						this.loca()
					}
				});
			},
			// 号码详情界面
			showDetails(id) {
				this.$http.show({
						id: id
					})
					.then(res => {
						if (res.data.code == 1) {
							this.showData = res.data.data
						}
					})
			},
			// 获取本地经纬度
			loca() {
				let this_ = this;
				if (this.mixin_type != 'TOUTIAO' && this.mixin_type != 'H5') {
					ks.getSetting({
						success(res) {
							if (!res.authSetting['scope.userLocation']) {
								//提前向用户发起授权请求
								uni.getLocation({
									type: 'wgs84',
									success: function(res) {
										console.log('当前位置的经度：' + res.longitude);
										console.log('当前位置的纬度：' + res.latitude);
										this_.loAcquire(res.longitude, res.latitude)
									}
								});
							}
						},
					});
				} else if (this_.mixin_type == 'H5') {
					this_.jsonp('https://apis.map.qq.com/ws/location/v1/ip', {
							key: "O7NBZ-PTTCG-OEPQF-I6MTS-YEKCJ-OCFVO",
							output: "jsonp"
						})
						.then(res => {
							console.log(res.result.ad_info);
							let adInfo = res.result.ad_info
							this_.cityId(adInfo.province, adInfo.city, adInfo.district)
						})

				} else {
					uni.getLocation({
						type: 'wgs84',
						highAccuracyExpireTime: 100,
						success: function(res) {
							console.log('当前位置的经度：' + res.longitude);
							console.log('当前位置的纬度：' + res.latitude);
							this_.loAcquire(res.longitude, res.latitude)
						}
					});
				}
			},
			// 根据经纬度查询城市
			loAcquire(longitude, latitude) {
				let this_ = this;
				this.myAmapFun.reverseGeocoder({
					location: {
						latitude: latitude,
						longitude: longitude
					},
					success: function(res) {
						console.log("解析地址成功");
						console.log(res);
						// 根据名称筛选id
						this_.cityId(res.result.address_component.province, res.result.address_component.city,
							res.result.address_component.district)
					},
					fail: function(res) {
						uni.showToast({
							title: '定位失败',
							duration: 2000,
							icon: "none"
						})
						console.log(res);
					},
					complete: function(res) {
						console.log(res);
					}
				})
			},
			// 根据名称筛选id
			cityId(province, city, district) {
				this.selector.forEach((val, i) => {
					if (val.label.slice(0, 2) == province.slice(0, 2) || val.label == province) {
						console.log(val.label)
						console.log(val.value)
						val.children.forEach((item, l) => {
							if (item.label.slice(0, 2) == city.slice(0, 2) || item.label == city) {
								console.log(item.label)
								console.log(item.value)
								item.children.forEach((con, y) => {
									if (con.label.slice(0, 2) == district.slice(0, 2) || con
										.label == district) {
										console.log(con.label)
										console.log(con.value)
										this.countyIndex = [i, l, y]
										this.countyName = val.label + item.label + con.label
										this.form.county = con.value
									}
								})
							}
						})

					}
				})
			},
			// 城市选择id锁定
			confirm(e) {
				console.log(e)
				this.form.county = e[2].value
				this.countyName = e[0].label + e[1].label + e[2].label
			},
			//重新提交订单
			submitOrder(){
				//图片处理
				let files1 = [];
				let files2 = [];
				let files3 = [];
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files1 = this.$refs.uUpload1.lists.filter(val => {
					return val.progress == 100;
				})
				files2 = this.$refs.uUpload2.lists.filter(val => {
					return val.progress == 100;
				})
				files3 = this.$refs.uUpload3.lists.filter(val => {
					return val.progress == 100;
				})
				if(files1[0]==undefined){
					this.$refs.uToast.show({
						title: '请上传身份证正面照',
						type: 'error ',
					})
					return;
				}
				if(files2[0]==undefined){
					this.$refs.uToast.show({
						title: '请上传身份证背面照',
						type: 'error ',
					})
					return;
				}
				if(files3[0]==undefined){
					this.$refs.uToast.show({
						title: '请上传本人免冠正面照',
						type: 'error ',
					})
					return;
				}
				let form={}
				form.id=this.orderId
				form.idcard_face_img=files1[0].response.data.url
				form.idcard_back_img=files2[0].response.data.url
				form.face_img=files3[0].response.data.url
				this.$http.uploadIdentityFlow(form)
					.then(res => {
						console.log(121,res)
						
						if (res.data.code == 1) {
							this.$refs.uToast.show({
								title: res.data.msg,
								type: 'error ',
							})
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
				
						} else {
							this.$refs.uToast.show({
								title: res.data.msg,
								type: 'error ',
							})
						}
					})
			},
			apply() {
				if(this.showData.card_status==1){
					//图片处理
					let files1 = [];
					let files2 = [];
					let files3 = [];
					// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
					files1 = this.$refs.uUpload1.lists.filter(val => {
						return val.progress == 100;
					})
					files2 = this.$refs.uUpload2.lists.filter(val => {
						return val.progress == 100;
					})
					files3 = this.$refs.uUpload3.lists.filter(val => {
						return val.progress == 100;
					})
					if(files1[0]==undefined){
						this.$refs.uToast.show({
							title: '请上传身份证正面照',
							type: 'error ',
						})
						return;
					}
					if(files2[0]==undefined){
						this.$refs.uToast.show({
							title: '请上传身份证背面照',
							type: 'error ',
						})
						return;
					}
					if(files3[0]==undefined){
						this.$refs.uToast.show({
							title: '请上传本人免冠正面照',
							type: 'error ',
						})
						return;
					}
					
					this.form.open_idcard_face_img=files1[0].response.data.url
					this.form.open_idcard_back_img=files2[0].response.data.url
					this.form.open_face_img=files3[0].response.data.url
				}
				if(this.current!=null){
					
					this.form.no=this.boxList1[this.current]
				}
				if (this.form.name == '') {
					this.$refs.uToast.show({
						title: '请输入姓名',
						type: 'error ',
					})
					return;
				}
				if (!this.$check.checkName(this.form.name)) {
					this.$refs.uToast.show({
						title: '请输入正确的格式',
						type: 'error ',
					})
					return;
				}
				if (this.form.phone == '') {
					this.$refs.uToast.show({
						title: '请输入手机号',
						type: 'error ',
					})
					return;
				}
				if (!this.$check.checkMobile(this.form.phone)) {
					this.$refs.uToast.show({
						title: '请输入正确手机号的格式',
						type: 'error ',
					})
					return;
				}
				if(this.form.sms_code=='' && this.configAll.system_sms_open){
					this.$refs.uToast.show({
						title: '请输入验证码',
						type: 'error ',
					})
					return;
				}
				if (this.form.id_no == '') {
					this.$refs.uToast.show({
						title: '请输入身份证号',
						type: 'error',
					})
					return;
				}
				if (!this.$check.IdName(this.form.id_no)) {
					this.$refs.uToast.show({
						title: '请输入正确的身份证',
						type: 'error',
					})
					return;
				}
				if (this.form.address == '') {
					this.$refs.uToast.show({
						title: '请输入地址',
						type: 'error ',
					})
					return;
				}
				this.applyType = false
				//#ifdef MP-TOUTIAO
				this.form.pay_type = 4
				//#endif
				// 是否是H5支付
				if (this.mixin_type == 'H5') {
					this.form.pay_type = 2
				}
				//#ifdef H5
				const res = window.location.href;
				if (res.indexOf('?') === -1) return
				const URL = res.split('?')[1];
				let obj = {}; // 声明参数对象
				let arr = URL.split("&");
				for (let i = 0; i < arr.length; i++) {
					let arrNew = arr[i].split("=");
					obj[arrNew[0]] = arrNew[1];
				}
				this.form.return_url = 'https://mmlh.vip/build/#/'
				this.form.clickid = obj.clickid
				
				//#endif
				this.$http.apply(this.form)
					.then(res => {
						console.log(res)
						//#ifdef H5
						let this_ = this;
						_baq.track("form", {
							assets_id: this_.$assets_id,
							product_name: this_.showData.name,
							product_price: this_.showData.amount
						})
						//#endif
						if (res.data.code == 1) {
							if (res.data.data.without_pay == 0) {
								if (this.mixin_type == 'H5') {
									window.location.href = res.data.data.pay_url
								} else {
									this.pay(res.data.data)
								}
							} else {
								uni.navigateTo({
									url: '/pages/flowOrderDetails/flowOrderDetails?id=' + res.data.data.id,
								});
							}

						} else {
							this.$refs.uToast.show({
								title: res.data.msg,
								type: 'error ',
							})
						}
					})
			},
			//调用支付
			pay(val) {
				let this_ = this;
				uni.getProvider({
					service: 'oauth',
					success: function(res) {
						console.log(res.provider)
						console.log(this_.mixin_type + '来源')
						if (this_.mixin_type != 'TOUTIAO') {
							ks.pay({
								serviceId: '1',
								orderInfo: val.res,
								success(res) {
									console.log(res)
									// 支付成功
									this_.$refs.uToast.show({
										title: '支付成功',
										type: 'success ',
									})
									uni.navigateTo({
										url: '/pages/flowOrderDetails/flowOrderDetails?id=' +
											res.data.data.id,
									});
								},
								fail(e) {
									if (e.errMsg == 'pay:fail request payment cancel') {
										this_.$refs.uToast.show({
											title: '支付取消',
											type: 'error ',
										})
									} else {
										this_.$refs.uToast.show({
											title: '支付失败',
											type: 'error ',
										})
									}
								}
							})

						} else {
							uni.requestPayment({
								"provider": res.provider[0],
								"orderInfo": val.res,
								"service": 5,
								getOrderStatus: res => new Promise((resolve, reject) => {
									console.log(res)
									resolve(res)
								}),
								success(res) {
									console.log(res)
									// 支付成功
									if (res.code == 0) {
										this_.$refs.uToast.show({
											title: '支付成功',
											type: 'success ',
										})
										uni.navigateTo({
											url: '/pages/flowOrderDetails/flowOrderDetails?id=' +
												res.data.data.id,
										});
									} else if (res.code == 4) {
										this_.$refs.uToast.show({
											title: '支付取消',
											type: 'error ',
										})
									} else if (res.code == 1) {
										this_.$refs.uToast.show({
											title: '支付超时',
											type: 'error ',
										})
									} else if (res.code == 2) {
										this_.$refs.uToast.show({
											title: '支付失败',
											type: 'error ',
										})
									} else if (res.code == 3) {
										this_.$refs.uToast.show({
											title: '支付关闭 ',
											type: 'error ',
										})
									} else {

									}
								},
								fail(e) {
									console.log(e)
								}
							})
						}
					}
				});

			},
		}
	}
</script>

<style lang="scss">
	
	.tab{
		background-color: rgb(213, 46, 76);
		    color: rgb(255, 255, 255);
			height: 44px;
			line-height: 44px;
			display: flex;
			justify-content: space-between;
			padding: 0 3px;
			font-size: 16px;
			font-weight: bold;
	}
	.sendSMS{
					  position: relative;
					  width: 100%;
					  .sms{
						  position: absolute;
						  right: 0;
						  top: 50%;
						  transform: translateY(-50%);
						  z-index: 11;
					  }
	}
	.sms{
					/deep/ .tips{
						width: 168rpx;
						height: 49rpx;
						text-align: center;
						line-height: 49rpx;
						// border: 1rpx solid #D52E4C;
						border-radius: 20rpx;
						font-size: 26rpx;
						color: #fff;
						background-color: $uni-color-BGC;
						margin-top: 4rpx;
					}
					/deep/ input{
						flex: 1;
					}
	}
	.upload {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		padding: 30rpx;
		margin-bottom: 30rpx;
		border: 3rpx dashed #d52e4c;
		border-radius: 10rpx;

		image {
			width: 220rpx;
			height: 140rpx;
			border-radius: 10rpx;
		}
		//平均分配
		.flexJu{
			display: flex;
			justify-content: space-between;
		}
		.ding {
			position: absolute;
			width: 60rpx;
			height: 50rpx;
			right: 110rpx;
			top: 70rpx;
		}

		.u-upload {
			width: 220rpx;
			height: 140rpx;
			border-radius: 10rpx;
			background-color: #f1cfd5;
		}

		/deep/ .u-list-item {
			margin: 0;
			height: 140rpx !important;
		}

		/deep/ .u-add-wrap {
			opacity: 0;
		}
	}

	page {
		height: 100%;
	}

	.card {
		padding: 30rpx 40rpx 180rpx;
		width: 635rpx;
		background: rgba(255, 255, 255, 0.2);
		border: 2px dashed #D52E4C;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		overflow: hidden;

		.cardImg {
			image {
				width: 237rpx;
				height: 138rpx;
			}
		}

		.cardTitle {
			font-size: 32rpx;
			color: #333333;
			font-weight: bold;
			margin: 35rpx 0 20rpx;
		}

		.intro {
			font-size: 20rpx;
			line-height: 30rpx;
			color: #BBBBBB;
		}
	}

	.popup {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 1000rpx;
		position: relative;
		width: 100%;
		max-width: 400px;
		box-sizing: border-box;
		padding: 37rpx 60rpx 69rpx;

		.btn {
			position: absolute;
			bottom: 40rpx;
			width: 630rpx;
			height: 77rpx;
			line-height: 77rpx;
			background: #D52E4C;
			border-radius: 39rpx;
			margin: 20rpx auto;
			text-align: center;
			color: #fff;
			font-size: 32rpx;
		}

		.last {
			image {
				margin-right: 11rpx;
				width: 28rpx;
				height: 28rpx;
			}

			font-size: 24rpx;
			color: #2FA4FF;
			margin: 20rpx auto 20rpx;
		}

		.search {
			.inputBox {
				box-sizing: border-box;
				padding-left: 40rpx;
				width: 480rpx;
				height: 74rpx;
				background: #F1F1F1;
				border-radius: 37rpx;

				input {
					border: none;
				}

				.searchIcon {
					width: 140rpx;
					height: 74rpx;
					background: #D0352D;
					border-radius: 37rpx;
					line-height: 74rpx;
					text-align: center;

					image {
						width: 37rpx;
						height: 37rpx;
						vertical-align: middle;

					}
				}
			}
		}

		.numberList {
			flex-wrap: wrap;
			margin-top: 23rpx;
			max-height: 640rpx;
			overflow: auto;
			.numberItem {
				font-weight: bold;
				margin-bottom: 15rpx;
				line-height: 79rpx;
				text-align: center;
				width: 283rpx;
				height: 79rpx;
				background: #FFFFFF;
				border: 1px solid #E2E2E2;
				border-radius: 12rpx;

				/deep/ .active {
					color: $uni-color-BGC;
				}
				/deep/ .active1 {
					margin: 0 5px;
				}
				/deep/ .active2 {
					color: $uni-color-BGC;
					margin: 0 5px;
				}
			}

			.selectItem {
				color:#fff;
				// border: 2px solid #D52E4C;
				background-color: #D52E4C;
				/deep/ .active {
					color:#fff;
				}
				/deep/ .active2 {
					color:#fff;
				}
				
				// background: #FBEAED;
			}
		}
	}

	.selectphone {
		line-height: 102rpx;
		padding: 0 52rpx;
		margin: 26rpx auto 0;
		width: 701rpx;
		height: 102rpx;
		border: 2px solid #E6028D;
		border-radius: 24rpx;

		text {
			font-size: 25rpx;
			color: #333333;
		}

		.selectText {
			color: #BBBBBB;
			margin-right: 30rpx;
		}
		.selectText1 {
			color: #333;
			margin-right: 30rpx;
		}
	}

	.flowDetails {
		// height: 100%;
		overflow: hidden;

		.img {
			width: 100%;
			display: flex;
			flex-direction: column;

			image {
				width: 100%;
			}

			uni-image {
				display: block;
			}
		}

		.form {
			width: 703rpx;
			box-sizing: border-box;
			padding: 30rpx;
			position: relative;
			margin: 20rpx auto 30rpx;
			background-color: #fff;
			border: 4rpx solid #E6028D;
			border-radius: 30rpx;

			.btn {
				width: 569rpx;
				height: 77rpx;
				line-height: 77rpx;
				background: #D52E4C;
				border-radius: 39rpx;
				margin: 20rpx auto;
				text-align: center;
				color: #fff;
				font-size: 32rpx;
			}

			.orderTit {
				text {
					margin-left: 30rpx;
					color: dimgray;
				}
			}

			.formInput {
				.u-form-item {
					/deep/ .u-form-item--left__content__label {
						position: relative;
						padding-left: 30rpx;
					}

					/deep/.u-form-item--left__content__label::after {
						content: '*';
						position: absolute;
						left: 18rpx;
						top: 0;
						color: red;
					}
				}

				.remark {
					/deep/.u-form-item--left__content__label::after {
						display: none;
					}
				}
			}
		}
	}
</style>