oil-station/gasStation-uni/pages/index/index.vue

<template>
	<view class="content">
		<view class="container">
			<!--外层  -->
			<!-- 顶部 -->
			<view class="conttainer-top">
				<!-- 轮播图 -->
				<view style="width: 100%;height: 300px;">
					<swiper class="swiper" style="width: 100%;height: 300px;" circular :indicator-dots="indicatorDots"
						:autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item v-for="(item,index) in list1" :key="index" @click="goPage(item.routeUrl)">
							<view class="swiper-item uni-bg-red"></view>
							<image style="width: 100%;" :src="item.bannerUrl"></image>
						</swiper-item>
					</swiper>
				</view>

				<!-- 标题 -->
				<view class="top-title">
					出行服务 优惠加油
				</view>
				<view class="lan-gang">
					<view class="lsiez"> <uni-icons type="checkbox" color="#ffffff" size="10"></uni-icons> 一键加油</view>
					<view class="lsiez"> <uni-icons type="checkbox" color="#ffffff" size="10"></uni-icons> 最近油站</view>
					<view class="lsiez"> <uni-icons type="checkbox" color="#ffffff" size="10"></uni-icons> 地址导航</view>
				</view>
				<!-- 金刚区 -->
				<view class="conttainer-jg">
					<view class="jg-box" @click="toQRcode">
						<view class="jg-img">
							<image src="../../static/imgs/viprwm.png" mode=""></image>
						</view>
						<view class="jg-size">二维码</view>
					</view>
					<view class="jg-box" @click="goActivity()">
						<view class="jg-img">
							<image src="../../static/imgs/bzhd.png" mode=""></image>
						</view>
						<view class="jg-size">本站活动</view>
					</view>
					<view class="jg-box" @click="goCard()">
						<view class="jg-img">
							<image src="../../static/imgs/ykcz.png" mode=""></image>
						</view>
						<view class="jg-size">油卡充值</view>
					</view>
					<view class="jg-box" @click="goMall()">
						<view class="jg-img">
							<image src="../../static/imgs/jfsc.png" mode=""></image>
						</view>
						<view class="jg-size">积分商城</view>
					</view>

				</view>
				<!-- 金刚区结束 -->
			</view>
			<!-- 顶部结束 -->
			<!-- centenr -->
			<view class="conttainer-cetr">
				<view class="conttainer-title">今日会员价</view>
				<view class="conttainer-box">
					<view class="c-box-box1" @click="show = true">
						<view class="">{{oilInfo.oilName}}</view>
						<view class="">
							<u-icon name="arrow-down-fill"></u-icon>
						</view>
					</view>
					<view class="c-box-box2">
						<view class="xred">会员价</view>
						<view class="dred"> <text class="xred">￥</text> {{oilInfo.oilPrice}}</view>
					</view>
					<view class="c-box-box3">
						<view class="xblck">国际价</view>
						<view class="dblck"> <text class="xblck">￥</text> {{oilInfo.oilPrice}}</view>
					</view>
				</view>

			</view>
			<!-- centenr结束 -->
			<!-- 加油站卡片-->
			<view class="station">
				<view class="station-box">

					<view class="station-title">
						{{store.name}}{{store.description ? "("+store.description+")" : ""}}
					</view><!--顺通石化加油站(工业南路站)-->
					<view style="display: flex;">
						<view class="bule-icon" v-if="welfare.length!=0" v-for="(item,index) in welfare" :key="index">
							{{item}}
						</view>
					</view>
					<view class="dis-bt">
						<view class="">
							<view class="hui1">{{ store.address }}</view>
							<view class="hui2" v-if="distance!=''">{{ distance }}km</view>
						</view>
						<view class="lananniu" @click="goGoGo" v-if="distance!=''">
							<uni-icons type="paperplane-filled" color="#195ADA" size="16"></uni-icons>
							{{ distance || "0" }}KM
						</view>
					</view>
					<u-swiper :list="list3" previousMargin="30" nextMargin="30" circular :autoplay="false" radius="5"
						bgColor="#ffffff"></u-swiper>
					<view class="juanniu" @click="goOil()">
						<view class="">一键加油</view>
					</view>
				</view>
				<view style="height: 88px; width: 100%;"></view>
			</view>
			<!-- 加油站卡片结束-->
			<!-- <u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker> -->
			<u-picker :columns="columns" @confirm="confirm" :show="show" @cancel="show = false"
				keyName="label"></u-picker>
			<u-overlay :show="shows">
				<image src="../../static/imgs/zzxryl.png"
					style="width: 280px; height: 350px; margin: 20px auto; margin-top: 200px; ">
				</image>
				<view class="anniuprp" @click="drawDown()">
					<text>立即领取</text>
				</view>
			</u-overlay>
			<!--外层结束  -->
			<tabbar :msg="msg"></tabbar>
		</view>

	</view>
</template>

<script>
	import tabbar from "../../components/tabbar/tabbar.vue"
	import config from '@/config'
	import request from '../../utils/request'
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				joinmsg: '',
				msg: "1",
				show: false,
				shows: '',
				title: '',
				oilTypeList: '',
				columns: [

				],
				oilInfo: {
					oilName: '未添加',
					oilPrice: '0',
					gbPrice: '0'
				},

				list1: [
					'http://47.95.206.185:83/topbj.png',
					'http://47.95.206.185:83/centerbj.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				list3: [
					'http://47.95.206.185:83/topbj.png',
					'http://47.95.206.185:83/centerbj.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				// 当前经度信息
				longitude: "",
				// 纬度
				latitude: "",
				// 店铺信息
				store: {
					name: "测试油站",
					description: "济南分店",
					address: "济南槐荫区"
				},
				// 店铺福利信息
				welfare: [],
				distance: "",
				storeId: "",
				staffId: "",
				baseUrl: this.$baseUrl,
			}
		},
		onLoad(query) {
			const q = decodeURIComponent(query.q) // 获取到二维码原始链接内容
			if (query.q) {
				let str = q.split("?")[1];
				let arr = str.split("&");
				let storeId = "12";
				let staffId = "";
				arr.forEach(item => {
					if (item.includes("storeId")) {
						storeId = item.split("=")[1]
					} else {
						staffId = item.split("=")[1]
					}
				})
				uni.setStorageSync("storeId", storeId)
				uni.setStorageSync("inviteStaffId", staffId)
				this.storeId = uni.getStorageSync("storeId")
				this.staffId = uni.getStorageSync("inviteStaffId")
			} else {

				let storeId = "12";

				uni.setStorageSync("storeId", storeId)
				this.storeId = uni.getStorageSync("storeId")

			}
			// this.isExistStoreId();

			this.getUserAuthority();
			this.getOilType();
		},
		onShow() {
			this.isJoined()
			this.getIndexBanner()
			// this.isExistStoreId();
		},
		components: {
			tabbar
		},
		methods: {
			// 跳转banner图对应的页面
			goPage(url) {
				uni.navigateTo({
					url: url,
				})
			},
			// 获取首页轮播图信息
			getIndexBanner() {
				if (uni.getStorageSync("storeId")) {
					request({
						url: 'business/indexBanner/list/' + uni.getStorageSync("storeId"),
						method: 'get',
					}).then(res => {
						console.log(res)
						this.list1 = res.data
					})
				}
			},
			//判断是否是新人
			isJoined() {
				request({
					url: 'business/marketingActivity/activeNewlywedsRecords/applet',
					method: 'get',
				}).then(res => {
					console.log("11111" + res)
					if (res.code == 200 && res.data == 1) {
						this.shows = true
					} else {
						this.shows = false
					}
				})
			},
			//立即领取
			drawDown() {
				/* this.shows = false */
				request({
					url: 'business/marketingActivity/activeNewlywedsRecords',
					method: 'post',
					data: {

					}
				}).then(res => {
					console.log("11111" + res)
					if (res.code == 200 && res.data == true) {
						this.shows = false
						uni.showToast({
							title: '领取成功！'
						})
					} else {
						this.shows = false
						uni.showToast({
							title: '领取失败！'
						})
					}

					/* if (res.code == 200 && res.data == 1) {
						this.shows = true
					} else {
						this.shows = false
					} */
				})
			},
			//查询新人有礼礼品
			selectActiveNewlyweds() {
				request({
					url: 'business/marketingActivity/activeNewlyweds/applet',
					method: 'get',
				}).then(res => {
					console.log("11111" + res)
				})
			},
			isExistStoreId() {
				if (uni.getStorageSync("storeId") != "") {
					this.getStore(uni.getStorageSync("storeId"));
				} else {
					this.getAddress();
				}
			},
			// 获取定位信息
			getUserAuthority() {
				let _this = this;
				// this.getAddress();

				uni.getSetting({
					success(res) {
						console.log(res, 111)
						if (!res.authSetting['scope.userLocation']) {
							uni.authorize({
								scope: 'scope.userLocation',
								success() {
									// 用户同意获取位置信息
									_this.isExistStoreId()
								},
								fail() {
									// 用户拒绝
								}
							})
						} else {
							// 用户同意获取位置信息
							_this.isExistStoreId()
						}
					}
				})
			},
			// 获取门店信息
			getStore(id) {
				let _this = this;
				request({
					url: "business/storeInformation/store/queryStoreById",
					method: 'post',
					data: {
						"storeId": id
					},
				}).then((response) => {
					_this.store = response.data
					let welfare = response.data.welfare
					uni.setStorageSync("storeId", response.data.id)
					uni.setStorageSync("chainStoreId", response.data.chainStoreId)
					if (welfare != undefined && welfare != null && welfare != "") {
						if (welfare.includes(",")) {
							_this.welfare = response.data.welfare.split(",")
						} else {
							_this.welfare.push(response.data.welfare)
						}
					}
					if (response.data.doorstepPhoto != undefined && response.data
						.doorstepPhoto != null && response.data.doorstepPhoto != "") {
						let list = JSON.parse(response.data.doorstepPhoto)
						_this.list3 = [];
						list.forEach(item => {
							_this.list3.push(_this.baseUrl + item)
						})
					}
				}).catch((res) => {
					uni.showLoading({
						title: res + "---" + 1
					})
				})
			},
			// 获取当前位置
			getAddress() {
				let _this = this;
				uni.getLocation({
					// 谷歌使用wgs84  其他使用gcj02
					type: 'gcj02', // 使用国测局坐标系
					success: function(res) {
						_this.longitude = res.longitude;
						_this.latitude = res.latitude
						// console.log('经度: ' + res.longitude);
						// console.log('纬度: ' + res.latitude);
						request({
							url: 'business/storeInformation/store/recentlyStore',
							method: 'post',
							data: {
								"lon": res.longitude,
								"lat": res.latitude
							},
						}).then((response) => {
							_this.distance = (Math.ceil(response.data.distance))
								.toFixed(1)
							_this.store = response.data.store
							uni.setStorageSync("storeId", response.data.store.id)
							uni.setStorageSync("chainStoreId", response.data.store
								.chainStoreId)
							let welfare = response.data.store.welfare
							if (welfare != undefined && welfare != null &&
								welfare != "") {
								if (welfare.includes(",")) {
									_this.welfare = response.data.store.welfare
										.split(",")
								} else {
									_this.welfare.push(response.data.store.welfare)
								}
							}
						})

						// uni.showToast({
						// 	title: "获取位置信息成功",
						// 	icon: "none"
						// })
					},
					fail: function(err) {
						_this.getStore(2);
						// uni.showToast({
						// 	title: "获取位置信息失败"
						// })
						console.log('获取位置信息失败: ' + err.errMsg);
					}
				});
			},

			//获取油站的油号信息
			getOilType() {
				let params = {
					storeId: uni.getStorageSync("storeId")
				}
				request({
					url: 'business/petrolStationManagement/oilNumber/getList2',
					method: 'get',
					params: params
				}).then((res) => {
					if (res.code == 200) {
						this.oilTypeList = res.data.records
						console.log("aaabbb", this.oilTypeList)
						if (this.oilTypeList.length > 0) {
							this.oilInfo.oilName = this.oilTypeList[0].oilName,
								this.oilInfo.oilPrice = this.oilTypeList[0].oilPrice,
								this.oilInfo.gbPrice = this.oilTypeList[0].gbPrice
						}
						let oilData = []
						this.oilTypeList.forEach(res => {
							let data = {
								id: res.numberId,
								label: res.oilName,
								oilPrice: res.oilPrice,
								gbPrice: res.gbPrice
							}
							oilData.push(data)
						})

						this.columns = [oilData]
						console.log("aaa", this.columns)
					}
				})
			},
			confirm(e) {
				console.log('选中的油号', e);
				this.oilInfo.oilName = e.value[0].label,
					this.oilInfo.oilPrice = e.value[0].oilPrice,
					this.oilInfo.gbPrice = e.value[0].gbPrice

				this.show = false
			},
			cancel() {
				this.show = false
			},
			/* onOverlay() {
				this.drawDown();
				this.shows = false
				uni.showToast({
					title: '领取成功'
				})
			}, */
			goActivity() {
				// 去活动页
				uni.navigateTo({
					url: '/pagesHome/Activity/index'
				})
			},
			goCard() {
				uni.navigateTo({
					url: '/pagesHome/MyCard/MyCard'
				})
			},
			goOil() {
				uni.navigateTo({
					url: '/pages/refuel/refuel'
				})
			},
			goMall() {
				uni.navigateTo({
					url: '/pagesHome/PointsMall/PointsMall'
				})
			},
			toQRcode() {
				uni.navigateTo({
					url: '/pagesHome/QRcode/QRcode'
				})
			},
			goGoGo() {
				uni.openLocation({
					latitude: 36.651441,
					longitude: 116.901224,
					success: function() {
						console.log('success');
					},
					complete: function(res) {
						console.log(res);
					}
				});
			},

		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #ebf5ff;
	}

	.container {
		width: 100%;
		height: 100vh;
	}

	.conttainer-top {
		width: 100%;
		height: 250px;
		// background-color: #3da4df;
		// background: url('http://47.95.206.185:83/topbj.png')center no-repeat;
		background-size: 100% 100%;
		position: relative;
		margin-bottom: 60px;


	}

	.top-title {
		font-size: 26px;
		color: white;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 25px;
		text-shadow: 0px 2px 0px #2F64CD;
		position: absolute;
		top: 120px;
		left: 20px;
	}

	.lan-gang {
		width: 200px;
		height: 22px;
		background: #2F43F7;
		border-radius: 11px;
		align-items: center;
		display: flex;
		justify-content: space-around;
		position: absolute;
		top: 155px;
		left: 20px;
		color: white;

	}

	.lsiez {
		font-size: 10px;
		display: flex;
	}

	.conttainer-jg {
		width: 95%;
		border-radius: 6px;
		background: white;
		box-sizing: border-box;
		padding: 10px;
		height: 90px;
		margin: 0px auto;
		position: absolute;
		transform: translate(-50%, -50%);
		left: 50%;
		bottom: -90px;
		display: flex;
	}

	.conttainer-cetr {
		width: 95%;
		border-radius: 6px;
		background: white;
		box-sizing: border-box;
		padding: 10px;
		margin: 10px auto;
	}

	.jg-box {
		width: 25%;
		text-align: center;
	}

	.jg-img {
		width: 38px;
		height: 38px;

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

		margin: 5px auto;
	}

	.jg-size {
		font-size: 14px;

	}

	.conttainer-title {
		font-size: 16px;
		font-weight: bold;
	}

	.conttainer-box {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		background: #F3F6F9;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-radius: 8px;
		margin-top: 10px;
	}

	.c-box-box1 {
		width: 33%;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}

	.c-box-box2 {
		width: 33%;
		height: 44px;
		text-align: center;
		border-left: 1px solid #DDDDDD;
		border-right: 1px solid #DDDDDD;
	}

	.c-box-box3 {
		width: 33%;
		height: 44px;
		text-align: center;
	}

	.xblck {
		font-size: 14px;
		color: #333333;
	}

	.dblck {
		font-size: 20px;
		color: #333333;
		font-weight: bold;
	}

	.xred {
		font-size: 14px;
		color: #ED2828;
	}

	.dred {
		font-size: 20px;
		color: #ED2828;
		font-weight: bold;
	}

	.station {
		width: 100%;
		height: 120px;
		background: url('http://47.95.206.185:83/centerbj.png')center no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding-top: 30px;
	}

	.station-box {
		width: 95%;
		background-color: white;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 15px;
		margin: 0px auto;
	}

	.station-title {
		font-size: 16px;
		font-weight: bold;
	}

	.bule-icon {
		width: 85px;
		font-size: 12px;
		color: #195ADA;
		box-sizing: border-box;
		padding: 2px 5px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #195ADA;
		border-radius: 4px;
		margin: 5px 3px;
	}

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

	.hui1 {
		color: #666666;
		font-size: 12px;
		margin: 5px auto;
	}

	.hui2 {
		color: #999999;
		font-size: 12px;
		margin: 5px auto;
	}

	.lananniu {
		box-sizing: border-box;
		padding: 3px 10px;
		background: #DBE9FF;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: #195ADA;

	}

	.tabs {
		width: 100%;
		display: flex;
		height: 44px;

	}

	.scrollbox {
		display: flex;
	}

	.scrollbox-imgs {

		width: 195px;
		height: 100px;
		border-radius: 4px;
		background-color: #195ADA;
		margin: 0px 10px;
	}

	.juanniu {
		height: 36px;
		background: linear-gradient(90deg, #FF7302 0%, #FF5210 100%);
		border-radius: 42px;
		justify-content: center;
		display: flex;
		align-items: center;
		color: white;
		margin-top: 20px;


	}

	.anniuprp {
		width: 130px;
		height: 36px;
		background: linear-gradient(180deg, #FF6D3A 0%, #FF327A 100%);
		box-shadow: inset 0px 0px 6px 3px rgba(255, 255, 255, 0.25);
		border-radius: 18px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		margin: 0 auto;
	}
</style>