650 lines
18 KiB
Vue
650 lines
18 KiB
Vue
<template>
|
||
<div class="center_">
|
||
<div class="bai-box">
|
||
<div class="d-a">
|
||
<div class="top-title">
|
||
<div class="d-s">
|
||
<div class="bigNum">1</div>
|
||
<div class="smtitle">创建分时优惠</div>
|
||
</div>
|
||
<div class="hui-text">
|
||
不同的商品可以分别创建多个营销价格，分别设置多个
|
||
不同的价格优惠
|
||
</div>
|
||
</div>
|
||
<div class="gang_"></div>
|
||
<div class="top-title">
|
||
<div class="d-s">
|
||
<div class="bigNum">2</div>
|
||
<div class="smtitle">添加活动规则</div>
|
||
</div>
|
||
<div class="hui-text">
|
||
同一个分时优惠可以根据支付方式、会员等级以及活动
|
||
时间添加多个不同的活动规则;同一个商品，同一时间段
|
||
内，同一个会员，同一个支付方式不能添加多个活动规则
|
||
</div>
|
||
</div>
|
||
<div class="gang_"></div>
|
||
<div class="top-title">
|
||
<div class="d-s">
|
||
<div class="bigNum">3</div>
|
||
<div class="smtitle">开始使用分时优惠</div>
|
||
</div>
|
||
<div class="hui-text">
|
||
分时优惠和活动规则创建后，商城会根据后台设置的
|
||
使用时间、支付方式、会员等级来显示不同的会员价
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- -->
|
||
<div class="d-b" style="margin-bottom: 15px">
|
||
<div class="d-s">
|
||
<div class="gang"></div>
|
||
<div class="g-title">分时优惠</div>
|
||
</div>
|
||
<el-button type="primary" @click="Timeshare()">新增分时优惠</el-button>
|
||
</div>
|
||
<el-table
|
||
:data="tableData"
|
||
border
|
||
style="width: 100%">
|
||
<el-table-column
|
||
type="index"
|
||
align="center"
|
||
label="序号"
|
||
width="50">
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="title"
|
||
label="分时优惠名称"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="countCom"
|
||
label="适用商品数量"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="createName"
|
||
label="创建人"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="createTime"
|
||
label="创建时间">
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
@click="modifySeparateList(scope.row.id)"
|
||
>修改
|
||
</el-button>
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
@click="deleteOil(scope.row.id)"
|
||
>删除
|
||
</el-button>
|
||
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<!-- -->
|
||
<div class="d-b" style="margin-bottom: 15px;margin-top: 20px">
|
||
<div class="d-s">
|
||
<div class="gang"></div>
|
||
<div class="g-title">活动规则</div>
|
||
</div>
|
||
<el-button type="primary" @click="showDialogVisible =! showDialogVisible">新增活动规则</el-button>
|
||
</div>
|
||
<el-table
|
||
:data="tableData"
|
||
border
|
||
style="width: 100%">
|
||
<el-table-column
|
||
type="index"
|
||
align="center"
|
||
label="序号"
|
||
width="50">
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="name"
|
||
label="分时优惠名称"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="name"
|
||
label="活动规则名称"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="name"
|
||
label="会员等级"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="name"
|
||
label="支付方式"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="name"
|
||
label="会员标签"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="date"
|
||
prop="address"
|
||
label="生效时间">
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="date"
|
||
prop="address"
|
||
label="适用时间段">
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="name"
|
||
label="每人每天参与限制"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="name"
|
||
label="每人累计参与限制"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="name"
|
||
label="状态"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="name"
|
||
label="创建人"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="name"
|
||
label="创建时间"
|
||
>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
@click="showDialogVisible =! showDialogVisible"
|
||
>修改
|
||
</el-button>
|
||
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
>删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<el-dialog
|
||
title="新增/修改分时优惠"
|
||
:visible.sync="centerDialogVisible"
|
||
width="48%"
|
||
center>
|
||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
|
||
<el-form-item label="分时优惠名称" prop="title">
|
||
<el-input v-model="ruleForm.title" style="width: 217px"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="类型" prop="category">
|
||
<el-select v-model="ruleForm.category" placeholder="请选择类型">
|
||
<el-option label="固定价格" value="1"></el-option>
|
||
<el-option label="折扣" value="2"></el-option>
|
||
<el-option label="减价" value="3"></el-option>
|
||
</el-select>
|
||
<div>当手动/自动调整商品价格后，若调整后的售价低于规则设置时的会员
|
||
价，则该规则不生效。
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="折扣" prop="disValue" v-if="ruleForm.category == '2' ">
|
||
<el-input v-model="ruleForm.disValue" style="width: 217px"></el-input>
|
||
<div>折扣请填写0~1的数字。例如输入0.8，表示打8折</div>
|
||
</el-form-item>
|
||
<el-form-item label="减价金额" prop="disValue" v-if="ruleForm.category == '3' ">
|
||
<el-input v-model="ruleForm.disValue" style="width: 217px"></el-input>
|
||
<div>减价金额不能小于 0.01</div>
|
||
</el-form-item>
|
||
|
||
<el-table
|
||
:data="ruleForm.oilList"
|
||
border
|
||
style="width: 100%">
|
||
|
||
<el-table-column
|
||
align="center"
|
||
prop="oilNames"
|
||
label="油品油号"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span>{{scope.row.oilType}}{{scope.row.oilName}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="oilPrice"
|
||
label="当前挂牌价（元/L)"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="price"
|
||
label="优惠价（元/L）"
|
||
>
|
||
<template slot-scope="scope">
|
||
<el-input-number v-model="scope.row.price" controls-position="right" :min="0.1"
|
||
:max="999"></el-input-number>
|
||
<!-- scope.row-->
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
||
<template slot-scope="scope">
|
||
|
||
<el-button
|
||
v-if="scope.row.type == '0'"
|
||
size="mini"
|
||
type="text"
|
||
@click="deleteType(scope.row)"
|
||
>删除
|
||
</el-button>
|
||
<el-button
|
||
v-if="scope.row.type == '1'"
|
||
size="mini"
|
||
type="text"
|
||
@click="addType(scope.row)"
|
||
>添加
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="centerDialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="addSeparateList()">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
<el-dialog
|
||
title="新增/修改活动规则"
|
||
:visible.sync="showDialogVisible"
|
||
width="30%"
|
||
center>
|
||
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
|
||
<el-form-item label="活动规则名称" prop="name">
|
||
<el-input v-model="ruleForm.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="分时优惠名称" prop="region">
|
||
<el-select v-model="ruleForm.region" placeholder="请选择优惠名称">
|
||
<el-option label="区域一" value="shanghai"></el-option>
|
||
<el-option label="区域二" value="beijing"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
|
||
<el-form-item label="适用会员等级" prop="region">
|
||
<el-select v-model="ruleForm.region" placeholder="请选择会员等级">
|
||
<el-option label="区域一" value="shanghai"></el-option>
|
||
<el-option label="区域二" value="beijing"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
|
||
<el-form-item label=" 会员标签" prop="region">
|
||
<el-select v-model="ruleForm.region" placeholder="请选择会员标签">
|
||
<el-option label="区域一" value="shanghai"></el-option>
|
||
<el-option label="区域二" value="beijing"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="可使用支付方式" prop="type">
|
||
<el-checkbox-group v-model="ruleForm.type">
|
||
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
|
||
<el-checkbox label="地推活动" name="type"></el-checkbox>
|
||
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
|
||
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<el-form-item label="生效时间" required>
|
||
|
||
<el-form-item prop="date1">
|
||
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"
|
||
style="width: 100%;"></el-date-picker>
|
||
</el-form-item>
|
||
|
||
|
||
</el-form-item>
|
||
|
||
<el-form-item label="适用实收金额" required>
|
||
<el-col :span="11">
|
||
<el-form-item prop="name">
|
||
<el-input v-model="ruleForm.name"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div style="margin-left: 5px">到</div>
|
||
</el-col>
|
||
<el-col :span="11">
|
||
<el-form-item prop="name">
|
||
<el-input v-model="ruleForm.name"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-form-item>
|
||
<el-form-item label="适用加油升数" required>
|
||
<el-col :span="11">
|
||
<el-form-item prop="name">
|
||
<el-input v-model="ruleForm.name"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div style="margin-left: 5px">到</div>
|
||
</el-col>
|
||
<el-col :span="11">
|
||
<el-form-item prop="name">
|
||
<el-input v-model="ruleForm.name"></el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="最大优惠金额" prop="name">
|
||
<el-input v-model="ruleForm.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="每人每日参与限制" label-width="140px" prop="name">
|
||
<el-input v-model="ruleForm.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="每人累计参与限制" label-width="140px" prop="name">
|
||
<el-input v-model="ruleForm.name"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="适用时间段" prop="name">
|
||
<div class="d-s" style="margin-bottom: 5px">
|
||
每周：
|
||
<el-select v-model="ruleForm.region" placeholder="请选择适用时间">
|
||
<el-option label="周一" value="shanghai"></el-option>
|
||
<el-option label="周二" value="beijing"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="d-s" style="margin-bottom: 5px">
|
||
每月：
|
||
<el-select v-model="ruleForm.region" placeholder="请选择适用时间">
|
||
<el-option label="周一" value="shanghai"></el-option>
|
||
<el-option label="周二" value="beijing"></el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="d-s">
|
||
时间段：
|
||
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"></el-date-picker>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<!-- -->
|
||
|
||
<el-form-item>
|
||
<el-button type="primary">立即创建</el-button>
|
||
<el-button>重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {getoilList, getRequestList, postaddList, getID, updateActivePrice, deleteList} from "./api/separate";
|
||
import {oilNumberList1} from "@/api/order/oilnumgun";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 分时
|
||
queryParams: {
|
||
pageNum: 1,
|
||
pageSize: 5,
|
||
activeType: 1
|
||
},
|
||
ruleForm: {
|
||
activeType: 1,
|
||
title: '',
|
||
name: '',
|
||
region: '',
|
||
category: '',
|
||
disValue: '',
|
||
type: [],
|
||
oilList: []
|
||
},
|
||
rules: {
|
||
title: [
|
||
{required: true, message: '请输入名称', trigger: 'blur'},
|
||
|
||
],
|
||
category: [
|
||
{required: true, message: '请选择类型', trigger: 'change'}
|
||
],
|
||
},
|
||
centerDialogVisible: false,
|
||
showDialogVisible: false,
|
||
// 分时列表
|
||
tableData: [],
|
||
// 油品列表
|
||
oilList: [],
|
||
// 活动规则列表
|
||
ruleList:[],
|
||
}
|
||
},
|
||
created() {
|
||
this.getList()
|
||
this.getRuleList()
|
||
},
|
||
methods: {
|
||
// 查询活动规则列表
|
||
getRuleList(){
|
||
|
||
},
|
||
// 删除
|
||
deleteOil(id){
|
||
deleteList(id).then(res=>{
|
||
console.log(res)
|
||
if(res.code == 200){
|
||
this.$message({
|
||
message: '删除成功',
|
||
type: 'success'
|
||
})
|
||
this.getList()
|
||
}
|
||
|
||
})
|
||
},
|
||
// 分时优惠制空
|
||
Blank(){
|
||
this.ruleForm ={
|
||
activeType: 1,
|
||
title: '',
|
||
name: '',
|
||
region: '',
|
||
category: '',
|
||
disValue: '',
|
||
type: [],
|
||
oilList: []
|
||
}
|
||
},
|
||
// 修改
|
||
modifySeparateList(id) {
|
||
getID(id).then(res => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
this.ruleForm = res.data
|
||
this.centerDialogVisible = true
|
||
}
|
||
})
|
||
},
|
||
// 新增/修改
|
||
addSeparateList() {
|
||
|
||
this.centerDialogVisible = false
|
||
if(this.ruleForm.id){
|
||
updateActivePrice(this.ruleForm).then(res => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
this.$message({
|
||
message: '添加成功',
|
||
type: 'success'
|
||
})
|
||
this.getList()
|
||
}
|
||
})
|
||
}else{
|
||
postaddList(this.ruleForm).then(res => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
this.$message({
|
||
message: '添加成功',
|
||
type: 'success'
|
||
})
|
||
this.getList()
|
||
}
|
||
})
|
||
}
|
||
|
||
|
||
},
|
||
//列表查询
|
||
getList() {
|
||
getRequestList(this.queryParams).then(res => {
|
||
console.log(res)
|
||
this.tableData = res.data.records
|
||
})
|
||
},
|
||
// 新增分时
|
||
Timeshare() {
|
||
this.Blank()
|
||
oilNumberList1().then(res => {
|
||
this.ruleForm.oilList = res.data.records
|
||
for (let i = 0; i < this.ruleForm.oilList.length; i++) {
|
||
this.ruleForm.oilList[i].type = 0
|
||
}
|
||
})
|
||
this.centerDialogVisible = !this.centerDialogVisible
|
||
},
|
||
deleteType(data) {
|
||
|
||
data.type = '1'
|
||
this.$forceUpdate()
|
||
console.log('1', this.ruleForm.oilList)
|
||
let tempList = JSON.stringify(this.ruleForm.oilList)
|
||
this.ruleForm.oilList = []
|
||
this.ruleForm.oilList = JSON.parse(tempList)
|
||
},
|
||
addType(data) {
|
||
data.type = '0'
|
||
this.$forceUpdate()
|
||
console.log('0', this.ruleForm.oilList)
|
||
let tempList = JSON.stringify(this.ruleForm.oilList)
|
||
this.ruleForm.oilList = []
|
||
this.ruleForm.oilList = JSON.parse(tempList)
|
||
}
|
||
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.center_ {
|
||
width: 100%;
|
||
border-radius: 8px;
|
||
background: #f9f9f9;
|
||
box-sizing: border-box;
|
||
padding: 20px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.bai-box {
|
||
border-radius: 10px;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
}
|
||
|
||
.d-b {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.d-a {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.d-s {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.top-title {
|
||
|
||
}
|
||
|
||
.hui-text {
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
color: #999999;
|
||
line-height: 30px;
|
||
width: 380px;
|
||
height: 120px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.bigNum {
|
||
font-size: 60px;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
margin-right: 15px;
|
||
}
|
||
|
||
.smtitle {
|
||
font-size: 28px;
|
||
color: #333333;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.gang_ {
|
||
width: 1px;
|
||
height: 75px;
|
||
border: 1px solid #FF9655;
|
||
}
|
||
|
||
.gang {
|
||
width: 2px;
|
||
height: 13px;
|
||
background: #FF9655;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.g-title {
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
</style>
|