spark-student/pages/index/index.vue

<template>
	<view class="content">
		<!-- 导航栏 -->
		<u-navbar :is-back="false">
			<view class="slot-wrap">
				<view @click="show = true">{{ locationText }}</view>
				<!-- <u-select v-model="show" mode="mutil-column-auto" :list="list" @confirm="confirm"></u-select> -->
				<u-picker mode="region" v-model="show" @confirm="handleChoosePlaceClick"></u-picker>
			</view>
		</u-navbar>
		<!-- 轮播图 -->
		<template v-if="swiperList.length">
			<u-swiper :list="swiperList" mode="rect" height="300" effect3d border-radius="30" name="url" style="margin-bottom: 10px;"></u-swiper>
		</template>
	<!-- 	<view class="section-title">
			<u-image width="20px" height="10px" :src="sectionIcon"></u-image>
			<u-section title="会员开通" font-size="32" :right="false" :show-line="false"></u-section>
		</view>
		<view class="menber-box">
			<view class="menber-col" v-for="(item, index) in menberList" :key="index" @click="goToPay(item)">
				<view class="menber-label">{{item.typeValue}}</view>
				<u-button type="warning" shape="circle" :ripple="true" :custom-style="{...handleCustomStyle, float: 'left', marginLeft: ''}" size="mini" @click="goToPay(item)">点击开通</u-button>
				<view class="menber-icon iconfont iconzu4931"></view>
			</view>
		</view> -->
		<!-- 会员开通 -->
		<view class="section-title">
			<u-image width="20px" height="10px" :src="sectionIcon"></u-image>
			<u-section title="会员开通" font-size="32" :show-line="false" @click="handleMoreClick"></u-section>
		</view>
		<view class="venue-box">
			<u-card :head-border-bottom="false" :foot-border-top="false" title-size="32" padding="0" margin="10px" v-for="(item, index) in venueList"
			 :key="index" class="venue-card" @click="goToVenueDetail(item)">
				<view class="venue-content" slot="head" style="padding-top: 10px;">
					<view class="venue-name">{{item.name}}</view>
				</view>
				<view class="venue-content" slot="body">
					<view class="info-text" v-if="item.distance">
						<u-icon name="car"></u-icon>
						距您{{item.distance}}
					</view>
					<view class="info-text">
						<u-icon name="map"></u-icon>
						{{item.address}}
					</view>
				</view>
				<view class="venue-content" slot="foot" style="text-align: right;">
					<u-button type="warning" shape="circle" :ripple="true" :custom-style="handleCustomStyle" size="mini" @click="goToVenueDetail(item)">预约</u-button>
				</view>
			</u-card>
		</view>
		<!-- 精彩瞬间 -->
		<view class="section-title">
			<u-image width="20px" height="10px" :src="sectionIcon"></u-image>
			<u-section title="精彩瞬间" font-size="32" :right="false" :show-line="false"></u-section>
		</view>
		<view class="video-box">
			<view v-for="(item, index) in videoList" :key="index" class="video-card">
				<view class="video-col">
					<video :src="item.url" object-fit="cover" controls :id="'video' + index"></video>
				</view>
				<!-- <u-image :src="item.url" mode="aspectFill" height="30vw" border-radius="10px"></u-image> -->
				<view class="video-name">{{item.title}}</view>
			</view>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	const NET = require('@/utils/request')
	const API = require('@/config/api')
	export default {
		computed: {
			...mapGetters([
				'mainColor',
				'handleCustomStyle',
			])
		},
		data() {
			return {
				show: false,
				sectionIcon: API.getServerImg + 'biaoti.png',
				longitude: '',
				latitude: '',
				locationText: '',
				swiperList: [],
				venueList: [],
				videoList: []
			}
		},
		onLoad(options) {
			if (options.shareParams) {
				// 分享获取参数
				 const shareParams = decodeURIComponent(options.shareParams)
				 const shareId = shareParams.split(':')[0]
				 const shareType =  shareParams.split(':')[1]
				 NET.request(API.getQrcodeInfo, {shareId,shareType}, 'POST').then(res => {
					if(res.status == 50000) {
						this.$refs.uTips.show({
							title: res.message,
							type: 'warning',
						})
					}
				 })
				// console.log(options.shareParams)
				// wx.setStorage({//存储到本地
				//   key:"shareParams",
				//   data:options.shareParams
				// })
			}
			// setTimeout(()=>{
			// 	let videoContext = uni.createVideoContext('video1')
			// 	videoContext.play()
			// 	console.log(12)
			// },6000)
			uni.getLocation({
				type: 'wgs84',
				geocode: true,
				success: (res) => {
					uni.setStorage({
						key: 'locationData',
						data: {
							longitude: res.longitude,
							latitude: res.latitude,
						}
					})
					this.initialize()
				}
			});
		},
		onShow() {
			// if (!uni.getStorageSync('token')) {
			// 	uni.navigateTo({
			// 		url: '/pages/login/index'
			// 	});
			// }
		},
		onPullDownRefresh() {
			this.initialize()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500)
		},
		methods: {
			//  选择省市区
			handleChoosePlaceClick(e) {
				console.log(e);
				this.locationText = e.province.label + '-' + e.city.label + '-' + e.area.label
				const provinceCode = e.province.value + '0000'
				const cityCode = e.city.value + '00'
				const district = e.area.value
				NET.request(API.getCodeVenueList, { provinceCode, cityCode, district }, 'POST').then(res => {
					const venueData = res.data.map( item => {
						return {
							id: item.venueId,
							name: item.name,
							address: item.detailedAddress
						}
					})
					this.venueList = venueData.length <= 4 ? venueData : venueData.slice(0,4)
				})
			},
			//  获取初始化数据
			initialize() {
				// 轮播图
				NET.request(API.getIndexSwiperList, {}, 'POST').then(res => {
					this.swiperList = res.data
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
				})
				// 省-市-区
				NET.request(API.getAddressInfo, uni.getStorageSync('locationData'), 'POST').then(res => {
					this.locationText = res.data.province + '-' + res.data.city + '-' + res.data.district
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
				})
				// 附件场馆
				NET.request(API.getVenueList, uni.getStorageSync('locationData'), 'POST').then(res => {
					const venueData = res.data
					this.venueList = venueData.length <= 4 ? venueData : venueData.slice(0,4)
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
				})
				// 精彩瞬间
				NET.request(API.getVideoList, uni.getStorageSync('locationData'), 'POST').then(res => {
					const videoData = res.data
					// 取4个精彩瞬间
					this.videoList = videoData.length <= 4 ? videoData : videoData.slice(0,4)
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
				})
			},
			//  更多场馆
			handleMoreClick() {
				uni.navigateTo({
					url: '/pagesMember/venueMore'
				});
			},
			//  跳转开通支付
			// goToPay(site) {
			// 	uni.navigateTo({
			// 		url: '/pagesMain/openMember?memberCardType=' + site.type + '&typeValue=' + site.typeValue
			// 	});
			// },
			//  跳转场馆详情
			goToVenueDetail(item) {
				uni.navigateTo({
					url: '/pagesMember/venueDetail?id=' + item.id
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/themes.scss";

	.content {
		width: 100%;
		float: left;

		// /deep/.u-navbar {
		// 	.u-title {
		// 		font-weight: bold;
		// 	}
		// }
		.slot-wrap {
			display: flex;
			align-items: center;
			/* 如果您想让slot内容占满整个导航栏的宽度 */
			flex: 1;
			/* 如果您想让slot内容与导航栏左右有空隙 */
			padding: 0 30rpx;
		}
		.section-title {
			width: 100%;
			height: 28px;
			display: flex;
			align-items: center;
			margin-top: 20px;
			padding: 0 15px;

			u-section {
				margin-left: 10px;
				flex: 1;
			}
		}

		.menber-box {
			width: 100vw;
			float: left;
			padding-left: 5px;
			overflow-x: auto;
			white-space: nowrap;

			.menber-col {
				width: 70vw;
				margin: 10px 15px;
				padding: 15px 20px;
				display: inline-block;
				background-color: #FFFFFF;
				border-radius: 15px;
				box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
				position: relative;
				overflow: hidden;

				.menber-label {
					width: 100%;
					margin-bottom: 10px;
					float: left;
					font-size: 14px;
					font-weight: bold;
					line-height: 20px;
				}

				.menber-num {
					width: 100%;
					float: left;
					font-size: 26px;
					line-height: 28px;
					color: $mainColor;
				}

				.menber-icon {
					font-size: 80px;
					color: $mainColor;
					position: absolute;
					right: -15px;
					bottom: -15x;
					opacity: 0.5;
				}
			}
		}

		.venue-box {
			width: 100vw;
			float: left;
			padding-left: 5px;
			overflow-x: auto;
			white-space: nowrap;

			/deep/.u-card--border:after {
				border-color: #cccccc;
				border-radius: 15px;
			}

			.venue-card {
				min-width: 70vw;
				display: inline-block;

				.venue-content {
					padding: 0px 15px 10px 15px;

					.venue-name {
						height: 20px;
						font-weight: bold;
						font-size: 15px;
						line-height: 20px;
					}

					.info-text {
						max-width: 60vw;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						color: #999999;
						line-height: 18px;

						/deep/.u-icon {
							margin-right: 5px;
							font-size: 14px;
						}
					}
				}
			}
		}

		.video-box {
			width: 100vw;
			float: left;
			box-sizing: border-box;
			padding: 10px 7px 0px 7px;

			.video-card {
				width: calc(50% - 16px);
				margin: 0 8px 16px 8px;
				float: left;

				.video-col {
					width: 100%;
					height: 30vw;
					float: left;
					border-radius: 10px;
					overflow: hidden;

					video {
						width: 100%;
						height: 30vw;
					}
				}

				.video-name {
					width: 100%;
					float: left;
					text-align: center;
					line-height: 20px;
					font-size: 14px;
					margin-top: 5px;
				}
			}
		}
	}
</style>