文件
yjyf/pages/master/workbench.vue
linda 1d92202b1a feat: 微信授权登录 + 我的中心角色切换 + 师傅工作台全模块 + 图标美化
登录与角色:
- Auth::wxlogin 微信 code → jscode2session → 落库发 token(appid/secret 走 .env)
- 新增 fa_user_wechat 表,openid 幂等建号(CLI 已验证 is_new 1→0 不重复建号)
- Auth::switchRole 角色切换(未入驻 2001 / 审核中 2002 / 未通过 2003)
- pages/login 改为微信一键授权;pages/mine 我的中心(师傅入口 + 切换师傅端)

师傅工作台(对齐需求文档):
- pages/master/workbench 工作台:接单开关 / 待处理待验收 / 可提现 / 六宫格入口 / 信用四指标 / 技能标签
- pages/master/hall 订单大厅:类型筛选(一口价/报价) + 4 种排序 + 抢单倒计时 + 报价入口
- pages/master/quote 报价竞标:金额/说明/有效期 + 报价记录
- pages/master/wallet 钱包:可提现/今日/累计 + 账单明细 + 提现校验
- pages/master/credit 信用与申诉:五项指标 + 规则 + 申诉提交/记录
- 新增 fa_appeal 表

视觉:
- 15 个类目图标重画为双色扁平 SVG,用无头 Chrome 渲染为 192px 透明 PNG
- 首页改用 <image src=static/icons/*.png>,移除 200 行 CSS 图标数据

验证:page_flow 47 + e2e_flow 65 + phase2_verify 27 = 139 项断言全通过
2026-10-28 16:10:34 +08:00

162 行
7.9 KiB
Vue

此文件含有模棱两可的 Unicode 字符

此文件含有可能会与其他字符混淆的 Unicode 字符。 如果您是想特意这样的,可以安全地忽略该警告。 使用 Escape 按钮显示他们。

<template>
<view class="page">
<view class="header">
<view class="deco d1"></view>
<view class="deco d2"></view>
<view class="h-top">
<view class="m-info">
<text class="m-name">{{ info ? info.realname : '师傅' }}</text>
<text class="m-meta">{{ info ? ('Lv' + info.level + ' · 评分 ' + info.score + ' · 完成 ' + info.order_count + ' 单') : '加载中...' }}</text>
</view>
<view class="switch" :class="{ off: info && info.work_status === 'off' }" @tap="toggleWork">
<text class="switch-t">{{ info && info.work_status === 'off' ? '已暂停' : '接单中' }}</text>
</view>
</view>
<view class="todo">
<view class="todo-item" @tap="go('/pages/master/orders')">
<text class="todo-num">{{ info ? info.todo_count : 0 }}</text>
<text class="todo-lab">待处理</text>
</view>
<view class="todo-item" @tap="go('/pages/master/orders')">
<text class="todo-num">{{ info ? info.verify_count : 0 }}</text>
<text class="todo-lab">待验收</text>
</view>
<view class="todo-item" @tap="go('/pages/master/wallet')">
<text class="todo-num">{{ info ? info.money : 0 }}</text>
<text class="todo-lab">可提现</text>
</view>
</view>
</view>
<view class="grid">
<view class="grid-item" v-for="g in entries" :key="g.key" @tap="g.action">
<view class="g-icon" :style="{ background: g.bg }"><text class="g-icon-t" :style="{ color: g.color }">{{ g.icon }}</text></view>
<text class="g-txt">{{ g.name }}</text>
</view>
</view>
<view class="card" v-if="credit">
<view class="card-head">
<text class="card-title">信用体系</text>
<text class="card-more" @tap="go('/pages/master/credit')">明细 ›</text>
</view>
<view class="credit-row">
<view class="c-item"><text class="c-num">{{ credit.score }}</text><text class="c-lab">综合评分</text></view>
<view class="c-item"><text class="c-num">{{ credit.accept_rate }}%</text><text class="c-lab">接单率</text></view>
<view class="c-item"><text class="c-num">{{ credit.ontime_rate }}%</text><text class="c-lab">准时率</text></view>
<view class="c-item"><text class="c-num">{{ credit.good_rate }}%</text><text class="c-lab">好评率</text></view>
</view>
</view>
<view class="card">
<view class="card-head"><text class="card-title">我的服务类目</text></view>
<view class="skills">
<text class="skill" v-for="s in skills" :key="s.cat_id">{{ s.name }}</text>
<text class="skill empty" v-if="!skills.length">暂无技能标签</text>
</view>
</view>
<view class="tips">接单后请在 2 小时内联系客户,超时订单将自动回流大厅</view>
<view class="back" @tap="backToUser">切换到业主身份</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import api from '@/utils/api.js';
import { isLogin, toLogin } from '@/utils/request.js';
import { setRole } from '@/utils/role.js';
const info = ref(null);
const credit = ref(null);
const skills = ref([]);
const entries = [
{ key: 'hall', name: '订单大厅', icon: '厅', bg: '#FFF1E0', color: '#E07A2E', action: () => go('/pages/master/hall') },
{ key: 'orders', name: '我的接单', icon: '单', bg: '#EAF2FF', color: '#4A7CFF', action: () => go('/pages/master/orders') },
{ key: 'quotes', name: '我的报价', icon: '价', bg: '#F0EBFF', color: '#7A5AF8', action: () => go('/pages/master/quote') },
{ key: 'wallet', name: '钱包提现', icon: '钱', bg: '#E8F7EE', color: '#2FA84F', action: () => go('/pages/master/wallet') },
{ key: 'credit', name: '信用中心', icon: '信', bg: '#FFF0F0', color: '#E8331B', action: () => go('/pages/master/credit') },
{ key: 'service', name: '联系客服', icon: '服', bg: '#EAF6FF', color: '#2A8FD8', action: callService }
];
function go(url) { uni.navigateTo({ url: url }); }
function callService() { uni.makePhoneCall({ phoneNumber: '4000000000' }); }
async function load() {
if (!isLogin()) { toLogin(); return; }
try {
const res = await api.masterInfo();
if (!res.applied || res.master.verify_status !== 'pass') {
uni.redirectTo({ url: '/pages/master/apply' });
return;
}
info.value = res.master;
skills.value = res.skills || [];
} catch (e) {}
try {
credit.value = await api.masterCredit();
} catch (e) {}
}
async function toggleWork() {
if (!info.value) return;
const next = info.value.work_status === 'off' ? 'on' : 'off';
try {
await api.masterToggle({ work_status: next });
info.value.work_status = next;
uni.showToast({ title: next === 'on' ? '已开启接单' : '已暂停接单', icon: 'none' });
} catch (e) {}
}
function backToUser() {
api.switchRole({ role: 'user' }).then((res) => {
setRole('user');
uni.reLaunch({ url: res.redirect || '/YJYF/YJYF' });
}).catch(() => {});
}
onShow(() => load());
</script>
<style scoped>
.page { min-height: 100vh; background: #F5F6F8; padding-bottom: 60rpx; }
.header { position: relative; padding: 34rpx 30rpx 26rpx; overflow: hidden; background: linear-gradient(160deg, #FFB85C 0%, #F98D25 55%, #ED6F0E 100%); }
.deco { position: absolute; border-radius: 50%; background: rgba(255,255,255,.13); }
.d1 { width: 320rpx; height: 320rpx; right: -120rpx; top: -130rpx; }
.d2 { width: 180rpx; height: 180rpx; left: -80rpx; bottom: -60rpx; }
.h-top { position: relative; display: flex; align-items: center; justify-content: space-between; }
.m-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-name { font-size: 36rpx; font-weight: 700; color: #fff; }
.m-meta { margin-top: 8rpx; font-size: 22rpx; color: rgba(255,255,255,.9); }
.switch { flex-shrink: 0; padding: 0 24rpx; line-height: 58rpx; border-radius: 29rpx; background: #fff; }
.switch.off { background: rgba(255,255,255,.35); }
.switch-t { font-size: 22rpx; font-weight: 600; color: #E36B0C; }
.switch.off .switch-t { color: #fff; }
.todo { position: relative; display: flex; margin-top: 28rpx; padding-top: 22rpx; border-top: 1rpx solid rgba(255,255,255,.25); }
.todo-item { flex: 1; display: flex; flex-direction: column; align-items: center; }
.todo-num { font-size: 36rpx; font-weight: 700; color: #fff; }
.todo-lab { margin-top: 4rpx; font-size: 20rpx; color: rgba(255,255,255,.88); }
.grid { display: flex; flex-wrap: wrap; margin: 22rpx 28rpx 0; padding: 16rpx 0; background: #fff; border-radius: 22rpx; box-shadow: 0 6rpx 20rpx rgba(240,129,31,.06); }
.grid-item { width: 33.33%; display: flex; flex-direction: column; align-items: center; padding: 18rpx 0; }
.g-icon { width: 84rpx; height: 84rpx; border-radius: 24rpx; display: flex; align-items: center; justify-content: center; }
.g-icon-t { font-size: 30rpx; font-weight: 700; }
.g-txt { margin-top: 12rpx; font-size: 22rpx; color: #333; }
.card { margin: 22rpx 28rpx 0; padding: 24rpx; background: #fff; border-radius: 22rpx; box-shadow: 0 6rpx 20rpx rgba(240,129,31,.06); }
.card-head { display: flex; align-items: center; justify-content: space-between; }
.card-title { font-size: 28rpx; font-weight: 700; color: #1F1F1F; }
.card-more { font-size: 22rpx; color: #9A9A9A; }
.credit-row { display: flex; margin-top: 20rpx; }
.c-item { flex: 1; display: flex; flex-direction: column; align-items: center; }
.c-num { font-size: 32rpx; font-weight: 700; color: #F0710D; }
.c-lab { margin-top: 6rpx; font-size: 20rpx; color: #9A9A9A; }
.skills { display: flex; flex-wrap: wrap; padding-top: 14rpx; }
.skill { padding: 0 20rpx; line-height: 54rpx; margin: 0 12rpx 12rpx 0; border-radius: 27rpx; background: #FFF3E6; color: #C4580A; font-size: 22rpx; }
.skill.empty { background: #F5F5F5; color: #9A9A9A; }
.tips { margin: 22rpx 28rpx 0; padding: 18rpx 22rpx; background: #FFF7F0; border-radius: 16rpx; font-size: 22rpx; color: #C4580A; line-height: 32rpx; }
.back { margin: 26rpx 28rpx 0; height: 92rpx; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 46rpx; font-size: 28rpx; color: #F0710D; font-weight: 600; }
</style>