datang-meeting/大唐会议前台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">
			<view class="name">{{ userName }}</view>
			<!-- <image @click='handleBack' class="avatar" src='../../imgs/arrow-left.png' mode="widthFix"></image> -->
			<image
				@click="show = true"
				class="avatar"
				src="../../imgs/out.png"
				mode="widthFix"
			></image>
		</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(); //获取会议列表
	},
	onShow() {
		this.userName = uni.getStorageSync('userName');
		console.log('this.userName', this.userName);
	},
	methods: {
		// logo 回到首页
		handleBack() {
			uni.navigateTo({
				url: `/pages/user/login`,
			});
			// uni.navigateBack({
			// 	delta: 1
			// });
		},
		// 退出登录
		handleOut() {
			uni.clearStorage();
			uni.reLaunch({
				url: '/pages/user/login',
			});
		},
		// 查看详情
		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>
::v-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>