hant/allocatr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 后台订单录入页面调整

Browse Source
This commit is contained in:
gcd 2025-06-08 21:12:46 +08:00
parent 463240df80
commit cb6c595c8f
2 changed files with 353 additions and 255 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

607
application/admin/view/order/edit.html
View File

@ -1,262 +1,361 @@
<div class="full-height">
<div class="overlay"></div> <!-- 遮罩层 -->
<div class="content">
<!-- 表单区域（占2/3） -->
<div class="form-area">
<div>
<div class="card-body">
<form id="add-form" class="row" role="form" data-toggle="validator" method="POST" action="">
<div class="col-md-6">
<div class="form-group col-xs-12">
<label class="control-label col-xs-12 col-sm-3">{:__('Customer')}:</label>
<div class="col-xs-12 col-sm-8">
<input id="c-customer" value="{$row['customer']}" data-rule="required" class="form-control" name="row[customer]" type="text">
</div>
</div>
<div class="form-group col-xs-12">
<label class="control-label col-xs-12 col-sm-3">{:__('Tel')}:</label>
<div class="col-xs-12 col-sm-8">
<input id="c-tel" data-rule="required" value="{$row['tel']}" class="form-control" name="row[tel]" type="number">
</div>
</div>
<div class="form-group col-xs-12">
<label class="control-label col-xs-12 col-sm-3">{:__('Area_id')}:</label>
<div class='col-xs-12 col-sm-8'>
<input id="c-city" data-rule="required" value="{$row.area_name}" class="form-control" data-toggle="city-picker" type="text" value="{$row.address}" />
<input id="area_id" style="display: none" value="{$row.area_id}" class="form-control" name="row[area_id]" hidden type="text" value="" />
</div>
</div>
<div class="form-group col-xs-12">
<label class="control-label col-xs-12 col-sm-3">{:__('Address')}:</label>
<div class="col-xs-12 col-sm-8">
<div class="myform-group">
<input id="c-address" data-rule="required"
class="form-control"
value="{$row.address}"
readonly
name="row[address]"
type="text">
<div class="btn btn-primary" id="area_map"
data-input-id="c-address"
data-lng-id="lng"
data-lat-id="lat">地图查找</div>
</div>
<input type="text" style="display: none"
name="row[lng]" id="lng" >
<input type="text" style="display: none"
name="row[lat]" id="lat">
<input type="text" style="display: none" id="area_name">
</div>
</div>
<div class="form-group col-xs-12">
<label class="control-label col-xs-12 col-sm-3">{:__('Item_title')}:</label>
<div class="col-xs-12 col-sm-8">
<input type="text" data-rule="required" id="item_id" value="{$row.item_title}" data-value="{$row.item_title}" class="zd-input__inner">
<input type="text" id="item_id_value" value="{$row.item_id}" style="display: none" name="row[item_id]" class="zd-input__inner">
</div>
</div>
<div class="form-group col-xs-12">
<label class="control-label col-xs-12 col-sm-3">{:__('Detail')}:</label>
<div class="col-xs-12 col-sm-8">
<textarea id="c-detail" rows="8" style="width: 100%;resize: vertical" class="form-control" name="row[detail]">{$row.detail}</textarea>
</div>
</div>
<div class="form-group col-xs-12">
<label class="control-label col-xs-12 col-sm-3">上门时间:</label>
<div class="col-xs-12 col-sm-8">
<input data-rule="required" value="{$row['plan_time']}" name="row[plan_time]" class="form-control datetimepicker">
</div>
</div>
<div class="form-group col-xs-12">
<label class="control-label col-xs-12 col-sm-3">{:__('Images')}:</label>
<div class="col-xs-12 col-sm-8">
<div class="input-group">
<input id="c-images" class="form-control" size="50" name="row[images]" type="text">
<div class="input-group-addon no-border no-padding">
<span><button type="button" id="faupload-images" class="btn btn-danger faupload" data-input-id="c-images" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="true" data-preview-id="p-images"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
<span><button type="button" id="fachoose-images" class="btn btn-primary fachoose" data-input-id="c-images" data-mimetype="image/*" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
</div>
<span class="msg-box n-right" for="c-images"></span>
</div>
<ul class="row list-inline faupload-preview" id="p-images"></ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group col-xs-12">
<label class="control-label col-xs-12 col-sm-3">{:__('Source')}:</label>
<div class="col-xs-12 col-sm-8">
<select id="c-source" data-live-search="true" title="请选择" data-rule="required" name="row[source]" class="form-control selectpicker show-tick">
{foreach $sources as $item}
<option {if $item['id'] == $row.source} selected {/if} data-subtext="{$item['ptitle']}" value="{$item['id']}">{$item['title']}</option>
{/foreach}
</select>
</div>
</div>
<div class="form-group col-xs-12">
<label class="control-label col-xs-12 col-sm-3">来源订单ID:</label>
<div class="col-xs-12 col-sm-8">
<input id="c-source-id" value="{$row['source_uid']}" name="row[source_uid]" type="text" class="form-control">
</div>
</div>
<div class="form-group col-xs-12">
<label class="control-label col-xs-12 col-sm-3">派单方式:</label>
<div class="col-xs-12 col-sm-8">
<select data-live-search="true" value="" name="row[dispatch_type]" class="form-control selectpicker show-tick">
<option {if 1 == $row.dispatch_type} selected {/if} value="1">手动派单</option>
<option {if 2 == $row.dispatch_type} selected {/if} value="2">自动派单</option>
</select>
</div>
</div>
<div class="form-group col-xs-12">
<label class="control-label col-xs-12 col-sm-3">收款方式:</label>
<div class="col-xs-12 col-sm-8">
<select name="row[receive_type]" class="form-control selectpicker">
<option {if 1 == $row.receive_type} selected {/if} value="1">已收定金</option>
<option {if 2 == $row.receive_type} selected {/if} value="2">已收全款</option>
</select>
</div>
</div>
<div class="form-group col-xs-12">
<label class="control-label col-xs-12 col-sm-3">收款金额:</label>
<div class="col-xs-12 col-sm-8">
<input data-rule="required" value="{$row['online_amount']}" name="row[online_amount]" class="form-control" type="number">
</div>
</div>
<div class="form-group col-xs-12">
<label class="control-label col-xs-12 col-sm-3">{:__('Coupons')}:</label>
<div class="col-xs-12 col-sm-8">
<select id="c-coupon" data-live-search="true" title="请选择" data-rule="required" name="row[coupon_id]" class="form-control selectpicker show-tick">
<option {if 0 == $row.coupon_id} selected {/if} value="0">不使用优惠</option>
{foreach $coupons as $item}
<option {if $item['id'] == $row.coupon_id} selected {/if} data-subtext="{$item['description']}" value="{$item['id']}">{$item['code']}</option>
{/foreach}
</select>
</div>
</div>
<div class="form-group col-xs-12">
<label class="control-label col-xs-12 col-sm-3">录单员:</label>
<div class="col-xs-12 col-sm-8">
<select id="c-users" data-live-search="true" title="不选择默认当前登陆账号" name="row[admin_id]" class="form-control selectpicker show-tick">
<option value="-1">不选择默认当前登陆账号</option>
{foreach $users as $item}
<option {if $item['id'] == $row.admin_id} selected {/if} value="{$item['id']}">{$item['nickname']}</option>
{/foreach}
</select>
</div>
</div>
<div class="form-group col-xs-12">
<label class="control-label col-xs-12 col-sm-3">{:__('Remark')}:</label>
<div class="col-xs-12 col-sm-8">
<textarea id="c-remark" rows="8" style="width: 100%;resize: vertical" class="form-control" name="row[remark]">{$row.remark}</textarea>
</div>
</div>
<div class="form-group col-xs-12 layer-footer">
<label class="control-label col-xs-12 col-sm-3"></label>
<div class="col-xs-12 col-sm-8">
<button type="submit" data-id="submit" class="btn btn-primary btn-embossed disabled">修改</button>
</div>
</div>
</div>
</form>
</div>
<div class="full-height flex-c body-hidden">
<form id="add-form" class="row" role="form" data-toggle="validator" method="POST" action="">
<div class="ctr flex-sb">
<div class="left">
<input type="hidden" name="row[dispatch_type]" value="2">
<div class="line flex-sb">
<div class="item flex-sb">
<div class="title flex-c"><span class="required">*</span>订单渠道：</div>
<div class="value">
<select id="c-source" data-live-search="true" title="请选择订单渠道" name="row[source]" class="form-control selectpicker show-tick">
{foreach $sources as $item}
<option {if $item['id'] == $row.source} selected {/if} data-subtext="{$item['ptitle']}" value="{$item['id']}">{$item['title']}</option>
{/foreach}
</select>
</div>
</div>
<div class="item flex-sb">
<div class="title flex-c"><span class="required">*</span>服务项目：</div>
<div class="value flex-c">
<input type="text" placeholder="请选择服务项目" id="item_id" value="{$row.item_title}" data-value="{$row.item_title}" class="zd-input__inner">
<input type="text" id="item_id_value" value="{$row.item_id}" style="display: none" name="row[item_id]" class="zd-input__inner">
</div>
</div>
</div>
<div class="line flex-sb">
<div class="item flex-sb">
<div class="title flex-c"><span class="required">*</span>客户昵称：</div>
<div class="value flex-c">
<input id="c-customer" placeholder="请输入客户昵称" value="{$row['customer']}" class="form-control form-input" name="row[customer]" type="text">
</div>
</div>
<div class="item flex-sb">
<div class="title flex-c"><span class="required">*</span>客户电话：</div>
<div class="value">
<input id="c-tel" value="{$row['tel']}" class="form-control form-input" name="row[tel]" type="number">
</div>
</div>
</div>
<div class="line flex-sb">
<div class="title flex-c"><span class="required">*</span>地区：</div>
<div class='value col-sm-12 flex-c'>
<input id="c-city" value="{$row.area_name}" class="form-control" data-toggle="city-picker" type="text" value="{$row.address}" />
<input id="area_id" style="display: none" value="{$row.area_id}" class="form-control" name="row[area_id]" hidden type="text" value="" />
</div>
</div>
<div class="line multi-line flex-sb bt-40">
<div class="select-address">
<div class="title flex-c"><span class="required">*</span>详细地址：</div>
<div class="select-ctr flex-c">
<div class="btn btn-sm btn-primary flex-c" id="area_map"
data-input-id="c-address"
data-lng-id="lng"
data-lat-id="lat">地图查找</div>
</div>
</div>
<div class='address'>
<textarea id="c-address"
class="form-control form-textarea"
readonly
placeholder="请通过地图查找选择"
name="row[address]"
type="text">{$row.address}</textarea>
<input type="text" style="display: none"
name="row[lng]" id="lng" >
<input type="text" style="display: none"
name="row[lat]" id="lat">
<input type="text" style="display: none" id="area_name">
</div>
</div>
<div class="line flex-sb">
<div class="item flex-sb">
<div class="title flex-c">收款方式：</div>
<div class="value flex-c">
<select name="row[receive_type]" class="form-control selectpicker">
<option {if 1 == $row.receive_type} selected {/if} value="1">已收定金</option>
<option {if 2 == $row.receive_type} selected {/if} value="2">已收全款</option>
</select>
</div>
</div>
<div class="item flex-sb">
<div class="title flex-c"><span class="required">*</span>收款金额：</div>
<div class="value flex-c">
<input value="{$row['online_amount']}" placeholder="请输入收款金额" name="row[online_amount]" class="form-control form-input" type="number">
</div>
</div>
</div>
<div class="line flex-sb bt-40">
<div class="item flex-sb">
<div class="title flex-c">优惠：</div>
<div class="value flex-c">
<select id="c-coupon" data-live-search="true" title="请选择优惠信息" name="row[coupon_id]" class="form-control selectpicker show-tick">
<option {if 0 == $row.coupon_id} selected {/if} value="0">不使用优惠</option>
{foreach $coupons as $item}
<option {if $item['id'] == $row.coupon_id} selected {/if} data-subtext="{$item['description']}" value="{$item['id']}">{$item['code']}</option>
{/foreach}
</select>
</div>
</div>
</div>
<div class="line flex-sb">
<div class="item flex-sb">
<div class="title flex-c">上门时间：</div>
<div class="value flex-l">
{:build_radios('row[set_time]', ['1'=>'有', '0'=>'无'], $row.plan_time === '' ? 0 : 1)}
</div>
</div>
<div class="item flex-sb">
<div class="title flex-c"><span class="required">*</span>设置时间：</div>
<div class="value flex-c">
<input name="row[plan_time]" value="{$row['plan_time']}" placeholder="请选择上门时间" class="form-input form-control datetimepicker">
</div>
</div>
</div>
<div class="line multi-line flex-sb">
<div class="select-address">
<div class="title flex-c">订单备注：</div>
</div>
<div class='address'>
<textarea id="c-remark" placeholder="请输入订单备注" class="form-control form-textarea" name="row[remark]" >{$row.remark}</textarea>
</div>
</div>
<div class="line flex-sb">
<div class="item flex-sb">
<div class="title flex-c">录单员：</div>
<div class="value flex-c">
<select id="c-users" data-live-search="true" title="默认当前登录账号" name="row[admin_id]" class="form-control selectpicker show-tick">
<option value="-1">不选择默认当前登陆账号</option>
{foreach $users as $item}
<option {if $item['id'] == $row.admin_id} selected {/if} value="{$item['id']}">{$item['nickname']}</option>
{/foreach}
</select>
</div>
</div>
</div>
<div class="line flex-sb">
<div class="title flex-c">图片上传：</div>
<div class="value">
<div class="input-group">
<input id="c-images" name="row[images]" type="hidden">
<div class="input-group-addon no-border no-padding">
<span><button type="button" id="faupload-images" class="btn btn-primary faupload" data-input-id="c-images" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp,image/webp" data-multiple="true" data-preview-id="p-images"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
<span><button type="button" id="fachoose-images" class="btn btn-default fachoose" data-input-id="c-images" data-mimetype="image/*" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
</div>
<span class="msg-box n-right" for="c-images"></span>
</div>
<ul class="row list-inline faupload-preview" id="p-images"></ul>
</div>
</div>
</div>
</div>
</form>
</div>
<script>
</script>
<link rel="stylesheet" href="/assets/css/select.css">
<style>
.myform-group{
display: flex;
}
.full-height {
height: 100vh;
width: 100vw;
background: #fff;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3); /* 背景黑色遮罩 */
z-index: -1;
}
.card {
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card-body {
padding: 2rem;
}
.content {
display: flex;
height: 100vh;
}
.form-area {
flex: 2;
display: flex;
justify-content: center;
align-items: flex-start;
}
.function-area {
flex: 1;
padding: 2rem;
background-color: #f8f9fa;
/*border-left: 1px solid #ddd;*/
}
.dropdown-menu {
position: absolute;
z-index: 1000;
width: 100%;
max-height: 300px;
overflow-y: auto;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
margin: 6px 12px;
}
.dropdown-item {
padding: 8px;
cursor: pointer;
}
.suggestion-item:hover {
background-color: #f0f0f0;
}
.body-hidden {
visibility: hidden;
opacity: 0;
}
.body-shown {
visibility: visible;
opacity: 1;
transition: opacity 0.3s ease;
}
.flex-c {
display: flex;
justify-content: center;
align-items: center;
}
.flex-r {
display: flex;
justify-content: flex-end;
align-items: center;
}
.flex-l {
display: flex;
justify-content: flex-start;
align-items: center;
}
.flex-sb {
display: flex;
justify-content: space-between;
align-items: center;
}
.full-height {
width: 100vw;
height: 768px;
background: #f1f4f6;
}
.ctr {
width: 630px;
height: 768px;
overflow: auto;
background: #FFFFFF;
border-radius: 8px;
position: relative;
}
.ctr .left {
width: 614px;
height: 768px;
padding: 20px 10px;
}
.line {
width: 100%;
height: 40px;
margin-bottom: 10px;
}
.line .item {
width: 280px;
height: 40px;
}
.title {
width: 100px;
height: 40px;
font-weight: 500;
font-size: 14px;
color: rgba(0,0,0,0.9);
}
.title .required {
color: #E6521F;
}
.item .value {
width: 180px;
height: 40px;
}
.line>.value {
width: 494px !important;
height: 40px;
padding: 0 !important;
}
.item .value .form-input {
height: 34px !important;
color: rgba(0,0,0,0.9) !important;
border: 1px solid rgba(0,0,0,0.15) !important;
border-radius: 4px !important;
}
.value>.city-picker-span {
height: 34px !important;
border: 1px solid rgba(0,0,0,0.15) !important;
border-radius: 4px !important;
padding: 0 12px !important;
}
.value>.city-picker-span > .title > span {
color: rgba(0,0,0,0.9) !important;
font-weight: 400 !important;
}
.item .value>.bootstrap-select>.btn {
height: 34px !important;
border-radius: 4px !important;
border: 1px solid rgba(0,0,0,0.15) !important;
box-sizing: border-box !important;
background-color: #FFFFFF !important;
color: rgba(0,0,0,0.9) !important;
}
.item .value>.bootstrap-select>.btn .filter-option {
display: flex;
justify-content: flex-start;
align-items: center;
}
.item .value > .zd-input--suffix {
height: 40px !important;
line-height: 40px !important;
}
.zd-cascader-wrap>.zd-input>.zd-input__inner {
height: 34px !important;
color: rgba(0,0,0,0.9) !important;
border: 1px solid rgba(0,0,0,0.15) !important;
padding: 0 12px !important;
}
.line .select-address {
width: 100px;
height: 60px;
}
.select-address .title {
width: 100px;
height: 30px;
}
.select-address .select-ctr {
width: 100px;
height: 30px;
}
.multi-line {
height: 60px;
}
.form-textarea {
width: 494px !important;
height: 60px !important;
color: rgba(0,0,0,0.9) !important;
border: 1px solid rgba(0,0,0,0.15) !important;
border-radius: 4px !important;
resize: none;
}
#area_map {
width: 64px;
height: 26px;
border-radius: 4px;
}
.bt-40 {
margin-bottom: 40px !important;
}
.radio > label, .checkbox > label {
margin-right: 40px;
}
input[type="radio"] {
transform: scale(1.2);
}
.radio > label > input, .checkbox > label > input {
margin: 4px 0 0;
}
.faupload-preview {
padding-bottom: 20px;
}
.value .input-group {
height: 40px;
}
</style>
<script>
var items = {:json_encode($items); };
var items = {:json_encode($items); };
window.addEventListener('DOMContentLoaded', function () {
setTimeout(function () {
const container = document.querySelector('.body-hidden');
if (container) {
container.classList.remove('body-hidden');
container.classList.add('body-shown');
}
}, 500);
});
</script>
<link rel="stylesheet" href="/assets/css/select.css">

1
public/assets/js/addons.js
View File

@ -1,7 +1,6 @@
define([], function () {
require([], function () {
//绑定data-toggle=addresspicker属性点击事件
$(document).on('click', "[data-toggle='addresspicker']", function () {
var that = this;
var callback = $(that).data('callback');