flying-monkey/pagesB/electronic-certificate/electronic-certificate.vue

<template>
	<view>
		<status-nav navBarTitle="电子证件" returnColor="#c2c2c2"></status-nav>
		<container-subgroup>
			<view slot="content">
				<view class="mar-s20 mar-zy10" style="box-shadow: 0rpx 0rpx 20rpx rgba(0,0,0,.3);">
					<view class="bacf" style="padding: 4rpx;border-radius: 30rpx;">
						<view class="electronic-head disjcac fc">
							<image src="/static/public/icon-electronic-logo.png" mode="widthFix" lazy-load style="width: 347rpx;height: 85rpx;"></image>
							<view class="colf fon52 mar-sx30" style="letter-spacing: 6rpx;">ID：{{userId}}</view>
							<image class="mar-s10 electronic-userImg" :src="userImg || '/static/deleteImg/flying-img06.png'" mode="aspectFill"></image>
						</view>
						<view class="pad-s140 mar-s30 disjcac fc">
							<view class="col3 fon68">{{userName}}</view>
							<view class="fon32 col6 mar-sx30">{{userContent}}</view>
							<view class="fon22 col3 tcenter line-h36" style="margin: 60rpx 0 60rpx 0;">
								<view v-if="userPhone">+86 {{userPhone}}</view>
								<view>{{userEmail}}</view>
								<view>{{website}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</container-subgroup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userImg:'',//用户头像
				userId:'',//用户id
				userName:'',//用户昵称
				userContent:'',//用户单位
				userPhone:'',//用户电话
				userEmail:'',//用户邮箱
				website:''//用户网址
			}
		},
        onLoad() {
            this.getEletronic()
        },
		methods: {
			getEletronic(){
                this.$requst.get('/universal/api.user/electronic_badge').then(res=>{
                	if(res.code){
						let userData = res.data;
						if(userData.avatar) {
							this.userImg = userData.avatar;
						}
						this.userId = userData.id;//用户id
						this.userName = userData.name;//用户昵称
						this.userContent = userData.affiliation;//用户单位
						this.userPhone = userData.phone;//用户电话
						this.userEmail = userData.email;//用户邮箱
						this.website = userData.website;//用户网址
                    
                	}
                })
            }
		}
	}
</script>

<style>
.electronic-userImg{width: 258rpx;height: 258rpx;border-radius: 100%;margin-bottom: -130rpx;border: 6rpx solid #edf1ff;background-color: #edf1ff;}
</style>