| 1 |
- {"version":3,"sources":["pages/index/order.uvue"],"names":[],"mappings":"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","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>"]}
|
