创建uniapp基础形态

2026-07-15 17:39:10 +08:00
parent 743c5cb4eb
commit 11e0763766
22 changed files with 5311 additions and 43 deletions
@@ -0,0 +1,451 @@
+<template>
+
+	<view class="page">
+
+		<view class="page-header">
+
+			<text class="page-title">功能中心</text>
+
+			<text class="page-desc">探索更多精彩功能</text>
+
+		</view>
+
+
+
+		<view class="main-scroll">
+
+			<view class="feature-banner" @tap="onBannerTap">
+
+				<view class="banner-content">
+
+					<text class="banner-title">新功能上线</text>
+
+					<text class="banner-desc">AI 智能助手，效率翻倍</text>
+
+				</view>
+
+				<view class="banner-btn">立即体验</view>
+
+			</view>
+
+
+
+			<view class="category" v-for="cat in categories" :key="cat.title">
+
+				<text class="category-title">{{ cat.title }}</text>
+
+				<view class="feature-grid">
+
+					<view
+
+						class="feature-card"
+
+						v-for="item in cat.items"
+
+						:key="item.name"
+
+						@tap="onFeatureTap(item)"
+
+					>
+
+						<view class="feature-icon">
+
+							<FaIcon :name="item.icon" color="#3c9cff" :size="22" />
+
+						</view>
+
+						<text class="feature-name">{{ item.name }}</text>
+
+						<text class="feature-desc">{{ item.desc }}</text>
+
+					</view>
+
+				</view>
+
+			</view>
+
+
+
+			<view class="bottom-space" />
+
+		</view>
+
+
+
+		<AppTabbar current="features" />
+
+	</view>
+
+</template>
+
+
+
+<script setup>
+
+import { ref, onMounted } from 'vue'
+
+import { isLoggedIn } from '@/utils/auth.js'
+
+import AppTabbar from '@/components/AppTabbar.vue'
+
+
+
+const categories = ref([
+
+	{
+
+		title: '常用工具',
+
+		items: [
+
+			{ name: '扫一扫', desc: '快速识别', icon: 'qrcode' },
+
+			{ name: '收付款', desc: '便捷支付', icon: 'coins' },
+
+			{ name: '卡包', desc: '优惠券', icon: 'ticket' },
+
+			{ name: '出行', desc: '交通服务', icon: 'car' }
+
+		]
+
+	},
+
+	{
+
+		title: '生活服务',
+
+		items: [
+
+			{ name: '外卖', desc: '美食到家', icon: 'bag-shopping' },
+
+			{ name: '电影', desc: '在线购票', icon: 'film' },
+
+			{ name: '酒店', desc: '预订住宿', icon: 'hotel' },
+
+			{ name: '更多', desc: '发现更多', icon: 'ellipsis' }
+
+		]
+
+	},
+
+	{
+
+		title: '办公效率',
+
+		items: [
+
+			{ name: '文档', desc: '在线协作', icon: 'file-lines' },
+
+			{ name: '日历', desc: '日程管理', icon: 'calendar-days' },
+
+			{ name: '云盘', desc: '文件存储', icon: 'folder' },
+
+			{ name: '会议', desc: '视频会议', icon: 'video' }
+
+		]
+
+	}
+
+])
+
+
+
+onMounted(() => {
+
+	if (!isLoggedIn()) {
+
+		uni.reLaunch({ url: '/pages/login/login' })
+
+	}
+
+})
+
+
+
+function onBannerTap() {
+
+	uni.showToast({ title: 'AI 智能助手', icon: 'none' })
+
+}
+
+
+
+function onFeatureTap(item) {
+
+	uni.showToast({ title: item.name, icon: 'none' })
+
+}
+
+</script>
+
+
+
+<style lang="scss" scoped>
+
+.page {
+
+	height: 100vh;
+
+	background: #ffffff;
+
+	display: flex;
+
+	flex-direction: column;
+
+	overflow: hidden;
+
+}
+
+
+
+.page-header {
+
+	flex-shrink: 0;
+
+	padding: calc(var(--status-bar-height, 44px) + 24rpx) 40rpx 24rpx;
+
+}
+
+
+
+.page-title {
+
+	display: block;
+
+	font-size: 40rpx;
+
+	font-weight: 600;
+
+	color: $u-primary;
+
+}
+
+
+
+.page-desc {
+
+	display: block;
+
+	font-size: 26rpx;
+
+	color: $u-primary-disabled;
+
+	margin-top: 6rpx;
+
+}
+
+
+
+.main-scroll {
+
+	flex: 1;
+
+	min-height: 0;
+
+	overflow-y: auto;
+
+	-webkit-overflow-scrolling: touch;
+
+	padding: 0 40rpx;
+
+}
+
+
+
+.feature-banner {
+
+	background: #ffffff;
+
+	border: 2rpx solid #e8f0f8;
+
+	border-radius: 16rpx;
+
+	padding: 32rpx 28rpx;
+
+	display: flex;
+
+	justify-content: space-between;
+
+	align-items: center;
+
+	margin-bottom: 48rpx;
+
+
+
+	&:active {
+
+		border-color: $u-primary-disabled;
+
+	}
+
+}
+
+
+
+.banner-title {
+
+	display: block;
+
+	font-size: 30rpx;
+
+	font-weight: 600;
+
+	color: $u-primary;
+
+}
+
+
+
+.banner-desc {
+
+	display: block;
+
+	font-size: 24rpx;
+
+	color: $u-primary-disabled;
+
+	margin-top: 8rpx;
+
+}
+
+
+
+.banner-btn {
+
+	padding: 14rpx 28rpx;
+
+	background: #ffffff;
+
+	border: 2rpx solid #e8f0f8;
+
+	border-radius: 16rpx;
+
+	font-size: 24rpx;
+
+	color: $u-primary;
+
+	font-weight: 500;
+
+}
+
+
+
+.category {
+
+	margin-bottom: 48rpx;
+
+}
+
+
+
+.category-title {
+
+	display: block;
+
+	font-size: 30rpx;
+
+	font-weight: 600;
+
+	color: $u-primary;
+
+	margin-bottom: 24rpx;
+
+}
+
+
+
+.feature-grid {
+
+	display: grid;
+
+	grid-template-columns: 1fr 1fr;
+
+	gap: 20rpx;
+
+}
+
+
+
+.feature-card {
+
+	background: #ffffff;
+
+	border: 2rpx solid #e8f0f8;
+
+	border-radius: 16rpx;
+
+	padding: 28rpx;
+
+
+
+	&:active {
+
+		border-color: $u-primary-disabled;
+
+	}
+
+}
+
+
+
+.feature-icon {
+
+	width: 80rpx;
+
+	height: 80rpx;
+
+	border-radius: 20rpx;
+
+	background: #ffffff;
+
+	border: 2rpx solid #e8f0f8;
+
+	display: flex;
+
+	align-items: center;
+
+	justify-content: center;
+
+	margin-bottom: 16rpx;
+
+}
+
+
+
+.feature-name {
+
+	display: block;
+
+	font-size: 28rpx;
+
+	font-weight: 600;
+
+	color: $u-primary;
+
+}
+
+
+
+.feature-desc {
+
+	display: block;
+
+	font-size: 22rpx;
+
+	color: $u-primary-disabled;
+
+	margin-top: 4rpx;
+
+}
+
+
+
+.bottom-space {
+
+	height: 40rpx;
+
+}
+
+</style>
+
+