admin/smartDriveEEUniApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

家居场景销售接待

Browse Source
This commit is contained in:
zhonghua1
2026-01-10 11:12:23 +08:00
parent be6fa3ef28
commit 03c0fe8375
13 changed files with 427 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

355
pages/furniture_reception/common_begin_reception.vue
View File

@@ -2,139 +2,150 @@
<view class="reception-form-wrapper">
<scroll-view class="reception-form" scroll-y enable-back-to-top>
<view class="form-card">
<view class="form-item">
<text class="form-item__label">服务次数</text>
<view class="form-item__text">
<text>{{ formData.contactCount || 0 }}</text>
</view>
</view>
<view class="form-item">
<text class="form-item__label">客户姓名</text>
<input
class="form-item__input"
v-model="formData.customerName"
placeholder="请输入客户姓名"
placeholder-style="color: #9ca3af"
/>
</view>
<view class="form-item">
<text class="form-item__label">客户电话</text>
<input
class="form-item__input"
v-model="formData.contact"
@blur="onContactBlur"
type="number"
placeholder="请输入客户电话"
placeholder-style="color: #9ca3af"
/>
</view>
<view class="form-item customer-source-select-wrapper">
<text class="form-item__label">客户来源</text>
<view
class="customer-source-select"
@click.stop="toggleCustomerSourceDropdown"
>
<text
:class="formData.customerSource ? 'form-item__picker-text' : 'form-item__picker-placeholder'"
>
{{ formData.customerSource || "请选择客户来源" }}
</text>
<uni-icons type="bottom" size="16" color="#9ca3af"></uni-icons>
</view>
<view
v-if="showCustomerSourceDropdown"
class="customer-source-select-dropdown"
@click.stop
>
<view
class="customer-source-select-dropdown__item"
v-for="option in customerSourceOptions"
:key="option"
@click="selectCustomerSource(option)"
>
<text :class="{'active': option === formData.customerSource}">
{{ option }}
</text>
<view class="form-item">
<text class="form-item__label">服务次数</text>
<view class="form-item__text">
<text>{{ formData.contactCount || 0 }}</text>
</view>
</view>
<view class="form-item">
<text class="form-item__label">客户姓名</text>
<input
class="form-item__input"
v-model="formData.customerName"
placeholder="请输入客户姓名"
placeholder-style="color: #9ca3af"
/>
</view>
<view class="form-item">
<text class="form-item__label">客户电话</text>
<input
class="form-item__input"
v-model="formData.contact"
@blur="onContactBlur"
type="number"
placeholder="请输入客户电话"
placeholder-style="color: #9ca3af"
/>
</view>
<view class="form-item">
<text class="form-item__label">客户来源</text>
<view class="customer-source-select-wrapper">
<view
class="customer-source-select"
@click.stop="toggleCustomerSourceDropdown"
>
<text
:class="formData.customerSource ? 'form-item__picker-text' : 'form-item__picker-placeholder'"
>
{{ formData.customerSource || "请选择客户来源" }}
</text>
<uni-icons type="bottom" size="16" color="#9ca3af"></uni-icons>
</view>
<view
v-if="showCustomerSourceDropdown"
class="customer-source-select-dropdown"
@click.stop
>
<view
class="customer-source-select-dropdown__item"
v-for="option in customerSourceOptions"
:key="option"
@click="selectCustomerSource(option)"
>
<text :class="{'active': option === formData.customerSource}">
{{ option }}
</text>
</view>
</view>
</view>
</view>
<view class="form-item">
<text class="form-item__label">门店名称</text>
<input
class="form-item__input"
v-model="formData.dealershipName"
placeholder="请输入门店名称"
placeholder-style="color: #9ca3af"
/>
</view>
<view class="form-item">
<text class="form-item__label">性别</text>
<radio-group
class="gender-radio-group"
@change="onGenderChange">
<label
class="gender-radio"
v-for="(option, index) in genderOptions"
:key="index">
<radio
:value="option"
:checked="formData.gender === option"
color="#2563eb" />
<text class="gender-radio__text">{{ option }}</text>
</label>
</radio-group>
</view>
<view class="form-item">
<text class="form-item__label">年龄</text>
<input
class="form-item__input"
v-model="formData.age"
type="number"
placeholder="请输入年龄"
placeholder-style="color: #9ca3af"
/>
</view>
<view class="form-item">
<text class="form-item__label">销售姓名</text>
<input
class="form-item__input"
v-model="formData.salesName"
placeholder="请输入销售姓名"
placeholder-style="color: #9ca3af"
/>
</view>
<view class="form-item">
<text class="form-item__label">销售电话</text>
<input
class="form-item__input"
v-model="formData.salesPhone"
type="number"
placeholder="请输入销售电话"
placeholder-style="color: #9ca3af"
/>
</view>
<view class="form-item">
<text class="form-item__label">住址</text>
<input
class="form-item__input"
v-model="formData.remarks"
placeholder="请输入详细住址"
placeholder-style="color: #9ca3af"
/>
</view>
</view>
<view class="form-item">
<text class="form-item__label">门店名称</text>
<input
class="form-item__input"
v-model="formData.dealershipName"
placeholder="请输入门店名称"
placeholder-style="color: #9ca3af"
/>
</view>
<view class="form-item">
<text class="form-item__label">性别</text>
<radio-group
class="gender-radio-group"
@change="onGenderChange">
<label
class="gender-radio"
v-for="(option, index) in genderOptions"
:key="index">
<radio
:value="option"
:checked="formData.gender === option"
color="#2563eb" />
<text class="gender-radio__text">{{ option }}</text>
</label>
</radio-group>
</view>
<view class="form-item">
<text class="form-item__label">年龄</text>
<input
class="form-item__input"
v-model="formData.age"
type="number"
placeholder="请输入年龄"
placeholder-style="color: #9ca3af"
/>
</view>
<view class="form-item">
<text class="form-item__label">销售姓名</text>
<input
class="form-item__input"
v-model="formData.salesName"
placeholder="请输入销售姓名"
placeholder-style="color: #9ca3af"
/>
</view>
<view class="form-item">
<text class="form-item__label">销售电话</text>
<input
class="form-item__input"
v-model="formData.salesPhone"
type="number"
placeholder="请输入销售电话"
placeholder-style="color: #9ca3af"
/>
</view>
<view class="form-item">
<text class="form-item__label">住址</text>
<input
class="form-item__input"
v-model="formData.remarks"
placeholder="请输入详细住址"
placeholder-style="color: #9ca3af"
/>
</view>
</view>
</scroll-view>
<view class="form-actions form-actions--triple">
<view class="form-btn form-btn--cancel" @click="handleCancel">
<view class="form-btn__icon-circle">
<uni-icons type="close" size="16" color="#007AFF"></uni-icons>
</view>
<text class="form-btn__text">取消</text>
</view>
<view class="form-btn form-btn--save" @click="handleSave('save')">
<view class="form-btn__icon-circle">
<uni-icons type="checkmarkempty" size="16" color="#007AFF"></uni-icons>
</view>
<text class="form-btn__text">保存</text>
</view>
<view class="form-btn form-btn--start" @click="handleSave('start')">
<view class="form-btn__icon-circle">
<uni-icons type="checkmarkempty" size="16" color="#007AFF"></uni-icons>
</view>
<text class="form-btn__text">开始接待</text>
</view>
</view>
</scroll-view>
<!-- 遮罩层，点击关闭下拉框 -->
<view
v-if="showCustomerSourceDropdown"
@@ -490,14 +501,17 @@ export default {
box-sizing: border-box;
width: 100%;
z-index: 1;
display: flex;
flex-direction: column;
}
.reception-form {
flex: 1;
width: 100%;
height: 100%;
padding: 24rpx 16rpx 0 16rpx; /* 顶部24rpx间距（与列表项间距一致），底部0 */
padding: 24rpx 16rpx 0 16rpx;
box-sizing: border-box;
background-color: #F5F5F5;
overflow-y: auto;
}
.form-card {
@@ -510,10 +524,18 @@ export default {
margin-bottom: 32rpx;
}
.form-card .form-item:last-child {
margin-bottom: 0;
}
.form-item {
display: flex;
align-items: center;
margin-bottom: 32rpx;
min-height: 88rpx;
box-sizing: border-box;
width: 100%;
flex-wrap: nowrap;
}
/* 对于包含 textarea 的表单项，label 顶部对齐 */
@@ -525,31 +547,33 @@ export default {
flex: 1;
display: flex;
gap: 32rpx;
flex-wrap: wrap;
flex-wrap: nowrap;
align-items: center;
}
.gender-radio {
display: flex;
align-items: center;
gap: 12rpx;
flex-shrink: 0;
}
.gender-radio__text {
color: #374151;
font-size: 28rpx;
white-space: nowrap;
}
.form-item:last-child {
margin-bottom: 0;
}
.form-item__label {
font-size: 28rpx;
color: #333;
font-weight: 500;
/* 原 160rpx，缩小 20% 以减小与输入框的间距 */
width: 128rpx;
width: 140rpx;
flex-shrink: 0;
margin-right: 24rpx;
white-space: nowrap;
box-sizing: border-box;
}
.form-item--half {
@@ -558,7 +582,9 @@ export default {
.form-item__input {
flex: 1;
min-width: 0;
height: 88rpx;
line-height: 88rpx;
background-color: #f9fafb;
border-radius: 12rpx;
padding: 0 24rpx;
@@ -569,6 +595,7 @@ export default {
.form-item__text {
flex: 1;
min-width: 0;
height: 88rpx;
background-color: #f9fafb;
border-radius: 12rpx;
@@ -585,8 +612,11 @@ export default {
.form-actions {
display: flex;
gap: 24rpx;
padding-bottom: 40rpx;
gap: 16rpx;
padding: 24rpx 16rpx 32rpx 16rpx;
background-color: #F5F5F5;
box-sizing: border-box;
flex-shrink: 0;
}
.form-actions--triple {
@@ -600,46 +630,56 @@ export default {
display: flex;
align-items: center;
justify-content: center;
gap: 12rpx;
transition: all 0.2s ease;
background-color: #f8f9fa;
border: 1px solid #e5e7eb;
box-sizing: border-box;
}
.form-btn--cancel {
background-color: #f3f4f6;
.form-btn--cancel:active,
.form-btn--save:active,
.form-btn--start:active {
background-color: #f0f0f0;
border-color: #d1d5db;
opacity: 0.9;
}
.form-btn--save {
/* 调浅主按钮色，使页面更柔和 */
background-color: #4C8DFF;
}
.form-btn--start {
background-color: #10B981;
.form-btn__icon-circle {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 122, 255, 0.08);
flex-shrink: 0;
}
.form-btn__text {
font-size: 32rpx;
font-size: 30rpx;
font-weight: 500;
color: #007AFF;
}
.form-btn--cancel .form-btn__text {
color: #6b7280;
}
.form-btn--save .form-btn__text {
color: #ffffff;
}
.form-btn--cancel .form-btn__text,
.form-btn--save .form-btn__text,
.form-btn--start .form-btn__text {
color: #ffffff;
color: #007AFF;
}
/* 客户来源下拉框样式 */
.customer-source-select-wrapper {
position: relative;
flex: 1;
min-width: 0;
display: flex;
align-items: center;
}
.customer-source-select {
width: 100%;
min-width: 0;
height: 88rpx;
background-color: #f9fafb;
border-radius: 12rpx;
@@ -649,12 +689,18 @@ export default {
justify-content: space-between;
box-sizing: border-box;
border: 1px solid transparent;
overflow: hidden;
}
.customer-source-select uni-icons {
flex-shrink: 0;
margin-left: 12rpx;
}
.customer-source-select-dropdown {
position: absolute;
top: 100%;
left: 128rpx;
left: 0;
right: 0;
background-color: #fff;
border-radius: 16rpx;
@@ -662,6 +708,7 @@ export default {
margin-top: 8rpx;
z-index: 11;
padding: 12rpx 0;
box-sizing: border-box;
}
.customer-source-select-dropdown__item {
@@ -695,10 +742,20 @@ export default {
.form-item__picker-text {
font-size: 28rpx;
color: #333;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.form-item__picker-placeholder {
font-size: 28rpx;
color: #9ca3af;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>

26
pages/furniture_reception/furniture_reception.vue
View File

@@ -82,16 +82,16 @@
</view>
<text class="staff-name">{{ item.staffName }}</text>
</view>
<view class="service-status">
<view class="service-action-btn service-action-btn--supplement" @click.stop="showSupplementDialog(item)">
<text>补录</text>
<view class="service-status">
<view class="service-action-btn service-action-btn--supplement" @click.stop="showSupplementDialog(item)">
<text>补录</text>
</view>
<view class="service-action-btn service-action-btn--finish" @click.stop="finishService(item)">
<text>结束</text>
</view>
<uni-icons type="bars" size="16" color="#007AFF"></uni-icons>
<text>服务中</text>
</view>
<view class="service-action-btn service-action-btn--finish" @click.stop="finishService(item)">
<text>结束</text>
</view>
<uni-icons type="bars" size="16" color="#007AFF"></uni-icons>
<text>服务中</text>
</view>
</view>
<view class="customer-info">
@@ -732,6 +732,7 @@ import CommonBeginReception from "./common_begin_reception.vue";
customerPhone: record.customerPhone || '',
customerId: record.customerId || '',
recordingName: record.recordingName || '',
remarks: record.remarks || '',
tags,
durationText: formattedUpdateTime ? `最近更新时间：${formattedUpdateTime}` : '最近暂无更新时间'
};
@@ -1803,6 +1804,13 @@ import CommonBeginReception from "./common_begin_reception.vue";
font-size: 28rpx;
}
.service-status-loading-more {
padding: 48rpx 0;
text-align: center;
color: #999;
font-size: 28rpx;
}
/* 标签管理样式 - 添加表单 */
.tag-management {
/* 使用绝对定位，从tab页底部开始，高度计算：100vh - 导航栏(88rpx) - tab页(72rpx) - 底部导航栏(96rpx) */