281 行
11 KiB
HTML
可执行文件
281 行
11 KiB
HTML
可执行文件
<!--[1.8.50]-->
|
||
<title>同城配送费</title>
|
||
<style>
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.header span {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.el-icon-question {
|
||
padding-top: 2px;
|
||
color: #409EFF;
|
||
}
|
||
|
||
.filter {
|
||
display: flex;
|
||
margin-top: 20px;
|
||
align-items: center;
|
||
}
|
||
|
||
.filter > .el-input {
|
||
width: 130px;
|
||
margin: 0 10px;
|
||
}
|
||
|
||
.filter .el-select {
|
||
width: 200px;
|
||
margin: 0 20px 0 10px;
|
||
}
|
||
|
||
.el-table {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.el-table .cell {
|
||
text-align: center;
|
||
}
|
||
|
||
.el-pagination {
|
||
text-align: right;
|
||
margin-top: 15px;
|
||
}
|
||
</style>
|
||
|
||
<div id="distribution" v-cloak>
|
||
<div class="header">
|
||
<div class="page-title">
|
||
<span>配送费设置</span>
|
||
<el-tooltip effect="dark" placement="right-end">
|
||
<template slot="content">
|
||
<p>1.当配送距离出现交集时，按费用低的计算</p>
|
||
<p>例：有两条配送费方案：1-10km 3元、10-20km 5元 ；那么10km的时候，配送费就是3元</p>
|
||
<p>2.当未设置配送区间费用时，配送费为0，即不收取配送费</p>
|
||
<p>例：门店配送范围为10公里，未设置含有6公里时的配送费，则当用户与门店距离为6公里时不收取配送费</p>
|
||
</template>
|
||
<i class="el-icon-question"></i>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
<div class="filter">
|
||
<span>配送范围：</span>
|
||
<el-input v-model="start" placeholder="请输入起始值" size="small" clearable></el-input>
|
||
<span> - </span>
|
||
<el-input v-model="end" placeholder="请输入结束值" size="small" clearable></el-input>
|
||
<el-select v-model="status" placeholder="请选择配送费状态" clearable size="small" @change="reGetData"
|
||
@clear="reGetData">
|
||
<el-option label="开启" value="1"></el-option>
|
||
<el-option label="关闭" value="2"></el-option>
|
||
</el-select>
|
||
<el-button type="primary" icon="el-icon-search" size="small" @click="reGetData">搜索</el-button>
|
||
<el-button type="primary" v-if="storeAuth.store_xcx_distribution_fee==1" size="small" plain
|
||
@click="dialogVisible = true">新增配送区间
|
||
</el-button>
|
||
</div>
|
||
<el-table :data="tableData" border style="width: 100%" :header-cell-style="{background:'#F5F7FA',color:'#606266'}" v-loading="loading">
|
||
<el-table-column type="index" label="序号" width="100">
|
||
</el-table-column>
|
||
<el-table-column prop="start" label="配送距离起始值(km)">
|
||
</el-table-column>
|
||
<el-table-column prop="end" label="配送距离结束值(km)">
|
||
</el-table-column>
|
||
<el-table-column prop="fee" label="价格(元)">
|
||
</el-table-column>
|
||
<el-table-column>
|
||
<template slot="header" slot-scope="scope">
|
||
<span>状态</span>
|
||
<el-popover placement="top" trigger="hover" content="被开启的距离范围不可交错">
|
||
<i class="el-icon-question" slot="reference"></i>
|
||
</el-popover>
|
||
</template>
|
||
<template slot-scope="scope">
|
||
<el-switch v-model="scope.row.status" :disabled="storeAuth.store_xcx_distribution_fee==1?false:true"
|
||
active-value="1" inactive-value="2"
|
||
@change="statusChange(scope.$index, $event)"></el-switch>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" v-if="storeAuth.store_xcx_distribution_fee==1">
|
||
<template slot-scope="scope">
|
||
<el-button type="text" size="mini" @click="del(scope.row.id)">删除</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination background layout="prev, pager, next, total" :total="total" :page-size="limit" :current-page="page"
|
||
@current-change="currentChange">
|
||
</el-pagination>
|
||
<el-dialog title="新增配送区域" :append-to-body="true" :visible.sync="dialogVisible" width="600px"
|
||
:before-close="dialogClose">
|
||
<el-form :model="form" :rules="rules" ref="form" label-width="180px">
|
||
<el-form-item label="配送距离起始值(km)：" prop="start">
|
||
<el-input v-model="form.start" placeholder="请输入配送距离起始值" clearable></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="配送距离结束值(km)：" prop="end">
|
||
<el-input v-model="form.end" placeholder="请输入配送距离结束值" clearable></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="价格(元)：" prop="fee">
|
||
<el-input v-model="form.fee" placeholder="请输入价格" clearable></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取消</el-button>
|
||
<el-button type="primary" @click="confirm">确定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
new Vue({
|
||
el: "#distribution",
|
||
data: {
|
||
start: '', //距离起始值（筛选）
|
||
end: '', //距离结束值（筛选）
|
||
status: '', //状态（筛选）
|
||
tableData: [], //表格数据
|
||
page: 1,
|
||
limit: 9,
|
||
total: 0,
|
||
form: {
|
||
start: '',
|
||
end: '',
|
||
fee: ''
|
||
},
|
||
rules: {
|
||
start: [
|
||
{required: true, message: '请输入配送距离起始值', trigger: 'blur'},
|
||
{
|
||
type: 'number', message: '起始值只能输入数字', trigger: 'blur', transform(value) {
|
||
return Number(value)
|
||
}
|
||
}
|
||
],
|
||
end: [
|
||
{required: true, message: '请输入配送距离结束值', trigger: 'blur'},
|
||
{
|
||
type: 'number', message: '结束值只能输入数字', trigger: 'blur', transform(value) {
|
||
return Number(value)
|
||
}
|
||
}
|
||
],
|
||
fee: [
|
||
{required: true, message: '请输入价格', trigger: 'blur'},
|
||
{
|
||
type: 'number', message: '价格只能为数字', trigger: 'blur', transform(value) {
|
||
return Number(value)
|
||
}
|
||
}
|
||
]
|
||
},
|
||
dialogVisible: false,
|
||
loading: false,
|
||
},
|
||
methods: {
|
||
//删除
|
||
del(id) {
|
||
this.$confirm('确认删除此配送区间吗？', '提示', {
|
||
type: 'warning'
|
||
}).then(() => {
|
||
this.sendRequest('Retail/Xcx/delFee', {
|
||
data: {
|
||
id: id
|
||
},
|
||
success: (response) => {
|
||
if (response.status == 1) {
|
||
if (this.tableData.length == 1 && this.page > 1) {
|
||
this.page -= 1
|
||
}
|
||
this.getData()
|
||
this.$message.success(response.msg)
|
||
} else {
|
||
this.$message.error(response.msg)
|
||
}
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
});
|
||
},
|
||
//开关变化
|
||
statusChange(index, status) {
|
||
this.sendRequest('Retail/Xcx/distributionStatus', {
|
||
data: {
|
||
id: this.tableData[index].id,
|
||
status: status
|
||
},
|
||
success: (response) => {
|
||
if (response.status == 1) {
|
||
this.$message.success(response.message)
|
||
} else {
|
||
this.tableData[index].status = this.tableData[index].status == 1 ? 2 : 1
|
||
this.$message.error(response.message)
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//重新获取列表数据
|
||
reGetData() {
|
||
this.page = 1
|
||
this.getData()
|
||
},
|
||
//确认提交
|
||
confirm() {
|
||
this.$refs.form.validate((valid) => {
|
||
if (valid) {
|
||
this.sendRequest('Retail/Xcx/addFee', {
|
||
data: {
|
||
start: this.form.start,
|
||
end: this.form.end,
|
||
fee: this.form.fee
|
||
},
|
||
success: (response) => {
|
||
if (response.status == 1) {
|
||
this.$message.success(response.msg)
|
||
this.page = 1
|
||
this.getData()
|
||
} else {
|
||
this.$message.error(response.msg)
|
||
}
|
||
}
|
||
})
|
||
this.dialogVisible = false
|
||
}
|
||
})
|
||
},
|
||
dialogClose() {
|
||
this.$refs.form.resetFields()
|
||
},
|
||
//获取列表数据
|
||
getData() {
|
||
this.loading = true;
|
||
this.sendRequest('Retail/Xcx/getDistribution', {
|
||
data: {
|
||
start: this.start,
|
||
end: this.end,
|
||
status: this.status,
|
||
page: this.page,
|
||
limit: this.limit
|
||
},
|
||
success: (response) => {
|
||
if (response.status == 1) {
|
||
this.tableData = response.data.data
|
||
this.total = response.data.total
|
||
} else {
|
||
this.$message.error(response.message)
|
||
}
|
||
this.loading = false;
|
||
}
|
||
})
|
||
},
|
||
currentChange(page) {
|
||
this.page = page
|
||
this.getData()
|
||
}
|
||
},
|
||
created() {
|
||
this.getData()
|
||
}
|
||
})
|
||
</script> |