qingyuyiliao/pages/index/index.vue

<template>
	<view class="index-home">
		<view class="ongoing" v-if="goingOrder" @click="onGoing">
			您有一个正在进行中的订单
		</view>
		<!-- 授权手机号 -->
		<view class="mobile-frame" v-show="frameIshow">
			<view class="frame">
				<image src="../../static/image/tips.png" mode=""></image>
				<view class="title">
					当前操作需要授权手机号
				</view>
				<view class="submit">
					<button type="default" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立即授权</button>
				</view>
			</view>
			<view class="close" @click="frameIshow=false">
				<image src="../../static/image/close-white.png" mode=""></image>
			</view>
		</view>
		<view class="index-swiper">
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
							:duration="duration">
							<swiper-item v-for="(item, index) in bannerList" :key='index'>
								<view class="swiper-item uni-bg-red">
									<image :src="item.path" mode="widthFix"></image>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>
		</view>
		<view class="video" v-if="videoList.length>0">
			<view class="title" @click="getVideoList()">
				<text>氢知驿站</text>
				<text class=" iconfont icon-iconfontjiantou2"></text>
				<text class="more" style="float: right;">更多</text>
			</view>
			<view class="video-list" v-for="(item,index) in videoList" :key='index'>
				<view class="video-item" @click="videoDetail(item.id)">
					<view class="image">
						<image :src="item.cover" mode=""></image>
						<!-- <video id="myVideo" src="https://qingyujiankang.baomihua222.top/storage/videos/1a9f8d7d2eb55f4f96c14118606d1c33.mp4"  controls
					></video> -->
					</view>
					<view class="video-title">
						{{item.title? item.title:'--'}}
					</view>
				</view>
			</view>
		</view>
		<view class="index-list">
			<view class="title" @click="shopMore()">
				<text>附近服务站点</text>
				<text class=" iconfont icon-iconfontjiantou2"></text>
				<text class="more" style="float: right;">更多</text>
			</view>
			<view class="list" v-for="(item,index) in sitList" :key='index' @click="skipDetail(item.id)">
				<view class="left">
					<image v-if="item.cover" :src="imageUrl + item.cover" mode="heightFix"></image>
					<image v-else src="../../static/image/banner3.jpg" mode="heightFix"></image>
				</view>
				<view class="right">
					<view class="name">
						{{item.name}}
					</view>
					<view class="address">
						地址：{{item.address}}
					</view>
					<view class="num">
						<text>设备数：{{item.device_nums}}</text><text class="distance">距您{{item.distance}} </text>
					</view>
				</view>
			</view>
		</view>
		<footerBar :page='pages' @getFrame="getFrame"></footerBar>
	</view>
</template>

<script>
	import footerBar from '../../components/footer-bar/footer-bar.vue'
	var app = getApp()
	export default {
		components: {
			footerBar
		},
		data() {
			return {
				videoList: [1, 1, 1, 1, 1], //视频图文列表
				page: 0,
				background: ['color1', 'color2', 'color3'],
				title: 'Hello',
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				shopList: [0, 1, 2, 3, 4],
				item_index: 1, // 单页面id
				sitList: [], //站点列表
				page: 1,
				lng: '',
				lat: '',
				bannerList: [],
				frameIshow: false,
				imageUrl: app.globalData.imageUrl,
				goingOrder: '', //进行中的订单
			}
		},
		onLoad() {
			let that = this
			uni.showLoading()
			uni.getLocation({
				type: 'gcj02',
				isHighAccuracy: true,
				success: function(res) {
					that.lng = res.longitude
					that.lat = res.latitude
					console.log(that.lng + '当前位置的经度：' + res.longitude);
					console.log(that.lat + '当前位置的纬度：' + res.latitude);
					that.getSiteList()
					uni.hideLoading()
				}
			});
			this.getBanner()
			this.getVideo();
		},
		onShow() {
			this.exitOrder()
		},
		onPullDownRefresh() {
			this.exitOrder()
			this.getVideo()
			this.getSiteList()
		},
		methods: {
			//是否有正在进行中的订单
			exitOrder() {
				app.request('/order/is-server-exist', '', 'get').then(res => {
					console.log(res, '是否有进行中订单')
					this.goingOrder = res.data.data.no
				})
			},
			//更多站点列表
			shopMore: function() {
				uni.navigateTo({
					url: './shopList'
				})
			},
			//获取视频列表
			getVideo: function() {
				let data = {
					status: 1,
					limit: 6
				}
				app.request('/resources-home', data, 'get').then((res => {
					console.log(res, 'pppp')
					this.videoList = res.data.data.data
				}))
			},
			getVideoList: function() {
				uni.navigateTo({
					url: './video_list'
				})
			},
			//跳转视频详情
			videoDetail: function(id) {
				console.log(id, 'ooo')
				uni.navigateTo({
					url: './video_detail?id=' + id
				})
			},
			//获取手机号
			getPhoneNumber: function(e) {
				console.log(e.detail)
				let data = {
					session_key: uni.getStorageSync('session_key'),
					iv: e.detail.iv,
					encryptedData: e.detail.encryptedData
				}
				app.request('/user/sync-mobile', data, 'post').then(res => {
					this.frameIshow = false
					app.globalData.is_auth = true
				})
			},
			// 获取轮播图
			getBanner: function() {
				let params = {
					type: 1
				}
				app.request('/banners', params, 'get').then(res => {
					console.log(res, 'lunbo')
					this.bannerList = res.data.data.data
				})
			},

			// 扫码获取子组件传值
			getFrame: function(e) {
				console.log(e)
				this.frameIshow = e
			},
			//获取站点列表
			getSiteList: function() {
				let that = this
				let params = {
					page: this.page,
					lat: this.lat,
					lng: this.lng
				}
				app.request('/shops', params, 'get').then(res => {
					console.log(res, "站点列表")
					this.sitList = this.sitList.concat(res.data.data.data)
					this.sitList.map(item => {
						if (item.distance < 1000) {
							item.distance = item.distance.toFixed(2) + 'm';
						} else {
							item.distance = (item.distance / 2 / 500).toFixed(2) + 'km'
						}
					})
				})
			},

			// 跳转详情
			skipDetail: function(e) {
				if (app.globalData.is_auth == true) {
					uni.navigateTo({
						url: './equipmentList?id=' + e
					})
				} else {
					this.frameIshow = true
				}

			},
			//正在进行中的订单
			onGoing: function() {
				uni.navigateTo({
					url: './order?order_no=' + this.goingOrder
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {}

	.index-home {
		background-color: #f6f6f6;
		// height: 100%;
		padding-bottom: 140upx;

		.ongoing {
			position: fixed;
			bottom: 20%;
			padding: 20upx;
			right: 0;
			font-size: 28upx;
			background-color: $mine-background-color;
			color: #FFFFFF;
			border-radius: 50upx 0 0 50upx;

		}

		.mobile-frame {
			position: fixed;
			height: 100vh;
			width: 100%;
			background: rgba($color: #000000, $alpha: 0.6);
			z-index: 99999;
			top: 0;

			.frame {
				width: 50%;
				margin: 0 auto;
				padding: 50upx 30upx;
				margin-top: 40%;
				border-radius: 12upx;
				background-color: #FFFFFF;
				text-align: center;

				image {
					height: 90upx;
					width: 90upx;
				}

				.title {
					height: 70upx;
					line-height: 70upx;
					font-size: 28upx;
				}

				.submit {
					margin: 0 auto;
					width: 50%;
					margin-top: 30upx;

					button {
						background-color: $mine-background-color;
						height: 70upx;
						line-height: 70upx;
						text-align: center;
						font-size: 26upx;
						color: #FFFFFF;
						background-color: $mine-background-color;
					}
				}

			}

			.close {
				margin: 0 auto;
				height: 100upx;
				width: 100upx;
				text-align: center;

				margin-top: 10%;

				image {
					height: 50upx;
					width: 50upx;
				}
			}
		}

		.swiper {
			height: 300upx;

			.swiper-item {
				height: 100%;

				image {
					width: 100%;
				}
			}

		}

		.video-list {
			.video-item {
				background-color: #FFFFFF;
				margin: 0 30upx;
				margin-top: 30upx;
				// height: 300upx;
			}

			.image {
				height: 320upx;
				overflow: hidden;

				image {
					width: 100%;
					height: 320upx;
				}
			}

			.video-title {
				padding: 30upx 20upx;
				line-height: 40upx;
				font-size: 30upx;

			}

		}

		.video {

			.title {
				font-size: 34upx;
				margin: 22upx 30upx;
				font-weight: bold;

				.icon-iconfontjiantou2 {
					float: right;
					font-size: 34upx;
					margin-top: 5upx;
				}

				.more {
					float: right;
					font-size: 30upx;
				}

			}
		}

		.index-list {
			padding: 30upx;


			.title {
				font-size: 34upx;
				margin: 22upx 0;
				font-weight: bold;

				.icon-iconfontjiantou2 {
					float: right;
					font-size: 34upx;
					margin-top: 5upx;
				}

				.more {
					float: right;
					font-size: 30upx;
				}

			}

			.list {
				background-color: #FFFFFF;
				padding: 46upx 20upx 36upx 20upx;
				display: flex;
				margin-top: 12upx;
				margin-bottom: 30upx;

				.left {
					flex: 0 0 180upx;
					// height: 130upx;
					overflow: hidden;
					margin-right: 30upx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					flex: 1;

					.name {
						font-size: 36upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #000000;
						margin-bottom: 20upx;
					}

					.address {
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #383838;
					}

					.num {
						font-size: 28upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #373737;
						margin-top: 5upx;

						.distance {
							float: right;
							color: #ABA8A8;
						}
					}
				}
			}
		}
	}
</style>