859 lines
21 KiB
Plaintext
859 lines
21 KiB
Plaintext
<template>
|
||
<view class="delivery-order-detail">
|
||
<!-- 返回按钮 -->
|
||
<view class="back-header">
|
||
<view class="back-box" @click="goBack">
|
||
<text class="back-icon">‹</text>
|
||
<text class="back-text">返回</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单状态 -->
|
||
<view class="order-status">
|
||
<view class="status-progress">
|
||
<view class="progress-item" :class="{ active: order.status >= 1 }">
|
||
<view class="progress-dot"></view>
|
||
<text class="progress-text">待接单</text>
|
||
</view>
|
||
<view class="progress-line" :class="{ active: order.status >= 2 }"></view>
|
||
<view class="progress-item" :class="{ active: order.status >= 2 }">
|
||
<view class="progress-dot"></view>
|
||
<text class="progress-text">已接单</text>
|
||
</view>
|
||
<view class="progress-line" :class="{ active: order.status >= 3 }"></view>
|
||
<view class="progress-item" :class="{ active: order.status >= 3 }">
|
||
<view class="progress-dot"></view>
|
||
<text class="progress-text">取货中</text>
|
||
</view>
|
||
<view class="progress-line" :class="{ active: order.status >= 4 }"></view>
|
||
<view class="progress-item" :class="{ active: order.status >= 4 }">
|
||
<view class="progress-dot"></view>
|
||
<text class="progress-text">已取货</text>
|
||
</view>
|
||
<view class="progress-line" :class="{ active: order.status >= 5 }"></view>
|
||
<view class="progress-item" :class="{ active: order.status >= 5 }">
|
||
<view class="progress-dot"></view>
|
||
<text class="progress-text">已送达</text>
|
||
</view>
|
||
</view>
|
||
<text class="status-desc">{{ getStatusDesc() }}</text>
|
||
</view>
|
||
|
||
<!-- 配送信息 -->
|
||
<view class="delivery-info">
|
||
<view class="section-title">配送信息</view>
|
||
<view class="delivery-route">
|
||
<view class="route-item pickup">
|
||
<view class="route-icon">📦</view>
|
||
<view class="route-content">
|
||
<text class="route-title">取货地址</text>
|
||
<text class="route-address">{{ merchant.contact_name }} · {{ merchant.contact_phone }}</text>
|
||
<text class="route-detail">{{ pickupAddress }}</text>
|
||
</view>
|
||
<!-- 只在取货中状态且订单未完成时显示按钮 -->
|
||
<button v-if="order.status === 3 && order.status < 5" class="route-action" @click="confirmPickup">确认取货</button>
|
||
</view>
|
||
|
||
<view class="route-line"></view>
|
||
|
||
<view class="route-item delivery">
|
||
<view class="route-icon">🏠</view>
|
||
<view class="route-content">
|
||
<text class="route-title">送货地址</text>
|
||
<text class="route-address">{{ getDeliveryAddress().name }} · {{ getDeliveryAddress().phone }}</text>
|
||
<text class="route-detail">{{ getDeliveryAddress().detail }}</text>
|
||
</view>
|
||
<!-- 只在已取货状态且订单未完成时显示按钮 -->
|
||
<button v-if="order.status === 4 && order.status < 5" class="route-action" @click="confirmDelivery">确认送达</button>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="delivery-distance">
|
||
<text class="distance-label">配送距离：</text>
|
||
<text class="distance-value">{{ deliveryInfo.distance }}km</text>
|
||
<text class="time-label">预计时长：</text>
|
||
<text class="time-value">{{ deliveryInfo.estimated_time }}分钟</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 订单商品 -->
|
||
<view class="order-products">
|
||
<view class="section-title">订单商品</view>
|
||
<view class="shop-info">
|
||
<text class="shop-name">{{ merchant.shop_name }}</text>
|
||
<text class="order-no">订单号：{{ order.order_no }}</text>
|
||
</view>
|
||
|
||
<view v-for="item in orderItems" :key="item.id" class="product-item">
|
||
<image :src="item.product_image || '/static/default-product.png'" class="product-image" />
|
||
<view class="product-info">
|
||
<text class="product-name">{{ item.product_name }}</text>
|
||
<text v-if="item.sku_specifications" class="product-spec">{{ getSpecText(item.sku_specifications) }}</text>
|
||
<view class="price-quantity">
|
||
<text class="product-price">¥{{ item.price }}</text>
|
||
<text class="product-quantity">×{{ item.quantity }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="order-summary">
|
||
<view class="summary-item">
|
||
<text class="summary-label">商品总额</text>
|
||
<text class="summary-value">¥{{ order.total_amount }}</text>
|
||
</view>
|
||
<view class="summary-item">
|
||
<text class="summary-label">配送费</text>
|
||
<text class="summary-value delivery-fee">¥{{ order.delivery_fee }}</text>
|
||
</view>
|
||
<view class="summary-item total">
|
||
<text class="summary-label">实付金额</text>
|
||
<text class="summary-value">¥{{ order.actual_amount }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 配送备注 -->
|
||
<view class="delivery-notes">
|
||
<view class="section-title">配送备注</view>
|
||
<view class="note-item">
|
||
<text class="note-label">顾客备注：</text>
|
||
<text class="note-content">{{ customerNote || '无备注' }}</text>
|
||
</view>
|
||
<view class="note-item">
|
||
<text class="note-label">商家备注：</text>
|
||
<text class="note-content">{{ merchantNote || '无备注' }}</text>
|
||
</view>
|
||
<!-- 只在订单未完成时显示输入框 -->
|
||
<view v-if="order.status < 5" class="note-item">
|
||
<text class="note-label">配送备注：</text>
|
||
<input v-model="deliveryNote" class="note-input" placeholder="请输入配送备注" />
|
||
</view>
|
||
<!-- 如果订单已完成，显示存储的备注 -->
|
||
<view v-else-if="deliveryNote" class="note-item">
|
||
<text class="note-label">配送备注：</text>
|
||
<text class="note-content">{{ deliveryNote }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 联系方式 -->
|
||
<view class="contact-section">
|
||
<view class="section-title">联系方式</view>
|
||
<view class="contact-list">
|
||
<view class="contact-item" @click="callCustomer">
|
||
<view class="contact-icon">📞</view>
|
||
<view class="contact-info">
|
||
<text class="contact-name">联系顾客</text>
|
||
<text class="contact-phone">{{ getDeliveryAddress().phone }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="contact-item" @click="callMerchant">
|
||
<view class="contact-icon">🏪</view>
|
||
<view class="contact-info">
|
||
<text class="contact-name">联系商家</text>
|
||
<text class="contact-phone">{{ merchant.contact_phone }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部操作 -->
|
||
<view class="bottom-actions">
|
||
<!-- 只在待接单状态且订单未完成时显示接受/拒绝订单按钮 -->
|
||
<button v-if="order.status === 1" class="action-btn accept" @click="acceptOrder">接受订单</button>
|
||
<button v-if="order.status === 1" class="action-btn reject" @click="rejectOrder">拒绝订单</button>
|
||
|
||
<!-- 只在已接单状态且订单未完成时显示“前往取货”和“正在取货”按钮 -->
|
||
<button v-if="order.status === 2" class="action-btn navigate" @click="startNavigation">前往取货</button>
|
||
<button v-if="order.status === 2" class="action-btn complete" @click="confirmArrivedAtPickup">正在取货</button>
|
||
|
||
<!-- 只在取货中状态且订单未完成时显示“确认取货”按钮 -->
|
||
<button v-if="order.status === 3" class="action-btn complete" @click="confirmPickup">确认取货</button>
|
||
|
||
<!-- 只在已取货状态且订单未完成时显示“确认送达”按钮 -->
|
||
<button v-if="order.status === 4" class="action-btn complete" @click="confirmDelivery">确认送达</button>
|
||
|
||
<!-- 始终显示联系客服按钮 -->
|
||
<button class="action-btn contact" @click="contactService">联系客服</button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="uts">
|
||
export default {
|
||
data() {
|
||
return {
|
||
order: {
|
||
id: '',
|
||
order_no: '',
|
||
user_id: '',
|
||
merchant_id: '',
|
||
status: 0, // 👈 从 URL 参数获取
|
||
total_amount: 0,
|
||
discount_amount: 0,
|
||
delivery_fee: 0,
|
||
actual_amount: 0,
|
||
payment_method: 0,
|
||
payment_status: 0,
|
||
delivery_address: {},
|
||
created_at: ''
|
||
},
|
||
orderItems: [],
|
||
merchant: {
|
||
id: '',
|
||
user_id: '',
|
||
shop_name: '',
|
||
shop_logo: '',
|
||
shop_banner: '',
|
||
shop_description: '',
|
||
contact_name: '',
|
||
contact_phone: '',
|
||
shop_status: 0,
|
||
rating: 0,
|
||
total_sales: 0,
|
||
created_at: ''
|
||
},
|
||
deliveryInfo: {
|
||
distance: 0,
|
||
estimated_time: 0,
|
||
courier_id: '',
|
||
pickup_time: '',
|
||
delivery_time: ''
|
||
},
|
||
pickupAddress: '',
|
||
customerNote: '',
|
||
merchantNote: '',
|
||
deliveryNote: '',
|
||
}
|
||
},
|
||
|
||
onLoad(options: any) {
|
||
const orderId = options.id as string
|
||
// ✅ 从 URL 参数获取 status
|
||
const status = parseInt(options.status as string) || 0
|
||
|
||
if (orderId) {
|
||
this.order.id = orderId
|
||
this.order.status = status // ✅ 设置传入的状态
|
||
this.loadOrderDetail(orderId)
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
goBack() {
|
||
uni.navigateBack()
|
||
},
|
||
|
||
loadOrderDetail(orderId: string) {
|
||
// ✅ 保留从 URL 获取的状态
|
||
const originalStatus = this.order.status
|
||
|
||
// 模拟加载订单详情数据
|
||
const mockOrder = {
|
||
id: orderId,
|
||
order_no: 'ORD202401150001',
|
||
user_id: 'user_001',
|
||
merchant_id: 'merchant_001',
|
||
// ✅ 使用传入的 status，而不是硬编码
|
||
status: originalStatus,
|
||
total_amount: 299.98,
|
||
discount_amount: 30.00,
|
||
delivery_fee: 8.00,
|
||
actual_amount: 277.98,
|
||
payment_method: 1,
|
||
payment_status: 1,
|
||
delivery_address: {
|
||
name: '张三',
|
||
phone: '13800138000',
|
||
detail: '北京市朝阳区某某街道某某小区1号楼101室'
|
||
},
|
||
created_at: '2024-01-15 14:30:00'
|
||
}
|
||
|
||
// ✅ 合并数据，保留传入的 status
|
||
Object.assign(this.order, mockOrder)
|
||
|
||
this.orderItems = [
|
||
{
|
||
id: 'item_001',
|
||
order_id: orderId,
|
||
product_id: 'product_001',
|
||
sku_id: 'sku_001',
|
||
product_name: '精选好物商品',
|
||
sku_specifications: { color: '红色', size: 'M' },
|
||
price: 199.99,
|
||
quantity: 1,
|
||
total_amount: 199.99,
|
||
product_image: '/static/product1.jpg'
|
||
}
|
||
]
|
||
|
||
this.merchant = {
|
||
id: 'merchant_001',
|
||
user_id: 'user_001',
|
||
shop_name: '优质好店',
|
||
shop_logo: '/static/shop-logo.png',
|
||
shop_banner: '/static/shop-banner.png',
|
||
shop_description: '专注品质生活',
|
||
contact_name: '店主小王',
|
||
contact_phone: '13800138000',
|
||
shop_status: 1,
|
||
rating: 4.8,
|
||
total_sales: 15680,
|
||
created_at: '2023-06-01'
|
||
}
|
||
|
||
this.pickupAddress = '北京市朝阳区商家街道123号'
|
||
this.customerNote = '请送到门口，谢谢'
|
||
this.merchantNote = '商品易碎，小心搬运'
|
||
this.deliveryNote = '已按时送达，顾客签收'
|
||
|
||
this.deliveryInfo = {
|
||
distance: 3.2,
|
||
estimated_time: 25,
|
||
courier_id: 'courier_001',
|
||
pickup_time: '2024-01-15 15:00:00',
|
||
delivery_time: '2024-01-15 15:25:00'
|
||
}
|
||
},
|
||
|
||
getStatusDesc(): string {
|
||
if (this.order.status >= 5) {
|
||
return '订单已送达完成'
|
||
} else if (this.order.status === 4) {
|
||
return '已取货，正在前往送达'
|
||
} else if (this.order.status === 3) {
|
||
return '配送员正在前往取货'
|
||
} else if (this.order.status === 2) {
|
||
return '订单已接取'
|
||
} else if (this.order.status === 1) {
|
||
return '等待配送员接单'
|
||
} else {
|
||
return '订单状态未知'
|
||
}
|
||
},
|
||
|
||
getDeliveryAddress(): any {
|
||
return this.order.delivery_address as any
|
||
},
|
||
|
||
getSpecText(specifications: any): string {
|
||
if (!specifications) return ''
|
||
return Object.keys(specifications).map(key => `${key}: ${specifications[key]}`).join(', ')
|
||
},
|
||
|
||
confirmPickup() {
|
||
if (this.order.status < 5) {
|
||
uni.showModal({
|
||
title: '确认取货',
|
||
content: '确认已从商家处取到商品？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.order.status = 4 // 更新为已取货
|
||
uni.showToast({
|
||
title: '取货确认成功',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
|
||
confirmDelivery() {
|
||
if (this.order.status < 5) {
|
||
uni.showModal({
|
||
title: '确认送达',
|
||
content: '确认商品已送达到顾客手中？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.order.status = 5 // 更新为已完成
|
||
uni.showToast({
|
||
title: '送达确认成功',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
|
||
acceptOrder() {
|
||
if (this.order.status < 5) {
|
||
uni.showModal({
|
||
title: '接受订单',
|
||
content: '确定接受这个配送订单吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.order.status = 2 // 更新为已接单
|
||
uni.showToast({
|
||
title: '订单接受成功',
|
||
icon: 'success'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
|
||
rejectOrder() {
|
||
if (this.order.status < 5) {
|
||
uni.showModal({
|
||
title: '拒绝订单',
|
||
content: '确定拒绝这个配送订单吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.showToast({
|
||
title: '订单已拒绝',
|
||
icon: 'success'
|
||
})
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
})
|
||
}
|
||
},
|
||
|
||
startNavigation() {
|
||
if (this.order.status < 5) {
|
||
uni.showToast({
|
||
title: '正在启动导航',
|
||
icon: 'loading'
|
||
})
|
||
|
||
setTimeout(() => {
|
||
uni.showToast({
|
||
title: '导航已启动',
|
||
icon: 'success'
|
||
})
|
||
}, 1000)
|
||
}
|
||
},
|
||
|
||
callCustomer() {
|
||
const phone = this.getDeliveryAddress().phone
|
||
uni.makePhoneCall({ phoneNumber: phone })
|
||
},
|
||
|
||
callMerchant() {
|
||
uni.makePhoneCall({ phoneNumber: this.merchant.contact_phone })
|
||
},
|
||
|
||
contactService() {
|
||
uni.navigateTo({
|
||
url: `/pages/mall/service/chat?orderId=${this.order.id}&type=delivery`
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
/* 保持原有样式不变 */
|
||
.delivery-order-detail {
|
||
background-color: #f5f5f5;
|
||
min-height: 100vh;
|
||
padding-bottom: 160rpx;
|
||
}
|
||
|
||
/* ... 其余样式保持原样 ... */
|
||
/* 返回按钮头部 */
|
||
.back-header {
|
||
background-color: #fff;
|
||
padding: 20rpx 30rpx;
|
||
position: relative;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.back-box {
|
||
position: absolute;
|
||
left: 30rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
padding: 10rpx;
|
||
border-radius: 8rpx;
|
||
transition: background-color 0.2s ease;
|
||
}
|
||
|
||
.back-box:active {
|
||
background-color: #f0f0f0;
|
||
}
|
||
|
||
.back-icon {
|
||
font-size: 36rpx;
|
||
color: #333;
|
||
margin-right: 5rpx;
|
||
}
|
||
|
||
.back-text {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.order-status {
|
||
background-color: #fff;
|
||
padding: 40rpx 30rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.status-progress {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.progress-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
flex: 1;
|
||
}
|
||
|
||
.progress-dot {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
border-radius: 50%;
|
||
background-color: #ddd;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.progress-item.active .progress-dot {
|
||
background-color: #4caf50;
|
||
}
|
||
|
||
.progress-text {
|
||
font-size: 22rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.progress-item.active .progress-text {
|
||
color: #4caf50;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.progress-line {
|
||
height: 2rpx;
|
||
background-color: #ddd;
|
||
flex: 1;
|
||
margin: 0 20rpx;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.progress-line.active {
|
||
background-color: #4caf50;
|
||
}
|
||
|
||
.status-desc {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
text-align: center;
|
||
}
|
||
|
||
.delivery-info, .order-products, .delivery-notes, .contact-section {
|
||
background-color: #fff;
|
||
padding: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 25rpx;
|
||
}
|
||
|
||
.delivery-route {
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.route-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 25rpx 0;
|
||
}
|
||
|
||
.route-icon {
|
||
font-size: 36rpx;
|
||
margin-right: 20rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.route-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.route-title {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.route-address {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.route-detail {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.route-action {
|
||
padding: 15rpx 30rpx;
|
||
background-color: #4caf50;
|
||
color: #fff;
|
||
border-radius: 25rpx;
|
||
font-size: 24rpx;
|
||
border: none;
|
||
}
|
||
|
||
.route-line {
|
||
width: 2rpx;
|
||
height: 40rpx;
|
||
background-color: #ddd;
|
||
margin-left: 38rpx;
|
||
}
|
||
|
||
.delivery-distance {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
background-color: #f8f9fa;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.distance-label, .time-label {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.distance-value, .time-value {
|
||
font-size: 24rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.shop-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx 0;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
margin-bottom: 25rpx;
|
||
}
|
||
|
||
.shop-name {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.order-no {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.product-item {
|
||
display: flex;
|
||
padding: 25rpx 0;
|
||
border-bottom: 1rpx solid #f5f5f5;
|
||
}
|
||
|
||
.product-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.product-image {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 8rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.product-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.product-name {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
margin-bottom: 8rpx;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
.product-spec {
|
||
font-size: 22rpx;
|
||
color: #999;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.price-quantity {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.product-price {
|
||
font-size: 26rpx;
|
||
color: #ff4444;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.product-quantity {
|
||
font-size: 24rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.order-summary {
|
||
margin-top: 25rpx;
|
||
padding-top: 20rpx;
|
||
border-top: 1rpx solid #f5f5f5;
|
||
}
|
||
|
||
.summary-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8rpx 0;
|
||
}
|
||
|
||
.summary-label {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
}
|
||
|
||
.summary-value {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.summary-value.delivery-fee {
|
||
color: #4caf50;
|
||
}
|
||
|
||
.summary-item.total {
|
||
border-top: 1rpx solid #f5f5f5;
|
||
margin-top: 10rpx;
|
||
padding-top: 15rpx;
|
||
}
|
||
|
||
.summary-item.total .summary-label,
|
||
.summary-item.total .summary-value {
|
||
font-weight: bold;
|
||
font-size: 28rpx;
|
||
color: #ff4444;
|
||
}
|
||
|
||
.note-item {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.note-label {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.note-content {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.note-input {
|
||
width: 100%;
|
||
padding: 15rpx;
|
||
border: 1rpx solid #ddd;
|
||
border-radius: 8rpx;
|
||
font-size: 26rpx;
|
||
background-color: #f8f9fa;
|
||
}
|
||
|
||
.contact-list {
|
||
display: flex;
|
||
gap: 30rpx;
|
||
}
|
||
|
||
.contact-item {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 25rpx;
|
||
background-color: #f8f9fa;
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
.contact-icon {
|
||
font-size: 32rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
|
||
.contact-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.contact-name {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
|
||
.contact-phone {
|
||
font-size: 24rpx;
|
||
color: #007aff;
|
||
}
|
||
|
||
.bottom-actions {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: #fff;
|
||
padding: 25rpx 30rpx;
|
||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
gap: 15rpx;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.action-btn {
|
||
flex: 1;
|
||
min-width: 120rpx;
|
||
height: 70rpx;
|
||
border-radius: 35rpx;
|
||
font-size: 26rpx;
|
||
border: none;
|
||
margin: 5rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.action-btn.accept, .action-btn.complete {
|
||
background-color: #4caf50;
|
||
color: #fff;
|
||
}
|
||
|
||
.action-btn.reject {
|
||
background-color: #ff4444;
|
||
color: #fff;
|
||
}
|
||
|
||
.action-btn.navigate {
|
||
background-color: #2196f3;
|
||
color: #fff;
|
||
}
|
||
|
||
.action-btn.contact {
|
||
background-color: #ffa726;
|
||
color: #fff;
|
||
}
|
||
</style> |