concrete-transportation-uniapp-20250821/pages/index/index.vue

<template>
	<view class="page">
		<view class="content">
			<!-- 顶部导航栏 -->
			<view class="banner sticky">
				<view :class="['head-div', isSticky && 'iooo', isSticky && 'box-shadow-light']">
					<view class="flex">
						<view>
							<uv-icon name="location" size="22" color="#333"></uv-icon>
						</view>
						<view>{{ area }}</view>
						<view @click="showRoleSelector">
							<uv-icon name="arrow-down" size="16" color="#333"></uv-icon>
						</view>
					</view>
				</view>
				
				<!-- 角色切换按钮 -->
				<view class="role-switch-container">
					<view class="role-switch-btn" @click="showRoleSelector">
						<text class="role-text">{{ currentRoleText }}</text>
						<uv-icon name="arrow-down" size="14" color="#666"></uv-icon>
					</view>
				</view>
			</view>
			
			<!-- banner图片 -->
			<view class="banner-div">
				<image style="width:690rpx;height:268rpx;border-radius:10rpx" src="/static/re/banner.png"></image>
			</view>
			
			<!-- 公告栏 -->
			<view class="notify-div flex" @click="clickNotify">
				<view class="mr10">
					<uv-icon name="volume" size="24" color="#666"></uv-icon>
				</view>
				<view class="ellipsis">公告：{{ notice.content || '砼聚人平台全新上线，欢迎大家使用！' }}</view>
			</view>
			
			<!-- 主要内容 -->
			<view class="content-div">
				<view class="font-title mt32">砼聚人小程序全新上线啦</view>
				<view class="font-subtitle m20">深度开放共创共赢</view>
				<view class="description">
					砼聚人平台隶属于长沙市砼聚人科技有限公司，平台专注于为混凝土行业的设备提供灵活用工（现主营业务为泵车，车载泵，搅拌车提供代驾服务），致力于解决行业用工成本及用工风险的行业痛点，帮助客户降低成本，提升市场竞争力。同时，提升泵车操作手应有的技术价值，实现工作自由度高，劳动强度低，收入高，结算快的未来工作场景，我们的梦想是，让行业的兄弟活得更有尊严
				</view>
				
				<!-- 入驻按钮 -->
				<view class="flex m20 font-botton">
					<view class="flex" style="width:50%" @click="clickDriver">
						<image src="/static/re/ideic3.png" class="square40 mr10" />
						<view style="line-height:40rpx">泵司入驻</view>
					</view>
					<view class="flex" style="width:50%" @click="clickEnter">
						<image src="/static/re/ideic4.png" class="square40 mr10" />
						<view style="line-height:40rpx">企业入驻</view>
					</view>
				</view>
				
				<!-- 描述文字和图片 -->
				<view class="description-with-image">
					随着疫情到来，全民进入消费降级时代，行业进入寒冬，许多企业面临困境并关闭。然而，在这个
					<image style="float:right;width:480rpx;height:378rpx" src="/static/re/ide1.png"></image>
					挑战中，人们开始重视居家生活质量和健康，促进了需求量上升。行业逐渐适应新常态，加强线上销售和定制服务，不断创新和改进产品。逆境中孕育机遇，希望新的一年能带来行业的复苏和发展。
				</view>
				
				<!-- 统计数据 -->
				<view class="flex m36">
					<view class="flex" style="width:50%">
						<image src="/static/re/ideic1.png" class="square80 mr10" />
						<view>
							<view style="line-height:60rpx;font-size:60rpx;color:#F40000;font-weight:bolder">{{ num1 || '1000+' }}</view>
							<view style="line-height:20rpx;font-size:20rpx;color:#aaa">企业入驻</view>
						</view>
					</view>
					<view class="flex" style="width:50%">
						<image src="/static/re/ideic2.png" class="square80 mr10" />
						<view>
							<view style="line-height:60rpx;font-size:60rpx;color:#F40000;font-weight:bolder">{{ num2 || '5000+' }}</view>
							<view style="line-height:20rpx;font-size:20rpx;color:#aaa">司机入驻</view>
						</view>
					</view>
				</view>
				
				<!-- 视频介绍 -->
				<view @click="clickVideo">
					<view class="m10">更多精彩更在视频介绍：</view>
					<video style="width:690rpx;height:1272rpx" :src="videoUrl" :autoplay="true"></video>
				</view>
			</view>
		</view>

		<tabber select="home" />
		
		<!-- 身份切换浮窗 -->
		<view class="role-float-btn" @click="showRoleModal">
			<uv-icon name="man" size="24" color="#fff"></uv-icon>
		</view>
		
		<!-- 角色选择组件 -->
		<role-selector ref="roleSelector" @roleChanged="onRoleChanged"></role-selector>
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import roleSelector from '@/components/config/roleSelector.vue'
	import { mapState, mapGetters, mapMutations } from 'vuex'
	
	export default {
		components: {
		tabber,
		roleSelector,
	},
		data() {
				return {
					area: '长沙',
					isSticky: false,
					num1: '1000+',
					num2: '5000+',
				notice: {
					content: '砼聚人平台全新上线，欢迎大家使用！'
				},
				leftIcon: false,
				rightIcon: false,
				videoUrl: 'https://relief.oss-cn-hangzhou.aliyuncs.com/home.mp4'
				}
			},
			computed: {
				...mapState(['role']),
				...mapGetters(['currentRoleText'])
			},
		onShow() {
				this.loadData();
				// 初始化角色
				this.initRole();
				// 监听滚动实现粘性导航
				const intersectionObserver = uni.createIntersectionObserver(this);
				intersectionObserver.relativeToViewport({ top: 0 }).observe('.banner-div', (res) => {
					if (res.intersectionRatio <= 0) {
						this.isSticky = true;
					} else {
						this.isSticky = false;
					}
				});
				
				// 获取存储的地区信息
				this.area = uni.getStorageSync('area') || '长沙';
				
				// 监听角色变更事件
				uni.$on('roleChanged', (newRole) => {
					console.log('角色已变更为:', newRole);
				});
			},
		methods: {
			...mapMutations(['initRole']),
			// 点击公告
			clickNotify() {
				uni.navigateTo({ url: '/pages_order/base/notify' });
			},
			// 泵司入驻
			clickDriver() {
				uni.navigateTo({ url: '/pages_order/login/driver' });
			},
			// 企业入驻
			clickEnter() {
				uni.navigateTo({ url: '/pages_order/login/enter' });
			},
			// 加载数据
			loadData() {
				// 模拟加载统计数据
				setTimeout(() => {
					this.num1 = '1200+';
					this.num2 = '5800+';
				}, 1000);
			},
			// 点击视频
				clickVideo() {
					console.log('点击视频');
				},
				// 显示角色选择器
				showRoleSelector() {
					this.$refs.roleSelector.open();
				},

				// 显示身份切换弹窗
				showRoleModal() {
					this.$refs.roleSelector.open();
				},
				// 处理角色变更事件
				onRoleChanged(newRole) {
					console.log('角色已变更为:', newRole);
				},

		}
	}
</script>

<style scoped lang="scss">
	body {
		background-color: #FFF;
	}
	
	.iooo {
		background-color: #FFF;
	}
	
	.banner {
		width: 100vw;
		height: 344rpx;
		background: radial-gradient(200% 100% at 49% 0%, rgba(205, 0, 0, 0.2) 0%, rgba(233, 244, 252, 0) 100%);
	}
	
	.head-div {
		width: 690rpx;
		height: 88rpx;
		padding: 88rpx 30rpx 0rpx;
		line-height: 88rpx;
		font-size: 32rpx;
		color: #000000;
	}
	
	.banner-div {
		width: 690rpx;
		height: 260rpx;
		margin: -160rpx auto 10rpx;
	}
	
	.notify-div {
		width: 690rpx;
		margin: 30rpx auto 10rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		color: #1C1C1C;
	}
	
	.content-div {
		width: 690rpx;
		margin: 0 auto;
		margin-top: 10rpx;
		font-size: 28rpx;
		line-height: 52rpx;
		color: rgba(51, 51, 51, 0.85);
	}
	
	.font-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.font-subtitle {
		font-size: 28rpx;
		color: #666;
	}
	
	.font-botton {
		font-size: 28rpx;
		color: #333;
	}
	
	.description {
		text-align: justify;
		line-height: 1.6;
	}
	
	.description-with-image {
		text-align: justify;
		line-height: 1.6;
		margin: 20rpx 0;
	}
	
	.flex {
		display: flex;
		align-items: center;
	}
	
	.flex-sb {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.mr10 {
		margin-right: 10rpx;
	}
	
	.m20 {
		margin: 20rpx 0;
	}
	
	.m36 {
		margin: 36rpx 0;
	}
	
	.mt32 {
		margin-top: 32rpx;
	}
	
	.square40 {
		width: 40rpx;
		height: 40rpx;
	}
	
	.square80 {
		width: 80rpx;
		height: 80rpx;
	}
	
	.ellipsis {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.box-shadow-light {
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.m10 {
		margin: 10rpx 0;
	}
	
	.role-switch-container {
		position: absolute;
		top: 20rpx;
		right: 30rpx;
		z-index: 10;
	}
	
	.role-switch-btn {
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		background-color: rgba(255, 255, 255, 0.9);
		border-radius: 30rpx;
		border: 1rpx solid #e0e0e0;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.role-text {
		font-size: 24rpx;
		color: #333;
		margin-right: 8rpx;
	}
	
	.role-float-btn {
		position: fixed;
		bottom: 200rpx;
		right: 30rpx;
		width: 100rpx;
		height: 100rpx;
		background: linear-gradient(135deg, #007AFF 0%, #0056CC 100%);
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 20rpx rgba(0, 122, 255, 0.3);
		z-index: 999;
		transition: all 0.3s ease;
		
		&:active {
			transform: scale(0.95);
			box-shadow: 0 4rpx 10rpx rgba(0, 122, 255, 0.2);
		}
	}
	

</style>