alhj/pages/bsinessadmin/persondata.vue

<template>
	<view class="content">
		<view class="headbox">
			<text v-if="state==1" class="headtitle">供货商个人资料</text>
			<text v-if="state==0" class="headtitle">业务管理员个人资料</text>
			<view class="logobox">
				<image src="../../static/img/logo.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="acountbox">
			<view v-if="state==1" class="inacount">
				<text class="acoutitle">供货商名称</text>
				<input type="text" v-model="form.name" class="checkword" placeholder="请输入供货商名称"
					placeholder-style="font-size:30rpx;color:#BEBDBB" />
			</view>
			<view v-if="state==0" class="inacount">
				<text class="acoutitle">业务管理员名称</text>
				<input type="text" v-model="formData.realName" class="checkword" placeholder="请输入业务管理员名称"
					placeholder-style="font-size:30rpx;color:#BEBDBB" />
			</view>
			<view class="inacount checked" v-if="state==1">
				<text class="acoutitle">供货商账号</text>
				<input type="text" disabled="true" v-model="form.account" class="checkword " placeholder="请输入供货商账号"
					placeholder-style="font-size:30rpx;color:#BEBDBB" />
			</view>
			<view class="inacount checked" v-if="state==0">
				<text class="acoutitle">业务管理员账号</text>
				<input type="text" disabled="true" v-model="formData.account" class="checkword" placeholder="请输入业务管理员账号"
					placeholder-style="font-size:30rpx;color:#BEBDBB" />
			</view>
			<view class="inacount checked" v-if="state==1">
				<text class="acoutitle">统一社会信用代码</text>
				<input type="text" disabled="true" v-model="form.socialCode" class="checkword" placeholder="请输入统一社会信用代码"
					placeholder-style="font-size:30rpx;color:#BEBDBB" />
			</view>
			<view class="inacount" v-if="state==1">
				<text class="acoutitle">法人姓名</text>
				<input type="text" v-model="form.legalPerson" class="checkword" placeholder="请输入法人姓名"
					placeholder-style="font-size:30rpx;color:#BEBDBB" />
			</view>
			<view class="inacount" v-if="state==1">
				<text class="acoutitle">联系人</text>
				<input type="text" v-model="form.contacts" class="checkword" placeholder="请输入联系人"
					placeholder-style="font-size:30rpx;color:#BEBDBB" />
			</view>
			<view class="inacount" v-if="state==1">
				<text class="acoutitle">联系电话</text>
				<input type="number" v-model="form.contactsMobile" class="checkword" placeholder="请输入联系电话"
					placeholder-style="font-size:30rpx;color:#BEBDBB" />
			</view>
			<view class="inacount" v-if="state==0">
				<text class="acoutitle">联系电话</text>
				<input type="number" v-model="formData.mobile" class="checkword" placeholder="请输入联系电话"
					placeholder-style="font-size:30rpx;color:#BEBDBB" />
			</view>
			<view>
				<view v-if="state==1" class="inacount"
					style="flex-direction: column;align-items: center;background-color: #fff;">
					<text class="acoutitle" style="flex: 1;width: 100%;">认证照片</text>
					
					<view class="upmsg">
						<view class="uppic" style="padding-top: 80rpx;font-weight:600 ;" @click="upImages(1)"
							v-if="form.identifyPicList.length==0">
							<text>点击上传照片</text>
						</view>
						<view class="img-up" style="width: 690rpx;height: 399rpx;" v-for="item in form.identifyPicList"  v-if="form.identifyPicList.length>0">
						<image :src="item" mode="aspectFill" v-if="form.identifyPicList.length>0" @click="upImages(1)">
						</image>
						<image @click="deletImg(index)" class="delet-img" src="../../static/icon/delet.png" style="width: 25px;height: 25px;" mode="aspectFill"></image>
						</view>
					</view>
						
					<text style="font-size: 24rpx;color: #D05C39;padding-top: 20rpx;">*注意上传法人手持身份证半身照</text>
				</view>
			</view>
			<view>
				<view v-if="state==1" class="inacount"
					style="flex-direction: column;align-items: center;background-color: #fff;margin-top:0 ;">
					<view style="justify-content: space-between;display: flex;width: 100%;">
						<text class="acoutitle" style="flex: 1;width: 100%;">授权委托书</text>
						<text class="acoutitle" style="flex: 1;width: 100%;text-align: right;" @click="addpdf"
							:style="[{color:(addpdfin?'#D05C39':'#000')},{fontSize:'28rpx'}]">点击获取授权委托书</text>
					</view>

					<view class="upmsg" >
						<view class="uppic" style="padding-top: 80rpx;font-weight:600 ;" @click="upImages(2)"
							v-if="form.proxyFileList.length==0">
							<text>点击上传照片</text>
						</view>
						<view  class="img-up" style="width: 690rpx;height: 399rpx;"v-if="form.proxyFileList.length>0"
						v-for="item in form.proxyFileList"
						>
						<image :src="item" mode="aspectFill"  @click="upImages(2)">
						</image>
						<image @click="deletImg2(index)" class="delet-img" src="../../static/icon/delet.png" style="width: 25px;height: 25px;" 
						mode="aspectFill"></image>
						</view>
					</view>
					<text style="font-size: 24rpx;color: #D05C39;padding-top: 20rpx;">*注意上传法人签署的授权委托书</text>
				</view>
			</view>
		</view>
		<view class="logininbtn" @click="acountRegister" v-if="state==1">
			<text>保存修改</text>
		</view>
		<view class="logininbtn" @click="acountModify" v-if="state==0">
			<text>保存修改</text>
		</view>
		<view class="safebt"></view>

	</view>
</template>

<script>
	import {
		mainUrl
	} from '@/http/baseUrl.js';
	let that
	export default {
		data() {
			return {
				identifyPics: [],
				proxyFile: [],
				checked: 1,
				state: '',
				form: {
					name: '',
					account: '',
					socialCode: '',
					legalPerson: '',
					password: '',
					contacts: '',
					contactsMobile: '',
					identifyPicList: [],
					proxyFileList: [],
					addpdfin: false
				},
				formData: {},

			}
		},
		onLoad(o) {
			that = this
			this.state = this.$store.state.admin
			uni.getSystemInfo({
				success: function(res) {
					console.log(res.safeArea.bottom); // print 610
					let bottom = res.safeArea.bottom
					let height = res.safeArea.height
					let cacl = bottom - height
					that.wagesheight = cacl
					console.log(that.wagesheight); // print 292
				}
			})
			this.init()
			if (o.checked) {
				this.checked = o.checked
			}
		},
		methods: {
			init() {
				uni.showLoading()
				if (this.state == 0) {
					uni.$u.http.get('/api/Account', {
						custom: {
							auth: true
						}
					}).then((res) => {
						uni.hideLoading()
						this.formData = res

					}).catch((err) => {
						uni.hideLoading()
						console.log(err)
					})
				} else if (this.state == 1) {
					uni.$u.http.get('/api/Supplier', {
						custom: {
							auth: true
						}
					}).then((res) => {
						uni.hideLoading()
						this.form = res
						console.log(res);

					}).catch((err) => {
						uni.hideLoading()
						console.log(err)
					})
				}
			},

			acountModify() {
				let formData = this.formData
				if (formData.realName.length == 0) {
					this.$toast("请输入业务管理员名称")
					return
				}
				if (formData.account.length == 0) {
					this.$toast("请输入业务管理员账号")
					return
				}
				if (formData.mobile.length == 0) {
					this.$toast("请输入联系电话")
					return
				}
				uni.$u.http.post(`/api/Account/update`, formData, {
					custom: {
						auth: true
					}
				}).then((res) => {

					console.log(res.data)
					if (res) {
						this.$toast("修改成功")
						uni.hideLoading()
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/mine/mine'
							})
						}, 1000)
					}
				}).catch((err) => {
					uni.hideLoading()
				})

			},


			acountRegister() {
				let that = this
				let form = this.form
				if (form.name.length == 0) {
					this.$toast("请输入供货商名称")
					return
				}
				if (form.account.length == 0) {
					this.$toast("请输入供货商账号")
					return
				}
				if (form.socialCode.length == 0) {
					this.$toast("请输入统一社会信用代码")
					return
				}
				if (form.legalPerson.length == 0) {
					this.$toast("请输入法人姓名")
					return
				}
				if (form.contacts.length == 0) {
					this.$toast("请输入联系人")
					return
				}
				if (form.contactsMobile.length == 0) {
					this.$toast("请输入联系电话")
					return
				}
				if (form.identifyPicList.length == 0) {
					this.$toast("请上传认证照片")
					return
				}
				if (form.proxyFileList.length == 0) {
					this.$toast("请上传授权委托书")
					return
				}
				console.log(form);
				form.checked = 1
				uni.hideLoading()
				uni.$u.http.post(`/api/Supplier/update`, {
					identifyPics: [...that.form.identifyPicList],
					proxyFile: [...that.form.proxyFileList],
					account: that.form.account,
					name: that.form.name,
					socialCode: that.form.socialCode,
					legalPerson: that.form.legalPerson,
					contacts: that.form.contacts,
					contactsMobile: that.form.contactsMobile,
					id: that.form.id
				}, {
					custom: {
						auth: true
					}
				}).then((res) => {

					console.log(res.data)
					if (res) {
						this.$toast("修改成功")
						uni.hideLoading()
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/mine/mine'
							})
						}, 1000)
					}
				}).catch((err) => {
					uni.hideLoading()
				})
			},
			
			deletImg(i){
				this.form.identifyPicList.splice(i,1)
				console.log(this.form.identifyPicList);
			},
			deletImg2(i){
				this.form.proxyFileList.splice(i,1)
				console.log(this.form.identifyPicList);
			
			},
			addpdf() {
				this.addpdfin = true
				uni.showModal({
					title: '提示',
					content: "是否获取授权委托书？",
					success: function(res) {
						if (res.confirm) {
							uni.showLoading()
							uni.$u.http.get('/api/Setting/attorney', {
								custom: {
									auth: true
								}
							}).then((res) => {
								uni.hideLoading()
								uni.setClipboardData({
									data: res,
									success: function() {
										that.$toast("复制成功，请到浏览器下载")
									}
								});
								// that.downloadPdf(res)
							}).catch((err) => {
								uni.hideLoading()
								that.$toast(err.msg)
							})

						} else if (res.cancel) {

						}
					}
				})
			},
			downloadPdf(url) {
				console.log(url)
				uni.downloadFile({
					url: url, //下载地址接口返回
					header: {

					},
					success: (data) => {
						if (data.statusCode === 200) {
							console.log(22222)
							//文件保存到本地
							uni.saveFile({
								tempFilePath: data.tempFilePath, //临时路径
								success: function(res) {
									uni.showToast({
										icon: 'none',
										mask: true,
										title: '文件已保存：' + res.savedFilePath, //保存路径
										duration: 3000,
									});
									setTimeout(() => {
										//打开文档查看
										uni.openDocument({
											filePath: res.savedFilePath,
											success: function(res) {
												// console.log('打开文档成功');
											}
										});
									}, 3000)
								}
							});
						}
					},
					fail: (err) => {
						console.log(err);
						uni.showToast({
							icon: 'none',
							mask: true,
							title: '失败请重新下载',
						});
					},
				});
			},
			upImages(e) {
				if (e == 1) {
					this.chooseImage(1)

				} else if (e == 2) {
					this.chooseImage(2)
				}
			},
			chooseImage(u) {
				uni.chooseImage({
					count: 1,
					success: function(e) {
						for (let i in e.tempFilePaths) {
							let ui = that.upText(e.tempFilePaths[i], u)
						}

					},
					complete: function(e) {
						// 触发事件 tabEvent
						return []
					}
				})

			},
			upText(e, i) {
				var list = []
				uni.showLoading({

				})
				uni.uploadFile({
					url: mainUrl + '/api/File',
					filePath: e,
					name: 'File',
					fileType: 'image',
					header: {
						"User-Agent": "apifox/1.0.0 (https://www.apifox.cn)"
					},
					formData: {
						File: JSON.stringify(e),
						// file_name: fileName,
					},
					success(re) {
						uni.hideLoading()
						let res = JSON.parse(re.data)
						if (res.code == 200) {
							if (i == 1) {
								that.form.identifyPicList.push(res.data.file)
								that.identifyPics.push(res.data.file)
							} else if (i == 2) {
								that.form.proxyFileList.push(res.data.file)
								that.proxyFile.push(res.data.file)
							}

						} else {
							uni.showModal({
								title: '',
								content: res.msg,
								showCancel: false,
							});
						}
					},
					fail(e) {
						if (e && e.msg) {
							uni.showModal({
								title: '错误',
								content: e.msg,
								showCancel: false,
							});
						}
					},
				});

			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {

		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.headbox {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}

	.headtitle {
		font-size: 40rpx;
		font-weight: 600;
		padding-bottom: 36rpx;
	}

	.logobox {
		width: 269rpx;
		height: 191rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.acountbox {
		height: 100%;

		.upmsg {
			margin-top: 20rpx;
			background-color: #F6F6F6;
			width: 690rpx;
			// height: 350rpx;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			// overflow: hidden;

			image {
				width: 100%;
				height: 100%;

			}
		}

		.uppic {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 500rpx;
			height: 250rpx;
			background-image: url("@/static/img/upuer.png");
			background-size: 100%;
		}

		.inacount {
			flex: 1;
			display: flex;
			padding: 35rpx 20rpx;
			box-sizing: border-box;
			// width: 606rpx;
			margin-top: 40rpx;
			background-color: #F6F6F6;
			border-radius: 20rpx;
			font-size: 30rpx;
			color: #1F242A;

			input {
				width: 360rpx;
			}
		}

		.acoutitle {
			font-weight: 600;
		}

		.checkword {
			padding-left: 20rpx;
			color: #1F242A;
			font-size: 30rpx;
		}
	}


	.logininbtn {
		box-sizing: border-box;
		margin-top: 80rpx;
		// width: 606rpx;
		border-radius: 20rpx;
		background: linear-gradient(to right, #FFE1AD, #D07539);
		height: 100rpx;
		text-align: center;
		color: #fff;
		line-height: 100rpx;
	}

	.acountall {
		display: flex;
		justify-content: flex-end;
		margin-top: 30rpx;
		font-size: 24rpx;
	}

	.checkag {
		margin-top: 200rpx;
		font-size: 28rpx;
		margin-bottom: 150rpx;
	}

	::v-deep .checked {
		// color: #f5f7fa !important;
		opacity: 1 !important;
		background-color: darken($color: #f5f7fa, $amount: 4) !important;
	}
	.img-up{
		position: relative;
	}
	.delet-img{
		position: absolute;
		top: 0px;
		right: 0px;
	}
</style>