oil-station/gasStation-uni/pages/refuel/refuel.vue
2024-10-08 10:59:23 +08:00

1663 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="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">{{oilTypeName || '--'}}{{oilGunName || ''}}
</view>
<view class="rr_box" @click="Selectemployees = true">{{staffName || '--'}}</view>
</view>
<view style="display: flex;justify-content: space-between;">
<view class="title_">
加油金额
</view>
<view class="sm_r-zie" style="font-weight: bold;">{{oilPrice || 0}}元/{{oilUnit || 'L'}}</view>
</view>
<view class="input_kuang">
<view class="leftIput">
¥<input style="width: 100%;" v-model="oilOrder.orderAmount" @input="changeAmount()"
type="text" placeholder="请输入金额" />
</view>
<view class="rr_box">{{oilOrder.oilNum || 0}}L</view>
</view>
<view class="title_">
付款备注
</view>
<view class="input_kuang">
<input type="text" placeholder="备注" v-model="oilOrder.remark" 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 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">¥{{oilOrder.payAmount}}</view>
<view class="orsize">共优惠¥{{oilOrder.discountAmount || 0}}</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 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 staffList" :key="index" @click="setadindex(index,item)">
<view class="">{{item.realName}}</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 oilNumberList"
:key="index" @click="setQindex(index,item)">
<view>{{item.oilName}}</view>
</view>
</scroll-view>
<view class="wr_box">
<view class="xanniu" :class="{'acvit' : anIndex == index }"
v-for="(item,index) in oilGunList" :key="index" @click="setQhindex(index,item)">
<view class="">{{item.gunName}}</view>
<view class="">{{item.oilName}}</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="">消费应支付{{oilOrder.payAmount}}元</view>
<view class="sm-size">会员-储值卡余额8900.99</view>
</view>
<view class="anxuan">
<view class="dian"></view>
</view>
</view>
</view>
<view class="annius" @click="payment()">立即支付{{oilOrder.payAmount}}元</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="">{{oilTypeName || '--'}}{{oilGunName || ''}}</view>
</view>
<view class="p_bs">
<view class="">员工</view>
<view class="">{{staffName || '--'}}</view>
</view>
<view class="p_bs">
<view class="">油品单价</view>
<view class="">{{oilPrice || 0}}元/{{oilUnit || 'L'}}</view>
</view>
<view class="p_bs">
<view class="">加油升数</view>
<view class="">约{{oilOrder.oilNum}}L</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">{{oilOrder.payAmount}}</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: "济南槐荫区"
},
// 当前店铺id
storeId: "",
// 油号列表信息
oilNumberList: [],
// 油枪列表信息
oilGunList: [],
// 员工列表信息
staffList: [],
// 加油金额列表
amountList: [100, 200, 300],
// url信息
baseUrl: this.$baseUrl,
// 油价
oilPrice: 0,
// 油品单位
oilUnit: "",
AppToken: uni.getStorageSync("App-Token"),
// 选择的油品类型信息
oilTypeName: '',
// 选择的油枪信息
oilGunName: '',
// 店员名称
staffName: '',
// 油品订单信息
oilOrder: {
storeId: "",
couponId: "",
commissionAmount: 0,
staffId: "",
terminal: "applet",
oils: "",
oilGunNum: "",
oilNum: 0,
orderAmount: 0,
discountAmount: 0,
payAmount: 0,
payType: uni.getStorageSync("appltType"),
},
// 优惠券列表
couponList: [],
// 是否登录
ifLogin: false,
orderInfo:{},
}
},
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"));
}
}
} else {
if (uni.getStorageSync("storeId")) {
this.getStore(uni.getStorageSync("storeId"));
} else {
this.getStoreIdBySn(uni.getStorageSync("sn"));
}
}
if (query.staffId) {
uni.setStorageSync("inviteStaffId", query.staffId)
uni.setStorageSync("storeId", query.storeId)
this.staffId = query.staffId
this.storeId = query.storeId
this.getStore(uni.getStorageSync("storeId"));
}
},
onShow() {
this.getStore(uni.getStorageSync("storeId"));
this.getTheJudgmentIsTheSame()
},
methods: {
// 支付接口
payment() {
this.ifLogin = this.AppToken ? true : false
let map = {
orderNo: this.oilOrder.orderNo,
payAmount: this.oilOrder.payAmount,
discountAmount: this.oilOrder.discountAmount,
oilCardAmount: '',
oilCardLiters: this.oilOrder.oilCardAmount || 0,
balanceAmount: this.oilOrder.balanceAmount || 0,
isOilStorageCard: false,
tankId: this.oilOrder.tankId,
isUseChildCard: false,
// activeId: this.preferentialData.activeId,
// cardFavorableId: this.preferentialData.cardFavorableId,
// recordId: this.preferentialData.recordId,
// type: this.preferentialData.type,
// balanceAmountSale: this.balanceRedece,
// oilCardAmountSale: this.oilCardRedece,
ifLogin: this.ifLogin,
// levelAmount: this.levelAmount,
// activeAmount: this.activeAmount
};
let _this = this;
request({
url: "business/oilOrder/appletPay",
method: 'post',
data: map,
}).then(res => {
let payProvider = "wxpay"
if (_this.appltType == "WECHAT") {
payProvider = "wxpay"
} else {
payProvider = "alipay"
}
if (res.data.error) {
request({
url: "/business/allOrderInfo/orderStatus",
method: 'post',
data: {
"orderNo": _this.oilOrder.orderNo,
"status": "payFail"
},
}).then((ress) => {})
uni.showToast({
title: res.data.error,
icon: "none"
})
return;
}
if (res.data.code == "error") {
request({
url: "/business/allOrderInfo/orderStatus",
method: 'post',
data: {
"orderNo": _this.oilOrder.orderNo,
"status": "payFail"
},
}).then((ress) => {})
uni.showToast({
title: "支付失败,请联系商家",
icon: "none"
})
return;
}
if (res.data.success == "ok") {
uni.redirectTo({
url: '/pagesRefuel/orderSuccess/index?orderNo=' + _this.oilOrder.orderNo,
})
return;
}
if (res.data.resultMsg == "商户订单号重复") {
uni.showToast({
title: "商户订单号重复,请重新选择订单信息进行支付!",
icon: "none"
})
}
if (res.data.data.reservedPayInfo) {
_this.orderInfo = JSON.parse(res.data.data.reservedPayInfo);
uni.requestPayment({
// 微信支付provider: 'wxpay' 支付宝支付 'alipay'
provider: payProvider,
// 时间戳
timeStamp: _this.orderInfo.timeStamp,
// 随机字符串
nonceStr: _this.orderInfo.nonceStr,
// 固定值
package: _this.orderInfo.package,
// 解密方式
signType: 'MD5',
// 支付签名
paySign: _this.orderInfo.paySign,
success: function(res) {
console.log('success');
uni.redirectTo({
url: '/pagesRefuel/orderSuccess/index?orderNo=' + _this.oilOrder.orderNo,
})
},
fail: function(err) {
request({
url: "/business/allOrderInfo/orderStatus",
method: 'post',
data: {
"orderNo": res.data.data.orderNo,
"status": "payFail"
},
}).then((res) => {
uni.showToast({
title: "支付失败!",
icon: "error"
})
})
console.log('fail:', err);
}
});
}
if (_this.appltType == "ALIPAY") {
my.tradePay({
tradeNO: res.data.data.reservedTransactionId
}, function(resp) {
if (resp.resultCode == '9000') {
console.log("支付成功")
uni.redirectTo({
url: '/pagesRefuel/orderSuccess/index?orderNo=' + _this.oilOrder.orderNo,
})
} else {
request({
url: "/business/allOrderInfo/orderStatus",
method: 'post',
data: {
"orderNo": res.data.data.orderNo,
"status": "payFail"
},
}).then((res) => {
uni.showToast({
title: "支付失败!",
icon: "error"
})
})
console.log('支付失败,' + resp.resultCode);
}
});
}
})
},
changeAmount() {
if (this.oilOrder.orderAmount) {
this.oilOrder.payAmount = this.oilOrder.orderAmount - this.oilOrder.discountAmount
this.oilOrder.oilNum = (this.oilOrder.orderAmount / this.oilPrice).toFixed(2)
}
},
getCouponList() {
request({
url: "pay/paycenter/getCoupon",
method: 'post',
data: {
userId: uni.getStorageSync('userId'),
oilId: this.oilOrder.oils,
oilAmount: this.oilOrder.amount,
oilLiter: this.oilOrder.oilNum,
payWay: this.oilOrder.payType,
},
}).then((res) => {
}).catch(err => {})
},
Couponclose() {
this.selectCoupon = false
},
setabIndex(index) {
this.tabIndex = index
},
cardTypeclose() {
this.cardType = false
},
setQindex(index, data) {
this.qhindex = index
this.oilGunList = data.oilGunList
if (data.oilGunList.length > 0) {
this.oilOrder.oilGunNum = data.oilGunList[0].id
this.oilPrice = data.oilPrice
this.oilUnit = data.unit
this.oilOrder.oils = data.oilNameId
this.oilOrder.tankId = data.oilGunList[0].tankId
uni.setStorageSync("tankId", data.oilGunList[0].tankId)
this.oilGunName = data.oilGunList[0].gunName
}
this.oilTypeName = data.oilType + data.oilName
},
ypClose() {
this.selectShow = false
},
setadindex(index, data) {
this.anIndex = index
this.Selectemployees = false
this.oilOrder.staffId = data.id
this.staffName = data.realName
},
setQhindex(index, data) {
this.qhindex = index
this.selectShow = false
this.oilOrder.oilGunNum = data.id
this.oilOrder.tankId = data.tankId
uni.setStorageSync("tankId", data.tankId)
this.oilGunName = data.gunName
},
Confirmclose() {
this.ConfirmPayment = false
},
goPayment() {
// 判断一下按照什么方式支付的
if (this.oilOrder.orderAmount <= 0) {
uni.showToast({
title: "请先输入加油金额",
icon: 'none'
})
return;
}
request({
url: "business/petrolStationManagement/oilTank/" + uni.getStorageSync('tankId'),
method: 'get',
}).then((res) => {
if (res.data.storedQuantity - this.oilOrder.oilNum < 0) {
uni.showToast({
title: "所加油的升数大于油罐内的升数,请重新选择加油升数",
icon: "none"
})
return;
} else {
this.ConfirmPayment = true
this.addOrder()
}
})
},
// 点击支付添加油品订单信息
addOrder() {
this.oilOrder.storeId = uni.getStorageSync('storeId')
request({
url: "business/oilOrder/addOilOrder",
method: 'post',
data: this.oilOrder,
}).then((res) => {
console.log(res,578);
this.oilOrder = res.data
})
},
Selectclose() {
this.Selectemployees = 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 => {})
},
fail: function(err) {
_this.getStore(2);
console.log('获取位置信息失败: ' + err.errMsg);
}
});
},
// 通过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"));
}
})
},
// 获取门店信息
getStore(id) {
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)
}).catch(err => {})
},
// 获取当前店铺油号信息
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
_this.oilTypeName = res.data[0].oilType + res.data[0].oilName
if (res.data[0].oilGunList) {
_this.oilGunList = res.data[0].oilGunList
_this.oilOrder.oilGunNum = res.data[0].oilGunList[0].id
_this.oilOrder.tankId = res.data[0].oilGunList[0].tankId
uni.setStorageSync("tankId", res.data[0].oilGunList[0].tankId)
_this.oilGunName = res.data[0].oilGunList[0].gunName
}
}
})
},
// 获取当前店铺油号对应的油枪信息
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
if (res.data && res.data.length > 0) {
_this.oilOrder.staffId = res.data[0].id
_this.staffName = res.data[0].realName
}
})
},
// 跳转订单详情页,并支付
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)
},
// 数字键盘确定按钮
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)
}
},
// 判断token是否与当前连锁店id相同
async getTheJudgmentIsTheSame() {
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)
}
});
}
},
}
}
</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>