unimall/unimall-app/pageA/pages/newcompany.vue

<template>
	<view class="container" style='padding-bottom: 190rpx;'>
		<view>
		<view class="cu-form-group">
			<!-- <radio-group name="" @change='radioChange'>
				<label v-for='(item,index) in list'  class="radio">
					<radio :value="item.value" :checked='item.value==status' style="transform:scale(0.7);color:#000;" /><text>{{item.name}}</text>
			    </label>
			</radio-group> -->
			</view>
			<view v-if='status==0' class="cu-form-group">
				<view  class="title">公司名称</view>
				<input placeholder="请填写" name="input" v-model='data.companyName' @input='companyNameinput'></input>
			</view>
			<view v-if='status==0' class="cu-form-group">
				<view class="title">纳税人识别号</view>
				<input placeholder="请填写" name="input" v-model='data.identificationNo' @input='identificationNoinput'></input>
			</view>
			<view class="cu-bar bg-white">
					<view class="action">
						身份证(正面)上传
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-2 grid-square flex-sub">
						<view class="bg-img" v-if="data.personNoImg != ''" @tap="ViewImage" :data-url="data.personNoImg">
						 <image :src="data.personNoImg" mode="aspectFit"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="0">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<!-- <view class="bg-img" v-if="data.personNoImg1 != ''" @tap="ViewImage" :data-url="data.personNoImg1">
						 <image :src="data.personNoImg1" mode="aspectFit"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="1">
								<text class='cuIcon-close'></text>
							</view>
						</view> -->
						<view class="solids" @tap="ChooseImagePerson" v-if="data.personNoImg == '' ">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view> 
				<view class="cu-form-group">
					<text class="tit">姓名</text>
					<view class="con-list">
						<input placeholder="请填写" name="input" v-model="data.personName" ></input>
					</view>
				</view> 
				<view class="cu-form-group">
					<text class="tit">身份证号</text>
					<view class="con-list">
						<input placeholder="请填写" name="input" v-model="data.personNo" ></input>
					</view>
				</view>
				<view class="cu-bar bg-white">
					<view class="action">
						银行卡(正)上传
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-2 grid-square flex-sub">
						<view class="bg-img" v-if="data.bankImg != ''" @tap="ViewImage" :data-url="data.bankImg">
							<image :src="data.bankImg" mode="aspectFit"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="2">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<!-- <view class="bg-img" v-if="data.bankImg1 != ''" @tap="ViewImage" :data-url="data.bankImg1">
							<image :src="data.bankImg1" mode="aspectFit"></image>
							<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="3">
								<text class='cuIcon-close'></text>
							</view>
						</view> -->
						<view class="solids" @tap="ChooseImageBank" v-if="data.bankImg == '' ">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
				<view class="cu-form-group">
					<text class="tit">开户行</text>
					<view class="con-list">
						<input placeholder="请填写" name="input" v-model="data.companyBank" @input="bankAccountInput"></input>
					</view>
				</view>
				<view class="cu-form-group">
					<text class="tit">银行卡号</text>
					<view class="con-list">
						<input placeholder="请填写" name="input" v-model="data.accountNo" @input="bankNoInput"></input>
					</view>
				</view>
				<view  class="cu-form-group">
					<text class="tit">开户支行</text>
					<view v-if="zhihangStatus" style='width:56%;' class="con-list">
						<picker @change="bankNameChange" :value="bankNameIndex" :range="bankNameList">
							<view class="picker">
								{{bankNameIndex>-1?bankNameList[bankNameIndex]:'点击选择支行'}}
							</view>
						</picker>		
					</view>
					<view v-else class="con-list">
						<input placeholder="请填写" name="input" v-model="bankNameZhihang" @input="bankNameZhihangInput"></input>
					</view>
					<button v-if="zhihangStatus" class='cu-btn bg-green shadow' @click="changeZhihang">手动填写</button>
					<button v-else class='cu-btn bg-green shadow' @click="changeZhihang">自动识别</button>
				</view>
			<!-- <view class="cu-form-group">
				<view class="title">公司开户行</view>
				<input placeholder="请填写" name="input" v-model='data.companyBank' @input='companyBankinput'></input>
			</view>
			<view class="cu-form-group">
				<view class="title">公司账户</view>
				<input placeholder="请填写" name="input" v-model='data.accountNo' @input='accountNoinput'></input>
			</view> -->
			<view v-if='status==0' class="cu-form-group">
				<view class="title">公司电话</view>
				<input placeholder="请填写" name="input" v-model='data.companyPhone' @input='companyPhoneinput'></input>
			</view>
			<view v-else class="cu-form-group">
				<view class="title">电话</view>
				<input placeholder="请填写" name="input" v-model='data.companyPhone' @input='companyPhoneinput'></input>
			</view>
			<view v-if='status==1' class="cu-form-group">
				<view class="title">收款人姓名</view>
				<input placeholder="请填写" name="input" v-model='data.collectName' @input='collectNameinput'></input>
			</view>
			<view class="cu-form-group">
				<view class="title">验证码</view>
				<input type="mobile" value="" placeholder="6位验证码" maxlength="6"
					 data-key="verifyCode" @input="verifyCodeInput" style="width: 60%;"></input>
				<button class='cu-btn bg-green shadow':disabled="sendDisabled" @click="doGetVerify">{{sendText}}</button>
			</view>
			<view v-if='status==0' class="cu-form-group">
				<view class="title">公司地址</view>
				<input placeholder="请填写" name="input" v-model='data.companyPlace' @input='companyPlaceinput'></input>
			</view>
			<view v-else class="cu-form-group">
				<view class="title">地址</view>
				<input placeholder="请填写" name="input" v-model='data.companyPlace' @input='companyPlaceinput'></input>
			</view>
		</view>
		<view class="page-bottom">
			<view class="action-btn-group">
				<button type="primary"  class=" action-btn no-border buy-now-btn" style='width:50%;' @click="Company()">完成</button>
			</view>
		</view>
	</view>
</template>

<script>
	import uploadImage from '@/components/ossutil/uploadFile.js';
	import {
	    mapState 
	} from 'vuex';
	export default {
		data() {
			return {
				data:{
					accountNo: "",
					companyBank: "",
					companyName: "",
					personName:"",
					personNo:"",
					personNoImg:"",
					personNoImg1:"",
					bankImg:"",
					bankImg1:"",
					companyPhone: "",
					collectName:"",
					companyPlace: "",
					identificationNo: "",
					id:'',
					personNoImg:'',
					personNoImg1:'',
					personName:'',
					personNo:'',
					renown:0,
					bankImg:'',
				    bankImg1:'',
					bankNameZhi:''
					
				},
				list:[
					{name:'公司',value:0},
					{name:'个人',value:1}
				],
				status:1,
				verifyCode:'',
				sendText:'获取验证码',
				sendDisabled: false,
				requeststatus:0,
				
				bankAccount:'',
				bankNo:'',
				bankNameList:'',
				bankPhone:'',
				
				driver:'',
				driverNo:'',
				zhihangStatus:true,
				bankNameZhihang:'',
				bankNameIndex:-1
			}
		},
		computed: {
		},
		onShow() {
		},
		onLoad(options) {
			if(JSON.stringify(options)!='{}'){
				this.data.accountNo=options.accountNo
				this.data.companyBank=options.companyBank
				this.data.companyName=options.companyName
				this.data.companyPhone=options.companyPhone
				this.data.companyPlace=options.companyPlace
				this.data.identificationNo=options.identificationNo
				this.data.personNoImg=options.personNoImg
				this.data.personNoImg1=options.personNoImg1
				this.data.personName=options.personName
				this.data.personNo=options.personNo
				this.data.bankImg=options.bankImg
				this.data.bankImg1=options.bankImg1
				this.data.bankNameZhi=options.bankNameZhi
				this.data.id=options.id
				this.requeststatus='updateCompany'
			}else{
				this.requeststatus='addCompany'
			}
		},
		onReady(){
			
		},
		methods: {
			verifyCodeInput(e){
				this.verifyCode = e.detail.value
			},
			radioChange(e){
				this.data.renown=e.detail.value
				this.status=e.detail.value
			},
			changeZhihang(){
				this.zhihangStatus = !this.zhihangStatus
			},
			bankNameChange(e) {
				this.bankNameIndex = e.detail.value
				this.data.bankNameZhi = this.bankNameList[this.bankNameIndex]
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除该照片吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							if(e.currentTarget.dataset.index == 0){
								this.data.personNoImg = "";
							}
							else if(e.currentTarget.dataset.index == 1){
								this.data.personNoImg1 = "";
							}
							else if(e.currentTarget.dataset.index == 2){
								this.data.bankImg = "";
							}
							else if(e.currentTarget.dataset.index == 3){
								this.data.bankImg1= "";
							}
							else if(e.currentTarget.dataset.index == 4){
								this.data.otherImg = "";
							}
							else if(e.currentTarget.dataset.index == 5){
								this.data.poundImg = "";
							}
							
							
						}
					}
				})
			},
			doGetVerify() {
				const that = this
				var phone = this.data.companyPhone;
				if (!phone || phone.length != 11) {
					uni.showToast({
						title:'请输入正确手机号！',
						icon:'none'
					})
					return
				}
				that.$api.request('user', 'sendVerifyCode', {
					phone: phone,
				}).then(res => {
					that.sendDisabled = true
					let sec = 60
					let interval = setInterval(() => {
						sec--;
						that.sendText = sec + 's后重发'
						if (sec <= 0) {
							that.sendDisabled = false
							that.sendText = "获取验证码"
							clearInterval(interval)
						}
						
					}, 1000)
				})
				
			},
			companyNameinput(e){
				this.data.companyName = e.detail.value
			},
			companyBankinput(e){
				this.data.companyBank = e.detail.value
			},
			accountNoinput(e){
				this.data.accountNo = e.detail.value
			},
			companyPhoneinput(e){
				this.data.companyPhone = e.detail.value
			},
			collectNameinput(e){
				this.data.collectName = e.detail.value
			},
			companyPlaceinput(e){
				this.data.companyPlace = e.detail.value
			},
			identificationNoinput(e){
				this.data.identificationNo = e.detail.value
			},
			ViewImage(e) {
				var img = [];
				img = e.currentTarget.dataset.url.split(' ')
				uni.previewImage({
					current:0,
					urls: img
				});
			},
			ChooseImageBank() {
				var that = this
				uni.showLoading({
					title: '正在识别',
					mask:true
				})
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						//上传图片
						uploadImage(res.tempFilePaths[0], 'bankImg/',
							result => {
							if(that.data.bankImg == undefined){
								that.data.bankImg = ''
							}
							 if (that.data.bankImg.length != 0) {
							 	that.data.bankImg1 = result
								uni.hideLoading()
							 } else {
							 	that.data.bankImg = result
								that.$api.request('tran', 'bankShibie', {
									bankImg: result
								}, failres => {
									that.$api.msg(failres.errmsg)
									uni.hideLoading()
								}).then(res => {			
									that.data.companyBank = res.data.bankName
									that.data.accountNo = res.data.bankNo
									that.bankNameList = res.data.bankNameZhihang
									console.log(that.bankNameList)
									that.bankPhone = res.data.bankPhone
									that.$api.msg('请核对开户行、支行和银行卡号')
									uni.hideLoading()
								})
							 }
							}
						)
					}
				});
			},
			ChooseImagePerson() {
				const that = this
				uni.showLoading({
					title: '正在识别',
					mask:true
				})
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album','camera'], //从相册选择
					success: (res) => {
						//上传图片
						//图片路径可自行修改
						uploadImage(res.tempFilePaths[0], 'personNoImg/',
							result => {
							 if (this.data.personNoImg.length != 0) {
							 	this.data.personNoImg1 = result
							 	uni.hideLoading()
							 } else {
							 	this.data.personNoImg = result
								that.$api.request('tran', 'personShibie', {
									personImg: result,
									type:"driver"
								}, failres => {
									that.$api.msg(failres.errmsg)
									uni.hideLoading()
								}).then(res => {			
									that.data.personName = res.data.driver
									that.data.personNo = res.data.driverNo
									that.$api.msg('请核对身份信息')
									uni.hideLoading()
								})
							 }
							}
						)
					}
				})
				},
			Company(item){
				var that = this
				if (!that.data.companyName&&that.status==0) {
					that.$api.msg('请填写公司名称');
					return
				}
				if (!that.data.identificationNo&&that.status==0) {
					that.$api.msg('请填写纳税人识别号');
					return
				}
				if (!that.data.companyBank) {
					that.$api.msg('请填写开户行')
					return
				}
				if(!that.data.accountNo){
					this.$api.msg('请填写账户');
					return;
				}
				if (!that.data.companyPhone) {
					that.$api.msg('请填写电话')
					return
				}
				if (!that.verifyCode) {
					that.$api.msg('请填写验证码')
					return
				}
				if(!that.data.personName){
					this.$api.msg('请填写姓名');
					return;
				}
				if (!that.data.personNo) {
					that.$api.msg('请填写身份证号')
					return
				}
				if (!that.data.collectName&&that.status==1) {
					that.$api.msg('请填写收款人姓名');
					return
				}
				var data=JSON.stringify(that.data)
				this.$api.request('company', that.requeststatus, {
					CompanyDo:data,
					verifyCode:that.verifyCode
				}, failres => {
					that.$api.msg(failres.errmsg)
					uni.hideLoading()
				}).then(res => {
					if(res.data.code=='SUCCESS'){
						if(that.requeststatus=='updateCompany'){
							that.$api.msg('修改成功')
						}else{
							that.$api.msg('添加成功')
						}
						uni.hideLoading()
						setTimeout(()=>{uni.navigateBack()},1000);
					}else{
						that.$api.msg(res.data.code)
						uni.hideLoading()
					}
				})
			},
		},
	}
</script>

<style>
</style>