czg_team/shangfutong-ui
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

源文件

Browse Source
This commit is contained in:
gyq
2024-05-23 14:39:33 +08:00
commit a1128dd791
2997 changed files with 500069 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

314
jeepay-ui-uapp-merchant/pages/order/components/OrderScreen.vue Normal file
View File

@@ -0,0 +1,314 @@
<template>
<uni-drawer ref="drawer" mode="right" @change="change" :width="650">
<view class="screen-wrapper">
<JeepayCustomNavbar>
<view class="screen-title">订单筛选</view>
</JeepayCustomNavbar>
<scroll-view scroll-y class="screen-main">
<view class="time-wrapper">
<view class="time-title" style="margin-top: 42rpx">时间</view>
<view class="time-main">
<block v-for="v in timeList" :key="v.value">
<view class="time-item flex-center" :class="{ 'screen-active': v.value == vdata.selected }" @tap="vdata.selected = v.value">{{ v.text }}</view>
</block>
</view>
</view>
<view class="custom-wrapper" :class="{ 'custom-active': vdata.selected == 'custom' }">
<view class="custom-time custom-top-time">
<view class="custom-title">开始时间</view>
<view class="custom-tips" :style="{ color: vdata.startTime ? '#000' : '' }" @tap="startTime.show()">{{ vdata.startTime?.slice(0, -3) || '请选择开始时间' }}</view>
<image src="/static/iconImg/icon-arrow-right.svg" mode="scaleToFill" />
</view>
<view class="custom-time">
<view class="custom-title">结束时间</view>
<view class="custom-tips" :style="{ color: vdata.endTime ? '#000' : '' }" @tap="endTime.show()">{{ vdata.endTime?.slice(0, -3) || '请选择结束时间' }}</view>
<image src="/static/iconImg/icon-arrow-right.svg" mode="scaleToFill" />
</view>
</view>
<view class="screen-line" :class="{ 'custom-active-line': vdata.selected != 'custom' }"></view>
<view class="state-wrapper">
<view class="time-title">订单状态</view>
<view class="state-main">
<block v-for="(v, i) in stateList" :key="i">
<view class="state-item flex-center" :class="{ 'screen-active': vdata.stateArray.includes(v.value) }" @tap="orderStateOrWayCode(v.value, 'stateArray')">{{
v.text
}}</view>
</block>
</view>
</view>
<view class="screen-line" style="margin-top: 30rpx"></view>
<view class="pay-wrapper">
<view class="time-title">支付方式</view>
<view class="time-main">
<block v-for="(v, i) in payList" :key="i">
<view class="time-item flex-center" :class="{ 'screen-active': vdata.wayCodeArray.includes(v.value) }" @tap="orderStateOrWayCode(v.value, 'wayCodeArray')">{{
v.text
}}</view>
</block>
</view>
</view>
</scroll-view>
<!-- 按钮部分 -->
<view class="screen-button footer-button-style">
<view class="button-rest" hover-class="touch-button" hover-stay-time="150" @tap="reset">重置</view>
<view class="button-confirm" hover-class="touch-button" hover-stay-time="150" @tap="confirm">确认</view>
</view>
</view>
</uni-drawer>
<!-- 时间选择器 放在抽屉外面 否则选择器 大小受限 抽屉大小 -->
<template v-if="vdata.flag">
<xp-picker ref="endTime" mode="ymdhi" :history="true" @confirm="timeClick($event, 'endTime')"> <view></view></xp-picker>
<xp-picker ref="startTime" mode="ymdhi" :history="true" @confirm="timeClick($event, 'startTime')"> <view></view> </xp-picker>
</template>
</template>
<script setup>
import { reactive, ref, inject } from 'vue'
import { startAndEndTime } from '@/commons/utils/timeInspect'
import dayJs from 'dayjs'
// 搜索条件
let searchDataInject = inject('searchData')
let searchData = searchDataInject.value
let changePageMetaOverflowFunc = inject('changePageMetaOverflowFunc')
// 搜索 函数
let refTableFunc = inject('refTableFunc')
// 选择开始时间
const startTime = ref(null)
// 选择结束时间
const endTime = ref(null)
const drawer = ref(null) //获取抽屉实例
const vdata = reactive({
selected: 'today',
stateArray: [2, 5],
wayCodeArray: ['WECHAT', 'ALIPAY', 'YSFPAY', 'UNIONPAY', 'OTHER'],
flag: false,
})
const timeList = reactive([
{ text: '全部', value: '' },
{ text: '今天', value: 'today' },
{ text: '昨天', value: 'yesterday' },
{ text: '近7天', value: 'near2now_7' },
{ text: '近30天', value: 'near2yesterday_30' },
{ text: '自定义', value: 'custom' },
])
const stateList = reactive([
{ text: '支付成功', value: 2 },
{ text: '已退款', value: 5 },
{ text: '支付失败', value: 3 },
{ text: '订单生成', value: 0 },
{ text: '支付中', value: 1 },
{ text: '已撤销', value: 4 },
{ text: '订单关闭', value: 6 },
])
const payList = reactive([
{ text: '微信支付', value: 'WECHAT' },
{ text: '支付宝', value: 'ALIPAY' },
{ text: '云闪付', value: 'YSFPAY' },
{ text: '银联', value: 'UNIONPAY' },
{ text: '其他', value: 'OTHER' },
])
const selected = reactive({
time: 'custom',
})
const open = () => {
drawer.value.open()
}
// e 抽屉打开为true 关闭为 false
const change = (e) => {
if (changePageMetaOverflowFunc) {
changePageMetaOverflowFunc(!e)
}
vdata.flag = true
if (e) return uni.hideTabBar()
uni.showTabBar()
vdata.flag = false
}
// 时间选择器确认
const timeClick = (e, val) => {
vdata[val] = dayJs(e.timestamp).format('YYYY-MM-DD HH:mm:ss')
}
// 数组通用处理 有则删除 否则添加
const orderStateOrWayCode = (value, key) => {
// 如果存在值 删除
if (vdata[key].includes(value))
return vdata[key].splice(
vdata[key].findIndex((v) => v == value),
1
)
// 否则添加
vdata[key].push(value)
}
// 重置
const reset = () => {
vdata.selected = 'today'
vdata.stateArray = [2, 5]
vdata.wayCodeArray = payList.map((v) => v.value)
vdata.endTime = ''
vdata.startTime = ''
}
function confirm() {
// 自定义 筛选时间校验
if (vdata.selected == 'custom') {
if (!startAndEndTime(vdata.startTime, vdata.endTime)) return
}
// 模拟修改搜索 条件。
searchData.unionOrderState = vdata.stateArray.join(',')
searchData.queryDateRange = vdata.selected == 'custom' ? `customDateTime_${vdata.startTime}_${vdata.endTime || ''}` : vdata.selected
searchData.unionWayCodeType = vdata.wayCodeArray.join(',')
// 刷新父页面
refTableFunc()
// 关闭 弹层
drawer.value.close()
}
defineExpose({ open })
</script>
<style lang="scss" scoped>
.screen-wrapper {
display: flex;
flex-direction: column;
height: 100vh;
background-color: $J-bg-ff;
.screen-main {
height: calc(100vh - 88rpx - 260rpx);
}
}
.screen-title {
margin-left: 15rpx;
margin-right: 40rpx;
white-space: nowrap;
font-size: 33rpx;
font-weight: 500;
}
.time-title {
margin-left: 10rpx;
margin-bottom: 20rpx;
font-size: 30rpx;
font-weight: 500;
}
.time-wrapper {
padding: 0 30rpx;
margin-bottom: 10rpx;
}
.time-main {
display: grid;
grid-template-columns: repeat(3, 182rpx);
grid-template-rows: repeat(2, 90rpx);
grid-gap: 22rpx 22rpx;
border: 3rpx solid transparent;
.time-item {
color: rgba(0, 0, 0, 0.75);
font-size: 28rpx;
background-color: $J-bg-f5;
border-radius: $J-b-r10;
}
}
.state-wrapper {
padding: 0 30rpx;
.state-main {
display: grid;
grid-template-columns: repeat(3, 182rpx);
grid-template-rows: repeat(3, 90rpx);
grid-gap: 22rpx 22rpx;
border: 3rpx solid transparent;
.state-item {
height: 90rpx;
color: rgba(0, 0, 0, 0.75);
font-size: 28rpx;
background-color: $J-bg-f5;
border-radius: $J-b-r10;
}
}
}
.custom-wrapper {
padding-left: 30rpx;
height: 0;
transition: 0.2s ease-in;
overflow: hidden;
.custom-time {
display: flex;
align-items: center;
height: 110rpx;
.custom-title {
margin-right: 40rpx;
color: rgba(0, 0, 0, 0.75);
font-size: 28rpx;
}
.custom-tips {
flex: 1;
color: rgba(166, 166, 166, 1);
font-size: 28rpx;
}
image {
width: 110rpx;
height: 110rpx;
}
}
.custom-top-time {
border-bottom: 1rpx solid #ededed;
}
}
.custom-active {
height: 220rpx;
transition: 0.2s ease-in;
}
.pay-wrapper {
padding: 0 30rpx;
margin-bottom: 60rpx;
}
.screen-button {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx;
padding-bottom: 60rpx;
height: 110rpx;
view {
display: flex;
justify-content: center;
align-items: center;
height: 110rpx;
border-radius: 20rpx;
font-size: 33rpx;
font-weight: 500;
}
.button-rest {
width: 260rpx;
color: rgba(0, 0, 0, 0.5);
background-color: #f7f7f7;
}
.button-confirm {
flex: 1;
margin: 0 60rpx 0 20rpx;
color: #fff;
background: $jeepay-bg-primary;
}
}
.screen-active {
color: $J-color-t29 !important;
border: 3rpx solid #1a66ff !important;
background: linear-gradient(270deg, rgba(35, 143, 252, 0.1) 0%, rgba(26, 102, 255, 0.1) 100%) !important;
}
.screen-line {
height: 20rpx;
margin-bottom: 30rpx;
background-color: #f5f5f5;
}
.custom-active-line {
margin-top: 20rpx;
}
.touch-button {
opacity: 0.5;
}
</style>

113
jeepay-ui-uapp-merchant/pages/order/components/RefundCard.vue Normal file
View File

@@ -0,0 +1,113 @@
<template>
<view class="refund-wrapper" v-if="vdata.list.length > 0">
<view class="refund-title">退款记录</view>
<!-- 列表循环部分 start border-none 去掉边框类名 -->
<block v-for="(item, i) in vdata.list" :key="i">
<view class="refund-item border-none">
<view class="refund-money">
<view>退：￥{{ cal.cert2Dollar(item.refundAmount) }}</view>
<view>余：￥{{ calSubAmount(i) }}</view>
</view>
<view class="refund-time">{{ item.createdAt }}</view>
</view>
</block>
<!-- 列表循环部分end -->
<view v-if="props.refundBtn" class="refund-button flex-center" hover-class="touch-button" hover-stay-time="150" @tap="emits('refund')">发起退款</view>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue';
import { reqLoad, API_URL_REFUND_LIST } from '@/http/apiManager.js';
import { onPageScroll, onLoad } 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';
const props = defineProps({
refundBtn: { type: Boolean, default: false },
orderInfo: {
type: Object,
default: () => {
return {};
}
}
});
const vdata = reactive({
list: []
});
// 刷新列表
function refList(payOrderId) {
reqLoad.list(API_URL_REFUND_LIST, { payOrderId: payOrderId, state: 2, pageSize: -1 }).then(({ bizData }) => {
vdata.list = bizData.records;
emits('refRefundCountFunc', bizData.total);
});
}
function calSubAmount(index) {
let allRefundAmount = 0;
for (var i = index; i < vdata.list.length; i++) {
allRefundAmount += vdata.list[i].refundAmount;
}
return cal.cert2Dollar(props.orderInfo.amount - allRefundAmount);
}
const emits = defineEmits(['refund', 'refRefundCountFunc']);
defineExpose({ refList });
</script>
<style lang="scss" scoped>
.refund-wrapper {
padding: 0 75rpx;
padding-bottom: 70rpx;
box-sizing: border-box;
.refund-title {
margin: 70rpx 0 30rpx 0;
font-size: 32rpx;
font-weight: 500;
color: #fff;
}
.refund-item {
height: 160rpx;
border-bottom: 1rpx solid rgba(255, 255, 255, 0.2);
.refund-money {
display: flex;
justify-content: space-between;
margin: 30rpx 0 20rpx 0;
color: #fff;
font-size: 30rpx;
font-weight: 400;
}
.refund-time {
margin-bottom: 30rpx;
color: rgba(255, 255, 255, 0.65);
font-size: 30rpx;
font-weight: 400;
}
}
.border-none {
border: none;
}
.refund-button {
margin-top: 70rpx;
height: 110rpx;
font-size: 33rpx;
font-weight: 500;
color: #ff5b4c;
background-color: $J-bg-ff;
border-radius: $v-b-r20;
}
}
.touch-button {
opacity: 0.5;
}
</style>

77
jeepay-ui-uapp-merchant/pages/order/components/confirmRefundPopup.vue Normal file
View File

@@ -0,0 +1,77 @@
<template>
<uni-popup ref="popup" type="top" mask-background-color="rgba(0,0,0,.5)" :safe-area="false">
<view class="card-wrapper">
<image class="icon-close" src="/static/iconImg/icon-x.svg" mode="scaleToFill" @tap="close" />
<view class="title">请输入支付密码</view>
<view class="sub-title">退款</view>
<view class="refund-money">￥{{ vdata.refundAmount }}</view>
<JPasswordInput v-if="vdata.isShowPwdInput" margin="0 50rpx" :focus="true" ref="pwdInput" @inputChange="inputChange" />
</view>
</uni-popup>
</template>
<script setup>
import { onMounted, reactive, ref, nextTick } from 'vue'
const vdata = reactive({
refundAmount: 0,
isShowPwdInput: false,
})
const proms = {}
const popup = ref(null)
const pwdInput = ref(null)
const open = (money, callBack) => {
vdata.refundAmount = money
vdata.callBack = callBack
popup.value.open()
vdata.isShowPwdInput = false
nextTick(() => {
vdata.isShowPwdInput = true
})
}
const close = () => {
popup.value.close()
vdata.isShowPwdInput = false
}
// 输入框 e 输入的数字
const inputChange = (e) => {
if (e.length >= 6) return vdata.callBack(e)
}
const clearInput = () => pwdInput.value.clearInput()
defineExpose({ open, clearInput, close })
</script>
<style lang="scss" scoped>
.card-wrapper {
margin: 0 50rpx;
padding-bottom: 50rpx;
margin-top: 162rpx;
background-color: $J-bg-ff;
border-radius: $J-b-r32;
.icon-close {
padding: 30rpx;
width: 60rpx;
height: 60rpx;
}
.title {
text-align: center;
font-size: 30rpx;
font-weight: 500;
}
.sub-title {
margin-top: 40rpx;
margin-bottom: 20rpx;
text-align: center;
font-size: 30rpx;
color: #808080;
}
.refund-money {
margin-bottom: 70rpx;
text-align: center;
font-size: 50rpx;
font-weight: 500;
}
}
</style>

12
jeepay-ui-uapp-merchant/pages/order/components/stateList.js Normal file
View File

@@ -0,0 +1,12 @@
import { reactive, ref } from "vue"
export const stateList = reactive([
{ text: "支付成功", color: "#09BB07" },
{ text: "支付失败", color: "#CB2972" },
{ text: "订单生成", color: "#2980FD" },
{ text: "支付中", color: "#FFAA33" },
{ text: "部分退款", color: "#FF5B4C" },
{ text: "全额退款", color: "#FF5B4C" },
{ text: "全额退款", color: "#FF5B4C" },
{ text: "已撤销", color: "#808080" },
{ text: "订单关闭", color: "#D9D9D9" },
])

140
jeepay-ui-uapp-merchant/pages/order/order.vue Normal file
View File

@@ -0,0 +1,140 @@
<template>
<JeepayBackground>
<JeepayCustomNavbar>
<view class="store-name" @tap="selectedStore">{{ vdata.store.storeName }}<image src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill" /></view>
</JeepayCustomNavbar>
<view class="input-wrapper">
<view class="input-main" @tap="go.toSearchPage('payOrder')">
<image src="/static/iconImg/icon-search.svg" mode="scaleToFill" />
<input type="text" placeholder="搜索订单号" disabled placeholder-style="color:rgba(0, 0, 0, 0.35)" />
</view>
<view class="screen-wrapper flex-center" @tap="screen.open()">
<image src="/static/iconImg/icon-screen.svg" mode="scaleToFill" />
筛选
</view>
</view>
<JeepayTableList ref="jeepayTableListRef" :reqTableDataFunc="reqTableDataFunc" :searchData="vdata.searchData">
<template #tableBody="{ record }">
<PayOrderRender :record="record" />
</template>
</JeepayTableList>
<OrderScreen ref="screen" />
</JeepayBackground>
<!-- 选择门店 -->
<JeepayBizinfoSelect :isShowAllBiz="true" ref="jeepayPopupListSelect" />
</template>
<script setup>
import { reactive, ref, computed, provide } from 'vue'
import { onReachBottom, onUnload } from '@dcloudio/uni-app'
import go from '@/commons/utils/go.js'
import { stateList } from './components/stateList.js'
import OrderScreen from './components/OrderScreen.vue'
import PayOrderRender from '@/pages/list/render/PayOrderRender.vue'
import { req, reqLoad, API_URL_PAY_ORDER_LIST, API_URL_MCH_STORE_LIST } from '@/http/apiManager.js'
import emit from '@/commons/utils/emit.js'
onReachBottom(() => {})
// 监听 更新事件
onUnload(() => uni.$off(emit.ENAME_REF_PAY_ORDER))
uni.$on(emit.ENAME_REF_PAY_ORDER, function (data) {
jeepayTableListRef.value.refTable(true)
})
const screen = ref(null) //获取抽屉实例
const jeepayTableListRef = ref()
// 获取门店选择弹窗实例
const jeepayPopupListSelect = ref(null)
const vdata = reactive({
// 搜索对象 默认查询条件 今天 成功和已退款
searchData: {
queryDateRange: 'today',
unionOrderState: '2,5',
},
store: {
storeId: '',
storeName: '全部门店',
},
})
// 向子组件注入： 搜索条件
provide(
'searchData',
computed(() => vdata.searchData)
)
provide('refTableFunc', refTableFunc)
const toDetail = () => uni.navigateTo({ url: '/pages/order/orderDetail' })
// 请求
function reqTableDataFunc(params) {
return reqLoad.list(API_URL_PAY_ORDER_LIST, params)
}
// 选择门店
const selectedStore = () => {
jeepayPopupListSelect.value.open(vdata.store).then((selected) => {
if (selected) {
vdata.store = selected
vdata.searchData.storeId = selected.storeId
refTableFunc()
}
})
}
// 点击筛选条件的确定按钮
function refTableFunc() {
jeepayTableListRef.value.refTable(true)
}
</script>
<style lang="scss" scoped>
.store-name {
display: flex;
align-items: center;
font-size: 33rpx;
font-weight: 500;
image {
width: 44rpx;
height: 44rpx;
margin-left: 5rpx;
transform: rotate(180deg);
}
}
.input-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30rpx;
padding-top: 22rpx;
height: 110rpx;
background-color: $J-bg-ff;
.input-main {
flex: 1;
display: flex;
align-items: center;
height: 70rpx;
background: $J-bg-f5;
border-radius: $J-b-r12;
image {
padding: 22rpx;
width: 26rpx;
height: 26rpx;
}
input {
flex: 1;
font-size: 27rpx;
}
}
.screen-wrapper {
margin: 0 12rpx 0 20rpx;
font-size: 32rpx;
color: $J-color-t99;
image {
width: 28rpx;
height: 26rpx;
padding: 0 21rpx;
}
}
}
</style>

447
jeepay-ui-uapp-merchant/pages/order/orderDetail.vue Normal file
View File

@@ -0,0 +1,447 @@
<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.mchFeeRateNum.replace('%', '') / 100) - vdata.orderInfo.amount + 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>

183
jeepay-ui-uapp-merchant/pages/order/refund.vue Normal file
View File

@@ -0,0 +1,183 @@
<template>
<view class="refund-wrapper">
<JeepayCustomNavbar textColor="#fff" :transparent="true" title="订单退款" backCtrl="back" />
<view class="refund-main">
<view class="refund-title">退款金额</view>
<view class="refund-money">
<input type="digit" v-model="vdata.refundAmount" :maxlength="vdata.maxLength" id="" @input="inputChange" />
<view class="icon-unit">(元)</view>
</view>
<view class="sure-refund">
<text>可退 {{ cal.cert2Dollar(vdata.orderInfo.amount - vdata.orderInfo.refundAmount) }}</text>
<view class="all-refund" @tap="vdata.refundAmount = cal.cert2Dollar(vdata.orderInfo.amount - vdata.orderInfo.refundAmount, true)">全部退款</view>
</view>
<view class="refund-title">退款原因</view>
<view class="refund-reason">
<input type="text" placeholder="请输入退款原因" placeholder-style=" color: rgba(255,255,255,0.35)" v-model="vdata.refundRemark" />
</view>
<view class="refund-info">
<view class="info-title">订单金额</view>
<view class="info-text">￥{{ cal.cert2Dollar(vdata.orderInfo.amount) }}</view>
</view>
<view class="refund-info">
<view class="info-title">已退金额</view>
<view class="info-text">￥{{ cal.cert2Dollar(vdata.orderInfo.refundAmount) }}</view>
</view>
<view class="refund-info">
<view class="info-title">剩余金额</view>
<view class="info-text">￥{{ cal.cert2Dollar(vdata.orderInfo.amount - vdata.orderInfo.refundAmount) }}</view>
</view>
<view class="confirm-refund flex-center" hover-class="touch-button" hover-stay-time="150" @tap="confirmRefund">确认退款</view>
</view>
</view>
<confirmRefundPopup ref="refundPopup" />
</template>
<script setup>
import { reactive, ref } from 'vue';
import { reqLoad, API_URL_PAY_ORDER_LIST, $payOrderRefund } from '@/http/apiManager.js';
import confirmRefundPopup from './components/confirmRefundPopup.vue';
import { onLoad } 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';
onLoad((options) => {
reqLoad.getById(API_URL_PAY_ORDER_LIST, options.payOrderId).then(({ bizData }) => {
vdata.orderInfo = bizData;
});
});
const refundPopup = ref(null);
const vdata = reactive({
orderInfo: {},
refundModel: 1,
refundAmount: 0,
refundRemark: '', // 退款原因
maxLength: 15
});
// 确认退款
function confirmRefund() {
if (isNaN(vdata.refundAmount) || vdata.refundAmount <= 0) {
return infoBox.showToast('请输入退款金额');
}
if (parseFloat(vdata.refundAmount) > cal.cert2Dollar(vdata.orderInfo.amount - vdata.orderInfo.refundAmount, true)) {
return infoBox.showToast('退款金额超限');
}
if (!vdata.refundRemark) {
return infoBox.showToast('请输入退款原因');
}
// TODO 调起 支付密码弹层 发起请求。
refundPopup.value.open(vdata.refundAmount, refundPost);
}
// 只能输入小数点后两位
const inputChange = (e) => {
const value = e.detail.value;
if (!value.includes('.')) return (vdata.maxLength = 15); //不包含小数点
vdata.maxLength = value.split('.')[0].length + 3;
};
const refundPost = (payPassword) => {
console.log('payPassword', payPassword);
$payOrderRefund(vdata.orderInfo.payOrderId, vdata.refundAmount, vdata.refundRemark, payPassword, vdata.refundModel)
.then(({ bizData }) => {
infoBox.showSuccessToast('退款已申请').then(() => {
// 刷新订单数据
emit.pageEmit(emit.ENAME_REF_PAY_ORDER);
refundPopup.value.close();
go.back();
});
})
.catch((err) => {
refundPopup.value.clearInput();
});
};
</script>
<style lang="scss" scoped>
.refund-wrapper {
min-height: 100vh;
background: linear-gradient(135deg, rgba(255, 91, 76, 1) 0%, rgba(203, 41, 114, 1) 100%);
.refund-main {
padding: 0 60rpx;
.refund-title {
margin: 50rpx 0 10rpx 0;
font-size: 30rpx;
color: rgba(255, 255, 255, 0.7);
}
.refund-money {
display: flex;
justify-content: space-between;
align-items: flex-end;
min-height: 130rpx;
color: #fff;
border-bottom: 1rpx solid rgba(255, 255, 255, 0.25);
input {
height: 100rpx;
font-size: 60rpx;
font-weight: 500;
}
.icon-unit {
transform: translateY(-33rpx);
font-size: 30rpx;
font-weight: 500;
}
}
.sure-refund {
display: flex;
margin: 30rpx 0 20rpx 0;
color: rgba(255, 255, 255, 0.6);
font-size: 30rpx;
font-weight: 400;
.all-refund {
margin-left: 30rpx;
color: rgba(255, 255, 255, 1);
}
}
.refund-reason {
display: flex;
align-items: center;
margin-bottom: 66rpx;
height: 120rpx;
border-bottom: 1rpx solid rgba(255, 255, 255, 0.25);
input {
font-size: 30rpx;
font-weight: 400;
color: #fff;
}
}
.refund-info {
display: flex;
justify-content: space-between;
margin: 44rpx 0;
font-size: 30rpx;
font-weight: 400;
.info-title {
color: rgba(255, 255, 255, 0.7);
}
.info-text {
color: #fff;
font-weight: 500;
}
}
.confirm-refund {
margin-top: 74rpx;
height: 110rpx;
border-radius: $v-b-r20;
background-color: #fff;
color: #dd3b65;
font-size: 33rpx;
font-weight: 500;
}
}
}
</style>