smart-app/pages/user/user.vue

<template>
	<view class="box">
		<scroll-view scroll-y="true" class="DrawerPage margin-bottom-xxxl">
			<!-- 顶部 -->
			<cu-custom bgColor="bg-blue" :isBack="false">
				<block slot="backText">我的</block>
				<block slot="content"></block>
				<block slot="right">
					<view class=" flex justify-center">
					<!-- 	<button class="margin-top-ssm cu-btn round bg-blue text-blue"><text class="cuIcon-add"></text></button> -->
					</view>
				</block>
			</cu-custom>
			<!-- 头像部分-->
			<view class="bg-blue" style="height: 360rpx;">
				<view style="text-align: center;">
					<image mode="aspectFill" class="cu-avatar round xl" v-if="userInfo.portrait!=null" :src="userInfo.portrait"></image>
					<image mode="aspectFill" v-else class="cu-avatar round xl" src="/static/information/defaultAvatar.png"></image>
				</view>
				<view class="flex justify-center">
					<view class="text-white text-xl">{{userInfo.account}} | {{roleName==undefined ? '自由用户':roleName }}</view>
				</view>
				<view class="flex justify-center" style="margin-top: 22rpx;">
					<view class="text-white text-sm" style="font-size: 26rpx;">{{userInfo.phone}}</view>
				</view>
			</view>
			<!-- 项目 、合同段 -->
			<view class="cu-list  card-menu shadowType" style="background-color: #C6E6FF;min-height: 236rpx;padding: 0 22rpx;position: relative;">
				<swiper class=" square-dot" @change="change" :autoplay="false" interval="5000"
				 duration="500">
					<swiper-item  v-for="(item,index) in projectList" :key="index" v-if="index<5">
						<view v-if="index==0">
							<view class="flex justify-start" style="height: 88rpx;display: flex;align-items: center;">
								<image class="login-img margin-right-sm" src="/static/index/currentProject.png"></image>
								<text class="text-lg margin-top-ssm" style="font-size: 30rpx;color:#0A8CD5;font-weight: bold;">当前项目</text>
							</view>
							<view class="dashedLine"></view>
							<view class="content " style="padding: 22rpx 0;">
								<view style="font-size: 34rpx;color:#101010;font-weight: bold;padding-bottom: 12rpx;">
									{{item.project_name}}
								</view>
								<view style="font-size: 30rpx;color:#101010;">
									{{item.contractName}}
								</view>
							</view>
						</view>
						<view v-else>
							<view class="flex justify-start" style="height: 88rpx;display: flex;align-items: center;">
								<image class="login-img margin-right-sm" src="/static/index/currentProject.png"></image>
								<text  class="text-lg margin-top-ssm" style="font-size: 30rpx;color:#0A8CD5;font-weight: bold;">近期项目</text>
							</view>
							<view class="dashedLine"></view>
							<view class="content " style="padding: 22rpx 0;">
								<view style="font-size: 34rpx;color:#101010;font-weight: bold;padding-bottom: 12rpx;">
									{{item.project_name}}
								</view>
								<view style="font-size: 30rpx;color:#101010;">
									{{item.contractName}}
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
				<swiper-dot style="position: absolute;right: 22rpx;top: 40rpx;" :current="current" :list="projectList"></swiper-dot>
			</view>
			
			<!-- 菜单-->
			<view class="cu-list grid bg-black" :class="['col-' + gridCol,gridBorder?'':'no-border']">
				<view class="cu-item" v-for="(item,index) in menuList" :key="index" @click="navTo(item.url)">
					<view>
						<image class="menuImage" :src="item.imageurl"></image>
						<view v-if="item.red" class="cu-tag badge bg-red" style="top: 18rpx;">
							
						</view>
					</view>
					<text style="font-size: 26rpx;color: #101010;">{{item.name}}</text>
				</view>
			</view>
			<view class="cu-list grid padding flex justify-center" style="margin-top: 0;">
				<button @click="loginOut" style="width: 500rpx;height: 88rpx;font-size: 30rpx;" class="cu-btn bg-blue lg round">退出登陆</button>
			</view>
		</scroll-view>
		<!-- 引入底部导航栏 -->
		<tabBar :pagePath="'/pages/user/user'"></tabBar>
	</view>
</template>

<script>
	import swiperDot from "@/components/swiperDot.vue"
	export default {
		components: {swiperDot},
		data() {
			return {
				menuList: [{
						name: "项目管理",
						icon: "form",
						color: "text-orange",
						url: "./project/project",
						imageurl: "/static/user/project.png"
					},
					{
						name: "我的填报",
						icon: "form",
						color: "text-orange",
						url: "/pages/myReport/myReport",
						imageurl: "/static/user/myReport.png"
					},
					{
						name: "离线文件",
						icon: "copy",
						color: "text-red",
						url: "/pages/offLine/offLine",
						imageurl: "/static/user/offline-file.png"
					},
					// {
					// 	name: "电子签名",
					// 	icon: "edit",
					// 	color: "text-pink",
					// 	url: "./signature/signature",
					// 	imageurl: "/static/user/signature.png"
					// },
					{
						name: "基本资料",
						icon: "writefill",
						color: "text-orange",
						url: "./update/update",
						imageurl: "/static/user/basic-nformation.png"
					},
					{
						name: "账号安全",
						icon: "mobile",
						color: "text-blue",
						url: "./account/account",
						imageurl: "/static/user/accountSecurity.png"
					},
					{
						name: "系统设置",
						icon: "mobile",
						color: "text-blue",
						url: "./about/about",
						imageurl: "/static/user/setting.png",
						red:this.tabberData.newVersion
					},
					/* ,
					{
						name: "树形展示",
						icon: "list",
						color: "text-blue",
						url: "/pages/tree/tree",
						imageurl: "/static/user/accountSecurity.png"
					}, */
				],
				userInfo: {
					portrait: "../../static/login/user.png",
					account: "张三",
					phone: "1312345678",
				},
				roleName: "",
				gridCol: 4,
				gridBorder: false,
				projectList: [],
				cardCur: 0,
				current:0,
			}
		},
		onLoad() {
			var userInfo = uni.getStorageSync("userInfo")
			if (userInfo != null) {
				this.userInfo = userInfo;
				this.roleName = uni.getStorageSync("porject"+"_"+uni.getStorageSync("userInfo").id).roleName;
			}
			//this.findProject();
		},
		onShow() {
			var userInfo = uni.getStorageSync("userInfo")
			if (userInfo != null) {
				this.userInfo = userInfo;
				this.roleName = uni.getStorageSync("porject"+"_"+uni.getStorageSync("userInfo").id).roleName;
			}
			this.findProject();
		},
		methods: {
			change(e) {
				this.current = e.detail.current;
			},
			navTo(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}else{
					this.$prompt.none("开发中");
				}
			},
			loginOut() {
				/* 清除缓存 */
				//uni.removeStorageSync('porject');
				uni.removeStorageSync('userInfo');
				uni.removeStorageSync('authorityList');
				uni.reLaunch({
					url: "/pages/user/login/login"
				})
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			findProject() {
				var that = this;
				that.projectList=[]
				var userInfo = uni.getStorageSync("userInfo")
				that.userInfo = userInfo;
				 that.http.request('/app/findProject', { userId: userInfo.id}).then((result)=>{
					 let lastData = [];
					 let datas = result.datas;
					 var project = uni.getStorageSync("porject"+"_"+uni.getStorageSync("userInfo").id);
					 if (project) {
					 	var id = project.id;
					 	datas.forEach((item, index, arry) => {
					 		if (item.id != id) {
					 			lastData.push(item); //存放没有选择的
					 		} else {
					 			that.projectList.push(item) //存放已选择的
					 		}
					 	})
					 }
					 lastData.forEach((item, index, arry) => {
					 	that.projectList.push(item);
					 })
				 })
				
			},
		}
	}
</script>

<style>
	page {
		background-color: white;
	}

	.menuImage {
		height: 90rpx;
		width: 90rpx;
	}

	.cu-list.grid>.cu-item uni-text {
		display: block;
		margin-top: 4px;
		color: black;
		font-size: 14px;
		line-height: 17px;
	}

	.shadowType {
		margin-top: -60rpx;
		-moz-box-shadow: 0px 1px 4px #D0D0D0;
		-webkit-box-shadow: 0px 1px 4px #D0D0D0;
		box-shadow: 0px 1px 4px #D0D0D0;
	}

	.card-swiper uni-swiper-item {
		width: 260px !important;
		left: 10px;
		box-sizing: border-box;
		padding: 17px 0px 29px;
		overflow: initial;
	}
	
	.login-img{
			 width: 60rpx;
			 height: 60rpx;
	}
	
	.dashedLine{
		box-sizing: border-box;
		width: 200%;
		height: 200%;
		border-bottom: 2rpx dashed #77caf9;
		border-radius: inherit;
		content: " ";
		transform: scale(.5);
		transform-origin: 0 0;
		pointer-events: none
	}
</style>