454 lines
9.5 KiB
Vue
454 lines
9.5 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- 搜索栏 -->
|
||
<view class="search-section">
|
||
<view class="search-bar">
|
||
<text class="search-icon">🔍</text>
|
||
<input
|
||
class="search-input"
|
||
v-model="keyword"
|
||
placeholder="输入客户姓名或手机号搜索"
|
||
placeholder-class="placeholder"
|
||
@input="searchCustomers"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 搜索结果列表 -->
|
||
<scroll-view scroll-y class="result-section">
|
||
<view v-if="loading" class="loading">加载中...</view>
|
||
<view v-else-if="customers.length === 0 && keyword" class="empty">
|
||
<text class="empty-icon">👤</text>
|
||
<text class="empty-text">未找到相关客户</text>
|
||
</view>
|
||
<view v-else-if="customers.length > 0" class="customer-list">
|
||
<view
|
||
v-for="customer in customers"
|
||
:key="customer.customerId"
|
||
class="customer-card"
|
||
@click="selectCustomer(customer)"
|
||
>
|
||
<view class="customer-info">
|
||
<text class="customer-name">{{ customer.name }}</text>
|
||
<text class="customer-phone">{{ customer.phone || '' }}</text>
|
||
</view>
|
||
<text class="arrow">›</text>
|
||
</view>
|
||
</view>
|
||
<view v-else-if="selectedCustomer" class="selected-info">
|
||
<text>已选择: {{ selectedCustomer.name }}</text>
|
||
<text class="clear-btn" @click="clearSelection">清除</text>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<!-- 已选客户的订单列表 -->
|
||
<view class="orders-section" v-if="selectedCustomer">
|
||
<view class="orders-header">
|
||
<text class="orders-title">{{ selectedCustomer.name }} 的订单</text>
|
||
</view>
|
||
<scroll-view scroll-y class="orders-list">
|
||
<view
|
||
v-for="order in orders"
|
||
:key="order.orderId"
|
||
class="order-card"
|
||
:class="{ 'selected': merging && order.status === 1 && selectedOrders.includes(order.orderId) }"
|
||
@click="toggleOrderSelection(order)"
|
||
>
|
||
<view class="card-checkbox" v-if="merging && order.status === 1">
|
||
<text>{{ selectedOrders.includes(order.orderId) ? '☑' : '☐' }}</text>
|
||
</view>
|
||
<view class="card-content" :class="{ 'with-checkbox': merging && order.status === 1 }">
|
||
<view class="card-header">
|
||
<text class="order-no">{{ order.orderNo }}</text>
|
||
<text class="order-status" :class="getStatusClass(order.status)">
|
||
{{ getStatusText(order.status) }}
|
||
</text>
|
||
</view>
|
||
<view class="card-body">
|
||
<text class="order-amount">实付: ¥{{ order.actualAmount }}</text>
|
||
<text class="order-time">{{ formatTime(order.createdAt) }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 合并订单按钮 -->
|
||
<view class="bottom-bar" v-if="selectedCustomer && orders.length > 0">
|
||
<button
|
||
class="merge-btn"
|
||
@click="startMerge"
|
||
v-if="!merging"
|
||
>
|
||
合并订单
|
||
</button>
|
||
<view class="merge-actions" v-else>
|
||
<button class="cancel-btn" @click="cancelMerge">取消</button>
|
||
<button
|
||
class="confirm-btn"
|
||
@click="confirmMerge"
|
||
:disabled="selectedOrders.length < 2"
|
||
>
|
||
确定 ({{ selectedOrders.length }})
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import orderApi from '@/api/order'
|
||
import customerApi from '@/api/customer'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
keyword: '',
|
||
customers: [],
|
||
selectedCustomer: null,
|
||
orders: [],
|
||
loading: false,
|
||
// 合并订单相关
|
||
merging: false,
|
||
selectedOrders: []
|
||
}
|
||
},
|
||
methods: {
|
||
async searchCustomers() {
|
||
if (!this.keyword.trim()) {
|
||
this.customers = []
|
||
return
|
||
}
|
||
|
||
this.loading = true
|
||
try {
|
||
const res = await customerApi.getCustomers({
|
||
keyword: this.keyword.trim(),
|
||
page: 1,
|
||
pageSize: 20
|
||
})
|
||
this.customers = res.records || []
|
||
} catch (e) {
|
||
console.error(e)
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
async selectCustomer(customer) {
|
||
this.selectedCustomer = customer
|
||
this.keyword = ''
|
||
this.customers = []
|
||
this.loadOrders()
|
||
},
|
||
clearSelection() {
|
||
this.selectedCustomer = null
|
||
this.orders = []
|
||
this.merging = false
|
||
this.selectedOrders = []
|
||
},
|
||
toggleOrderSelection(order) {
|
||
if (!this.merging || order.status !== 1) return
|
||
const index = this.selectedOrders.indexOf(order.orderId)
|
||
if (index > -1) {
|
||
this.selectedOrders.splice(index, 1)
|
||
} else {
|
||
this.selectedOrders.push(order.orderId)
|
||
}
|
||
},
|
||
startMerge() {
|
||
this.merging = true
|
||
this.selectedOrders = []
|
||
},
|
||
cancelMerge() {
|
||
this.merging = false
|
||
this.selectedOrders = []
|
||
},
|
||
confirmMerge() {
|
||
if (this.selectedOrders.length < 2) {
|
||
uni.showToast({ title: '请至少选择2个订单', icon: 'none' })
|
||
return
|
||
}
|
||
uni.showToast({ title: '选中 ' + this.selectedOrders.length + ' 个订单', icon: 'success' })
|
||
// TODO: 后端合并订单逻辑
|
||
},
|
||
async loadOrders() {
|
||
if (!this.selectedCustomer) return
|
||
|
||
try {
|
||
const res = await orderApi.getOrders({
|
||
customerId: this.selectedCustomer.customerId,
|
||
page: 1,
|
||
pageSize: 50
|
||
})
|
||
this.orders = res.records || []
|
||
} catch (e) {
|
||
console.error(e)
|
||
}
|
||
},
|
||
getStatusClass(status) {
|
||
const map = {
|
||
1: 'status-success',
|
||
2: 'status-cancel'
|
||
}
|
||
return map[status] || ''
|
||
},
|
||
getStatusText(status) {
|
||
const map = {
|
||
0: '未完成',
|
||
1: '已完成',
|
||
2: '已取消'
|
||
}
|
||
return map[status] || '未知'
|
||
},
|
||
formatTime(time) {
|
||
if (!time) return ''
|
||
return time.substring(0, 16).replace('T', ' ')
|
||
},
|
||
viewDetail(order) {
|
||
uni.showModal({
|
||
title: '订单详情',
|
||
content: `订单号: ${order.orderNo}\n原价: ¥${order.totalAmount}\n优惠: ¥${order.discountAmount}\n实付: ¥${order.actualAmount}\n状态: ${this.getStatusText(order.status)}`,
|
||
showCancel: false
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.page {
|
||
min-height: 100vh;
|
||
background: #f8f9fa;
|
||
}
|
||
|
||
.search-section {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
padding: 30rpx;
|
||
}
|
||
|
||
.search-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
background: rgba(255, 255, 255, 0.95);
|
||
border-radius: 50rpx;
|
||
padding: 0 30rpx;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.search-icon {
|
||
font-size: 32rpx;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.placeholder {
|
||
color: #999;
|
||
}
|
||
|
||
.result-section {
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.loading, .empty {
|
||
text-align: center;
|
||
color: #999;
|
||
padding: 60rpx;
|
||
}
|
||
|
||
.empty-icon {
|
||
font-size: 60rpx;
|
||
display: block;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.selected-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 20rpx;
|
||
background: #e6f7ff;
|
||
border-radius: 12rpx;
|
||
margin: 20rpx;
|
||
color: #1890ff;
|
||
}
|
||
|
||
.clear-btn {
|
||
color: #ff4d4f;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.customer-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.customer-card {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: #fff;
|
||
padding: 24rpx;
|
||
margin-bottom: 16rpx;
|
||
border-radius: 12rpx;
|
||
}
|
||
|
||
.customer-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.customer-name {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.customer-phone {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.arrow {
|
||
font-size: 36rpx;
|
||
color: #ccc;
|
||
}
|
||
|
||
.orders-section {
|
||
background: #fff;
|
||
padding: 20rpx;
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.orders-header {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.orders-title {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.orders-list {
|
||
flex: 1;
|
||
}
|
||
|
||
.order-card {
|
||
padding: 20rpx;
|
||
border-bottom: 1rpx solid #f0f0f0;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.order-card.selected {
|
||
background: #e6f7ff;
|
||
}
|
||
|
||
.card-checkbox {
|
||
margin-right: 16rpx;
|
||
font-size: 36rpx;
|
||
}
|
||
|
||
.card-content.with-checkbox {
|
||
flex: 1;
|
||
}
|
||
|
||
.card-content {
|
||
flex: 1;
|
||
}
|
||
|
||
.card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.order-no {
|
||
font-size: 26rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.order-status {
|
||
font-size: 22rpx;
|
||
padding: 4rpx 12rpx;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.status-success {
|
||
background: #e6f7e6;
|
||
color: #52c41a;
|
||
}
|
||
|
||
.status-cancel {
|
||
background: #fff1f0;
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
.card-body {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.order-amount {
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
color: #ff4d4f;
|
||
}
|
||
|
||
.order-time {
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
}
|
||
|
||
.bottom-bar {
|
||
padding: 20rpx;
|
||
background: #fff;
|
||
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.merge-btn {
|
||
width: 100%;
|
||
height: 88rpx;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 44rpx;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.merge-actions {
|
||
display: flex;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
.cancel-btn, .confirm-btn {
|
||
flex: 1;
|
||
height: 88rpx;
|
||
border-radius: 44rpx;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
border: none;
|
||
}
|
||
|
||
.cancel-btn {
|
||
background: #f5f5f5;
|
||
color: #666;
|
||
}
|
||
|
||
.confirm-btn {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: #fff;
|
||
}
|
||
|
||
.confirm-btn[disabled] {
|
||
background: #ccc;
|
||
}
|
||
</style> |