GuangYuYuan-shanghu/src/pages/index/index.vue

<template>
	<view class="workbench">
		<image class="page-bg" src="/static/workbench/indexBg.png" mode="" />

		<view class="page-content">
			<!-- 头部：头像、昵称、经营状态 -->
			<view class="header-section">
				<view class="header-main" @click="goProfile">
					<view class="avatar-wrap">
						<image class="avatar"
							:src="merchantInfo.cPortrait ? $globalData.publicUrl + merchantInfo.cPortrait : '/static/common/avatar.png'"
							mode="aspectFill" />
					</view>
					<view class="header-info">
						<view class="nickname">
							{{ merchantInfo.cNickName || merchantInfo.cName || '技师昵称' }}
						</view>
						<view class="status-bar">
							<view class="status-tag">
								<image class="status-tag-icon" src="/static/workbench/store.png" mode="aspectFit" />
								<text>正常经营</text>
							</view>
							<view class="status-select" @click.stop="openStatusPopup">
								<text>{{ isWorking ? '在线接单' : '休息中' }}</text>
								<image class="status-arrow" src="/static/workbench/down.png" mode="aspectFit" />
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 统计 -->
			<view class="card stats-section">
				<view class="stat-item" @click="goTodayOrders">
					<view class="stat-value">{{ todayOrderCount }}<text class="unit">笔</text></view>
					<view class="stat-label">今日订单</view>
				</view>
				<view class="stat-item" @click="goBankList">
					<view class="stat-value">{{ bankCardCount }}<text class="unit">张</text></view>
					<view class="stat-label">银行卡</view>
				</view>
				<view class="stat-item" @click="goReviewList">
					<view class="stat-value">{{ ratingScore }}</view>
					<view class="stat-label">评分</view>
				</view>
				<view class="stat-item">
					<view class="stat-value">{{ onlineHours }}<text class="unit">小时</text></view>
					<view class="stat-label">在线时长</view>
				</view>
			</view>

			<!-- 钱包 -->
			<view class="card wallet-section">
				<view class="balance-row">
					<view class="balance-main" @click="goWithdraw">
						<text class="balance-amount">{{ formatMoney(balance) }}</text>
						<text class="balance-label">余额(元)</text>
					</view>
					<view class="withdraw-btn" @click.stop="goWithdraw">提现</view>
				</view>
				<view class="wallet-grid">
					<view class="wallet-item" @click="goIncome">
						<view class="wallet-value">{{ formatMoney(myIncome.tAmount) }}</view>
						<view class="wallet-label">收入(元)</view>
					</view>
					<view class="wallet-item" @click="goIncome">
						<view class="wallet-value">{{ formatMoney(myIncome.wAmount) }}</view>
						<view class="wallet-label">待结算(元)</view>
					</view>
					<view class="wallet-item" @click="goIncome">
						<view class="wallet-value">{{ formatMoney(myIncome.yAmount) }}</view>
						<view class="wallet-label">已结算(元)</view>
					</view>
					<view class="wallet-item" @click="goWithdrawRecord">
						<view class="wallet-value">{{ formatMoney(myIncome.gAmount) }}</view>
						<view class="wallet-label">已提现(元)</view>
					</view>
				</view>
			</view>

			<!-- 新订单 -->
			<view class="order-section" v-if="pendingOrder">
				<view class="order-header">
					<view class="order-header-bg">
						<image src="/static/workbench/orderTop.png" mode="scaleToFill" />
					</view>
					<view class="order-header-content">
						<image class="order-bell" src="/static/workbench/orderTip.png" mode="aspectFit" />
						<text>有新的订单</text>
					</view>
				</view>
				<view class="order-card">
					<view class="order-title-row">
						<text class="order-title one-line-text">{{ orderTitle }}服务项目</text>
						<!-- v-if="isNewCustomer" -->
						<text class="tag-new">新客户</text>
					</view>
					<view class="order-time">
						<image class="order-icon" src="/static/workbench/orderTime.png" mode="aspectFit" />
						<text>{{ orderServiceTime }}5月12日</text>
					</view>
					<view class="order-address">
						<image class="order-icon" src="/static/workbench/orderAddress.png" mode="aspectFit" />
						<text>{{ orderAddress }}订单地址orderAddress</text>
					</view>
					<view class="order-actions">
						<view class="reject-btn" @click="onRejectOrder">拒绝</view>
						<view class="slide-wrap" id="slideWrap">
							<view class="slide-track">
								<text class="slide-hint">滑动接单</text>
								<view class="slide-thumb" :style="{ transform: `translateX(${slideX}px)` }"
									@touchstart="onSlideStart" @touchmove.stop.prevent="onSlideMove"
									@touchend="onSlideEnd">
									<image class="slide-arrow" src="/static/workbench/move.png" mode="aspectFit" />
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 我的技能 -->
			<view class="card skills-section" v-if="skillList">
				<view class="section-header">
					<view class="section-heading-wrap">
						<view class="section-heading-box">
							<view class="section-heading">我的技能({{ skillList.length }}项)</view>
						</view>
						<image class="skill-tip" src="/static/workbench/skillTip.png" mode="aspectFit" />
					</view>
					<view class="section-link" @click="goSkillManage">
						<text>管理</text>
						<image class="link-arrow" src="/static/workbench/right.png" mode="aspectFit" />
					</view>
				</view>
				<!-- 单个：全宽静态展示 -->
				<view v-if="skillList.length === 1" class="skill-single">
					<view class="skill-card skill-card--single">
						<view class="skill-img">
							<image :src="public + skillList[0].projectMasterImage" mode="aspectFill" />
						</view>
						<view class="skill-info">
							<view class="skill-name one-line-text">{{ skillList[0].projectName }}</view>
							<view class="skill-tags" v-if="skillList[0].highlight && skillList[0].highlight.length">
								<view class="skill-tag" v-for="(tag, tagIndex) in skillList[0].highlight"
									:key="tagIndex">
									{{ tag }}</view>
							</view>
							<view class="skill-price">¥{{ formatMoney(skillList[0].projectCurrentPrice) }}</view>
						</view>
					</view>
				</view>
				<!-- 多个：横向滑动 -->
				<scroll-view v-else scroll-x class="skill-scroll" :show-scrollbar="false" enable-flex>
					<view class="skill-list">
						<view class="skill-card skill-card--multi" v-for="(item, index) in skillList" :key="index">
							<view class="skill-img">
								<image :src="public + item.projectMasterImage" mode="aspectFill" />
							</view>
							<view class="skill-info">
								<view class="skill-name one-line-text">{{ item.projectName }}</view>
								<view class="skill-price">¥{{ formatMoney(item.projectCurrentPrice) }}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<!-- 我的地址 -->
			<view class="card-address address-section">
				<view class="address-heading-wrap">
					<view class="section-heading">我的地址</view>
					<image class="address-tip" src="/static/workbench/skillTip.png" mode="aspectFit" />
				</view>
				<view class="address-row">
					<image class="address-icon" src="/static/workbench/address.png" mode="aspectFit" />
					<text class="address-text">{{ currentAddress || '暂无地址' }}</text>
				</view>
				<view class="address-actions">
					<view class="addr-btn" @click="goSwitchAddress">切换地址</view>
					<view class="addr-divider" />
					<view class="addr-btn" @click="goUpdateAddress">更新地址</view>
				</view>
			</view>

			<!-- 更多功能 -->
			<view class="card more-section">
				<view class="more-heading-wrap">
					<view class="section-heading">更多功能</view>
					<image class="more-tip" src="/static/workbench/skillTip.png" mode="aspectFit" />
				</view>
				<view class="more-grid">
					<view class="more-item" v-for="(item, index) in moreFeatures" :key="index"
						@click="onMoreFeature(item)">
						<image class="more-icon" :src="item.icon" mode="aspectFit" />
						<text class="more-label">{{ item.label }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 拒绝接单弹窗 -->
		<view class="popup-mask" v-if="showRejectPopup" @click="closeRejectPopup">
			<view class="popup-box" @click.stop>
				<view class="popup-title">请输入拒绝接单原因</view>
				<input class="popup-input" v-model="rejectReason" maxlength="10" placeholder="请输入拒绝原因,最多10个字" />
				<view class="popup-btns">
					<view class="popup-btn" @click="closeRejectPopup">取消</view>
					<view class="popup-btn confirm" @click="submitReject">提交</view>
				</view>
			</view>
		</view>

		<!-- 接单状态底部弹窗 -->
		<view class="popup-mask bottom" v-if="showStatusPopup" @click="showStatusPopup = false">
			<view class="status-panel" @click.stop>
				<view class="panel-title">接单状态</view>
				<view class="status-option" :class="{ active: statusDraft === 'rest' }" @click="statusDraft = 'rest'">
					<view class="option-body">
						<text class="option-name">{{ !isWorking ? '休息中' : '下线休息' }}</text>
						<text class="option-desc">{{ getStatusDesc('rest') }}</text>
					</view>
					<view class="option-check" v-if="statusDraft === 'rest'">
						<image src="@/static/workbench/checkCircle.png" mode=""></image>
					</view>
				</view>
				<view class="status-option" :class="{ active: statusDraft === 'working' }"
					@click="statusDraft = 'working'">
					<view class="option-body">
						<text class="option-name">在线接单</text>
						<text class="option-desc">{{ getStatusDesc('working') }}</text>
					</view>
					<view class="option-check" v-if="statusDraft === 'working'">
						<image src="@/static/workbench/checkCircle.png" mode=""></image>
					</view>
				</view>
				<view class="panel-btns">
					<view class="panel-btn" @click="showStatusPopup = false">取消</view>
					<view class="panel-btn confirm" @click="confirmStatusChange">确定</view>
				</view>
			</view>
		</view>

		<!-- 未入驻提示 -->
		<u-popup :show="showModal" mode="center" :round="16" :mask-close-able="false">
			<view class="modal-wrap">
				<!-- 标题居中 -->
				<view class="title">{{ auditStatus == 0 ? '提示' : '入驻审核驳回' }}</view>
				<!-- 正文 -->
				<view class="content">
					请提交入驻资料并由后台人员审核通过后,即可开通操作权限
				</view>
				<!-- 底部双按钮（必显示） -->
				<view class="btn-box">
					<view v-if="auditStatus == 3" class="btn">修改入驻信息</view>
					<view v-if="auditStatus == 0" class="btn left" @click="cancel">我在想想</view>
					<view v-if="auditStatus == 0" class="btn right" @click="goEnter">立即入驻</view>
				</view>
			</view>
		</u-popup>
		<!-- 退出登录弹窗 -->
		<u-popup :show="showModal2" mode="center" :round="16" :mask-close-able="false">
			<view class="modal-wrap">
				<!-- 标题居中 -->
				<view class="title">提示</view>
				<!-- 正文 -->
				<view class="content">
					确定退出登录吗？
				</view>
				<!-- 底部双按钮（必显示） -->
				<view class="btn-box">
					<view class="btn left" @click="showModal2 = false">取消</view>
					<view class="btn right" @click="goLogout">确定</view>
				</view>
			</view>
		</u-popup>
		<!-- 技能完善新手引导 -->
		<view v-show="showSkillGuide" class="guide-full-mask" @click="closeSkillGuide">
			<!-- 镂空高亮区域 -->
			<view class="guide-hole" :style="holeStyle"></view>
			<!-- 提示气泡 -->
			<view class="guide-tip-pop" :style="tipPopStyle">
				<text>欢迎入驻～完善你的服务技能标签，用户能快速找到你、下单更多！</text>
				<view class="guide-hand">👆</view>
			</view>
		</view>

	</view>
</template>

<script>
import {
	getMerchantData,
	getInfo,
	myIncome,
	getStaffWorkData,
	getWaitOrder,
	myBank,
	getProjectByJsId,
	netStaffWork,
	logout,
	getJsLocation,
} from '@/api/index';
import {
	orderDeatails,
	takeOrder,
	refuseOrder
} from '@/api/order.js';

import {
	switchToOffline,
	getSkillList
} from '@/api/workbench.js';
import { normalizeStorageValue } from '@/utils/technicianProfile.js';

export default {
	data() {
		return {
			showModal2: false, // 控制退出登录弹窗显隐
			showModal: false, // 控制弹窗显隐
			merchantInfo: {},
			cJsId: '',
			isWorking: false,
			todayOrderCount: '6',
			bankCardCount: '3',
			ratingScore: '4.8',
			onlineHours: '3',
			workStartTime: null,
			restStartTime: null,
			balance: 12341.56,
			myIncome: {
				tAmount: '12341.56',
				wAmount: '12341.56',
				yAmount: '12341.56',
				gAmount: '12341.56',
				kAmount: '12341.56',
				deductAmount: '12341.56',
			},
			pendingOrder: true,
			currentAddress: '',
			showRejectPopup: false,
			rejectReason: '',
			showStatusPopup: false,
			statusDraft: 'working',
			slideX: 0,
			slideStartX: 0,
			slideMax: 0,
			isSliding: false,
			skillList: [],
			public: this.$globalData.publicUrl, //图片前缀
			serviceTag: '', //服务标签（1：按摩推拿 2：陪玩）
			moreFeatures: [
				{ label: '免车费', icon: '/static/workbench/freeCar.png', path: '/workbench/fare/index' },
				{ label: '开通新技能', icon: '/static/workbench/newSkill.png', path: '/workbench/skill/add' },
				{ label: '我的合同', icon: '/static/workbench/contract.png', path: '/workbench/contract/index' },
				{ label: '我的资料', icon: '/static/workbench/info.png', path: '/pages/join/applyJoin?title=编辑资料' },
				{ label: '城市管理', icon: '/static/workbench/city.png', path: '/workbench/city/index' },
				{ label: '退出登录', icon: '/static/workbench/logout.png', },
			],
			auditStatus: 0,
			// 原有数据不动，追加下面两行
			showSkillGuide: false,
			holeStyle: {},
			tipPopStyle: {}
		}
	},
	computed: {
		orderTitle() {
			if (!this.pendingOrder) return ''
			const goods = this.pendingOrder.cGoods || []
			return goods[0]?.cTitle || '服务项目'
		},
		orderServiceTime() {
			if (!this.pendingOrder) return ''
			return this.formatOrderTime(
				this.pendingOrder.reachTime || this.pendingOrder.dtCreateTime || ''
			)
		},
		deductionAmount() {
			return (
				this.myIncome.kAmount ??
				this.myIncome.deductAmount ??
				this.myIncome.dAmount ??
				0
			)
		},
		orderAddress() {
			if (!this.pendingOrder) return ''
			return this.pendingOrder.address || this.pendingOrder.atlasAdd || ''
		},
		isNewCustomer() {
			return this.pendingOrder?.nB2 == 1
		},
	},
	onShow() {
		setTimeout(() => {
			this.loadPageData()
			this.getSkillList();
			// 新增：判断是否需要展示技能引导
			const guideFlag = uni.getStorageSync('merchant_skill_manage_guide')
			if (!guideFlag && this.auditStatus === 2) { // 仅审核通过正式商户展示
				this.$nextTick(() => this.getManageBtnRect())
			}
		}, 300)

	},
	async onLoad() {
		this.auditStatus = await this.checkMerchantStatus()
		this.auditStatus = 0 //guo
		if (this.auditStatus == 0 || this.auditStatus == 3) {
			this.showModal = true
			return
		}
		if (this.auditStatus == 1) {
			uni.showToast({
				title: '入驻审核中，暂无操作权限',
				icon: 'none'
			})

		}
		console.log('onLoad')

	},
	methods: {
		
		//查询商户状态  auditStatus 审核状态：-1-申请入住,0-待入驻，1-待审核，2-审核通过，3-审核驳回"
		async checkMerchantStatus() {
			const openid = uni.getStorageSync('wx_copenid')
			const merchantInfo = await this.$utils.checkMerchantStatus(openid)
			if (!merchantInfo) return
			this.cJsId = merchantInfo.merchant.id; //用户id
			/**
			 * 服务标签（1：按摩推拿 2：陪玩）
			 */
			this.serviceTag = merchantInfo.merchant.serviceTag
			uni.setStorageSync('serviceTag', normalizeStorageValue(merchantInfo.merchant.serviceTag))
			uni.setStorageSync('userId', normalizeStorageValue(merchantInfo.merchant.id))
			return merchantInfo.merchant.auditStatus//用户状态

		},
		// 我在想想：关闭弹窗
		cancel() {
			this.showModal = false
		},
		// 立即入驻：跳转入驻页
		goEnter() {
			this.showModal = false
			uni.navigateTo({
				url: '/pages/join/applyJoin' // 替换你的入驻页面路径
			})
		},
		loadPageData() {
			// this.fetchMerchantInfo()
			// this.fetchWalletInfo()
			// this.fetchIncome()
			// this.fetchWorkData()
			// this.fetchBankCards()
		},

		getSkillList() {
			let params = {
				auditStatus: "1", //审核状态：0-待审核，1-审核通过，2-审核驳回
				userId: this.cJsId, //商户ID
				typeId: this.serviceTag //服务标签ID
			}
			getSkillList(params).then(res => {
				console.log('res----我的技能', res)
				if (res.data.code == 200) {
					this.skillList = res.data.result;
				}
			})
		},
		fetchMerchantInfo() {
			const params = {
				cOpenId: uni.getStorageSync('wx_copenid')
			}
			getMerchantData(params).then(res => {
				if (res.data.code != 200 || !res.data.data) return
				const data = res.data.data
				this.merchantInfo = data
				this.cJsId = data.id
				this.isWorking = data.nStatus2 == '0'
				this.ratingScore = data.nStar != null ? Number(data.nStar).toFixed(1) : '0.0'
				this.workStartTime = data.dtWorkStart || data.dtOnlineStart || null
				this.restStartTime = data.dtRestStart || data.restStartTime || null
				this.syncCurrentAddress(data)
				this.fetchTodayOrders()
				this.fetchPendingOrder()
				this.fetchSkills()
			})
		},
		fetchWalletInfo() {
			getInfo().then(res => {
				if (res.data.code == 200 && res.data.data) {
					this.cJsId = res.data.data.id;
				}
			})
		},
		fetchIncome() {
			myIncome().then(res => {
				if (res.data.code == 200 && res.data.data) {
					this.myIncome = res.data.data
				}
			})
		},
		fetchWorkData() {
			getStaffWorkData({
				openId: uni.getStorageSync('wx_copenid')
			}).then(res => {
				if (res.data.code == 200 && res.data.data) {
					const minutes = res.data.data.onLine || 0
					// this.onlineHours = (minutes / 60).toFixed(1).replace(/\.0$/, '')
				}
			})
		},
		fetchBankCards() {
			myBank().then(res => {
				if (res.data.code == 200 && Array.isArray(res.data.data)) {
					// this.bankCardCount = res.data.data.length
				}
			})
		},
		fetchTodayOrders() {
			if (!this.cJsId) return
			getWaitOrder({
				cJsId: this.cJsId
			}).then(res => {
				if (res.data.code == 200) {
					this.todayOrderCount = res.data.data || 0
				}
			})
		},
		fetchSkills() {
			// TODO: 接口联调后开启，当前使用假数据展示
			return
			const openId = uni.getStorageSync('wx_copenid')
			if (!openId) return
			getProjectByJsId({
				openId
			}).then(res => {
				if (res.data.code == 200 && Array.isArray(res.data.data)) {
					this.skillList = res.data.data
				}
			})
		},
		fetchPendingOrder() {
			if (!this.cJsId) return
			orderDeatails({
				cJsId: this.cJsId,
				nStatus: 0,
				current: 1,
				size: 1,
			}).then(res => {
				if (res.data.code == 200 && res.data.data?.records?.length) {
					this.pendingOrder = res.data.data.records[0]
					this.slideX = 0
					this.initSlideRange()
				} else {
					this.pendingOrder = null
				}
			})
		},
		formatMoney(amount) {
			const num = parseFloat(amount)
			if (isNaN(num)) return '0.00'
			return num.toFixed(2)
		},
		skillPriceUnit(item) {
			if (item.cUnit) return `/ ${ item.cUnit } `
			if (item.nMinute) return '/小时'
			return ''
		},
		formatOrderTime(timeStr) {
			if (!timeStr) return ''
			const str = String(timeStr)
			const d = new Date(str.replace(/-/g, '/'))
			if (Number.isNaN(d.getTime())) return str
			const m = d.getMonth() + 1
			const day = d.getDate()
			const hh = String(d.getHours()).padStart(2, '0')
			const mm = String(d.getMinutes()).padStart(2, '0')
			if (str.includes('-') && str.length > 16) {
				const end = str.slice(11, 16)
				if (end && end !== `${ hh }:${ mm } `) {
					return `${ m }月${ day }日 ${ hh }:${ mm }至${ end } `
				}
			}
			return `${ m }月${ day }日 ${ hh }:${ mm } `
		},
		getStatusDurationHours(type) {
			const since =
				type === 'working' ?
					this.workStartTime :
					this.restStartTime
			if (!since) return 0
			const start = new Date(String(since).replace(/-/g, '/')).getTime()
			if (Number.isNaN(start)) return 0
			return Math.max(0, Math.floor((Date.now() - start) / 3600000))
		},
		getStatusDesc(type) {
			const isCurrent =
				type === 'working' ? this.isWorking : !this.isWorking
			if (isCurrent) {
				const hours = this.getStatusDurationHours(type)
				if (type === 'working') {
					return `已连续辛勤工作${ hours } 个小时`
				}
				return `已休息${ hours } 个小时`
			}
			if (type === 'working') {
				return '早起的人已经接单，勤奋的人账户常满'
			}
			return '今日辛苦啦，早点下线休息，注意劳逸结合！'
		},
		openStatusPopup() {
			this.statusDraft = this.isWorking ? 'working' : 'rest'
			this.showStatusPopup = true
		},
		confirmStatusChange() {
			const wantWorking = this.statusDraft === 'working'
			this.showStatusPopup = false
			if (wantWorking === this.isWorking) return
			this.updateWorkStatus(wantWorking)

		},
		updateWorkStatus(working) {
			if (!this.cJsId) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				return
			}
			switchToOffline({
				userId: this.cJsId,
				forceConfirm: working,
			}).then(res => {
				if (res.data.code == 200) {
					this.isWorking = working
					const now = new Date().toISOString()
					if (working) {
						this.workStartTime = now
					} else {
						this.restStartTime = now
					}
					uni.showToast({
						title: working ? '已上线' : '已下线',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: res.data.msg || '设置失败',
						icon: 'none'
					})
				}
			})
		},
		async onRejectOrder() {
			this.auditStatus = await this.checkMerchantStatus()
			if (this.auditStatus == 0 || this.auditStatus == 3) {
				this.showModal = true
				return
			}
			if (this.auditStatus == 1) {
				uni.showToast({
					title: '入驻审核中，暂无操作权限',
					icon: 'none'
				})
				return

			}
			this.showRejectPopup = true
			this.rejectReason = ''
		},
		closeRejectPopup() {
			this.showRejectPopup = false
			this.rejectReason = ''
		},
		submitReject() {
			const reason = this.rejectReason.trim()
			if (!reason) {
				uni.showToast({
					title: '拒绝原因不能为空',
					icon: 'none'
				})
				return
			}
			refuseOrder({
				cId: this.pendingOrder.cId,
				reasonRefusal: reason,
			}).then(res => {
				if (res.data.code == 200) {
					uni.showToast({
						title: '已拒绝',
						icon: 'none'
					})
					this.closeRejectPopup()
					this.pendingOrder = null
					this.fetchTodayOrders()
				} else {
					uni.showToast({
						title: res.data.msg || '操作失败',
						icon: 'none'
					})
				}
			})
		},
		initSlideRange() {
			this.$nextTick(() => {
				const query = uni.createSelectorQuery().in(this)
				query.select('.slide-track').boundingClientRect()
				query.select('.slide-thumb').boundingClientRect()
				query.exec(res => {
					const trackRect = res[0]
					const thumbRect = res[1]
					if (trackRect && thumbRect) {
						this.slideMax = Math.max(0, trackRect.width - thumbRect.width)
					}
				})
			})
		},
		async onSlideStart(e) {
			this.auditStatus = await this.checkMerchantStatus()
			if (this.auditStatus == 0 || this.auditStatus == 3) {
				this.showModal = true
				return
			}
			if (this.auditStatus == 1) {
				uni.showToast({
					title: '入驻审核中，暂无操作权限',
					icon: 'none'
				})
				return

			}
			this.isSliding = true
			this.slideStartX = e.touches[0].clientX - this.slideX
			this.initSlideRange()
		},
		onSlideMove(e) {
			if (!this.isSliding) return
			let x = e.touches[0].clientX - this.slideStartX
			if (x < 0) x = 0
			if (x > this.slideMax) x = this.slideMax
			this.slideX = x
		},
		onSlideEnd() {
			if (!this.isSliding) return
			this.isSliding = false
			if (this.slideX >= this.slideMax * 0.85) {
				this.acceptOrder()
			}
			this.slideX = 0
		},
		acceptOrder() {
			if (!this.pendingOrder) return
			uni.showToast({
				title: '接单失败',
				icon: 'none'
			})
			return;
			takeOrder({
				cId: this.pendingOrder.cId
			}).then(res => {
				if (res.data.code == 200) {
					uni.showToast({
						title: '已接单',
						icon: 'none'
					})
					this.pendingOrder = null
					this.fetchTodayOrders()
				} else {
					uni.showToast({
						title: res.data.msg || '接单失败',
						icon: 'none'
					})
				}
			})
		},
		goProfile() {
			uni.navigateTo({
				url: '/pages/my/indent?title=编辑资料'
			})
		},
		goTodayOrders() {
			uni.navigateTo({
				url: '/pages/my/js_order'
			})
		},
		goBankList() {
			uni.navigateTo({
				url: '/workbench/bank/index'
			})
		},
		goReviewList() {
			uni.navigateTo({
				url: '/workbench/rating/index'
			})
		},
		async goWithdraw() {
			this.auditStatus = await this.checkMerchantStatus()
			if (this.auditStatus == 0 || this.auditStatus == 3) {
				this.showModal = true
				return
			}
			if (this.auditStatus == 1) {
				uni.showToast({
					title: '入驻审核中，暂无操作权限',
					icon: 'none'
				})
				return

			}
			uni.navigateTo({
				url: '/workbench/withdraw/apply'
			})
		},
		goIncome() {
			uni.navigateTo({
				url: '/workbench/income/index'
			})
		},
		goWithdrawRecord() {
			uni.navigateTo({
				url: '/workbench/withdraw/record'
			})
		},
		goSkillManage() {
			uni.navigateTo({
				url: `/ workbench / skill / index ? serviceTag = ${ this.serviceTag } `
			})
		},
		syncCurrentAddress(merchantData) {
			const sl = uni.getStorageSync('staffLocation')
			if (sl?.address || sl?.name) {
				this.currentAddress = `${ sl.address || '' }${ sl.name || '' } `
				return
			}
			const data = merchantData || this.merchantInfo
			this.currentAddress = data?.address || data?.name || ''
		},
		goSwitchAddress() {
			uni.chooseLocation({
				success: (res) => {
					console.log('切换地址', res)

				}
			});
		},
		async goUpdateAddress() {
			// if (!this.cJsId) {
			// 	uni.showToast({ title: '请先登录', icon: 'none' })
			// 	return
			// }
			try {
				const res = await this.$utils.addressService.chooseLocation()
				const params = {
					id: this.cJsId,
					cPhone: this.merchantInfo.cPhone,
					name: res.name,
					address: res.address,
					latitude: res.latitude,
					longitude: res.longitude,
					cOpenId: uni.getStorageSync('wx_copenid'),
				}
				const apiRes = await getJsLocation(params)
				if (apiRes.data.code == 200) {
					uni.setStorageSync('staffLocation', {
						name: res.name,
						address: res.address,
						latitude: res.latitude,
						longitude: res.longitude,
					})
					this.syncCurrentAddress()
					uni.showToast({
						title: '地址已更新',
						icon: 'none'
					})
				} else {
					uni.showToast({
						title: apiRes.data.msg || '更新失败',
						icon: 'none'
					})
				}
			} catch (err) {
				if (err?.cancelled) return
				uni.showToast({
					title: err?.message || '获取位置失败',
					icon: 'none'
				})
			}
		},
		onMoreFeature(item) {
			if (item.label == '退出登录') {
				this.showModal2 = true
				return
			}
			if (!item.path) {
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				})
				return
			}
			uni.navigateTo({
				url: item.path
			})
		},
		// 退出登录
		goLogout() {
			this.$router.go(0)
			logout().then(res => {
				if (res.data.code == 200) {
					this.showModal2 = false
					uni.removeStorageSync('access-token')
					this.$router.go(0)
					uni.showToast({
						title: '已退出登录',
						icon: 'none'
					})
				} else {
					this.showModal2 = false
				}
			});

		},
		// 获取管理按钮坐标，生成镂空引导
		getManageBtnRect() {
			const query = uni.createSelectorQuery().in(this)
			query.select('.section-link')
				.boundingClientRect(res => {
					if (!res) return
					const { top, left, width, height } = res
					// 镂空挖空样式，遮罩全覆盖只透出按钮
					this.holeStyle = {
						position: 'fixed',
						top: `${top}px`,
						left: `${left}px`,
						width: `${width}px`,
						height: `${height}px`,
						borderRadius: '12rpx',
						boxShadow: '0 0 0 9999px rgba(0,0,0,0.65)',
						zIndex: 99999
					}
					// 气泡定位：按钮左上方
					this.tipPopStyle = {
						position: 'fixed',
						top: `${top - 120}px`,
						left: `${left - 620}rpx
					}`,
				background: '#fff',
				padding: '24rpx',
				borderRadius: '16rpx',
				maxWidth: '580rpx',
				zIndex: 100000
			}
			this.showSkillGuide = true
			}).exec()
		},
		// 关闭引导并永久标记完成
		closeSkillGuide() {
		this.showSkillGuide = false
		uni.setStorageSync('merchant_skill_manage_guide', 'done')
		},
	},
}
</script>
<style scoped>
.uni-modal {
	background: #eb0000 !important;
	border-radius: 16rpx !important;
}
</style>

<style lang="scss" scoped>
$primary: #1ecbc3;
$primary-dark: #0fa89e;
$text-main: #333333;
$text-sub: #999999;
$page-bg: #f6f7f9;

// 新手引导全局遮罩
.guide-full-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99998;
}
.guide-tip-pop {
  font-size: 26rpx;
  color: #333;
  line-height: 1.6;
  position: relative;
}
.guide-hand {
  position: absolute;
  right: -50rpx;
  bottom: -40rpx;
  font-size: 50rpx;
  pointer-events: none;
}

.workbench {
	min-height: 100vh;
	background: $page-bg;
	position: relative;
	box-sizing: border-box;
}

.page-bg {
	position: absolute;
	top: -170rpx;
	left: 0;
	width: 100%;
	z-index: 0;
	height: 420rpx;
}

.page-content {
	position: relative;
	z-index: 1;
	padding: 20rpx 24rpx 40rpx;
	box-sizing: border-box;
}

.card {
	background: #ffffff;
	border-radius: 24rpx;
	margin-bottom: 24rpx;
	padding: 28rpx 24rpx;
	box-sizing: border-box;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.04);
}

.card-address {
	background: #ffffff;
	border-radius: 24rpx;
	margin-bottom: 24rpx;
	padding: 28rpx 24rpx 0 24rpx;
	box-sizing: border-box;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.04);
}

/* 头部 */
.header-section {
	padding: 16rpx 8rpx 32rpx;
}

.header-main {
	display: flex;
	align-items: center;
}

.avatar-wrap {
	width: 112rpx;
	height: 112rpx;
	border-radius: 50%;
	border: 4rpx solid rgba(255, 255, 255, 0.8);
	overflow: hidden;
	background: #eee;
	flex-shrink: 0;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
}

.avatar {
	width: 100%;
	height: 100%;
}

.header-info {
	margin-left: 24rpx;
	flex: 1;
	min-width: 0;
}

.nickname {
	font-size: 36rpx;
	color: $text-main;
	font-weight: 600;
	line-height: 1.4;
}

.status-bar {
	display: flex;
	align-items: center;
	gap: 16rpx;
	margin-top: 16rpx;
}

.status-tag {
	display: flex;
	align-items: center;
	padding: 6rpx 16rpx;
	font-size: 22rpx;
	border-radius: 24rpx;
	color: #1D2129;
	background: linear-gradient(263deg, #45FFD7 0%, #78FFA5 100%);
}

.status-tag-icon {
	width: 24rpx;
	height: 24rpx;
	margin-right: 6rpx;
}

.status-select {
	display: flex;
	align-items: center;
	padding: 6rpx 16rpx;
	font-size: 22rpx;
	border-radius: 24rpx;
	color: $text-main;
	background: rgba(255, 255, 255, 0.9);
}

.status-arrow {
	width: 20rpx;
	height: 20rpx;
	margin-left: 6rpx;
}

/* 统计栏 */
.stats-section {
	display: flex;
	justify-content: space-between;
	padding: 32rpx 16rpx;
}

.stat-item {
	flex: 1;
	text-align: center;
}

.stat-value {
	font-size: 36rpx;
	color: $text-main;
	font-weight: 600;
	line-height: 1.4;
}

.stat-label {
	font-size: 22rpx;
	color: $text-sub;
	margin-top: 10rpx;
}

.unit {
	font-size: 24rpx;
	font-weight: 400;
	margin-left: 2rpx;
}

/* 钱包 */
.wallet-section {
	padding: 32rpx 32rpx;
	background: radial-gradient(109.56% 48.07% at 10.06% 5%, #E7FDF9 0%, #FFFFFF 100%), #FFFFFF;
}

.balance-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 28rpx;
}

.balance-main {
	display: flex;
	flex-direction: column;
}

.balance-amount {
	font-size: 56rpx;
	font-weight: 700;
	color: $text-main;
	line-height: 1.2;
	font-family: DIN, 'Helvetica Neue', sans-serif;
}

.balance-label {
	font-size: 24rpx;
	color: $text-sub;
	margin-top: 8rpx;
}

.withdraw-btn {
	padding: 16rpx 48rpx;
	background: linear-gradient(90deg, #3dd9cf 0%, #1ecbc3 100%);
	border-radius: 40rpx;
	font-size: 28rpx;
	color: #ffffff;
	font-weight: 500;
	flex-shrink: 0;
	box-shadow: 0 8rpx 20rpx rgba(30, 203, 195, 0.35);
}

.wallet-grid {
	display: flex;
	justify-content: space-between;
}

.wallet-item {
	text-align: center;
}

.wallet-value {
	font-size: 28rpx;
	color: $text-main;
	font-weight: 600;
	line-height: 1.4;
}

.wallet-label {
	font-size: 22rpx;
	color: $text-sub;
	margin-top: 10rpx;
}

/* 新订单 */
.order-section {
	margin-bottom: 24rpx;
	border-radius: 24rpx;
	overflow: hidden;
	background: #1D2129;
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.04);
}

.order-header {
	position: relative;
	height: 88rpx;

	.order-header-bg {
		position: absolute;
		right: 0;
		bottom: -10rpx;

		image {
			width: 410rpx;
			height: 50rpx;
		}
	}
}



.order-header-content {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 28rpx;
	font-size: 28rpx;
	color: #45FFD7;
	font-weight: 500;
}

.order-bell {
	width: 36rpx;
	height: 36rpx;
	margin-right: 12rpx;
}

.order-card {
	background-color: #fff;
	margin: 4rpx;
	border-radius: 24rpx;
	padding: 28rpx 24rpx 32rpx;
}

.order-title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16rpx;
}

.order-title {
	flex: 1;
	font-size: 32rpx;
	color: #1D2129;
	font-weight: 600;
	line-height: 1.5;
}

.tag-new {
	font-size: 28rpx;
	color: #FF8D2F;
}

.order-time,
.order-address {
	display: flex;
	align-items: center;
	font-size: 28rpx;
	color: #1D2129;
	margin-top: 10rpx;
	line-height: 1.6;
}

.order-icon {
	width: 28rpx;
	height: 28rpx;
	margin-right: 12rpx;
	margin-top: 4rpx;
	flex-shrink: 0;
}

.order-actions {
	display: flex;
	align-items: center;
	gap: 20rpx;
	margin-top: 32rpx;
}

.reject-btn {
	width: 128rpx;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	color: #333333;

	background: rgba(255, 141, 47, 0.12);
	border-radius: 2000rpx 2000rpx 2000rpx 2000rpx;
	border: 1rpx solid #FF8D2F;
}

.slide-wrap {
	flex: 1;
}

.slide-track {
	position: relative;
	height: 96rpx;
	background: linear-gradient(263deg, #45FFD7 0%, #7FFFBD 100%), #1D2129;
	border-radius: 48rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 20rpx rgba(30, 203, 195, 0.3);
}

.slide-hint {
	position: absolute;
	left: 0;
	right: 80rpx;
	top: 0;
	bottom: 0;
	line-height: 96rpx;
	text-align: center;
	font-size: 28rpx;
	color: #000;
	font-weight: 500;
	pointer-events: none;
}

.slide-thumb {
	position: absolute;
	left: 0;
	top: 0;
	width: 96rpx;
	height: 96rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	// background: rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	z-index: 1;
}

.slide-thumb .slide-arrow {
	width: 40rpx;
	height: 40rpx;
}

/* 技能 */
.skills-section {
	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;
	}

	.section-heading-wrap {
		display: flex;
		align-items: flex-start;
	}

	.section-heading-box {
		position: relative;
		display: inline-flex;
		flex-direction: column;
	}

	.section-heading {
		position: relative;
		z-index: 1;
		font-size: 32rpx;
		color: #1D2129;
		font-weight: 600;
		line-height: 1.4;
		padding-bottom: 10rpx;
		background-image: url('/static/workbench/skill.png');
		background-repeat: no-repeat;
		background-size: 80%;
	}

	.skill-tip {
		width: 40rpx;
		height: 40rpx;
		margin-left: 8rpx;
		margin-top: 2rpx;
		flex-shrink: 0;
	}

	.section-link {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #86909C;
		flex-shrink: 0;
	}

	.link-arrow {
		width: 30rpx;
		height: 30rpx;
		margin-left: 4rpx;
	}
}

.skill-single {
	width: 100%;
}

.skill-scroll {
	width: 100%;
}

.skill-list {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}

.skill-card {
	display: flex;
	align-items: center;
	padding: 16rpx;
	border: 1rpx solid #eeeeee;
	border-radius: 16rpx;
	background: #ffffff;
	box-sizing: border-box;
}

.skill-card--single {
	width: 100%;

	.skill-img {
		width: 160rpx;
		height: 160rpx;
		margin-right: 20rpx;
	}
}

.skill-card--multi {
	flex-shrink: 0;
	width: 380rpx;
	margin-right: 20rpx;

	&:last-child {
		margin-right: 0;
	}
}

.skill-img {
	width: 88rpx;
	height: 88rpx;
	background: #f5f5f5;
	border-radius: 10rpx;
	overflow: hidden;
	flex-shrink: 0;
	margin-right: 14rpx;

	image {
		width: 100%;
		height: 100%;
	}
}

.skill-info {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.skill-name {
	font-size: 28rpx;
	color: $text-main;
	margin-bottom: 8rpx;
	font-weight: 500;
	line-height: 1.3;
}

.skill-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8rpx;
	margin-bottom: 10rpx;
}

.skill-tag {
	font-size: 20rpx;
	color: #c9a227;
	background: #fff8e6;
	padding: 4rpx 12rpx;
	border-radius: 6rpx;
	line-height: 1.4;
}

.skill-price {
	font-size: 30rpx;
	color: #ff5d75;
	font-weight: 600;
	line-height: 1.2;
}

.empty-tip {
	font-size: 26rpx;
	color: $text-sub;
	text-align: center;
	padding: 32rpx 0;
}

/* 地址 */
.address-section {
	.address-heading-wrap {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.section-heading {
		font-size: 32rpx;
		color: #1D2129;
		font-weight: 600;
		line-height: 1.4;
		padding-bottom: 10rpx;
		background-image: url('/static/workbench/more.png');
		background-repeat: no-repeat;
		background-size: 80%;
	}

	.address-tip {
		width: 40rpx;
		height: 40rpx;
		margin-left: 8rpx;
		margin-top: 2rpx;
		flex-shrink: 0;
	}
}

.address-row {
	display: flex;
	align-items: flex-start;
	margin-bottom: 28rpx;
}

.address-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 12rpx;
	margin-top: 4rpx;
	flex-shrink: 0;
}

.address-text {
	flex: 1;
	font-size: 26rpx;
	color: #666666;
	line-height: 1.6;
}

.address-actions {
	display: flex;
	align-items: center;
	border-top: 1rpx solid #f0f0f0;
}

.addr-btn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	font-size: 30rpx;
	color: $text-main;
}

.addr-divider {
	width: 1rpx;
	height: 120rpx;
	background: #e8e8e8;
}

/* 更多功能 */
.more-section {
	.more-heading-wrap {
		display: flex;
		align-items: flex-start;
		margin-bottom: 20rpx;
	}

	.section-heading {
		font-size: 32rpx;
		color: #1D2129;
		font-weight: 600;
		line-height: 1.4;
		padding-bottom: 10rpx;
		background-image: url('/static/workbench/more.png');
		background-repeat: no-repeat;
		background-size: 80%;
	}

	.more-tip {
		width: 40rpx;
		height: 40rpx;
		margin-left: 8rpx;
		margin-top: 2rpx;
		flex-shrink: 0;
	}
}

.more-grid {
	display: flex;
	flex-wrap: wrap;
}

.more-item {
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24rpx 0 8rpx;
}

.more-icon {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 12rpx;
}

.more-label {
	font-size: 24rpx;
	color: #666666;
	text-align: center;
	line-height: 1.4;
}

/* 弹窗 */
.popup-mask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.4);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.popup-box {
	width: 600rpx;
	background: #fff;
	border-radius: 8rpx;
	padding: 32rpx;
}

.popup-title {
	font-size: 28rpx;
	color: #333;
	text-align: center;
	margin-bottom: 24rpx;
}

.popup-input {
	width: 100%;
	height: 72rpx;
	border: 1rpx solid #ddd;
	border-radius: 6rpx;
	padding: 0 20rpx;
	font-size: 26rpx;
	box-sizing: border-box;
}

.popup-btns {
	display: flex;
	gap: 24rpx;
	margin-top: 32rpx;
}

.popup-btn {
	flex: 1;
	height: 72rpx;
	line-height: 72rpx;
	text-align: center;
	border: 1rpx solid #ccc;
	border-radius: 6rpx;
	font-size: 28rpx;
	color: #666;

	&.confirm {
		background: linear-gradient(90deg, #3dd9cf 0%, #1ecbc3 100%);
		border-color: #1ecbc3;
		color: #fff;
	}
}

.popup-mask.bottom {
	align-items: flex-end;
}

.status-panel {
	width: 100%;
	background: #fff;
	border-radius: 24rpx 24rpx 0 0;
	padding: 32rpx;
	padding-bottom: calc(env(safe-area-inset-bottom) + 32rpx);
	box-sizing: border-box;
}

.panel-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	text-align: center;
	margin-bottom: 32rpx;
}

.status-option {
	display: flex;
	align-items: center;
	padding: 28rpx 0;
	border-bottom: 1rpx solid #f5f5f5;

	// &.active .option-name {
	// 	color: #1ecbc3;
	// }
}

.option-body {
	flex: 1;
	min-width: 0;
}

.option-check {
	font-size: 36rpx;
	color: #1ecbc3;
	font-weight: 600;
	flex-shrink: 0;
	margin-left: 16rpx;

	image {
		width: 50rpx;
		height: 50rpx;
	}
}

.option-name {
	display: block;
	font-size: 30rpx;
	color: #333;
	font-weight: 500;
}

.option-desc {
	display: block;
	font-size: 24rpx;
	color: #999;
	margin-top: 8rpx;
	line-height: 1.5;
}

.panel-btns {
	display: flex;
	gap: 24rpx;
	margin-top: 32rpx;
}

.panel-btn {
	flex: 1;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background: rgba(51, 51, 53, 0.05);
	border-radius: 60rpx 60rpx 60rpx 60rpx;
	font-size: 32rpx;
	color: #1D2129;

	&.confirm {
		background: #333335;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		color: #fff;
	}
}

.one-line-text {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>