h5-uniapp/pages/my/safety/real_tow.vue

<template>
	<view :style="'background-color: '+theme.bg+';color: '+theme.text" style="height: 100vh;">
		<myNav :title="i18n.mine.safety.type2"></myNav>
		
		<view v-if="auth_status==0" class="width-100b padding-30">
			<view class="color-white font-26 padding-16 radiu-10">{{description}}</view>
		</view>
		
		<view class="padding-b-40">
			<view class="width-100b height-76 line-height-76 padding-w-45">
				<text class="font-30 bold-font">{{i18n.mine.safety.zm}}</text>
			</view>
			<view class="flex align-center justify-center padding-w-45 padding-c-20">
				<view @click="chooseImage('card_image')" style="width: 620rpx;height: 320rpx;position: relative;">
					<image :src="card_image" style="width: 620rpx;height: 320rpx;border-radius: 15rpx;"></image>
					<view v-if="card_image=='/static/imgs/my/zhengmian.png'" class="width-500 height-150 absolute flex direction-column align-center" style="left: 50%;margin-left: -250rpx;top: 50%; margin-top: -75rpx;">
						<image class="width-70 height-70" src="/static/imgs/my/add@2x.png" mode=""></image>
						<text class="font-30 color-0165EE margin-t-20">{{i18n.mine.safety.click}}</text>
					</view>
				</view>
			</view>
			<view class="width-100b height-76 line-height-76 padding-w-45">
				<text class="font-30 bold-font">{{i18n.mine.safety.fm}}</text>
			</view>
			<view class="flex align-center justify-center padding-w-45 padding-c-20">
				<view @click="chooseImage('cardbm_image')" style="width: 620rpx;height: 320rpx; position: relative;">
					<image :src="cardbm_image" style="width: 620rpx;height: 320rpx;border-radius: 15rpx;"></image>
					<view v-if="cardbm_image=='/static/imgs/my/beimian.png'" class="width-500 height-150 absolute flex direction-column align-center" style="left: 50%;margin-left: -250rpx;top: 50%; margin-top: -75rpx;">
						<image class="width-70 height-70" src="/static/imgs/my/add@2x.png" mode=""></image>
						<text class="font-30 color-0165EE margin-t-20">{{i18n.mine.safety.click}}</text>
					</view>
				</view>
			</view>
		</view>
		
		<button @click="real" class="cu-btn loginBtn" :disabled="auth_status==1||auth_status==2">{{auth_Btn}}</button>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				auth_status:3,//审核状态:1=审核成功,2=审核中,3=未提交 0=失败
				description:'',//失败原因
				
				flag:true,
				
				card_image:"/static/imgs/my/zhengmian.png",
				card_upload:"",
				cardbm_image:"/static/imgs/my/beimian.png",
				cardbm_upload:"",
				
				theme: '',
			}
		},
		onLoad() {
			this.appAuth()
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			},
			auth_Btn() {
				let str;
				switch (this.auth_status) {
					case 1:
						str = this.i18n.mine.safety.type3
						break;
					case 2: 
						str = this.i18n.mine.safety.shenhe
						break;
					case 3:
						str = this.i18n.mine.safety.tijiao
						break;
					case 0:
						str = this.i18n.mine.safety.tijiao
						break;
					default:
						str = this.i18n.mine.safety.tijiao
						break;
				}
				return str
			},
		},
		methods: {
			chooseImage(e) {
				if(this.auth_status==1||this.auth_status==2) return
				let self = this
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						if(e=="card_image"){
							self.card_image = tempFilePaths[0]
						}else{
							self.cardbm_image = tempFilePaths[0]
						}
						uni.showLoading()
						uni.uploadFile({
							url: this.upload +'/publics/image_upload',
							filePath: tempFilePaths[0],
							name: 'file',
							success: (res) => {
								let data = JSON.parse(res.data)
								uni.hideLoading()
								if (data.code == 1) {
									// console.log(data)
									if(e=="card_image"){
										self.card_upload = data.data.url
									}else{
										self.cardbm_upload = data.data.url
									}
								}
							}
						})
					}
				})
			},
			appAuth() {
				this.post('/my/auth_con').then(res => {
					console.log('实名回显',res)
					if (res.code == 1) {
						if(res.data.auth_high != null){
							this.auth_status = res.data.auth_high.status
							this.description = res.data.auth_high.description
							
							this.card_image = res.data.auth_high.card_images
							this.card_upload = res.data.auth_high.card_image
							
							this.cardbm_image = res.data.auth_high.cardbm_images
							this.cardbm_upload = res.data.auth_high.cardbm_image
						}
					}
				})
			},
			real() {
				if(!this.flag) return
				if(this.card_upload == ''){
					this.tos(this.i18n.mine.safety.zm)
					return
				}
				if(this.cardbm_upload == ''){
					this.tos(this.i18n.mine.safety.fm)
					return
				}
				this.flag = false
				this.post('/my/auth_high',{
					card_image:this.card_upload,
					cardbm_image:this.cardbm_upload
				},true).then(res => {
					this.flag = true
					console.log('实名提交',res)
					if (res.code == 1) {
						this.tos(res.msg)
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},500)
					}
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.loginBtn {
		width: 600rpx;
		height: 96rpx;
		background: #0165EE !important;
		border-radius: 12rpx;
		line-height: 96rpx;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		position: absolute;
		bottom: 5%;
		left: 50%;
		margin-left: -300rpx;
	}
</style>