dangfei-weapp/pages/index/index.vue

<template>
	<view>
		<nav-bar></nav-bar>
		<view>
			<image class="indexHeader" src="/static/index_hader.png"></image>
		</view>
		<view class="content">
			<view class="userBox">
				<view @click="toNavigator('/pages/reviseUserInfo/reviseUserInfo',1)">
					<open-data type="userAvatarUrl" class="userImg"></open-data>
				</view>
				<view class="right" v-if="haveUserInfo">
					<view>
						<text class="userName">{{userinfo.name ? userinfo.name : ''}}</text>
					</view>
						<text class="cre_num">档案号: <text class="userTeam">{{userinfo.cre_num ? userinfo.cre_num : ''}}</text></text>
						<text>所&emsp;属:<text class="userTeam">{{userinfo.teamname ? userinfo.teamname : '无团队'}}</text></text>
				</view>
			</view>
			<view class="msgBox">
				<image class="msgTitle" src="/static/msg_title.png"></image>
				<swiper v-if="msgList.length>0"
					class="msgContent"
					:indicator-dots="swiper.indicatorDots" 
					:autoplay="swiper.autoplay" 
					:interval="swiper.interval" 
					:duration="swiper.duration"
					:vertical="swiper.vertical"
				>
					<swiper-item class="swiper-item">
						<navigator v-for="item in msgList" v-bind:key="item.id" :url="`/pages/msgInfo/msgInfo?id=${item.id}`">
							<text class="messageInfo">{{item.title}}</text>
						</navigator>
					</swiper-item>
				</swiper>
				<text v-else class="msgContent">暂无公告信息</text>
				<view @click="toNavigator('/pages/msgList/msgList')">
					<image class="msgTitle2" src="/static/msg_title_2.png"></image>
				</view>
			</view>
			<view class="routerBox">
				<view class="router_item" @tap="toNavigator('/pages/pay/pay')">
					<image class="router_item_img" src="/static/router_1.jpg"></image>
				</view>
				<view class="router_item" @tap="toNavigator('/pages/payList/payList')">
					<image class="router_item_img" src="/static/router_2.jpg"></image>
				</view>
				<view class="router_item" @tap="toNavigator('/pages/promise/promise')">
					<image class="router_item_img" src="/static/router_3.jpg"></image>
				</view>
				<view class="router_item" @tap="toNavigator('/pages/team/team')">
					<image class="router_item_img" src="/static/router_4.jpg"></image>
				</view>
				<view class="router_item" @tap="toNavigator('/pages/help/help')">
					<image class="router_item_img" src="/static/router_5.jpg"></image>
				</view>
				<view class="router_item" @tap="toNavigator('/pages/feedback/feedback')">
					<image class="router_item_img" src="/static/router_6.png"></image>
				</view>
			</view>
		</view>
		<auth
			ref="authDialog"
			@closeAuth="closeAuth" 
		>
		</auth>
	</view>
</template>

<script>
	import Auth from "../../components/Auth.vue"

	import { getToken, messageList,userInfo } from "../../api/index.js"
	
	import { mapState } from "vuex"
	
	export default {
		data() {
			return {
				msgList:[],
				msg:"",
				authType:false,
				swiper:{
					indicatorDots: false,
					autoplay: true,
					interval: 2000,
					duration: 500,
					vertical: true
				},
				haveUserInfo: false
			}
		},
		components:{
			Auth
		},
		computed:{
			...mapState(["userinfo"])
		},
		onShareAppMessage(res) {
		    return {
		      title: '723缴费小程序',
		      path: '/pages/index/index'
		    }
		},
		created(){
			const that=this
			uni.$on("haveUserInfo",()=>{
				that.haveUserInfo=true
			})
		},
		async onLoad(){
			const that=this
			uni.showLoading()
			const [,{code}]=await uni.login()
			getToken({
				code
			}).then(g_res=>{
				uni.hideLoading()
				// 存在cert 证明没有认证
				if(g_res.cert){
					const { cert,openid }=g_res
					that.$store.commit("change_openid",openid);
					that.$refs.authDialog.handleOpen()
					
					// 是否认证,是否确认团队
					uni.setStorage({
						key:"isSure",
						data:0
					})
					
				}else{
					if(uni.getStorageSync("isSure")){
						that.$refs.authDialog.handleSure()
						that.$refs.authDialog.handleTeam()
						that.$refs.authDialog.handleOpen()
					}else{
						const { token,openid } = g_res
						that.$store.commit("change_token",token);
						that.$store.commit("change_openid",openid);
						uni.setStorage({
							key:"token",
							data:token
						})
						setTimeout(()=>{
							that.$store.dispatch("getUser");
							that.getMessageList()
						},123)
					}
				}
				
			}).catch(e=>{
				uni.hideLoading()
			})
		},
		methods: {
			// 获取公告信息
			getMessageList(){
				const that=this
				messageList({
					page_index:1,
					page_size:1
				}).then(res=>{
					try{
						const {data} = res
						that.msgList=data
					}catch(e){
						that.msgList=[]
					}
					
				})
			},
			// 跳转
			toNavigator(url,type=0){
				const that=this
				
				this.$store.commit('CHANGE_UPDATEUSER',true)
				that.$store.dispatch("getUser");
				
				if(type==0){
					if(!that.userinfo.team_id || that.userinfo.team_id===0){
						uni.showToast({
							title:"请联系您的队长,添加团队",
							icon:"none"
						})
						
						return false;
					}
				}
				
				uni.getStorage({
					key:"token",
					success:function(res){
						if(res){
							uni.navigateTo({
								url
							})
						}else{
							that.authType = false
							that.$refs.authDialog.handleOpen()
						}
					},
					fail:function(){
						that.authType = false
						that.$refs.authDialog.handleOpen()
					}
				})
			
			}
		}
	}
</script>
<style lang="scss">
	page{
		width: 100%;
		height: 100%;
		background: $uni-bg-color-normal;
	}
	.indexHeader{
		display: block;
		width: 100%;
		height: 248rpx;
	}
	.content{
		width: 661rpx;
		margin: 0 auto;
	}
	.userBox{
		width: 100%;
		height: 169rpx;
		background-color: $uni-bg-color;
		border-radius: 4px;
		margin-top: -60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		color: #4D4D4D;
		
		.right{
			width: calc(100% - 96rpx - 66rpx);
			display: flex;
			justify-content: space-between;
			// align-items: flex-start;
			flex-direction: column;
			
			.userName{
				margin-right: 33rpx;
				font-weight: bolder;
				color: #1971F2;
				font-size: 30rpx;
				margin-bottom: 5rpx;
				display: block;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			.info{
				height: 86rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				font-size: 26rpx;
				padding: 5rpx 0;
			}
		}
	}
	.userImg{
		display: block;
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		border: 2px solid #BFBFBF;
		margin-left: 33rpx;
		margin-right: 33rpx;
		overflow: hidden;
	}
	.userTeam{
		margin-left: 25rpx;
		display: inline-block;
	}
	.msgBox{
		width: calc(100% - 44rpx);
		height: 100rpx;
		background-color: $uni-bg-color;
		margin: 38rpx 0 55rpx 0;
		display: flex;
		align-items: center;
		padding: 0 22rpx;
	}
	.msgTitle{
		display: block;
		width: 59rpx;
		height: 28rpx;
	}
	.msgTitle2{
		display: block;
		width: 72rpx;
		height: 35rpx;
	}
	.msgContent{
		width: calc(100% - 161rpx - 1px);
		padding: 0 15rpx;
		font-size: 26rpx;
		color: #4D4D4D;
		overflow:hidden;
		text-overflow:ellipse;
		display:flex;
		align-items: center;
		justify-content: space-between;
		height: 100rpx;
	}
	.msgContent::after{
		content: "";
		display: block;
		width: 1px;
		height: 60rpx;
		background: url(../../static/msg_border_left.png);
		background-size: cover;
	}
	.routerBox{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		width: 100%;
	}
	.router_item{
		width: 180rpx;
		height: 180rpx;
		margin-bottom: 37rpx;
	}
	.router_item_img{
		width: 100%;
		height: 100%;
	}
	.router_item:nth-of-type(2),.router_item:nth-of-type(5){
		margin: 0 55rpx;
	}
	.swiper-item{
		line-height: 100rpx;
	}
	.messageInfo{
		display: block;
		white-space:nowrap;
		height: 100rpx !important;
		width: 100%;
		overflow: hidden ; 
		text-overflow:ellipsis;
	}
</style>