spark-student/pages/index/index.vue

<template>
	<view class="content">
		<u-navbar back-icon-size="0" :back-text="locationText" title="星火纵横" :title-color="mainColor" title-bold></u-navbar>
		<u-swiper :list="swiperList" mode="rect" effect3d border-radius="30" name="url" style="margin-bottom: 10px;"></u-swiper>
		<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" :right="false" :show-line="false"></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">
						<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 {
				sectionIcon: API.getServerImg + 'biaoti.png',
				longitude: '',
				latitude: '',
				locationText: '',
				swiperList: [],
				menberList: [],
				venueList: [],
				videoList: [],
			}
		},
		onLoad(options) {
			if (options.shareParams) {
				uni.setStorageSync({
					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: {
			//  获取初始化数据
			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.getMemberCardList, {}, 'POST').then(res => {
					this.menberList = 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 => {
					this.venueList = res.data
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
				})
				NET.request(API.getVideoList, uni.getStorageSync('locationData'), 'POST').then(res => {
					this.videoList = res.data
				}).catch(error => {
					this.$refs.uTips.show({
						title: error.message,
						type: 'warning',
					})
				})
			},
			//  跳转开通支付
			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;
			}
		}

		.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 {
						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>