源文件
This commit is contained in:
135
jeepay-ui-uapp-face/pages/handover/handover.vue
Normal file
135
jeepay-ui-uapp-face/pages/handover/handover.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<!-- 门店展示 暂时接口不满足 -->
|
||||
<!-- <view class="hand-item">
|
||||
<view class="hand-title">门店</view>
|
||||
<view class="hand-info">小伙计</view>
|
||||
</view> -->
|
||||
<view class="hand-item">
|
||||
<view class="hand-title">收银员</view>
|
||||
<view class="hand-info">{{ vdata.realname || vdata.userInfo.realname }}</view>
|
||||
</view>
|
||||
<view class="hand-item">
|
||||
<view class="hand-title">上班时间</view>
|
||||
<view class="hand-info">{{ vdata.workStartTime }}</view>
|
||||
</view>
|
||||
<view class="hand-item">
|
||||
<view class="hand-title">下班时间</view>
|
||||
<view class="hand-info">{{ vdata.workEndTime }}</view>
|
||||
</view>
|
||||
<view class="line"></view>
|
||||
<view class="hand-item">
|
||||
<view class="hand-title">收款金额</view>
|
||||
<view class="hand-info">￥{{ vdata.payAmount }}</view>
|
||||
</view>
|
||||
<view class="hand-item">
|
||||
<view class="hand-title">收款笔数</view>
|
||||
<view class="hand-info">{{ vdata.payCount }}</view>
|
||||
</view>
|
||||
<view class="hand-item">
|
||||
<view class="hand-title">退款金额</view>
|
||||
<view class="hand-info">￥{{ vdata.refundAmount }}</view>
|
||||
</view>
|
||||
<view class="hand-item">
|
||||
<view class="hand-title">退款笔数</view>
|
||||
<view class="hand-info">{{ vdata.refundCount }}</view>
|
||||
</view>
|
||||
<view class="footer-but" v-if="vdata.userInfo.realname">
|
||||
<view @tap="handHandover">交班</view>
|
||||
<view class="record" @tap="toHandoverList">交班记录</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { $handover, $workRecords, $getHandoverById } from '@/http/apiManager'
|
||||
import { reactive, ref } from 'vue'
|
||||
import storageManage from '@/commons/utils/storageManage.js'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import cal from '@/commons/utils/cal.js'
|
||||
import dayjs from 'dayjs'
|
||||
onLoad((options) => {
|
||||
getHandoverInfo(options.id)
|
||||
})
|
||||
const vdata = reactive({
|
||||
userInfo: storageManage.userInfo(),
|
||||
})
|
||||
const getHandoverInfo = (id) => {
|
||||
if (id) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: '交班详情',
|
||||
})
|
||||
$getHandoverById(id).then(({ bizData }) => {
|
||||
bizData = cal.yuan(bizData, ['refundAmount', 'payAmount'])
|
||||
Object.assign(vdata, bizData)
|
||||
console.log(bizData)
|
||||
})
|
||||
return
|
||||
}
|
||||
$handover().then(({ bizData }) => {
|
||||
bizData = cal.yuan(bizData, ['refundAmount', 'payAmount'])
|
||||
Object.assign(vdata, bizData)
|
||||
})
|
||||
}
|
||||
|
||||
const handHandover = () => {
|
||||
uni.showModal({
|
||||
title: '是否确认交班？',
|
||||
content: '交班自动下班 并 退出登录',
|
||||
showCancel: true,
|
||||
success: ({ confirm, cancel }) => {
|
||||
if (confirm) {
|
||||
$workRecords('2').then((res) => {
|
||||
uni.$J.showToast('交班成功即将退登录').then((r) => {
|
||||
storageManage.cleanByLogout()
|
||||
uni.reLaunch({
|
||||
url: '/pages/login/login',
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const toHandoverList = () => uni.navigateTo({ url: '/pages/handover/handoverList' })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.hand-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx;
|
||||
font-size: 28rpx;
|
||||
|
||||
// border-bottom: 1rpx solid #ededed;
|
||||
.hand-info {
|
||||
color: #bbb;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 15rpx;
|
||||
background-color: #ededed;
|
||||
}
|
||||
|
||||
.footer-but {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 60rpx;
|
||||
|
||||
view {
|
||||
flex: 0 0 30%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 70rpx;
|
||||
background-color: $v-primary;
|
||||
border-radius: 14rpx;
|
||||
color: #fff;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
.record {
|
||||
background-color: rgba($color: $v-primary, $alpha: 0.7);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
155
jeepay-ui-uapp-face/pages/handover/handoverList.vue
Normal file
155
jeepay-ui-uapp-face/pages/handover/handoverList.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<view class="page-wrapper">
|
||||
<view class="custom-content">
|
||||
<view class="start-time" :style="{ color: vdata.startTime ? '#000' : '#666' }" @tap="refStartTime.show">{{
|
||||
vdata.startTime || '请选择开始时间'
|
||||
}}</view>
|
||||
<view class="endTime-time" :style="{ color: vdata.endTime ? '#000' : '#666' }" @tap="refEndTime.show">{{
|
||||
vdata.endTime || '请选择结束时间'
|
||||
}}</view>
|
||||
</view>
|
||||
<block v-for="v in vdata.list" :key="v.id">
|
||||
<view class="list-main" @tap="toDetails(v.id)">
|
||||
<view class="left">
|
||||
<view class="title">{{ v.realname }}</view>
|
||||
<view class="time">{{ v.workStartTime }}</view>
|
||||
</view>
|
||||
<view class="line">—</view>
|
||||
<view class="right">
|
||||
<view class="amount title">￥{{ (v.successAmount / 100).toFixed(2) }}</view>
|
||||
<view class="time">{{ v.workEndTime || '未下班' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class="list-null" v-if="!vdata.hasNext">暂无更多数据</view>
|
||||
</view>
|
||||
<xp-picker mode="ymdhi" ref="refStartTime" @confirm="timeConfirm($event, 'startTime')">
|
||||
<view></view>
|
||||
</xp-picker>
|
||||
<xp-picker mode="ymdhi" ref="refEndTime" @confirm="timeConfirm($event, 'endTime')">
|
||||
<view></view>
|
||||
</xp-picker>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { onLoad, onReachBottom, onUnload } from '@dcloudio/uni-app'
|
||||
import { $handoverList } from '@/http/apiManager'
|
||||
import dayjs from 'dayjs'
|
||||
const refStartTime = ref(null)
|
||||
const refEndTime = ref(null)
|
||||
const vdata = reactive({
|
||||
list: [],
|
||||
hasNext: true,
|
||||
})
|
||||
const params = {
|
||||
pageSize: 10,
|
||||
pageNumber: 1,
|
||||
queryDateRange: '',
|
||||
}
|
||||
const getList = () => {
|
||||
if (!vdata.hasNext) return
|
||||
$handoverList(params).then(({ bizData }) => {
|
||||
vdata.list.push(...bizData.records)
|
||||
vdata.hasNext = bizData.hasNext
|
||||
})
|
||||
}
|
||||
getList()
|
||||
onReachBottom(() => {
|
||||
params.pageNumber += 1
|
||||
getList()
|
||||
})
|
||||
/**
|
||||
* @param {e} Object 组件原生 回调 时间戳 日期
|
||||
* @param {key} String vdata 对象的 key 值 赋值使用
|
||||
* */
|
||||
const timeConfirm = (e, key) => {
|
||||
vdata[key] = dayjs(e.timestamp).format('YYYY-MM-DD hh:mm')
|
||||
|
||||
if (key == 'endTime' || (vdata.endTime != undefined && dayjs(vdata.startTime).isAfter(vdata.endTime))) {
|
||||
console.log('进入请求')
|
||||
params.queryDateRange = `customDateTime_${vdata.startTime + ':00'}_${vdata.endTime + ':00'}`
|
||||
vdata.list = []
|
||||
params.pageNumber = 1
|
||||
vdata.hasNext = true
|
||||
getList()
|
||||
}
|
||||
}
|
||||
/**
|
||||
* @param {id} String 用于 和后端交互请求详情
|
||||
* */
|
||||
const toDetails = (id) => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/handover/handover?id=' + id,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 15rpx;
|
||||
margin: 30rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 14rpx;
|
||||
|
||||
.title {
|
||||
font-size: 22rpx;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
color: $v-primary;
|
||||
}
|
||||
|
||||
.line {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.time,
|
||||
.line {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.custom-content {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 30rpx;
|
||||
|
||||
view {
|
||||
flex: 0 0 30%;
|
||||
padding: 10rpx 0;
|
||||
background-color: #ded7d7;
|
||||
text-align: center;
|
||||
border-radius: 10rpx;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.list-null {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #666;
|
||||
margin: 30rpx 0;
|
||||
padding: 0 30rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 600;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 35%;
|
||||
height: 2rpx;
|
||||
background-color: #ededed;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user