h5 星游企业版

This commit is contained in:
caolc
2022-08-08 09:32:04 +08:00
commit f6cef4b439
61 changed files with 17327 additions and 0 deletions

View File

@@ -0,0 +1,296 @@
<template>
<div class="cashier">
<div class="payment-time">
<div class="payment-number">{{Number(orderData.realAmount).toFixed(2)}}</div>
<div v-if="time!==0" class="time flex jc ac">
支付时间剩余
<van-count-down style="color:#999999" format="mm:ss" :time="time" />
</div>
<div style="color:#fe0505" class="time" v-else>
支付已过期
</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>
<script>
import detailsCard from './components/detailsCard.vue'
import oilOrderApi from '@/api/oil-order.js'
export default {
components: {
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 = this.$route.params.order;
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];
},
updateDetails(){
this.detailsList[0][0].value = this.orderData.orderSerialNumber||'暂无数据';
this.detailsList[1][0].value = this.orderData.siteName||'暂无数据';
this.detailsList[1][1].value = this.orderData.oilsCode + ' '+ this.orderData.oilsBar+'号枪' ||'暂无数据';
this.detailsList[1][2].value = Number(this.orderData.volume).toFixed(2) + 'L'||'暂无数据';
this.detailsList[2][0].value = '¥'+Number(this.orderData.xoilAmountGun).toFixed(2)|| '¥'+Number(this.orderData.baseRealPriceAmount).toFixed(2)||'暂无数据';
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)||'暂无数据';
this.detailsList[3][0].value = '¥'+Number(this.orderData.realAmount).toFixed(2)||'暂无数据';
},
getCountDownTime(e){
let createTime = new Date(e);
let nowTime = new Date();
let difference = Date.parse(nowTime)- Date.parse(createTime);
let a = 600000;
return difference>a?0:a-difference
},
async goplay(){
if(!this.time) {
this.$notify('支付已过期')
return
}
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"
}
let orderType = 0
oilOrderApi.payOrder(payData).then(res=>{
if(res.code==20000){
orderType = 1
}
}).finally((e)=>{
this.$router.push({
name:'paymentl',
params:{
orderData:this.orderData,
orderType:orderType
}
})
})
}
}
};
</script>
<style scoped>
.debgcolor{
background-color: #999999 !important;
}
.payment-time {
margin-top: 50px;
}
.payment-details-item-row-lable {
color: #999999;
}
.payment-details-item-row {
margin-top: 10px;
}
.payment-details-item:first-child {
margin-top: 0q;
}
.payment-details-item:last-child {
border-bottom: dashed 0px #B9B9B9;
}
.payment-details-item {
box-sizing: border-box;
border-bottom: dashed 1px #B9B9B9;
padding-bottom: 20px;
margin-top: 20px;
}
.payment-details-container {
width: 100%;
margin-top: 30px;
padding: 0 20px;
box-sizing: border-box;
}
.payment-details-title span {
color: #FF6700;
}
.payment-details-title {
width: 690px;
height: 82px;
background: #F6F6F6;
box-shadow: 5px 5px 0px 1px rgba(0, 0, 0, 0.0118);
border-radius: 10px 10px 0px 0px;
opacity: 1;
font-size: 28px;
font-family: PingFang SC-中等, PingFang SC;
font-weight: normal;
color: #333333;
}
.payment-method-item:last-child {
border-bottom: 0px #f1f2f7;
padding-bottom: 0px;
}
.payment-method-item:first-child {
margin-top: 0px;
}
.payment-method-item {
text-align: left;
border-bottom: solid 2px #f1f2f7;
padding-bottom: 20px;
margin-top: 30px;
color: #333333;
font-size: 28px;
}
.time {
font-size: 24px;
font-family: PingFang SC-中等, PingFang SC;
font-weight: normal;
color: #999999;
}
.payment-number {
font-size: 48px;
font-family: PingFang SC-粗体, PingFang SC;
font-weight: normal;
color: #fe0505;
}
.payment-footer {
width: 690px;
height: 100px;
background: #ff6700;
border-radius: 5px 5px 5px 5px;
opacity: 1;
position: fixed;
bottom: 20px;
left: 0;
right: 0;
margin: 0 auto;
color: #ffffff;
font-size: 38px;
box-sizing: border-box;
}
.payment-method {
width: 690px;
/* min-height: 346px; */
background: #ffffff;
box-shadow: 0px 3px 10px 1px rgba(221, 221, 221, 0.502);
border-radius: 10px 10px 10px 10px;
opacity: 1;
margin: 0 auto;
margin-top: 45px;
padding: 45px;
box-sizing: border-box;
}
.payment-details {
width: 690px;
background: #ffffff;
box-shadow: 0px 3px 10px 1px rgba(221, 221, 221, 0.502);
border-radius: 10px 10px 10px 10px;
opacity: 1;
margin: 0 auto;
margin-top: 39px;
margin-bottom: 150px;
}
.cashier {
position: relative;
/* padding-bottom: 80px; */
font-size: 28px;
height: 100%;
overflow: auto;
}
</style>

View File

@@ -0,0 +1,103 @@
<template>
<div :style="{boxShadow:boxShadow?'':'none'}" class="payment-details">
<div v-if="title" v-html="title" class="payment-details-title flex ac jc"></div>
<div class="payment-details-container">
<div
v-for="(item, index) in detailsList"
:key="index"
class="payment-details-item"
>
<div v-for="(items,indexs) in item" :key="indexs" class="payment-details-item-row flex ac bw">
<span class="payment-details-item-row-lable">{{ items.lable }}</span>
<span :style="{color:items.valueStyle?.color?items.valueStyle.color:''}" >{{ items.value }}</span>
</div>
</div>
<div v-if="statistics" class="payment-details-item">
<div class="payment-details-item-row flex ac bw">
<span class="payment-details-item-row-lable">合计</span>
<span style="color:#FF0000"> 580.00</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "detailsCard",
props: {
boxShadow: {
type: Boolean,
default: true,
},
title: {
type: String,
default: "",
},
statistics: {
type: Boolean,
default: false,
},
detailsList: {
type: Array,
default: () => [],
},
},
};
</script>
<style>
.payment-details-title span {
color: #ff6700;
}
</style>
<style scoped>
.payment-details-item-row-lable {
color: #999999;
}
.payment-details-item-row {
margin-top: 10px;
}
.payment-details-item:first-child {
margin-top: 0q;
}
.payment-details-item:last-child {
border-bottom: dashed 0px #b9b9b9;
}
.payment-details-item {
box-sizing: border-box;
border-bottom: dashed 1px #b9b9b9;
padding-bottom: 20px;
margin-top: 20px;
}
.payment-details-container {
width: 100%;
margin-top: 30px;
padding: 0 20px;
box-sizing: border-box;
}
.payment-details-title {
width: 690px;
height: 82px;
background: #f6f6f6;
box-shadow: 5px 5px 0px 1px rgba(0, 0, 0, 0.0118);
border-radius: 10px 10px 0px 0px;
opacity: 1;
font-size: 28px;
font-family: PingFang SC-中等, PingFang SC;
font-weight: normal;
color: #333333;
}
.payment-details {
width: 690px;
background: #ffffff;
box-shadow: 0px 3px 10px 1px rgba(221, 221, 221, 0.502);
border-radius: 10px 10px 10px 10px;
opacity: 1;
margin: 0 auto;
margin-top: 39px;
margin-bottom: 150px;
}
</style>

View File

@@ -0,0 +1,92 @@
<template>
<div class="paymentl-header">
<div :class="!codeTpe.switch ? '' : 'code-title'" class="paymentl-header-title"> {{codeTpe.imgType?'支付成功':'支付失败'}} </div>
<img v-if="!codeTpe.switch" class="paymentl-header-img" :src="codeTpe.imgType? cg :sb " alt="">
<div v-else class="paymentl-vue-qr">
<vue-qr v-if="codeTpe.codeValue" :text="codeTpe.codeValue"></vue-qr>
<div class="paymentl-vue-qr-tip">提示该二维码每隔3分钟自动刷新一次</div>
</div>
</div>
</template>
<script>
import vueQr from 'vue-qr'
export default {
props: {
codeTpe: {
type: Object,
default: () => {
return {
switch: false,
codeValue: '',
imgType:true
}
}
}
},
components: {
vueQr,
},
data() {
return {
cg:require('../../../assets/zfcg.png'),
sb:require('../../../assets/zfsb.png'),
type: 0
}
},
}
</script>
<style>
.paymentl-vue-qr img {
width: 324px;
height: 324px;
border-radius: 0px 0px 0px 0px;
opacity: 1;
}
</style>
<style scoped>
.paymentl-vue-qr-tip {
position: absolute;
bottom: 30px;
width: 100%;
text-align: center;
}
.paymentl-vue-qr {
width: 690px;
height: 544px;
background: #FFFFFF;
box-shadow: 0px 3px 10px 1px rgba(221, 221, 221, 0.5020);
border-radius: 10px 10px 10px 10px;
opacity: 1;
margin: 0 auto;
background-image: url('@/assets/codebg.png');
background-size: 100% 428px;
background-repeat: no-repeat;
position: relative;
margin-top: -25px;
}
.paymentl-header {}
.paymentl-header-img {
width: 515px;
height: 245px;
}
.code-title {
background-color: #ff6700;
color: #FFFFFF !important;
}
.paymentl-header-title {
font-size: 42px;
font-family: PingFang SC-粗体, PingFang SC;
font-weight: normal;
color: #333333;
margin: 0px auto;
padding: 50px 0;
}
</style>

View File

@@ -0,0 +1,187 @@
<template>
<div class="paymentl">
<detailsCardHeader :codeTpe="codeTpe" ></detailsCardHeader>
<detailsCard :title=" codeTpe.imgType? '请提醒加油员使用 <span>“星油云站”</span> 进行订单核实': '支付<span>“失败”</span> 请重新支付 ' " :detailsList="detailsList"></detailsCard>
<div @click="goHome" class="paymentl-footer flex ac jc">返回首页</div>
</div>
</template>
<script>
import vueQr from 'vue-qr'
import detailsCard from "./components/detailsCard.vue";
import detailsCardHeader from "./components/detailsCardHeader.vue";
import oilSiteApi from '@/api/oil-site.js'
export default {
components: {
detailsCard,
vueQr,
detailsCardHeader
},
data() {
return {
countTimer:180,
timer:null,
codeTpe:{
switch:false,
codeValue:'',
imgType:true
},
detailsCardTitle: {},
detailsList: [
[
{
lable: '订单编号:',
value: '0101001001',
valueStyle: {
color: ''
}
},
],
[
{
lable: '油站:',
value: '壳牌加油站'
},
{
lable: '油品油枪:',
value: '0# 1号枪'
},
{
lable: '加油升数:',
value: '100L'
},
{
lable: '加油员:',
value: '李某'
},
// {
// lable: '加油渠道:',
// value: '星油 查看三方支付凭证'
// },
],
[
{
lable: '加油金额:',
value: '¥581.00'
},
{
lable: '星油优惠:',
value: '-¥0.00',
valueStyle: {
color: '#FF0000'
}
},
{
lable: '优惠券:',
value: '---',
valueStyle: {
color: '#FF0000'
}
},
],
[
{
lable: '加油车牌:',
value: '皖A98191'
},
{
lable: '加油司机:',
value: '孙司机(100038)',
},
{
lable: '油卡性质:',
value: '企业油卡',
},
],
]
};
},
created(){
this.init()
},
watch:{
countTimer:function(n){
console.log(n,'+++')
}
},
methods:{
init(){
this.orderData = this.$route.params.orderData
this.codeTpe.imgType = this.$route.params.type
console.log(this.codeTpe.imgType)
this.getCode();
this.updateDetails();
},
Timekeeping(){
this.countTimer = 180
this.timer = setInterval(()=>{
if(this.countTimer==0){
clearInterval(this.timer);
return
}
this.countTimer-=1;
},100)
},
goHome(){
this.$router.push('/')
},
updateDetails(){
this.detailsList[0][0].value = this.orderData.orderSerialNumber;
this.detailsList[1][0].value = this.orderData.siteName ;
this.detailsList[1][1].value = `${this.orderData.oilsCode} ${this.orderData.oilsBar}号枪`;
this.detailsList[1][2].value = `${Number(this.orderData.volume).toFixed(2)}L`;
this.detailsList[1][3].value = this.orderData.siteUserName ;
this.detailsList[2][0].value = '¥'+this.orderData.realAmount ;
this.detailsList[2][1].value = '¥'+this.orderData.oilDiscountAmount ;
this.detailsList[3][0].value = this.orderData.plateNumber ;
// this.detailsList[3][2].value = '¥'+this.orderData.plateNumber ;
},
getCode(){
console.log( this.orderData)
oilSiteApi.getOrderQrCode(this.orderData.orderSerialNumber).then(res=>{
if(res.code==20000){
this.codeTpe.codeValue = ''
this.$nextTick(function(){
this.codeTpe.switch = true;
this.codeTpe.codeValue = res.data.codeStr;
this.Timekeeping()
})
}
})
}
}
};
</script>
<style scoped>
.paymentl-footer {
width: 690px;
height: 100px;
background: #ff6700;
border-radius: 5px 5px 5px 5px;
opacity: 1;
position: fixed;
bottom: 20px;
left: 0;
right: 0;
margin: 0 auto;
color: #ffffff;
font-size: 38px;
box-sizing: border-box;
}
.paymentl-header-img {
width: 515px;
height: 245px;
}
.paymentl-header-title {
font-size: 42px;
font-family: PingFang SC-粗体, PingFang SC;
font-weight: normal;
color: #333333;
margin: 50px auto;
}
</style>