myjtp/pages/certificate/apply.vue

<template>
	<view class="box">
		<view class="information">
			<view class="list">
				<view class="lable">姓名</view>
				<input class="input" type="text" v-model="list.name" placeholder="请输入您的姓名" />
			</view>
			<view class="list">
				<view class="lable">性别</view>
				<picker class="picker" mode="selector" :range="typeList" range-key='name' @change="changeType">
					<view class="pickertext">{{typeList[list.gender].name}}</view>
				</picker>
				<image class="image-next" mode="widthFix" src="@/static/img/jt.png"></image>
			</view>
			<view class="list">
				<view class="lable">身份证号</view>
				<input class="input" type="text" v-model="list.idcard" placeholder="请输入您的身份证号" />
			</view>
			<view class="list">
				<view class="lable">岗位职业：</view>
				<picker class="picker" mode="selector" :range="jobsList" range-key='cert_name' @change="changeJob">
					<view class="pickertext" v-if="jobsList.length>0">{{jobsList[jobChecked].cert_name}}</view>
					<view class="pickertext" v-else>加载中</view>
				</picker>
				<image class="image-next" mode="widthFix" src="@/static/img/jt.png"></image>
			</view>
		</view>
		<view class="img margin-t-30 padding-v-30 padding-c-30">
			<view class="padding-b-30">证件照片（一寸照）</view>
			<view class="photo" @click='pic'>
				<img :src="list.photo" v-if="list.photo" />
				<img src="@/static/img/k.png" v-else>
			</view>
		</view>
		<view class="button" @click="submit">
			提交审核
		</view>
	</view>
</template>

<script>
	import {
		cert,
		certApply,
		uploads,
		getJobsList
	} from '@/api/certificate.js'
	import {
		getUserInfo
	} from '@/api/login.js'
	export default {
		data() {
			return {
				jobsList:[],
				jobChecked:0,//默认选中的对象
				list: {
					name: '', //姓名
					gender: 0, //性别
					idcard: '', //身份照
					job: '', //工作
					photo: '', //照片
				},
				typeList: [{
					type: 0,
					name: '男'
				}, {
					type: 1,
					name: '女'
				}],
			}
		},
		onLoad() {
			getUserInfo();
			this.getJobsList();
		},
		methods: {
			//职业变更
			changeJob(re){
				this.jobChecked = re.detail.value;
				this.list.job = this.jobsList[this.jobChecked].cert_name
			},
			//加载职业
			getJobsList(){
				getJobsList( ).then(res => {
					this.jobsList = res.data.data;
					this.list.job = this.jobsList[0].cert_name
				}).catch(res => {
					console.log(res)
				})
			},
			// 修改
			changeType(res) {
				this.list.gender = res.detail.value;
			},
			//提交
			submit() {
				const that = this;
				const data = this.list;
				if (!data.name) {
					uni.showModal({
						title: '错误提示',
						content: '请输入姓名',
						showCancel: false,
					});
					return
				}
				if (!data.idcard) {
					uni.showModal({
						title: '错误提示',
						content: '请输入身份证号',
						showCancel: false,
					});
					return
				}
				if (!data.job) {
					uni.showModal({
						title: '错误提示',
						content: '请输入工作职业',
						showCancel: false,
					});
					return
				}
				if (!data.photo) {
					uni.showModal({
						title: '错误提示',
						content: '请上传证件照片',
						showCancel: false,
					});
					return
				}
				uni.showLoading({
					title: '提交中',
					mask: true
				});
				certApply(
					data
				).then(res => {
					console.log(res)
					uni.hideLoading()
					// 初始化提交
					that.list = {
						name: '', //姓名
						gender: 0, //性别
						idcard: '', //身份照
						job: '', //工作
						photo: '', //照片
					};
					uni.showModal({
						title: '提示',
						content: '已提交成功请耐心等待审核通过',
						showCancel: false,
					});
				}).catch(res => {
					uni.hideLoading()
					console.log(res)
				})
			},
			//图片预览
			pic() {
				const that = this
				uploads().then(
					(res) => {
						that.list.photo = res[0].url;
					}
				).catch((e) => {
					console.log(e);
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	body {
		background-color: #f3f3f3;
	}

	.box {
		padding: 30rpx;
	}

	.information {
		background-color: #fff;
		border-radius: 20rpx;
		font-size: 30rpx;
	}

	.list {
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: solid 1rpx #f3f3f3;
		padding: 30rpx;

		.picker {
			flex-grow: 1;
			.pickertext{
				font-size: $font-base;
				color: rgb(128, 128, 128) ;
			}
		}

		.lable {
			width: 150rpx;
			flex-shrink: 0;
		}

		.input {
			width: calc(100% - 20rpx);
			font-size: 28rpx;
		}

		.image-next {
			width: 20rpx;
		}
	}

	.img {
		font-size: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;

		img {
			width: 160rpx;
		}
	}

	.photo {
		width: 160rpx;
		height: 160rpx;
	}

	.button {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		text-align: center;
		color: #fff;
		background-color:rgba(246, 84, 134, 1);
		font-size: 30rpx;
		height: 100rpx;
		line-height: 100rpx;
	}

	.pickerAddress {
		margin-top: 20rpx;
		padding-left: 5rpx;
	}

	.pickerColor {
		color: #808080;
	}
</style>