You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

292 lines
7.7 KiB

<template>
<view class="content">
<view class="cu-card article">
<view class="cu-item shadow">
<view class="padding-sm justify-between">
<!-- <view
:class="{'refunded' : detail.list.payStatus== 1 ,'non-payment' : detail.list.payStatus== 0,'payState': detail.list.payStatus== 2}">
{{['待确认','待支付','已完成','支付失败','已退款','已挂起','已关闭'][detail.list.payStatus==null?'':detail.list.payStatus]}}
</view> -->
<view class="refunded_0" v-if="detail.list.payStatus == 0">
待确认
</view>
<view class="refunded_1" v-if="detail.list.payStatus == 1">
待支付
</view>
<view class="refunded_2" v-if="detail.list.payStatus == 2">
已完成
</view>
<view class="refunded_3" v-if="detail.list.payStatus == 3">
支付失败
</view>
<view class="refunded_4" v-if="detail.list.payStatus == 4">
已退款
</view>
<view class="refunded_5" v-if="detail.list.payStatus == 5">
已挂起
</view>
<view class="refunded_6" v-if="detail.list.payStatus == 6">
已关闭
</view>
</view>
</view>
</view>
<view class="cu-card article">
<view class="cu-item shadow">
<view class="flex justify-between flex-wrap padding-sm">
<view class="name">{{detail.list.stationName==null?'--':detail.list.stationName}}</view>
</view>
<view class="flex padding-lr-sm justify-between flex-wrap list-view">
<view class="staName">场站编码 </view>
<view class="staNum">{{detail.list.stationNo==null?'--':detail.list.stationNo}}</view>
</view>
<view class="flex justify-between flex-wrap list-view">
<view class="staName">换电订单号 </view>
<view class="staNum">{{detail.list.orderNo==null?'--':detail.list.orderNo}}</view>
</view>
<view class="flex padding-lr-sm justify-between flex-wrap list-view">
<view class="staName">订单时间</view>
<view class="staNum">{{detail.list.orderTime==null?'--':detail.list.orderTime}}</view>
</view>
<view class="flex justify-between list-view">
<view class="staName">车牌号 </view>
<view class="staNum">{{detail.list.vehicleNo==null?'--':detail.list.vehicleNo}}</view>
</view>
<view class="flex padding-lr-sm justify-between list-view">
<view class="staName">车辆vin</view>
<view class="staNum">{{detail.list.vehicleVin==null?'--':detail.list.vehicleVin}}</view>
</view>
<view class="flex padding-lr-sm justify-between list-view">
<view class="staName">总电量 </view>
<view class="staNum">{{detail.list.totalElectricity==null?'0':detail.list.totalElectricity}}kW·h
</view>
</view>
<view class="flex justify-between list-view">
<view class="staName">平台服务费</view>
<view class="staNum">{{detail.list.cloudTotalFee==null?'0':detail.list.cloudTotalFee / 100}}元</view>
</view>
<view class="flex justify-between list-view">
<view class="staName">电池服务费</view>
<view class="staNum">{{detail.list.batTotalFee==null?'0':detail.list.batTotalFee / 100}}元</view>
</view>
<view class="flex padding-lr-sm justify-between list-view">
<view class="staName">换电服务费</view>
<view class="staNum">{{detail.list.serviceTotalFee==null?'0':detail.list.serviceTotalFee / 100}}元
</view>
</view>
<view class="flex padding-lr-sm justify-between list-view" v-if="detail.list.settleType >= 4">
<view class="staName">尖时段总费用</view>
<view class="staNum">{{ detail.list.theTipExpense==null?'0':detail.list.theTipExpense / 100 }}元
</view>
</view>
<view class="flex padding-lr-sm justify-between list-view" v-if="detail.list.settleType >= 4">
<view class="staName">峰时段总费用</view>
<view class="staNum">{{ detail.list.peakExpense ==null?'0':detail.list.peakExpense / 100}}元</view>
</view>
<view class="flex padding-lr-sm justify-between list-view" v-if="detail.list.settleType >= 4">
<view class="staName">平时段总费用</view>
<view class="staNum">{{ detail.list.flatExpense ==null?'0':detail.list.flatExpense / 100}}元</view>
</view>
<view class="flex padding-lr-sm justify-between list-view" v-if="detail.list.settleType >= 4">
<view class="staName">谷时段总费用</view>
<view class="staNum">
{{ detail.list.theValleyExpense ==null?'0':detail.list.theValleyExpense / 100}}元
</view>
</view>
<view class="flex padding-sm justify-between flex-wrap">
<view class="titleName">费用合计</view>
<view class="money text-price">{{detail.list.totalFee==null?'0':detail.list.totalFee / 100}}元</view>
</view>
</view>
</view>
<view class="btn_pay" v-if="detail.list.payStatus == 1">
<button style="font-size: 14px;" type="primary" @click="pay_handle">去支付</button>
</view>
<!-- <view class="btn_pay" v-if="detail.list.payStatus == 2">
<button style="font-size: 14px;" type="primary" @click="pay_handle_refund">退</button>
</view> -->
</view>
</template>
<script setup>
import config from '@/common/config/config.js';
import sheep from '@/sheep';
import {
reactive,
ref,
} from "vue";
import {
onLoad,
onShow,
} from "@dcloudio/uni-app";
import {
useCounterStore
} from '@/stores/counter.js';
const isDetail = useCounterStore()
const detail = reactive({
list: []
})
onLoad((options) => {
var station = JSON.parse(options.details);
detail.list = station
// console.log(detail.list, '订单详情');
})
onShow(() => {
isDetail.value = true
})
const pay_handle = async () => {
await uni.request({ //刷新token
url: config.baseUrl + "app-api/cloud/swapOrder/createPayOrder",
method: 'POST',
header: {
'Authorization': 'Bearer ' + uni.getStorageSync('token'),
'Content-Type': 'application/x-www-form-urlencoded',
'tenant-id': 1
},
data: {
order: detail.list.orderNo
}
}).then(res => {
if (res.data.code == 0) {
handle_pay_money(res.data.data)
}
})
}
const pay_handle_refund = async () => {
await uni.$request({ //刷新token
url: config.baseUrl + "app-api/cloud/refund-order/create",
method: 'POST',
data: {
orderNo: detail.list.orderNo,
refundPrice: detail.list.totalFee / 100,
type: 1
}
}).then(res => {
if (res.data.code == 0) {
uni.showToast({
title: '申请成功',
duration: 2000,
icon: 'success'
});
}
})
}
const handle_pay_money = async (e) => {
sheep.$router.go('/pagesCenter/pay/index', {
id: e.payOrderId,
orderType: 'recharge',
});
}
</script>
<style lang="scss" scoped>
.content {
height: 100vh;
background: #F7F8FA;
position: relative;
}
.cu-card.article>.cu-item {
padding-bottom: 0rpx;
}
.payState {
color: #4C91FF;
font-size: 39rpx;
}
.non-payment {
color: #FF7B0E;
font-size: 39rpx;
}
.refunded_0 {
color: #06efef;
font-size: 39rpx;
}
.refunded_1 {
color: #00aaff;
font-size: 39rpx;
}
.refunded_2 {
color: #00aa00;
font-size: 39rpx;
}
.refunded_3 {
color: #aa0000;
font-size: 39rpx;
}
.refunded_4 {
color: #ffff00;
font-size: 39rpx;
}
.refunded_5 {
color: #55557f;
font-size: 39rpx;
}
.refunded_6 {
color: #aaaa7f;
font-size: 39rpx;
}
.name {
color: #333;
font-size: 39rpx;
font-weight: 400;
}
.titleName {
color: #808080;
font-size: 28rpx;
font-weight: 400;
}
.staName {
color: #808080;
font-size: 28rpx;
font-weight: 400;
}
.staNum {
color: #333333;
font-size: 28rpx;
font-weight: 400;
}
.money {
color: #4C91FF;
font-size: 32rpx;
font-weight: 600;
}
.list-view {
padding: 0rpx 20rpx 20rpx 20rpx;
}
.btn_pay {
// width: 100%;
position: absolute;
bottom: 20rpx;
right: 0;
padding: 0 30rpx;
}
</style>