493 lines
12 KiB
Vue
493 lines
12 KiB
Vue
<template>
|
||
<view class="page-wrapper">
|
||
<uni-nav-bar statusBar :border="false" leftWidth="50%" backgroundColor="transparent">
|
||
<template #left>
|
||
<view class="user-info">
|
||
<image :src="vdata.userInfo.avatarUrl" mode="scaleToFill" />
|
||
<view class="user-nickname">{{ vdata.userInfo.realname }}</view>
|
||
</view>
|
||
</template>
|
||
</uni-nav-bar>
|
||
|
||
<!-- 卡片部分 -->
|
||
<view class="index-card">
|
||
<view class="index-content">
|
||
<view class="index-main">
|
||
<view class="index-num">￥{{ vdata.indexData.payAmount }}</view>
|
||
<view class="index-title">今日总收益(元)</view>
|
||
</view>
|
||
<view class="index-main">
|
||
<view class="index-num">￥{{ vdata.indexData.refundAmount }}</view>
|
||
<view class="index-title">退款金额(元)</view>
|
||
</view>
|
||
</view>
|
||
<view class="index-card-footer">
|
||
<view>收益详情</view>
|
||
<view @tap="more">查看更多 ></view>
|
||
</view>
|
||
</view>
|
||
<!-- 发起收款 -->
|
||
<view class="pay-card" @tap="jumpPage('/pages/payment/payment')">
|
||
<image src="/static/indexImg/pay.png" mode="scaleToFill" />
|
||
<view class="pay-text">发起收款</view>
|
||
</view>
|
||
<!-- nav 导航部分 -->
|
||
<view class="index-nav">
|
||
<view class="nav-content">
|
||
<block v-for="(v, i) in navList" :key="i">
|
||
<view class="nav-main" @tap="jumpPage(v.url)">
|
||
<image :src="v.img" mode="scaleToFill" />
|
||
<view class="nav-title">{{ v.navTitle }}</view>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
<view class="but-content">
|
||
<view>
|
||
<JButton @tap="switchOpen" bgColor="rgba(0, 200, 0,0.15)" color="#00C800" bdColor="#00C800" :size="24">切换收款模式
|
||
</JButton>
|
||
</view>
|
||
<view>
|
||
<JButton @tap="open"
|
||
:bgColor="vdata.userInfo.workState == 2 ? 'rgba(0, 128, 255,0.15)' : 'rgba(255, 0, 43,0.15)'"
|
||
:color="vdata.userInfo.workState == 2 ? '#0080FF' : '#FF002B'"
|
||
:bdColor="vdata.userInfo.workState == 2 ? '#0080FF' : '#FF002B'" :size="24">{{
|
||
vdata.userInfo.workState == 1 ? '下班' : vdata.userInfo.workState == 2 ? '上班' : '上班' }}打卡</JButton>
|
||
</view>
|
||
<view>
|
||
<JButton bgColor="rgba(255, 170, 0,0.15)" color="#FFAA00" bdColor="#FFAA00" :size="24" @tap='getFrontAd'>刷新前屏广告
|
||
</JButton>
|
||
</view>
|
||
</view>
|
||
<view style="height: 20rpx"></view>
|
||
<JButton @tap="loginOut" bgColor="transparent" bdColor="rgba(0,0,0,0.1)" color="#FF002B">退出登录</JButton>
|
||
</view>
|
||
</view>
|
||
<uni-popup ref="refWorker" type="center">
|
||
<view class="worker-content">
|
||
<view class="title">{{ vdata.userInfo.workState == 1 ? '下班' : vdata.userInfo.workState == 2 ? '上班' : '上班' }}打卡
|
||
</view>
|
||
<view class="worker-time">请确认打卡时间：{{ dayjs().format('YYYY-MM-DD hh:mm') }}</view>
|
||
<view class="footer-but">
|
||
<view @tap="close">取消</view>
|
||
<view class="confirm"
|
||
@tap="confirmWorker(vdata.userInfo.workState == 1 ? '2' : vdata.userInfo.workState == 2 ? '1' : '1')">确认 </view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
<uni-popup ref="refSwitch" type="center">
|
||
<view class="switch-model">
|
||
<view class="title">切换模式</view>
|
||
<view class="sub-title">独立收银模式：<view class="model-tag">当前正在使用</view>
|
||
</view>
|
||
<view class="tips">接入电源后即可使用，后屏输入收款金额，前屏支持刷脸支付和扫码支付。</view>
|
||
<view class="sub-title">POS模式：</view>
|
||
<view class="tips">需要连接收银机或PC使用，即插即用，收款将会进入您的现有收银软件账户。</view>
|
||
<view class="pay-model" hover-class="hover-model" hover-stay-time="50" @tap="toPos">
|
||
<image src="/static/iconImg/switch-model.svg" mode="scaleToFill" />
|
||
切换至POS模式
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, ref } from 'vue'
|
||
import { $indexPayment, $workRecords, $userInfo, $adBannerList } from '@/http/apiManager'
|
||
import { onLoad, onReady, onUnload, onShow } from '@dcloudio/uni-app'
|
||
import storageManage from '@/commons/utils/storageManage.js'
|
||
import cal from '@/commons/utils/cal.js'
|
||
import dayjs from 'dayjs'
|
||
|
||
onLoad(() => {
|
||
getFrontAd()
|
||
if (storageManage.faceModel() && storageManage.faceModel() == 'pos') return uni.reLaunch({ url: '/pages/payModel/payModel' })
|
||
})
|
||
onShow(() => {
|
||
getIndexDate()
|
||
})
|
||
const refWorker = ref(null)
|
||
const refSwitch = ref(null)
|
||
|
||
// 导航栏列表
|
||
const navList = [
|
||
{
|
||
img: '/static/indexImg/order.png',
|
||
url: '/pages/order/order',
|
||
navTitle: '订单',
|
||
},
|
||
{
|
||
img: '/static/indexImg/handover.png',
|
||
url: '/pages/handover/handover',
|
||
navTitle: '交班',
|
||
},
|
||
{
|
||
img: '/static/indexImg/statics.png',
|
||
url: '/pages/stat/stat',
|
||
navTitle: '统计',
|
||
},
|
||
]
|
||
const vdata = reactive({
|
||
userInfo: storageManage.userInfo(), //取出用户信息
|
||
indexData: {},
|
||
})
|
||
// 查询 当天 收益情况
|
||
const getIndexDate = () => {
|
||
$indexPayment().then(({ bizData }) => {
|
||
const { dayCount } = bizData
|
||
vdata.indexData = cal.yuan(dayCount, ['payAmount', 'refundAmount']) //分转元
|
||
})
|
||
}
|
||
|
||
const open = () => refWorker.value.open()
|
||
const close = () => refWorker.value.close()
|
||
const switchOpen = () => refSwitch.value.open()
|
||
// 确认打卡
|
||
const confirmWorker = (state) => {
|
||
$workRecords(state).then((res) => {
|
||
uni.showToast({
|
||
title: '打卡成功',
|
||
icon: 'success|none',
|
||
mask: true,
|
||
})
|
||
// 请求用户信息
|
||
return $userInfo().then(({ bizData }) => {
|
||
// 更新用户数据
|
||
storageManage.userInfo(bizData)
|
||
// 更新用户数据
|
||
vdata.userInfo = bizData
|
||
//跳转首页
|
||
close()
|
||
})
|
||
})
|
||
}
|
||
const loginOut = () => {
|
||
uni.showModal({
|
||
title: '确认推出登录吗',
|
||
content: '',
|
||
showCancel: true,
|
||
success: ({ confirm, cancel }) => {
|
||
if (confirm) {
|
||
storageManage.cleanByLogout()
|
||
uni.reLaunch({
|
||
url: '/pages/login/login',
|
||
})
|
||
}
|
||
},
|
||
})
|
||
}
|
||
const toFront = () => uni.navigateTo({ url: '/pages/front/front' })
|
||
const jumpPage = (url) => uni.navigateTo({ url })
|
||
uni.addInterceptor('navigateTo', {
|
||
invoke(args) {
|
||
if (vdata.userInfo.workState != 1 && args.url == '/pages/handover/handover') {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '当前状态为，未上班状态，不能进入交班页面，点击确认按钮打卡上班。 ',
|
||
showCancel: true,
|
||
success: ({ confirm, cancel }) => {
|
||
if (confirm) {
|
||
refWorker.value.open()
|
||
}
|
||
},
|
||
})
|
||
return false
|
||
}
|
||
},
|
||
})
|
||
const toPos = () => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '是否切换为 POS模式？',
|
||
showCancel: true,
|
||
success: ({ confirm, cancel }) => {
|
||
if (confirm) {
|
||
storageManage.faceModel('pos')
|
||
uni.reLaunch({ url: '/pages/payModel/payModel' })
|
||
}
|
||
},
|
||
})
|
||
}
|
||
|
||
const more = () => {
|
||
uni.navigateTo({ url: '/pages/stat/stat' })
|
||
}
|
||
const getFrontAd = () => {
|
||
const content = { type: 'adBanner', token: storageManage.token(), env: storageManage.env() }
|
||
wxfaceapp.postMsg({
|
||
targetAppid: 'wx4710a1619fbb3714',
|
||
content: JSON.stringify(content),
|
||
success(res) {
|
||
uni.$J.showToast('通知前屏获取广告成功')
|
||
console.log('通信成功', res)
|
||
},
|
||
fail(res) {
|
||
console.log('通信失败 ', res)
|
||
},
|
||
})
|
||
}
|
||
onUnload(() => {
|
||
uni.removeInterceptor('navigateTo')
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page-wrapper {
|
||
position: relative;
|
||
min-height: 100vh;
|
||
background: url('/static/indexImg/index-bg.png') no-repeat center center;
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.user-info {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
|
||
.user-nickname {
|
||
margin-left: 20rpx;
|
||
font-weight: 700;
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
|
||
// 收益卡片
|
||
.index-card {
|
||
margin: 30rpx;
|
||
background: url('/static/indexImg/databg.png') no-repeat center center;
|
||
background-size: 100% 100%;
|
||
border-radius: 22rpx;
|
||
|
||
.index-content {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
|
||
.index-main {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin: 50rpx;
|
||
color: #fff;
|
||
|
||
.index-num {
|
||
margin-bottom: 15rpx;
|
||
font-size: 45rpx;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.index-title {
|
||
font-size: 24rpx;
|
||
color: rgba($color: #fff, $alpha: 0.6);
|
||
}
|
||
}
|
||
}
|
||
|
||
.index-card-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx;
|
||
|
||
view {
|
||
font-size: 24rpx;
|
||
color: rgba($color: #fff, $alpha: 0.6);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 发起收款
|
||
.pay-card {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 30rpx 30rpx;
|
||
margin-top: 60rpx;
|
||
height: 145rpx;
|
||
background: url('/static/indexImg/paybg.png') no-repeat center center;
|
||
background-size: 100% 100%;
|
||
color: #fff;
|
||
border-radius: 22rpx;
|
||
|
||
image {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.pay-text {
|
||
font-weight: 900;
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
|
||
// nav 导航
|
||
.index-nav {
|
||
position: absolute;
|
||
bottom: 30rpx;
|
||
left: 0;
|
||
right: 0;
|
||
// background-color: tomato;
|
||
background-color: transparent;
|
||
|
||
.nav-content {
|
||
display: flex;
|
||
padding: 0 30rpx;
|
||
justify-content: space-between;
|
||
margin-bottom: 50rpx;
|
||
|
||
.nav-main {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 25%;
|
||
height: 180rpx;
|
||
background-size: 100% 100%;
|
||
border-radius: 15rpx;
|
||
color: #fff;
|
||
|
||
&:nth-child(1) {
|
||
background: url('/static/indexImg/orderbg.png') no-repeat center center;
|
||
}
|
||
|
||
&:nth-child(2) {
|
||
background: url('/static/indexImg/handoverbg.png') no-repeat center center;
|
||
}
|
||
|
||
&:nth-child(3) {
|
||
background: url('/static/indexImg/staticsbg.png') no-repeat center center;
|
||
}
|
||
|
||
image {
|
||
width: 65rpx;
|
||
height: 65rpx;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
.nav-title {
|
||
font-weight: 600;
|
||
font-size: 22rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.worker-content {
|
||
padding: 0.1rpx;
|
||
width: 420rpx;
|
||
background-color: #fff;
|
||
border-radius: 14rpx;
|
||
|
||
.title {
|
||
margin: 20rpx 0;
|
||
text-align: center;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
.worker-time {
|
||
transform: translateY(25rpx);
|
||
margin-left: 20rpx;
|
||
font-size: 18rpx;
|
||
}
|
||
|
||
.footer-but {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 0 30rpx;
|
||
margin: 40rpx 0;
|
||
margin-top: 65rpx;
|
||
|
||
view {
|
||
flex: 0 0 35%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
letter-spacing: 2rpx;
|
||
height: 55rpx;
|
||
background-color: rgba($color: #35d757, $alpha: 0.6);
|
||
border-radius: 14rpx;
|
||
}
|
||
|
||
.confirm {
|
||
background-color: #35d757;
|
||
}
|
||
}
|
||
}
|
||
|
||
.but-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
view {
|
||
flex: 1;
|
||
}
|
||
}
|
||
|
||
.switch-model {
|
||
padding: 0.1rpx 20rpx;
|
||
padding-bottom: 30rpx;
|
||
width: 470rpx;
|
||
min-height: 300rpx;
|
||
border-radius: 14rpx;
|
||
background-color: #fff;
|
||
|
||
.title {
|
||
margin: 30rpx 0;
|
||
text-align: center;
|
||
font-weight: 600;
|
||
font-size: 18rpx;
|
||
}
|
||
|
||
.sub-title {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
|
||
.model-tag {
|
||
float: right;
|
||
background-color: #27dc70;
|
||
color: #fff;
|
||
padding: 5rpx 10rpx;
|
||
border-radius: 5rpx;
|
||
font-size: 14rpx;
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
color: #595959;
|
||
font-size: 15rpx;
|
||
margin: 20rpx 0;
|
||
line-height: 2;
|
||
}
|
||
|
||
.pay-model {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 0 auto;
|
||
height: 60rpx;
|
||
border: 1rpx solid #1ab345;
|
||
border-radius: 5rpx;
|
||
background-color: rgba(241, 255, 245, 0.3);
|
||
color: #1ab245;
|
||
font-size: 18rpx;
|
||
letter-spacing: 2rpx;
|
||
|
||
image {
|
||
margin-right: 8rpx;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
}
|
||
}
|
||
|
||
.hover-model {
|
||
background-color: #1ab345;
|
||
color: #fff;
|
||
}
|
||
}</style>
|