|
|
@@ -0,0 +1,278 @@
|
|
|
+<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>
|