pet-system-merchant-app/pages/my/index.vue

<template>
	<view class="my-page">
		<!-- 顶部背景墙 -->
		<view class="header-bg">
			<image src="/static/images/my-header.png" class="header-img" mode="widthFix"></image>
			<view class="user-block" @click="goToLogin" @longpress="onDebugTap">
				<image class="user-avatar" :src="userInfo?.avatarUrl || '/static/images/default-avatar.png'"
					mode="aspectFill"></image>
				<view class="user-info">
					<text class="user-name">{{ userInfo ? userInfo.nickName : '点击登录' }}</text>
					<text class="user-desc-text">{{ userInfo ? (userInfo.remark || '这位用户很懒,什么都没写 🐾') : '登录后享受更多权益 🐾'
					}}</text>
				</view>
				<view v-if="!userInfo" class="css-right-arrow-gold"></view>
			</view>
		</view>

		<!-- 我的服务订单区 -->
		<view class="cute-card order-wrap">
			<view class="card-head">
				<text class="card-title">我的服务订单</text>
				<view class="card-more" @click="goToOrder('all')">
					<text>查看全部</text>
					<view class="css-right-arrow-small"></view>
				</view>
			</view>
			<view class="order-nav">
				<view class="nav-item" v-for="item in orderItems" :key="item.key" @click="goToOrder(item.key)">
					<view class="icon-bulb">
						<image class="custom-icon" :src="item.icon" mode="aspectFit"></image>
					</view>
					<text class="nav-label">{{ item.label }}</text>
				</view>
			</view>
		</view>

		<!-- 服务与工具 -->
		<view class="cute-card tool-wrap">
			<view class="card-head">
				<text class="card-title">服务与工具</text>
			</view>
			<view class="tool-grid">
				<view class="tool-item" v-for="item in menuItems" :key="item.path || item.title" @click="goToMenu(item)">
					<image class="custom-icon tool-icon" :src="item.icon" mode="aspectFit"></image>
					<text class="tool-text">{{ item.title }}</text>
				</view>
			</view>
		</view>

		<view class="footer-msg">
			<text>~ 感谢您的陪伴 ~</text>
		</view>

		<!-- 客服中心弹窗 @Author: Antigravity -->
		<view class="service-popup-mask" v-if="showServicePopup" @click="closeServicePopup">
			<view class="service-popup" @click.stop>
				<view class="service-header">
					<text class="service-title">联系客服</text>
					<view class="css-close-btn" @click="closeServicePopup"></view>
				</view>

				<view class="qr-section">
					<text class="qr-title">客服二维码</text>
					<image class="qr-img" :src="customerSetting.qrCodeUrl || '/static/images/logo.png'" mode="aspectFit" @click="previewQRCode">
					</image>
					<text class="qr-desc">点击查看大图</text>
				</view>

				<view class="service-list">
					<view class="service-row">
						<view class="service-icon-box online-bg">
							<image class="service-icon-img" src="/static/icon/my/customerservice/online.png" mode="aspectFit"></image>
						</view>
						<view class="service-info">
							<text class="service-name">在线客服</text>
							<text class="service-desc">{{ customerSetting.wechatAccount || '企业微信专属客服在线解答' }}</text>
						</view>
						<view class="call-btn-mini green-btn" @click="openOnlineService">
							<text>去咨询</text>
						</view>
					</view>

					<view class="service-row">
						<view class="service-icon-box phone-bg">
							<image class="service-icon-img" src="/static/icon/my/customerservice/phone.png" mode="aspectFit"></image>
						</view>
						<view class="service-info">
							<text class="service-name">客服电话</text>
							<text class="service-desc">{{ customerSetting.phoneNumber || '暂无电话' }}</text>
						</view>
						<view class="call-btn-mini orange-btn" @click="callServicePhone">
							<text>拨打</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<custom-tabbar></custom-tabbar>
	</view>
</template>

<script>
// @Author: Antigravity
import { getInfo } from '@/api/system/user'
import { getCustomerServiceSetting } from '@/api/system/customerServiceSetting'
import customTabbar from '@/components/custom-tabbar/index.vue'
import orderStatusData from '@/json/orderStatus.json'

// 订单状态图标映射
const iconMap = {
	0: '/static/images/my-pendingdispatch.png',
	1: '/static/images/my-pendingaccept.png',
	2: '/static/images/my-inservice.png',
	3: '/static/images/my-pendingservice.png',
	4: '/static/images/my-finished.png',
	5: '/static/images/my-cancel.png'
}

export default {
	components: { customTabbar },
	data() {
		return {
			userInfo: null,
			showServicePopup: false,
			debugTapCount: 0,  // 调试触发计数器
			customerSetting: {
				wechatAccount: '',
				phoneNumber: '',
				qrCode: '',
				qrCodeUrl: '',
				enterpriseWechatLink: ''
			},
			// 订单状态导航
			orderItems: orderStatusData.map(item => ({
				key: item.value,
				label: item.label,
				icon: iconMap[item.value] || '/static/images/my-pendingdispatch.png'
			})),
			// 功能菜单
			menuItems: [
				{ title: '宠物档案', icon: '/static/images/my-pet.png', path: '/pages/my/pet/list/index' },
				{ title: '用户管理', icon: '/static/images/my-customer.png', path: '/pages/my/user/list/index' },
				{ title: '投诉管理', icon: '/static/images/my-complaint.png', path: '/pages/my/complaint/list/index' },
				{ title: '服务费统计', icon: '/static/images/my-fee.png', path: '/pages/my/fee/statistics/index' },
				{ title: '客服中心', icon: '/static/images/my-customerservice.png', path: '' },
				{ title: '协议中心', icon: '/static/images/my-agreement.png', path: '/pages/my/agreement/list/index' },
				{ title: '系统设置', icon: '/static/images/my-systemsetting.png', path: '/pages/my/settings/index' }
			]
		}
	},
	onShow() {
		this.fetchUserInfo()
		this.fetchCustomerSetting()
	},
	methods: {
		// 获取当前登录用户信息
		async fetchUserInfo() {
			const token = uni.getStorageSync('token')
			if (token) {
				try {
					const res = await getInfo()
					if (res && res.user) {
						this.userInfo = res.user
					}
				} catch (error) {
					console.error('获取用户信息失败', error)
				}
			} else {
				this.userInfo = null
			}
		},
		// 获取客服配置 (ID=2)
		async fetchCustomerSetting() {
			try {
				const res = await getCustomerServiceSetting(2)
				if (res) {
					// 商户端 request 拦截器已处理 res.data，此处 res 即为配置对象
					Object.assign(this.customerSetting, res)
				}
			} catch (error) {
				console.error('获取客服配置失败', error)
			}
		},
		// 跳转到登录页（未登录时）
		goToLogin() {
			if (!this.userInfo) {
				uni.navigateTo({ url: '/pages/login/index' })
			}
		},
		// 跳转到订单列表
		goToOrder(statusValue) {
			if (statusValue === 'all') {
				uni.reLaunch({ url: '/pages/order/list/index' })
			} else {
				uni.reLaunch({ url: `/pages/order/list/index?status=${statusValue}` })
			}
		},
		// 菜单项点击处理
		goToMenu(item) {
			if (item.title === '客服中心') {
				this.showServicePopup = true
				return
			}
			if (item.path) {
				uni.navigateTo({ url: item.path })
			}
		},
		// 关闭客服弹窗
		closeServicePopup() {
			this.showServicePopup = false
		},
		// 预览客服二维码
		previewQRCode() {
			if (!this.customerSetting.qrCodeUrl) return
			uni.previewImage({
				urls: [this.customerSetting.qrCodeUrl]
			})
		},
		// 打开在线客服
		openOnlineService() {
			if (this.customerSetting.enterpriseWechatLink) {
				// #ifdef H5
				window.location.href = this.customerSetting.enterpriseWechatLink
				// #endif
				// #ifndef H5
				uni.setClipboardData({
					data: this.customerSetting.wechatAccount || this.customerSetting.enterpriseWechatLink,
					success: () => {
						uni.showToast({ title: '客服账号已复制，请在微信中添加', icon: 'none' })
					}
				})
				// #endif
			} else {
				uni.showToast({ title: '在线客服暂未配置', icon: 'none' })
			}
		},
		// 拨打客服电话（多级降级策略，兼容 Vite CLI 和 HBuilderX 原生两种打包方式）
		callServicePhone() {
			const phoneNumber = String(this.customerSetting.phoneNumber || '').trim()
			if (!phoneNumber) {
				uni.showToast({ title: '暂无客服电话', icon: 'none' })
				return
			}
			try {
				// 策略1：App Plus 原生 plus.device.dial（HBuilderX 原生项目可用）
				// eslint-disable-next-line no-undef
				if (typeof plus !== 'undefined' && plus.device && plus.device.dial) {
					// eslint-disable-next-line no-undef
					plus.device.dial(phoneNumber, false)
					return
				}
				// 策略2：tel: URI Scheme（适用于 Vite CLI 打包的 WebView App，Android/iOS 均会拦截并跳转拨号盘）
				if (typeof window !== 'undefined') {
					window.location.href = 'tel:' + phoneNumber
					return
				}
				// 策略3：最终兜底 uni.makePhoneCall
				uni.makePhoneCall({
					phoneNumber,
					fail: (err) => {
						uni.showModal({
							title: '拨号失败',
							content: JSON.stringify(err),
							showCancel: false
						})
					}
				})
			} catch (e) {
				uni.showModal({
					title: '拨号异常',
					content: e.message || String(e),
					showCancel: false
				})
			}
		},
		// 长按头像区备触发调试日志查看
		onDebugTap() {
			this.debugTapCount++
			if (this.debugTapCount >= 3) {
				this.debugTapCount = 0
				this.showDebugLog()
			}
		},
		// 读取并展示全局错误日志
		showDebugLog() {
			try {
				const logs = JSON.parse(uni.getStorageSync('__debug_logs') || '[]')
				// eslint-disable-next-line no-undef
				const plusAvail = typeof plus !== 'undefined' ? 'yes' : 'no'
				// eslint-disable-next-line no-undef
				const plusDial = (typeof plus !== 'undefined' && plus.device && plus.device.dial) ? 'yes' : 'no'
				const winAvail = typeof window !== 'undefined' ? 'yes' : 'no'
				const makePhoneType = typeof uni.makePhoneCall
				const baseInfo = `plus:${plusAvail} | plus.device.dial:${plusDial} | window:${winAvail} | makePhoneCall:${makePhoneType} | 日志:${logs.length}条`
				const logText = logs.length > 0
					? logs.slice(0, 5).map(l => `${l.t}\n${l.msg}`).join('\n---\n')
					: '暂无错误日志'
				uni.showModal({
					title: '调试信息',
					content: `${baseInfo}\n\n${logText}`,
					showCancel: true,
					cancelText: '清队日志',
					confirmText: '关闭',
					success: (res) => {
						if (res.cancel) {
							uni.removeStorageSync('__debug_logs')
							uni.showToast({ title: '日志已清队', icon: 'none' })
						}
					}
				})
			} catch(e) {
				uni.showModal({ title: '读取日志失败', content: e.message || String(e), showCancel: false })
			}
		}
	}
}
</script>

<style lang="scss" scoped>
/* 保持原有样式并添加弹窗样式 @Author: Antigravity */
.my-page {
	min-height: 100vh;
	background-color: #fcfaf5;
	padding-bottom: 140rpx;
}

/* ... 之前的样式保留，下文补充新样式 ... */

.service-popup-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
	backdrop-filter: blur(4px);
}

.service-popup {
	width: 620rpx;
	background-color: #fff;
	border-radius: 48rpx;
	padding: 0;
	overflow: hidden;
	box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
	animation: slide-in 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes slide-in {
	from { transform: scale(0.85); opacity: 0; }
	to { transform: scale(1); opacity: 1; }
}

.service-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40rpx;
	border-bottom: 2rpx solid #EEEEEE;
	position: relative;
}

.service-title {
	font-size: 32rpx;
	font-weight: 800;
	color: #4a3e2e;
}

/* CSS 关闭叉号 @Author: Antigravity */
.css-close-btn {
	width: 44rpx;
	height: 44rpx;
	position: relative;
	&::before, &::after {
		content: '';
		position: absolute;
		top: 20rpx;
		left: 8rpx;
		width: 28rpx;
		height: 4rpx;
		background-color: #ccc;
		transform: rotate(45deg);
		border-radius: 4rpx;
	}
	&::after { transform: rotate(-45deg); }
	&:active { opacity: 0.6; }
}

.qr-section {
	padding: 48rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: linear-gradient(180deg, #fff 0%, #fffbf2 100%);
}

.qr-title {
	font-size: 28rpx;
	font-weight: 700;
	color: #6d5b45;
	margin-bottom: 30rpx;
}

.qr-img {
	width: 320rpx;
	height: 320rpx;
	border-radius: 32rpx;
	padding: 16rpx;
	background: #fff;
	box-shadow: 0 8rpx 32rpx rgba(247, 202, 62, 0.15);
	margin-bottom: 20rpx;
}

.qr-desc {
	font-size: 24rpx;
	color: #a39686;
	font-weight: 600;
}

.service-list {
	padding: 20rpx 40rpx 40rpx;
}

.service-row {
	display: flex;
	align-items: center;
	padding: 32rpx 0;
	border-bottom: 2rpx solid #EEEEEE;
	&:last-child { border-bottom: none; }
}

.service-icon-box {
	width: 88rpx;
	height: 88rpx;
	border-radius: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 24rpx;
	&.online-bg {
		background: linear-gradient(135deg, #71d192 0%, #4caf50 100%);
		box-shadow: 0 8rpx 16rpx rgba(76, 175, 80, 0.25);
	}
	&.phone-bg {
		background: linear-gradient(135deg, #ffcc33 0%, #f7ca3e 100%);
		box-shadow: 0 8rpx 16rpx rgba(247, 202, 62, 0.25);
	}
}

.service-icon-img {
	width: 56rpx;
	height: 56rpx;
}

.service-info {
	flex: 1;
}

.service-name {
	display: block;
	font-size: 28rpx;
	font-weight: 800;
	color: #4a3e2e;
	margin-bottom: 4rpx;
}

.service-desc {
	display: block;
	font-size: 22rpx;
	color: #a39686;
	font-weight: 600;
}

.call-btn-mini {
	padding: 10rpx 26rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	font-weight: 700;
	transition: transform 0.2s;
	background: transparent;
	border: 2rpx solid transparent;
	&:active { transform: scale(0.95); }
	&.green-btn { border-color: #5ec686; color: #5ec686; }
	&.orange-btn { border-color: #f7ca3e; color: #f7ca3e; }
}


/* ====== 顶部背景图区域（替换原纯色背景） ====== */
.header-bg {
	position: relative;
	padding-top: calc(var(--status-bar-height, 44px) + 20rpx);
	height: 440rpx;
	overflow: hidden;
}

.header-img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

.user-block {
	display: flex;
	align-items: center;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 40rpx;
	right: 40rpx;
	z-index: 2;
}

/* CSS 右箭头 (金色) @Author: Antigravity */
.css-right-arrow-gold {
	width: 16rpx;
	height: 16rpx;
	border-right: 4rpx solid rgba(100, 70, 20, 0.4);
	border-top: 4rpx solid rgba(100, 70, 20, 0.4);
	transform: rotate(45deg);
	margin-left: auto;
}

/* CSS 右箭头 (小号) @Author: Antigravity */
.css-right-arrow-small {
	width: 12rpx;
	height: 12rpx;
	border-right: 3rpx solid #a39686;
	border-top: 3rpx solid #a39686;
	transform: rotate(45deg);
}

.user-avatar {
	width: 140rpx;
	height: 140rpx;
	border: 8rpx solid #fff;
	border-radius: 50%;
	background-color: #fff;
}

.user-info {
	flex: 1;
	margin-left: 32rpx;
}

.user-name {
	display: block;
	font-size: 40rpx;
	font-weight: 800;
	color: #5c4314;
	margin-bottom: 12rpx;
	letter-spacing: 2rpx;
}

.user-desc-text {
	display: block;
	font-size: 24rpx;
	color: #5c4314;
	opacity: 0.85;
	font-weight: 600;
}


.cute-card {
	background: #fff;
	border-radius: 40rpx;
	padding: 40rpx;
	margin: 0 32rpx;
	box-shadow: 0 12rpx 40rpx rgba(220, 212, 196, 0.4);
	position: relative;
	z-index: 3;
}

.order-wrap {
	margin-top: -60rpx;
	border: 4rpx solid #fffdfa;
}

.card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 32rpx;
}

.card-title {
	font-size: 30rpx;
	font-weight: 800;
	color: #4a3e2e;
}

.card-more {
	display: flex;
	align-items: center;
	gap: 10rpx;
	font-size: 24rpx;
	color: #a39686;
	font-weight: 600;
}

.order-nav {
	display: flex;
	justify-content: space-between;
}

.nav-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12rpx;
}

.icon-bulb {
	width: 84rpx;
	height: 84rpx;
	background: transparent;
	border-radius: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ====== 服务与工具网格卡片 ====== */
.tool-wrap {
	margin-top: 40rpx;
}

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

.tool-item {
	width: 25%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24rpx 0;
	gap: 10rpx;

	&:active {
		opacity: 0.7;
	}
}

.tool-icon {
	width: 52rpx;
	height: 52rpx;
}

.custom-icon {
	width: 48rpx;
	height: 48rpx;
}

.tool-text {
	font-size: 22rpx;
	color: #4a3e2e;
	font-weight: 600;
}

.nav-label {
	font-size: 22rpx;
	font-weight: 600;
}

.footer-msg {
	text-align: center;
	margin-top: 60rpx;
	margin-bottom: 40rpx;
	font-size: 24rpx;
	font-weight: 600;
	color: #d1c5b4;
	letter-spacing: 4rpx;
}
</style>