first
This commit is contained in:
314
pages/order/components/OrderScreen.vue
Normal file
314
pages/order/components/OrderScreen.vue
Normal 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
pages/order/components/RefundCard.vue
Normal file
113
pages/order/components/RefundCard.vue
Normal 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
pages/order/components/confirmRefundPopup.vue
Normal file
77
pages/order/components/confirmRefundPopup.vue
Normal 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
pages/order/components/stateList.js
Normal file
12
pages/order/components/stateList.js
Normal 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" },
|
||||
])
|
||||
Reference in New Issue
Block a user