| 1 |
- {"version":3,"sources":["pages/index/order.uvue","pages/index/my.uvue","App.uvue"],"sourcesContent":["<template>\r\n <view class=\"page-container\">\r\n\r\n <!-- 1. 顶部标签栏 (Scroll View) -->\r\n <scroll-view scroll-x class=\"tab-scroll\" show-scrollbar=\"false\" :enable-flex=\"true\">\r\n <view class=\"tab-wrapper\">\r\n <view v-for=\"(tab, index) in tabs\" :key=\"index\"\r\n :class=\"['tab-item', currentTab === index ? 'active' : '']\" @click=\"currentTab = index\">\r\n <text>\r\n {{ tab }}\r\n </text>\r\n <!-- 激活下的黄色短线 -->\r\n <view v-if=\"currentTab === index\" class=\"tab-indicator\">\r\n </view>\r\n </view>\r\n </view>\r\n </scroll-view>\r\n\r\n <!-- 2. 订单列表 -->\r\n <view class=\"order-list\">\r\n <view v-for=\"(order, idx) in orders\" :key=\"order['id']\" class=\"order-card\">\r\n\r\n <!-- Card Header: 时间 & 状态 -->\r\n <view class=\"card-header\">\r\n <text class=\"time-text\">\r\n 预约时间：{{ order['time'] }}\r\n </text>\r\n <text class=\"status-badge paid\">\r\n 已支付\r\n </text>\r\n </view>\r\n\r\n <!-- Card Body: 服务信息 (左图右文) -->\r\n <view class=\"service-section\">\r\n <image :src=\"order['image']\" class=\"service-image\" mode=\"aspectFill\" />\r\n <view class=\"service-details\">\r\n <view class=\"service-title-row\">\r\n <text class=\"service-name\">\r\n {{ order['serviceName'] }}\r\n </text>\r\n <text v-for=\"(tag, tIdx) in tagList(order)\" :key=\"tIdx\" :class=\"['tag-pill', tag.type]\">\r\n {{ tag.text }}\r\n </text>\r\n\r\n </view>\r\n <view class=\"contact-info-row\">\r\n <text class=\"contact-info\">\r\n 联系人：{{ order['contact'] }}\r\n </text>\r\n\r\n <text class=\"tag-pill green \">\r\n 新客\r\n </text>\r\n\r\n </view>\r\n </view>\r\n <text class=\"service-price\">\r\n ¥{{ order.price }}\r\n </text>\r\n </view>\r\n <!-- Card Address: 地址 & 距离 -->\r\n <view class=\"address-section\">\r\n <u-icon type=\"location\" size=\"16\" color=\"#999999\">\r\n </u-icon>\r\n <text class=\"address-content\">\r\n {{ order.address }}\r\n </text>\r\n <text class=\"distance-text\">\r\n {{ order.distance }}km\r\n </text>\r\n </view>\r\n\r\n <!-- Card Income: 预估收入 -->\r\n <view class=\"income-section\">\r\n <text class=\"income-label\">\r\n 预估收入\r\n </text>\r\n <view class=\"income-value-group\">\r\n <text class=\"income-main\">\r\n ¥{{ order.income }}\r\n </text>\r\n <text class=\"income-sub\">\r\n (含路费)\r\n </text>\r\n </view>\r\n </view>\r\n\r\n <!-- Card Actions: 按钮组 -->\r\n <view class=\"action-section\">\r\n <view class=\"btn btn-nav\" @click=\"onNavigate(order.address)\">\r\n <u-icon type=\"navigation\" size=\"14\" color=\"#333333\">\r\n </u-icon>\r\n <text>\r\n 地址导航\r\n </text>\r\n </view>\r\n <text class=\"btn btn-transfer\" @click=\"onTransfer(order.id)\">\r\n 我要转单\r\n </text>\r\n <text class=\"btn btn-confirm\" @click=\"onConfirm(order.id)\">\r\n 确认接单\r\n </text>\r\n </view>\r\n </view>\r\n </view>\r\n </view>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n import { ref } from 'vue';\r\n\r\n // --- 数据 ---\r\n const tabs = ['新订单',\r\n '进行中',\r\n '取消/售后',\r\n '已完成',\r\n '全部'];\r\n const currentTab = ref(0);\r\n\r\n\ttype OrderTag = {\r\n\t\ttext : string;\r\n\t\ttype : 'orange' | 'green' | 'red';\r\n\t}\r\n\r\n\ttype OrderItem = {\r\n\t\tid : number;\r\n\t\ttime : string;\r\n\t\tserviceName : string;\r\n\t\ttags : OrderTag[];\r\n\t\tcontact : string;\r\n\t\tprice : string;\r\n\t\taddress : string;\r\n\t\tdistance : string;\r\n\t\tincome : string;\r\n\t\timage : string;\r\n\t};\r\n\r\n // orders data – no need for reactivity, use a plain typed array\r\n const orders : OrderItem[] = [\r\n {\r\n id: 1,\r\n time: '2025-06-18 4:00',\r\n serviceName: '润养SPA',\r\n tags: [\r\n { text: '上门', type: 'orange' } as OrderTag,\r\n { text: '首单', type: 'orange' } as OrderTag,\r\n ],\r\n contact: '刘',\r\n price: '286.6',\r\n address: '烟台 芝罘区楚风一街楚凤花园（烟台吾悦）广场附近',\r\n distance: '2.24',\r\n income: '186.6',\r\n image: '/static/testInfo/demo.png'\r\n },\r\n {\r\n id: 2,\r\n time: '2025-06-18 8:00',\r\n serviceName: '润养SPA',\r\n tags: [\r\n { text: '加钟', type: 'red' } as OrderTag\r\n ],\r\n contact: '刘',\r\n price: '286.6',\r\n address: '烟台 芝罘区楚风一街楚凤花园（烟台吾悦）广场附近',\r\n distance: '2.24',\r\n income: '186.6',\r\n image: '/static/testInfo/demo.png'\r\n }\r\n ] as OrderItem[];\r\n\r\n // --- 方法 ---\r\n const onNavigate = (addr : string) => {\r\n uni.showToast({ title: '启动导航', icon: 'none' });\r\n };\r\n\r\n // helper used in template to give v-for a typed array source\r\n function tagList(order: OrderItem): OrderTag[] {\r\n return order.tags;\r\n }\r\n\r\n const onTransfer = (id : number) => {\r\n uni.showModal({\r\n title: '转单确认',\r\n content: '确定将此订单转给其他技师吗？',\r\n success: (res) => {\r\n if (res.confirm) uni.showToast({ title: '转单成功', icon: 'success' });\r\n }\r\n });\r\n };\r\n\r\n const onConfirm = (id : number) => {\r\n uni.showLoading({ title: '处理中...' });\r\n setTimeout(() => {\r\n uni.hideLoading();\r\n uni.showToast({ title: '接单成功', icon: 'success' });\r\n }, 600);\r\n };\r\n</script>\r\n\r\n<style scoped>\r\n .page-container {\r\n background-color: #f5f6f8;\r\n /* min-height: 100vh; unsupported by uvue, replace with fixed value or remove */\r\n min-height: 1000rpx;\r\n /* width: 100%; */ /* 默认块级元素已撑满父容器 */\r\n /* 确保内部元素不溢出 */\r\n box-sizing: border-box;\r\n }\r\n\r\n /* --- Tab 区域 --- */\r\n .tab-scroll {\r\n /* width: 100%; */ /* 不使用百分比 */\r\n background-color: #ffffff;\r\n /* 固定高度或自适应 */\r\n height: 88rpx;\r\n }\r\n\r\n .tab-wrapper {\r\n display: flex;\r\n /* 内部横向排列 */\r\n flex-direction: row;\r\n align-items: center;\r\n /* 直接使用固定高度匹配 .tab-scroll */\r\n height: 88rpx;\r\n padding: 0 20rpx;\r\n white-space: nowrap;\r\n }\r\n\r\n .tab-item {\r\n position: relative;\r\n padding: 0 30rpx;\r\n /* 高度与容器一致，避免百分比 */\r\n height: 88rpx;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 30rpx;\r\n color: #666666;\r\n }\r\n\r\n .tab-item.active {\r\n color: #333333;\r\n font-weight: bold;\r\n }\r\n\r\n .tab-indicator {\r\n position: absolute;\r\n bottom: 16rpx;\r\n left: 0;\r\n right: 0;\r\n margin: 0 auto;\r\n width: 40rpx;\r\n height: 6rpx;\r\n background-color: #ffc107;\r\n border-radius: 3rpx;\r\n }\r\n\r\n /* --- 列表区域 --- */\r\n .order-list {\r\n padding: 20rpx;\r\n /* 垂直排列卡片 */\r\n display: flex;\r\n flex-direction: column;\r\n /* gap: 20rpx; */\r\n }\r\n\r\n .order-card {\r\n background-color: #ffffff;\r\n border-radius: 16rpx;\r\n padding: 30rpx;\r\n /* 卡片内部也是垂直流 */\r\n display: flex;\r\n flex-direction: column;\r\n /* gap: 20rpx; */\r\n }\r\n\r\n /* 1. 头部 */\r\n .card-header {\r\n display: flex;\r\n flex-direction: row;\r\n /* 左右布局 */\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .time-text {\r\n font-size: 28rpx;\r\n color: #333333;\r\n font-weight: 400;\r\n /* use supported weight */\r\n }\r\n\r\n .status-badge {\r\n font-size: 24rpx;\r\n padding: 6rpx 16rpx;\r\n border-radius: 20rpx;\r\n }\r\n\r\n .status-badge.paid {\r\n background-color: #fff7e6;\r\n color: #ff9900;\r\n }\r\n\r\n /* 2. 服务信息 (左图右文) */\r\n .service-section {\r\n display: flex;\r\n flex-direction: row;\r\n /* 关键：横向排列图和文 */\r\n align-items: flex-start;\r\n /* gap: 20rpx; */\r\n }\r\n\r\n .service-image {\r\n width: 110rpx;\r\n height: 110rpx;\r\n border-radius: 12rpx;\r\n background-color: #f0f0f0;\r\n flex-shrink: 0;\r\n /* 防止图片被压缩 */\r\n }\r\n\r\n .service-details {\r\n flex: 1;\r\n display: flex;\r\n /* flex-direction: column; */\r\n /* 文字内部垂直排列 */\r\n justify-content: space-between;\r\n /* height: 110rpx; */\r\n\r\n }\r\n\r\n .service-title-row {\r\n display: flex;\r\n flex-direction: row;\r\n /* justify-content: space-between; */\r\n align-items: center;\r\n }\r\n\r\n .service-name {\r\n font-size: 32rpx;\r\n font-weight: bold;\r\n color: #333333;\r\n }\r\n\r\n .service-price {\r\n font-size: 34rpx;\r\n font-weight: bold;\r\n color: #333333;\r\n }\r\n\r\n .tags-container {\r\n display: flex;\r\n flex-direction: row;\r\n /* gap: 12rpx; */\r\n flex-wrap: wrap;\r\n }\r\n\r\n .tag-pill {\r\n font-size: 22rpx;\r\n padding: 4rpx 12rpx;\r\n border-radius: 20rpx;\r\n border-width: 1rpx;\r\n border-style: solid;\r\n line-height: 1.2;\r\n }\r\n\r\n .tag-pill.orange {\r\n color: #ff9900;\r\n border-color: #ff9900;\r\n background-color: #fffaf0;\r\n }\r\n\r\n .tag-pill.green {\r\n color: #52c41a;\r\n border-color: #52c41a;\r\n background-color: #f6ffed;\r\n }\r\n\r\n .tag-pill.red {\r\n color: #ff4d4f;\r\n border-color: #ff4d4f;\r\n background-color: #fff1f0;\r\n }\r\n\r\n .contact-info-row {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n /* gap: 20rpx; */\r\n }\r\n\r\n .contact-info {\r\n font-size: 26rpx;\r\n color: #999999;\r\n }\r\n\r\n /* 3. 地址栏 */\r\n .address-section {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: flex-start;\r\n padding-bottom: 20rpx;\r\n border-bottom-width: 1rpx;\r\n border-bottom-color: #f5f5f5;\r\n border-bottom-style: solid;\r\n /* gap: 10rpx; */\r\n }\r\n\r\n .address-content {\r\n flex: 1;\r\n font-size: 26rpx;\r\n color: #666666;\r\n line-height: 1.4;\r\n /* multi-line ellipsis removed; not supported by uvue */\r\n /* display: -webkit-box;\r\n -webkit-line-clamp: 2;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n */\r\n }\r\n\r\n .distance-text {\r\n font-size: 24rpx;\r\n color: #999999;\r\n white-space: nowrap;\r\n margin-left: 10rpx;\r\n }\r\n\r\n /* 4. 收入栏 */\r\n .income-section {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n\r\n .income-label {\r\n font-size: 28rpx;\r\n color: #666666;\r\n }\r\n\r\n .income-value-group {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n /* baseline not supported */\r\n /* */\r\n }\r\n\r\n .income-main {\r\n font-size: 36rpx;\r\n font-weight: bold;\r\n color: #ff4d4f;\r\n }\r\n\r\n .income-sub {\r\n font-size: 24rpx;\r\n color: #999999;\r\n }\r\n\r\n /* 5. 按钮组 */\r\n .action-section {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n /* gap: 20rpx; */\r\n }\r\n\r\n .btn {\r\n flex: 1;\r\n height: 72rpx;\r\n border-radius: 36rpx;\r\n font-size: 28rpx;\r\n font-weight: 400;\r\n display: flex;\r\n flex-direction: row;\r\n /* 按钮内图标和文字横向 */\r\n justify-content: center;\r\n align-items: center;\r\n /* */\r\n }\r\n\r\n .btn-nav {\r\n background-color: #f5f5f5;\r\n color: #333333;\r\n }\r\n\r\n .btn-transfer {\r\n background-color: #ffffff;\r\n color: #ff9900;\r\n border-width: 1rpx;\r\n border-color: #ff9900;\r\n border-style: solid;\r\n }\r\n\r\n .btn-confirm {\r\n background-color: #ffc107;\r\n color: #333333;\r\n border-width: 1rpx;\r\n border-color: #ffc107;\r\n border-style: solid;\r\n }\r\n</style>",null,null],"names":[],"mappings":"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"}
|
