448 lines
13 KiB
Vue
448 lines
13 KiB
Vue
<template>
|
||
<!-- 如果有退款 使用渐变色背景色 如果没有退款 使用 f7背景色 -->
|
||
<view class="detail-wrapper" :style="{ background: vdata.refundCount > 0 ? '' : '#f7f7f7' }">
|
||
<view class="detail-main">
|
||
<view class="detail-header">
|
||
<JeepayCustomNavbar :transparent="true" title="订单详情" backCtrl="back" />
|
||
<view style="height: 30rpx"></view>
|
||
<view class="detail-title">
|
||
<view class="title-img" :style="{ backgroundColor: datamap.payOrderImage(vdata.orderInfo?.wayCodeType)?.bgColor }">
|
||
<image :src="datamap.payOrderImage(vdata.orderInfo?.wayCodeType)?.imgUrl" mode="scaleToFill" />
|
||
</view>
|
||
<view class="money-wrapper">
|
||
<view class="detail-money">
|
||
<view>
|
||
<text class="icon-money">￥</text>
|
||
{{ cal.cert2Dollar(vdata.orderInfo.amount) }}
|
||
</view>
|
||
<image src="/static/iconImg/icon-more.svg" mode="scaleToFill" @tap="singlePopupRef.open('refund')" />
|
||
</view>
|
||
<view class="detail-number">{{ vdata.orderInfo.payOrderId }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<br />
|
||
<view class="detail-info bdr-after bdr-before border-f2">
|
||
<view class="detail-item">
|
||
<view class="item-title">交易状态</view>
|
||
<view class="item-info">
|
||
<text class="detail-dot" :style="{ backgroundColor: datamap.payOrderState(vdata.orderInfo.state).color }" />
|
||
{{ datamap.payOrderState(vdata.orderInfo.state).text }}
|
||
</view>
|
||
</view>
|
||
|
||
<view class="detail-item">
|
||
<view class="item-title">交易门店</view>
|
||
<view class="item-info">{{ vdata.orderInfo.storeName }}</view>
|
||
</view>
|
||
|
||
<view class="detail-item">
|
||
<view class="item-title">支付方式</view>
|
||
<view class="item-info">{{ datamap.payOrderImage(vdata.orderInfo.wayCodeType).title }}</view>
|
||
</view>
|
||
|
||
<view class="detail-item">
|
||
<view class="item-title">下单应用</view>
|
||
<view class="item-info">{{ vdata.orderInfo.appId }}</view>
|
||
</view>
|
||
|
||
<view class="detail-item">
|
||
<view class="item-title">商户订单号</view>
|
||
<view class="item-info">{{ vdata.orderInfo.mchOrderNo }}</view>
|
||
</view>
|
||
|
||
<view class="detail-item">
|
||
<view class="item-title">支付订单号</view>
|
||
<view class="item-info">{{ vdata.orderInfo.payOrderId }}</view>
|
||
</view>
|
||
|
||
<view class="detail-item">
|
||
<view class="item-title">渠道订单号</view>
|
||
<view class="item-info">{{ vdata.orderInfo.channelOrderNo }}</view>
|
||
</view>
|
||
|
||
<view class="detail-item">
|
||
<view class="item-title">分账状态</view>
|
||
<view class="item-info">
|
||
<text v-if="vdata.orderInfo.divisionState == 0" color="blue">未发生分账</text>
|
||
<text v-else-if="vdata.orderInfo.divisionState == 1" color="orange">待分账</text>
|
||
<text v-else-if="vdata.orderInfo.divisionState == 2" color="red">分账处理中</text>
|
||
<text v-else-if="vdata.orderInfo.divisionState == 3" color="green">任务已结束</text>
|
||
<text v-else color="#f50">未知</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="detail-item">
|
||
<view class="item-title">顾客备注</view>
|
||
<view class="item-info">{{ vdata.orderInfo.buyerRemark }}</view>
|
||
</view>
|
||
<view class="detail-item">
|
||
<view class="item-title">下单时间</view>
|
||
<view class="item-info">{{ vdata.orderInfo.createdAt }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="detail-info">
|
||
<view class="detail-item">
|
||
<view class="item-title">支付金额</view>
|
||
<view class="item-info">￥ {{ cal.cert2Dollar(vdata.orderInfo.amount) }}</view>
|
||
</view>
|
||
<view class="detail-item">
|
||
<view class="item-title">收单费率</view>
|
||
<view class="item-info">{{ (vdata.orderInfo.mchFeeRateNum && (vdata.orderInfo.mchFeeRateNum.replace('%', '') * 1).toFixed(2)) || '--' }}%</view>
|
||
</view>
|
||
<view class="detail-item">
|
||
<view class="item-title">收单手续费</view>
|
||
<view class="item-info">
|
||
￥ {{ vdata.orderInfo.mchFeeRateNum && cal.cert2Dollar(vdata.orderInfo.amount * (vdata.orderInfo.mchFeeRateNum.replace('%', '') / 100)) }}
|
||
</view>
|
||
</view>
|
||
<view class="detail-item">
|
||
<view class="item-title">垫资费率</view>
|
||
<view class="item-info">{{ vdata.orderInfo.cashRate }}%</view>
|
||
</view>
|
||
<view class="detail-item">
|
||
<view class="item-title">垫资手续费</view>
|
||
<view class="item-info">￥ {{ cal.cert2Dollar(vdata.orderInfo.amount * vdata.orderInfo.cashRate) }}</view>
|
||
</view>
|
||
<view class="detail-item">
|
||
<view class="item-title">退款总额</view>
|
||
<view class="item-info">￥{{ cal.cert2Dollar(vdata.orderInfo.refundAmount) }}</view>
|
||
</view>
|
||
<view class="detail-item">
|
||
<view class="item-title">退款次数</view>
|
||
<view class="item-info">{{ vdata.orderInfo.refundTimes }}</view>
|
||
</view>
|
||
<view class="detail-item">
|
||
<view class="item-title">优惠金额</view>
|
||
<view class="item-info">￥{{ cal.cert2Dollar(vdata.orderInfo.discountAmt) }}</view>
|
||
</view>
|
||
<view class="detail-item">
|
||
<view class="item-title">补贴金额</view>
|
||
<view class="item-info">￥{{ cal.cert2Dollar(vdata.orderInfo.marketAmt) }}</view>
|
||
</view>
|
||
<view class="detail-item">
|
||
<view class="item-title">预计入账金额</view>
|
||
<view class="item-info" v-if="vdata.orderInfo.state == 5">
|
||
<template v-if="vdata.orderInfo.refundState == 1">
|
||
￥{{
|
||
vdata.orderInfo.mchFeeRateNum &&
|
||
cal.cert2Dollar(
|
||
vdata.orderInfo.amount - vdata.orderInfo.amount * (vdata.orderInfo.mchFeeRateNum.replace('%', '') / 100) - vdata.orderInfo.refundAmount
|
||
)
|
||
}}
|
||
</template>
|
||
<template v-else>
|
||
￥{{
|
||
vdata.orderInfo.mchFeeRateNum &&
|
||
cal.cert2Dollar(vdata.orderInfo.amount * (vdata.orderInfo.mchFeeRateNum.replace('%', '') / 100) - vdata.orderInfo.amount)
|
||
}}
|
||
</template>
|
||
</view>
|
||
<view class="item-info" v-else>
|
||
￥{{
|
||
vdata.orderInfo.mchFeeRateNum &&
|
||
cal.cert2Dollar(
|
||
vdata.orderInfo.amount -
|
||
vdata.orderInfo.amount * (vdata.orderInfo.mchFeeRateNum.replace('%', '') / 100) -
|
||
vdata.orderInfo.amount * vdata.orderInfo.cashRate -
|
||
vdata.orderInfo.refundAmount
|
||
)
|
||
}}
|
||
</view>
|
||
</view>
|
||
<view class="detail-item" @tap.stop="tips.open()">
|
||
<view class="item-title">
|
||
<text class="t">入账结算类型</text>
|
||
<uni-icons type="help-filled" size="20" color="#c6c6c6" class="icon" />
|
||
</view>
|
||
<view class="item-info">
|
||
{{ vdata.orderInfo.settleType }}
|
||
</view>
|
||
</view>
|
||
<!-- <view class="detail-item">
|
||
<view class="item-title">实收金额</view>
|
||
<view class="item-info">￥{{ cal.cert2Dollar(vdata.orderInfo.amount - vdata.orderInfo.refundAmount - vdata.orderInfo.mchFeeAmount) }}</view>
|
||
</view> -->
|
||
<view class="detail-button flex-center" hover-class="touch-button" hover-stay-time="150" @tap="printOrder">打印小票</view>
|
||
|
||
<!-- 不包含退款记录 && 支持退款 -->
|
||
<!-- 包含退款记录时在列表内显示 -->
|
||
<!-- <view v-if="isShowRefund() && vdata.refundCount <= 0" class="refund-button flex-center" hover-class="touch-button" hover-stay-time="150" @tap="toRefundPage">
|
||
发起退款
|
||
</view> -->
|
||
<view v-if="vdata.orderInfo.refundState != 2" class="refund-button flex-center" hover-class="touch-button" hover-stay-time="150" @tap="toRefundPage">发起退款</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 包含退款记录时， 需要展示退款记录。 -->
|
||
<RefundCard
|
||
v-show="vdata.refundCount > 0"
|
||
:orderInfo="vdata.orderInfo"
|
||
ref="refundCardRef"
|
||
@refund="toRefundPage"
|
||
:refundBtn="isShowRefund()"
|
||
@refRefundCountFunc="refRefundCountFunc"
|
||
/>
|
||
</view>
|
||
|
||
<JTipsPopupContent ref="tips" title="入账结算类型" buttonText="我知道了">
|
||
<block v-for="(v, i) in tipsList" :key="i">
|
||
<view class="tips-wrapper">
|
||
<view class="tips-title">{{ v.title }}</view>
|
||
<view class="tips-info">{{ v.info }}</view>
|
||
</view>
|
||
</block>
|
||
</JTipsPopupContent>
|
||
<JSinglePopup ref="singlePopupRef" activeColor="#FF5B4C" :list="vdata.singleList" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import { nextTick, onMounted, reactive, ref } from 'vue';
|
||
import { req, reqLoad, API_URL_PAY_ORDER_LIST, $payOrderPrint } from '@/http/apiManager.js';
|
||
import RefundCard from './components/RefundCard.vue';
|
||
import { onPageScroll, onLoad, onUnload } from '@dcloudio/uni-app';
|
||
import cal from '@/commons/utils/cal.js';
|
||
import datamap from '@/commons/utils/datamap.js';
|
||
import infoBox from '@/commons/utils/infoBox.js';
|
||
import ent from '@/commons/utils/ent.js';
|
||
import go from '@/commons/utils/go.js';
|
||
import emit from '@/commons/utils/emit.js';
|
||
|
||
onPageScroll(() => {});
|
||
|
||
const refundCardRef = ref();
|
||
|
||
const tips = ref(null);
|
||
const tipsList = ref([
|
||
{
|
||
title: 'T1',
|
||
info: '工作日次日到账，交易资金于周末和法定节假日次日的6点-12点自动结算至银行卡'
|
||
},
|
||
{
|
||
title: 'D1',
|
||
info: '自然日次日到账，全年365天（不分节假日）的交易资金于自然日的次日6点-12点自动结算至银行卡'
|
||
},
|
||
{
|
||
title: 'D0',
|
||
info: '实时到账，全年365天24小时（不分节假日）的交易资金笔笔实时秒到至银行卡，更放心更快捷定时结算，在一天24个整点时辰，根据入账需求选择结算范围，可任意指定一个或多个结算时间点'
|
||
}
|
||
]);
|
||
|
||
// 监听 更新事件
|
||
onUnload(() => uni.$off(emit.ENAME_REF_PAY_ORDER));
|
||
uni.$on(emit.ENAME_REF_PAY_ORDER, function (data) {
|
||
refData(vdata.orderInfo.payOrderId);
|
||
});
|
||
|
||
function refData(payOrderId) {
|
||
vdata.singleList = [{ label: '打印小票', value: 'print', fun: printOrder }];
|
||
reqLoad.getById(API_URL_PAY_ORDER_LIST, payOrderId).then(({ bizData }) => {
|
||
vdata.orderInfo = bizData;
|
||
|
||
// 追加退款
|
||
if (isShowRefund()) {
|
||
vdata.singleList.push({ label: '订单退款', value: 'refund', fun: toRefundPage });
|
||
}
|
||
|
||
// 当不同状态， 可能没有此组件
|
||
nextTick(() => {
|
||
if (refundCardRef && refundCardRef.value) {
|
||
refundCardRef.value.refList(vdata.orderInfo.payOrderId);
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
onLoad((options) => {
|
||
refData(options.payOrderId);
|
||
});
|
||
|
||
const vdata = reactive({
|
||
singleList: [],
|
||
|
||
orderInfo: {},
|
||
|
||
refundCount: 0 // 退款记录 0条。
|
||
});
|
||
|
||
const singlePopupRef = ref();
|
||
|
||
function isShowRefund() {
|
||
return ent.has('ENT_PAY_ORDER_REFUND') && vdata.orderInfo.state === 2 && vdata.orderInfo.refundState !== 2;
|
||
}
|
||
|
||
// 去退款详情页
|
||
function toRefundPage() {
|
||
go.to('PAGES_REFUND_ORDER', { payOrderId: vdata.orderInfo.payOrderId });
|
||
}
|
||
|
||
// 订单打印
|
||
function printOrder() {
|
||
$payOrderPrint(vdata.orderInfo.payOrderId).then((bizData) => {
|
||
infoBox.showToast('打印指令已发送');
|
||
});
|
||
}
|
||
|
||
function refRefundCountFunc(count) {
|
||
vdata.refundCount = count;
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.tips-wrapper {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 0 50rpx;
|
||
height: 170rpx;
|
||
|
||
.tips-title {
|
||
margin-bottom: 12rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.tips-info {
|
||
font-size: 26rpx;
|
||
color: #808080;
|
||
}
|
||
}
|
||
.detail-wrapper {
|
||
background: linear-gradient(135deg, rgba(255, 91, 76, 1) 60%, rgba(203, 41, 114, 1) 100%);
|
||
.detail-main {
|
||
// min-height: calc(100vh - 35rpx);
|
||
min-height: 100vh;
|
||
padding-bottom: 35rpx;
|
||
border-radius: 0 0 60rpx 60rpx;
|
||
background-color: $v-color-bgrey;
|
||
}
|
||
}
|
||
.detail-header {
|
||
background: url('/static/indexImg/user-bg.svg');
|
||
padding-bottom: 32rpx;
|
||
.detail-title {
|
||
display: flex;
|
||
padding: 0 50rpx;
|
||
min-height: 160rpx;
|
||
.title-img {
|
||
flex-shrink: 0;
|
||
margin-right: 30rpx;
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
.money-wrapper {
|
||
flex: 1;
|
||
}
|
||
.detail-money {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.icon-money {
|
||
font-size: 26rpx;
|
||
}
|
||
image {
|
||
width: 70rpx;
|
||
height: 70rpx;
|
||
}
|
||
}
|
||
.detail-number {
|
||
margin-top: 20rpx;
|
||
color: rgba(0, 0, 0, 0.5);
|
||
font-size: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
.detail-info {
|
||
position: relative;
|
||
padding: 20rpx 40rpx;
|
||
margin: 0 auto;
|
||
width: 680rpx;
|
||
box-sizing: border-box;
|
||
border-radius: $J-b-r32;
|
||
background-color: $J-bg-ff;
|
||
.detail-button,
|
||
.refund-button {
|
||
margin: 20rpx 0 10rpx 0;
|
||
height: 110rpx;
|
||
font-size: 33rpx;
|
||
font-weight: 500;
|
||
color: #fff;
|
||
border-radius: $v-b-r20;
|
||
background: $jeepay-bg-primary;
|
||
}
|
||
.refund-button {
|
||
margin-top: 30rpx;
|
||
color: #ff5b4c;
|
||
background: rgba(255, 91, 76, 0.1);
|
||
}
|
||
}
|
||
.border-f2 {
|
||
border-bottom: 2px dashed #f2f2f2;
|
||
}
|
||
.bdr-after::after,
|
||
.bdr-before::before {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
bottom: -25rpx;
|
||
z-index: 99;
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
background-color: $v-color-bgrey;
|
||
border-radius: 50%;
|
||
}
|
||
.bdr-after::after {
|
||
left: -25rpx;
|
||
}
|
||
.bdr-before::before {
|
||
right: -25rpx;
|
||
}
|
||
.touch-button {
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.detail-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx 0;
|
||
.item-title {
|
||
flex-shrink: 0;
|
||
font-size: $J-f-size30;
|
||
font-weight: 400;
|
||
color: $J-color-t8c;
|
||
display: flex;
|
||
align-items: center;
|
||
.icon {
|
||
margin-left: 8upx;
|
||
position: relative;
|
||
top: 3upx;
|
||
}
|
||
}
|
||
.item-info {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
text-align: right;
|
||
font-size: $J-f-size30;
|
||
font-weight: 400;
|
||
word-break: break-all;
|
||
padding-left: 32upx;
|
||
.detail-dot {
|
||
align-self: center;
|
||
display: block;
|
||
margin-right: 15rpx;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border-radius: 50%;
|
||
background-color: #ff5b4c;
|
||
}
|
||
}
|
||
}
|
||
</style>
|