oil-station/gasStation-uni/pages/refuel/refuel.vue

1653 lines
40 KiB
Vue
Raw Normal View History

2024-08-16 18:26:19 +08:00
<template>
<view class="content">
<view class="container">
2024-09-19 11:18:34 +08:00
<!-- <view class="my-header">
2024-08-16 18:26:19 +08:00
<view class="my-text">一键加油</view>
2024-09-19 11:18:34 +08:00
</view> -->
2024-08-16 18:26:19 +08:00
<view class="top">
2024-09-21 15:18:24 +08:00
2024-09-19 11:18:34 +08:00
<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>
2024-08-16 18:26:19 +08:00
</view>
2024-09-19 11:18:34 +08:00
<view style="width: 80%;">
<view class="top-title">{{store.name}}{{store.description ? "("+store.description+")" : ""}}
</view><!--九州加油站总站-->
<view class="top-hui">{{store.address}}</view><!--平安大道东200米-->
2024-08-16 18:26:19 +08:00
</view>
</view>
2024-09-20 17:38:29 +08:00
<view class="pkuang">
<view class="title_">
选择油品油枪
</view>
<view class="input_kuang">
2024-09-21 15:18:24 +08:00
<view class="leftIput" @click="selectShow = true">汽油92#1号枪</view>
<view class="rr_box" @click="Selectemployees = true">小王</view>
2024-09-20 17:38:29 +08:00
</view>
2024-09-21 15:18:24 +08:00
<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>
2024-09-20 17:38:29 +08:00
</view>
<view class="input_kuang">
2024-09-21 15:18:24 +08:00
<view class="leftIput"><input style="width: 100%;" type="text" placeholder="请输入金额" />
</view>
2024-09-20 17:38:29 +08:00
<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>
2024-09-21 15:18:24 +08:00
<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>
2024-09-20 17:38:29 +08:00
</view>
2024-09-21 15:18:24 +08:00
2024-09-20 17:38:29 +08:00
</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>
2024-09-21 15:18:24 +08:00
<view class="anxuan">
<view class="dian"></view>
</view>
2024-09-20 17:38:29 +08:00
</view>
</view>
<view class="title_">
优惠信息
</view>
</view>
2024-09-21 15:18:24 +08:00
<view class="d-bs" style="box-sizing: border-box; padding: 20px;" @click="selectCoupon = true">
2024-09-20 17:38:29 +08:00
<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'">
2024-08-16 18:26:19 +08:00
<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>
2024-09-20 17:38:29 +08:00
</view> -->
2024-08-16 18:26:19 +08:00
2024-09-20 17:38:29 +08:00
<!-- <view v-if="appltType == 'WECHAT'">
2024-08-16 18:26:19 +08:00
<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>
2024-09-20 17:38:29 +08:00
</view> -->
<view style="width: 100%; height: 60px; "></view>
2024-08-16 18:26:19 +08:00
</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>
2024-09-20 17:38:29 +08:00
<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">
2024-09-21 15:18:24 +08:00
<view :class="{'or' :tabIndex ==index }" v-for=" (item,index) in tabList"
@click="setabIndex(index)" :key="index">
2024-09-20 17:38:29 +08:00
<text>{{item.name}}</text> <text>( {{item.num}} )</text>
</view>
</view>
2024-09-21 15:18:24 +08:00
<view class="couponBox" v-if="tabIndex == 0">
2024-09-20 17:38:29 +08:00
<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>
2024-09-21 15:18:24 +08:00
<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>
2024-08-16 18:26:19 +08:00
</view>
2024-09-20 17:38:29 +08:00
</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)">
2024-09-19 11:18:34 +08:00
2024-09-20 17:38:29 +08:00
<view class="">员工名</view>
2024-08-16 18:26:19 +08:00
</view>
</view>
</view>
2024-09-20 17:38:29 +08:00
</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>
2024-08-16 18:26:19 +08:00
</view>
2024-09-18 17:24:51 +08:00
<tabbar :msg="msg"></tabbar>
2024-08-16 18:26:19 +08:00
</view>
</view>
</template>
<script>
import tabbar from "../../components/tabbar/tabbar.vue"
import config from '@/config'
import request from '../../utils/request'
export default {
data() {
return {
2024-09-21 15:18:24 +08:00
selectCoupon: false,
2024-09-20 17:38:29 +08:00
cardType: false,
selectShow: false,
Selectemployees: false,
ConfirmPayment: false,
PaymentDetails: false,
anIndex: 0,
qhindex: 0,
2024-09-18 17:24:51 +08:00
msg: "2",
2024-09-21 15:18:24 +08:00
RandR: false,
2024-09-20 17:38:29 +08:00
tabList: [{
name: '可用优惠券',
num: 1
},
{
name: '不可用优惠券',
num: 2
},
],
tabIndex: 0,
2024-08-16 18:26:19 +08:00
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 {
2024-09-18 17:24:51 +08:00
if (str.includes("storeId")) {
2024-08-16 18:26:19 +08:00
storeId = str.split("=")[1]
2024-09-18 17:24:51 +08:00
} else {
2024-08-16 18:26:19 +08:00
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")
2024-09-18 17:24:51 +08:00
if (uni.getStorageSync("storeId")) {
2024-08-16 18:26:19 +08:00
this.getStore(uni.getStorageSync("storeId"));
// this.getStaffList(uni.getStorageSync("storeId"));
}
2024-09-18 17:24:51 +08:00
2024-08-16 18:26:19 +08:00
}
} else {
if (uni.getStorageSync("storeId")) {
this.getStore(uni.getStorageSync("storeId"));
// this.getStaffList(uni.getStorageSync("storeId"));
2024-09-18 17:24:51 +08:00
} else {
2024-08-16 18:26:19 +08:00
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()
},
2024-09-20 17:38:29 +08:00
2024-08-16 18:26:19 +08:00
methods: {
2024-09-21 15:18:24 +08:00
Couponclose() {
this.selectCoupon = false
},
setabIndex(index) {
this.tabIndex = index
},
2024-09-20 17:38:29 +08:00
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() {
2024-09-21 15:18:24 +08:00
this.Selectemployees = false
2024-09-20 17:38:29 +08:00
},
closePayment() {
this.ConfirmPayment = false
},
close() {
this.PaymentDetails = false
},
2024-08-16 18:26:19 +08:00
// 获取当前位置
getAddress(storeId) {
let _this = this;
uni.getLocation({
// 谷歌使用wgs84 其他使用gcj02
type: 'gcj02', // 使用国测局坐标系
success: function(res) {
if (_this.longitude == "" && _this.latitude == "") {
2024-09-18 17:24:51 +08:00
2024-08-16 18:26:19 +08:00
_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为登录
2024-09-18 17:24:51 +08:00
2024-08-16 18:26:19 +08:00
},
}).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"
})
}
2024-09-18 17:24:51 +08:00
2024-08-16 18:26:19 +08:00
}).catch(err => {})
2024-09-18 17:24:51 +08:00
2024-08-16 18:26:19 +08:00
// 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) {
2024-09-18 17:24:51 +08:00
2024-08-16 18:26:19 +08:00
}
})
},
// 通过sn获取storeId
2024-09-18 17:24:51 +08:00
getStoreIdBySn(sn) {
2024-08-16 18:26:19 +08:00
request({
url: "business/tag/oilTag/getSn/" + sn,
method: 'get'
}).then((res) => {
uni.setStorageSync("storeId", res.data.storeId)
2024-09-18 17:24:51 +08:00
if (res.data.storeId) {
2024-08-16 18:26:19 +08:00
this.getStore(uni.getStorageSync("storeId"));
2024-09-18 17:24:51 +08:00
} else {
2024-08-16 18:26:19 +08:00
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;
2024-09-20 17:38:29 +08:00
padding-top: 10px;
2024-09-19 11:18:34 +08:00
2024-08-16 18:26:19 +08:00
}
.my-header {
width: 100%;
height: 88px;
2024-09-19 11:18:34 +08:00
2024-08-16 18:26:19 +08:00
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;
2024-09-19 11:18:34 +08:00
margin: 10px auto;
2024-08-16 18:26:19 +08:00
box-sizing: border-box;
padding: 10px;
display: flex;
justify-content: space-between;
2024-09-19 11:18:34 +08:00
2024-08-16 18:26:19 +08:00
}
.top-title {
font-size: 16px;
}
.top-img {
width: 46px;
height: 46px;
2024-09-19 11:18:34 +08:00
background-color: #eee;
2024-08-16 18:26:19 +08:00
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;
2024-09-19 13:54:13 +08:00
margin: 0px 20px;
2024-08-16 18:26:19 +08:00
}
.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;
}
2024-09-20 17:38:29 +08:00
.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;
2024-09-21 15:18:24 +08:00
display: flex;
align-items: center;
2024-09-20 17:38:29 +08:00
}
.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;
}
2024-09-21 15:18:24 +08:00
.couponBox_h {
width: 100%;
box-sizing: border-box;
padding: 10px;
margin: 15px auto;
border: 1px solid #999;
}
2024-09-20 17:38:29 +08:00
.cou_top {
width: 100%;
display: flex;
justify-content: space-between;
}
.c-r-num {
font-weight: 600;
font-size: 16px;
color: #E02020;
}
2024-09-21 15:18:24 +08:00
.c-h-num {
font-weight: 600;
font-size: 16px;
color: #999;
}
2024-09-20 17:38:29 +08:00
.c_title {
font-size: 14px;
color: #333333;
}
.qaz {
2024-09-21 15:18:24 +08:00
width: 12px;
height: 12px;
2024-09-20 17:38:29 +08:00
border-radius: 50%;
border: 1px solid #999999;
margin-right: 5px;
}
.sm_r-zie {
font-weight: 400;
font-size: 10px;
color: #E02020;
2024-09-21 15:18:24 +08:00
display: flex;
align-items: center;
}
.sm_h-zie {
font-weight: 400;
font-size: 10px;
color: #999;
display: flex;
align-items: center;
2024-09-20 17:38:29 +08:00
}
.sm_size {
font-size: 10px;
color: #333333;
2024-09-21 15:18:24 +08:00
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;
2024-09-20 17:38:29 +08:00
}
2024-09-21 15:18:24 +08:00
</style>