wxapp_shuibei/pages/order_pay_status/index.vue

<template>
  <view>
    <view class="payment-status">
      <!--失败时： 用icon-iconfontguanbi fail替换icon-duihao2 bg-color-->
      <view
        class="iconfont icons icon-success bg-color"
        v-if="order_pay_info.paid || order_pay_info.payType == 'offline'"
      ></view>
      <view class="iconfont icons fail-status icon-fail" v-else></view>
      <!-- 失败时：订单支付失败 -->
      <view class="status" v-if="order_pay_info.payType != 'offline'">{{
        order_pay_info.paid ? "订单支付成功" : "订单支付失败"
      }}</view>
      <view class="status" v-else>订单创建成功</view>
      <view class="wrapper">
        <view class="item acea-row row-between-wrapper">
          <view>订单编号</view>
          <view class="itemCom">{{ order_pay_info.orderId }}</view>
        </view>
        <view class="item acea-row row-between-wrapper">
          <view>下单时间</view>
          <view class="itemCom">{{
            order_pay_info.createTime ? order_pay_info.createTime : "-"
          }}</view>
        </view>
        <view class="item acea-row row-between-wrapper">
          <view>支付方式</view>
          <block v-if="order_pay_info.mallType === 0">
            <!-- <view class="itemCom" v-if="order_pay_info.payType == 'weixin'"
              >微信支付</view
            > -->
            <view class="itemCom" v-if="order_pay_info.payType == 'yue'"
              >余额支付</view
            >
            <view
              class="itemCom"
              v-else-if="order_pay_info.payType == 'offline'"
              >线下支付</view
            >
            <!-- <view class="itemCom" v-else-if="order_pay_info.payType == 'alipay'"
              >支付宝支付</view
            > -->
          </block>
          <view class="itemCom" v-else>贝币支付</view>
        </view>
        <view class="item acea-row row-between-wrapper">
          <view>支付金额</view>
          <view class="itemCom" v-if="order_pay_info.mallType === 0">{{
            order_pay_info.payPrice
          }}</view>
          <view class="itemCom" v-else>{{ order_pay_info.totalPrice }}</view>
        </view>
        <!--失败时加上这个  -->
        <view
          class="item acea-row row-between-wrapper"
          v-if="order_pay_info.paid == 0 && order_pay_info.payType != 'offline'"
        >
          <view>失败原因</view>
          <!-- <view class="itemCom">{{ status == 2 ? "取消支付" : msg }}</view> -->
          <view class="itemCom">{{ msg }}</view>
        </view>
      </view>
      <!--失败时： 重新购买 -->
      <view @tap="goOrderDetails">
        <button formType="submit" class="returnBnt bg-color" hover-class="none">
          查看订单
        </button>
      </view>
      <button
        @click="goMallIndex"
        class="returnBnt cart-color"
        formType="submit"
        hover-class="none"
      >
        返回商城
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import { useAppStore } from "@/stores/app.js";
import { onLoad, onBackPress } from "@dcloudio/uni-app";
import { getOrderDetail } from "@/api/order.js";
import { openOrderSubscribe } from "@/utils/SubscribeMessage.js";
import { toLogin } from "@/libs/login.js";
import { usePayment } from "@/hooks/usePayment";
import { addRecommenderRole, getJoinTeamUserRoles } from "@/utils/util";

const appStore = useAppStore();
const { paymentResult } = usePayment();

const orderId = ref("");
const order_pay_info = ref({
  paid: 1,
  _status: {},
});
const isAuto = ref(false);
const isShowAuth = ref(false);
const status = ref(0);
const msg = ref("");
const join_roles = ref([]);

function getOrderPayInfo() {
  uni.showLoading({
    title: "正在加载中",
  });
  getOrderDetail(orderId.value)
    .then((res) => {
      uni.hideLoading();
      order_pay_info.value = res.data;
      uni.setNavigationBarTitle({
        title: res.data.paid ? "支付成功" : "支付失败",
      });
      // 自动成为推荐官
      if (res.data.paid && !join_roles.value.includes("推荐官")) {
        addRecommenderRole();
      }
    })
    .catch(() => {
      uni.hideLoading();
    });
}

function goMallIndex() {
  console.log("mallType", order_pay_info.value.mallType);
  uni.navigateTo({
    url: "/pages/index/index",
  });
}

onBackPress((options) => {
  if (order_pay_info.value.mallType === 1) {
    uni.navigateTo({
      url: "/pages/index/index",
    });
    return true;
  }
  const productId = order_pay_info.value.orderInfoList?.[0].productId || "";
  if (productId) {
    uni.reLaunch({
      url: `/pages/goods_details/index?id=${productId}`,
    });
    return true;
  }
  uni.reLaunch({
    url: `/pages/index/index`,
  });

  return true;
});

function goOrderDetails() {
  uni.navigateTo({
    url: "/pages/order_details/index?order_id=" + orderId.value,
  });
}

// 授权回调
function onLoadFun() {
  getOrderPayInfo();
}

// 监听登录状态
watch(
  () => appStore.isLogin,
  (newV) => {
    if (newV) {
      getOrderPayInfo();
    }
  }
);

// 页面加载
onLoad(async (options) => {
  console.log({ options });
  if (!options.order_id) {
    return uni.showToast({
      title: "缺少参数无法查看订单支付状态",
      icon: "none",
    });
  }
  orderId.value = options.order_id;
  status.value = options.status || 0;
  msg.value = options.msg || "";
  join_roles.value = await getJoinTeamUserRoles();
  if (appStore.isLogin) {
    getOrderPayInfo();
  } else {
    toLogin();
  }
});
</script>

<style lang="scss" scoped>
.fail-status {
  background-color: #999 !important;
  text-shadow: none !important;
}
.payment-status {
  background-color: #fff;
  margin: 120rpx 30rpx 0 30rpx;
  border-radius: 10rpx;
  padding: 1rpx 0 28rpx 0;
}
.payment-status .icons {
  font-size: 70rpx;
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 140rpx;
  // text-shadow: 0px 4px 0px #df1e14;
  border: 6rpx solid #f5f5f5;
  margin: -76rpx auto 0 auto;
  background-color: #999;
}

.payment-status .iconfont {
  font-size: 75rpx;
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  color: #fff;
  text-align: center;
  line-height: 140rpx;
  // text-shadow: 0px 4px 0px #df1e14;
  border: 6rpx solid #f5f5f5;
  margin: -76rpx auto 0 auto;
  background-color: #999;
  background-color: $theme-color;
}

.payment-status .iconfont.fail {
  text-shadow: 0px 4px 0px #7a7a7a;
}

.payment-status .status {
  font-size: 32rpx;
  font-weight: bold;
  text-align: center;
  margin: 25rpx 0 37rpx 0;
}

.payment-status .wrapper {
  border: 1rpx solid #eee;
  margin: 0 30rpx 47rpx 30rpx;
  padding: 35rpx 0;
  border-left: 0;
  border-right: 0;
}

.payment-status .wrapper .item {
  font-size: 28rpx;
  color: #282828;
}

.payment-status .wrapper .item ~ .item {
  margin-top: 20rpx;
}

.payment-status .wrapper .item .itemCom {
  color: #666;
}

.payment-status .returnBnt {
  width: 630rpx;
  height: 86rpx;
  border-radius: 50rpx;
  color: #fff;
  font-size: 30rpx;
  text-align: center;
  line-height: 86rpx;
  margin: 0 auto 20rpx auto;
}
</style>