Skip to content

S
shop-new
提交 0e103014 authored 作者: 郑伟娜's avatar 郑伟娜
浏览文件
操作

运费模板静态页面

上级 f51f81e7
隐藏空白字符变更
内嵌 并排
正在显示 包含 255 行增加 和 4 行删除
src/views/system/freight/freight_list/index.vue
浏览文件 @ 0e103014
...@@ -66,15 +66,30 @@ ...@@ -66,15 +66,30 @@
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改freight对话框 --> <!-- 添加或修改freight对话框 -->
<el-dialog :title="title" :visible.sync="isOpen" v-if="isOpen" width="70%" class="freightTemplate-add" <!-- <el-dialog :title="title" :visible.sync="isOpen" v-if="isOpen" width="70%" class="freightTemplate-add"
:close-on-click-modal="false" center> :close-on-click-modal="false" center>
<IndexBtn :option="form" @closeIndexbtn="closeDialog"/> <IndexBtn :option="form" @closeIndexbtn="closeDialog"/>
</el-dialog> </el-dialog> -->
<el-drawer
:title="title"
:withHeader="false"
:destroy-on-close='true'
:append-to-body="false"
:modal='false'
:modal-append-to-body='false'
:visible.sync="isOpen"
direction="rtl"
style="position:absolute;height:100%;"
size="100%"
>
<template-freight :option="form" @closeIndexbtn="closeDialog"/>
</el-drawer>
</el-card> </el-card>
</div> </div>
</template> </template>
<script> <script>
import IndexBtn from './indexbtn' import TemplateFreight from './templateFreight'
import {listFreight, getFreight, delFreight, addFreight, updateFreight} from '@/api/module/freight' import {listFreight, getFreight, delFreight, addFreight, updateFreight} from '@/api/module/freight'
import {dateFormat} from '@/utils' import {dateFormat} from '@/utils'
...@@ -126,7 +141,7 @@ ...@@ -126,7 +141,7 @@
}; };
}, },
components: { components: {
IndexBtn TemplateFreight
}, },
created() { created() {
this.getList(); this.getList();
...@@ -340,4 +355,8 @@ ...@@ -340,4 +355,8 @@
overflow-y: scroll; overflow-y: scroll;
} }
} }
::v-deep .el-drawer__body{
overflow-y: auto;
}
</style> </style>
src/views/system/freight/freight_list/templateFreight.vue 0 → 100644
浏览文件 @ 0e103014
<template>
<div style="height: 100%; overflow-y: auto;">
<div style="text-align: right;">
<el-button type="primary" style="margin: 10px 20px 10px 7px;" size='mini' icon="el-icon-arrow-left" plain @click="closeDialog">返回列表</el-button>
</div>
<el-card style="margin: 0 20px;">
<h3 class="tipTitle">运费计算规则</h3>
<div class="tipContent">
<p>1、当【限制地区】有设置时，会优先验证，若用户的收货地址在【限制地区】范围内，则用户无法下单。</p>
<p>2、收货地址在【配送地区】范围内，根据【配送地区】设置的规则计算商品运费。</p>
<p>3、添加【配送地区】时，默认为全国，若单独设置【指定地区】后，会验证地区的配送规则，根据【指定地区】的设置进行运费计算</p>
<p>4、当商品的【配送地区】均不在设置范围内的时候，用户无法下单</p>
</div>
</el-card>
<el-card style="margin: 20px;">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm" style="width: 80%;">
<el-form-item label="排序" prop="sort" style="width: 400px;">
<el-input v-model="ruleForm.sort"></el-input>
</el-form-item>
<el-form-item label="模板名称" prop="name" style="width: 400px;">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="是否默认">
<el-radio-group v-model="ruleForm.is_default">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="计费方式">
<el-radio-group v-model="ruleForm.charge_type">
<el-radio :label="1">按重量</el-radio>
<el-radio :label="2">按数量</el-radio>
<el-radio :label="3">按体积</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="配送地区">
<div>
<div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
<span style="font-size: 12px; color: #85878A;">除指定地区外，其余地区运费采用：“全国默认运费”</span>
<div>
<el-button plain size="mini">删除</el-button>
<el-button type="primary" plain size="mini">添加地区</el-button>
</div>
</div>
<div style="background: #F9F9FA; padding: 20px;">
<el-table
class="multipleTable"
ref="multipleTable"
:data="deliveryTableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="配送区域"
>
<template slot-scope="scope">
<span>【默认】</span>
<span>【指定】</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="首件（个）"
width="150"
>
<template slot-scope="scope">
<el-input v-model="scope.row.f" class="inputWidth"></el-input>
</template>
</el-table-column>
<el-table-column
prop="fp"
label="运费（元）"
width="150"
>
<template slot-scope="scope">
<el-input v-model="scope.row.fp" class="inputWidth"></el-input>
</template>
</el-table-column>
<el-table-column
prop="n"
label="续件（个）"
width="150"
>
<template slot-scope="scope">
<el-input v-model="scope.row.n" class="inputWidth"></el-input>
</template>
</el-table-column>
<el-table-column
prop="np"
label="续费（元）"
width="150"
>
<template slot-scope="scope">
<el-input v-model="scope.row.np" class="inputWidth"></el-input>
</template>
</el-table-column>
<el-table-column
label="操作"
width="120"
>
<template slot-scope="scope">
<el-button type="text" size="small">删除</el-button>
<el-button type="text" size="small">修改地区</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</el-form-item>
<el-form-item label="限制地区">
<div>
<div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
<span style="font-size: 12px; color: #85878A;">收货地址在限制下单区域内的用户将无法完成下单</span>
<div>
<el-button type="primary" plain size="mini">添加地区</el-button>
</div>
</div>
<div style="background: #F9F9FA; padding: 20px;">
<el-table
class="multipleTable"
:data="noDeliveryTableData"
tooltip-effect="dark"
style="width: 100%"
>
<!-- 样式占位 -->
<el-table-column
label=""
width="10"
>
</el-table-column>
<el-table-column
label="限制配送地区"
>
<template slot-scope="scope">
安徽省、重庆市、广东省、安徽
</template>
</el-table-column>
<!-- 样式占位 -->
<el-table-column
label=""
width="200"
>
</el-table-column>
<el-table-column
label="操作"
width="120"
>
<template slot-scope="scope">
<el-button type="text" size="small">删除</el-button>
<el-button type="text" size="small">修改地区</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</el-form-item>
<el-form-item label="启用状态">
<el-radio-group v-model="ruleForm.publish">
<el-radio :label="1">是</el-radio>
<el-radio :label="0">否</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
<div style="text-align: center;">
<el-button size="mini">取消</el-button>
<el-button type="primary" size="mini">提交</el-button>
</div>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
ruleForm: {
sort: 0,
name: '',
is_default: 0,
charge_type: 0,
publish: 0
},
// 表单校验
rules: {
sort: [
{required: true, message: "排序不能为空", trigger: "blur"}
],
name: [
{required: true, message: "模板名称不能为空", trigger: "blur"}
],
},
deliveryTableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
noDeliveryTableData: [],
multipleSelection: []
}
},
methods: {
closeDialog() {
this.$emit('closeDialog', false)
},
// 多选数据
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}
</script>
<style scoped>
.tipTitle {
font-size: 16px;
margin-top: 10px;
}
.tipContent {
font-size: 12px;
color: #515361;
}
::v-deep .multipleTable .el-table__header-wrapper th {
background: #fff;
}
.inputWidth ::v-deep .el-input__inner {
width: 100px;
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论