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

492
jeepay-ui-uapp-face/pages/index/index.vue Normal file
View File

@@ -0,0 +1,492 @@
<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>