164 行
5.5 KiB
HTML
164 行
5.5 KiB
HTML
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
|
|
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/common.css">
|
|
<style>
|
|
#dispatchDetail {
|
|
background: #fff;
|
|
border-radius: 10px 10px 0px 0px;
|
|
color: #444;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.demo-dispatchForm {
|
|
height: calc(100vh - 110px);
|
|
overflow-y: auto;
|
|
padding-right: 25px;
|
|
}
|
|
|
|
.demo-dispatchForm::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
.demo-dispatchForm::-webkit-scrollbar-thumb {
|
|
width: 6px;
|
|
background: #e6e6e6;
|
|
height: 20px;
|
|
border-radius: 3px;
|
|
}
|
|
.pagination,
|
|
.el-pagination {
|
|
margin: 0;
|
|
}
|
|
|
|
.el-pagination__sizes {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
.params-detail-table {
|
|
border: 1px solid #E6E6E6;
|
|
border-bottom: none;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.params-header-item {
|
|
height: 40px;
|
|
}
|
|
|
|
.params-header-item,
|
|
.params-detail-item {
|
|
border-bottom: 1px solid #E6E6E6;
|
|
}
|
|
|
|
.params-detail-item>div,
|
|
.params-header-item>div {
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
.params-detail-name {
|
|
width: 120px;
|
|
}
|
|
|
|
.params-detail-msg {
|
|
width: 378px;
|
|
}
|
|
|
|
.params-detail-del,
|
|
.params-detail-move {
|
|
width: 50px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.params-detail-del-icon {
|
|
color: #ff5959;
|
|
}
|
|
|
|
.add-params {
|
|
width: 98px;
|
|
height: 32px;
|
|
background: #7536D0;
|
|
border-radius: 4px;
|
|
justify-content: center;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.add-params i {
|
|
margin-right: 6px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
[v-cloak] {
|
|
display: none
|
|
}
|
|
</style>
|
|
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
|
|
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
|
|
<script src="__CDN__/assets/addons/shopro/libs/Sortable.min.js"></script>
|
|
<script src="__CDN__/assets/addons/shopro/libs/vuedraggable.js"></script>
|
|
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
|
|
<div id="dispatchDetail" v-cloak>
|
|
<el-form :model="dispatchForm" ref="dispatchForm" :rules="rules" label-width="100px" class="demo-dispatchForm">
|
|
<el-form-item label="模板名称：" prop="name">
|
|
<el-input v-model="dispatchForm.name" placeholder="请输入模板名称"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="发货类型：" prop="type">
|
|
<el-radio-group v-model="dispatchForm.type" @change="radioChange">
|
|
<el-radio label="text">固定内容</el-radio>
|
|
<!-- <el-radio label="card">卡密</el-radio> -->
|
|
<el-radio label="params">自定义内容</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="发货内容：" prop="timecontent" v-if="dispatchForm.type=='text'">
|
|
<el-input v-model="dispatchForm.timecontent" placeholder="请输入自动发货内容"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="发货内容：" prop="timecontent" v-if="dispatchForm.type=='params'">
|
|
<div>
|
|
<div class="params-detail-table">
|
|
<div class="display-flex params-header-item">
|
|
<div class="params-detail-name">
|
|
参数名称
|
|
</div>
|
|
<div class="params-detail-msg">
|
|
内容
|
|
</div>
|
|
<div class="params-detail-del">
|
|
删除
|
|
</div>
|
|
<div class="params-detail-move">
|
|
移动
|
|
</div>
|
|
</div>
|
|
<draggable :list="dispatchForm.timecontent" v-bind="$attrs" :options="{animation:500}">
|
|
<div class="display-flex params-detail-item" v-for="(it,index) in dispatchForm.timecontent">
|
|
<div class="params-detail-name">
|
|
<el-input type="input" v-model="it.title" style="width:90px">
|
|
</el-input>
|
|
</div>
|
|
<div class="params-detail-msg">
|
|
<el-input type="input" v-model="it.content" style="width:348px">
|
|
</el-input>
|
|
</div>
|
|
<div class="params-detail-del">
|
|
<div class="params-detail-del-icon" @click="delParams(index)">
|
|
删除
|
|
</div>
|
|
</div>
|
|
<div class="params-detail-move">
|
|
<img src="/assets/addons/shopro/img/goods/move.png">
|
|
</div>
|
|
</div>
|
|
</draggable>
|
|
</div>
|
|
<div class="add-params display-flex" @click="addParams">
|
|
<i class="el-icon-plus"></i>
|
|
<span>添加参数</span>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="dialog-footer display-flex">
|
|
<div @click="dispatchSub" class="dialog-cancel-btn display-flex-c cursor-pointer">取消</div>
|
|
<div @click="dispatchSub('yes','dispatchForm')" class="dialog-define-btn display-flex-c cursor-pointer">确定</div>
|
|
</div>
|
|
</div> |