dianliang/oil-station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
dea95896c2
oil-station/gasStation-uni/pages/index/index.vue
@QQNZX dea95896c2 11.28前端
2023-11-28 14:43:36 +08:00

496 lines
10 KiB
Vue
Raw Blame History

<template>
<view class="content">
<view class="container">
<!--外层 -->
<!-- 顶部 -->
<view class="conttainer-top">
<!-- 标题 -->
<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">
<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="">92#</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> 6.55</view>
</view>
<view class="c-box-box3">
<view class="xblck">国际价</view>
<view class="dblck"> <text class="xblck">￥</text> 6.55</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">{{ distance }}km</view>
</view>
<view class="lananniu" @click="goGoGo"> <uni-icons type="paperplane-filled" color="#195ADA"
size="16"></uni-icons> {{ distance*1000 }}米</view>
</view>
<!-- <scroll-view scroll-x="true">
<view class="scrollbox" >
<view style="margin: 0px 10px;" v-for="(item,index) in 13" :key="index">123123</view>
</view>
</scroll-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>
<!--外层结束 -->
<tabbar :msg="msg"></tabbar>
</view>
</view>
</template>
<script>
import tabbar from "../../components/tabbar/tabbar.vue"
export default {
data() {
return {
msg: "1",
show: false,
title: '',
columns: [
['#92', '#95', '#98']
],
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: {},
// 店铺福利信息
welfare: [],
distance: "",
}
},
onLoad() {
},
onShow() {
// this.getAddress();
},
components: {
tabbar
},
methods: {
// 获取当前位置
getAddress() {
let _this = this;
uni.getLocation({
// 谷歌使用wgs84 其他使用gcj02
type: 'wgs84', // 使用国测局坐标系
success: function(res) {
_this.longitude = res.longitude;
_this.latitude = res.latitude
// console.log('经度: ' + res.longitude);
// console.log('纬度: ' + res.latitude);
uni.request({
url: "http://localhost:8080/business/storeInformation/store/recentlyStore",
method: "POST",
data: {
"lon": res.longitude,
"lat": res.latitude
},
success: function(response) {
_this.distance = (response.data.data.distance).toFixed(1)
_this.store = response.data.data.store
let welfare = response.data.data.store.welfare
if (welfare != undefined && welfare != null && welfare != "") {
if (welfare.includes(",")) {
_this.welfare = response.data.data.store.welfare.split(",")
} else {
_this.welfare.push(response.data.data.store.welfare)
}
}
}
})
},
fail: function(err) {
console.log('获取位置信息失败: ' + err.errMsg);
}
});
},
confirm(e) {
console.log('选中的油号', e);
this.show = false
},
cancel() {
this.show = false
},
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'
})
},
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: 70px;
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 {
width: 78px;
height: 24px;
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;
}
</style>
Reference in New Issue View Git Blame Copy Permalink