463 lines
12 KiB
Vue
463 lines
12 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- header -->
|
||
<view class="header-wrap" :style="headerStyle">
|
||
<view class="header-bg"></view>
|
||
<view class="header-inner">
|
||
<image class="avatar" :src="userInfo.avatar || defautAvatar" @tap="sheep.$router.go('/pages/user/info')"></image>
|
||
<view class="user-meta" v-if="userInfo.nickname">
|
||
<!-- <view class="user-name">{{ userInfo.nickname + `(${userInfo.mobile})` }}</view> -->
|
||
<view class="user-name">{{ userInfo.nickname }}</view>
|
||
<view class="user-status" @click="handleStatusToggle">
|
||
<text>
|
||
{{ userInfo.onlineStatus == 0 ? '离线' : (userInfo.onlineStatus == 1 ? '在线' : '待审核') }}
|
||
</text>
|
||
<uni-icons style="margin-left:10rpx;" type="right" size="13" color="#fff"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="user-meta" v-else>
|
||
<view class="user-name" @tap="login">请登录</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- stats card -->
|
||
<view class="stats-card">
|
||
<view class="stats-row">
|
||
<view class="stats-item">
|
||
<text class="stats-title">今日预计收入（元）</text>
|
||
<text class="stats-value"> {{ formatMoney(todayIncome) }} </text>
|
||
<view class="stats-link" @tap="sheep.$router.go('/pages/user/account/index')">
|
||
我的账户 <uni-icons type="right" size="13"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="stats-item">
|
||
<text class="stats-title">今日完成单量（单）</text>
|
||
<text class="stats-value"> {{ todayOrders }} </text>
|
||
<view class="stats-link" @tap="sheep.$router.go('/pages/user/order/orderRecord')">
|
||
订单统计 <uni-icons type="right" size="13"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- shortcuts -->
|
||
<view class="shortcuts">
|
||
<view class="shortcut" @tap="sheep.$router.go('/pages/user/attendance/index')">
|
||
<image class="shortcut-icon" src="/static/img/order1.png" mode="aspectFit" />
|
||
<text class="shortcut-text">考勤排班</text>
|
||
</view>
|
||
<view class="shortcut" @tap="sheep.$router.go('/pages/user/salary/salaryManage')">
|
||
<image class="shortcut-icon" src="/static/img/order2.png" mode="aspectFit" />
|
||
<text class="shortcut-text">薪资助手</text>
|
||
</view>
|
||
<view class="shortcut" @tap="sheep.$router.go('/pages/public/setting')">
|
||
<!-- <image class="shortcut-icon" src="/static/img/edit.png" mode="aspectFit" /> -->
|
||
<view class="shortcut-icon">
|
||
<uni-icons type="gear" size="43"></uni-icons>
|
||
</view>
|
||
<text class="shortcut-text">设置</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<s-auth-modal />
|
||
|
||
<su-popup type="center" :show="showStatusPopup" round="14" :showClose="false">
|
||
<view class="modal-box">
|
||
<view class="modal-body">
|
||
<text class="modal-title">{{ modalTitle }}</text>
|
||
<text v-if="modalMsg" class="modal-msg">{{ modalMsg }}</text>
|
||
</view>
|
||
<view class="modal-footer">
|
||
<view class="modal-btn cancel" @click="cancelConfirm">取消</view>
|
||
<view class="modal-btn confirm" @click="confirmAction">确认</view>
|
||
</view>
|
||
</view>
|
||
</su-popup>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {
|
||
computed,
|
||
ref,
|
||
watch
|
||
} from 'vue';
|
||
import {
|
||
onShow,
|
||
onPageScroll,
|
||
onPullDownRefresh
|
||
} from '@dcloudio/uni-app';
|
||
import sheep from '@/sheep';
|
||
import {
|
||
showAuthModal,
|
||
} from '@/sheep/hooks/useModal';
|
||
import DeliveryApi from '@/sheep/api/member/delivery';
|
||
|
||
// 现有 store / 模板数据
|
||
const template = computed(() => sheep.$store('app').template.user);
|
||
const isLogin = computed(() => sheep.$store('user').isLogin);
|
||
const userInfo = computed(() => sheep.$store('user').userInfo);
|
||
|
||
const showBind = ref(false);
|
||
// 动态 header 内联样式，用于兼容不同平台的状态栏高度
|
||
const headerStyle = ref({});
|
||
const defautAvatar =
|
||
'https://huichibao.oss-cn-guangzhou.aliyuncs.com/1/material/348b8223-8d03-46aa-8836-6757e8beebd2.png';
|
||
|
||
// 格式化金额显示
|
||
function formatMoney(val) {
|
||
if (val == null) return '0';
|
||
return (Number(val) || 0).toFixed(1);
|
||
}
|
||
|
||
// 微信小程序的“手机号快速验证”
|
||
const getPhoneNumber = async (e) => {
|
||
if (e.detail.errMsg !== 'getPhoneNumber:ok') {
|
||
sheep.$helper.toast('快捷登录失败');
|
||
return;
|
||
}
|
||
let result = await sheep.$platform.useProvider().mobileLogin(e.detail);
|
||
if (result) {
|
||
showBind.value = false;
|
||
}
|
||
};
|
||
|
||
// 页面显示时拉取用户信息并填充统计数据（从 store 获取或使用占位）
|
||
onShow(async () => {
|
||
const data = userInfo.value;
|
||
if (data) {
|
||
if (data?.status == 1) {
|
||
console.log("清空缓存");
|
||
uni.clearStorageSync();
|
||
}
|
||
}
|
||
// 兼容处理：读取原生状态栏高度并设置 header 的 padding-top（px）与 CSS 变量 --statusbar（rpx）
|
||
try {
|
||
const sys = uni.getSystemInfoSync();
|
||
const statusBarHeightPx = sys?.statusBarHeight || 0;
|
||
const windowWidth = sys?.windowWidth || 375;
|
||
// 将 px 转为 rpx： rpx = px / windowWidth * 750
|
||
const statusBarHeightRpx = Math.round((statusBarHeightPx / windowWidth) * 750);
|
||
headerStyle.value = {
|
||
paddingTop: statusBarHeightPx + 'px',
|
||
'--statusbar': statusBarHeightRpx + 'rpx'
|
||
};
|
||
} catch (e) {
|
||
// ignore
|
||
}
|
||
});
|
||
// 确认弹框状态（上线/下线/禁止）
|
||
const showStatusPopup = ref(false);
|
||
const confirmType = ref(''); // 'online' | 'offline' | 'forbidden'
|
||
const modalTitle = ref('');
|
||
const modalMsg = ref('');
|
||
|
||
// 判断用户是否被禁止接单（兼容多种字段）
|
||
function isUserForbidden() {
|
||
const u = userInfo.value || {};
|
||
return !!(u.forbidden || u.isForbidden || u.forbid || u.forbidReceive || u.disableReceive || u.receive === false);
|
||
}
|
||
|
||
// 点击状态：根据当前状态弹不同的确认框
|
||
function handleStatusToggle() {
|
||
const status = userInfo.value.onlineStatus;
|
||
|
||
// 在线状态(1) -> 申请离线
|
||
if (status === 1) {
|
||
confirmType.value = 'offline';
|
||
modalTitle.value = '确认申请离线?';
|
||
modalMsg.value = '离线需平台进行核准\n此时无法接单，请留意核准信息';
|
||
showStatusPopup.value = true;
|
||
return;
|
||
}
|
||
|
||
// 待审核状态(2) -> 提示等待
|
||
if (status === 2) {
|
||
confirmType.value = 'pending';
|
||
modalTitle.value = '等待平台审核';
|
||
modalMsg.value = '您的申请正在审核中\n请留意审核结果';
|
||
showStatusPopup.value = true;
|
||
return;
|
||
}
|
||
|
||
// 离线状态(0) -> 申请上线
|
||
confirmType.value = 'online';
|
||
modalTitle.value = '确认上线?';
|
||
modalMsg.value = '上线后即可开始接单';
|
||
showStatusPopup.value = true;
|
||
}
|
||
|
||
function cancelConfirm() {
|
||
showStatusPopup.value = false;
|
||
}
|
||
|
||
async function confirmAction() {
|
||
const type = confirmType.value;
|
||
showStatusPopup.value = false;
|
||
|
||
try {
|
||
if (type === 'online') {
|
||
// 调用后端接口变更上线状态
|
||
const res = await DeliveryApi.postOnline();
|
||
if (res.code === 0) {
|
||
userInfo.value.onlineStatus = 2; // 变为待审核状态
|
||
sheep.$helper.toast('已提交上线申请，请等待平台核准');
|
||
} else {
|
||
sheep.$helper.toast(res.msg || '上线申请失败');
|
||
}
|
||
} else if (type === 'offline') {
|
||
// 调用后端接口申请离线
|
||
const res = await DeliveryApi.offlineApply();
|
||
if (res.code === 0) {
|
||
userInfo.value.onlineStatus = 0; // 变为离线状态
|
||
sheep.$helper.toast('已提交离线申请，请等待平台核准');
|
||
} else {
|
||
sheep.$helper.toast(res.msg || '离线申请失败');
|
||
}
|
||
} else if (type === 'pending') {
|
||
// 待审核状态，仅提示
|
||
sheep.$helper.toast('请等待平台审核');
|
||
}
|
||
} catch (error) {
|
||
console.error('上下线操作异常:', error);
|
||
sheep.$helper.toast('操作异常，请重试');
|
||
}
|
||
}
|
||
|
||
onPullDownRefresh(() => {
|
||
sheep.$store('user').updateUserData();
|
||
setTimeout(function() {
|
||
uni.stopPullDownRefresh();
|
||
}, 800);
|
||
});
|
||
|
||
onPageScroll(() => {});
|
||
|
||
function goBack() {
|
||
uni.navigateBack();
|
||
}
|
||
|
||
function login() {
|
||
showAuthModal();
|
||
}
|
||
|
||
</script>
|
||
|
||
<style scoped>
|
||
.page {
|
||
background: #ffffff;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* header */
|
||
.header-wrap {
|
||
position: relative;
|
||
/* 适配刘海屏安全区：优先使用 constant/env，兼容小程序与 iOS/Android 安全区 */
|
||
padding-top: constant(safe-area-inset-top);
|
||
padding-top: env(safe-area-inset-top);
|
||
}
|
||
|
||
.header-bg {
|
||
/* 背景放置为绝对定位以覆盖安全区（兼容 env/constant 回退与 JS 动态 --statusbar） */
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
/* 背景高度需要包含安全区高度，优先使用 env/constant；最后一行为回退值 */
|
||
height: 250rpx;
|
||
height: calc(250rpx + constant(safe-area-inset-top));
|
||
height: calc(250rpx + env(safe-area-inset-top));
|
||
/* JS 动态变量回退（当 env/constant 不可用时，使用 --statusbar，单位 rpx） */
|
||
height: calc(250rpx + var(--statusbar, 0rpx));
|
||
background: #9ad6f0;
|
||
/* 浅蓝 */
|
||
border-bottom-left-radius: 24rpx;
|
||
border-bottom-right-radius: 24rpx;
|
||
z-index: 0;
|
||
}
|
||
|
||
.header-inner {
|
||
position: absolute;
|
||
left: 32rpx;
|
||
/* 使用 CSS 变量保证当我们通过 JS 设置 --statusbar 时，内容会相对下移（单位 rpx） */
|
||
top: calc(var(--statusbar, 0rpx) + 40rpx);
|
||
z-index: 1;
|
||
flex-direction: row;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.avatar {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 60rpx;
|
||
border: 4rpx solid rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
.user-meta {
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.user-name {
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.user-status {
|
||
margin-top: 8rpx;
|
||
font-size: 26rpx;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.back {
|
||
position: absolute;
|
||
left: 18rpx;
|
||
top: calc(var(--statusbar, 0rpx) + 12rpx);
|
||
z-index: 2;
|
||
color: #fff;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
/* stats card */
|
||
.stats-card {
|
||
padding: 0 24rpx;
|
||
margin-top: 190rpx;
|
||
position: relative;
|
||
z-index: 3;
|
||
}
|
||
|
||
.stats-row {
|
||
background: #f6c98b;
|
||
/* 浅橙色 */
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.stats-item {
|
||
width: 48%;
|
||
}
|
||
|
||
.stats-title {
|
||
font-size: 24rpx;
|
||
color: #5b4a32;
|
||
}
|
||
|
||
.stats-value {
|
||
display: block;
|
||
margin-top: 12rpx;
|
||
font-size: 42rpx;
|
||
color: #222;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.stats-link {
|
||
display: block;
|
||
margin-top: 12rpx;
|
||
font-size: 24rpx;
|
||
color: #7a5a3a;
|
||
}
|
||
|
||
/* shortcuts */
|
||
.shortcuts {
|
||
margin-top: 30rpx;
|
||
padding: 30rpx 40rpx;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
position: relative;
|
||
z-index: 3;
|
||
}
|
||
|
||
.shortcut {
|
||
flex: 1;
|
||
align-items: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.shortcut-icon {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.shortcut-text {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
}
|
||
|
||
/* popup 原有样式 */
|
||
.popup {
|
||
padding: 80rpx 0 50rpx;
|
||
}
|
||
|
||
.tip-text {
|
||
margin-bottom: 30rpx;
|
||
font-weight: 400;
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
line-height: 44rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.bind-btn {
|
||
width: 630rpx;
|
||
height: 96rpx;
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #FFFFFF;
|
||
line-height: 96rpx;
|
||
text-align: center;
|
||
font-style: normal;
|
||
background: #00B85B;
|
||
border-radius: 64rpx 64rpx 64rpx 64rpx;
|
||
}
|
||
|
||
/* 确认弹框样式（su-popup 内部内容） */
|
||
.modal-box {
|
||
width: 640rpx;
|
||
background: #fff;
|
||
border-radius: 14rpx;
|
||
overflow: hidden;
|
||
}
|
||
.modal-body {
|
||
padding: 40rpx 30rpx;
|
||
text-align: center;
|
||
}
|
||
.modal-title {
|
||
display: block;
|
||
font-size: 30rpx;
|
||
color: #333;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.modal-msg {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
line-height: 34rpx;
|
||
white-space: pre-line;
|
||
}
|
||
.modal-footer {
|
||
display: flex;
|
||
flex-direction: row;
|
||
border-top: 1rpx solid #eee;
|
||
}
|
||
.modal-btn {
|
||
flex: 1;
|
||
padding: 26rpx 0;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
}
|
||
.modal-btn.cancel {
|
||
color: #666;
|
||
border-right: 1rpx solid #eee;
|
||
}
|
||
.modal-btn.confirm {
|
||
color: #1e9fff;
|
||
}
|
||
</style> |