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"> </u-image>
      <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>
        <u-cell-item
          title="优惠总金额"
          :arrow="false"
          :border-bottom="false"
          :border-top="false"
          :value="(orderInfo.preferentialAmount ? orderInfo.preferentialAmount.toFixed(2) : 0) + ' 元'"
        >
        </u-cell-item>
      </u-cell-group>
      <u-cell-group>
        <u-cell-item title="订单编号 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.orderId"></u-cell-item>
        <template v-if="orderInfo.deviceType == 1">
          <u-cell-item title="入场时间 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.inTime"></u-cell-item>
          <u-cell-item title="出场时间 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.outTime"></u-cell-item>
        </template>
        <template v-else>
          <u-cell-item title="开始计费 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.inTime"></u-cell-item>
          <u-cell-item title="结束计费 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.outTime"></u-cell-item>
        </template>
        <!-- <u-cell-item
          title="停车时长 "
          :arrow="false"
          :border-bottom="false"
          :border-top="false"
          :value="orderInfo.duration"
        ></u-cell-item> -->
        <!-- <u-cell-item
				  title="免费时长 "
				  :arrow="false"
				  :border-bottom="false"
				  :border-top="false"
				  :value="orderInfo.freeDuration"
				></u-cell-item> -->
        <template>
          <u-cell-item title="免费时长 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.freeDuration"></u-cell-item>
        </template>
        <!-- <template v-else>
					<u-cell-item title="免费时长 " :arrow="false" :border-bottom="false" :border-top="false" :value="new Date(orderInfo.createTime).valueOf() < new Date('2022-06-20 00:00:00').valueOf() ? '0天0时15分0秒' : '0天0时30分0秒'"></u-cell-item>
				</template> -->
        <u-cell-item title=" 计费时长 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.calcDuration"></u-cell-item>
        <u-cell-item title="累计停车时长 " :arrow="false" :border-bottom="false" :border-top="false" :value="orderInfo.duration"></u-cell-item>
        <u-cell-item
          v-if="orderInfo.createTime"
          title="订单创建时间 "
          :arrow="false"
          :border-bottom="false"
          :border-top="false"
          :value="orderInfo.createTime"
        ></u-cell-item>
        <u-cell-item
          v-if="orderInfo.payTime"
          title="支付时间 "
          :arrow="false"
          :border-bottom="false"
          :border-top="false"
          :value="orderInfo.payTime"
        ></u-cell-item>
        <u-cell-item
          v-if="orderInfo.payStatus == 1"
          title="缴费方式 "
          :arrow="false"
          :border-bottom="false"
          :border-top="false"
          :value="orderInfo.paySource | verifyPaySource"
        ></u-cell-item>
      </u-cell-group>
    </view>
    <!-- 地磁显示支付按钮条件  支付状态(0-未支付,2-支付中,3-支付失败)并且订单金额不能为0 -->
    <view class="" v-if="orderInfo.deviceType === 1">
      <view
        class="bottom-btn-wrap"
        v-if="
          (orderInfo.payStatus == 0 || orderInfo.payStatus == 2 || orderInfo.payStatus == 3) &&
          openFlag !== 'open' &&
          Number(orderInfo.payAmount) !== 0
        "
      >
        <view class="bottom-btn" @click="goPay(orderId)">去支付</view>
      </view>
      <view
        class="bottom-btn-wrap"
        v-else-if="
          (orderInfo.payStatus == 0 || orderInfo.payStatus == 2 || orderInfo.payStatus == 3) &&
          openFlag !== 'open' &&
          Number(orderInfo.payAmount) === 0
        "
      >
        <view class="tips">提示：可寻找附近的收费员打印小票并扫码出场</view>
      </view>
    </view>
    <!-- 其他显示支付按钮条件  支付状态(0-未支付,2-支付中,3-支付失败) -->
    <view class="" v-else>
      <view class="bottom-btn-wrap" v-if="(orderInfo.payStatus == 0 || orderInfo.payStatus == 2 || orderInfo.payStatus == 3) && openFlag !== 'open'">
        <view class="bottom-btn" @click="goPay(orderId)">去支付</view>
      </view>
    </view>
    <view class="bottom-btn-wrap" v-if="openFlag === 'open' && orderInfo.payStatus == 1">
      <view class="bottom-btn" @click="jumpOrderList()">返回订单页</view>
    </view>

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

    <!-- 加载中遮罩 -->
    <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
    };
  },
  onLoad(page) {
    this.orderId = page?.orderId;
    // 该标识判断是否是从支付完成页面回调回来
    this.openFlag = page?.type;
    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, openFlag);
          // 超过60s直接清除轮询
          if (time === 60) {
            clearInterval(this.timer);
          }
        }, 1000);
      } else {
        this.handleGetOrderinfo(this.orderId);
      }
    }
  },
  methods: {
    jumpOrderList() {
      this.$u.route({
        url: 'pages/center/order/order'
      });
    },
    /**
     * 通过订单id去获取订单信息
     * */
    handleGetOrderinfo(orderId) {
      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'
            });
          }
        });
    },
    /**
     * 查询支付状态
     * @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);
            }
          } 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.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>