parking_h5_all/pages/payPage/payPage.vue

<template>
  <view class="wrap">
    <view class="order-info">
      <view class="order-info-top">
        <view class="addr u-flex">
          <u-icon name="map-fill" color="#fff" size="28"></u-icon>
          <view class="addr-text">{{ orderInfo.roadName }}</view>
        </view>
        <view class="car u-flex">
          <view class="car-no">{{ orderInfo.vehicleNo }}</view>
          <view class="car-type">临时车</view>
        </view>
        <view class="time in-time">进场时间：{{ orderInfo.inTime }}</view>
        <view class="time out-time">进场时间：{{ orderInfo.outTime }}</view>
        <view class="duration">已停放 {{ orderInfo.duration }}</view>
        <view class="total-amount">¥{{ orderInfo.totalAmount }}</view>
      </view>
      <view class="order-info-bottom">
        <u-cell-item
          center
          :border-bottom="false"
          :value="orderInfo.preferentialAmount"
          :title-style="{ color: '#8A8A8A' }"
          :icon-style="{ color: '#D8D8D8' }"
          title="已优惠"
        ></u-cell-item>
        <view class="pay-amount u-flex u-row-between">
          <view class="title">应付金额</view>
          <view class="amount"><span class="rmb">¥</span>{{ orderInfo.payAmount }}</view>
        </view>
        <view class="tip">停车费不超过30元，可先离场后在付费</view>
      </view>
    </view>
    <view class="bottom-btn static" @click="handlewxpay">去支付</view>

    <u-toast ref="uToast" />
  </view>
</template>

<script>
import getUrlParams from '@/utils/getUrlParams.js';
export default {
  data() {
    return {
      orderId: null,
      orderInfo: []
    };
  },
  onLoad() {
    let locationLocaturl = window.location.hash;
    this.orderId = getUrlParams(locationLocaturl, 'orderId'); // 截取orderId
    console.log('this.orderId', this.orderId);
    this.handleGetOrderinfo(this.orderId);
  },
  methods: {
    handleGetOrderinfo(orderId) {
      this.$u.api
        .getOrderinfo({ id: orderId })
        .then((res) => {
          // this.$refs.uToast.show({
          // 	title: res.msg,
          // 	type: 'success',
          // });
          this.orderInfo = res.data;
          console.log('handleGetOrderinfo', JSON.parse(JSON.stringify(res)));
        })
        .catch((err) => {
          this.$refs.uToast.show({
            title: err.msg,
            type: 'error'
          });
          console.log('handleGetOrderinfo ', err);
        });
    },
    getCode() {
      var local = window.location.href; // 获取页面url
      let locationLocaturl = window.location.search;
      this.code = getUrlParams(locationLocaturl, 'code'); // 截取code
      if (this.code == null || this.code === '') {
        // 如果没有code，则去请求
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.config.wxAppid}&redirect_uri=${encodeURIComponent(
          local
        )}&response_type=code&scope=snsapi_userinfo&#wechat_redirect`;
      } else {
        this.handleGetWXInfo(this.code); //把code传给后台获取用户信息
      }
    },
    handleGetWXInfo(code) {
      // 通过code获取 openId等用户信息，/api/user/wechat/login 为后台接口
      let _this = this;
      this.$u.api
        .getWXInfo(code)
        .then((res) => {
          if (res.code === 200) {
            this.$u.vuex('vuex_wxinfo', res.data);
            // 继续支付
          }
        })
        .catch((err) => {
          this.$refs.uToast.show({
            title: err.msg,
            type: 'error'
          });
        });
    },
    handlewxpay() {
      if (!this.$store.state.vuex_wxinfo.openId) {
        // 如果微信openId，则需用code去后台获取
        this.$refs.uToast.show({
          title: '请登录后重试!',
          type: 'info'
          // url: '/pages/user/index'
        });
        this.getCode();
      } else {
        // 别的业务逻辑
        this.getWXPay();
      }
    },
    async getWXPay(id) {
      let params = {
        orderId: this.orderId,
        openid: this.$store.state.vuex_wxinfo.openId,
        tradeType: 'test'
      };
      await this.$wxApi.config();
      this.$pay.wxPay(params).then((res) => {
        console.log('wxPay', res.code);
        if (res.code == 0) {
          // 成功
          this.$u.route({
            url: 'pages/index/index'
            // params: {
            // 	keyword: this.keyword
            // }
          });
        } else if (res.code == 1) {
          // 取消
          // uni.redirectTo({
          // 	url: '/pages/userCenter/myOrder/myOrder'
          // })
        } else if (res.code == 2) {
          this.$refs.uToast.show({
            title: '支付失败，请检查!',
            type: 'error'
            // url: '/pages/user/index'
          });
        }
      });
    }
  }
};
</script>

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