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>
			<view class="up-img" @click="upcardzm()">
				<image :src="cardzmt" mode="heightFix" v-if="cardzm"></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="cardfm"></image>
				<image src="../../static/img/flower.png" mode="heightFix" v-else></image>
			</view>
			<view class="up-btn" @click="upauthrz()">
				高級提交
			</view>
		</view>
	</view>
</template>

<script>
	import {
		upauthrz,
		upimg
	} from '@/api/login.js'
	import { upload } from '@/api/wallet.js'
	export default {
		data() {
			return {
				cardzm: '',
				cardzmt: '',
				cardfm: '',
				cardfmt: '',
			}
		},
		onLoad() {

		},
		onShow() {

		},
		onReachBottom() {

		},
		onReady() {

		},
		methods: {
			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.cardzm == '') {
					return obj.$api.msg('請上傳身份證正面')
				}
				if(obj.cardfm == '') {
					return obj.$api.msg('請上傳身份證反面')
				}
				upauthrz({
					cardzm: obj.cardzm,
					cardfm: obj.cardfm
				}).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;
			}
		}
		.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>