更新

uniapp/pages/common/developing.vue

@@ -0,0 +1,119 @@
+<template>
+	<view class="page">
+		<view class="wrap">
+			<view class="icon-bg">
+				<FaIcon name="screwdriver-wrench" color="#2563eb" :size="44" />
+			</view>
+			<text class="title">功能开发中</text>
+			<text v-if="name" class="name">{{ name }}</text>
+			<text class="desc">该功能正在开发中，暂未开放使用，敬请期待</text>
+			<view class="btn" @tap="goBack">
+				<text class="btn-text">返回</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+
+const name = ref('')
+
+onLoad((options) => {
+	const raw = (options && options.t) || ''
+	try {
+		name.value = decodeURIComponent(raw)
+	} catch (e) {
+		name.value = raw
+	}
+	uni.setNavigationBarTitle({ title: name.value || '功能开发中' })
+})
+
+function goBack() {
+	const pages = getCurrentPages()
+	if (pages.length > 1) {
+		uni.navigateBack()
+	} else {
+		uni.reLaunch({ url: '/pages/nav/nav' })
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/src/styles/page-common.scss';
+
+.page {
+	height: 100vh;
+	background: $color-bg-page;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+}
+
+.wrap {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 20rpx;
+	padding: 0 80rpx;
+}
+
+.icon-bg {
+	width: 200rpx;
+	height: 200rpx;
+	border-radius: 50%;
+	background: $color-primary-bg;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: 0 16rpx 40rpx rgba(37, 99, 235, 0.16);
+}
+
+.title {
+	margin-top: 16rpx;
+	font-size: 36rpx;
+	font-weight: 600;
+	color: $color-text;
+}
+
+.name {
+	font-size: 28rpx;
+	font-weight: 500;
+	color: $color-primary;
+	word-break: break-all;
+	text-align: center;
+}
+
+.desc {
+	font-size: 26rpx;
+	color: $color-text-secondary;
+	text-align: center;
+	line-height: 1.6;
+}
+
+.btn {
+	margin-top: 32rpx;
+	min-width: 240rpx;
+	height: 84rpx;
+	padding: 0 40rpx;
+	border-radius: $radius-full;
+	background: $color-primary;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: 0 10rpx 24rpx rgba(37, 99, 235, 0.28);
+
+	&:active {
+		opacity: 0.9;
+	}
+}
+
+.btn-text {
+	font-size: 28rpx;
+	font-weight: 500;
+	color: #ffffff;
+}
+</style>