252 lines
12 KiB
Vue
252 lines
12 KiB
Vue
<template>
|
|
<div class="app-container" v-loading="loading">
|
|
<el-row :gutter="10">
|
|
<el-col :span="18">
|
|
<el-card>
|
|
<el-row class="mb10" type="flex" justify="end">
|
|
<el-button
|
|
size="small"
|
|
plain
|
|
type="danger"
|
|
icon="el-icon-close"
|
|
@click="handleEnd(detail)"
|
|
v-has-permi="['bst:order:end']"
|
|
v-show="OrderStatus.canEnd().includes(detail.status)"
|
|
>结束订单</el-button>
|
|
<el-button
|
|
size="small"
|
|
plain
|
|
type="warning"
|
|
icon="el-icon-wallet"
|
|
@click="handleRefund(detail)"
|
|
v-has-permi="['bst:order:refund']"
|
|
v-show="OrderStatus.canRefund().includes(detail.status)"
|
|
>退款</el-button>
|
|
<el-button
|
|
size="small"
|
|
plain
|
|
type="warning"
|
|
icon="el-icon-wallet"
|
|
@click="handleVerify(detail)"
|
|
v-has-permi="['bst:order:verify']"
|
|
v-show="OrderStatus.canVerify().includes(detail.status)"
|
|
>审核</el-button>
|
|
</el-row>
|
|
<collapse-panel :value="true" title="基础信息">
|
|
<el-descriptions :column="4" >
|
|
<el-descriptions-item label="订单编号">{{ detail.no | dv}}</el-descriptions-item>
|
|
<el-descriptions-item label="订单状态">
|
|
<dict-tag :options="dict.type.order_status" :value="detail.status" size="small"/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="运营区">{{ detail.areaName | dv}}</el-descriptions-item>
|
|
<el-descriptions-item label="创建时间">{{ detail.createTime | dv}}</el-descriptions-item>
|
|
<el-descriptions-item label="开始时间">{{ detail.startTime | dv}}</el-descriptions-item>
|
|
<el-descriptions-item label="结束时间">{{ detail.endTime | dv}}</el-descriptions-item>
|
|
<el-descriptions-item label="到期时间">{{ detail.maxTime | dv}}</el-descriptions-item>
|
|
<el-descriptions-item label="骑行时长">{{ toDescriptionFromSecond(detail.duration).text | dv}}</el-descriptions-item>
|
|
<el-descriptions-item label="骑行距离">{{ detail.distance / 1000 | fix2 | dv}} 公里</el-descriptions-item>
|
|
<el-descriptions-item label="结束原因" v-if="detail.endReason">{{ detail.endReason | dv }}</el-descriptions-item>
|
|
<el-descriptions-item label="取消原因" v-if="detail.cancelRemark">{{ detail.cancelRemark | dv }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</collapse-panel>
|
|
|
|
<collapse-panel :value="true" title="费用信息">
|
|
<el-descriptions :column="4" >
|
|
<el-descriptions-item label="预存">{{ detail.depositFee | fix2 | dv }} 元</el-descriptions-item>
|
|
<el-descriptions-item label="结算金额" v-if="detail.totalFee != null">{{ detail.totalFee | fix2 | dv }} 元</el-descriptions-item>
|
|
<el-descriptions-item label="骑行费" v-if="detail.ridingFee != null">{{ detail.ridingFee | fix2 | dv }} 元</el-descriptions-item>
|
|
<el-descriptions-item label="调度费" v-if="detail.dispatchFee">{{ detail.dispatchFee | fix2 | dv }} 元</el-descriptions-item>
|
|
<el-descriptions-item label="管理费" v-if="detail.manageFee">{{ detail.manageFee | fix2 | dv }} 元</el-descriptions-item>
|
|
<el-descriptions-item label="车损费" v-if="detail.deductionFee">{{ detail.deductionFee | fix2 | dv }} 元</el-descriptions-item>
|
|
<el-descriptions-item label="退款">
|
|
{{ detail.payRefunded | fix2 | dv }} 元
|
|
<template v-if="detail.payRefunding">
|
|
<span style="color: red;">（退款中：{{ detail.payRefunding | fix2 | dv }} 元）</span>
|
|
</template>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="实收">{{ detail.payedAmount - detail.payRefunded - detail.payRefunding | fix2 | dv }} 元</el-descriptions-item>
|
|
</el-descriptions>
|
|
</collapse-panel>
|
|
|
|
<collapse-panel :value="true" title="套餐信息">
|
|
<el-descriptions :column="4" >
|
|
<el-descriptions-item label="套餐名称">
|
|
{{ detail.suitName }}
|
|
<dict-tag :options="dict.type.suit_type" :value="detail.suitType" size="mini" style="margin-left: 4px;"/>
|
|
<dict-tag :options="dict.type.suit_riding_rule" :value="detail.suitRidingRule" size="mini" style="margin-left: 4px;"/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="免费骑行时间" :span="3">
|
|
{{ detail.suitFreeRideTime | dv }}
|
|
<dict-tag :options="dict.type.suit_rental_unit" :value="detail.suitRentalUnit"/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="起步规则" :span="3" v-if="SuitRidingRule.START === detail.suitRidingRule">
|
|
在{{detail.suitStartRule.startingTime}}{{unitLabel(detail.suitRentalUnit)}}以内，起步价{{detail.suitStartRule.startingPrice}}元；
|
|
超出起步时间后，超出的时间每{{detail.suitStartRule.timeoutTime}}{{unitLabel(detail.suitRentalUnit)}}收费{{detail.suitStartRule.timeoutPrice}}元，
|
|
不满{{detail.suitStartRule.timeoutTime}}{{unitLabel(detail.suitRentalUnit)}}，按{{detail.suitStartRule.timeoutTime}}{{unitLabel(detail.suitRentalUnit)}}计算。
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="区间规则" :span="3" v-if="SuitRidingRule.INTERVAL === detail.suitRidingRule">
|
|
<template v-if="detail.suitIntervalRule && detail.suitIntervalRule.length > 0">
|
|
<div v-for="(rule, index) in detail.suitIntervalRule" :key="index">
|
|
<template v-if="index === detail.suitIntervalRule.length - 1">
|
|
在{{rule.start}}{{unitLabel(detail.suitRentalUnit)}}之后，
|
|
每{{rule.eachUnit}}{{unitLabel(detail.suitRentalUnit)}}收费{{rule.fee}}元；
|
|
</template>
|
|
<template v-else>
|
|
在{{rule.start}}~{{rule.end}}{{unitLabel(detail.suitRentalUnit)}}之间，
|
|
每{{rule.eachUnit}}{{unitLabel(detail.suitRentalUnit)}}收费{{rule.fee}}元；
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
暂无区间规则
|
|
</template>
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
</collapse-panel>
|
|
|
|
<!-- <collapse-panel :value="true" title="归还信息">
|
|
<el-descriptions :column="4" >
|
|
<el-descriptions-item label="定位方式">
|
|
<dict-tag :options="dict.type.order_return_mode" :value="detail.returnMode" size="small"/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="归还类型">
|
|
<dict-tag :options="dict.type.order_return_type" :value="detail.returnType" size="small"/>
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="归还时间">{{ detail.endTime }}</el-descriptions-item>
|
|
<el-descriptions-item label="归还定位">{{ detail.returnLon | dv }}, {{ detail.returnLat | dv }}</el-descriptions-item>
|
|
<el-descriptions-item label="起始站点">{{ detail.startAreaSubName | dv }}</el-descriptions-item>
|
|
<el-descriptions-item label="归还站点">{{ detail.endAreaSubName | dv }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</collapse-panel> -->
|
|
</el-card>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-card>
|
|
<collapse-panel :value="true" title="设备信息">
|
|
<el-descriptions :column="1" >
|
|
<el-descriptions-item label="SN">{{ detail.deviceSn }}</el-descriptions-item>
|
|
<el-descriptions-item label="MAC">{{ detail.deviceMac }}</el-descriptions-item>
|
|
<el-descriptions-item label="车牌号">{{ detail.deviceVehicleNum }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</collapse-panel>
|
|
|
|
<collapse-panel :value="true" title="用户信息">
|
|
<el-descriptions :column="1" >
|
|
<el-descriptions-item label="用户">{{ detail.userName }}</el-descriptions-item>
|
|
<el-descriptions-item label="手机">{{ detail.userPhone }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</collapse-panel>
|
|
|
|
<collapse-panel :value="true" title="支付信息">
|
|
<el-descriptions :column="1" >
|
|
<el-descriptions-item label="支付单号">{{ detail.payNo }}</el-descriptions-item>
|
|
<el-descriptions-item label="支付渠道">{{ detail.payChannelName }}</el-descriptions-item>
|
|
<el-descriptions-item label="支付时间">{{ detail.payTime }}</el-descriptions-item>
|
|
</el-descriptions>
|
|
</collapse-panel>
|
|
</el-card>
|
|
</el-col>
|
|
</el-row>
|
|
|
|
<el-card class="box-card" v-if="detail.id" style="margin-top: 10px;">
|
|
<el-tabs lazy>
|
|
<el-tab-pane label="车辆轨迹" v-if="checkPermi(['bst:locationLog:list'])">
|
|
<device-location :query="{orderId: detail.id, timeRange: [detail.startTime, detail.endTime == null ? detail.maxTime : detail.endTime]}" :area-id="detail.areaId" />
|
|
</el-tab-pane>
|
|
<el-tab-pane label="收益信息" v-if="checkPermi(['bst:bonus:list'])">
|
|
<bonus :query="{bstId: detail.id, bstType: BonusBstType.ORDER}" />
|
|
</el-tab-pane>
|
|
<el-tab-pane label="订单车辆" v-if="checkPermi(['bst:orderDevice:list'])">
|
|
<order-device :query="{orderId: detail.id}" />
|
|
</el-tab-pane>
|
|
<el-tab-pane label="支付信息" v-if="checkPermi(['bst:pay:list'])">
|
|
<pay :query="{bstId: detail.id, bstType: PayBstType.ORDER}"/>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-card>
|
|
|
|
<order-refund-dialog :id="detail.id" :visible.sync="showRefundDialog" @success="getDetail" />
|
|
|
|
<order-verify-dialog :id="detail.id" :visible.sync="showVerifyDialog" @success="getDetail" />
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
import { getOrder, endOrder } from '@/api/bst/order'
|
|
import CollapsePanel from '@/components/CollapsePanel/index.vue'
|
|
import {SuitRidingRule, PayBstType, BonusBstType, OrderStatus} from '@/utils/enums'
|
|
import OrderDevice from '@/views/bst/orderDevice/index.vue'
|
|
import Pay from '@/views/bst/pay/index.vue'
|
|
import Bonus from '@/views/bst/bonus/index.vue'
|
|
import DeviceLocation from '@/views/bst/device/view/components/DeviceLocation.vue'
|
|
import OrderRefundDialog from '@/views/bst/order/components/OrderRefundDialog.vue'
|
|
import OrderVerifyDialog from '@/views/bst/order/components/OrderVerifyDialog.vue'
|
|
import { toDescriptionFromSecond } from '@/utils/date'
|
|
|
|
export default {
|
|
name: 'OrderView',
|
|
dicts: ['order_status', 'device_lock_status', 'suit_type', 'suit_rental_unit', 'suit_riding_rule', 'order_return_mode', 'order_return_type'],
|
|
components: {
|
|
CollapsePanel,
|
|
OrderDevice,
|
|
Pay,
|
|
Bonus,
|
|
DeviceLocation,
|
|
OrderRefundDialog,
|
|
OrderVerifyDialog
|
|
},
|
|
data() {
|
|
return {
|
|
OrderStatus,
|
|
id: null,
|
|
detail: {},
|
|
loading: false,
|
|
SuitRidingRule,
|
|
PayBstType,
|
|
BonusBstType,
|
|
showRefundDialog: false,
|
|
showVerifyDialog: false,
|
|
}
|
|
},
|
|
created() {
|
|
this.id = this.$route.params.id
|
|
this.getDetail()
|
|
},
|
|
methods: {
|
|
toDescriptionFromSecond,
|
|
getDetail() {
|
|
this.loading = true
|
|
getOrder(this.id).then(res => {
|
|
this.detail = res.data;
|
|
}).finally(() => {
|
|
this.loading = false
|
|
})
|
|
},
|
|
handleRefund(row) {
|
|
this.showRefundDialog = true;
|
|
},
|
|
handleVerify(row) {
|
|
this.showVerifyDialog = true;
|
|
},
|
|
handleEnd(row) {
|
|
this.$confirm(`确定结束订单${row.no}吗？`, '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
this.loading = true;
|
|
endOrder(row.id).then(response => {
|
|
this.$message.success("结束成功");
|
|
this.getDetail();
|
|
}).catch(() => {
|
|
this.loading = false;
|
|
});
|
|
});
|
|
},
|
|
unitLabel(value) {
|
|
return this.dict.type.suit_rental_unit.find(item => item.value === value)?.label || value;
|
|
},
|
|
}
|
|
}
|
|
</script> |