oil-station/gasStation-uni/pages/refuel/refuel.vue
2024-09-21 15:18:24 +08:00

1653 lines
40 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="dis">
<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>
</view>
<view class="pkuang">
<view class="title_">
选择油品油枪
</view>
<view class="input_kuang">
<view class="leftIput" @click="selectShow = true">汽油92#1号枪</view>
<view class="rr_box" @click="Selectemployees = true">小王</view>
</view>
<view style="display: flex;justify-content: space-between;">
<view class="title_">
加油金额
</view>
<view class="sm_r-zie" style="font-weight: bold;">7.26元/L</view>
</view>
<view class="input_kuang">
<view class="leftIput">¥<input style="width: 100%;" type="text" placeholder="请输入金额" />
</view>
<view class="rr_box">36.55L</view>
</view>
<view class="title_">
付款备注
</view>
<view class="input_kuang">
<input type="text" placeholder="备注" style="margin-left: 10px;" />
</view>
</view>
<view class="b_"></view>
<view class="pkuang">
<view class="title_">
支付方式
</view>
<view class="d-bs">
<image src="../../static/icon/hyk.png" style="width: 35px; height: 35px; "></image>
<view class="br-box">
<view style="font-size: 14px;">
<view class="">会员卡类型</view>
<view class="d-bs" style="align-items: center;border-bottom: none;"
@click="cardType = true">
<view style="font-size: 12px;">储值卡余额6532.89</view>
<view style="line-height: 20px;">
<u-icon name="arrow-right" size="12px"></u-icon>
</view>
</view>
</view>
<!-- <view style="display: flex;align-items: center;">
<view class="anxuan">
<view class="dian"></view>
</view>
<u-icon name="arrow-right"></u-icon>
</view> -->
<view class="anxuan">
<view class="dian"></view>
</view>
</view>
</view>
<view class="d-bs">
<image src="../../static/icon/wz.png" style="width: 35px; height: 35px; "></image>
<view class="br-box">
<view class="">微信</view>
<view class="anxuan">
<view class="dian"></view>
</view>
</view>
</view>
<view class="title_">
优惠信息
</view>
</view>
<view class="d-bs" style="box-sizing: border-box; padding: 20px;" @click="selectCoupon = true">
<view class="">优惠券</view>
<view class="d-s">
<view class="">-20.00</view>
<u-icon name="arrow-right"></u-icon>
</view>
</view>
<view class="new-box" style="padding-top: 0px;">
<view class="title_">
消费有礼
</view>
<view class="bsd">
<view class="">积分</view>
<view class="">+289</view>
</view>
<view class="bsd">
<view class="">洗车券</view>
<view class="">+3</view>
</view>
</view>
<view class="bs-box">
<view class="">
<view class="onetitle">¥245.88</view>
<view class="orsize">共优惠¥10.00</view>
</view>
<view class="d-s">
<view class="d-s" style="color: #999999;font-size: 12px; margin-right: 10px;"
@click="PaymentDetails = true">
<view class="">明细</view>
<u-icon name="arrow-down" size="12"></u-icon>
</view>
<view class="anniuf" @click="goPayment()">立即支付</view>
</view>
</view>
<!--
<view v-if="appltType == 'ALIPAY'">
<view class="fa-box">
<view class="fa-title">选择油号 <text class="top-hui"> 请务必与员工确认类型</text> </view>
<view class="wrap-box">
<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 }" 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'">
<view class="fa-box">
<view class="fa-title">选择油号 <text class="top-hui"> 请务必与员工确认类型</text> </view>
<view class="wrap-box">
<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 }" 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 style="width: 100%; height: 60px; "></view>
</view>
<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>
<u-popup :show="selectCoupon" closeable="true" mode="bottom" :round="10" @close="Couponclose">
<view class="popup-box">
<view class="p_title">选择优惠券</view>
<view class="p-tab">
<view :class="{'or' :tabIndex ==index }" v-for=" (item,index) in tabList"
@click="setabIndex(index)" :key="index">
<text>{{item.name}}</text> <text>( {{item.num}} )</text>
</view>
</view>
<view class="couponBox" v-if="tabIndex == 0">
<view class="cou_top">
<view class="d-s">
<view class="qaz"></view>
<view class="c_title">油品消费满减券</view>
</view>
<view class="c-r-num">¥10</view>
</view>
<view class="cou_top">
<view class="sm_size">有效期2024-08-05 14:15:12~2024-08-15 14:15:11</view>
<view class="sm_r-zie">满200可用</view>
</view>
<view class="dashed_box"></view>
<view class="cou_top">
<view class="sb_size" :class="{ 'sb_xl' : RandR == true }">
以下支付方式可用微信、支付宝、云闪付、pos刷卡、会以下支付方式可用微信、支付宝、云闪付、pos刷卡、会以下支付方式可用微信、支付宝、云闪付、pos刷卡、会以下支付方式可用微信、支付宝、云闪付、pos刷卡、会以下支付方式可用微信、支付宝、云闪付、pos刷卡、会以下支付方式可用微信、支付宝、云闪付、pos刷卡、会以下支付方式可用微信、支付宝、云闪付、pos刷卡
</view>
<view class="sm_r-zie" style="height: 14px; " @click="RandR =! RandR">适用详情 <u-icon
name="arrow-right" color="#E02020" size="10"></u-icon> </view>
</view>
</view>
<view class="couponBox_h" v-if="tabIndex == 1">
<view class="cou_top">
<view class="d-s">
<view class="qaz"></view>
<view class="c_title">油品消费满减券</view>
</view>
<view class="c-h-num">¥10</view>
</view>
<view class="cou_top">
<view class="sm_size">有效期2024-08-05 14:15:12~2024-08-15 14:15:11</view>
<view class="sm_h-zie">满200可用</view>
</view>
<view class="dashed_box_h"></view>
<view class="cou_top">
<view class="sb_size" :class="{ 'sb_xl' : RandR == true }">
以下支付方式可用微信、支付宝、云闪付、pos刷卡、会以下支付方式可用微信、支付宝、云闪付、pos刷卡、会以下支付方式可用微信、支付宝、云闪付、pos刷卡、会以下支付方式可用微信、支付宝、云闪付、pos刷卡、会以下支付方式可用微信、支付宝、云闪付、pos刷卡、会以下支付方式可用微信、支付宝、云闪付、pos刷卡、会以下支付方式可用微信、支付宝、云闪付、pos刷卡
</view>
<view class="sm_h-zie" style="height: 14px; " @click="RandR =! RandR">适用详情 <u-icon
name="arrow-right" color="#999" size="10"></u-icon> </view>
</view>
<view class="dashed_box_h"></view>
<view class="sm_r-zie" style="height: 14px; margin-bottom: 10px; " @click="RandR =! RandR">
不可用原因 <u-icon name="arrow-right" color="#E02020" size="10"></u-icon> </view>
<view class="sb_size">
不满足优惠券使用时间
不与其他优惠同时使用
</view>
</view>
</view>
</u-popup>
<u-popup :show="cardType" closeable="true" mode="bottom" :round="10" @close="cardTypeclose">
<view class="popup-box">
<view class="p_title">选择会员卡类型</view>
<view class="c_pox">
<view class="c_bs" style="margin-bottom: 15px;">
<view class="">储值卡</view>
<view class="anniubai">充值</view>
</view>
<view class="c_bs">
<view class="">123456.98</view>
<view class="">NO.xxxxxxxxxxxxxxxxx</view>
</view>
</view>
<view class="c_pox" style="background: url('../../static/imgs/tyktc.png'); ">
<view class="c_bs" style="margin-bottom: 15px; ">
<view class="">囤油卡</view>
<view class="anniubai" style="color: #70D0C7;">充值</view>
</view>
<view class="c_bs">
<view class="">123456.98</view>
<view class="">NO.xxxxxxxxxxxxxxxxx</view>
</view>
</view>
</view>
</u-popup>
<u-popup :show="Selectemployees" closeable="true" mode="bottom" :round="10" @close="Selectclose">
<view class="popup-box">
<view class="p_title">选择员工</view>
<view class="wr_box">
<view class="xanniu" :class="{'acvit' : anIndex == index }" v-for="(item,index) in 12"
:key="index" @click="setadindex(index)">
<view class="">员工名</view>
</view>
</view>
</view>
</u-popup>
<u-popup :show="selectShow" closeable="true" mode="bottom" :round="10" @close="ypClose">
<view class="popup-box">
<view class="p_title">选择油品油枪</view>
<scroll-view scroll-x="true" class="tap-top">
<view class="sz" :class="{'acvit': qhindex == index}" v-for="(item,index) in 5" :key="index"
@click="setQindex(index)">
<view>全部</view>
</view>
</scroll-view>
<view class="wr_box">
<view class="xanniu" :class="{'acvit' : anIndex == index }" v-for="(item,index) in 9"
:key="index" @click="setadindex(index)">
<view class="">1号枪</view>
<view class="">汽油92#</view>
</view>
</view>
</view>
</u-popup>
<u-popup :show="ConfirmPayment" closeable="true" mode="bottom" :round="10" @close="Confirmclose">
<view class="popup-box">
<view class="p_title">确认支付</view>
<view class="p_ds">
<image src="../../static/imgs/zficon.png" style="width: 36px; height: 36px; "></image>
<view class="p_ds" style="width: 85%;">
<view class="">
<view class="">消费应支付245.99元</view>
<view class="sm-size">会员-储值卡余额8900.99</view>
</view>
<view class="anxuan">
<view class="dian"></view>
</view>
</view>
</view>
<view class="annius">立即支付245.99元</view>
</view>
</u-popup>
<u-popup :show="PaymentDetails" closeable="true" mode="bottom" :round="10" @close="close">
<view class="popup-box">
<view class="p_title">待支付明细</view>
<view class="">商品信息</view>
<view class="p_bs">
<view class="">油品油枪</view>
<view class="">汽油92#1号枪</view>
</view>
<view class="p_bs">
<view class="">员工</view>
<view class="">小王</view>
</view>
<view class="p_bs">
<view class="">油品单价</view>
<view class="">7.28元/L</view>
</view>
<view class="p_bs">
<view class="">加油升数</view>
<view class="">约36.88L</view>
</view>
<view class="p_bs">
<view class="">加油金额</view>
<view class="">256.89元</view>
</view>
<view class="p_x"></view>
<view class="">商品信息</view>
<view class="p_bs">
<view class="">优惠券</view>
<view class="r-size">-10.00</view>
</view>
<view class="p_x"></view>
<view class="">消费有礼</view>
<view class="p_bs">
<view class="">积分</view>
<view class="r-size">+567</view>
</view>
<view class="p_bs">
<view class="">洗车券</view>
<view class="r-size">+6</view>
</view>
<view class="p_x"></view>
<view class="p_bs">
<view class="">合计待支付</view>
<view class="r-size">568.99</view>
</view>
<view class="p_x"></view>
</view>
</u-popup>
</view>
<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 {
selectCoupon: false,
cardType: false,
selectShow: false,
Selectemployees: false,
ConfirmPayment: false,
PaymentDetails: false,
anIndex: 0,
qhindex: 0,
msg: "2",
RandR: false,
tabList: [{
name: '可用优惠券',
num: 1
},
{
name: '不可用优惠券',
num: 2
},
],
tabIndex: 0,
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: {
Couponclose() {
this.selectCoupon = false
},
setabIndex(index) {
this.tabIndex = index
},
cardTypeclose() {
this.cardType = false
},
setQindex() {
this.qhindex = false
},
ypClose() {
this.selectShow = false
},
setadindex(index) {
this.anIndex = index
this.Selectemployees = false
},
Confirmclose() {
this.ConfirmPayment = false
},
goPayment() {
// 判断一下按照什么方式支付的
this.ConfirmPayment = true
},
open() {
},
Selectclose() {
this.Selectemployees = false
},
closePayment() {
this.ConfirmPayment = false
},
close() {
this.PaymentDetails = false
},
// 获取当前位置
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: 10px;
}
.my-header {
width: 100%;
height: 88px;
display: flex;
align-items: center;
justify-content: center;
color: white;
.my-text {
margin-top: 40px
}
position: fixed;
top: 0px;
}
.top {
width: 100%;
height: 200px;
box-sizing: border-box;
padding: 1px;
}
.top-box {
width: 90%;
height: 110px;
background-color: #ffffff;
border-radius: 8px;
margin: 10px auto;
box-sizing: border-box;
padding: 10px;
display: flex;
justify-content: space-between;
}
.top-title {
font-size: 16px;
}
.top-img {
width: 46px;
height: 46px;
background-color: #eee;
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;
margin: 0px 20px;
}
.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;
}
.input_kuang {
width: 100%;
border-radius: 4px;
border: 1px solid #EEEEEE;
height: 40px;
display: flex;
align-items: center;
justify-content: space-between;
}
.leftIput {
box-sizing: border-box;
padding-left: 10px;
display: flex;
align-items: center;
}
.rr_box {
width: 80px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-left: 1px solid #eee;
}
.pkuang {
box-sizing: border-box;
padding: 10px 20px;
}
.title_ {
font-weight: 600;
font-size: 16px;
color: #333333;
margin: 10px 0px;
}
.b_ {
width: 90%;
border-bottom: 1px solid #eee;
margin: 5px auto;
}
.d-bs {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #EEEEEE;
box-sizing: border-box;
padding: 10px 0px;
}
.br-box {
width: 85%;
display: flex;
align-items: center;
justify-content: space-between;
}
.d-s {
display: flex;
align-items: center;
}
.new-box {
width: 100%;
box-sizing: border-box;
padding: 20px;
border-bottom: 1px solid #EEEEEE;
}
.bsd {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.bs-box {
box-sizing: border-box;
width: 100%;
padding: 20px 15px;
display: flex;
align-items: center;
justify-content: space-between;
}
.anniuf {
width: 90px;
height: 30px;
background: #FA6400;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.onetitle {
font-weight: 600;
font-size: 24px;
color: #333333;
}
.orsize {
font-size: 12px;
color: #FA6400;
}
.popup-box {
border-radius: 10px;
background: #fff;
width: 100%;
box-sizing: border-box;
padding: 15px;
}
.p_title {
text-align: center;
width: 100%;
border-bottom: 1px solid #EEEEEE;
box-sizing: border-box;
padding-bottom: 15px;
margin-bottom: 15px;
}
.p-tab {
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
box-sizing: border-box;
padding: 0px 15px;
color: #333333;
}
.p_bs {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
color: #666666;
margin: 5px auto;
}
.p_x {
width: 100%;
background: #eee;
height: 1px;
margin: 10px auto;
}
.r-size {
font-size: 14px;
color: #E02020;
}
.p_ds {
display: flex;
align-items: center;
justify-content: space-between;
}
.anxuan {
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid #999999;
display: flex;
align-items: center;
justify-content: center;
}
.dian {
width: 7px;
height: 7px;
border-radius: 50%;
background: #999999;
}
.sm-size {
font-size: 12px;
color: #333333;
}
.annius {
width: 305px;
height: 40px;
background: #FA6400;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
margin: 15px auto;
margin-top: 35px;
}
.wr_box {
display: flex;
align-items: center;
width: 100%;
flex-wrap: wrap;
}
.xanniu {
width: 32%;
box-sizing: border-box;
padding: 10px;
text-align: center;
border: 1px solid #EEEEEE;
margin-right: 1%;
margin-bottom: 4%;
font-size: 14px;
}
.acvit {
border: 1px solid #FA6400 !important;
background: rgba(250, 100, 0, 0.15) !important;
color: #FA6400 !important;
}
.tap-top {
white-space: nowrap;
margin-bottom: 15px;
}
.sz {
border: 1px solid #EEEEEE;
box-sizing: border-box;
display: inline-block;
font-size: 14px;
color: #333333;
border-radius: 50px;
padding: 5px 15px;
margin-right: 10px;
}
.c_pox {
height: 75px;
width: 100%;
margin: 10px auto;
background: #FA6400;
box-sizing: border-box;
padding: 10px;
color: #fff;
background: url('../../static/imgs/czktc.png') no-repeat;
background-size: 100% 100%;
}
.c_bs {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.anniubai {
width: 50px;
height: 20px;
background: #FFFFFF;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: #FA6400;
font-size: 14px;
}
.or {
color: #FA6400 !important;
}
.couponBox {
width: 100%;
box-sizing: border-box;
padding: 10px;
margin: 15px auto;
border: 1px solid #FA6400;
}
.couponBox_h {
width: 100%;
box-sizing: border-box;
padding: 10px;
margin: 15px auto;
border: 1px solid #999;
}
.cou_top {
width: 100%;
display: flex;
justify-content: space-between;
}
.c-r-num {
font-weight: 600;
font-size: 16px;
color: #E02020;
}
.c-h-num {
font-weight: 600;
font-size: 16px;
color: #999;
}
.c_title {
font-size: 14px;
color: #333333;
}
.qaz {
width: 12px;
height: 12px;
border-radius: 50%;
border: 1px solid #999999;
margin-right: 5px;
}
.sm_r-zie {
font-weight: 400;
font-size: 10px;
color: #E02020;
display: flex;
align-items: center;
}
.sm_h-zie {
font-weight: 400;
font-size: 10px;
color: #999;
display: flex;
align-items: center;
}
.sm_size {
font-size: 10px;
color: #333333;
width: 80%;
white-space: nowrap;
//不换行
overflow: hidden; //超出部分隐藏
text-overflow: ellipsis; //文本溢出显示省略号
}
.sb_size {
font-size: 10px;
color: #333333;
width: 80%;
white-space: nowrap; //不换行
overflow: hidden; //超出部分隐藏
text-overflow: ellipsis; //文本溢出显示省略号
}
.sb_xl {
white-space: pre-wrap !important;
}
.dashed_box {
width: 100%;
border-bottom: 1px dashed #E02020;
margin: 10px auto;
}
.dashed_box_h {
width: 100%;
border-bottom: 1px dashed #999;
margin: 10px auto;
}
</style>