driverSchool/pages/index/index.vue

<template>
	<view class="content">
		<headers :titles="titles"></headers>
		<view class="container">

			<view class="input-box">
				<u-icon name="search" size="22" style="margin-right: 10px;"></u-icon>
				<input @click="goSchoolList()" v-model="searchSchool" type="text" placeholder="搜索驾校" />
			</view>
			<swiper class="swiper" circular :indicator-dots="false" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item v-for="(item, index) in swiperListData" :key="index">
					<view class="swiper-box">
						<image :src="baseUrl + item.swiperPicture" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="top-box">
				<view @click="goSchoolList()" class="jgbox">
					<view class="jg-img">
						<image src="../../static/imgs/t1.png" mode=""></image>
					</view>
					<view class="">学车报名</view>
				</view>

				<view class="jgbox" @click="goScheduleTraining()">
					<view class="jg-img">
						<image src="../../static/imgs/t2.png" mode=""></image>
					</view>
					<view class="">预约训练</view>
				</view>
				<view @click="pingjia()" class="jgbox">
					<view class="jg-img">
						<image src="../../static/imgs/t3.png" mode=""></image>
					</view>
					<view class="">评价</view>
				</view>

			</view>
			<!-- 			<view class="top-box">
				<view @click="xcGuide()" class="jgbox">
					<view class="jg-img">
						<image src="../../static/imgs/xczn.png" mode=""></image>
					</view>
					<view class="">学车指南</view>
				</view>
				<view @click="bmNotice()" class="jgbox">
					<view class="jg-img">
						<image src="../../static/imgs/bmxz.png" mode=""></image>
					</view>
					<view class="">报名须知</view>
				</view>
				<view @click="customerPlay()" class="jgbox">
					<view class="jg-img">
						<image src="../../static/imgs/ptkf.png" mode=""></image>
					</view>
					<view class="">平台客服</view>
				</view>

			</view> -->


			<view class="hang-hui"></view>
			<view class="jb-box">
				<view class="lift-box">
					<image src="../../static/imgs/ssxx.png" mode=""></image>
				</view>
				<view class=""></view>
				<swiper class="swipers" :vertical="true" circular :indicator-dots="false" :autoplay="autoplay"
					:interval="interval" :duration="duration">

					<view v-for="(item,index) in textList" :key="index">
						<swiper-item @click="goFindInfo()" style="height: 40px;">
							<view class="sw-box">
								<view class="qiu"></view> {{item.title}}
							</view>
						</swiper-item>
					</view>
				</swiper>
				<view class="right-box">
					<u-icon name="arrow-right" size="20"></u-icon>
				</view>
			</view>
			<view class="hang-hui"></view>
			<view class="gs-box">
				<view class="t_title">优质驾校</view>

				<view class="box-goods" v-for="(item, index) in jxglInfoData.records" :key="index">
					<view class="img-url" @click="goSchoolDetail(item)">
						<image :src="baseUrl + item.photo" mode=""></image>
					</view>
					<view @click="findJxPhone(item.phone)" class="pr-a">
						<image src="../../static/imgs/ttel.png" mode=""></image>
					</view>
					<view class="" @click="goSchoolDetail(item)">
						<view class="title_">{{item.schoolName}}</view>
						<view class="time_">营业中 {{item.businessStartTime}}-{{item.businessEndTime}}</view>
						<view class="wrap-box">
							<view class="icon-w">{{item.announcement}}</view>
							<!-- <view class="icon-x">规模大 </view> -->
						</view>
						<view class="time_"><text v-if="item.region">{{item.address}}</text> </view>
					</view>
				</view>

			</view>


			<view class="hang-hui"></view>
			<view class="bai-box">
				<view class="t_title">优惠推荐</view>

			</view>

			<view class="d-box" v-if="Onedata">
				<view class="img-left">
					<image :src="baseUrl + Onedata.photo" mode=""></image>
				</view>
				<view class="">
					<view class="title_" v-if="Onedata.name == 1">成人班</view>
					<view class="title_" v-if="Onedata.name == 2">学生班</view>
					<view class="wrap-box">
						<view class="icon-w">{{Onedata.automatic||""}}</view>
						<view class="icon-w">{{Onedata.license||""}}</view>
					</view>
					<view class="price-">￥{{Onedata.price||""}} <text class="hui-"
							style="margin-right: 15px;">￥{{Onedata.price||""}}</text>优惠:<text>{{Onedata.favour}}</text>
					</view>
				</view>
			</view>

			<u-loadmore :status="status" v-if="show == true" />
		</view>
		<view style="width: 100%; height: 88px; "></view>
		<tabbar :msg='msg'></tabbar>
	</view>
</template>

<script>
	import headers from '../../components/header/headers.vue'
	import tabbar from '../../components/tabbar/tabbar.vue'
	import request from '@/utils/request.js'
	export default {
		data() {
			return {
				titles: "驾校",
				indicatorDots: true,
				autoplay: true,
				interval: 8000,
				duration: 500,
				msg: "1",
				List: [],
				textList: [],
				show: false,
				status: 'loading',
				swiperListData: [],
				jxglInfoData: [],
				baseUrl: this.$baseUrl,
				kcListInfo: [],
				preferentialCurrentIndex: 0,
				searchSchool: null,
				Onedata: null,
				queryParams: {
					pageNum: 1,
					pageSize: 100,
				},
			}
		},

		onShow() {
			this.getOne()
			this.getTextList(),
				this.getSwiperInfoData(),
				this.getJxglInfoData(),
				this.findKcListInfo(),
				setInterval(() => {
					this.preferentialCurrentIndex++
					if (this.preferentialCurrentIndex > this.kcListInfo.length - 1) {
						this.preferentialCurrentIndex = 0
					}
				}, 6000)
		},
		onPullDownRefresh() {
			console.log("刷新");
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			// this.show = true
			setTimeout(() => {
				console.log("加载执行");
			}, 2000)
		},
		// 发送好友
		onShareAppMessage(res) {
			return {
				title: this.titles,
				path: '/pages/index/index',
			}
		},
		// 分享朋友圈
		onShareTimeline(res) {
			return {
				title: this.titles,
				path: '/pages/index/index',
			}
		},
		components: {
			headers,
			tabbar
		},
		methods: {
			pingjia() {
				uni.navigateTo({
					url: "/pages/index/schoolFeedback"
				})
			},
			/**
			 * 获取
			 */
			async getOne() {
				let res = await request({
					url: "/drivingSchool/system/driveSchoolCourse/getOne",
					method: 'get',
				})
				this.Onedata = res.data
			},
			/**
			 * 搜索
			 */
			async findKcListInfo() {
				let res = await request({
					url: "/drivingSchool/system/driveSchoolCourse/list",
					method: 'get',
					params: this.queryParams
				})
				this.kcListInfo = res.data.records
			},
			/**
			 * 驾校讯息
			 */
			async getJxglInfoData() {
				let res = await request({
					url: "/drivingSchool/system/schoolInfo/list",
					method: 'get',
					params: this.queryParams
				})
				this.jxglInfoData = res.data
				console.log("驾校信息", this.jxglInfoData)
			},
			/**
			 * 轮播图
			 */
			async getSwiperInfoData() {
				let res = await request({
					url: '/drivingSchool/system/swiper/list',
					method: 'get',
					params: this.queryParams
				})
				this.swiperListData = res.data
				console.log(this.swiperListData)
			},

			/**
			 * 实时讯息
			 */
			async getTextList() {
				let res = await request({
					url: '/drivingSchool/text/list',
					method: 'get',
					params: this.queryParams
				})
				this.textList = res.data.records
			},
			goBmPage() {
				uni.navigateTo({
					url: '/pages/index/bmPage',
				})
			},
			goSchoolDetail(item) {
				uni.navigateTo({
					url: '/pages/index/Details?id=' + item.id,
				})
			},
			async goScheduleTraining() {
				let res = await request({
					url: "/driving/findSelfInfo",
					method: 'get',
				})
				if (res.jxId) {
					uni.navigateTo({
						url: '/pages/index/ScheduleTraining'
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: "请先联系驾校"
					})
				}

			},
			goback() {
				uni.navigateBack()
			},

			goFindInfo() {
				uni.navigateTo({
					url: '/pages/index/TextInfo'
				})
			},
			goSchoolList() {
				uni.navigateTo({
					url: '/pages/index/schoolList'
				})
			},
			async customerPlay() {
				let res = await request({
					url: "/drivingSchool/system/phone/getPhone?deptId=100",
					method: 'get',

				})
				console.log(res);

				uni.makePhoneCall({
					phoneNumber: res.data.phone //仅为示例
				});
			},
			goCourseInfo(id) {
				uni.navigateTo({
					url: '/pages/index/courseInfo?courseId=' + id
				})
			},
			findJxPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone //仅为示例
				});

			},

			// 学车指南
			xcGuide() {
				console.log("学车指南")
				uni.showLoading({
					title: '加载中'
				});
				uni.downloadFile({ //通过uniapp的api下载下来
					url: 'https://nuoyun.obs.cn-east-3.myhuaweicloud.com/%E5%AD%A6%E8%BD%A6%E6%8C%87%E5%8D%97.pdf',
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: function(FileRes) {
								console.log('打开文档成功');
								uni.hideLoading();
							}
						});
					}
				});
			},

			// 报名须知
			bmNotice() {
				uni.showLoading({
					title: '加载中'
				});
				console.log("报名须知")
				uni.downloadFile({ //通过uniapp的api下载下来
					url: 'https://nuoyun.obs.cn-east-3.myhuaweicloud.com/%E6%8A%A5%E5%90%8D%E9%A1%BB%E7%9F%A5.pdf',
					success: function(res) {
						var filePath = res.tempFilePath;
						uni.openDocument({
							filePath: filePath,
							success: function(FileRes) {
								console.log('打开文档成功');
								uni.hideLoading();
							}
						});
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #f4f5f6;
		background: linear-gradient(180deg, #A4E9BF 0%, #A4E9BF 14%, rgba(255, 255, 255, 0.84) 24%, rgba(255, 255, 255, 0.84) 100%);
		height: 100vh;
	}

	.container {
		width: 100%;

		box-sizing: border-box;
		padding-top: 88px;
	}

	.anniu {}

	.t_title {
		font-weight: bold;
	}

	.input-box {
		width: 95%;
		height: 36px;
		border-radius: 50px;
		margin: 10px auto;
		background: #fff;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0px 15px;
		text-align: left;
	}

	.swiper {
		width: 95%;
		margin: 0 auto;
	}

	.swiper-box {
		width: 100%;
		height: 150px;
		border-radius: 6px;
		overflow: hidden;

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

		// background: #47a5f6;
	}

	.swipers {
		width: 60%;
		height: 65px;
		margin: 0 auto;
	}

	.top-box {
		width: 100%;
		display: flex;
		align-items: center;
		margin: 10px auto;

	}

	.jgbox {
		width: 33.3%;
		text-align: center;
		font-size: 12px;
		color: #333333;
		font-size: 16px;
		font-weight: bold;
	}

	.jg-img {
		width: 65px;
		height: 65px;
		border-radius: 4px;
		overflow: hidden;
		margin: 5px auto;


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

	.jb-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0px 15px;
		margin-bottom: 15px;
		padding-top: 15px;

	}

	.lift-box {
		width: 65px;
		height: 65px;

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

	.hang- {
		display: flex;
		align-items: center;
		font-size: 12px;
	}

	.qiu {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: #333333;
		margin-right: 5px;
	}

	.bai-box {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;



	}

	.icon-gd {
		width: 48px;
		height: 20px;
		background: #4AA76F;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		border-radius: 50px;

	}

	.hang-hui {
		width: 100%;
		height: 15px;
		background: #f4f5f6;
		margin-top: 10px;
	}

	.d-box {
		display: flex;
		align-items: center;
		width: 95%;
		margin: 0px auto;
	}

	.img-left {
		width: 106px;
		height: 66px;
		border-radius: 4px;
		overflow: hidden;
		margin-right: 10px;

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

	.title_ {
		font-size: 16px;
		color: #333333;
		font-weight: bold;
	}

	.price- {
		font-weight: bold;
		font-size: 14px;
		color: #FB423B;
	}

	.hui- {
		font-weight: 400;
		font-size: 10px;
		color: #AAAAAA;
		text-decoration: line-through;
		margin-left: 10px;
	}

	.wrap-box {
		flex-wrap: wrap;
		display: flex;
		align-items: center;
		margin: 5px auto;
	}

	.icon-w {
		background: #E6F5F0;
		border-radius: 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #4AA76F;
		margin-right: 5px;
		font-size: 10px;
		box-sizing: border-box;
		padding: 4px 5px;
	}

	.icon-x {
		background: #FFEDD4;
		border-radius: 2px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #EDA23A;
		margin-right: 5px;
		font-size: 10px;
		box-sizing: border-box;
		padding: 4px 5px;
	}

	.top-bs {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.s-s-box {
		width: 33%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #4AA76F;
	}

	.gs-box {
		background: #fff;
		box-sizing: border-box;
		padding: 15px;
	}

	.box-goods {
		display: flex;
		align-items: center;
		margin: 10px auto;
		position: relative;
	}

	.img-url {
		width: 100px;
		height: 75px;
		border-radius: 8px;
		margin-right: 10px;

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

		}
	}

	.time_ {
		font-weight: 400;
		font-size: 12px;
		color: #666666;
	}

	.pr-a {
		width: 35px;
		height: 35px;
		border-radius: 50%;
		overflow: hidden;
		position: absolute;
		right: 15px;
		top: 15px;

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

		}
	}

	.wrap-Y-box {
		width: 60%;
		height: 40px;
		overflow: auto;
	}

	.sw-box {
		height: 40px;
		display: flex;
		align-items: center;
	}
</style>