hjt_erdao_WeChatApplet/pages/soldier/user/erweima.vue

<template>
	<view class="add main-bg">
		<view class="header">
			<view class="title font-color3 font-thirty-two">军人唯一识别码</view>
			<view class="img">
				<image class="image" :src="data"></image>
			</view>
			<view class="text">
				<view class="time font-thirty-two font-color4">本码有效期: 5分钟</view>
				<view class="obtain font-thirty-two font-color2" @click="getImg(userInfo.userId, userInfo.type)">重新获取</view>
			</view>
		</view>
	</view>
</template>

<script>
import server from "@/api/index";
export default {
	data() {
		return {
			userInfo: {},
			data: ''
		}
	},
	onLoad() {
		this.userInfo = uni.getStorageSync('userInfo');
		this.getImg(this.userInfo.userId, this.userInfo.type);
	},
	methods:{
		getImg(id, type){
			console.log('id', id)
			server.getUserQrCode(id,type).then(res=>{
				console.log(res)
				this.data = res
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	.add{
		width: 100%;
		height: auto;
		min-height: 100vh;
		padding: 30rpx 30rpx 30rpx;
	}
	.header{
		margin-top: 30rpx;
		height: 655rpx;
		width: 100%;
		background: #FFF;
		border-radius: 24rpx;
		// position: relative;
		.title{
			height: 165rpx;
			line-height: 165rpx;
			letter-spacing: 2rpx;
			width: 100%;
			text-align: center;
			font-weight: 600;
		}
		.img{
			width: 400rpx;
			height: 400rpx;
			margin: 0 auto;
			position: relative;
			.image{
				width: 400rpx;
				height: 400rpx;
				border-radius: 24rpx;
				position: absolute;
				top: 0rpx;
				left: 0rpx;
			}
		}
		.text{
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			height: 30rpx;
			line-height: 30rpx;
			.time{
				padding-left: 30rpx;
			}
			.obtain{
				padding-right: 30rpx;
				letter-spacing: 2rpx;
				font-weight: 600;
				text-align: right;
			}
		}
	}
</style>