|
|
@@ -1,321 +1,18 @@
|
|
|
-<template>
|
|
|
- <scroll-view
|
|
|
- scroll-y="true"
|
|
|
- class="scroll-Y"
|
|
|
- style="background-color: #f4f7ff"
|
|
|
- >
|
|
|
- <div class="detail-box">
|
|
|
- <div class="parking-info mgb-40">
|
|
|
- <div class="parking-price">
|
|
|
- <div class="price">{{ (detail.payfee / 100) | currency }}</div>
|
|
|
- <div class="price-text">
|
|
|
- {{
|
|
|
- detail.refundStatus === 1
|
|
|
- ? '已退款'
|
|
|
- : detail.payStatus === 1
|
|
|
- ? '支付成功'
|
|
|
- : '支付失败'
|
|
|
- }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="parking-part">
|
|
|
- <div class="parking-info-item">
|
|
|
- <span class="info-key">支付方式</span>
|
|
|
- <span class="info-value">{{ detail.paykind || '' }}</span>
|
|
|
- </div>
|
|
|
- <div class="parking-info-item">
|
|
|
- <span class="info-key">支付时间</span>
|
|
|
- <span class="info-value">{{ detail.createDate || '' }}</span>
|
|
|
- </div>
|
|
|
- <div class="parking-info-item">
|
|
|
- <span class="info-key">车牌号</span>
|
|
|
- <span class="info-value">{{ detail.carno | formatCarno }}</span>
|
|
|
- </div>
|
|
|
- <div class="parking-info-item">
|
|
|
- <span class="info-key">停车场</span>
|
|
|
- <span class="info-value">{{ detail.parkname }}</span>
|
|
|
- </div>
|
|
|
- <div class="parking-info-item">
|
|
|
- <span class="info-key">订单号</span>
|
|
|
- <span class="info-value">{{ detail.orderno }}</span>
|
|
|
- </div>
|
|
|
- <div class="parking-info-item">
|
|
|
- <span class="info-key">入场时间</span>
|
|
|
- <span class="info-value">{{ detail.entertime }}</span>
|
|
|
- </div>
|
|
|
- <!-- <uni-view class="parking-info-item">
|
|
|
- <span class="info-key">离场时间</span>
|
|
|
- <span class="info-value">{{ detail.outtime || "" }}</span>
|
|
|
- </uni-view> -->
|
|
|
- <div class="parking-info-item">
|
|
|
- <span class="info-key">停车时长</span>
|
|
|
- <span class="info-value">{{ parkingTime }}</span>
|
|
|
- </div>
|
|
|
- <div class="parking-info-item pb0">
|
|
|
- <span class="info-key">开票状态</span>
|
|
|
- <span class="info-value">{{ isInvoiceName }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="parking-info mb-save">
|
|
|
- <div class="parking-part">
|
|
|
- <div class="parking-info-item" v-if="false">
|
|
|
- <!--todo: 杭州首停不显示暂时根据groupId写死-->
|
|
|
- <span class="info-key">首停优惠</span>
|
|
|
- <span class="info-value fw">{{
|
|
|
- (detail.firstParkFee / 100) | currency
|
|
|
- }}</span>
|
|
|
- </div>
|
|
|
- <div class="parking-info-item">
|
|
|
- <span class="info-key">会员等级减免</span>
|
|
|
- <span class="info-value fw">{{
|
|
|
- (detail.memberGradeFee / 100) | currency
|
|
|
- }}</span>
|
|
|
- </div>
|
|
|
- <div class="parking-info-item">
|
|
|
- <span class="info-key">消费减免</span>
|
|
|
- <span class="info-value fw">{{
|
|
|
- (detail.consumeFee / 100) | currency
|
|
|
- }}</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="parking-info-item">
|
|
|
- <span class="info-key">积分减免</span>
|
|
|
- <span class="info-value fw">{{
|
|
|
- (detail.bonusfee / 100) | currency
|
|
|
- }}</span>
|
|
|
- </div>
|
|
|
- <div class="parking-info-item">
|
|
|
- <span class="info-key">会员卡券</span>
|
|
|
- <span class="info-value fw">{{
|
|
|
- (detail.couponfee / 100) | currency
|
|
|
- }}</span>
|
|
|
- </div>
|
|
|
- <div class="parking-info-item" v-if="detail.paperCouponCode">
|
|
|
- <span class="info-key">纸质优惠券</span>
|
|
|
- <span class="info-value fw">{{
|
|
|
- (detail.paperCouponFee / 100) | currency
|
|
|
- }}</span>
|
|
|
- </div>
|
|
|
- <div class="parking-info-item pb0">
|
|
|
- <span class="info-key">使用优惠总计</span>
|
|
|
- <span class="info-value fw">{{
|
|
|
- ((detail.usetotalfee || 0) / 100) | currency
|
|
|
- }}</span>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="parking-info-item"
|
|
|
- v-if="detail.usetotalfee > detail.totalfee"
|
|
|
- >
|
|
|
- <span class="info-key">实际优惠总计</span>
|
|
|
- <span class="info-value fw">{{
|
|
|
- (detail.totalfee / 100) | currency
|
|
|
- }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="parking-detail"></div>
|
|
|
- <div class="parking-part">
|
|
|
- <div class="parking-info-item">
|
|
|
- <span class="info-key">应缴</span>
|
|
|
- <span class="info-value fw">{{
|
|
|
- (detail.servicefee / 100) | currency
|
|
|
- }}</span>
|
|
|
- </div>
|
|
|
- <div class="parking-info-item">
|
|
|
- <span class="info-key">实缴</span>
|
|
|
- <span class="info-value fw">{{
|
|
|
- (detail.payfee / 100) | currency
|
|
|
- }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </scroll-view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-// const app = getApp()
|
|
|
-// const app = {};
|
|
|
-// import moment from 'moment';
|
|
|
-// import {detail as mockDetail, detailError as mockDetailSuccess} from './list'
|
|
|
-import { mapState } from 'vuex';
|
|
|
-import uni from '@/utils/uniHooks';
|
|
|
-export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- orderNo: '',
|
|
|
- isInvoiceName: '',
|
|
|
- detail: {},
|
|
|
- // groupId: app.globalData.groupId
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
- mounted() {
|
|
|
- setTimeout(() => {
|
|
|
- uni.setNavigationBarTitle({
|
|
|
- title: '缴费详情',
|
|
|
- });
|
|
|
- }, 300);
|
|
|
- this.orderNo = this.$route.query.orderNo;
|
|
|
- this.getData();
|
|
|
- },
|
|
|
- computed: {
|
|
|
- parkingTime() {
|
|
|
- const time = this.detail.serviceMin;
|
|
|
- const days = parseInt(time / 60 / 24);
|
|
|
- const hours = parseInt((time / 60) % 24);
|
|
|
- const minutes = parseInt(time % 60);
|
|
|
- if (days > 0) {
|
|
|
- return `${days}天 ${hours}小时 ${minutes}分钟`;
|
|
|
- }
|
|
|
- if (hours > 0) {
|
|
|
- return `${hours}小时 ${minutes}分钟`;
|
|
|
- }
|
|
|
- return `${minutes}分钟`;
|
|
|
- },
|
|
|
- ...mapState({
|
|
|
- // custTypeId: (state) => state.custTypeId,
|
|
|
- // paramsScene: (state) => state.paramsScene,
|
|
|
- // mallid: (state) => state.mallId,
|
|
|
- // openId: (state) => state.openid,
|
|
|
- // member: (state) => state.member,
|
|
|
- groupId: (state) => state.groupId,
|
|
|
- // mobile: (state) => state.mobile,
|
|
|
- // projectId: (state) => state.projectId,
|
|
|
- }),
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getData() {
|
|
|
- const params = {
|
|
|
- orderno: this.orderNo,
|
|
|
- };
|
|
|
- uni.showLoading({
|
|
|
- title: '加载中',
|
|
|
- });
|
|
|
- this.$md(params);
|
|
|
- uni.request({
|
|
|
- url: this.$baseURL + 'api/1.0/park/parkOrderDetail',
|
|
|
- data: params,
|
|
|
- method: 'POST',
|
|
|
- header: JSON.parse(uni.getStorageSync('handleUser')),
|
|
|
- success: (res) => {
|
|
|
- uni.hideLoading();
|
|
|
- if (res.data.code == 0) {
|
|
|
- this.detail = res.data.data;
|
|
|
- // this.detail = mockDetailSuccess.data;
|
|
|
- const isInvoice = this.detail.isInvoice;
|
|
|
- if (isInvoice == 0) {
|
|
|
- this.isInvoiceName = '未开票';
|
|
|
- } else if (isInvoice == 1) {
|
|
|
- this.isInvoiceName = '已申请开票';
|
|
|
- } else if (isInvoice == 2) {
|
|
|
- this.isInvoiceName = '开票中';
|
|
|
- } else if (isInvoice == 3) {
|
|
|
- this.isInvoiceName = '开票完成';
|
|
|
- } else if (isInvoice == 4) {
|
|
|
- this.isInvoiceName = '开票失败';
|
|
|
- }
|
|
|
- } else {
|
|
|
- uni.showToast({
|
|
|
- title: res.data.msg,
|
|
|
- duration: 2000,
|
|
|
- icon: 'none',
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- fail: (err) => {
|
|
|
- uni.hideLoading();
|
|
|
- uni.showToast({
|
|
|
- title: res.data.msg,
|
|
|
- duration: 2000,
|
|
|
- icon: 'none',
|
|
|
- });
|
|
|
- },
|
|
|
- });
|
|
|
- },
|
|
|
- },
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="less" scoped>
|
|
|
-.scroll-Y {
|
|
|
- // width: 100%;
|
|
|
- // display: flex;
|
|
|
- // flex-direction: column;
|
|
|
- // height: 100vh;
|
|
|
- // background: #f2f2f2;
|
|
|
- // padding-bottom: 20px;
|
|
|
- .detail-box {
|
|
|
- padding: 30px;
|
|
|
- .parking-info {
|
|
|
- // margin: 20px;
|
|
|
- // border-radius: 30px;
|
|
|
- // background-color: #ffffff;
|
|
|
- background: #fafbff;
|
|
|
- border-radius: 4px;
|
|
|
- border: 1px solid #d8dae0;
|
|
|
-
|
|
|
- .parking-price {
|
|
|
- text-align: center;
|
|
|
- padding: 30px 0px 50px;
|
|
|
- .price {
|
|
|
- font-size: 60px;
|
|
|
- font-weight: 600;
|
|
|
- color: #333333;
|
|
|
- line-height: 84px;
|
|
|
- }
|
|
|
- .price-text {
|
|
|
- font-weight: 300;
|
|
|
- font-size: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
- .parking-detail {
|
|
|
- border-top: 2px solid #f5f5f5;
|
|
|
- width: calc(100% - 60px);
|
|
|
- margin-left: 30px;
|
|
|
- }
|
|
|
- .parking-part {
|
|
|
- padding: 30px;
|
|
|
- .parking-info-item {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- font-size: 32px;
|
|
|
- padding-bottom: 30px;
|
|
|
- &.pb0 {
|
|
|
- padding-bottom: 0;
|
|
|
- }
|
|
|
- .info-key {
|
|
|
- text-align: left;
|
|
|
- color: #242424;
|
|
|
- font-size: 30px;
|
|
|
- font-weight: 400;
|
|
|
- color: #999999;
|
|
|
- line-height: 42px;
|
|
|
- }
|
|
|
- .info-value {
|
|
|
- text-align: right;
|
|
|
- font-size: 30px;
|
|
|
- font-weight: 400;
|
|
|
- color: #333333;
|
|
|
- line-height: 42px;
|
|
|
- &.fw {
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- }
|
|
|
- .red {
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .mgb-40 {
|
|
|
- margin-bottom: 24px;
|
|
|
- }
|
|
|
- .mb-save {
|
|
|
- padding-bottom: constant(safe-area-inset-bottom);
|
|
|
- padding-bottom: env(safe-area-inset-bottom);
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <component :is="componentName"></component>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import officeBlueCom from './components/officeBlue/parkingFeeDetailSuccess.vue';
|
|
|
+import baseParkingFeeCom from './components/base/parkingFeeDetailSuccess.vue';
|
|
|
+import baseMixins from './mixins/base'
|
|
|
+export default {
|
|
|
+ mixins:[baseMixins],
|
|
|
+ components: {
|
|
|
+ officeBlueCom,
|
|
|
+ baseParkingFeeCom,
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
John-Hong