|
@@ -0,0 +1,427 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="120px">
|
|
|
+ <el-form-item label="开通卡类型设置" >
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="cardOilsType">
|
|
|
+ <el-checkbox-group v-model="form.cardOilsType">
|
|
|
+ <el-checkbox
|
|
|
+ v-for = "item in oilOptions"
|
|
|
+ :key="item.dictLabel"
|
|
|
+ :label="item.dictValue"
|
|
|
+ :value="item.dictValue"
|
|
|
+ >
|
|
|
+ {{item.dictLabel}}
|
|
|
+ </el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </el-form-item>
|
|
|
+ <div>
|
|
|
+ <el-button type="primary" @click="handleAdd">设置充值规则</el-button>
|
|
|
+ <el-table v-loading="false" :data="detailList" >
|
|
|
+ <el-table-column label="id" align="center" prop="id" v-if="false" />
|
|
|
+ <el-table-column label="所对应电子会员卡ID" align="center" prop="parentId" v-if="false" />
|
|
|
+ <el-table-column label="油品" align="center" prop="oilName" :formatter="oilNameFormatter"/>
|
|
|
+ <el-table-column label="优惠条件金额" align="center" prop="discountAmtTerm" />
|
|
|
+ <el-table-column label="赠送方式" align="center" prop="settingRuleType" :formatter="settingRuleTypeFotmat"/>
|
|
|
+ <el-table-column label="赠送金额值或比例" align="center" prop="presentAmt" />
|
|
|
+ <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="handleUpdate(scope.row)"
|
|
|
+ >修改</el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="handleDelete(scope.row)"
|
|
|
+ >删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <el-form-item label="重置活动设置">
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item >
|
|
|
+ <el-radio-group v-model="form.discountTimeSetting">
|
|
|
+ <el-radio
|
|
|
+ v-for="dict in discountTimeSettingOptions"
|
|
|
+ :key="dict.dictValue"
|
|
|
+ :label="dict.dictValue"
|
|
|
+ >{{dict.dictLabel}}</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="8" style="">
|
|
|
+ <el-form-item label="日期选择" prop="datePicker">
|
|
|
+ <el-select v-model="form.datePicker"
|
|
|
+ clearable size="small" @change="datePickerChang" >
|
|
|
+ <el-option
|
|
|
+ v-for="item in datePickerOptions"
|
|
|
+ :key="item.dictValue"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item v-show="workDaytrue">
|
|
|
+ <div style="display: flex;flex-wrap: wrap;border-style: solid;border-color:#F5F7FA">
|
|
|
+ <div v-for="(item, index) in workDay" :key="index" style="margin:3px;">
|
|
|
+ <div class="hover-style" style="border-radius:5px;font-weight:bold;font-size:12px;cursor: pointer;" @click="clickWorkDayCalendar(item, index)">
|
|
|
+ <div>{{ item }}</div>
|
|
|
+ <div v-if="collectClickWorkDay.indexOf(index) > -1" style="width:4px;height:4px;border-radius:50%;background-color:red;position: relative;left:calc(50% - 2px);"></div>
|
|
|
+ <div v-else style="width:4px;height:4px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-show="moonDaytrue" >
|
|
|
+ <div style="display: flex;flex-wrap: wrap;border-style: solid;border-color:#F5F7FA">
|
|
|
+ <div v-for="(item, index) in moonEverDay" :key="index" style="margin:3px;">
|
|
|
+ <div class="hover-style" style="border-radius:5px;font-weight:bold;font-size:12px;cursor: pointer;" @click="clickCalendar(item, index)">
|
|
|
+ <div>{{ item }}</div>
|
|
|
+ <div v-if="collectClickCalendar.indexOf(index) > -1" style="width:4px;height:4px;border-radius:50%;background-color:red;position: relative;left:calc(50% - 2px);"></div>
|
|
|
+ <div v-else style="width:4px;height:4px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item v-show="datetrue">
|
|
|
+ <el-date-picker clearable size="small" style="margin-left: 10px;width: 200px"
|
|
|
+ v-model="pickerTime"
|
|
|
+ type="dates"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="选择提醒时间设置">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="8">
|
|
|
+ <el-form-item label="赠送比例" prop="presentScale">
|
|
|
+ <el-input v-model="form.presentScale" placeholder="请输入赠送比例" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="支付设置" ></el-form-item>
|
|
|
+ <el-row>
|
|
|
+ <el-form-item label="是否可以使用优惠券">
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-form-item prop="isDiscountCoupon">
|
|
|
+ <el-radio-group v-model="form.isDiscountCoupon">
|
|
|
+ <el-radio
|
|
|
+ v-for="dict in isDiscountCouponOptions"
|
|
|
+ :key="dict.dictValue"
|
|
|
+ :label="dict.dictValue"
|
|
|
+ >{{dict.dictLabel}}</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-form-item label="积分可享受倍数" prop="enjoyIntegralMultiple">
|
|
|
+ <el-input v-model="form.enjoyIntegralMultiple" placeholder="请输入积分可享受倍数" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-row>
|
|
|
+ <el-form-item label="油站ID" prop="stationId" v-show="false">
|
|
|
+ <el-input v-model="form.stationId" placeholder="请输入油站ID" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="油站名称" prop="stationName" v-show="false">
|
|
|
+ <el-input v-model="form.stationName" placeholder="请输入油站名称" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitForm">确 定</el-button>
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 添加或修改客户电子会员卡充值优惠设置明细对话框 -->
|
|
|
+ <el-dialog :title="title" :visible.sync="open" append-to-body>
|
|
|
+ <el-form ref="form" :model="form" :rules="rules" label-width="110px">
|
|
|
+ <el-form-item label="选择油品" prop="oilName">
|
|
|
+ <el-select
|
|
|
+ v-model="form.oilName"
|
|
|
+ placeholder="请选择油品"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in oilOptions"
|
|
|
+ :key="item.dictLabel"
|
|
|
+ :label="item.dictLabel"
|
|
|
+ :value="item.dictValue"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="充值条件金额" prop="discountAmtTerm">
|
|
|
+ <span>初始值</span>
|
|
|
+ <el-input-number v-model="form.discountAmtStart" placeholder="请输入充值条件开始金额" style="width:100px;" />
|
|
|
+ <span>终止值</span>
|
|
|
+ <el-input-number v-model="form.discountAmtEnd" placeholder="请输入充值条件结束金额" style="width:100px;"/>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="赠送方式"></el-form-item>
|
|
|
+ <el-row>
|
|
|
+ <el-col>
|
|
|
+ <el-form-item >
|
|
|
+ <el-select v-model="form.settingRuleType" placeholder="请选择设置充值优惠类型:1,按赠送金额;2,按赠送比例">
|
|
|
+ <el-option label="请选择字典生成" value="" />
|
|
|
+ </el-select>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col>
|
|
|
+ <el-form-item>
|
|
|
+ <el-input v-model="form.presentAmt" placeholder="请输入赠送金额值或者赠送c充值金额的比例" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitForm">设置</el-button>
|
|
|
+ <el-button @click="cancel">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getSetting, delSetting, addSetting, updateSetting } from "@/api/customer/cardSetting";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "Setting",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 遮罩层
|
|
|
+ loading: true,
|
|
|
+ // 选中数组
|
|
|
+ ids: [],
|
|
|
+ // 非单个禁用
|
|
|
+ single: true,
|
|
|
+ // 非多个禁用
|
|
|
+ multiple: true,
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ // 客户电子会员卡充值优惠设置表格数据
|
|
|
+ settingList: [],
|
|
|
+ detailList:[],
|
|
|
+ oilOptions:[],
|
|
|
+ isDiscountCouponOptions:[],
|
|
|
+ discountTimeSettingOptions:[],
|
|
|
+ collectClickCalendar: [], // 收集固定日期选择的日子
|
|
|
+ collectClickWorkDay:[],
|
|
|
+ datePickerOptions :[],
|
|
|
+ moonEverDay: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10',
|
|
|
+ '11', '12', '13', '14', '15', '16', '17', '18', '19', '20',
|
|
|
+ '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
|
|
|
+ workDay:["周天","周一","周二","周三","周四","周五","周六"],
|
|
|
+ workDaytrue:false,
|
|
|
+ moonDaytrue:false,
|
|
|
+ datetrue:false,
|
|
|
+ // 弹出层标题
|
|
|
+ title: "",
|
|
|
+ // 表单参数
|
|
|
+ form: {},
|
|
|
+ // 表单校验
|
|
|
+ rules: {
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getDicts("integral_manage").then(response => {
|
|
|
+ this.discountTimeSettingOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("date_picker").then(response => {
|
|
|
+ this.datePickerOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("is_flag").then(response => {
|
|
|
+ this.isDiscountCouponOptions = response.data;
|
|
|
+ });
|
|
|
+ this.getDicts("oil").then(response => {
|
|
|
+ this.oilOptions = response.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ oilNameFormatter(row, column){
|
|
|
+ if(row.oilName === '1'){
|
|
|
+ return '汽油'
|
|
|
+ }else if(row.oilName === '2'){
|
|
|
+ return '柴油'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ settingRuleTypeFotmat(row, column){
|
|
|
+ if(row.settingRuleType === '1'){
|
|
|
+ return '按赠送金额'
|
|
|
+ }else if(row.settingRuleType === '2'){
|
|
|
+ return '按赠送比例'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ datePickerChang(){
|
|
|
+ if(this.form.datePicker == "1"){
|
|
|
+ this.workDaytrue=true;
|
|
|
+ this.moonDaytrue=false;
|
|
|
+ this.datetrue=false;
|
|
|
+ }else if(this.form.datePicker == "2"){
|
|
|
+ this.workDaytrue=false;
|
|
|
+ this.moonDaytrue=true;
|
|
|
+ this.datetrue=false;
|
|
|
+ }else if(this.form.datePicker == "3"){
|
|
|
+ this.workDaytrue=false;
|
|
|
+ this.moonDaytrue=false;
|
|
|
+ this.datetrue=true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 取消按钮
|
|
|
+ cancel() {
|
|
|
+ this.reset();
|
|
|
+ },
|
|
|
+ // 表单重置
|
|
|
+ reset() {
|
|
|
+ this.form = {
|
|
|
+ id: null,
|
|
|
+ cardOilsType: null,
|
|
|
+ discountTimeSetting: null,
|
|
|
+ discountTime: null,
|
|
|
+ presentScale: null,
|
|
|
+ isDiscountCoupon: null,
|
|
|
+ enjoyIntegralMultiple: null,
|
|
|
+ stationId: null,
|
|
|
+ stationName: null,
|
|
|
+ createTime: null
|
|
|
+ };
|
|
|
+ this.resetForm("form");
|
|
|
+ },
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 新增按钮操作 */
|
|
|
+ handleAdd() {
|
|
|
+ this.reset();
|
|
|
+ this.open = true;
|
|
|
+ this.title = "添加客户电子会员卡充值优惠设置";
|
|
|
+ },
|
|
|
+ /** 修改按钮操作 */
|
|
|
+ handleUpdate(row) {
|
|
|
+ this.reset();
|
|
|
+ const id = row.id || this.ids
|
|
|
+ getSetting(id).then(response => {
|
|
|
+ this.form = response.data;
|
|
|
+ this.open = true;
|
|
|
+ this.title = "修改客户电子会员卡充值优惠设置";
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 提交按钮 */
|
|
|
+ submitForm() {
|
|
|
+ this.$refs["form"].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ if (this.form.id != null) {
|
|
|
+ let datepicker = this.form.datePicker;
|
|
|
+ if(datepicker=="1"){
|
|
|
+ this.form.discountTime=this.collectClickWorkDay.toString();
|
|
|
+ }else if(datepicker=="2"){
|
|
|
+ this.form.discountTime=this.collectClickCalendar.toString();
|
|
|
+ }else{
|
|
|
+ this.form.discountTime = this.pickerTime.toString();
|
|
|
+ }
|
|
|
+ updateSetting(this.form).then(response => {
|
|
|
+ this.msgSuccess("修改成功");
|
|
|
+ this.open = false;
|
|
|
+ this.getList();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ let datepicker = this.form.datePicker;
|
|
|
+ if(datepicker=="1"){
|
|
|
+ this.form.discountTime=this.collectClickWorkDay.toString();
|
|
|
+ }else if(datepicker=="2"){
|
|
|
+ this.form.discountTime=this.collectClickCalendar.toString();
|
|
|
+ }else{
|
|
|
+ this.form.discountTime = this.pickerTime.toString();
|
|
|
+ }
|
|
|
+ addSetting(this.form).then(response => {
|
|
|
+ this.msgSuccess("新增成功");
|
|
|
+ this.open = false;
|
|
|
+ this.getList();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 删除按钮操作 */
|
|
|
+ handleDelete(row) {
|
|
|
+ const ids = row.id || this.ids;
|
|
|
+ this.$confirm('是否确认删除客户电子会员卡充值优惠设置编号为"' + ids + '"的数据项?', "警告", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning"
|
|
|
+ }).then(function() {
|
|
|
+ return delSetting(ids);
|
|
|
+ }).then(() => {
|
|
|
+ this.getList();
|
|
|
+ this.msgSuccess("删除成功");
|
|
|
+ })
|
|
|
+ },
|
|
|
+ deleteItemFromArr(item) {
|
|
|
+ // eslint-disable-next-line
|
|
|
+ Array.prototype.indexOf = function(val) {
|
|
|
+ for (var i = 0; i < this.length; i++) {
|
|
|
+ if (this[i] === val) {
|
|
|
+ return i
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return -1
|
|
|
+ }
|
|
|
+ // 通过索引删除数组元素
|
|
|
+ Array.prototype.remove = function(val) {
|
|
|
+ var index = this.indexOf(val)
|
|
|
+ if (index > -1) {
|
|
|
+ this.splice(index, 1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 删除数组元素
|
|
|
+ this.collectClickCalendar.remove(item)
|
|
|
+ },
|
|
|
+ clickCalendar(item, index) {
|
|
|
+ console.log('item, index:', item, index)
|
|
|
+ if (this.collectClickCalendar.indexOf(index) === -1) {
|
|
|
+ this.collectClickCalendar.push(index)
|
|
|
+ } else if (this.collectClickCalendar.indexOf(index) > -1) {
|
|
|
+ this.deleteItemFromArr(index)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deleteWorkDayFromArr(item) {
|
|
|
+ Array.prototype.indexOf = function(val) {
|
|
|
+ for (var i = 0; i < this.length; i++) {
|
|
|
+ if (this[i] === val) {
|
|
|
+ return i
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return -1
|
|
|
+ }
|
|
|
+ // 通过索引删除数组元素
|
|
|
+ Array.prototype.remove = function(val) {
|
|
|
+ var index = this.indexOf(val)
|
|
|
+ if (index > -1) {
|
|
|
+ this.splice(index, 1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 删除数组元素
|
|
|
+ this.collectClickWorkDay.remove(item)
|
|
|
+ },
|
|
|
+ clickWorkDayCalendar(item, index) {
|
|
|
+ if (this.collectClickWorkDay.indexOf(index) === -1) {
|
|
|
+ this.collectClickWorkDay.push(index)
|
|
|
+ } else if (this.collectClickWorkDay.indexOf(index) > -1) {
|
|
|
+ this.deleteWorkDayFromArr(index)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|