tf-business-card/pages/index/index.vue

<template>
	<view class="index">
		<view class="contant">
			<view class="header" :style="{ marginTop: top + 'rpx' }">
				<view class="header-icon" @click="openDrawer">
					<image class="" src="@/static/catalogue_icon.png" />
				</view>
				<view class="header-title">团蜂电子名片</view>
			</view>
			<view class="main">
				<view class="card-list"></view>
				<view class="add-card" @click="addCard">
					<view class="card-icon">
						<tui-icon name="plus" :size="24" color="rgb(58, 143, 255)"></tui-icon>
					</view>
					<view class="card-text">新增名片</view>
				</view>
			</view>
			<button open-type="getPhoneNumber" @click="addCard" @getphonenumber="getPhone">点击事件</button>
		</view>
		<tui-drawer mode="left" :visible="visible" @close="closeDrawer">
			<view class="d-container" :style="{ marginTop: top + 'rpx' }">
				<view class="d-image">
					<image class="" src="@/static/header_image.png" />
					<text>摘星辰</text>
				</view>
				<view class="quit" @click="quitLogin">退出登录</view>
			</view>
		</tui-drawer>
	</view>
</template>

<script>
export default {
	data() {
		return {
			visible: false,
			top: null
		}
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				this.top = res.safeAreaInsets.top * 2
			}
		})
	},
	methods: {
		//  打开侧边弹框
		openDrawer() {
			this.visible = true
		},
		//  新增卡片
		addCard() {
			// #ifdef MP-WEIXIN
			wx.login({
				success: res => {
					console.log(res);
				}
			})
			// #endif
			uni.navigateTo({
				url: '/pages/establish/index',
			});
		},
		getPhone(e) {
			console.log(e);
		},
		// 退出登录
		quitLogin() {
			this.visible = false
		},
		//  关闭侧边弹框
		closeDrawer() {
			this.visible = false
		}
	}
}
</script>

<style lang="scss" scoped>
.index {
	min-height: 100vh;
	background-color: #f5f5f5;
	// @extend %securityTop;
	box-sizing: border-box;

	.contant {
		height: calc(100vh - env(safe-area-inset-bottom));
		box-sizing: border-box;
		background-color: #fff;

		.header {
			position: relative;
			width: 100%;
			height: 80rpx;

			.header-icon {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				left: 30rpx;

				image {
					width: 50rpx;
					height: 50rpx;
					display: block;
				}
			}

			.header-title {
				text-align: center;
				line-height: 80rpx;
				font-size: 32rpx;
			}
		}

		.main {
			padding: 20rpx 30rpx;

			.add-card {
				width: 100%;
				height: 200rpx;
				border: 1px solid #a3a3a3;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 20rpx;
				color: rgb(58, 143, 255);
				font-size: 30rpx;
			}
		}
	}

	.d-container {
		// @extend %securityTop;
		box-sizing: border-box;
		height: 100vh;
		width: 350rpx;
		background-color: #fff;

		.d-image {
			@include flex(center, column, 20rpx);
			padding: 35rpx 0;
			box-sizing: border-box;
			border-top: 1rpx solid #cccccc;
			border-bottom: 1rpx solid #cccccc;

			image {
				width: 100rpx;
				height: 100rpx;
				display: block;
				border-radius: 50%;
			}

			text {
				font-size: 28rpx;
			}
		}

		.quit {
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			font-size: 26rpx;
			border-bottom: 1rpx solid #cccccc;
		}
	}
}
</style>