mirror of
https://github.com/crmeb/CRMEB.git
synced 2026-02-22 17:50:27 +00:00
215 lines
4.1 KiB
Vue
215 lines
4.1 KiB
Vue
<template>
|
||
<view :style="colorStyle" class="main">
|
||
<view class='payment-status'>
|
||
<view class='iconfont icons icon-duihao2 bg-color'></view>
|
||
<view class='status'>代付成功</view>
|
||
<view class='wrapper'>
|
||
<view class='itemCom'> <text class="rmb">¥</text> {{resData.pay_price || 0.00}}</view>
|
||
</view>
|
||
<view class="head-other">
|
||
<view class="user-img">
|
||
<image class="" :src="resData.avatar" mode=""></image>
|
||
</view>
|
||
<view class="order-status">
|
||
谢谢你为我付款，还可以再去看看其他商品哟~
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<button @click="goIndex" class='returnBnt' formType="submit" hover-class='none'>返回首页</button>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getOrderDetail
|
||
} from '@/api/order.js';
|
||
import {
|
||
toLogin
|
||
} from '@/libs/login.js';
|
||
import {
|
||
mapGetters
|
||
} from "vuex";
|
||
import colors from "@/mixins/color";
|
||
import {
|
||
friendDetail
|
||
} from '@/api/user.js'
|
||
export default {
|
||
mixins: [colors],
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
isAuto: false, //没有授权的不会自动授权
|
||
isShowAuth: false, //是否隐藏授权
|
||
resData: {}
|
||
};
|
||
},
|
||
computed: mapGetters(['isLogin']),
|
||
watch: {
|
||
isLogin: {
|
||
handler: (newV, oldV) => {
|
||
if (newV) {
|
||
this.getDetail();
|
||
}
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
onLoad: function(options) {
|
||
this.options = options
|
||
if (!options.order_id) return this.$util.Tips({
|
||
title: '缺少参数无法查看订单支付状态'
|
||
}, {
|
||
tab: 3,
|
||
url: 1
|
||
});
|
||
this.orderId = options.order_id;
|
||
},
|
||
onShow() {
|
||
if (this.isLogin) {
|
||
this.getDetail();
|
||
} else {
|
||
toLogin();
|
||
}
|
||
},
|
||
methods: {
|
||
getDetail() {
|
||
friendDetail(this.orderId).then(res => {
|
||
console.log(res)
|
||
if (this.resData.paid == 0) {
|
||
return this.$util.Tips({
|
||
title: '该订单暂未支付'
|
||
}, {
|
||
tab: 3,
|
||
url: 1
|
||
});
|
||
}
|
||
this.resData = res.data.info
|
||
|
||
})
|
||
},
|
||
openTap() {
|
||
this.$set(this, 'couponsHidden', !this.couponsHidden);
|
||
},
|
||
onLoadFun: function() {
|
||
this.getDetail();
|
||
},
|
||
/**
|
||
*
|
||
* 支付完成查询支付状态
|
||
*
|
||
*/
|
||
getOrderPayInfo: function() {
|
||
let that = this;
|
||
uni.showLoading({
|
||
title: '正在加载中'
|
||
});
|
||
getOrderDetail(that.orderId).then(res => {
|
||
uni.hideLoading();
|
||
that.$set(that, 'order_pay_info', res.data);
|
||
uni.setNavigationBarTitle({
|
||
title: res.data.paid ? '支付成功' : '未支付'
|
||
});
|
||
this.loading = true
|
||
}).catch(err => {
|
||
this.loading = true
|
||
uni.hideLoading();
|
||
});
|
||
},
|
||
/**
|
||
* 去首页关闭当前所有页面
|
||
*/
|
||
goIndex: function(e) {
|
||
uni.switchTab({
|
||
url: '/pages/index/index'
|
||
});
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.main {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: #fff;
|
||
|
||
.payment-status {
|
||
background-color: #fff;
|
||
margin: 0rpx 30rpx 0 30rpx;
|
||
border-radius: 10rpx;
|
||
padding: 94rpx 0 60rpx 0;
|
||
color: #333;
|
||
|
||
.icons {
|
||
font-size: 70rpx;
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
border-radius: 50%;
|
||
color: #fff;
|
||
text-align: center;
|
||
line-height: 140rpx;
|
||
border: 6rpx solid #f5f5f5;
|
||
margin: 0rpx auto 0 auto;
|
||
background-color: #999;
|
||
}
|
||
|
||
.rmb {
|
||
font-size: 33rpx;
|
||
}
|
||
|
||
.status {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
margin: 25rpx 0 7rpx 0;
|
||
}
|
||
|
||
.wrapper {
|
||
text-align: center;
|
||
color: #333;
|
||
font-size: 66rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.head-other {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-top: 20rpx;
|
||
|
||
.user-img {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.order-status {
|
||
margin-left: 20rpx;
|
||
color: #666666;
|
||
padding: 6rpx 13rpx;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
.returnBnt {
|
||
width: 80%;
|
||
height: 86rpx;
|
||
border-radius: 50rpx;
|
||
color: #fff;
|
||
font-size: 30rpx;
|
||
text-align: center;
|
||
line-height: 86rpx;
|
||
margin: 0 auto;
|
||
background-color: var(--view-theme);
|
||
}
|
||
}
|
||
</style>
|