flying-monkey/pagesB/personal-information/personal-information.vue

<template>
	<view>
		<status-nav navBarTitle="个人信息" returnColor="#c2c2c2"></status-nav>
		<container-subgroup-two>
			<view slot="content" style="margin: 0 -30rpx;">
				<view class="fon28">
					<view class="bacf pad-sx30 pad-zy40 disac bbot">
						<view class="bold width30 flexs">我的昵称</view>
						<view class="width100" style="color: #8b8b8b;">
							<input type="text" v-model="nickname" placeholder="请输入昵称" placeholder-style="font-size:28rpx;color:#8b8b8b;" />
						</view>
					</view>
					<view class="bacf pad-sx30 pad-zy40 disac bbot">
						<view class="bold width30 flexs">姓名</view>
						<view class="width100" style="color: #8b8b8b;">
							<input type="text" v-model="full_name" placeholder="请输入姓名" placeholder-style="font-size:28rpx;color:#8b8b8b;" />
						</view>
					</view>
					<view class="bacf pad-sx30 pad-zy40 disac bbot">
						<view class="bold width30 flexs">性别</view>
						<view class="disac">
							<view @tap="chooseGender(1)" class="disac gender-box" :class="genderNum==1 ? 'gender-active' : ''">
								<view></view>
								<text>男</text>
							</view>
							<view @tap="chooseGender(2)" class="disac gender-box" :class="genderNum==2 ? 'gender-active' : ''">
								<view></view>
								<text>女</text>
							</view>
						</view>
					</view>
					<view class="bacf pad-sx30 pad-zy40 disac bbot">
						<view class="bold width30 flexs">联系电话</view>
						<view class="width100" style="color: #8b8b8b;">
							<input type="number" v-model="contact_number" placeholder="请输入联系电话" placeholder-style="font-size:28rpx;color:#8b8b8b;" />
						</view>
					</view>
					<view class="bacf pad-sx30 pad-zy40 disac bbot">
						<view class="bold width30 flexs">电子邮箱</view>
						<view class="width100" style="color: #8b8b8b;">
							<input type="text" v-model="e_mail" placeholder="请输入电子邮箱" placeholder-style="font-size:28rpx;color:#8b8b8b;" />
						</view>
					</view>
					<view class="bacf pad-sx30 pad-zy40 disac bbot mar-s10">
						<view class="bold width30 flexs">身份证号码</view>
						<view class="width100" style="color: #8b8b8b;">
							<input type="text" v-model="id_card_no" placeholder="请输入身份证号码" placeholder-style="font-size:28rpx;color:#8b8b8b;" />
						</view>
					</view>
					<view class="bacf pad-sx30 pad-zy40 disac bbot">
						<view class="bold width30 flexs">身份证正反面</view>
						<view style="color: #f26803;" class="width100 disjbac">
							<text @tap="previewImageEv(0)">查看</text>
							<image @tap="uploadImgEv(0)" src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
						</view>
					</view>
					<view class="bacf pad-sx30 pad-zy40 disac bbot">
						<view class="bold width30 flexs">意外险材料</view>
						<view style="color: #f26803;" class="width100 disjbac">
							<text @tap="previewImageEv(1)">查看</text>
							<image @tap="uploadImgEv(1)" src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
						</view>
					</view>
					<view class="bacf pad-sx30 pad-zy40 disac bbot">
						<view class="bold flexs mar-y40">签署工程师合作协议</view>
						<view style="color: #f26803;" class="width100 disjbac">
							<text @tap="previewImageEv(2)">查看</text>
							<image @tap="uploadImgEv(2)" src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
						</view>
					</view>
					<view class="bacf pad-sx30 pad-zy40 disac bbot">
						<view class="bold width30 flexs">技能证书</view>
						<view style="color: #f26803;" class="width100 disjbac">
							<text @tap="previewImageEv(3)">查看</text>
							<image @tap="uploadImgEv(3)" src="/static/public/icon-personInfo-upload.png" mode="widthFix" lazy-load style="width: 128rpx;height: 50rpx;"></image>
						</view>
					</view>
				</view>
				<view class="person-btn">提交保存</view>
			</view>
		</container-subgroup-two>
	</view>
</template>

<script>
	import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
	import { uploadImg } from '@/jsFile/public-api.js';
	export default {
		components:{
			containerSubgroupTwo
		},
		data() {
			return {
				nickname:'', // 我的昵称
				full_name:'', // 姓名
				genderNum:1 ,// 1：男		2：女
				contact_number:'', // 联系电话
				e_mail:'', // 电子邮箱
				id_card_no:'', // 身份证号码
				imgList:[],
			}
		},
		methods: {
			// 性别切换
			chooseGender(index){
				this.genderNum = index;
			},
			// 图片上传
			uploadImgEv(index){
				uni.chooseImage({
					count:1,
					sourceType:['album'],
					success: (res) => {
						let tempImg = res.tempFilePaths;
						this.imgList[index] = tempImg[0];
						let params = {
							token: uni.getStorageSync('token'),
							dir: 'images',
							from:tempImg[0]
						}
						console.log(params,104);
						// uploadImg(params).then(res=>{
						// 	console.log(res);
						// })
							// this.$requst.upload('file/upload/image',{file:tempImg[i]}).then(res=>{
							// 	if(this.imgArr.length!=9){
							// 		this.imgArr.push(this.$http + res.data.src);
							// 	}
							// 	if(num==tempImg.length){
							// 		this.$toolAll.tools.showToast('上传成功(*^▽^*)')
							// 	} else {
							// 		this.$toolAll.tools.showToast('上传中...')
							// 	}
							// },error=>{})
					}
				})
			},
			// 预览图片
			previewImageEv(current){
				let arr = [];
				// 不能滑动看其他的图片
				this.imgList.forEach((item,index)=>{
					if(current==index) arr.push(item);
				})
				if(arr.length) {
					uni.previewImage({
						current:current,
						urls: arr,
						success() {}
					})
				} else {
					this.$toolAll.tools.showToast('无内容...')
				}
			}
		}
	}
</script>

<style>

</style>