179 lines
8.2 KiB
HTML
179 lines
8.2 KiB
HTML
|
||
<div class="full-height">
|
||
<div class="overlay"></div> <!-- 遮罩层 -->
|
||
<div class="content">
|
||
<!-- 表单区域（占2/3） -->
|
||
<div class="form-area">
|
||
<div class="w-75">
|
||
<div class="card-body">
|
||
<h5 class="card-title">录入订单</h5>
|
||
<form id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
|
||
|
||
<div class="form-group">
|
||
<label class="control-label col-xs-12 col-sm-3">{:__('Customer')}:</label>
|
||
<div class="col-xs-12 col-sm-8">
|
||
<input id="c-customer" class="form-control" name="row[customer]" type="text">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<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" class="form-control" name="row[tel]" type="number">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="control-label col-xs-12 col-sm-3">{:__('Area_id')}:</label>
|
||
<div class='col-xs-12 col-sm-8'>
|
||
<input id="c-area_id" class="form-control" type="text" value="" />
|
||
<!-- 选项下拉框 -->
|
||
<ul id="address-list" class="dropdown-menu" style="display: none;"></ul>
|
||
|
||
<!-- 存储选择的 area_code -->
|
||
<input type="hidden" id="selected-area-code" name="row[area_id]">
|
||
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="control-label col-xs-12 col-sm-3">{:__('Address')}:</label>
|
||
<div class="col-xs-12 col-sm-8">
|
||
<input id="c-address" data-rule="required" class="form-control" name="row[address]" type="text" value="">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<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 data-subtext="{$item['ptitle']}" value="{$item['id']}">{$item['title']}</option>
|
||
{/foreach}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="form-group">
|
||
<label class="control-label col-xs-12 col-sm-3">{:__('Item_title')}:</label>
|
||
<div class="col-xs-12 col-sm-8">
|
||
<input id="c-service_title" data-rule="required" class="form-control" name="row[item_title]" type="text" value="">
|
||
|
||
<!-- 选项下拉框 -->
|
||
<ul id="service-list" class="dropdown-menu" style="display: none;"></ul>
|
||
|
||
<!-- 存储选择的 area_code -->
|
||
<input type="hidden" id="selected-service_id" name="row[item_id]">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<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="4" style="width: 100%;resize: vertical" class="form-control" name="row[detail]"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<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="4" style="width: 100%;resize: vertical" class="form-control" name="row[remark]" ></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<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 class="form-group 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>
|
||
<button type="submit" data-id="submit_save" class="btn btn-primary btn-embossed disabled">录入并保留基本信息</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 功能区（占1/3） -->
|
||
<div class="function-area ">
|
||
<h5 class="text-center">快速输入</h5>
|
||
<div class="form-floating">
|
||
<textarea rows="8" style="width: 100%;resize: vertical" class="form-control" placeholder="复制内容，快速输入" id="floatingTextarea"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
|
||
</script>
|
||
<style>
|
||
.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;
|
||
}
|
||
</style>
|
||
|
||
|