yiliangyiyun-app/pageD/identity/companyIdentityEdit.vue

<template>
	<view class="center">
		<view>
			<text @click='consent' v-bind:class="switchs1">公司</text>
			<text @click='consent' v-bind:class="switchs2">个人</text>
		</view>
		<view v-if="consentStatus == true">
			<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="1"
				:size-type="['compressed']" @on-success="getImgUrl" @on-error="onError" @on-remove="onRemove"
				@on-uploaded="isAdd = true" :before-upload="filterFileType" :options="uploadOptions"
				:custom="uploadCustom" @on-progress="onProgress"></upload>
			<view class="personalcss">
				<view class="c-row b-b">
					<text class="tit">公司名称</text>
					<view class="con-list">
						<input placeholder="请填写公司名称" name="input" v-model="deptList.compName"></input>
					</view>
				</view>
				<view class="c-row ">
					<text class="tit">纳税人识别号</text>
					<view class="con-list">
						<input type='number' placeholder="请填写纳税人识别号" name="input" v-model="deptList.payTaxesCard"></input>
					</view>
				</view>
			</view>

			<view>

				<view style="margin: 0 auto;" v-if="idup != ''" @click="idUp">
					<image v-bind:src="idup" class="picture"></image>
				</view>

				<view style="margin: 0 auto;" v-if="idlow != ''" @click="idLow">
					<image v-bind:src="idlow" class="picture"></image>
				</view>
			</view>
			<view class="personalcss">
				<view class="c-row b-b">
					<text class="tit">姓名</text>
					<view class="con-list">
						<input placeholder="请填写姓名" name="input" v-model="deptList.customerName"></input>
					</view>
				</view>
				<view class="c-row ">
					<text class="tit">身份证号</text>
					<view class="con-list">
						<input placeholder="请填写身份证号" maxlength="18" name="input" v-model="deptList.customerNumberCard"></input>
					</view>
				</view>
			</view>
			<view>

				<view style="margin: 0 auto;" v-if="bank1 != ''" @click="bankUp()">
					<image v-bind:src="bank1" class="picture"></image>
				</view>

				<view style="margin: 0 auto;" v-if="bank2 != ''" @click="bankLow()">
					<image v-bind:src="bank2" class="picture"></image>
				</view>
			</view>
			<view class="personalcss">
				<view class="c-row b-b">
					<text class="tit">银行卡号</text>
					<view class="con-list">
						<input type='number' placeholder="请填写银行卡号" name="input" v-model="deptList.bankCard"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">开户行</text>
					<view class="con-list">
						<input placeholder="请填写开户行" name="input" v-model="deptList.bankDeposit"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">开户支行</text>
					<view class="con-list">
						<input placeholder="请填写开户支行" name="input" v-model="deptList.bankDepositBranch"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">手机号</text>
					<view class="con-list">
						<input type='number' placeholder="请填写手机号" @input='phoneinput' v-model="deptList.customerPhone"></input>
					</view>
				</view>
				<view class="c-row ">
					<text class="tit">公司地址</text>
					<view class="con-list">
						<input placeholder="请填写公司地址" name="input" v-model="deptList.compAddress"></input>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view>
				<!-- 个人身份证正面 -->
				<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="1"
					:size-type="['compressed']" @on-success="getImgUrl1" @on-error="onError" @on-remove="onRemove"
					@on-uploaded="isAdd = true" :before-upload="filterFileType" :options="uploadOptions1"
					:custom="uploadCustom1" @on-progress="onProgress"></upload>
				<!-- 个人身份证反面 -->
				<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="1"
					:size-type="['compressed']" @on-success="getImgUrl2" @on-error="onError" @on-remove="onRemove"
					@on-uploaded="isAdd = true" :before-upload="filterFileType" :options="uploadOptions2"
					:custom="uploadCustom2" @on-progress="onProgress"></upload>
			</view>
			<view class="personalcss">
				<view class="c-row b-b">
					<text class="tit">姓名</text>
					<view class="con-list">
						<input placeholder="请填写姓名" name="input" v-model="deptList.customerName"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">身份证号</text>
					<view class="con-list">
						<input placeholder="请填写身份证号" name="input" maxlength="18" v-model="deptList.customerNumberCard"></input>
					</view>
				</view>
			</view>
			<view>
				<!-- 上传银行卡正面 -->
				<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="1"
					:size-type="['compressed']" @on-success="getImgUrl3" @on-error="onError" @on-remove="onRemove"
					@on-uploaded="isAdd = true" :before-upload="filterFileType" :options="uploadOptions3"
					:custom="uploadCustom3" @on-progress="onProgress"></upload>
				<!-- 上传银行卡反面 -->
				<upload class="upload" ref="upload" :action="action" :max-size="maxSize" :max-count="1"
					:size-type="['compressed']" @on-success="getImgUrl4" @on-error="onError" @on-remove="onRemove"
					@on-uploaded="isAdd = true" :before-upload="filterFileType" :options="uploadOptions4"
					:custom="uploadCustom4" @on-progress="onProgress"></upload>
			</view>
			<view class="personalcss">
				<view class="c-row b-b">
					<text class="tit">银行卡号</text>
					<view class="con-list">
						<input type='number' placeholder="请填写银行卡号" name="input" v-model="deptList.bankCard"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">开户行</text>
					<view class="con-list">
						<input placeholder="请填写开户行" name="input" v-model="deptList.bankDeposit"></input>
					</view>
				</view>
				<view class="c-row">
					<text class="tit">供应商电话</text>
					<view class="con-list">
						<input type='number' placeholder="请填写供应商电话" name="input" v-model="deptList.supplierPhone"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">手机号</text>
					<view class="con-list">
						<input  type='number' placeholder="请填写手机号" @input='phoneinput' v-model="deptList.customerPhone"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">联系地址</text>
					<view class="con-list">
						<input placeholder="请填写联系地址" name="input" v-model="deptList.compAddress"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">开户支行</text>
					<view class="con-list">
						<input placeholder="请填写开户支行" name="input" v-model="deptList.bankDepositBranch"></input>
					</view>
				</view>
				<view class="c-row b-b">
					<text class="tit">供应商姓名</text>
					<view class="con-list">
						<input placeholder="请填写供应商姓名" name="input" v-model="deptList.supplier"></input>
					</view>
				</view>
			</view>
		</view>
		<button class="btn btns" @click="commitEdit">修改</button>

	</view>
</template>

<script>
	import upload from '@/components/upload.vue';
	import {
		mapState
	} from 'vuex';
	export default {
		name: "buy",
		data() {
			return {

				radios: 2,
				action: this.$uploadUrl,
				maxSize: 50 * 1024 * 1024, //限制文件大小 50M
				btnLoading: false, //防止重复点击
				isAdd: true,
				imgUrls: [],
				uploadCustom: true,
				uploadCustom1: true,
				uploadCustom2: true,
				uploadCustom3: true,
				uploadCustom4: true,
				uploadOptions: {
					"text": "上传营业执照",
					"bgc": ""
				},
				uploadOptions1: {
					"text": "上传身份证头像页",
					"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/identityup%282%29.png"
				},
				uploadOptions2: {
					"text": "上传身份证国徽页",
					"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/identitylow%282%29.png"
				},
				uploadOptions3: {
					"text": "上传银行卡正面",
					"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/bankup%282%29.png"
				},
				uploadOptions4: {
					"text": "上传银行卡反面",
					"bgc": "https://taohaoliang.oss-cn-beijing.aliyuncs.com/app/tmp/banklow%282%29.png"
				},
				deptList: {
					compName: "",
					payTaxesCard: "",
				},
				consentStatus: true,
				consentStatus1: false,
				parameter: {},
				businessman: {},
				id: [],
				idup: "",
				idlow: "",
				license1: "",
				bank1: "",
				bank2: "",
				bankid: [],
				payeeAddress: [],
				commitEdits: {},
				switchs1: "switchs1",
				switchs2: "switchs2",
			};
		},
		onLoad(option) {
			this.parameter.id = option.id,
				this.getList()
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			filterFileType(index, lists) {
				if (lists[index].fileType != 'jpg' && lists[index].fileType != 'png' && lists[index].fileType != 'gif') {
					lists.splice(index, 1);
					// 当前文件不支持
					uni.showModal({
						title: '暂不支持当前图片类型',
						showCancel: false
					});
				} else {
					this.isAdd = false;
				}
			},
			onError(error) {
				alert(error)
				console.log('------------error-----------')
				console.log(error)
			},
			onProgress(e) {
				console.log(e)
			},
			onRemove(index) {
				this.imgUrls.splice(index, 1);
			},
			getImgUrl(res) {
				console.log(res)
				console.log('------------res-----------')
				this.deptList.businessLicenseAddressUrl = res.data.appendixPath
				this.license1 = res.data.appendixPath

			},
			getImgUrl1(res) {
				console.log(res)
				console.log('------------res-----------')
				that.id[0] = rres.data.appendixPath
				that.idup = res.data.appendixPath

			},
			getImgUrl2(res) {
				console.log(res)
				console.log('------------res-----------')
				that.id[1] = res.data.appendixPath
				that.idlow = res.data.appendixPath

			},
			getImgUrl3(res) {
				console.log(res)
				console.log('------------res-----------')
				that.bankid[0] = res.data.appendixPath
				that.bank1 = res.data.appendixPath

			},
			getImgUrl4(res) {
				console.log(res)
				console.log('------------res-----------')
				that.bankid[1] = res.data.appendixPath
				that.bank2 = res.data.appendixPath

			},
			commitEdit(item) {
				console.log(this.deptList.compName, "公司名称")
				this.deptList.commonId = this.userInfo.id
				this.deptList.cardAddressUrl = this.id.toString()
				this.deptList.payeeAddressUrl = this.bankid.toString()
				if (this.consentStatus1 == true) {
					this.deptList.customerTypeFlag = "个人"
				} else if (this.consentStatus == true) {
					this.deptList.customerTypeFlag = "企业"
				}
				// console.log(this.deptList,"编辑对象")
				this.$api.doRequest('post', '/identityAuthenticationInfo/api/editIdentityAuthenticationInfo', this
						.deptList, 'application/json;charset=UTF-8').then(res => {
						console.log("成功连接")
						if (!this.deptList.goodsName) {
							this.$api.msg('修改成功！')

							return
						}
						uni.navigateTo({
							url: `/pages/attestation/index`
						})

					})
					.catch(res => {
						if (res.errmsg) {
							uni.showToast({
								title: res.errmsg,
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: "系统异常，请联系管理员",
								icon: 'none',
								duration: 2000
							})
						}
					});


			},
			// license() {
			// 	var that = this
			// 	uni.chooseImage({
			// 		success: function(res) {
			// 			uni.uploadFile({
			// 				url: 'https://www.zthymaoyi.com/upload/admin',
			// 				filePath: res.tempFilePaths[0],
			// 				name: 'file',
			// 				success(res) {
			// 					var data = res.data
			// 					var strToObj = JSON.parse(data)			
			// 					that.deptList.businessLicenseAddressUrl = strToObj.url
			// 					that.license1 = strToObj.url
			// 				}
			// 			})
			// 		}
			// 	})
			// },
			// idUp() {
			// 	var that = this
			// 	uni.chooseImage({
			// 		success: function(res) {
			// 			uni.uploadFile({
			// 				url: 'https://www.zthymaoyi.com/upload/admin',
			// 				filePath: res.tempFilePaths[0],
			// 				name: 'file',
			// 				success(res) {
			// 					var data = res.data
			// 					var strToObj = JSON.parse(data)
			// 					that.id[0] = strToObj.url
			// 					that.idup = strToObj.url
			// 				}
			// 			})
			// 		}
			// 	})
			// },
			// idLow() {
			// 	var that = this
			// 	uni.chooseImage({
			// 		success: function(res) {
			// 			uni.uploadFile({
			// 				url: 'https://www.zthymaoyi.com/upload/admin',
			// 				filePath: res.tempFilePaths[0],
			// 				name: 'file',
			// 				success(res) {
			// 					var data = res.data
			// 					var strToObj = JSON.parse(data)
			// 					that.id[1] = strToObj.url
			// 					that.idlow = strToObj.url
			// 				}
			// 			})
			// 		}
			// 	})
			// },
			// bankUp() {
			// 	var that = this
			// 	uni.chooseImage({
			// 		success: function(res) {
			// 			uni.uploadFile({
			// 				url: 'https://www.zthymaoyi.com/upload/admin',
			// 				filePath: res.tempFilePaths[0],
			// 				name: 'file',
			// 				success(res) {
			// 					var data = res.data
			// 					var strToObj = JSON.parse(data)
			// 					that.bankid[0] = strToObj.url
			// 					that.bank1 = strToObj.url
			// 				}
			// 			})
			// 		}
			// 	})
			// },
			// bankLow() {
			// 	var that = this
			// 	uni.chooseImage({
			// 		success: function(res) {
			// 			uni.uploadFile({
			// 				url: 'https://www.zthymaoyi.com/upload/admin',
			// 				filePath: res.tempFilePaths[0],
			// 				name: 'file',
			// 				success(res) {
			// 					var data = res.data
			// 					var strToObj = JSON.parse(data)
			// 					that.bankid[1] = strToObj.url
			// 					that.bank2 = strToObj.url
			// 				}
			// 			})
			// 		}
			// 	})
			// },
			getList(ids) {
				this.$api.doRequest('get', '/identityAuthenticationInfo/api/getIdentityAuthenticationInfo', this.parameter,
						'application/json;charset=UTF-8').then(res => {
						console.log("成功连接")

						this.deptList = res.data.data
						if (this.deptList.businessLicenseAddressUrl != "") {
							this.license1 = this.deptList.businessLicenseAddressUrl
						}
						if (this.deptList.cardAddressUrl != "") {
							this.id = this.deptList.cardAddressUrl.split(",")
							this.idup = this.id[0]
							this.idlow = this.id[1]
						}
						if (this.deptList.payeeAddressUrl != "") {
							this.payeeAddress = this.deptList.payeeAddressUrl.split(","),
								this.bank1 = this.payeeAddress[0]
							this.bank2 = this.payeeAddress[1]
						}
						console.log(this.deptList.customerTypeFlag, "判断")
						if (this.deptList.customerTypeFlag == 2) {
							this.consentStatus = true
							this.consentStatus1 = false
							this.switchs1 = "switchs1"
							this.switchs2 = "switchs2"
						} else {
							this.consentStatus = false
							this.consentStatus1 = true
							this.switchs1 = "switchs2"
							this.switchs2 = "switchs1"
						}

					})
					.catch(res => {
						if (res.errmsg) {
							uni.showToast({
								title: res.errmsg,
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: "系统异常，请联系管理员",
								icon: 'none',
								duration: 2000
							})
						}
					});
			},
			consent() {
				if (this.consentStatus == false && this.consentStatus1 == true) {
					this.consentStatus = true
					this.consentStatus1 = false
					this.switchs1 = "switchs1"
					this.switchs2 = "switchs2"
				} else if (this.consentStatus == true && this.consentStatus1 == false) {
					this.consentStatus = false
					this.consentStatus1 = true
					this.switchs1 = "switchs2"
					this.switchs2 = "switchs1"
				}

			},

		}
	}
</script>

<style>
	.center {
		padding: 10px 20px;
	}

	.c-row {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		padding: 20rpx 30rpx;
		position: relative;
	}

	.con-list {
		-webkit-box-flex: 1;
		-webkit-flex: 1;
		flex: 1;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		color: #303133;
		line-height: 40rpx;
		text-align: right;
		padding-right: 20rpx;
		font-size: 14px;
	}

	.picture {
		width: 100%;
		height: 220px;
		text-align: center;
		margin-top: 10px;
	}

	.fujians {
		margin: 0 auto;
		background-color: #FFFFFF;
		margin-top: 30px;
		border-radius: 20px;
		padding: 10px 10px;
	}

	.picturebiaoti {
		font-size: 17px;
		font-weight: 700;
	}

	.personalcss {
		background-color: #FFFFFF;
		border-radius: 20px;
		margin-top: 10px;
	}

	.btn {
		margin-top: 10px;
		background-color: #FFFFFF;
		border-radius: 25px;
		border: none;
	}

	.btns {
		background-color: #22C572;
		color: white;
	}

	.switchs1 {
		font-size: 20px;
		font-weight: 700;
		margin-right: 16px;
	}

	.switchs2 {
		font-size: 20px;
		margin-right: 16px;
	}
</style>