oil-station/gasStation-uni/pages/refuel/refuel.vue
2024-08-16 18:26:19 +08:00

969 lines
25 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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" style="width: 78%;">
<view class="top-img">
<image v-if="!store.logo" src="../../static/logo.png" mode="aspectFit"></image>
<image v-else :src="baseUrl+store.logo" mode="aspectFit"></image>
</view>
<view style="width: 80%;">
<view class="top-title">{{store.name}}{{store.description ? "("+store.description+")" : ""}}
</view><!--九州加油站(总站)-->
<view class="top-hui">{{store.address}}</view><!--平安大道东200米-->
<view class="top-hong">¥{{oilPrice}}/{{oilUnit ? oilUnit : "L"}}</view>
</view>
</view>
<view class="" @click="goRefuel" style="width: 22%;font-size: 14px;">
<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 v-if="appltType == 'ALIPAY'" style="height: 400px;overflow-y: scroll;">
<view class="fa-box">
<view class="fa-title">选择油号 <text class="top-hui"> 请务必与员工确认类型</text> </view>
<view class="wrap-box">
<!-- <view class="box-oil" :class=" {'xz' :hindex == index }" @click="getHIndex(index)"
v-for="(item,index) in 4" :key="index">
<text>92#</text>
</view> -->
<view class="box-oil" v-for="(item,index) in oilNumberList" :key="index"
:class=" {'xz' :hindex == index }" @click="getHIndex(index,item)">
<text>{{item.oilName}}</text>
</view>
</view>
</view>
<view class="fa-box">
<view class="fa-title">选择油枪 <text class="top-hui"> 请务必与员工确认枪号</text> </view>
<view class="wrap-box">
<!-- <view class="box-oil" :class=" {'xz' :qindex == index }" @click="getQIndex(index)"
v-for="(item,index) in 8" :key="index">
<text>{{index}}号枪</text>
</view> -->
<view class="box-oil" :class=" {'xz' :qindex == index }" v-for="(item,index) in oilGunList"
:key="index" @click="getQIndex(index,item)">
<text>{{item.gunName}}</text>
</view>
</view>
</view>
<view class="fa-box">
<view class="fa-title">请输入加油金额</view>
<view class="inputkuang" @click="openKey">
<view class="sbox">¥</view>
<view class="sbox" style="text-align: center;font-weight: bold;">{{value}}</view>
<view class="sbox-hui">约{{liters}}L</view>
</view>
<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>
</view>
<view class="anniu" @click="submitAmount">
<text>立即加油</text>
</view>
</view>
<view v-if="appltType == 'WECHAT'" style="height: 500px;overflow-y: scroll;">
<view class="fa-box">
<view class="fa-title">选择油号 <text class="top-hui"> 请务必与员工确认类型</text> </view>
<view class="wrap-box">
<!-- <view class="box-oil" :class=" {'xz' :hindex == index }" @click="getHIndex(index)"
v-for="(item,index) in 4" :key="index">
<text>92#</text>
</view> -->
<view class="box-oil" v-for="(item,index) in oilNumberList" :key="index"
:class=" {'xz' :hindex == index }" @click="getHIndex(index,item)">
<text>{{item.oilName}}</text>
</view>
</view>
</view>
<view class="fa-box">
<view class="fa-title">选择油枪 <text class="top-hui"> 请务必与员工确认枪号</text> </view>
<view class="wrap-box">
<!-- <view class="box-oil" :class=" {'xz' :qindex == index }" @click="getQIndex(index)"
v-for="(item,index) in 8" :key="index">
<text>{{index}}号枪</text>
</view> -->
<view class="box-oil" :class=" {'xz' :qindex == index }" v-for="(item,index) in oilGunList"
:key="index" @click="getQIndex(index,item)">
<text>{{item.gunName}}</text>
</view>
</view>
</view>
<view class="fa-box">
<view class="fa-title">请输入加油金额</view>
<view class="inputkuang" @click="openKey">
<view class="sbox">¥</view>
<view class="sbox" style="text-align: center;font-weight: bold;">{{value}}</view>
<view class="sbox-hui">约{{liters}}L</view>
</view>
<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>
</view>
<view class="anniu" @click="submitAmount">
<text>立即加油</text>
</view>
</view>
</view>
<!-- <u-keyboard ref="uKeyboard" :tips="value" mode="number" @cancel="show = false" @confirm="submitAmount"
@change="valChange" @backspace="backspace" v-model="pic" :show="show"></u-keyboard> -->
<view style="margin-top: 50px;">
<uni-popup ref="popup1" type="bottom" background-color="white" mask-background-color="rgba(0,0,0,0.0)">
<keyboard :pApplt="appltType" @isPay="submitAmount" @amount="changeVal" @backVal="backspaceVal">
</keyboard>
</uni-popup>
</view>
<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 class="box-oil2" :class=" {'xz' :sindex == index }" v-for="(item,index) in staffList"
:key="index" @click="getSIndex(index,item.id)">
<text>{{item.realName}}</text>
</view>
</view>
<tabbar></tabbar>
</view>
</uni-popup>
</view>
<tabbar></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 {
appltType: uni.getStorageSync("appltType"),
value: '',
liters: 0,
show: false,
pic: 0,
hindex: 0,
qindex: 0,
aindex: null,
sindex: null,
// 店铺信息
store: {
name: "测试油站",
description: "济南分店",
address: "济南槐荫区"
},
// 店铺福利信息
welfare: [],
// 距离信息
distance: "",
// 当前店铺id
storeId: "",
// 油号列表信息
oilNumberList: [],
// 油枪列表信息
oilGunList: [],
// 员工列表信息
staffList: [],
// 加油金额列表
amountList: [100, 200, 300],
// url信息
baseUrl: this.$baseUrl,
// 油价
oilPrice: 0,
// 油品单位
oilUnit: "",
AppToken: uni.getStorageSync("App-Token"),
// 油品订单信息
oilOrder: {
storeId: "",
couponId: "",
commissionAmount: 0,
staffId: "",
terminal: "applet",
oils: "",
oilGunNum: "",
oilNum: "",
orderAmount: 0,
discountAmount: 0,
payAmount: 0,
payType: uni.getStorageSync("appltType"),
},
}
},
components: {
tabbar
},
onLoad(query) {
if (uni.getStorageSync("appltType") == "WECHAT") {
const q = decodeURIComponent(query.q) // 获取到二维码原始链接内容
if (query.q) {
let str = q.split("?")[1];
let storeId = "19";
let staffId = "";
let sn = "";
if (str.includes("&")) {
let arr = str.split("&");
arr.forEach(item => {
if (item.includes("storeId")) {
storeId = item.split("=")[1]
} else if (item.includes("staffId")) {
staffId = item.split("=")[1]
} else {
sn = item.split("=")[1]
}
})
} else {
if (str.includes("storeId")){
storeId = str.split("=")[1]
}else{
sn = str.split("=")[1]
this.getStoreIdBySn(sn);
}
}
uni.setStorageSync("storeId", storeId)
uni.setStorageSync("sn", sn)
uni.setStorageSync("inviteStaffId", staffId)
this.storeId = uni.getStorageSync("storeId")
this.staffId = uni.getStorageSync("inviteStaffId")
if (uni.getStorageSync("storeId")){
this.getStore(uni.getStorageSync("storeId"));
// this.getStaffList(uni.getStorageSync("storeId"));
}
}
} else {
if (uni.getStorageSync("storeId")) {
this.getStore(uni.getStorageSync("storeId"));
// this.getStaffList(uni.getStorageSync("storeId"));
}else{
this.getStoreIdBySn(uni.getStorageSync("sn"));
}
}
},
onShow() {
// this.isExistStoreId();
this.getStore(uni.getStorageSync("storeId"));
// this.getStaffList(uni.getStorageSync("storeId"));
// this.getStoreIdBySn("byx19509291");
// this.getStore(0);
this.getTheJudgmentIsTheSame()
},
methods: {
// 获取当前位置
getAddress(storeId) {
let _this = this;
uni.getLocation({
// 谷歌使用wgs84 其他使用gcj02
type: 'gcj02', // 使用国测局坐标系
success: function(res) {
if (_this.longitude == "" && _this.latitude == "") {
_this.longitude = res.longitude;
_this.latitude = res.latitude
}
console.log('经度: ' + _this.longitude);
console.log('纬度: ' + _this.latitude);
request({
url: 'business/storeInformation/store/recentlyStore',
method: 'post',
data: {
"lon": _this.longitude,
"lat": _this.latitude,
"storeId": storeId,
"isLogin": _this.AppToken ? "0" : "1", // 0为登录
},
}).then((response) => {
console.log(response, "2154");
// uni.showToast({
// title:"121984:"+storeId
// })
if (response.data.store) {
_this.store = response.data.store
uni.setStorageSync("storeId", response.data.store.id)
uni.setStorageSync("chainStoreId", response.data.store.chainStoreId)
_this.getOilNumber(response.data.store.id);
} else {
uni.showToast({
title: "当前店铺已关闭!!!",
icon: "none"
})
}
}).catch(err => {})
// uni.showToast({
// title: "获取位置信息成功",
// icon: "none"
// })
},
fail: function(err) {
_this.getStore(2);
// uni.showToast({
// title: "获取位置信息失败"
// })
console.log('获取位置信息失败: ' + err.errMsg);
}
});
},
// 获取定位信息
getUserAuthority() {
let _this = this;
// this.getAddress();
uni.getSetting({
async success(res) {
if (!res.authSetting['scope.userLocation']) {
// uni.authorize({
// scope: 'scope.userLocation',
// success() {
// // 用户同意获取位置信息
// // _this.isExistStoreId()
// },
// fail() {
// // 用户拒绝
// }
// })
await _this.getAddress(uni.getStorageSync("storeId"));
} else {
// 用户同意获取位置信息
// _this.isExistStoreId()
await _this.getAddress(uni.getStorageSync("storeId"));
}
},
fail(err) {
}
})
},
// 通过sn获取storeId
getStoreIdBySn(sn){
request({
url: "business/tag/oilTag/getSn/" + sn,
method: 'get'
}).then((res) => {
uni.setStorageSync("storeId", res.data.storeId)
if (res.data.storeId){
this.getStore(uni.getStorageSync("storeId"));
}else{
this.getAddress(uni.getStorageSync("storeId"));
}
})
},
// 打开数字键盘
openKey() {
this.show = true
this.$refs.popup1.open('bottom')
},
isExistStoreId() {
if (uni.getStorageSync("storeId") != "") {
this.getStore(uni.getStorageSync("storeId"));
// this.getStaffList(uni.getStorageSync("storeId"));
} else {
this.getAddress();
}
},
// 获取门店信息
getStore(id) {
// uni.showToast({
// title:333
// })
if (!id) {
return;
}
let _this = this;
request({
url: "business/storeInformation/store/queryStoreById",
method: 'post',
data: {
"storeId": id
},
}).then((res) => {
_this.getOilNumber(id);
// _this.getStaffList(id)
_this.store = res.data
_this.storeId = res.data.id;
uni.setStorageSync("storeId", _this.store.id)
uni.setStorageSync("chainStoreId", _this.store.chainStoreId)
// let welfare = res.data.welfare
// if (welfare) {
// if (welfare.includes(",")) {
// _this.welfare = res.data.welfare.split(",")
// } else {
// _this.welfare.push(res.data.welfare)
// }
// }
}).catch(err => {
// uni.showLoading({
// title: JSON.stringify(err) + 222
// })
})
},
// 获取当前位置
getAddress1() {
let _this = this;
uni.getLocation({
// 谷歌使用wgs84 其他使用gcj02
type: 'gcj02', // 使用国测局坐标系
success: function(res) {
// 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 = (response.data.distance).toFixed(1);
_this.store = response.data.store;
_this.storeId = response.data.store.id;
_this.getOilNumber(_this.storeId);
// _this.getStaffList(_this.storeId)
if (response.data.store.welfare) {
if (response.data.store.welfare.includes(",")) {
_this.welfare = response.data.store.welfare.split(",");
} else {
_this.welfare.push(response.data.store.welfare);
}
}
})
},
fail: function(err) {
_this.getStore(0);
}
});
},
// 获取当前店铺油号信息
getOilNumber(storeId) {
let _this = this;
request({
// url: "business/petrolStationManagement/oilNumber/getOilNumberName/" + storeId,
url: "business/petrolStationManagement/oilGun/selectByNumber/" + storeId,
method: 'get',
}).then((res) => {
_this.oilNumberList = res.data;
if (res.data.length > 0) {
// _this.getOilGun(res.data[0].numberId);
_this.oilPrice = res.data[0].oilPrice
_this.oilUnit = res.data[0].unit
_this.oilOrder.oils = res.data[0].oilNameId
if (res.data[0].oilGunList) {
_this.oilGunList = res.data[0].oilGunList
_this.oilOrder.oilGunNum = res.data[0].oilGunList[0].id
uni.setStorageSync("tankId", res.data[0].oilGunList[0].tankId)
}
}
})
},
// 获取当前店铺油号对应的油枪信息
getOilGun(numberId) {
let _this = this;
request({
url: "business/petrolStationManagement/oilGun/queryGunList/" + numberId,
method: 'get',
}).then((res) => {
_this.oilGunList = res.data
_this.oilOrder.oilGunNum = res.data[0].id
})
},
// 获取当前店铺员工信息列表
getStaffList(storeId) {
if (!storeId) {
return;
}
let _this = this;
request({
url: "business/member/staff/queryList1/" + storeId,
method: 'get',
}).then((res) => {
_this.staffList = res.data
})
},
// 跳转订单详情页,并支付
getSIndex(index, id) {
this.sindex = index
// 校验油罐内油量是否足够
request({
url: "business/petrolStationManagement/oilTank/" + uni.getStorageSync('tankId'),
method: 'get',
}).then((res) => {
if (res.data.storedQuantity - this.liters < 0) {
uni.showToast({
title: "所加油的升数大于油罐内的升数,请重新选择加油升数",
icon: "none"
})
return;
} else {
this.toPayment(id)
}
})
},
toPayment(id) {
this.oilOrder.orderAmount = this.value
this.oilOrder.storeId = this.storeId
this.oilOrder.staffId = id
this.oilOrder.oilNum = (this.value / this.oilPrice).toFixed(2)
this.oilOrder.tankId = uni.getStorageSync("tankId")
this.oilOrder.oilTagSn = uni.getStorageSync("sn")
let _this = this;
// 添加油品订单信息
request({
url: "business/oilOrder/addOilOrder",
method: 'post',
data: _this.oilOrder,
}).then((res) => {
uni.navigateTo({
url: '/pagesRefuel/orderDetail/index?orderNo=' + res.data,
})
})
},
// 选择加油金额
getAIndex(index, amount) {
this.value = amount + ""
this.aindex = index
this.liters = (amount / this.oilPrice).toFixed(2)
},
// 选择油品信息
getHIndex(index, data) {
this.hindex = index
// console.log(data)
// this.getOilGun(data.numberId)
this.oilGunList = data.oilGunList
this.oilOrder.oilGunNum = data.oilGunList[0].id
this.oilPrice = data.oilPrice
this.oilUnit = data.unit
this.oilOrder.oils = data.oilNameId
uni.setStorageSync("tankId", data.oilGunList[0].tankId)
},
// 选择油枪信息
getQIndex(index, data) {
this.qindex = index
this.oilOrder.oilGunNum = data.id
uni.setStorageSync("tankId", data.tankId)
},
goRefuel() {
uni.navigateTo({
url: '/pagesRefuel/pagesRefuel/index'
})
},
change() {
},
// 关闭弹窗
closeStaff() {
this.$refs.popup.close()
},
// 数字键盘确定按钮
submitAmount() {
// 校验油罐内油量是否足够
request({
url: "business/petrolStationManagement/oilTank/" + uni.getStorageSync('tankId'),
method: 'get',
}).then((res) => {
if (res.data.storedQuantity - this.liters < 0) {
uni.showToast({
title: "所加油的升数大于油罐内的升数,请重新选择加油升数",
icon: "none"
})
return;
} else {
if (this.value != "" && this.qindex != null) {
this.show = false
if (uni.getStorageSync("inviteStaffId") || this.staffList.length == 0) {
this.toPayment(uni.getStorageSync("inviteStaffId"))
} else {
// this.$refs.popup.open('bottom')
this.toPayment(uni.getStorageSync("inviteStaffId"))
}
} else {
if (this.value == "") {
uni.showToast({
title: "请输入加油金额",
icon: "error"
})
} else {
uni.showToast({
title: "请选择油枪号",
icon: "error"
})
}
}
}
})
},
changeVal(val) {
this.value = val;
this.liters = (this.value / this.oilPrice).toFixed(2)
},
backspaceVal(val) {
this.value = val;
if (val == "") {
this.amount = 0
this.liters = 0
} else {
this.amount = val;
this.liters = (this.value / this.oilPrice).toFixed(2)
}
},
valChange(val) {
// 将每次按键的值拼接到value变量中注意+=写法
uni.vibrateShort({
success: function() {}
});
let index = this.value.indexOf(".")
if (index != -1) {
if ((this.value.length - index) >= 3) {
return;
}
} else {
if (this.value.length >= 7 && val != ".") {
return;
}
}
this.value += val;
this.liters = (this.value / this.oilPrice).toFixed(2)
// console.log(this.value);
},
// 判断token是否与当前连锁店id相同
async getTheJudgmentIsTheSame() {
// 判断是否登录
// if (!this.AppToken) {
// return;
// }
if (this.AppToken) {
await request({
url: 'chainStoreInfo/theJudgmentIsTheSame',
method: 'get',
data: {
"chainStoreId": uni.getStorageSync("chainStoreId")
}
}).then(res => {
if (!res.data) {
uni.removeStorageSync("App-Token");
}
})
}
if (uni.getStorageSync("appltType") == "WECHAT") {
// 判断当前登录的code是否相同
wx.login({
success(res) {
console.log(res);
if (res.code) {
//发起网络请求
request({
url: 'clientApi/sign/mpWxLogin2',
method: "POST",
data: {
code: res.code,
isRefuel: true,
}
}).then(resp => {
if (!resp.data) {
uni.removeStorageSync("App-Token");
}
})
} else {
console.log('登录失败!' + res.errMsg)
}
}
})
}
if (uni.getStorageSync("appltType") == "ALIPAY") {
my.getAuthCode({
scopes: 'auth_base',
success: res => {
const authCode = res.authCode;
console.log(res)
request({
url: "clientApi/sign/alipayLogin/getUserid2",
method: 'post',
data: {
authCode: authCode,
storeId: uni.getStorageSync("storeId"),
isRefuel: true,
},
}).then((resp) => {
if (!resp.data) {
uni.removeStorageSync("App-Token");
}
})
},
fail: err => {
console.log('my.getAuthCode 调用失败', err)
}
});
}
},
// 退格键被点击
backspace() {
uni.vibrateShort({
success: function() {}
});
// 删除value的最后一个字符
if (this.value.length) {
this.value = this.value.substr(0, this.value.length - 1);
this.liters = (this.value / this.oilPrice).toFixed(2)
}
// 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: 110px;
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;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.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;
}
.wrap-box1 {
width: 100%;
display: flex;
flex-wrap: wrap;
overflow-y: scroll;
}
.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;
}
.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;
margin-bottom: 10px;
}
.box-oil2 {
width: 28%;
height: 25px;
line-height: 25px;
display: flex;
align-items: center;
justify-content: center;
color: #666666;
background: white;
margin-right: 13px;
padding: 12px 0px;
border-radius: 6px;
}
.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>