dianliang/oil-station
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
28a26db27c
oil-station/gasStation-uni/pages/refuel/refuel.vue

443 lines
9.8 KiB
Vue
Raw Normal View History

uni项目提交
2023-11-27 09:24:16 +08:00
<template>
<view class="content">
<view class="container">
<view class="my-header">
<view class="my-text">一键加油</view>
</view>
<view class="top">
<view class="top-box">
<view class="dis">
<view class="top-img">
<image src="../../static/logo.png" mode=""></image>
</view>
<view class="">
收银台
2023-11-28 18:33:35 +08:00
<view class="top-title">{{store.name}}{{store.description ? "("+store.description+")" : ""}}</view><!--九州加油站（总站）-->
<view class="top-hui">{{store.address}}</view><!--平安大道东200米-->
uni项目提交
2023-11-27 09:24:16 +08:00
<view class="top-hong">￥7.68/L</view>
</view>
</view>
收银台
2023-11-28 18:33:35 +08:00
<view class="" @click="goRefuel" style="width: 30%;">
uni项目提交
2023-11-27 09:24:16 +08:00
<view class="bulu">切换站点 <uni-icons type="right" color="#304fff" size="16"></uni-icons> </view>
</view>
<!-- <view class="bulu-icon">
<view class=""></view>
<view class="">比国标降 0.22 元 </view>
</view> -->
</view>
<view class="fa-box">
<view class="fa-title">选择油号 <text class="top-hui"> 请务必与员工确认类型</text> </view>
<view class="wrap-box">
收银台
2023-11-28 18:33:35 +08:00
<view class="box-oil" :class=" {'xz' :hindex == index }" @click="getHIndex(index)"
uni项目提交
2023-11-27 09:24:16 +08:00
v-for="(item,index) in 4" :key="index">
<text>92#</text>
</view>
</view>
</view>
<view class="fa-box">
<view class="fa-title">选择油枪 <text class="top-hui"> 请务必与员工确认枪号</text> </view>
<view class="wrap-box">
收银台
2023-11-28 18:33:35 +08:00
<view class="box-oil" :class=" {'xz' :qindex == index }" @click="getQIndex(index)"
uni项目提交
2023-11-27 09:24:16 +08:00
v-for="(item,index) in 8" :key="index">
<text>{{index}}号枪</text>
</view>
</view>
</view>
<view class="fa-box">
<view class="fa-title">请输入加油金额</view>
<view class="inputkuang" @click="show = true">
<view class="sbox">￥</view>
<view class="sbox" style="text-align: center;font-weight: bold;">{{value}}</view>
<view class="sbox-hui">约{{value}}L</view>
</view>
收银台
2023-11-28 18:33:35 +08:00
<view class="wrap-box">
<view class="box-oil1" :class=" {'xz' :aindex == index }" @click="getAIndex(index,item)"
v-for="(item,index) in amountList" :key="index">
<text>￥{{item}}</text>
</view>
</view>
uni项目提交
2023-11-27 09:24:16 +08:00
</view>
<view class="anniu">
<text>立即加油</text>
</view>
</view>
收银台
2023-11-28 18:33:35 +08:00
<u-keyboard ref="uKeyboard" :tips="value" mode="number" @cancel="show = false" @confirm="submitAmount"
uni项目提交
2023-11-27 09:24:16 +08:00
@change="valChange" @backspace="backspace" v-model="pic" :show="show"></u-keyboard>
收银台
2023-11-28 18:33:35 +08:00
<view>
<uni-popup ref="popup" type="bottom">
<view style="background-color: #f4f5f6;width: 100%;height: 55vh;">
<view style="display: flex;justify-content: space-between;height: 50px;line-height: 50px">
<view style="font-size: 18px;margin-left: 40%;">请选择员工</view>
<uni-icons type="closeempty" size="30" @click="closeStaff"></uni-icons>
</view>
<view class="wrap-box1" style="margin-left: 5%;">
<view class="box-oil2" :class=" {'xz' :sindex == index }" @click="getSIndex(index)"
v-for="(item,index) in 19" :key="index">
<text>{{index}}员工</text>
</view>
</view>
<tabbar></tabbar>
</view>
</uni-popup>
</view>
uni项目提交
2023-11-27 09:24:16 +08:00
<tabbar></tabbar>
</view>
</view>
</template>
<script>
import tabbar from "../../components/tabbar/tabbar.vue"
export default {
data() {
return {
value: '',
show: false,
pic: 0,
hindex: 0,
收银台
2023-11-28 18:33:35 +08:00
qindex: 0,
aindex: 0,
sindex: 0,
// 店铺信息
store:{},
// 店铺福利信息
welfare:[],
// 距离信息
distance: "",
// 当前店铺id
storeId:"",
// 油号列表信息
oilNumberList:[],
// 油枪列表信息
oilGunList:[],
amountList:[100,200,300]
uni项目提交
2023-11-27 09:24:16 +08:00
}
},
components: {
tabbar
},
收银台
2023-11-28 18:33:35 +08:00
onShow() {
this.getAddress();
},
uni项目提交
2023-11-27 09:24:16 +08:00
methods: {
收银台
2023-11-28 18:33:35 +08:00
// 获取当前位置
getAddress(){
let _this = this;
uni.getLocation({
// 谷歌使用wgs84 其他使用gcj02
type: 'gcj02', // 使用国测局坐标系
success: function(res) {
// 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;
_this.storeId = response.data.data.store.id;
_this.getOilNumber(_this.storeId);
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) {
// uni.showModal({
// title: '提示',
// content: '获取地理位置失败，请手动选取加油站信息',
// success: function (res) {
// if (res.confirm) {
// console.log('用户点击确定');
// uni.navigateTo({
// url: '/pagesRefuel/pagesRefuel/index'
// })
// } else if (res.cancel) {
// console.log('用户点击取消');
// }
// }
// });
}
});
},
// 获取当前店铺油号信息
getOilNumber(storeId){
let _this = this;
uni.request({
url: "http://localhost:8080/business/petrolStationManagement/oilNumber/getOilNumberName/" + storeId,
method: "GET",
success: function(response){
console.log(response)
// _this.getOilGun(response.data.data.numberId)
}
})
},
// 获取当前店铺油号对应的油枪信息
getOilGun(numberId){
uni.request({
url: "http://localhost:8080/business/petrolStationManagement/oilGun/queryGunList/" + numberId,
method: "GET",
success: function(response){
console.log(response)
}
})
},
getSIndex(index) {
this.sindex = index
},
getAIndex(index,amount) {
this.value = amount+""
this.aindex = index
},
getHIndex(index) {
uni项目提交
2023-11-27 09:24:16 +08:00
this.hindex = index
},
收银台
2023-11-28 18:33:35 +08:00
getQIndex(index) {
uni项目提交
2023-11-27 09:24:16 +08:00
this.qindex = index
},
收银台
2023-11-28 18:33:35 +08:00
goRefuel() {
uni项目提交
2023-11-27 09:24:16 +08:00
uni.navigateTo({
url: '/pagesRefuel/pagesRefuel/index'
})
},
收银台
2023-11-28 18:33:35 +08:00
change(){
},
// 关闭弹窗
closeStaff(){
this.$refs.popup.close()
},
// 数字键盘确定按钮
submitAmount(){
this.show = false
this.$refs.popup.open('bottom')
},
uni项目提交
2023-11-27 09:24:16 +08:00
valChange(val) {
// 将每次按键的值拼接到value变量中，注意+=写法
this.value += val;
console.log(this.value);
},
// 退格键被点击
backspace() {
// 删除value的最后一个字符
if (this.value.length) this.value = this.value.substr(0, this.value.length - 1);
console.log(this.value);
}
}
}
</script>
<style scoped lang="scss">
.content {
background: #ffffff;
}
.container {
width: 100%;
height: 100vh;
box-sizing: border-box;
padding-top: 88px;
}
.my-header {
width: 100%;
height: 88px;
background: #304fff;
display: flex;
align-items: center;
justify-content: center;
color: white;
.my-text {
margin-top: 40px
}
position: fixed;
top: 0px;
}
.top {
width: 100%;
height: 200px;
background-image: linear-gradient(180deg, #304fff, #ffffff);
box-sizing: border-box;
padding: 1px;
}
.top-box {
width: 90%;
height: 100px;
background-color: #ffffff;
border-radius: 8px;
margin: 20px auto;
box-sizing: border-box;
padding: 10px;
display: flex;
justify-content: space-between;
margin-top: 60px;
}
.top-title {
font-size: 16px;
}
.top-img {
width: 46px;
height: 46px;
background-color: #304fff;
border-radius: 6px;
overflow: hidden;
margin-right: 10px;
image {
width: 100%;
height: 100%;
}
}
.top-hui {
font-size: 14px;
margin: 5px 0px;
color: #999999;
}
.top-hong {
font-size: 16px;
font-weight: bold;
color: #ff0000;
}
.dis {
display: flex;
}
.bulu {
color: #304fff;
}
.bulu-icon {
width: 120px;
height: 20px;
font-size: 12px;
color: #304fff;
border: 1px solid #304fff;
display: flex;
justify-content: center;
align-items: center;
}
.wrap-box {
width: 100%;
display: flex;
flex-wrap: wrap;
}
收银台
2023-11-28 18:33:35 +08:00
.wrap-box1 {
width: 100%;
display: flex;
flex-wrap: wrap;
height: 77%;
overflow-y: scroll;
}
uni项目提交
2023-11-27 09:24:16 +08:00
.box-oil {
width: 23%;
display: flex;
align-items: center;
justify-content: center;
color: #666666;
background: #f7f7f7;
margin-right: 5px;
margin-top: 5px;
padding: 12px 0px;
border-radius: 6px;
}
收银台
2023-11-28 18:33:35 +08:00
.box-oil1 {
width: 29%;
display: flex;
align-items: center;
justify-content: center;
color: #666666;
background: #f7f7f7;
margin-right: 13px;
margin-top: 5px;
padding: 12px 0px;
border-radius: 6px;
}
.box-oil2 {
width: 28%;
display: flex;
align-items: center;
justify-content: center;
color: #666666;
background: white;
margin-right: 13px;
margin-top: 10px;
padding: 12px 0px;
border-radius: 6px;
}
uni项目提交
2023-11-27 09:24:16 +08:00
.fa-box {
width: 90%;
margin: 20px auto;
}
.fa-title {
font-size: 18px;
margin: 10px 0px;
}
.xz {
color: #ffffff;
background: #1678ff;
}
.anniu {
width: 90%;
margin: 10px auto;
height: 40px;
background: #1678ff;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
}
.inputkuang {
width: 100%;
height: 40px;
border: 1px solid #304fff;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0px 10px;
}
.sbox {
width: 33%;
}
.sbox-hui {
width: 33%;
text-align: right;
color: #999999;
}
</style>
Reference in New Issue Copy Permalink