security_study_h5/center/center.vue

<template>
	<view class="pages">
		<!-- <u-navbar
			title="我的"
			:placeholder="true"
			:autoBack="true"
			 :safeAreaInsetTop="true"
		>
		</u-navbar> -->
		<view class="top u-flex">
			<view class="userinfo u-flex">
				<img class="defaultavatar" src="../static/img/defaultavatar.png" alt="">
				<view class="text">
					<view class="name">{{vuex_member_info.name}}</view>
					<view class="dept">
						<text>{{vuex_member_info.dept}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="page-wrap">
			<view class="tool-wrap">
				<u-cell-group :border="false">
					<u-cell
					    title="积分获取记录"
					    value=""
					    center
						:isLink="true"
						:border="true"
						icon="/static/img/center-icon-1.png"
						url="/center/addcredits"
						:customStyle="cellCustomStyle"
					></u-cell>
					<u-cell
					    title="积分兑换记录"
					    value=""
					    center
						:isLink="true"
						:border="true"
						icon="/static/img/center-icon-2.png"
						url="/center/minuscredits"
						:customStyle="cellCustomStyle"
					></u-cell>
				    <u-cell
				        title="修改密码"
				        value=""
				        center
						:isLink="true"
						:border="true"
						icon="/static/img/center-icon-3.png"
						url="/center/resetpass"
						:customStyle="cellCustomStyle"
				    ></u-cell>
					<u-cell
					    title="退出登录"
					    value=""
					    center
						:isLink="true"
						:border="true"
						@click="logOut"
						icon="/static/img/logout.svg"
						:customStyle="cellCustomStyle"
					></u-cell>
				</u-cell-group>
			</view>
		</view>
		<tabbar :tabbarIndexProps='2' />
	</view>
</template>

<script>
	import { systemInfo } from "@/mixin.js";
	import tabbar from "../components/tabbar.vue";
	export default {
		components:{
			tabbar
		},
		mixins:[systemInfo],
		data() {
			return {
				staticUrl:this.$commonConfig.staticUrl,
				memberInfo:{},
				cellCustomStyle:{
					'background-color':'#fff',
					'border-radius':'8rpx',
					'margin-bottom':'14rpx',
				}
			}
		},
		onShow() {
			this.getMemberInfo()
		},
		onLoad() {
			this.getSystemInfo();
		},
		methods: {
			getMemberInfo(){
				this.$u.api.memberInfo({id:this.vuex_member_info.id}).then(res=>{
					this.memberInfo = res.data;
					this.$u.vuex('vuex_member_info', res.data);
					}).catch(err=>{
					console.log('memberInfo',err.data);
				})
			},
			logOut(){
				this.$u.vuex('vuex_user_info', {});
				this.getMemberInfo()
			}
		}
	}
</script>
<style>
page{
	background-color: #fff;
}
</style>
<style lang="scss" scoped>
.top{
	color: #fff;
	height: 280rpx;
	background: url(../static/img/center-bg.png) no-repeat;
	background-size: 100% 100%;
	position: relative;
	padding: 50rpx 30rpx;
	box-sizing: border-box;
	align-items: end;
	.userinfo{
		text-align: left;
		.defaultavatar{
			width: 110rpx;
			height: 110rpx;
		}
		.text{
			margin-left: 32rpx;
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 36rpx;
			.name{
				font-size: 34rpx;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 48rpx;
				margin-bottom: 8rpx;
			}
		}
	}
}
.tool-wrap{
	margin-top: 20rpx;
	/deep/ .u-cell__body{
		padding-left: 0;
	}
}
</style>