acupuncture/大唐会议前台1/pages/index/index.vue

<template>
	<view class="box">
		<image class="back" src='../../imgs/back.png' mode="widthFix" @click='handleBack'></image>
		<image class="logo" src='../../imgs/logo.png' mode="widthFix" ></image>
		<view class="box-cent">
			<view class="box-cent1">
				<view class="view-box" v-for="(item, index) in listData" :key="index">
					<view style="text-align: center;">
						<span class="view-title"> {{item.dateTitle}}</span>
					</view>
					<view class="view-ul">
						<view class="view-li" v-for="(row, rind) in item.meetingList" :key="rind"
							>
							<span @click="handleItemClaick(item,row)">{{rind + 1}}. {{row.title}}</span>
						</view>
					</view>
				</view>
				<view v-if="!listData.length" class="view-none"> 暂无会议 </view>
			</view>
			<u-modal v-if="show" :show="show" @cancel="show = false" :showCancelButton="true" content='是否确认退出登录？' @confirm="handleOut"></u-modal>
		</view>
		<!-- 底部背景图 -->
		<view class="view-backimg">
			<view class="view-backimg-top"></view>
			<view class="view-backimg-bottom"></view>
		</view>
		<!-- 头像 - 头像 -->
		<view class="avatarobx">
			<image class="avatar" src='../../imgs/tx.png' mode="widthFix" ></image>
			<view class="name">{{userName}}</view>
			<view class="view-out" @click="show = true">退出登录</view>
		</view>
		
	</view>
</template>

<script>
	import {
		queryMeeting,
		meetingDetails
	} from "@/common/api";
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				listData: [],
				userName: uni.getStorageSync("userName"),
				show: false
				
			};
		},
		created() {
			this.getQueryMeeting() //获取会议列表
		},
		methods: {
			// logo 回到首页
			handleBack() {
				// uni.navigateTo({
				// 	url: `/pages/user/login`,
				// });
				uni.navigateBack({
					delta: 1
				});
			},
			// 退出登录
			handleOut(){
				uni.clearStorage();
				uni.reLaunch({
					url: '/pages/user/login',
				});
			},
			// logo 回到首页
			handleLogo(){
				uni.navigateTo({
					url: `/pages/index/index`,
				});
			},
			// 查看详情
			handleItemClaick(_item, _row) {
				// enable false 不可查看详情
				if (!_item.enable) return
				uni.navigateTo({
					url: `/pages/index/details?id=${_row.id}`,
				});
			},
			// 获取验证码
			async getQueryMeeting() {
				const res = await queryMeeting({
					param: {}
				});
				const {
					code,
					data,
					msg
				} = res;
				if (code === 200) {
					this.listData = data
				}
			},
		},
		// 页面显示调用接口
		onLoad() {},
	};
</script>

<style lang="scss" scoped>
	
	/deep/ .u-modal__content{
		text-align: center;
	}
	.view-box{
		margin-top:50px ;
	}
	
	.view-none{
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 40px !important;
	}
	.view-ul {
		text-align: left;
		margin-bottom: 16px;

		.view-li {
			span{
				font-size: 20px;
				line-height: 40px;
			}
			
		}
	}

	.view-title {
		display: inline-block;
		border: 1px solid #000;
		padding: 0 14px;
		margin-bottom: 30px;
		line-height: 50px;
		border-radius: 6px;
		font-size: 20px;
		font-weight: bold;
	}

	.box {
		height: 100vh;
		background-size: cover;
		box-sizing: border-box;
		padding: 20px 100px;
		display: flex;
		flex-direction: column;

		.box-cent {
			flex: 1;
			margin-top: 70px;
			position: relative;
		}

		.box-cent1 {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			overflow: auto;
		}
	}
</style>
<style></style>