1036 lines
32 KiB
Vue
1036 lines
32 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="addActiveRule">新增活动规则</el-button>
|
||
</div>
|
||
<el-table
|
||
:data="ruleList"
|
||
border
|
||
style="width: 100%">
|
||
<el-table-column
|
||
type="index"
|
||
align="center"
|
||
label="序号"
|
||
width="50">
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="activeTitle"
|
||
label="限时优惠名称"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="ruleName"
|
||
label="活动规则名称"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="levelText"
|
||
label="会员等级"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="paymentType"
|
||
label="支付方式"
|
||
>
|
||
<template slot-scope="scope">
|
||
{{ getPaymentTypeStr(scope.row.paymentType) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="labelText"
|
||
label="会员标签"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="date"
|
||
prop="activeStartTime"
|
||
label="生效时间">
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="date"
|
||
prop="timeSlots"
|
||
label="适用时间段">
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="dayLimitNum"
|
||
label="每人每天参与限制"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="limitNum"
|
||
label="每人累计参与限制"
|
||
>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
prop="name"
|
||
label="状态"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.status==0" style="color:#FF9655;">未生效</span>
|
||
<span v-if="scope.row.status==1" style="color:#fe8c4a;">使用中</span>
|
||
<span v-if="scope.row.status==2" style="color:#F44522;">已失效</span>
|
||
</template>
|
||
</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="editRule(scope.row)"
|
||
>修改
|
||
</el-button>
|
||
|
||
<el-button
|
||
size="mini"
|
||
type="text"
|
||
@click="deleteRule(scope.row)"
|
||
>删除
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<pagination
|
||
v-show="total1>0"
|
||
:total="total1"
|
||
:page.sync="queryParams1.page"
|
||
:limit.sync="queryParams1.pageSize"
|
||
@pagination="getRuleList"
|
||
/>
|
||
</div>
|
||
<el-dialog
|
||
:title="titles"
|
||
:close-on-click-modal="false"
|
||
:visible.sync="centerDialogVisible"
|
||
width="40%">
|
||
<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: 100%"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="类型" prop="category">
|
||
<el-select style="width: 100%" 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="折扣" required prop="disValue" v-if="ruleForm.category == '2' ">
|
||
<el-input v-model="ruleForm.disValue" style="width: 100%"></el-input>
|
||
<div>折扣请填写0~1的数字。例如输入0.8，表示打8折</div>
|
||
</el-form-item>
|
||
<el-form-item label="减价金额" required prop="disValue" v-if="ruleForm.category == '3' ">
|
||
<el-input v-model="ruleForm.disValue" style="width: 100%"></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-form-item
|
||
label-width="0px"
|
||
:prop="'oilList.' + scope.$index + '.price'"
|
||
:rules="rules['oilList.*.price']"
|
||
class="custom-form-itemMy100989"
|
||
>
|
||
<el-input
|
||
style="width: 100%"
|
||
v-model="scope.row.price"
|
||
type="number"
|
||
controls-position="right"
|
||
></el-input>
|
||
</el-form-item>
|
||
</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="titles1"
|
||
:close-on-click-modal="false"
|
||
:visible.sync="showDialogVisible"
|
||
width="60%">
|
||
<el-form :model="ruleForm1" :rules="rules" ref="ruleForm1" label-width="120px" class="demo-ruleForm">
|
||
<div style="display: flex;width: 100%;margin: 20px 0;">
|
||
<div style="width: 50%">
|
||
<el-form-item label="限时优惠名称" prop="activeId">
|
||
<el-select v-model="ruleForm1.activeId" placeholder="请选择优惠名称" style="width: 100%">
|
||
<el-option
|
||
v-for="(item,index) in timeShareList"
|
||
:key="index"
|
||
:label="item.title"
|
||
:value="item.id"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="可使用支付方式" prop="paymentType">
|
||
<el-checkbox-group v-model="ruleForm1.paymentType">
|
||
<el-checkbox
|
||
v-for="dict in dict.type.payment_type"
|
||
v-if="dict.value!='APPLET_CODE'"
|
||
:key="dict.value"
|
||
:label="dict.value"
|
||
:value="dict.value">{{ dict.label }}
|
||
</el-checkbox>
|
||
</el-checkbox-group>
|
||
</el-form-item>
|
||
<el-form-item label=" 会员标签">
|
||
<el-select v-model="ruleForm1.babelIds" multiple placeholder="请选择会员标签" style="width: 100%">
|
||
<el-option
|
||
v-for="item in userLabelList"
|
||
:key="item.id+''"
|
||
:label="item.labelName"
|
||
:value="item.id+''"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="消费条件" required prop="consumeType">
|
||
<div v-if="ruleForm1.consumeType!=1">
|
||
<el-col :span="7">
|
||
<el-select v-model="ruleForm1.consumeType" style="width: 90%">
|
||
<el-option label="订单金额" value="0"></el-option>
|
||
<el-option label="加油升数" value="1"></el-option>
|
||
</el-select>
|
||
</el-col>
|
||
<el-col :span="7">
|
||
<el-form-item prop="moneyMin">
|
||
<el-input v-model="ruleForm1.moneyMin">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div style="margin-left: 10px">到</div>
|
||
</el-col>
|
||
<el-col :span="7">
|
||
<el-form-item prop="moneyMax">
|
||
<el-input v-model="ruleForm1.moneyMax">
|
||
<template slot="append">元</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</div>
|
||
<div v-if="ruleForm1.consumeType==1">
|
||
<el-col :span="7">
|
||
<el-select v-model="ruleForm1.consumeType" style="width: 90%">
|
||
<el-option label="实收金额" value="0"></el-option>
|
||
<el-option label="加油升数" value="1"></el-option>
|
||
</el-select>
|
||
</el-col>
|
||
<el-col :span="7">
|
||
<el-form-item prop="literMin">
|
||
<el-input v-model="ruleForm1.literMin">
|
||
<template slot="append">L</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="2">
|
||
<div style="margin-left: 10px">到</div>
|
||
</el-col>
|
||
<el-col :span="7">
|
||
<el-form-item prop="literMax">
|
||
<el-input v-model="ruleForm1.literMax">
|
||
<template slot="append">L</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
<el-form-item label="最大优惠金额" prop="disMax">
|
||
<el-input v-model="ruleForm1.disMax"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="每人每日参与限制" label-width="140px" prop="dayLimitNum">
|
||
<el-input v-model="ruleForm1.dayLimitNum"></el-input>
|
||
</el-form-item>
|
||
</div>
|
||
<div style="width:50%">
|
||
<el-form-item label="活动规则名称" prop="ruleName">
|
||
<el-input v-model="ruleForm1.ruleName"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="适用会员等级" prop="levelId">
|
||
<el-select v-model="ruleForm1.levelId" clearable placeholder="请选择会员等级" style="width: 100%">
|
||
<el-option
|
||
v-for="(item,index) in userGradeList"
|
||
:label="item.name"
|
||
:value="item.id.toString()"
|
||
:key="index"></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="生效时间" required>
|
||
<el-col :span="11">
|
||
<el-form-item prop="activeStartTime">
|
||
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm1.activeStartTime"
|
||
style="width: 100%"
|
||
></el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :span="1">
|
||
<div style="margin-left: 5px">至</div>
|
||
</el-col>
|
||
<el-col :span="11">
|
||
<el-form-item prop="activeEndTime">
|
||
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm1.activeEndTime"
|
||
style="width: 100%"
|
||
></el-date-picker>
|
||
</el-form-item>
|
||
</el-col>
|
||
|
||
</el-form-item>
|
||
|
||
|
||
<el-form-item label="适用时间段" prop="timeType">
|
||
<div>
|
||
<div class="icon-type" v-for="(item,index) in weekMonthTypeList" :key="index"
|
||
:class="{ 'acvtive' : index === tindex3 }" @click="Typeindex3(index)" style="margin-bottom: 20px">
|
||
<img src="@/assets/images/wx.png" style="width: 20px;height: 20px" v-if="index != tindex3">
|
||
<img src="@/assets/images/xz.png" style="width: 20px;height: 20px" v-if="index == tindex3">
|
||
{{ item }}
|
||
<el-select v-model="weekDay" v-if="item=='每周'" placeholder="请选择每月固定日期" multiple
|
||
:disabled="tindex3!=0"
|
||
style="margin-left: 20px;">
|
||
<el-option
|
||
v-for="(item,index) in weekList"
|
||
:key="index"
|
||
:label="item"
|
||
:value="item">
|
||
</el-option>
|
||
</el-select>
|
||
<el-select v-model="monthDay" placeholder="请选择每月固定日期" multiple v-if="item=='每月'"
|
||
:disabled="tindex3!=1"
|
||
style="margin-left: 20px">
|
||
<el-option
|
||
v-for="item in 31"
|
||
:key="item.value"
|
||
:label="item+'日'"
|
||
:value="item">
|
||
</el-option>
|
||
</el-select>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top: 20px">
|
||
<el-form-item label="时间段" prop="timeApplyStart" label-width="60px">
|
||
<el-time-picker
|
||
v-model="ruleForm1.dayStartTime"
|
||
format="HH:mm"
|
||
value-format="HH:mm"
|
||
style="width: 45%"
|
||
placeholder="请选择开始时间点">
|
||
</el-time-picker>
|
||
至
|
||
<el-time-picker
|
||
v-model="ruleForm1.dayEndTime"
|
||
format="HH:mm"
|
||
value-format="HH:mm"
|
||
style="width: 45%"
|
||
placeholder="请选择结束时间点">
|
||
</el-time-picker>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="每人累计参与限制" label-width="140px" prop="limitNum">
|
||
<el-input v-model="ruleForm1.limitNum"></el-input>
|
||
</el-form-item>
|
||
</div>
|
||
</div>
|
||
<!-- -->
|
||
|
||
<el-form-item style="text-align: center">
|
||
<el-button @click="showDialogVisible = !showDialogVisible">取消</el-button>
|
||
<el-button type="primary" @click="submitRuleForm()">保存</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
getoilList,
|
||
getRequestList,
|
||
postaddList,
|
||
getID,
|
||
updateActivePrice,
|
||
deleteList,
|
||
getPriceRuleList, addPriceRule, editPriceRule, getPriceRule, deletePriceRule
|
||
} from "./api/separate";
|
||
import {oilNumberList1} from "@/api/order/oilnumgun";
|
||
import {listUserGrade} from "@/api/staff/user/usergrade";
|
||
import {listUserLabel} from "@/api/staff/user/userlabel";
|
||
|
||
export default {
|
||
dicts: ['payment_type'],
|
||
data() {
|
||
return {
|
||
// 限时
|
||
queryParams: {
|
||
pageNo: 1,
|
||
pageSize: 1000,
|
||
activeType: 2
|
||
},
|
||
titles:'',
|
||
titles1:'',
|
||
total: 0,
|
||
total1: 0,
|
||
ruleForm: {
|
||
activeType: 2,
|
||
title: '',
|
||
name: '',
|
||
region: '',
|
||
category: '1',
|
||
disValue: '',
|
||
type: [],
|
||
oilList: []
|
||
},
|
||
rules: {
|
||
activeStartTime: [
|
||
{required: true, message: '请选择开始时间', trigger: 'change'},
|
||
],
|
||
activeEndTime:[
|
||
{required: true, message: '请选择结束时间', trigger: 'change'}
|
||
],
|
||
timeApplyStart: [
|
||
{
|
||
validator: (rule, value, callback) => {
|
||
if (this.ruleForm1.dayStartTime === undefined) {
|
||
callback(new Error('请选择开始时间点'));
|
||
} else if (this.ruleForm1.dayEndTime === undefined) {
|
||
callback(new Error('请选择结束时间点'));
|
||
} else if (this.ruleForm1.dayStartTime > this.ruleForm1.dayEndTime) {
|
||
callback(new Error('结束时间必须晚于开始时间'));
|
||
} else {
|
||
callback();
|
||
}
|
||
|
||
},
|
||
}
|
||
],
|
||
moneyMax: [
|
||
{required: true, message: '请输入订单最高金额', trigger: 'blur'},
|
||
],
|
||
literMax: [
|
||
{required: true, message: '请输入最高加油升数', trigger: 'blur'},
|
||
],
|
||
moneyMin: [
|
||
{required: true, message: '请输入订单最低金额', trigger: 'blur'},
|
||
],
|
||
literMin: [
|
||
{required: true, message: '请输入最低加油升数', trigger: 'blur'},
|
||
],
|
||
consumeType: [
|
||
{required: true, message: '请选择消费类型', trigger: 'change'},
|
||
],
|
||
disValue:[
|
||
{required: true, message: '请输入优惠金额', trigger: 'change'}
|
||
],
|
||
'oilList.*.price': [
|
||
{required: true, message: '请输入优惠价', trigger: 'change'}
|
||
],
|
||
title: [
|
||
{required: true, message: '请输入名称', trigger: 'blur'},
|
||
],
|
||
category: [
|
||
{required: true, message: '请输入名称', trigger: 'blur'},
|
||
],
|
||
activeId: [
|
||
{required: true, message: '请输入名称', trigger: 'blur'},
|
||
],
|
||
paymentType: [
|
||
{required: true, message: '请输入支付方式', trigger: 'blur'},
|
||
],
|
||
disMax: [
|
||
{required: true, message: '请输入优惠金额', trigger: 'blur'},
|
||
],
|
||
dayLimitNum: [
|
||
{required: true, message: '请输入每人每日参与限制', trigger: 'blur'},
|
||
],
|
||
ruleName: [
|
||
{required: true, message: '请输入规则名称', trigger: 'blur'},
|
||
],
|
||
levelId: [
|
||
{required: true, message: '请输入会员等级', trigger: 'blur'},
|
||
],
|
||
limitNum: [
|
||
{required: true, message: '请输入每人累计参与限制', trigger: 'blur'},
|
||
],
|
||
},
|
||
centerDialogVisible: false,
|
||
showDialogVisible: false,
|
||
// 限时列表
|
||
tableData: [],
|
||
// 油品列表
|
||
oilList: [],
|
||
// 活动规则列表
|
||
queryParams1: {
|
||
activeType: 2,
|
||
pageNo: 1,
|
||
pageSize: 5,
|
||
},
|
||
ruleList: [],
|
||
weekMonthTypeList: ["每周", "每月"],
|
||
tindex3: 0,
|
||
weekList: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
|
||
weekDay: [],
|
||
monthDay: [],
|
||
userLabelList: [],
|
||
userGradeList: [],
|
||
timeShareList: [],
|
||
ruleForm1: {
|
||
activeType: 2,
|
||
timeType: 0,
|
||
consumeType: '',
|
||
paymentType: []
|
||
}
|
||
}
|
||
},
|
||
created() {
|
||
this.getList()
|
||
this.getRuleList()
|
||
},
|
||
watch: {
|
||
'ruleForm.category': function (newVal, oldVal) {
|
||
// 当类型切换的时候 清空 折扣 和 减价 字段
|
||
this.ruleForm.disValue = null;
|
||
|
||
},
|
||
'ruleForm.disValue': function (newVal, oldVal) {
|
||
|
||
console.log('监听', newVal)
|
||
|
||
if (this.ruleForm.category == 2) {
|
||
|
||
// 这地方 必须产生新数组 elementui 对数据监听都是浅层的
|
||
this.ruleForm.oilList = this.ruleForm.oilList.map(item => ({
|
||
...item,
|
||
price: Number((item.oilPrice * newVal).toFixed(2))
|
||
}));
|
||
}
|
||
|
||
if (this.ruleForm.category == 3) {
|
||
|
||
this.ruleForm.oilList = this.ruleForm.oilList.map(item => ({
|
||
...item,
|
||
price: Number((item.oilPrice - newVal).toFixed(2))
|
||
}));
|
||
}
|
||
|
||
if (newVal == null) {
|
||
this.clearOilListPrice()
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
//支付方式 转义
|
||
getPaymentTypeStr(value) {
|
||
|
||
let valueList = value.split(",");
|
||
|
||
console.log(this.dict.type.payment_type)
|
||
|
||
let newValueList = valueList.map((item) => {
|
||
let matchedLabel = this.dict.type.payment_type.find((item1) => item1.value === item)?.label;
|
||
return matchedLabel || item; // 如果没有找到匹配的 label，则返回原来的 item
|
||
});
|
||
|
||
//数组 转字符串
|
||
return newValueList.join(",")
|
||
|
||
},
|
||
//清空油品 优惠价属性
|
||
clearOilListPrice() {
|
||
this.ruleForm.oilList = this.ruleForm.oilList.map(
|
||
item => ({
|
||
...item,
|
||
price: null
|
||
}))
|
||
},
|
||
// 重置活动规则
|
||
resetRule() {
|
||
this.ruleForm1 = {
|
||
activeType: 2,
|
||
timeType: 0,
|
||
paymentType: []
|
||
}
|
||
this.tindex3 = 0
|
||
this.weekDay = []
|
||
this.monthDay = []
|
||
},
|
||
// 删除活动规则
|
||
deleteRule(data) {
|
||
deletePriceRule(data.id).then(res => {
|
||
this.$message.success("删除成功")
|
||
this.getRuleList()
|
||
})
|
||
},
|
||
// 修改活动规则
|
||
editRule(data) {
|
||
this.resetRule()
|
||
getPriceRule(data.id).then(res => {
|
||
|
||
this.getTimeShareList()
|
||
this.listUserGrade()
|
||
this.getUserLabelList()
|
||
this.showDialogVisible = true
|
||
|
||
if (res.data) {
|
||
this.ruleForm1 = res.data
|
||
if (res.data.paymentType) this.ruleForm1.paymentType = res.data.paymentType.split(",")
|
||
if (res.data.babelIds) this.ruleForm1.babelIds = res.data.babelIds.split(",")
|
||
|
||
if (res.data.timeSlots) {
|
||
if (res.data.timeType == "0") {
|
||
this.weekDay = this.ruleForm1.timeSlots.split(",")
|
||
} else if (this.ruleForm1.timeType == "1") {
|
||
this.monthDay = this.ruleForm1.timeSlots.split(",")
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 提交活动规则
|
||
submitRuleForm() {
|
||
this.$refs["ruleForm1"].validate((valid) => {
|
||
if (valid) {
|
||
if (this.ruleForm1.paymentType) this.ruleForm1.paymentType = this.ruleForm1.paymentType.toString()
|
||
if (this.ruleForm1.babelIds) this.ruleForm1.babelIds = this.ruleForm1.babelIds.toString()
|
||
if (this.ruleForm1.timeType == "0") {
|
||
this.ruleForm1.timeSlots = this.weekDay.toString()
|
||
} else if (this.ruleForm1.timeType == "1") {
|
||
this.ruleForm1.timeSlots = this.monthDay.toString()
|
||
}
|
||
|
||
if (this.ruleForm1.id) {
|
||
editPriceRule(this.ruleForm1).then(res => {
|
||
this.$message.success("修改成功")
|
||
this.getRuleList()
|
||
this.showDialogVisible = false
|
||
})
|
||
} else {
|
||
addPriceRule(this.ruleForm1).then(res => {
|
||
this.$message.success("添加成功")
|
||
this.getRuleList()
|
||
this.showDialogVisible = false
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
// 添加活动规则
|
||
addActiveRule() {
|
||
this.titles1 = "新增活动规则"
|
||
this.resetRule()
|
||
this.getTimeShareList()
|
||
this.listUserGrade()
|
||
this.getUserLabelList()
|
||
this.showDialogVisible = true
|
||
},
|
||
// 查询限时优惠列表信息
|
||
getTimeShareList() {
|
||
getRequestList({pageNo: 1, pageSize: 10000, activeType: 2}).then(res => {
|
||
this.timeShareList = res.data.records
|
||
})
|
||
},
|
||
// 会员等级
|
||
listUserGrade() {
|
||
listUserGrade({page: 1, pageSize: 1000}).then(res => {
|
||
if (res.code == 200) {
|
||
this.userGradeList = res.data.records
|
||
}
|
||
})
|
||
},
|
||
// 会员标签
|
||
getUserLabelList() {
|
||
listUserLabel({page: 1, pageSize: 10000}).then(res => {
|
||
this.userLabelList = res.data.records
|
||
})
|
||
},
|
||
Typeindex3(index) {
|
||
this.tindex3 = index
|
||
this.ruleForm1.timeType = index
|
||
this.weekDay = []
|
||
this.monthDay = []
|
||
},
|
||
// 查询活动规则列表
|
||
getRuleList() {
|
||
getPriceRuleList(this.queryParams1).then(res => {
|
||
this.ruleList = res.data.records
|
||
this.total1 = res.data.total
|
||
})
|
||
},
|
||
// 删除
|
||
deleteOil(id) {
|
||
deleteList(id).then(res => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
this.$message({
|
||
message: '删除成功',
|
||
type: 'success'
|
||
})
|
||
this.getList()
|
||
}
|
||
|
||
})
|
||
},
|
||
// 限时优惠制空
|
||
Blank() {
|
||
this.ruleForm = {
|
||
activeType: 2,
|
||
title: '',
|
||
name: '',
|
||
region: '',
|
||
category: '1',
|
||
disValue: '',
|
||
type: [],
|
||
oilList: []
|
||
}
|
||
},
|
||
// 修改
|
||
modifySeparateList(id) {
|
||
this.titles = "修改分时优惠"
|
||
getID(id).then(res => {
|
||
console.log(res)
|
||
if (res.code == 200) {
|
||
this.ruleForm = res.data
|
||
this.centerDialogVisible = true
|
||
}
|
||
})
|
||
},
|
||
// 新增/修改
|
||
addSeparateList() {
|
||
|
||
this.$refs["ruleForm"].validate((valid) => {
|
||
if (valid) {
|
||
|
||
this.centerDialogVisible = false
|
||
if (this.ruleForm.id) {
|
||
updateActivePrice(this.ruleForm).then(res => {
|
||
if (res.code == 200) {
|
||
this.$message({
|
||
message: '添加成功',
|
||
type: 'success'
|
||
})
|
||
this.getList()
|
||
}
|
||
})
|
||
} else {
|
||
postaddList(this.ruleForm).then(res => {
|
||
if (res.code == 200) {
|
||
this.$message({
|
||
message: '添加成功',
|
||
type: 'success'
|
||
})
|
||
this.getList()
|
||
}
|
||
})
|
||
}
|
||
|
||
}
|
||
})
|
||
},
|
||
//列表查询
|
||
getList() {
|
||
getRequestList(this.queryParams).then(res => {
|
||
this.tableData = res.data.records
|
||
this.total = res.data.total
|
||
})
|
||
},
|
||
// 新增限时
|
||
Timeshare() {
|
||
this.titles="新增限时优惠"
|
||
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()
|
||
let tempList = JSON.stringify(this.ruleForm.oilList)
|
||
this.ruleForm.oilList = []
|
||
this.ruleForm.oilList = JSON.parse(tempList)
|
||
},
|
||
addType(data) {
|
||
data.type = '0'
|
||
this.$forceUpdate()
|
||
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: 14px;
|
||
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;
|
||
}
|
||
|
||
.d-s {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.icon-type {
|
||
display: flex;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #999999;
|
||
margin-right: 20px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.acvtive {
|
||
color: #FF770F !important;
|
||
}
|
||
</style>
|