myjtp/pages/apply/personalInformation.vue

<template>
	<view class="">
	<view class="information">
		<view class="list">
			<view class="lable">姓名：</view>
			<view class="input">
				<input type="text" v-model="list.name" placeholder="请输入姓名"/>
			</view>
		</view>
		<view class="list">
			<view class="lable">身份证：</view>
			<view class="input">
				<input type="text" v-model="list.id" placeholder="请输入身份证号"/>
			</view>
		</view>
		<view class="list">
			<view class="lable">联系方式：</view>
			<view class="input">
				<input type="text" v-model="list.phone" placeholder="请输入联系方式"/>
			</view>
		</view>
		<view class="list" @click="choose">
			<view class="lable">所在地区：</view>
			<view class="input">
				<pickerAddress class="pickerAddress" :class="{pickerColor: !location}" @change="onCityClick">{{location||'请选择地址'}}</pickerAddress>
			</view>
			<view><img src="@/static/img/jt.png" v-show="!location"></view>
		</view>
		<view class="list">
			<view class="lable">详细地址：</view>
			<view class="input">
				<input type="text" v-model="list.address" placeholder="请输入详细地址" />
			</view>
		</view>
		<view class="list">
			<view class="lable">职业：</view>
			<view class="input">
				<input type="text" v-model="list.occupation" placeholder="请输入职业"/>
			</view>
		</view>
		<view class="list">
			<view class="lable">职业年限：</view>
			<view class="input">
				<input type="text" v-model="list.careerYears" placeholder="请输入职业年限"/>
			</view>
		</view>
		<view class="list">
			<view class="lable">保荐人：</view>
			<view class="input">
				<input type="text" v-model="list.sponsor" placeholder="请输入保荐人"/>
			</view>
		</view>
	</view>
	<view class="img">
		<p>半身照</p>
		<!-- <input type="file" class="inputfile"  @change="changeImage"/> -->
		<view class="photo" @click="pic">
			<img :src="list.img" v-if="list.img"/>
			<img src="@/static/img/k.png" v-else>
		</view>
		
	</view>
	<view class="button" @click="submit" >
		提交申请
	</view>
</view>
</template>

<script>
import { apply,getPrice } from '../../api/apply.js'
import  pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
	export default {
		components: {
			pickerAddress
		},
		data() {
			return {
				list: {
					name: '', //姓名
					id: '', //身份证
					phone: '', //联系方式
					Location: '', //所在地区
					address: '', //详细地址
					occupation: '', //职业
					careerYears: '', //职业年限
					sponsor: '', //保荐人
					img: '', //半身照
					pay_type: 'weixin', //weixin：微信支付,yue：余额支付
					grade: '' //等级
				},
				province: '', //省
				city: '', //市
				area: '', //区
			}
		},
		computed: {
			location() {
				return  this.province + this.city + this.area
			}
		},
		methods: {
			//提交
			submit() {
				
			},
			//图片预览
			pic() {
				const that = this
				uni.chooseImage({
					success: function(res) {
						console.log(res.tempFilePaths[0])
						that.list.img = res.tempFilePaths[0]
					}
				})
			},
			// 选中城市切换
			onCityClick({data}) {
				this.province = data[0];
				this.city = data[1];
				this.district = data[2];
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}
	body {
		background-color: #f3f3f3;
	}
	.information {
		background-color: #fff;
		margin: 0 10rpx;
		padding: 0 40rpx;
		border-radius: 20rpx;
		font-size: 30rpx;
		margin-top: 30rpx;
	}
	.list {
		display: flex;
		border-bottom: solid 1rpx  #f3f3f3;
		.lable {
			padding: 20rpx;
			width: 200rpx;
		}
		img {
			padding-top: 26rpx;
			width: 0rpx;
			float: right;
		}
		.input {
			input {
				border: 0;
				width: calc(100% - 20rpx);
				font-size: 30rpx;
				padding: 20rpx;
			}
		}
	}
	.img {
		margin: 0 10rpx;
		font-size: 30rpx;
		background-color: #fff;
		padding: 0 24rpx;
		border-radius: 20rpx;
		height: 400rpx;
		margin: 0 10rpx;
		position: relative;
		p {
			padding: 20rpx;
		}
		img {
			width: 160rpx;
		}
	}
	.photo {
		width: 160rpx;
		height: 160rpx;
		margin: auto auto;
		position: absolute;
		left: calc(50% - 80rpx);
	}
	.button {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		text-align: center;
		color: #fff;
		background-color: #3b66f5;
		font-size: 30rpx;
		height: 100rpx;
		line-height: 100rpx;
	}
	.pickerAddress {
		margin-top: 20rpx;
		padding-left: 20rpx;
	}
	.pickerColor {
		color: #808080;
	}
</style>