nzhbsr/pages/user/authrz.vue

<template>
	<view class="content">
		<view class="">
			<view class="" style="padding: 50rpx 30rpx;font-size: 50rpx;">{{ $t('smrz.smrz') }}</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;">
				{{ $t('smrz.wcsmrz') }}
			</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;">
				{{ $t('smrz.gjsm') }}
			</view>
		</view>
		<view class="up-wrap">
			<view class="up-tit">{{ $t('smrz.xm') }}</view>
			<input type="text" v-model="nickname" :placeholder="$t('smrz.qsrxm')" class="cardinp" />
			<view class="up-tit">{{ $t('smrz.sfzhm') }}</view>
			<input type="text" v-model="card" :placeholder="$t('smrz.sfzhm')" class="cardinp" />
			<view class="up-tit">{{ $t('smrz.scsfzzm') }}</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">{{ $t('smrz.scsfzfm') }}</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()">{{ $t('smrz.gjtj') }}</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(this.$t('smrz.qsrxm'));
			}
			if (obj.card == '') {
				return obj.$api.msg(this.$t('smrz.qsrsfz'));
			}
			if (obj.cardzm == '') {
				return obj.$api.msg(this.$t('smrz.qscsfzzm'));
			}
			if (obj.cardfm == '') {
				return obj.$api.msg(this.$t('smrz.qscsfzfm'));
			}
			upauthrz({
				cardzm: obj.cardzm,
				cardfm: obj.cardfm,
				nickname: obj.nickname,
				card: obj.card
			}).then(res => {
				uni.showToast({
					title: this.$t('smrz.tjcg'),
					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>