parking_h5/pages/center/order/orderDetails/orderDetails.vue

<template>
  <view class="wrap">
    <view class="order-info">
      <u-image class="order-info-img" width="90rpx" height="90rpx" src="../../../../static/img/position.png" />
      <view class="addr">{{ orderInfo.roadName }}</view>
      <view class="pay-amount" v-if="orderInfo.payAmount">-{{ orderInfo.payAmount }}</view>
      <view class="pay-amount" v-else>{{ orderInfo.payAmount }}</view>
      <u-cell-group :border="false">
        <u-cell-item title="车牌号" :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.vehicleNo" />
        <u-cell-item
          title="优惠总金额"
          :arrow="false"
          :border-bottom="false"
          :border-top="false"
          :value="(orderInfo.preferentialAmount ? orderInfo.preferentialAmount.toFixed(2) : 0) + ' 元'"
        />
      </u-cell-group>
      <!-- 路段显示 -->
      <u-cell-group v-if="orderType == 'road'">
        <u-cell-item title="订单编号 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.orderId" />
        <template v-if="orderInfo.deviceType == 1">
          <u-cell-item title="入场时间 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.inTime" />
          <u-cell-item title="出场时间 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.outTime" />
        </template>
        <template v-else>
          <u-cell-item title="开始计费 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.inTime" />
          <u-cell-item title="结束计费 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.outTime" />
        </template>
        <template v-if="orderInfo.deviceType !== 2">
          <u-cell-item
            title="免费时长 "
            :arrow="false"
            :border-bottom="false"
            :border-top="false"
            :value="orderInfo.freeDuration || `0天0时${free_time}分0秒`"
          />
        </template>
        <template v-else>
          <u-cell-item
            title="免费时长 "
            :arrow="false"
            :border-bottom="false"
            :border-top="false"
            :value="orderInfo.freeDuration || `0天0时${free_time}分0秒`"
          />
        </template>
        <u-cell-item title="计费时长 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.calcDuration" />
        <u-cell-item title="累计停车时长 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.duration" />
        <u-cell-item
          v-if="orderInfo.createTime"
          title="订单创建时间 "
          :arrow="false"
          :border-bottom="false"
          :border-top="false"
          :value="orderInfo.createTime"
        />
        <u-cell-item
          v-if="orderInfo.payTime"
          title="支付时间 "
          :arrow="false"
          :border-bottom="false"
          :border-top="false"
          :value="orderInfo.payTime"
        />
        <u-cell-item
          v-if="orderInfo.payStatus == 1"
          title="缴费方式 "
          :arrow="false"
          :border-bottom="false"
          :border-top="false"
          :value="orderInfo.paySource | verifyPaySource"
        />
      </u-cell-group>
      <!-- 停车场时长 -->
      <u-cell-group v-if="orderType == 'park'">
        <u-cell-item title="订单编号 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.orderId" />
        <template v-if="orderInfo.deviceType == 1">
          <u-cell-item title="入场通道 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.roadwayName" />
          <u-cell-item title="入场时间 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.inTime" />
          <u-cell-item title="出场通道 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.outRoadwayName" />
          <u-cell-item title="出场时间 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.outTime" />
        </template>
        <template v-else>
          <u-cell-item title="开始计费 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.inTime" />
          <u-cell-item title="结束计费 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.outTime" />
        </template>
        <template v-if="orderInfo.deviceType == 1">
          <u-cell-item
            title="免费时长 "
            :arrow="false"
            :border-bottom="false"
            :border-top="false"
            :value="orderInfo.freeDuration || `0天0时${free_time}分0秒`"
          />
        </template>
        <template v-else>
          <u-cell-item
            title="免费时长 "
            :arrow="false"
            :border-bottom="false"
            :border-top="false"
            :value="orderInfo.freeDuration || `0天0时${free_time}分0秒`"
          />
        </template>
        <u-cell-item title="计费时长 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.calcDuration" />
        <u-cell-item title="累计停车时长 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.duration" />
        <u-cell-item
          v-if="orderInfo.createTime"
          title="订单创建时间 "
          :arrow="false"
          :border-bottom="false"
          :border-top="false"
          :value="orderInfo.createTime"
        />
        <u-cell-item
          v-if="orderInfo.payTime"
          title="支付时间 "
          :arrow="false"
          :border-bottom="false"
          :border-top="false"
          :value="orderInfo.payTime"
        />
        <u-cell-item
          v-if="orderInfo.payStatus == 1"
          title="缴费方式 "
          :arrow="false"
          :border-bottom="false"
          :border-top="false"
          :value="orderInfo.paySource | verifyPaySource"
        />
      </u-cell-group>
      <!-- 地磁订单金额为0并且未支付 -->
      <view class v-if="orderInfo.deviceType == 1 && orderInfo.payAmount == 0 && orderInfo.payStatus !== 1"
        >提示：可寻找附近的收费员打印小票并扫码出场</view
      >
    </view>
    <!-- 地磁显示支付按钮条件  支付状态(0-未支付,2-支付中,3-支付失败)并且订单金额不能为0 -->
    <template v-if="orderInfo.deviceType === 1 && orderInfo.payStatus !== 1 && openFlag !== 'open'">
      <view class="bottom-btn-wrap" v-if="Number(orderInfo.payAmount) !== 0">
        <view class="bottom-btn" @click="goPay(orderId)">去支付</view>
      </view>
      <view class="bottom-btn-wrap" v-else-if="Number(orderInfo.payAmount) === 0">
        <view class="tips">提示：可寻找附近的收费员打印小票并扫码出场</view>
      </view>
    </template>
    <!-- 其他显示支付按钮条件  支付状态(0-未支付,2-支付中,3-支付失败) -->
    <template v-else-if="orderInfo.deviceType !== 1 && orderInfo.payStatus !== 1 && openFlag !== 'open'">
      <view class="bottom-btn-wrap">
        <view class="bottom-btn" @click="goPay(orderId)">去支付</view>
      </view>
    </template>

    <view class="bottom-btn-wrap" v-if="openFlag === 'open' && orderInfo.payStatus == 1">
      <view class="bottom-btn" @click="jumpOrderList()">返回订单页</view>
    </view>

    <!-- 支付方式 -->
    <PaymentMethod
      :payWayPop="payWayPop"
      :exportFlag="exportFlag"
      :curOrderList="orderList"
      :jumpUrl="jumpUrl"
      @closePaymentMethod="closePaymentMethod"
    />

    <!-- 加载中遮罩 -->
    <u-mask :show="loadingMask">
      <view class="loading-warp">
        <view class="loading-icon">
          <u-loading mode="flower" size="50"></u-loading>
        </view>
        <view class="loading-text">
          <text>订单支付状态查询中...</text>
        </view>
      </view>
    </u-mask>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import PaymentMethod from '@/pages/paymentMethod/paymentMethod.vue';
export default {
  components: {
    PaymentMethod
  },
  data() {
    return {
      orderId: null,
      // 用来区分是支付完成返回的标识
      openFlag: null,
      polyOrderId: null,
      // 订单信息
      orderInfo: {},
      // 立即支付弹框
      payWayPop: false,
      // 订单列表,一般长度为1的数组
      orderList: [],
      // 重定向页面
      jumpUrl: location.href + '&type=open',
      loadingMask: false,
      exportFlag: false,
      // 订单类型  road 路段  park  停车场
      orderType: 'road'
    };
  },
  onLoad(page) {
    this.orderId = page?.orderId;
    // 该标识判断是否是从支付完成页面回调回来
    this.openFlag = page?.type;
    this.orderType = page?.orderType;
    this.polyOrderId = page?.polyOrderId;
    if (this.orderId) {
      // 如果type标识和支付订单id同时存在,证明需要执行轮询判断支付状态,否则直接查询
      if (this.openFlag && this.polyOrderId) {
        this.loadingMask = true;
        this.handlePayStatus(this.polyOrderId);
        let time = 0;
        this.timer = setInterval(() => {
          time++;
          this.handlePayStatus(this.polyOrderId);
          // 超过60s直接清除轮询
          if (time === 60) {
            clearInterval(this.timer);
          }
        }, 1000);
      } else {
        this.handleGetOrderinfo(this.orderId, this.orderType);
      }
    }
  },
  methods: {
    jumpOrderList() {
      this.$u.route({
        url: 'pages/center/order/order'
      });
    },
    /**
     * 通过订单id去获取订单信息
     * */
    handleGetOrderinfo(orderId, orderType) {
      if (orderType == 'road') {
        this.$u.api
          .getOrderDetail({
            id: orderId
          })
          .then((res) => {
            if (res.code === 200) {
              this.orderInfo = res.data;
            } else {
              this.$refs.uToast.show({
                title: res.msg,
                type: 'error'
              });
            }
          });
      } else {
        this.$u.api
          .getRoomOrderDetail({
            id: orderId
          })
          .then((res) => {
            if (res.code === 200) {
              this.orderInfo = res.data;
            } else {
              this.$refs.uToast.show({
                title: res.msg,
                type: 'error'
              });
            }
          });
      }
    },
    /**
     * 查询支付状态
     * @param { String } orderId
     */
    handlePayStatus(orderId) {
      this.$u.api
        .getOrderInfo({
          orderId
        })
        .then((res) => {
          if (res.code === 200) {
            if (res.data.payStatus === 1 || res.data.payStatus === 3) {
              this.loadingMask = false;
              clearInterval(this.timer);
              this.handleGetOrderinfo(this.orderId, this.orderType);
            }
          } else {
            this.$refs.uToast.show({
              title: res.msg,
              type: 'error'
            });
            this.loadingMask = false;
            clearInterval(this.timer);
          }
        })
        .catch(() => {
          this.loadingMask = false;
          clearInterval(this.timer);
        });
    },
    goPay(orderId) {
      this.orderList = [];
      this.orderList.push(orderId);
      if (this.orderType == 'park') {
        this.exportFlag = true;
      } else {
        this.exportFlag = false;
      }
      if (this.orderList.length > 0) {
        this.payWayPop = true;
      } else {
        this.$refs.uToast.show({
          title: '当前订单编号不存在,请重新进入当前页面!',
          type: 'warning'
        });
      }
    },
    /**
     * 关闭支付方式弹框
     * */
    closePaymentMethod() {
      this.payWayPop = false;
    }
  },
  filters: {
    verifyPaySource(value) {
      if (value === 0) {
        return '现金支付';
      } else if (value === 1) {
        return '微信支付';
      } else if (value === 2) {
        return '支付宝支付';
      } else if (value === 3) {
        return '贵州银行快捷支付';
      } else if (value === 4) {
        return '贵州银行扫码支付';
      } else if (value === 5) {
        return '贵州银行被扫支付';
      } else if (value === 6) {
        return '贵州银行无感支付';
      } else {
        return '其他';
      }
    }
  },
  destroyed() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>

<style lang="scss" scoped>
@import './orderDetails.scss';
</style>