caoliancun
/
company_h5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新

Browse Source
pull/2/head
xiaozhiyong 2 years ago
parent ee6ebb71f1
commit 68152e6b42
5 changed files with 349 additions and 324 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 152
      src/api/oil-order.js
  2. 41
      src/permission.js
  3. 5
      src/store/piniaIndex.js
  4. 10
      src/utils/request.js
  5. 465
      src/views/cashier/cashierIndex.vue

152
src/api/oil-order.js
Unescape View File

@ -1,80 +1,80 @@
import request from '@/utils/request' import request from '@/utils/request'
const service_name = "oil-site" const service_name = 'oil-site'
const group_name = "oilSiteOrderInfo" const group_name = 'oilSiteOrderInfo'
const Img_name = 'oil-interfaces' const Img_name = 'oil-interfaces'
export default { export default {
// 下单 // 下单
createOrder(data) { createOrder(data) {
return request({ return request({
url: `/oil-site/oilSiteOrderInfo/createH5Order`, url: `/oil-site/oilSiteOrderInfo/createOrder`,
method: 'post', method: 'post',
data: data data: data
}) })
}, },
// 主动支付 // 主动支付
payOrder(data) { payOrder(data) {
return request({ return request({
url: `/${service_name}/${group_name}/payOrder`, url: `/${service_name}/${group_name}/payOrder`,
method: 'post', method: 'post',
data: data data: data
}) })
}, },
aggregatePay(data) { aggregatePay(data) {
return request({ return request({
url: `/${service_name}/${group_name}/aggregatePay`, url: `/${service_name}/${group_name}/aggregatePay`,
method: 'post', method: 'post',
data: data data: data
}) })
}, },
getOrderInfoByPage(data) { getOrderInfoByPage(data) {
return request({ return request({
url: `/${service_name}/${group_name}/getOrderInfoByPage`, url: `/${service_name}/${group_name}/getOrderInfoByPage`,
method: 'post', method: 'post',
data: data data: data
}) })
}, },
getOrderPayInfo(id) { getOrderPayInfo(id) {
return request({ return request({
url: `/${service_name}/${group_name}/getOrderPayInfoH5/${id}`, url: `/${service_name}/${group_name}/getOrderPayInfo/${id}`,
method: 'get' method: 'get'
}) })
}, },
cancelOrder(id) { cancelOrder(id) {
return request({ return request({
url: `/${service_name}/${group_name}/cancelOrder/${id}`, url: `/${service_name}/${group_name}/cancelOrder/${id}`,
method: 'get' method: 'get'
}) })
}, },
delOrder(id) { delOrder(id) {
return request({ return request({
url: `/${service_name}/${group_name}/delOrder/${id}`, url: `/${service_name}/${group_name}/delOrder/${id}`,
method: 'get' method: 'get'
}) })
}, },
selOrder(id) { selOrder(id) {
return request({ return request({
url: `/${service_name}/${group_name}/selOrder/${id}`, url: `/${service_name}/${group_name}/selOrder/${id}`,
method: 'get' method: 'get'
}) })
}, },
//尿素站订单接口 //尿素站订单接口
findXoiUreaPage(data) { findXoiUreaPage(data) {
return request({ return request({
url: `/oil-finance/xoilUreaOrder/findXoiUreaPage`, url: `/oil-finance/xoilUreaOrder/findXoiUreaPage`,
method: 'post', method: 'post',
data: data data: data
}) })
}, },
findOneByOrderId(id) { findOneByOrderId(id) {
return request({ return request({
url: `/oil-finance/xoilUreaOrder/findOneByOrderId?orderId=${id}`, url: `/oil-finance/xoilUreaOrder/findOneByOrderId?orderId=${id}`,
method: 'get' method: 'get'
}) })
}, },
queryBarrelOrderDetails(id) { queryBarrelOrderDetails(id) {
return request({ return request({
url: `/oil-finance/xoilUreaOrderRelation/queryBarrelOrderDetails?orderId=${id}`, url: `/oil-finance/xoilUreaOrderRelation/queryBarrelOrderDetails?orderId=${id}`,
method: 'get' method: 'get'
}) })
}, }
} }

41
src/permission.js
Unescape View File

@ -3,7 +3,7 @@ import useStore from './store/piniaIndex'
import { obtainUrlPathParameterTarget } from '@/utils/index.js' import { obtainUrlPathParameterTarget } from '@/utils/index.js'
import { getToken, removeToken } from '@/utils/auth' import { setToken, getToken, removeToken } from '@/utils/auth'
import { Notify } from 'vant' import { Notify } from 'vant'
let whiteList = ['/home'] let whiteList = ['/home']
@ -16,17 +16,25 @@ router.beforeEach(async (to, from, next) => {
// removeToken() // removeToken()
!whiteList.includes(to.path) && store.getPosition() !whiteList.includes(to.path) && store.getPosition()
// store.login({ username: '15098826302', networkId: '1522478429548756992' })
if (!token) { if (!token) {
// let paramsTarget = obtainUrlPathParameterTarget(location.href)
// sessionStorage.setItem('paramsTarget', JSON.stringify(paramsTarget))
// store.login(paramsTarget).then(
// () => {
// next()
// },
// () => {
// Notify('登陆失败，请退出重试')
// }
// )
let paramsTarget = obtainUrlPathParameterTarget(location.href) let paramsTarget = obtainUrlPathParameterTarget(location.href)
sessionStorage.setItem('paramsTarget', JSON.stringify(paramsTarget)) if (paramsTarget.token) {
store.login(paramsTarget).then( setToken(paramsTarget.token)
() => { store.getUser()
next() next()
}, } else Notify('登陆失败，请退出重试')
() => {
Notify('登陆失败，请退出重试')
}
)
return return
} }
@ -40,12 +48,13 @@ router.beforeEach(async (to, from, next) => {
// } // }
// } // }
//拦截 如果不是去首页 还没有token直接去首页 //拦截 如果不是去首页 还没有token直接去首页
if (to.path !== '/' && !token) { // if (to.path !== '/home' && !token) {
Notify('请检查登陆状态') // Notify('请检查登陆状态')
next({ path: '/' }) // next({ path: '/' })
} else { // } else {
next()
} // }
next()
}, 0) }, 0)
}) })

5
src/store/piniaIndex.js
Unescape View File

@ -119,13 +119,14 @@ const instance = defineStore('user', {
}) })
.then(res => { .then(res => {
if (res.code === 20000) { if (res.code === 20000) {
setToken(res.data.accessToken) // setToken(res.data.accessToken)
this.getUser() // this.getUser()
} }
}) })
} }
return Promise.reject() return Promise.reject()
}, },
clearToken() { clearToken() {
removeToken() removeToken()
} }

10
src/utils/request.js
Unescape View File

@ -63,8 +63,14 @@ service.interceptors.response.use(
// let paramsTargetJson = sessionStorage.getItem('paramsTarget') // let paramsTargetJson = sessionStorage.getItem('paramsTarget')
// let paramsTarget = JSON.parse(paramsTargetJson) // let paramsTarget = JSON.parse(paramsTargetJson)
// instance.login(paramsTarget).then(location.reload()) // instance.login(paramsTarget).then(location.reload())
removeToken() // removeToken()
location.reload() // location.reload()
Notify({
message: '登陆失败，请退出重试',
onClose: () => {
removeToken()
}
})
return return
} }
if (![20000].includes(res.code)) { if (![20000].includes(res.code)) {

465
src/views/cashier/cashierIndex.vue
Unescape View File

@ -1,297 +1,306 @@
<template> <template>
<div class="cashier"> <div class="cashier">
<div class="payment-time"> <div class="payment-time">
<div class="payment-number">￥{{Number(orderData.realAmount).toFixed(2)}}</div> <div class="payment-number">￥{{ Number(orderData.realAmount).toFixed(2) }}</div>
<div v-if="time!==0" class="time flex jc ac"> <div v-if="time !== 0" class="time flex jc ac">
支付时间剩余： 支付时间剩余：
<van-count-down style="color:#999999" format="mm:ss" :time="time" /> <van-count-down style="color: #999999" format="mm:ss" :time="time" />
</div> </div>
<div style="color:#fe0505" class="time" v-else> <div style="color: #fe0505" class="time" v-else>支付已过期</div>
支付已过期
</div>
</div>
<div class="payment-method">
<div @click="cardIndex = index" v-for="(item, index) in cardList" :key="index" class="payment-method-item flex bw ac">
<span>企业{{item.cardType?'外请':'自营'}}油卡支付（余额：{{item.balance?item.balance:0}}）</span>
<van-icon :color="cardIndex==index? '#ff6700' : '#C9C7C7' " name="success" />
</div>
</div>
<detailsCard :title="'请提醒加油员使用 <span>“星油云站”</span> 进行订单核实'" :detailsList='detailsList'>
</detailsCard>
<div @click="goplay" :class="time==0?'debgcolor': '' " class="payment-footer flex ac jc">立即支付</div>
</div> </div>
<div class="payment-method">
<div @click="cardIndex = index" v-for="(item, index) in cardList" :key="index" class="payment-method-item flex bw ac">
<span>企业{{ item.cardType ? '外请' : '自营' }}油卡支付（余额：{{ item.balance ? item.balance : 0 }}）</span>
<van-icon :color="cardIndex == index ? '#ff6700' : '#C9C7C7'" name="success" />
</div>
</div>
<detailsCard :title="'请提醒加油员使用 <span>“星油云站”</span> 进行订单核实'" :detailsList="detailsList"> </detailsCard>
<div @click="goplay" :class="time == 0 ? 'debgcolor' : ''" class="payment-footer flex ac jc">立即支付</div>
</div>
</template> </template>
<script> <script>
import detailsCard from './components/detailsCard.vue' import detailsCard from './components/detailsCard.vue'
import oilOrderApi from '@/api/oil-order.js' import oilOrderApi from '@/api/oil-order.js'
export default { export default {
components: { components: {
detailsCard detailsCard
},
data() {
return {
cardIndex: 0,
cardList: [],
time: 600000,
orderData: null,
detailsCardTitle: {},
detailsList: [
[
{
lable: '订单编号：',
value: '0101001001',
valueStyle: {
color: ''
}
}
],
[
{
lable: '油站：',
value: '壳牌加油站'
},
{
lable: '油品油枪：',
value: '0# 1号枪'
},
{
lable: '加油升数：',
value: '100L'
}
],
[
{
lable: '加油金额：',
value: '￥581.00'
},
{
lable: '星油优惠：',
value: '-￥0.00',
valueStyle: {
color: '#FF0000'
}
},
{
lable: '优惠券：',
value: '-￥1.00',
valueStyle: {
color: '#FF0000'
}
}
],
[
{
lable: '合计：',
value: '-￥1.00',
valueStyle: {
color: '#FF0000'
}
}
]
]
}
},
created() {
this.orderData = JSON.parse(this.$route.query.order)
console.log('this.orderData', this.orderData)
this.time = this.getCountDownTime(this.orderData.createTime)
this.updateDetails()
this.cardListFn()
},
methods: {
cardListFn() {
let a = this.orderData.companyAccounts
? this.orderData.companyAccounts.map(item => {
item['cardType'] = 0
return item
})
: []
let b = this.orderData.otherAccounts
? this.orderData.otherAccounts.map(item => {
item['cardType'] = 1
return item
})
: []
this.cardList = [...a, ...b]
}, },
data() { updateDetails() {
return { this.detailsList[0][0].value = this.orderData.orderSerialNumber || '暂无数据'
cardIndex:0, this.detailsList[1][0].value = this.orderData.siteName || '暂无数据'
cardList:[], this.detailsList[1][1].value = this.orderData.oilsCode + ' ' + this.orderData.oilsBar + '号枪' || '暂无数据'
time: 600000, this.detailsList[1][2].value = Number(this.orderData.volume).toFixed(2) + 'L' || '暂无数据'
orderData:null, this.detailsList[2][0].value =
detailsCardTitle: {}, '￥' + Number(this.orderData.xoilAmountGun).toFixed(2) || '￥' + Number(this.orderData.baseRealPriceAmount).toFixed(2) || '暂无数据'
detailsList: [ this.detailsList[2][1].value =
[ '-￥' + Number(this.orderData.oilDiscountAmount).toFixed(2) || '-￥' + Number(this.orderData.discountAmount).toFixed(2) || '暂无数据'
{ this.detailsList[2][2].value = '-￥' + Number(this.orderData.couponDiscountAmount).toFixed(2) || '暂无数据'
lable: '订单编号：', this.detailsList[3][0].value = '￥' + Number(this.orderData.realAmount).toFixed(2) || '暂无数据'
value: '0101001001',
valueStyle: {
color: ''
}
},
],
[
{
lable: '油站：',
value: '壳牌加油站'
},
{
lable: '油品油枪：',
value: '0# 1号枪'
},
{
lable: '加油升数：',
value: '100L'
},
],
[
{
lable: '加油金额：',
value: '￥581.00'
},
{
lable: '星油优惠：',
value: '-￥0.00',
valueStyle: {
color: '#FF0000'
}
},
{
lable: '优惠券：',
value: '-￥1.00',
valueStyle: {
color: '#FF0000'
}
},
],
[
{
lable: '合计：',
value: '-￥1.00',
valueStyle: {
color: '#FF0000'
}
},
]
]
}
}, },
created(){ getCountDownTime(e) {
this.orderData = JSON.parse(this.$route.query.order); let createTime = new Date(e)
this.time = this.getCountDownTime(this.orderData.createTime); let nowTime = new Date()
this.updateDetails(); let difference = Date.parse(nowTime) - Date.parse(createTime)
this.cardListFn(); let a = 600000
}, return difference > a ? 0 : a - difference
methods:{ },
cardListFn(){ async goplay() {
let a = this.orderData.companyAccounts?this.orderData.companyAccounts.map(item=>{item['cardType'] = 0;return item}):[]; if (!this.time) {
let b = this.orderData.otherAccounts?this.orderData.otherAccounts.map(item=>{item['cardType'] = 1;return item}):[]; this.$notify('支付已过期')
this.cardList = [...a,...b]; return
}, }
updateDetails(){ let payData = {
this.detailsList[0][0].value = this.orderData.orderSerialNumber||'暂无数据'; ...this.cardList[this.cardIndex],
this.detailsList[1][0].value = this.orderData.siteName||'暂无数据'; orderSerialNumber: this.orderData.orderSerialNumber, //类型：String 必有字段 备注：订单编号
this.detailsList[1][1].value = this.orderData.oilsCode + ' '+ this.orderData.oilsBar+'号枪' ||'暂无数据'; payChannel: 'BALANCE_PAYMENT', //类型：String 必有字段 备注：支付渠道（BALANCE_PAYMENT：余额支付）
this.detailsList[1][2].value = Number(this.orderData.volume).toFixed(2) + 'L'||'暂无数据'; orderMethod: 'CUSTOMER_ACTIVE', //类型：String 必有字段 备注：订单产生方式（CUSTOMER_ACTIVE：客户扫码支付：客户扫描油站二维码完成支付）
this.detailsList[2][0].value = '￥'+Number(this.orderData.xoilAmountGun).toFixed(2)|| '￥'+Number(this.orderData.baseRealPriceAmount).toFixed(2)||'暂无数据'; createSource: 'XOIL_DRIVER_COMPANY_WECHAT_APPLET',
this.detailsList[2][1].value = '-￥'+Number(this.orderData.oilDiscountAmount).toFixed(2)||'-￥'+ Number(this.orderData.discountAmount).toFixed(2)||'暂无数据'; oilCardType: -1
this.detailsList[2][2].value = '-￥'+Number(this.orderData.couponDiscountAmount).toFixed(2)||'暂无数据'; }
this.detailsList[3][0].value = '￥'+Number(this.orderData.realAmount).toFixed(2)||'暂无数据'; let orderType = false
}, oilOrderApi
getCountDownTime(e){ .payOrder(payData)
let createTime = new Date(e); .then(res => {
let nowTime = new Date(); if (res.code == 20000) {
let difference = Date.parse(nowTime)- Date.parse(createTime); orderType = true
let a = 600000; }
return difference>a?0:a-difference })
}, .finally(e => {
async goplay(){ this.$router.push({
if(!this.time) { name: 'paymentl',
this.$notify('支付已过期') query: {
return orderData: JSON.stringify(this.orderData),
} type: JSON.stringify(orderType)
let payData = { }
...this.cardList[this.cardIndex], })
"orderSerialNumber": this.orderData.orderSerialNumber, //类型：String 必有字段 备注：订单编号 })
"payChannel": "BALANCE_PAYMENT", //类型：String 必有字段 备注：支付渠道（BALANCE_PAYMENT：余额支付）
"orderMethod": "CUSTOMER_ACTIVE", //类型：String 必有字段 备注：订单产生方式（CUSTOMER_ACTIVE：客户扫码支付：客户扫描油站二维码完成支付）
"createSource": "XOIL_DRIVER_COMPANY_WECHAT_APPLET",
oilCardType:-1
}
let orderType = false
oilOrderApi.payOrder(payData).then(res=>{
if(res.code==20000){
orderType = true
}
}).finally((e)=>{
this.$router.push({
name:'paymentl',
query:{
orderData:JSON.stringify(this.orderData),
type:JSON.stringify(orderType)
}
})
})
}
} }
}; }
}
</script> </script>
<style scoped> <style scoped>
.debgcolor{ .debgcolor {
background-color: #999999 !important; background-color: #999999 !important;
} }
.payment-time { .payment-time {
margin-top: 50px; margin-top: 50px;
} }
.payment-details-item-row-lable { .payment-details-item-row-lable {
color: #999999;
color: #999999;
} }
.payment-details-item-row { .payment-details-item-row {
margin-top: 10px; margin-top: 10px;
} }
.payment-details-item:first-child { .payment-details-item:first-child {
margin-top: 0q; margin-top: 0Q;
} }
.payment-details-item:last-child { .payment-details-item:last-child {
border-bottom: dashed 0px #B9B9B9; border-bottom: dashed 0px #b9b9b9;
} }
.payment-details-item { .payment-details-item {
box-sizing: border-box; box-sizing: border-box;
border-bottom: dashed 1px #B9B9B9; border-bottom: dashed 1px #b9b9b9;
padding-bottom: 20px; padding-bottom: 20px;
margin-top: 20px; margin-top: 20px;
} }
.payment-details-container { .payment-details-container {
width: 100%; width: 100%;
margin-top: 30px; margin-top: 30px;
padding: 0 20px; padding: 0 20px;
box-sizing: border-box; box-sizing: border-box;
} }
.payment-details-title span { .payment-details-title span {
color: #FF6700; color: #ff6700;
} }
.payment-details-title { .payment-details-title {
width: 690px; width: 690px;
height: 82px; height: 82px;
background: #F6F6F6; background: #f6f6f6;
box-shadow: 5px 5px 0px 1px rgba(0, 0, 0, 0.0118); box-shadow: 5px 5px 0px 1px rgba(0, 0, 0, 0.0118);
border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px;
opacity: 1; opacity: 1;
font-size: 28px; font-size: 28px;
font-family: PingFang SC-中等, PingFang SC; font-family: PingFang SC-中等, PingFang SC;
font-weight: normal; font-weight: normal;
color: #333333; color: #333333;
} }
.payment-method-item:last-child { .payment-method-item:last-child {
border-bottom: 0px #f1f2f7; border-bottom: 0px #f1f2f7;
padding-bottom: 0px; padding-bottom: 0px;
} }
.payment-method-item:first-child { .payment-method-item:first-child {
margin-top: 0px; margin-top: 0px;
} }
.payment-method-item { .payment-method-item {
text-align: left; text-align: left;
border-bottom: solid 2px #f1f2f7; border-bottom: solid 2px #f1f2f7;
padding-bottom: 20px; padding-bottom: 20px;
margin-top: 30px; margin-top: 30px;
color: #333333; color: #333333;
font-size: 28px; font-size: 28px;
} }
.time { .time {
font-size: 24px; font-size: 24px;
font-family: PingFang SC-中等, PingFang SC; font-family: PingFang SC-中等, PingFang SC;
font-weight: normal; font-weight: normal;
color: #999999; color: #999999;
} }
.payment-number { .payment-number {
font-size: 48px; font-size: 48px;
font-family: PingFang SC-粗体, PingFang SC; font-family: PingFang SC-粗体, PingFang SC;
font-weight: normal; font-weight: normal;
color: #fe0505; color: #fe0505;
} }
.payment-footer { .payment-footer {
width: 690px; width: 690px;
height: 100px; height: 100px;
background: #ff6700; background: #ff6700;
border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px;
opacity: 1; opacity: 1;
position: fixed; position: fixed;
bottom: 20px; bottom: 20px;
left: 0; left: 0;
right: 0; right: 0;
margin: 0 auto; margin: 0 auto;
color: #ffffff; color: #ffffff;
font-size: 38px; font-size: 38px;
box-sizing: border-box; box-sizing: border-box;
} }
.payment-method { .payment-method {
width: 690px; width: 690px;
/* min-height: 346px; */ /* min-height: 346px; */
background: #ffffff; background: #ffffff;
box-shadow: 0px 3px 10px 1px rgba(221, 221, 221, 0.502); box-shadow: 0px 3px 10px 1px rgba(221, 221, 221, 0.502);
border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px;
opacity: 1; opacity: 1;
margin: 0 auto; margin: 0 auto;
margin-top: 45px; margin-top: 45px;
padding: 45px; padding: 45px;
box-sizing: border-box; box-sizing: border-box;
} }
.payment-details { .payment-details {
width: 690px; width: 690px;
background: #ffffff; background: #ffffff;
box-shadow: 0px 3px 10px 1px rgba(221, 221, 221, 0.502); box-shadow: 0px 3px 10px 1px rgba(221, 221, 221, 0.502);
border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px;
opacity: 1; opacity: 1;
margin: 0 auto; margin: 0 auto;
margin-top: 39px; margin-top: 39px;
margin-bottom: 150px; margin-bottom: 150px;
} }
.cashier { .cashier {
position: relative; position: relative;
/* padding-bottom: 80px; */ /* padding-bottom: 80px; */
font-size: 28px; font-size: 28px;
height: 100%; height: 100%;
overflow: auto; overflow: auto;
} }
</style> </style>

Write Preview
Loading…
Cancel
Save