销售接待页面,逻辑开发。

This commit is contained in:
zhonghua1
2026-01-09 22:48:23 +08:00
parent f17dc27bbf
commit be6fa3ef28
10 changed files with 232 additions and 83 deletions

View File

@@ -75,3 +75,4 @@

View File

@@ -75,3 +75,4 @@

View File

@@ -75,3 +75,4 @@

View File

@@ -298,27 +298,29 @@
placeholder-style="color: #9ca3af" placeholder-style="color: #9ca3af"
/> />
</view> </view>
<view class="form-item"> <view class="form-item form-item--textarea">
<text class="form-item__label">详情</text> <text class="form-item__label">详情</text>
<input <textarea
class="form-item__input" class="form-item__textarea"
v-model="tagForm.detail" v-model="tagForm.detail"
placeholder="请输入详情" placeholder="请输入详情"
placeholder-style="color: #9ca3af" placeholder-style="color: #9ca3af"
:maxlength="500" :maxlength="500"
auto-height
/> />
</view> </view>
<view class="form-item"> <view class="form-item form-item--textarea">
<text class="form-item__label">备注</text> <text class="form-item__label">备注</text>
<input <textarea
class="form-item__input" class="form-item__textarea"
v-model="tagForm.remark" v-model="tagForm.remark"
placeholder="请输入备注" placeholder="请输入备注"
placeholder-style="color: #9ca3af" placeholder-style="color: #9ca3af"
:maxlength="500" :maxlength="500"
auto-height
/> />
</view> </view>
<view class="form-item"> <view class="form-item form-item--switch">
<text class="form-item__label">是否启用</text> <text class="form-item__label">是否启用</text>
<switch <switch
:checked="tagForm.enabled" :checked="tagForm.enabled"
@@ -373,6 +375,15 @@
placeholder-style="color: #9ca3af" placeholder-style="color: #9ca3af"
/> />
</view> </view>
<view class="supplement-form-item">
<text class="supplement-form-item__label">录音名</text>
<input
class="supplement-form-item__input"
v-model="supplementForm.recordingName"
placeholder="请输入录音名"
placeholder-style="color: #9ca3af"
/>
</view>
<view class="supplement-form-item"> <view class="supplement-form-item">
<text class="supplement-form-item__label">客户详细地址</text> <text class="supplement-form-item__label">客户详细地址</text>
<textarea <textarea
@@ -482,6 +493,7 @@ import CommonBeginReception from "./common_begin_reception.vue";
supplementForm: { supplementForm: {
customerName: "", customerName: "",
contact: "", contact: "",
recordingName: "",
remarks: "" remarks: ""
} }
} }
@@ -718,6 +730,8 @@ import CommonBeginReception from "./common_begin_reception.vue";
status: record.syncStatus || '服务中', status: record.syncStatus || '服务中',
customerName: record.customerName || '', customerName: record.customerName || '',
customerPhone: record.customerPhone || '', customerPhone: record.customerPhone || '',
customerId: record.customerId || '',
recordingName: record.recordingName || '',
tags, tags,
durationText: formattedUpdateTime ? `最近更新时间:${formattedUpdateTime}` : '最近暂无更新时间' durationText: formattedUpdateTime ? `最近更新时间:${formattedUpdateTime}` : '最近暂无更新时间'
}; };
@@ -841,6 +855,7 @@ import CommonBeginReception from "./common_begin_reception.vue";
this.supplementForm = { this.supplementForm = {
customerName: item.customerName || "", customerName: item.customerName || "",
contact: item.customerPhone || "", contact: item.customerPhone || "",
recordingName: item.recordingName || "",
remarks: item.remarks || "" remarks: item.remarks || ""
}; };
this.showSupplementModal = true; this.showSupplementModal = true;
@@ -851,6 +866,7 @@ import CommonBeginReception from "./common_begin_reception.vue";
this.supplementForm = { this.supplementForm = {
customerName: "", customerName: "",
contact: "", contact: "",
recordingName: "",
remarks: "" remarks: ""
}; };
}, },
@@ -902,8 +918,10 @@ import CommonBeginReception from "./common_begin_reception.vue";
// 构建请求参数必须包含id // 构建请求参数必须包含id
const params = { const params = {
id: this.currentSupplementItem.id, id: this.currentSupplementItem.id,
customerId: this.currentSupplementItem.customerId || "",
customerName: this.supplementForm.customerName?.trim() || "", customerName: this.supplementForm.customerName?.trim() || "",
customerPhone: trimmedContact || "", customerPhone: trimmedContact || "",
recordingName: this.supplementForm.recordingName?.trim() || "",
remarks: this.supplementForm.remarks?.trim() || "" remarks: this.supplementForm.remarks?.trim() || ""
}; };
@@ -1878,107 +1896,229 @@ import CommonBeginReception from "./common_begin_reception.vue";
.tag-form { .tag-form {
height: 100%; height: 100%;
padding: 24rpx 32rpx; padding: 32rpx;
box-sizing: border-box; box-sizing: border-box;
} }
/* 标签弹窗整体高度控制在 70% 视窗,内部通过尺寸缩减而非拉伸变形 */ /* 表单卡片样式 */
.tag-management { .form-card {
max-height: 70vh; background-color: #FFFFFF;
border-radius: 24rpx;
padding: 32rpx;
margin-bottom: 32rpx;
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
} }
.tag-management .tag-form { /* 表单项样式 */
max-height: 70vh; .form-item {
display: flex;
flex-direction: column;
margin-bottom: 32rpx;
} }
/* 弹窗内部元素高度约 80%(缩减 padding/字号/高度),保持比例一致 */ .form-item:last-child {
.tag-management .form-card { margin-bottom: 0;
padding: 24rpx 20rpx;
margin-bottom: 24rpx;
} }
.tag-management .form-item { /* 表单项标签样式 */
margin-bottom: 24rpx; .form-item__label {
} font-size: 28rpx;
color: #333333;
.tag-management .form-item__label { font-weight: 500;
font-size: 26rpx; margin-bottom: 16rpx;
}
.tag-management .form-item__input,
.tag-management .form-item__text,
.tag-management .form-item__picker,
.tag-management .tag-select {
height: 70rpx; /* 约为原 88rpx 的 80% */
padding: 0 20rpx;
font-size: 26rpx;
}
.tag-management .form-item__picker-icon {
font-size: 22rpx;
}
.tag-management .tag-select-dropdown__item {
padding: 16rpx 28rpx;
}
.tag-management .tag-select-dropdown__item text {
font-size: 26rpx;
}
.tag-management .form-item__textarea {
padding: 16rpx;
font-size: 26rpx;
line-height: 1.5; line-height: 1.5;
} }
/* 详情与备注区域缩到约 50% 高度 */ /* 输入框样式 */
.tag-management .form-item__textarea--detail { .form-item__input {
min-height: 60rpx; width: 100%;
} height: 88rpx;
background-color: #F9FAFB;
.tag-management .form-item__textarea--remark { border: 2rpx solid #E5E7EB;
min-height: 50rpx; border-radius: 16rpx;
} padding: 0 24rpx;
.tag-management .form-actions {
padding-bottom: 24rpx;
gap: 16rpx;
}
.tag-management .form-btn {
height: 72rpx; /* 约为原 88rpx 的 80% */
font-size: 28rpx; font-size: 28rpx;
color: #333333;
box-sizing: border-box;
transition: all 0.3s ease;
} }
.form-item__input:focus {
border-color: #007AFF;
background-color: #FFFFFF;
box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
}
/* 文本域样式 */
.form-item__textarea { .form-item__textarea {
flex: 1; width: 100%;
min-height: 100rpx; min-height: 160rpx;
background-color: #f9fafb; background-color: #F9FAFB;
border-radius: 12rpx; border: 2rpx solid #E5E7EB;
padding: 24rpx; border-radius: 16rpx;
padding: 20rpx 24rpx;
font-size: 28rpx; font-size: 28rpx;
color: #333; color: #333333;
box-sizing: border-box; box-sizing: border-box;
line-height: 1.6; line-height: 1.6;
transition: all 0.3s ease;
} }
.form-item__textarea--detail { .form-item__textarea:focus {
min-height: 100rpx; border-color: #007AFF;
background-color: #FFFFFF;
box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
} }
.form-item__textarea--remark { /* 标签选择器样式 */
min-height: 88rpx; .tag-select-wrapper {
position: relative;
} }
/* 确保包含 textarea 的表单项 label 在顶部对齐 */ .tag-select {
.form-item--textarea .form-item__label { width: 100%;
padding-top: 24rpx; height: 88rpx;
background-color: #F9FAFB;
border: 2rpx solid #E5E7EB;
border-radius: 16rpx;
padding: 0 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
cursor: pointer;
transition: all 0.3s ease;
} }
.tag-select:active {
border-color: #007AFF;
background-color: #FFFFFF;
box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
}
.form-item__picker-text {
font-size: 28rpx;
color: #333333;
flex: 1;
}
.form-item__picker-placeholder {
font-size: 28rpx;
color: #9CA3AF;
flex: 1;
}
/* 下拉菜单样式 */
.tag-select-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #FFFFFF;
border: 2rpx solid #E5E7EB;
border-radius: 16rpx;
margin-top: 8rpx;
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.12);
z-index: 100;
overflow: hidden;
max-height: 400rpx;
overflow-y: auto;
}
.tag-select-dropdown__item {
padding: 24rpx;
border-bottom: 1rpx solid #F3F4F6;
transition: background-color 0.2s ease;
}
.tag-select-dropdown__item:last-child {
border-bottom: none;
}
.tag-select-dropdown__item:active {
background-color: #F9FAFB;
}
.tag-select-dropdown__item text {
font-size: 28rpx;
color: #333333;
}
.tag-select-dropdown__item text.active {
color: #007AFF;
font-weight: 500;
}
/* 下拉菜单遮罩 */
.tag-select-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: transparent;
z-index: 99;
}
/* 开关类型表单项 - 横向布局 */
.form-item--switch {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.form-item--switch .form-item__label {
margin-bottom: 0;
}
/* 开关样式 */ /* 开关样式 */
.form-item switch { .form-item switch {
margin-left: auto; margin-left: auto;
transform: scale(0.9);
}
/* 表单操作按钮区域 */
.form-actions {
display: flex;
gap: 24rpx;
padding-top: 16rpx;
}
.form-btn {
flex: 1;
height: 88rpx;
border-radius: 16rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
font-weight: 500;
transition: all 0.3s ease;
}
.form-btn--cancel {
background-color: #F3F4F6;
color: #6B7280;
}
.form-btn--cancel:active {
background-color: #E5E7EB;
opacity: 0.8;
}
.form-btn--save {
background-color: #007AFF;
color: #FFFFFF;
}
.form-btn--save:active {
background-color: #0056CC;
opacity: 0.9;
}
.form-btn__text {
font-size: 30rpx;
font-weight: 500;
} }
/* 补录弹窗样式 */ /* 补录弹窗样式 */

View File

@@ -75,3 +75,4 @@

View File

@@ -75,3 +75,4 @@

View File

@@ -75,3 +75,4 @@

View File

@@ -75,3 +75,4 @@

View File

@@ -75,3 +75,4 @@

View File

@@ -75,3 +75,4 @@