GuangYuYuan-app/pages/my/indent.vue

<template>
	<view class="info">
		<view class="popup" v-if="isDisable"></view>
		<view class="content" >
		
			<view class="title">
				基 本 信 息
			</view>
			<view class="page-section">
				<view class="page-section-title">姓名</view>
				<view class="weui-cells weui-cells_after-title">
					<u-input v-model="form.cName" :type="type" placeholder="请输入姓名,最多四个字" maxlength='4'/>
				</view>
			</view>
			<view class="page-section">
				<view class="page-section-title">性别</view>
				<view class="sex" @click="isShow = true">
					{{changeSex}}
				</view>
				<u-select v-model="isShow" :list="sex" @confirm="confirm"></u-select>
			</view>
			<view class="page-section">
				<view class="page-section-title">手机号</view>
				<view class="weui-cells weui-cells_after-title">
					<!-- <input class="weui-input" v-model="form.cPhone" placeholder="请输入手机号" /> -->
					<u-input v-model="form.cPhone" placeholder="请输入手机号" maxlength='11'/>
				</view>
			</view>
			<view class="page-section">
				<view class="page-section-title">入驻城市</view>
				<view class="weui-cells weui-cells_after-title">
					<u-select v-model="show" :list="citylist" @confirm="select"></u-select>
					<view class="city" @click="selectCity" v-if="form.city == ''">
						入驻城市
					</view>
					<view class="city" @click="selectCity" v-else>
						{{form.city}}
					</view>
				</view>
			</view>
			<view class="page-section" style="border:0;">
				<view class="page-section-title">上传近期生活照</view>
				<view class="images">
					<u-upload :action="uploadUrl" :file-list="LifeList" @on-success="handleUploadSuccess"
						@on-remove="handleUploadRemove" :header="header"></u-upload>
				</view>
			</view>
			<view class="title">
				详 细 信 息
			</view>
			<view class="page-section">
				<view class="page-section-title">昵称</view>
				<view class="weui-cells weui-cells_after-title">
					<u-input v-model="form.cNickName" :type="type" placeholder="请输入昵称" maxlength='4' />
				</view>
			</view>
			<view class="page-section" style="border:0;">
				<view class="page-section-title">上传头像</view>
				<view class="">
					<u-upload :action="uploadUrl" :max-count="1" :file-list="headImg" @on-success="handleUploadHeaderSuccess"
						@on-remove="handleUploadHeaderRemove" :header="header" upload-text="点击上传图片" />
				</view>
				<!-- 	<view class="head_img" v-else>
					<image :src="headImg" mode=""></image>
				</view> -->
			</view>
			<view class="page-section">
				<view class="page-section-title">您所在的位置</view>
				<view class="weui-cells weui-cells_after-title location" @click="getAddress">
					<text class="point" v-if="!form.address">请选择</text>
					<text class="point active" v-else>{{form.address}}{{form.name}}</text>
				</view>
			</view>
			<view class="page-section">
				<view class="page-section-title">商户简介</view>
				<view class="weui-cells weui-cells_after-title textareas" style="border:none">
					<textarea value="" v-model="form.cJianjie" bindinput="jianIn" placeholder="请输入您的简介"></textarea>
				</view>
			</view>
			<view class="page-section" style="border:0;">
				<view class="page-section-title">上传身份证照片</view>
				<view class="images" style="padding-bottom: 0;">
					<!-- <u-upload :action="action" :file-list="idCard"></u-upload> -->
					<u-upload :action="uploadUrl" :file-list="codeList" @on-success="handleUploadIdcardSuccess"
						@on-remove="handleUploadIdcardRemove" :header="header" maxCount="2" />
				</view>
			</view>
			<view class="page-section" style="border:0;">
				<view class="page-section-title">上传健康证照片</view>
				<view class="images" style="padding-bottom: 0;">
					<u-upload :action="uploadUrl" :file-list="healthCertificate" @on-success="handleUploadHealthSuccess"
						@on-remove="handleUploadHealthRemove" :header="header" :max-count="1" />
				</view>
			</view>
			<view class="page-section" style="border:0;">
				<view class="page-section-title">上传从业资格证照片</view>
				<view class="images" style="padding-bottom: 0;">
					<!-- <u-upload :action="action" :file-list="idCard"></u-upload> -->
					<u-upload :action="uploadUrl" :file-list="certification" @on-success="handleUploadCertifiSuccess"
						@on-remove="handleUploadCertifiRemove" :header="header" :max-count="1" />
				</view>
			</view>
			<view class="page-section" style="border:0;">
				<view class="page-section-title">上传营业执照照片</view>
				<view class="images" style="padding-bottom: 0;">
					<!-- <u-upload :action="action" :file-list="idCard"></u-upload> -->
					<u-upload :action="uploadUrl" :file-list="businessLicense" @on-success="handleUploadLicenseSuccess"
						@on-remove="handleUploadLicenseRemove" :header="header" :max-count="1" />
				</view>
			</view>
			<view class="page-section" style="border:0;">
				<view class="page-section-title">上传无犯罪证明照片</view>
				<view class="images" style="padding-bottom: 0;">
					<!-- <u-upload :action="action" :file-list="idCard"></u-upload> -->
					<u-upload :action="uploadUrl" :file-list="noCrime" @on-success="handleUploadnoCrimeSuccess"
						@on-remove="handleUploadnoCrimeRemove" :header="header" :max-count="1" />
				</view>
			</view>
			<view class="submits">
				<button style="margin: 30rpx 0" type="primary" @click="submit">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		addEngineer,
		project,
		UpdateEngine,
		engineDetail,
		imgUpload,
		getCityList
	} from '../.././api/index.js'
	import uUpload from 'uview-ui/components/u-upload/u-upload.vue';
	export default {
		components: {
			uUpload,
		},
		data() {
			return {
				isDisable:false,
				citylist:[],
				show:false,
				type: 'text',
				token: '',
				uploadId: '',
				isShow: false,
				// uploadUrl: 'https://test.baoxianzhanggui.com/nightFragrance/common/upload',
				uploadUrl:'https://city.baoxianzhanggui.com/nightFragrance/common/upload',
				headImgList: [],
				title: '商户入驻',
				details: '',
				sex: [
					{
						value: '0',
						label: '女'
					},
					{
						value: '1',
						label: '男'
					}
				],
				changeSex: '女',
				index: 0,
				location: '',
				imglist: [],
				urlImg: [],
				pictures: [],
				pojectList: [],
				form: {
					id: '',
					cName: '',
					cNickName: '',
					cPortrait: '',
					cPhone: '',
					cJianjie: '',
					nSex: 0,
					cSfzImg: [],
					cImgList: [],
					latitude: '',
					longitude: '',
					name: '',
					address: '',
					cOpenId: '',
					cBhList: '',
					city: '',
					certification: '',
					healthCertificate: '',
					businessLicense: ''
				},
				headImg: [], //展示头像用
				imgsShow: true,
				idCard: [],
				LifeList: [], //展示生活照用
				codeList: [], //展示身份证用
				healthCertificate: [], //展示健康证
				businessLicense: [], //展示营业执照
				certification: [], //展示资格证
				noCrime:[],//展示无犯罪记录证明
			}
		},
		computed: {
			header() {
				return {
					Authorization: `tf: ${this.token}`, // 携带Token的请求头
				};
			},
		},
		mounted() {
			// 在页面加载时获取Token，可以从本地缓存中获取
			this.token = uni.getStorageSync('access-token'); // 假设token保存在本地缓存中
		},
		methods: {
			
			select(e) {
				this.form.city = e[0].label
				this.form.deptId = e[0].value
			},
			goCity() {
				uni.navigateTo({
					url: '/pages/identify/city?type=' + 'indent'
				})
			},
			getAddress() {
				uni.chooseLocation({
					success: res => {
						this.form.name = res.name;
						this.form.latitude = res.latitude;
						this.form.longitude = res.longitude;
						this.form.address = res.address
					}
				});
			},
			//上传头像
			handleUploadHeaderSuccess(response) {
				this.form.cPortrait = response.fileName
			},
			handleUploadHeaderRemove(index) {
				this.headImgList.splice(index, 1);
			},
			//上传身份证
			handleUploadIdcardSuccess(response) {
				this.form.cSfzImg.push(response.fileName);
			},
			handleUploadIdcardRemove(index) {
				this.idCard.splice(index, 1);
				this.form.cSfzImg.splice(index, 1)
			},
			//上传生活照
			handleUploadSuccess(response) {
				this.form.cImgList.push(response.fileName)
			},
			handleUploadRemove(index) {
				this.urlImg.splice(index, 1);
				this.form.cImgList.splice(index, 1)
			},
			//上传健康证
			handleUploadHealthSuccess(response) {
				this.form.healthCertificate = response.fileName
			},
			handleUploadHealthRemove(index) {
				this.healthCertificate.splice(index, 1);
			},
			//上传营业执照
			handleUploadLicenseSuccess(response) {
				this.form.businessLicense = response.fileName
			},
			handleUploadLicenseRemove(index) {
				this.businessLicense.splice(index, 1);
			},
			//上传资格证
			handleUploadCertifiSuccess(response) {
				this.form.certification = response.fileName
			},
			handleUploadCertifiRemove(index) {
				this.certification.splice(index, 1);
			},
			//上传无犯罪记录证明
			handleUploadnoCrimeSuccess(response){
				this.form.noCrime = response.fileName
			},
			handleUploadCertifiRemove(index) {
				this.noCrime.splice(index, 1);
			},
			//提交
			submit() {
				var that = this
				var openids = uni.getStorageSync('wx_copenid')
				this.form.cOpenId = openids
				// this.form.cAddress =this.form.cAddress
				this.form.nSex = this.index
				// this.form.cImgList = this.urlImg
				// this.form.cSfzImg = this.idCard
				// that.data.form.cBhList = that.data.form.cBhList.join(", ")
				if (this.form.cName == '') {
					uni.showToast({
						title: '请输入您的姓名',
						icon: 'none'
					})
					return
				}

				if (this.form.cPortrait == '') {
					uni.showToast({
						title: '请上传头像',
						icon: 'none'
					})
					return
				}
				if (this.form.cNickName == '') {
					uni.showToast({
						title: '请输入您的昵称',
						icon: 'none'
					})
					return
				}
				if (!/^1[3456789]\d{9}$/.test(this.form.cPhone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				if (this.form.city == '') {
					uni.showToast({
						title: '请选择所在城市',
						icon: 'none'
					});
					return
				}
				if (this.form.address == '') {
					uni.showToast({
						title: '请选择位置',
						icon: 'none'
					});
					return
				}
				if (this.form.cJianjie == '') {
					uni.showToast({
						title: '请填写您的简介',
						icon: 'none'
					});
					return
				}
				if (this.form.cSfzImg.length < 2) {
					uni.showToast({
						title: '请上传身份证照片正反面',
						icon: 'none'
					});
					return
				}
				if (this.form.cImgList.length < 1) {
					uni.showToast({
						title: '最少上传一张生活照片',
						icon: 'none'
					});
					return
				}
				if (this.title == '编辑资料') {
					UpdateEngine(this.form).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: "修改成功",
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					})
				} else {
					addEngineer(this.form).then(res => {
						if (res.data.code == 200) {
							uni.showToast({
								title: "添加成功",
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					})
				}

			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(item) {},
			checkboxGroupChange(e) {
				this.form.cBhList = e.join(',')
			},
			//选择性别
			confirm(e) {
				this.changeSex = e[0].label
			},
			// 项目列表
			getPro() {
				project({
					current: 1,
					size: 10
				}).then(res => {
					var list = res.data.data
					setTimeout(() => {
						list.forEach(ele => {
							this.form.cBhList.split(',').forEach(eles => {
								if (ele.cId == eles) {
									ele.checked = true
								}
							})
						});
						this.pojectList = list
					}, 1000)
				})
			},
			getDetails() {
				var that = this
				var openid = {
					cOpenId: uni.getStorageSync('wx_copenid')
				}
				engineDetail(openid).then(res => {
					this.form = res.data.data
					if(res.data.data.nTong && res.data.data.nTong == 0 || res.data.data.nTong == 1 ){
						this.isDisable = true
					}
					//头像
					if (!this.form.cPortrait == '') {
						let header = {
							url: this.$globalData.publicUrl + this.form.cPortrait
						}
						this.headImg.push(header)
					}
						//健康证
					if (!this.form.healthCertificate == '') {
						let healthCertificate = {
							url: this.$globalData.publicUrl + this.form.healthCertificate
						}
						this.healthCertificate.push(healthCertificate)
					}
						//资格证
					if (!this.form.certification == '') {
						let certification = {
							url: this.$globalData.publicUrl + this.form.certification
						}
						this.certification.push(certification)
					}
					//营业执照
					if (!this.form.businessLicense == '') {
						let businessLicense = {
							url: this.$globalData.publicUrl + this.form.businessLicense
						}
						this.businessLicense.push(businessLicense)
					}
					//无犯罪证明
					if (!this.form.noCrime == '') {
						let noCrime = {
							url: this.$globalData.publicUrl + this.form.noCrime
						}
						this.noCrime.push(noCrime)
					}
						//生活照
					res.data.data.cImgList.forEach(item => {
						let obj = {
							url: this.$globalData.publicUrl + item
						}
						this.LifeList.push(obj)
					})
						//身份证
					res.data.data.cSfzImg.forEach(item => {
						let card = {
							url: this.$globalData.publicUrl + item
						}
						this.codeList.push(card)
					})
					this.imgsShow = false,
					this.index = res.data.data.nSex
					// this.form.cBhList = res.data.data.cBhList
				})
			},
			getCity() {
				getCityList().then(res => {
					this.citylist = res.data.data.map(({
						deptId,
						deptName
					}) => ({
						value: deptId,
						label: deptName
					}))
				});
			},
			selectCity(){
				this.show = true
			},
		},
		onLoad(options) {
			// uni.setStorageSync('access-token', 'eyJhbGciOiJIUzUxMiJ9.eyJ0ZjoiOiJiNGQ2NzJiMi0xNzcxLTRmYTMtYjM1OS01NmRhMjk4ZDcwZjAifQ.acq9x8MrF3aXzY3mYJIuG8MLeRtMQ2hybesrN8t5txI4H5HDthn07nq5QYZmCJ1_ZPL8ZDbYczN6qmIa8ckrrA')
			// uni.setStorageSync('wx_copenid','o-HEJ6VP2YNi0HPeLaIHCQsQD69s')
			this.getCity()
			this.title = options.title
			if (options.title == '编辑资料') {
				this.getDetails()
			}
		},
		onShow() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.info{
		width: 100%;
		height: auto;
		padding-top: 20rpx;
		position: relative;
		.popup{
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
			z-index: 9999;
			overflow-y: auto;
		}
	}

	.title {
		border-left: 3px solid #2cb8d4;
		padding-left: 5px;
		font-size: 30rpx;
		// margin-top: 10px;
	}

	.head_img {
		width: 200rpx;
		height: 200rpx;

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

	.sex {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		border-bottom: 1px solid #333;
		// padding-bottom: 10rpx;
	}

	.weui-cells {
		margin-top: 10rpx;
		border-bottom: 1px solid #333333;
	}

	.listAll {
		background-color: #f8f8f8;
		height: 100vh;
	}

	.content {
		padding: 0 30rpx;

		.page-section-title {
			font-size: 32rpx;
			padding-top: 20rpx;

		}

		.weui-cells:before {
			border-top: 0;
		}

		.piker {
			border-bottom: 1px solid #ccc;
			height: 88rpx;
			line-height: 88rpx;
		}

		.location {
			// height: 88rpx;
			color: rgb(145, 145, 145);
			line-height: 60rpx;
		}

		.textareas {
			margin-top: 20rpx;

			textarea {
				border: 1px solid #b8b6b6;
				width: auto;
				padding: 20rpx;
				background-color: #f8f8f8;
			}
		}

		.images {
			display: flex;
			margin-top: 20rpx;
			// padding-bottom: 240rpx;
			width: 100%;

			.imagesPho {
				position: relative;

				image {
					width: 200rpx;
					height: 200rpx;
					margin-right: 20rpx;
				}

				.closeimg {
					position: absolute;
					right: -5px;
					top: -10rpx;
					position: absolute;
					z-index: 9;
					color: #f03d38 !important;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}

		.uploadImg {
			border: 0;

			.image {
				width: 200rpx;
				height: 200rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid #b8b6b6;
			}
		}

		.proList {
			margin-top: 20rpx;

			label {
				margin-right: 40rpx;
				margin-bottom: 20rpx;
				display: inline-block;
			}
		}

		.submits {
			width: 100%;
			background-color: #fff;
			border-top: 1px solid #b8b6b6;
			text-align: center;
			z-index: 10;

			button {
				width: 80%;
				display: inline-block;
				background-color: #2cb8d4;
			}
		}

		.heads {
			.uploadImg {
				width: 200rpx;
				height: 200rpx;
				border: 1px solid #ccc;
				text-align: center;
				line-height: 200rpx;

				image {
					width: 200rpx;
					height: 200rpx;
				}
			}
		}
	}
</style>