chuangte_bike_newxcx/pages/index/index.vue

<template>
	<view class="page">
		<u-navbar :is-back="false"  title="小鹿骑行" :border-bottom="false" back-icon-color="000" :background="bgc" title-color='#000' title-size='36'
			height='44'	id="navbar">
		</u-navbar>
		<view class="gonggao" @click="btntopgg">
			<u-icon name="volume-fill" color="#fff" style="position: absolute;left: 20rpx;" size="32"></u-icon>
			<view class="container">
			    <view class="scroll-text">
			      <view class="scroll-item">
			        {{announcements.noticeTitle == null ? '暂无最新公告！！！' : announcements.noticeTitle}}
			      </view>
			    </view>
			</view>
			<u-icon name="arrow-right" color="#fff" style="position: absolute;right: 10rpx;" size="32"></u-icon>
		</view>
		<!-- 公告弹窗 -->
		<view class="noticetc" v-if="gonggaoflag">
			<view class="name">
				公告
			</view>
			<view class="biaoti">
				{{gonggaoxq.noticeTitle}}
			</view>
			<!-- <view class="cont" v-html="gonggaoxq.noticeContent"></view> -->
			<u-parse :html="gonggaoxq.noticeContent" style="width: 100%;height: 620rpx;background-color: #efefef;padding: 10rpx;box-sizing: border-box;margin-top: 20rpx;"></u-parse>
			<view class="btn" @click="btnggtc">
				我知道了
			</view>
		</view>
		<view class="mask" v-if="gonggaoflag"></view>
		<!-- 地图 -->
		<view class="ditu">
			<map class='map' id="map" :latitude="latitude" :longitude="longitude" :show-location="true"  @click="btnzk"/>
			<image @click="btnzk" src="https://api.ccttiot.com/smartmeter/img/static/up0OxngKxP5JZ3hRLvCv" class="zk" mode=""></image>
			<view class="caozuo">
				<image @click="btnpage(1)" src="https://api.ccttiot.com/smartmeter/img/static/uAGgpuC9wi9lFXZFO35G" mode=""></image> <!-- 门店 -->
				<image @click="btnpage(2)" src="https://api.ccttiot.com/smartmeter/img/static/u4DUUUKIRR5HcB8uIkl4" mode=""></image> <!-- 订单 -->
				<image @click="btnpage(3)" src="https://api.ccttiot.com/smartmeter/img/static/unPEUv14mgsytgeis4Fx" mode=""></image> <!-- 车辆 -->
				<image @click="btnpage(4)" style="width: 150rpx;" src="https://api.ccttiot.com/smartmeter/img/static/uJPhQOQ3y97HIdcQVdGG" mode=""></image> <!-- 编码开锁 -->
			</view>
		</view>
		<view class="kuaijie">
			<image @click="btntiao(1)" src="https://api.ccttiot.com/smartmeter/img/static/uv1enMcgcD1PXvai0NLr" mode=""></image> <!-- 用车地图 -->
			<image @click="btntiao(2)" src="https://api.ccttiot.com/smartmeter/img/static/uPl5nHh3fRWmUSe5ii8J" mode=""></image> <!-- 使用帮助 -->
			<image @click="btntiao(3)" src="https://api.ccttiot.com/smartmeter/img/static/uoBQqFmav3wEjTWUYOyH" mode=""></image> <!-- 车辆故障 -->
			<image @click="btntiao(4)" src="https://api.ccttiot.com/smartmeter/img/static/ukIxiM6jWFYN9uvWKbDW" mode=""></image> <!-- 意见反馈 -->
			<image @click="btnkf" src="https://api.ccttiot.com/smartmeter/img/static/uCTFhZc3b7Jq0spcD0EC" mode=""></image> <!-- 客服 -->
		</view>
		<view class="guanggao">
			<!-- <image src="https://api.ccttiot.com/smartmeter/img/static/uTZBBRuyRexKd6c4VE9d" mode="aspectFill"></image> -->
			<u-swiper :list="lists" @click="btnshangjia"></u-swiper>
			<!-- <image src="https://api.ccttiot.com/smartmeter/img/static/uEMuO2M40WcExJVSprIy" class="kefu"  mode=""></image> -->
		</view>
		<view class="fujin">
			<view class="names">
				附近门店
			</view>
			<view class="list">
				<view class="list_item" v-if="false" v-for="(item,index) in 2" :key="index" @click="btnxq">
					<view class="top">
						<view class="name">
							云行租车（汇丰公寓）
						</view>
						<image src="https://api.ccttiot.com/smartmeter/img/static/uebBGQwgvIO4BgJB5nd0" @click.stop="btntel" mode=""></image>
					</view>
					<view class="dizhi">
						<image src="https://api.ccttiot.com/smartmeter/img/static/uxTxqrn1kIVJEHCS57YU" mode=""></image> 2.3km | 天目山路134号
					</view>
					<view class="bot">
						<view class="lt">
							<view class="yytime">
								<text>营业时间 | </text>06:00-23:00
							</view>
							<view class="songqu">
								免费送取车
							</view>
						</view>
						<view class="rt">
							<view class="rizu">
								<view class="price">
									日均￥<text>69</text>起
								</view>
								<view class="qizu">
									3辆车可租
								</view>
							</view>
							<image src="https://api.ccttiot.com/smartmeter/img/static/uXOW5yZvS1fBGH7xz77A" mode=""></image>
						</view>
					</view>
					<view class="cheliang">
						<view class="quanxin" v-for="(item,index) in 2" :key="index">
							<view class="qxlt">
								<image src="https://api.ccttiot.com/smartmeter/img/static/uK5bAmrXLEHVxbH6FcFD" mode=""></image>
							</view>
							<view class="qxrt">
								<view class="name">
									全新车网红...
								</view>
								<view class="junjia">
									日均￥69
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="dibutishi">
					<!-- <text>当前附近没有更多门店咯...</text> -->
					<image src="https://api.ccttiot.com/smartmeter/img/static/usBtiESbpV8GIY3k4ukv" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 平台客服弹窗 -->
		<view class="kefutc" v-if="kefuflag">
			<image src="https://api.ccttiot.com/smartmeter/img/static/umtjJg2CJLiOS6hfAEzo" mode="" @click="kefuflag = false"></image>
			<view class="box">
				<view class="" style="max-height: 280rpx;overflow: scroll;">
					<view class="top" v-for="(item,index) in kefulist" :key="index">
						<view class="dianhua">
							{{item.name == null ? '--' : item.name}}：{{item.contact == null ? '--' : item.contact}}
							<view class="wz">
								工作时间：{{item.startTime}}~{{item.endTime}}
							</view>
						</view>
						<view class="boda" @click.stop="btnptkf(item.contact)">
							<u-icon name="phone-fill" color="#4297F3" size="28"></u-icon>
							<text>拨打</text>
						</view>
					</view>
				<!-- 	<view class="top">
						<view class="dianhua">
							平台官方客服：13774775741
						</view>
						<view class="boda" @click.stop="btnptkf">
							<u-icon name="phone-fill" color="#4297F3" size="28"></u-icon>
							<text>拨打</text>
						</view>
					</view> -->
				</view>
				<view class="bot">
					<!-- <view class="wz">
						客服工作时间
					</view> -->
					
					<view class="wzs">
						客服电话高峰期可能遇忙，请耐心等待
					</view>
				</view>
			</view>
		</view>
		<view class="mask" v-if="kefuflag"></view>
		<tab-bar :indexs='0'></tab-bar>
	</view>
</template>

<script>
	var xBlufi = require("@/components/blufi/xBlufi.js")
	export default {
		data() {
			return {
               bgc: {
                 backgroundColor: "#F4FCFF",
               },
			   latitude:'',
			   longitude:'',
			   covers:[],
			   kefuflag:false,
			   gonggaoxq:{},
			   gonggaoflag:false,
			   announcements: {},
			   kefulist:[],
			   lists: [],
			   info:{}
			}
		},  
		onLoad() {
          
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '小鹿骑行',
				path: '/pages/index/index'
			}
		},
		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '小鹿骑行',
				query: '',
				path: '/pages/index/index'
			}
		},
		onShow() {
			this.getinfo()
			this.getlunbo()
		},
		methods: {
			// 点击跳转到商家合作
			btnshangjia(){
				uni.navigateTo({
					url:'/page_user/zhaoshang'
				})
			},
			// 点击显示客服
			btnkf(){
				if(this.kefulist.length > 0){
					this.kefuflag = true
				}else{
					uni.showToast({
						title: '当前暂无客服',
						icon: 'none',
						duration: 2000
					})
				}
			},
			// 获取客服
			getkefu(){
				this.$u.get(`/app/customerService/list?pageNum=1&pageSize=999&areald=${this.info.areaId}`).then(res => {
					if(res.code == 200){
						if(res.rows.length > 0){
							this.kefulist = res.rows
						}
					}
				})
			},
			// 获取广告轮播图
			getlunbo(){
				this.$u.get("/app/ad").then(res => {
					if(res.code == 200){
						this.lists = []
						if(res.data.length > 0 && res.data[0] != null){
							res.data.forEach(item =>{
								this.lists.push({
									image:item.picture,
									title: item.adId
								})
							})
						}else{
							this.lists.push({
								image:"https://api.ccttiot.com/smartmeter/img/static/uTZBBRuyRexKd6c4VE9d",
								title: ""
							})
						}
					}
				})
			},
			
			// 获取个人用户信息
			getinfo(){
				this.$u.get("/getInfo").then(res => {
					if(res.code == 200){
						this.info = res.user
						this.getMyLocation()
						this.getgonggao()
						this.getkefu()
					}else if(res.code == 401){
						this.getlogo()
					}
				})
			},
			// 静默登录
			getlogo(){
				let taht = this
				wx.login({
					success(res) {
						if (res.code) {
							let data = {
								loginCode: res.code,
								appId:taht.$store.state.appid
							}
							taht.$u.post('/wxLogin', data).then(res => {
                                if (res.code == 200) {
									uni.setStorageSync('token', res.token)
									taht.getinfo()
									that.getlunbo()
								}else{
									taht.getinfo()
								}
							})
						}
					},
				})
			},
			// 请求客服
			// getkefu(){
			// 	this.$u.get(`/app/customerService/list?pageNum=1&pageSize=999`).then(res =>{
			// 		if(res.code == 200){
			// 			this.kefulist = res.rows
			// 		}
			// 	})
			// },
			// 点击头部滚动通知
			btntopgg(){
				this.$u.get(`/app/notice/${this.announcements.noticeId}`).then(resp =>{
					if(resp.code == 200){
						this.gonggaoxq = resp.data
						this.gonggaoflag = true
					}
				})
			},
			// 点击公告我知道了
			btnggtc(){
				this.gonggaoflag = false
				uni.setStorageSync('noticeId', this.announcements.noticeId)
			},
			// 获取最新公告
			getgonggao(){
				this.$u.get("/app/notice/new?noticeType=1").then(res =>{
					if(res.code == 200){
						this.announcements = res.data
						this.$u.get(`/app/notice/${res.data.noticeId}`).then(resp =>{
							if(resp.code == 200){
								this.gonggaoxq = resp.data
								if(resp.data.noticeId != uni.getStorageSync('noticeId')){
									this.gonggaoflag = true
								}
							}
						})
					}
				})
			},
			
			// 点击拨打平台客服电话
			btnptkf(tel){
				uni.makePhoneCall({
					phoneNumber: tel,
					success: function(res) {
						console.log('拨打电话成功', res)
					},
					fail: function(err) {
						console.error('拨打电话失败', err)
					}
				})
			},
			// 点击进行跳转页面
			btntiao(num){
				if(num == 1){ //跳转到地图页
					uni.switchTab({
						url:'/pages/nearbystores/index'
					})
				}else if(num == 2){ //跳转到使用帮助页
					uni.navigateTo({
						url:'/page_user/bangzhu'
					})
				}else if(num == 3){ //跳转到车辆故障上报
					uni.navigateTo({
						url:'/page_user/guzhang/index'
					})
				}else{ //跳转到意见反馈页
					uni.navigateTo({
						url:'/page_user/yijian'
					})
				}
			},
			// 点击附近门店跳转到门店详情页
			btnxq(){
				uni.navigateTo({
					url:'/page_fenbao/storedlist/index'
				})
			},
			// 点击门店拨打电话
			btntel() { 
				uni.makePhoneCall({
					phoneNumber: '18888888888',
					success: function(res) {
						console.log('拨打电话成功', res)
					},
					fail: function(err) {
						console.error('拨打电话失败', err)
					}
				})
			},
			// 点击跳转
			btnpage(num){
				if(num == 1){ //跳转到附近门店页面
					uni.navigateTo({
						url:'/page_fenbao/storedlist/fujinshop'
					})
				}else if(num == 2){ //跳转到我的订单页面
					uni.navigateTo({
						url:'/pages/myorder/index'
					})
				}else if(num == 3){ //跳转到租借车辆页面
					uni.switchTab({
						url:'/pages/myorder/returned/index'
					})
				}else{
					uni.navigateTo({
						url:'/page_fenbao/index'
					})
				}
			},
			// 点击跳转到地图页
			btnzk(){
				uni.switchTab({
					url:'/pages/nearbystores/index'
				})
			},
			// 获取自身位置
			getMyLocation() {
				uni.getLocation({  
					type: 'wgs84',
					success: (res) => {
						this.latitude = Number(res.latitude.toFixed(5)) - 0.005
						this.longitude = Number(res.longitude.toFixed(5)) + 0.005
						this.setMapScale()
					},
					fail: (err) => {
						console.error('获取位置失败：', err)
					}
				})
			},
			// 回到地图中心点
			async setMapScale(e, val) {
				let mapContext = uni.createMapContext('map', this)
				let setScale = () => {
					return new Promise((resolve, reject) => {
						mapContext.getScale({
							success: r => {
								resolve()
							}
						})
					})
				}
				await setScale()
				mapContext.moveToLocation({
					success: (res) => {
						const timer = setTimeout(() => {
							clearTimeout(timer)
						}, 500)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	/deep/ wx-swiper{
		height: 286rpx !important;
	}
	.gonggao{
		width: 680rpx;
		height: 60rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99;
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
		background-color: rgba(0, 0, 0, 0.2);
		margin: auto;
		margin-top: 30rpx;
	}
	.container {
	  width: 560rpx;
	  height: 60rpx; /* 根据需要调整高度 */
	  display: flex;
	  align-items: center;
	  margin: auto;
	  overflow: hidden;
	  position: relative;
	  color: #fff;
	  box-sizing: border-box;
	}
	.scroll-text {
	  width: 100%;
	  overflow: hidden;
	  box-sizing: border-box;
	  display: inline-block;
	  white-space: nowrap;
	  animation: scroll 8s linear infinite;
	}
	.scroll-item {
	  display: inline-block;
	  padding: 0 10px;
	  font-size: 16px;
	}
	@keyframes scroll {
	  0% {
	    transform: translateX(100%);
	  }
	  100% {
	    transform: translateX(-100%);
	  }
	}
	.noticetc{
		width: 680rpx;
		height: 950rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: fixed;
		top: 340rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		.btn{
			width: 600rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-radius: 50rpx;
			background-color: #4297F3;
			color: #fff;
			font-size: 32rpx;
			font-weight: 600;
			margin: auto;
			margin-top: 30rpx;
		}
		.name{
			width: 100%;
			text-align: center;
			font-size: 36rpx;
			font-weight: 600;
			margin-top: 30rpx;
		}
		.biaoti{
			font-size: 32rpx;
			margin-top: 20rpx;
		}
		.cont{
			width: 100%;
			height: 620rpx;
			overflow: scroll;
			background-color: #ececec;
			margin-top: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;
		}
	}
	
	
	/deep/ .u-title{
		padding-bottom: 12rpx !important;
	}
	@keyframes fadeIn {
	  from {
	    opacity: 0;
	  }
	  to {
	    opacity: 1;
	  }
	}
	.kefutc{
		animation: fadeIn 0.5s ease-in-out forwards;
		position: fixed;
		top: 660rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 10;
		.bot{
			margin-top: 30rpx;
			.wz{
				margin-top: 10rpx;
				font-weight: 600;
				font-size: 28rpx;
				color: #3D3D3D;
			}
			.wzs{
				margin-top: 10rpx;
				font-size: 24rpx;
				color: #7C7C7C;
			}
		}
		.top{
			width: 538rpx;
			height: 122rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 14rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
			.dianhua{
				font-weight: 600;
				font-size: 28rpx;
				color: #3D3D3D;
				padding-left: 26rpx;
				box-sizing: border-box;
			}
			.boda{
				width: 94rpx;
				height: 94rpx;
				background: #DCEDFF;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				text-align: center;
				padding-top: 8rpx;
				box-sizing: border-box;
				text{
					display: block;
				}
			}
		}
		image{
			position: absolute;
			top: -280rpx;
			z-index: -1;
			left: 50%;
			transform: translateX(-50%);
			width: 614rpx;
			height: 748rpx;
		}
	}
	.mask{
		width: 100%;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.3);
		z-index: 9;
	}
	.fujin{
		margin-top: 28rpx;
		padding: 0 26rpx;
		box-sizing: border-box;
		.list{
			padding-bottom: 230rpx;
			box-sizing: border-box;
			.dibutishi{
				width: 100%;
				text-align: center;
				margin-top: 24rpx;
				color: #ccc;
				image{
					width: 480rpx;
					height: 400rpx;
				}
			}
			.list_item{
				width: 670rpx;
				height: 340rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 18rpx 0rpx rgba(0,0,0,0.1);
				border-radius: 22rpx 22rpx 22rpx 22rpx;
				padding: 24rpx;
				box-sizing: border-box;
				margin: auto;
				margin-top: 24rpx;
				.cheliang{
					border-top: 1rpx solid #D8D8D8;
					margin-top: 22rpx;
					display: flex;
					.quanxin:nth-child(1){
						border-right: 1px solid #D8D8D8;
						margin-right: 24rpx;
					}
					.quanxin{
						display: flex;
						width: 50%;
						margin-top: 16rpx;
						.qxrt{
							.junjia{
								font-size: 24rpx;
								color: #3D3D3D;
							}
							.name{
								font-weight: 600;
								font-size: 28rpx;
								color: #3D3D3D;
							}
						}
						.qxlt{
							margin-right: 24rpx;
							image{
								width: 100rpx;
								height: 76rpx;
							}
						}
					}
				}
				.bot{
					display: flex;
					justify-content: space-between;
					.rt{
						display: flex;
						align-items: center;
						image{
							width: 48rpx;
							height: 48rpx;
							margin-left: 16rpx;
						}
						.rizu{
							.qizu{
								font-size: 28rpx;
								color: #3D3D3D;
							}
							.price{
								font-size: 24rpx;
								color: #FF1C1C;
								text{
									font-size: 36rpx;
									font-weight: 600;
								}
							}
						}
					}
					.lt{
						.songqu{
							margin-top: 12rpx;
							max-width: 140rpx;
							text-align: center;
							font-size: 24rpx;
							color: #4297F3;
							height: 38rpx;
							line-height: 38rpx;
							background: #DCEDFF;
							border-radius: 6rpx 6rpx 6rpx 6rpx;
						}
					   .yytime{
					   	font-size: 24rpx;
					   	color: #3D3D3D;
					   	margin-top: 8rpx;
					   	display: flex;
					   	align-items: center;
					   	text{
					   		font-weight: 600;
					   		margin-right: 4rpx;
					   	}
					   }
					}
				}
				.dizhi{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #3D3D3D;
					margin-top: 12rpx;
					image{
						width: 22rpx;
						height: 22rpx;
						margin-right: 4rpx;
					}
				}
				.top{
					display: flex;
					justify-content: space-between;
					.name{
						font-weight: 600;
						font-size: 36rpx;
						color: #3D3D3D;
					}
					image{
						width: 48rpx;
						height: 48rpx;
					}
				}
			}
		}
		.names{
			width: 142rpx;
			height: 52rpx;
			background: #4297F3;
			border-radius: 0 30rpx 0 30rpx;
			font-weight: 600;
			font-size: 26rpx;
			color: #fff;
			text-align: center;
			line-height: 52rpx;
		}
	}
	.guanggao{
		width: 700rpx;
		height: 286rpx;
		margin: auto;
		margin-top: 34rpx;
		position: relative;
		.kefu{
			width: 108rpx;
			height: 146rpx;
			position: absolute;
			bottom: -80rpx;
			right: 10rpx;
		}
		/deep/ .u-swiper-image{
			width: 700rpx !important;
			height: 286rpx !important;
			border-radius: 10rpx;
		}
	}
	.kuaijie{
		display: flex;
		justify-content: space-between;
		padding: 0 26rpx;
		box-sizing: border-box;
		margin-top: 32rpx;
		image{
			width: 96rpx;
			height: 118rpx;
		}
	}
	.ditu{
		width: 700rpx;
		height: 512rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
		margin: auto;
		margin-top: 22rpx;
		position: relative;
		.caozuo{
			display: flex;
			justify-content: space-between;
			padding-top: 38rpx;
			padding-left: 40rpx;
			padding-right: 40rpx;
			box-sizing: border-box;
			image{
				width: 96rpx;
				height: 40rpx;
			}
		}
		.zk{
			width: 80rpx;
			height: 80rpx;
			position: absolute;
			right: 8rpx;
			bottom: 112rpx;
		}
		map{
			width: 700rpx;
			height: 412rpx;
		}
	}
</style>