源文件
This commit is contained in:
102
jeepay-ui-uapp-face/pages/order/components/OrderCard.vue
Normal file
102
jeepay-ui-uapp-face/pages/order/components/OrderCard.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<view class="card-wrapper" @tap="emits('click')">
|
||||
<view class="img-box" :style="{ backgroundColor: payImg(wayCodeType).bgColor }">
|
||||
<image :src="payImg(wayCodeType).imgUrl" mode="scaleToFill" />
|
||||
</view>
|
||||
<view class="card-info">
|
||||
<view class="card-title">
|
||||
<view class="title">收款</view>
|
||||
<view class="num">+{{ (amount / 100).toFixed(2) }}</view>
|
||||
</view>
|
||||
<view class="order-number">
|
||||
<view class="order-title">订单编号：</view>
|
||||
{{ payOrderId }}
|
||||
</view>
|
||||
<view class="card-time">
|
||||
<view class="created-time">{{ createdAt }}</view>
|
||||
<view class="card-state" :style="{ backgroundColor: payState(state).color }">{{ payState(state).text }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const emits = defineEmits(['click'])
|
||||
const props = defineProps({
|
||||
payOrderId: { type: String }, //订单编号
|
||||
createdAt: { type: String }, //创建 时间
|
||||
amount: { type: [String, Number] }, //收款金额
|
||||
wayCodeType: { type: String }, // 支付方式
|
||||
state: { type: [String, Number] }, // 状态
|
||||
})
|
||||
const payImg = uni.$J.dataMap.payImg
|
||||
const payState = uni.$J.dataMap.payStateMap
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-wrapper {
|
||||
display: flex;
|
||||
|
||||
margin: 30rpx;
|
||||
padding: 20rpx 0 20rpx 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 15rpx;
|
||||
|
||||
.img-box {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 30rpx;
|
||||
width: 20%;
|
||||
border-radius: 14rpx;
|
||||
|
||||
image {
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
.card-info {
|
||||
flex: 1;
|
||||
|
||||
.card-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
|
||||
.num {
|
||||
margin-right: 20rpx;
|
||||
color: rgba(45, 218, 119, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.order-number {
|
||||
display: flex;
|
||||
margin: 20rpx 0;
|
||||
font-size: 18rpx;
|
||||
color: rgba(102, 102, 102, 1);
|
||||
}
|
||||
|
||||
.card-time {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.created-time {
|
||||
font-size: 18rpx;
|
||||
color: rgba(179, 179, 179, 1);
|
||||
}
|
||||
|
||||
.card-state {
|
||||
padding: 8rpx 30rpx;
|
||||
background-color: rgba(45, 218, 119, 1);
|
||||
border-radius: 20rpx 0 0 20rpx;
|
||||
font-size: 12rpx;
|
||||
color: #fff;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
173
jeepay-ui-uapp-face/pages/order/components/OrderScreen.vue
Normal file
173
jeepay-ui-uapp-face/pages/order/components/OrderScreen.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<uni-drawer ref="refDrawer" mode="right">
|
||||
<uni-nav-bar statusBar :border="false" backgroundColor="transparent" />
|
||||
<view class="title">根据时间筛选</view>
|
||||
<view class="time-wrapper">
|
||||
<view class="time-star" @tap="refStarTime.show" :style="{ color: vdata.starTime ? '#000' : '#999' }">{{ vdata.starTime || '开始时间' }}</view>
|
||||
---
|
||||
<view class="time-end" @tap="refEndTime.show" :style="{ color: vdata.endTime ? '#000' : '#999' }">{{ vdata.endTime || '结束时间' }}</view>
|
||||
</view>
|
||||
<view class="title">支付方式</view>
|
||||
<view class="pay-model">
|
||||
<block v-for="v in payModelList" :key="v.value">
|
||||
<view class="model-item" :class="{ 'selected-item': vdata.payModel.includes(v.value) }" @tap="selectedItem(v.value, 'payModel')">{{ v.label }}</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="title">订单状态</view>
|
||||
<view class="state-list pay-model">
|
||||
<block v-for="v in stateList" :key="v.value">
|
||||
<view class="state-item model-item" :class="{ 'selected-item': vdata.payState.includes(v.value) }" @tap="selectedItem(v.value, 'payState')">{{ v.label }}</view>
|
||||
</block>
|
||||
</view>
|
||||
<view class="footer-button">
|
||||
<view @tap="reset">重置</view>
|
||||
<view class="confirm" @tap="confirm">确认</view>
|
||||
</view>
|
||||
</uni-drawer>
|
||||
<xp-picker ref="refStarTime" mode="ymdhi" v-model="vdata.starTime" @confirm="confirmStart"><view></view></xp-picker>
|
||||
<xp-picker ref="refEndTime" mode="ymdhi" v-model="vdata.endTime" @confirm="confirmEnd"><view></view></xp-picker>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { inject, onMounted, reactive, ref } from 'vue'
|
||||
import { startAndEndTime } from '@/commons/utils/timeInspect'
|
||||
import dayjs from 'dayjs'
|
||||
const params = inject('params') //引入 父级注入的依赖
|
||||
const emits = defineEmits(['confirm'])
|
||||
const payModelList = [
|
||||
{ label: '云闪付', value: 'YSFPAY' },
|
||||
{ label: '支付宝', value: 'ALIPAY' },
|
||||
{ label: '银联', value: 'UNIONPAY' },
|
||||
{ label: '微信', value: 'WECHAT' },
|
||||
{ label: '其他', value: 'OTHER' },
|
||||
]
|
||||
const stateList = [
|
||||
{ label: '订单生成', value: '0' },
|
||||
{ label: '支付中', value: '1' },
|
||||
{ label: '支付成功', value: '2' },
|
||||
{ label: '支付失败', value: '3' },
|
||||
{ label: '已撤销', value: '4' },
|
||||
{ label: '已退款', value: '5' },
|
||||
{ label: '订单关闭', value: '6' },
|
||||
]
|
||||
const vdata = reactive({
|
||||
starTime: '',
|
||||
endTime: '',
|
||||
payModel: [],
|
||||
payState: [],
|
||||
})
|
||||
const refStarTime = ref(null)
|
||||
const refEndTime = ref(null)
|
||||
const refDrawer = ref(null)
|
||||
const open = () => {
|
||||
refDrawer.value.open()
|
||||
}
|
||||
const close = () => {
|
||||
refDrawer.value.close()
|
||||
}
|
||||
const confirmStart = (e) => {
|
||||
vdata.starTime = dayjs(e.timestamp).format('YYYY-MM-DD hh:mm')
|
||||
console.log(e)
|
||||
}
|
||||
const confirmEnd = (e) => {
|
||||
vdata.endTime = dayjs(e.timestamp).format('YYYY-MM-DD hh:mm')
|
||||
}
|
||||
const selectedItem = (v, key) => {
|
||||
if (vdata[key].includes(v))
|
||||
return vdata[key].splice(
|
||||
vdata[key].findIndex((item) => item == v),
|
||||
1
|
||||
)
|
||||
|
||||
vdata[key].push(v)
|
||||
}
|
||||
const confirm = () => {
|
||||
if (vdata.starTime || vdata.endTime) {
|
||||
if (!startAndEndTime(vdata.starTime, vdata.endTime)) return
|
||||
params.queryDateRange = `customDateTime_${vdata.starTime + ':00'}_${vdata.endTime + ':00'}`
|
||||
}
|
||||
params.unionOrderState = vdata.payState.join(',')
|
||||
params.unionWayCodeType = vdata.payModel.join(',')
|
||||
emits('confirm')
|
||||
close()
|
||||
}
|
||||
const reset = () => {
|
||||
vdata.starTime = ''
|
||||
vdata.endTime = ''
|
||||
vdata.payModel = []
|
||||
vdata.payState = []
|
||||
}
|
||||
defineExpose({ open, close })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
margin-top: 20rpx;
|
||||
margin-left: 30rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
.time-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 20rpx;
|
||||
font-size: 16rpx;
|
||||
letter-spacing: 2rpx;
|
||||
.time-star,
|
||||
.time-end {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 30rpx;
|
||||
height: 50rpx;
|
||||
background-color: rgb(235, 227, 227);
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
.pay-model {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding: 10rpx;
|
||||
.model-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin: 20rpx;
|
||||
height: 50rpx;
|
||||
width: 24%;
|
||||
font-size: 16rpx;
|
||||
letter-spacing: 2rpx;
|
||||
background-color: rgba($color: #000000, $alpha: 0.15);
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
}
|
||||
.footer-button {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 30rpx;
|
||||
margin-top: 80rpx;
|
||||
color: #fff;
|
||||
font-size: 18rpx;
|
||||
letter-spacing: 2rpx;
|
||||
view {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 220rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 10rpx;
|
||||
background-color: rgba($color: #666666, $alpha: 0.3);
|
||||
}
|
||||
.confirm {
|
||||
background-color: $v-primary;
|
||||
}
|
||||
}
|
||||
.selected-item {
|
||||
background-color: $v-primary !important;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user