<template>
	<view class="container">
		<view class="hero">
			<image src="/static/logo.png" 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="service-list">
				<view class="service-item" v-for="(item, index) in services" :key="index">
					{{ item }}
				</view>
			</view>
		</view>

		<view class="footer">
			<text>秦皇岛安尔然营销策划有限公司</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		Login
	} from "@/api"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	const services = ['营销策划', '会议服务', '商务咨询', '庆典服务', '礼仪服务']

	const gotoAbout = () => {
		uni.navigateTo({
			url: '/pages/about'
		})
	}
	const handleLogin = async () => {
		try {
			// 1. 调用微信登录接口获取 code
			const res = await wx.login()
			if (res.code) {
				// 2. 将 code 发送给后端
				 console.log(res.code)
				 Login({
				 	code: res.code
				 }).then(res => {
				 	if (res.status) {
				 	 if(res.data.member!==null && res.data.url!==null){
						 uni.navigateTo({
						 	url:'/pages/h5?url='+res.data.url
						 })
					 }
				 	}
				 })
			} else {
				console.error('登录失败', res.errMsg)
			}
		} catch (error) {
			console.error('登录异常', error)
		}
	}
	onLoad(()=>{
		handleLogin()
	})
</script>

<style scoped>
	.container {
		padding: 20rpx;
		background: #fff;
		box-sizing: border-box;
		/* 关键！ */

		height: 100vh;
	}

	.hero {
		text-align: center;
		padding: 80rpx 40rpx;
		background: linear-gradient(to bottom, #1a365d, #2c5282);
		color: white;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
	}

	.logo {
		width: 180rpx;
		height: 180rpx;
		margin-bottom: 30rpx;
		border-radius: 50%;
		background: white;
		padding: 10rpx;
	}

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

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

	.btn {
		background: #3b82f6;
		color: white;
		border: none;
		padding: 16rpx 60rpx;
		border-radius: 50rpx;
		font-size: 32rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}

	.service-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.service-item {
		background: #f1f5f9;
		padding: 20rpx 55rpx;
		border-radius: 16rpx;
		font-size: 28rpx;
		color: #1e293b;
	}

	.footer {
		text-align: center;
		margin-top: 60rpx;
		color: #94a3b8;
		font-size: 24rpx;
		position: absolute;
		bottom: 60rpx;
		width: 100%;
		text-align: center;
	}
</style>