front/pages/main.vue

<template>
	<view class="container bg-main pos-r">
		<view class="padding-xl dflex-c dflex-flow-c">
			<!-- Logo -->
			<view class="headimg-box margin-top margin-bottom-xl" style="width: 120px; height: 120px;">
				<image class="headimg border-radius-c" :src="logo"
					style="width: 100%; height: 100%; object-fit: cover;" />
			</view>

			<!-- 标题 -->
			<view class="fs-xl fw-bold margin-bottom-sm">{{name}}</view>

			<!-- 简介 -->
			<view class="ft-dark margin-bottom-xxl tac">
				{{info}}
			</view>

			<!-- 加载中 -->
			<view v-if="loading" class="dflex-c dflex-flow-c margin-top-xl">
				<text class="fs ft-dark margin-bottom-sm">亲爱的~欢迎您回来...</text>
				<view class="loading-spinner"></view>
			</view>

			<view v-else class="w-full" style="margin-top:40rpx;">
				<view class="dflex margin-bottom">
					<view class="iconfont iconmima margin-right"></view>
					<view class="dflex flex1 border-line">
						<input class="padding-sm flex1" type="text" v-model="code" :focus="true"
							placeholder="请输入访问码进入系统" @focus="inputType = 'password'" autocomplete="new-password"
							autocorrect="off" spellcheck="false" />

						<view class="pos-r" @click="show">
							<view class="vertical-line" style="right: calc(100% + 9px);"></view>
							<view class="padding-tb-sm ft-dark">不知道？</view>
						</view>
					</view>
				</view>

				<!-- 登录按钮 -->
				<view class="w-full margin-top-xxl">
					<view class="dflex-b border-radius-lg">
						<u-button text="进入" type="error" :disabled="loading" :loading="loading" @tap="entry"></u-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import config from '@/lib/dever/config.js'
	export default {

		data() {
			return {
				name: '',
				place: '',
				info: '',
				logo: '',
				code: '',
				jump: '',
				loading: false
			}
		},
		onLoad(query) {
			if (query.scene) {
				let scene = decodeURIComponent(query.scene)
				query.code = scene
			}
			if (query.jump) {
				this.jump = query.jump;
			}
			if (query.code) {
				this.code = query.code;
			}
			this.place = query.p;
		},
		onShow() {
			if (this.code) {
				return this.entry()
			}
			this.init(this.place)
		},
		methods: {
			init(place) {
				if (place) {
					this.DeverApi.setCode(place);
				}
				place = this.DeverApi.getCode();
				if (place) {
					this.loading = true;
					this.loadData()
				} else {
					this.loading = false;
					this.DeverApi.get(this, 'version', {}, res => {
						this.logo = res.logo
						this.name = res.name
						this.info = res.info
						if (res.code) {
							this.code = res.code;
							this.entry()
						} else if(!this.place && !this.code && config.base.code) {
							this.code = config.base.code
							this.entry()
						}
					});
				}
			},
			async loadData() {
				this.$config = this.Dever.upConfig(true);
				this.$config.then(config => {
					this.logo = config.l
					this.name = config.n
					this.info = config.i
					uni.setNavigationBarTitle({
						title: this.name
					});
					if (this.jump) {
						this.Dever.data('jump', this.jump);
					}
					this.Dever.goTabbar(config.m, 0)
				});
			},
			show() {
				this.Dever.alert('这个访问码是私密的哦，请先联系您的主理人吧');
			},
			entry() {
				if (!this.code) {
					return this.Dever.alert('请输入正确访问码');
				}
				this.DeverApi.post('code', {
					code: this.code
				}, res => {
					if (res.jump) {
						this.jump = res.jump;
					}
					this.init(res.code)
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f4f4f4;
	}

	.container {
		padding-top: 15vh;
		width: 100vw;
		min-height: 100vh;
		overflow: hidden;
	}

	.headimg-box {
		image {
			width: 130rpx;
			height: 130rpx;
			border: 5rpx solid #fff;
		}
	}

	/* 简单 Loading 动画 */
	.loading-spinner {
		width: 40rpx;
		height: 40rpx;
		border: 4rpx solid #ccc;
		border-top-color: #409eff;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>