nzhbsr/pages/user/authrz.vue

<template>
	<view class="content">
		<view class="">
			<view class="" style="padding: 50rpx 30rpx;font-size: 50rpx;">
				實名認證
			</view>
			<view class=""
				style="width: 720rpx;height: 80rpx;background-color: #fff;margin: auto;line-height: 80rpx;padding:0 10rpx;border-radius: 20rpx;font-size: 26rpx;">
				完成實名認證後能夠獲得相應的權益
			</view>
			<view class=""
				style="width: 720rpx;height: 80rpx;background-color: #fff;margin: auto;line-height: 80rpx;padding:0 10rpx;border-radius: 20rpx;font-size: 26rpx;">
				高級實名
			</view>
		</view>
		<view class="up-wrap">
			<view class="up-tit">
				姓名
			</view>
			<input type="text" v-model="nickname" placeholder="請輸入姓名" class="cardinp">
			<view class="up-tit">
				身份證號碼
			</view>
			<input type="text" v-model="card" placeholder="請輸入身份證號碼" class="cardinp">
			<view class="up-tit">
				上傳身份證正面
			</view>
			<view class="up-img" @click="upcardzm()">
				<image :src="cardzmt" mode="heightFix" v-if="cardzmt"></image>
				<image src="../../static/img/flower.png" mode="heightFix" v-else></image>
			</view>
			<view class="up-tit">
				上傳身份證背面
			</view>
			<view class="up-img"  @click="upcardfm()">
				<image :src="cardfmt" mode="heightFix" v-if="cardfmt"></image>
				<image src="../../static/img/flower.png" mode="heightFix" v-else></image>
			</view>
			
		</view>
		<view class="up-btn" @click="upauthrz()">
			高級提交
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	import {
		upauthrz,
		upimg,
		getUser
	} from '@/api/login.js'
	import { upload } from '@/api/wallet.js'
	export default {
		data() {
			return {
				nickname: '',
				card: '',
				cardzm: '',
				cardzmt: '',
				cardfm: '',
				cardfmt: '',
			}
		},
		onLoad() {
			this.getUser()
		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			...mapMutations('user',['setUserInfo']),
			getUser() {
				let obj = this
				getUser().then(res => {
					console.log(res)
					let data = res.data
					this.setUserInfo(res.data)
					if(res.data.name) {
						obj.nickname = data.name
						obj.cardzm = data.cardzm
						obj.cardzmt = data.http + data.cardzm
						obj.cardfm = data.cardfm
						obj.cardfmt = data.http + data.cardfm
						obj.card = data.zhengjian
					}
				})
			},
			upcardzm() {
				upload({
					filename: ''
				}).then(data => {
					console.log('data', data);
					this.cardzm = data[0].img;
					this.cardzmt = data[0].src;
				});
			},
			upcardfm() {
				upload({
					filename: ''
				}).then(data => {
					console.log('data', data);
					this.cardfm = data[0].img;
					this.cardfmt = data[0].src;
				});
			},
			upauthrz() {
				let obj = this
				if(obj.nickname == '') {
					return obj.$api.msg('請輸入姓名')
				}
				if(obj.card == '') {
					return obj.$api.msg('請輸入身份證')
				}
				if(obj.cardzm == '') {
					return obj.$api.msg('請上傳身份證正面')
				}
				if(obj.cardfm == '') {
					return obj.$api.msg('請上傳身份證反面')
				}
				upauthrz({
					cardzm: obj.cardzm,
					cardfm: obj.cardfm,
					nickname: obj.nickname,
					card: obj.card
				}).then(res => {
					uni.showToast({
						title: '提交成功',
						duration: 2000,
						position: 'top'
					});
				})
			}
		}
	}
</script>

<style lang="scss">
	.up-wrap {
		width: 720rpx;
		// height: 860rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin: 30rpx auto;
		padding: 20rpx;
		font-size: 32rpx;

		.up-tit {
			height: 80rpx;
			line-height: 80rpx;
		}
		.up-img {
			height: 240rpx;
			margin-top: 20rpx ;
			image {
				height: 200rpx;
				display: block;
				margin: auto;
			}
		}
		
	}
	.cardinp {
		display: inline-block;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #f5f5f5;
		border-radius: 20rpx;
		padding-left: 20rpx;
	}
	.up-btn {
		margin: 20rpx auto 0;
		width: 680rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #000;
		font-size: 28rpx;
		background:linear-gradient(to left,#eeb80d,#ffe35b);
		border-radius: 20rpx;
	}
</style>