HuiSuo-QhdAnErRan/xiaochengxu/pages/index/index.vue

<template>
	<view class="container">
		<!-- Hero 区域 -->
		<view class="hero">
			<image src="/static/logo2.jpg" class="logo" mode="aspectFit" />
			<text class="title">秦皇岛昌黎铂悦养生</text>
			<text class="subtitle">铂悦因你而精彩</text>
			<button class="btn" @click="gotoAbout">了解更多</button>
		</view>

		<!-- 服务标签区域（仅展示，非交互） -->
		<view class="section">
			<text class="section-title">我们的服务</text>
			<view class="tag-list">
				<text class="tag" v-for="(item, index) in services" :key="index">{{ item }}</text>
			</view>
		</view>

		<!-- 功能入口模块（可点击） -->
		<view class="action-section">
			<text class="section-title">咨询预约</text>
			<view class="action-list">
				<view class="action-item" @click="gotoShangWuZiXun">📞 商务咨询</view>
				<view class="action-item" @click="gotoYuYue">📅 预约服务</view>
			</view>
		</view>

		<!-- 联系我们模块 -->
		<view class="contact-section">
			<button class="contact-btn" @click="lianxi">联系我们</button>
		</view>

		<!-- 页脚 -->
		<view class="footer">
			<text>秦皇岛昌黎铂悦养生</text>
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { Login } from '@/api'

// 服务标签（仅展示）
const services = ['商务合作', '会议服务', '商务洽谈', '家庭影院']

// 页面跳转方法
const gotoAbout = () => {
	uni.navigateTo({ url: '/pages/about' })
}

const lianxi = () => {
	uni.navigateTo({ url: '/pages/contact' })
}

const gotoYuYue = () => {
	uni.navigateTo({ url: '/pages/yuyue_form' })
}

const gotoShangWuZiXun = () => {
	uni.navigateTo({ url: '/pages/ShangWuZiXun' })
}

// 登录逻辑（保留原逻辑）
const handleLogin = async () => {
	try {
		const res = await wx.login()
		if (res.code) {
			Login({ code: res.code }).then(res => {
				if (res.status) {
					uni.setStorageSync('openid', res.data.openid)
					if (res.data.member !== null && res.data.member!==undefined && res.data.url !== null && res.data.url !== undefined) {
						let url= res.data.url+'&openid='+ res.data.openid
						console.log(url)
						uni.navigateTo({ url:'/pages/h5?url=' +url })
					}
				}
			})
		} else {
			 
		}
	} catch (error) {
		 
	}
}

onLoad(() => {
	handleLogin()
})
</script>

<style scoped>
.container {
	padding: 20rpx;
	background: #f9fafb;
	box-sizing: border-box;
	min-height: 100vh;
}

/* Hero 区域 */
.hero {
	text-align: center;
	padding: 80rpx 40rpx;
	background: linear-gradient(135deg, #1e40af, #3182ce);
	color: white;
	border-radius: 24rpx;
	margin-bottom: 50rpx;
	box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
}

.logo {
	width: 180rpx;
	height: 180rpx;
	margin-bottom: 30rpx;
	border-radius: 50%;
	background: white;
	padding: 12rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
}

.title {
	font-size: 48rpx;
	font-weight: bold;
	display: block;
	margin: 20rpx 0;
	line-height: 1.3;
}

.subtitle {
	font-size: 32rpx;
	opacity: 0.95;
	display: block;
	margin-bottom: 40rpx;
}

.btn {
	background: #ffffff;
	color: #1e40af;
	border: none;
	padding: 18rpx 60rpx;
	border-radius: 50rpx;
	font-size: 32rpx;
	font-weight: bold;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
	transition: transform 0.2s;
}
.btn:active {
	transform: scale(0.96);
}

/* 标题通用样式 */
.section-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #1e293b;
	display: block;
	text-align: center;
	margin-bottom: 24rpx;
}

/* 服务标签 - 真正的 tag 风格 */
.tag-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16rpx;
	padding: 0 20rpx;
}

.tag {
	background-color: #e0e7ff; /* 浅蓝底 */
	color: #4f46e5;             /* 主色文字 */
	font-size: 24rpx;
	padding: 8rpx 24rpx;
	border-radius: 50rpx;      /* 大圆角 */
	line-height: 1;
	white-space: nowrap;
	user-select: none;         /* 禁止选中 */
}

/* 功能入口模块 */
.action-section {
	margin-top: 50rpx;
}

.action-list {
	display: flex;
	justify-content: center;
	gap: 30rpx;
	flex-wrap: wrap;
}

.action-item {
	background: linear-gradient(135deg, #4f46e5, #6366f1);
	color: white;
	font-size: 28rpx;
	font-weight: bold;
	padding: 24rpx 40rpx;
	border-radius: 18rpx;
	text-align: center;
	min-width: 220rpx;
	box-shadow: 0 6rpx 16rpx rgba(79, 70, 229, 0.3);
	transition: transform 0.2s;
}

.action-item:active {
	transform: scale(0.96);
}

/* 联系我们按钮 */
.contact-section {
	text-align: center;
	margin: 50rpx 0;
}

.contact-btn {
	background: linear-gradient(135deg, #3b82f6, #1d4ed8);
	color: white;
	border: none;
	padding: 20rpx 70rpx;
	border-radius: 50rpx;
	font-size: 32rpx;
	font-weight: bold;
	box-shadow: 0 6rpx 16rpx rgba(59, 130, 246, 0.4);
	transition: transform 0.2s, box-shadow 0.2s;
}
.contact-btn:active {
	transform: scale(0.97);
	box-shadow: 0 4rpx 12rpx rgba(59, 130, 246, 0.3);
}

/* 页脚 */
.footer {
	text-align: center;
	margin-top: 40rpx;
	color: #64748b;
	font-size: 24rpx;
	padding-bottom: 40rpx;
}
</style>