oil-station/fuintAdmin/src/views/EventMarketing/activeNewlyweds/index.vue
2024-08-29 15:14:52 +08:00

1252 lines
48 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container">
<div>
<!-- <el-card style="margin-bottom: 20px">-->
<!-- <el-breadcrumb separator="/" style="margin-bottom: 35px">-->
<!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>-->
<!-- <el-breadcrumb-item :to="{ path: '/EventMarketing/center/index' }">活动中心</el-breadcrumb-item>-->
<!-- <el-breadcrumb-item>新人有礼</el-breadcrumb-item>-->
<!-- </el-breadcrumb>-->
<!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"-->
<!-- label-width="100px">-->
<!-- <el-form-item label="" prop="name">-->
<!-- <div style="width: 220px">-->
<!-- <el-input-->
<!-- v-model="queryParams.name"-->
<!-- placeholder="活动名称"-->
<!-- clearable-->
<!-- @keyup.enter.native="handleQuery"-->
<!-- />-->
<!-- </div>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="" prop="isonline">-->
<!-- <el-select v-model="queryParams.isonline" clearable placeholder="请选择是否在线">-->
<!-- <el-option label="在线" value="0"></el-option>-->
<!-- <el-option label="下线" value="1"></el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item style="float: right">-->
<!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>-->
<!-- <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- </el-card>-->
<!-- <el-dialog :title="title" :visible.sync="open" width="55%" append-to-body>-->
<!-- <el-form ref="form" :model="form" :rules="rules" :label-position="labelPosition" label-width="110px">-->
<!-- <el-form-item label="活动名称" prop="name">-->
<!-- <div style="width: 220px">-->
<!-- <el-input v-model="form.name" placeholder="请输入活动名称"/>-->
<!-- </div>-->
<!-- </el-form-item>-->
<!-- <el-row :gutter="20">-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="活动开始时间" prop="activeStartTime">-->
<!-- <el-date-picker clearable-->
<!-- v-model="form.activeStartTime"-->
<!-- type="datetime"-->
<!-- value-format="yyyy-MM-dd HH:mm:ss"-->
<!-- placeholder="请选择活动开始时间">-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="活动结束时间" prop="activeEndTime">-->
<!-- <el-date-picker clearable-->
<!-- v-model="form.activeEndTime"-->
<!-- type="datetime"-->
<!-- value-format="yyyy-MM-dd HH:mm:ss"-->
<!-- placeholder="请选择活动结束时间">-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- <el-form-item label="有礼奖励" prop="courtesyReward">-->
<!-- <el-checkbox-group v-model="form.courtesyReward">-->
<!-- <el-checkbox label="1">赠送优惠券</el-checkbox>-->
<!-- <el-checkbox label="2">赠送兑换券</el-checkbox>-->
<!-- </el-checkbox-group>-->
<!-- </el-form-item>-->
<!-- &lt;!&ndash; 选择优惠券&ndash;&gt;-->
<!-- <div class="xh-box" v-if="form.courtesyReward && form.courtesyReward.indexOf('1')>-1 ">-->
<!-- <div class="box-bt">-->
<!-- <div>赠送卡券</div>-->
<!-- <el-button type="primary" icon="el-icon-plus" @click="getlistFavorable()">新增</el-button>-->
<!-- </div>-->
<!-- <div style="margin: 10px 0px">-->
<!-- <el-table-->
<!-- :data="form.tableDatas"-->
<!-- border-->
<!-- style="width: 100%">-->
<!-- <el-table-column-->
<!-- prop="giftCardName"-->
<!-- label="卡券名称"-->
<!-- >-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="giftCardType"-->
<!-- label="券类型"-->
<!-- >-->
<!-- <template slot-scope="scope">-->
<!-- <span v-if="scope.row.giftCardType == 0">满减券</span>-->
<!-- <span v-if="scope.row.giftCardType == 1">折扣券</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="date"-->
<!-- label="券详情"-->
<!-- >-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{ scope.row.giftCardDetail }}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="instruction"-->
<!-- label="使用说明"-->
<!-- >-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="date"-->
<!-- label="有效期(天)"-->
<!-- >-->
<!-- <template slot-scope="scope">-->
<!-- <span v-if="scope.row.timeType == 0"> {{ scope.row.validityZero }}天 </span>-->
<!-- <span v-if="scope.row.timeType == 1"> {{ scope.row.validityOne }}天 </span>-->
<!-- <span v-if="scope.row.timeType == 2"> {{ scope.row.validityTwo }}天 </span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="date"-->
<!-- label="数量" width="130"-->
<!-- >-->
<!-- <template slot-scope="scope">-->
<!-- <el-input-number style="width: 110px" v-model="scope.row.giftCardTotal" controls-position="right"-->
<!-- :min="1" :max="9999"></el-input-number>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="address"-->
<!-- label="操作">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- @click="deletedata(scope.row)"-->
<!-- >删除-->
<!-- </el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </div>-->
<!-- </div>-->
<!-- &lt;!&ndash; 选择兑换券&ndash;&gt;-->
<!-- <div class="xh-box" v-if="form.courtesyReward && form.courtesyReward.indexOf('2')>-1 ">-->
<!-- <div class="box-bt">-->
<!-- <div>选择兑换券</div>-->
<!-- <el-button type="primary" icon="el-icon-plus" @click="getlistExchange()">新增</el-button>-->
<!-- </div>-->
<!-- <div style="margin: 10px 0px">-->
<!-- <el-table-->
<!-- :data="tableDatas"-->
<!-- border-->
<!-- style="width: 100%">-->
<!-- <el-table-column-->
<!-- prop="giftCardName"-->
<!-- label="卡券名称"-->
<!-- >-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="date"-->
<!-- label="券类型"-->
<!-- >-->
<!-- <template slot-scope="scope">-->
<!-- <span v-if="scope.row.giftCardType == 0">商品券</span>-->
<!-- <span v-if="scope.row.giftCardType == 1">洗车券</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="date"-->
<!-- label="券详情"-->
<!-- >-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{ scope.row.giftCardDetail }}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="instruction"-->
<!-- label="使用说明"-->
<!-- >-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="date"-->
<!-- label="有效期(天)"-->
<!-- >-->
<!-- <template slot-scope="scope">-->
<!-- <span> {{ scope.row.giftCardTime }}天 </span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="date"-->
<!-- label="数量" width="130"-->
<!-- >-->
<!-- <template slot-scope="scope">-->
<!-- <el-input-number style="width: 110px" v-model="scope.row.giftCardTotal" size="small"-->
<!-- controls-position="right" :min="1" :max="9999"></el-input-number>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="address"-->
<!-- label="操作"-->
<!-- >-->
<!-- <template slot-scope="scope">-->
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- @click="deletedhdata(scope.row)"-->
<!-- >删除-->
<!-- </el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </div>-->
<!-- </div>-->
<!-- <el-form-item label="赠送积分" prop="points">-->
<!-- <el-input-number v-model="form.points" controls-position="right" :min="1" :max="99999"></el-input-number>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="赠送成长值" prop="growthValue">-->
<!-- <el-input-number v-model="form.growthValue" controls-position="right" :min="1"-->
<!-- :max="9999999"></el-input-number>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="自定义规则" prop="remark">-->
<!-- <div style="width: 200px">-->
<!-- <el-input v-model="form.remark" placeholder="请输入自定义规则"/>-->
<!-- </div>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<!-- <div>-->
<!-- <el-button type="primary" @click="submitForm">保存</el-button>-->
<!-- </div>-->
<!-- </el-dialog>-->
<!-- <el-card>-->
<!-- <el-row :gutter="10" class="mb8">-->
<!-- <el-col :span="1.5">-->
<!-- <el-button-->
<!-- type="primary"-->
<!-- icon="el-icon-plus"-->
<!-- size="mini"-->
<!-- @click="addDatas"-->
<!-- >新增-->
<!-- </el-button>-->
<!-- </el-col>-->
<!-- </el-row>-->
<!-- <el-table v-loading="loading" :data="activeFullminusList" @selection-change="handleSelectionChange">-->
<!-- <el-table-column-->
<!-- type="index"-->
<!-- align="center"-->
<!-- label="序号"-->
<!-- >-->
<!-- </el-table-column>-->
<!-- <el-table-column label="活动名称" align="center" prop="name"/>-->
<!-- <el-table-column label="活动时间" align="center" prop="adaptUserType">-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{ scope.row.activeStartTime || 0 }}-{{ scope.row.activeEndTime || 0 }}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="活动状态 " align="center" prop="status">-->
<!-- <template slot-scope="scope">-->
<!-- <span style="cursor: pointer;" v-if="scope.row.status == 0"> <el-tag>进行中</el-tag> </span>-->
<!-- <span style="cursor: pointer;" v-if="scope.row.status == 1"> <el-tag-->
<!-- type="danger">待生效</el-tag> </span>-->
<!-- <span style="cursor: pointer;" v-if="scope.row.status == 2"> <el-tag type="danger">下线</el-tag> </span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="赠送积分" align="center" prop="adaptUserType">-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{ scope.row.points || 0 }}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="赠送成长值" align="center" prop="adaptUserType">-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{ scope.row.growthValue || 0 }}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column label="活动更新时间" align="center" prop="updateTime">-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{ scope.row.updateTime || '暂无更新' }}</span>-->
<!-- </template>-->
<!-- </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"-->
<!-- icon="el-icon-edit"-->
<!-- @click="handleUpdate(scope.row)"-->
<!-- >修改-->
<!-- </el-button>-->
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-view"-->
<!-- @click="lookDetail(scope.row)"-->
<!-- >详情-->
<!-- </el-button>-->
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-sort-up"-->
<!-- @click="handleDeletexia(scope.row,0)"-->
<!-- v-if="scope.row.isonline == 1"-->
<!-- >上线-->
<!-- </el-button>-->
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-sort-up"-->
<!-- @click="handleDeletexia(scope.row,1)"-->
<!-- v-if="scope.row.isonline == 0"-->
<!-- >下线-->
<!-- </el-button>-->
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- icon="el-icon-delete"-->
<!-- @click="Deleteshan(scope.row)"-->
<!-- v-if="scope.row.isonline == 1"-->
<!-- >删除-->
<!-- </el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- <pagination-->
<!-- v-show="ztotal>0"-->
<!-- :total="ztotal"-->
<!-- :page.sync="queryParams.pageNum"-->
<!-- :limit.sync="queryParams.pageSize"-->
<!-- @pagination="getList"-->
<!-- />-->
<!-- </el-card>-->
<!-- &lt;!&ndash; 优惠券列表&ndash;&gt;-->
<!-- <el-dialog title="优惠券列表" :visible.sync="dialogTableVisible">-->
<!-- <div style="display: flex;align-items: center; margin-bottom: 20px ">-->
<!-- <el-input v-model="youhuiquan.name" placeholder="优惠券名称"></el-input>-->
<!-- <el-button type="primary" icon="el-icon-search" @click="getlistFavorable">搜索</el-button>-->
<!-- </div>-->
<!-- <el-table-->
<!-- :data="tableData"-->
<!-- border-->
<!-- style="width: 100%">-->
<!-- <el-table-column-->
<!-- prop="name"-->
<!-- label="卡券名称"-->
<!-- >-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="date"-->
<!-- label="券类型"-->
<!-- >-->
<!-- <template slot-scope="scope">-->
<!-- <span v-if="scope.row.discountType == 0">满减券</span>-->
<!-- <span v-if="scope.row.discountType == 1">折扣券</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="date"-->
<!-- label="券详情"-->
<!-- >-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{ scope.row.cardDetail }}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="date"-->
<!-- label="有效期(天)"-->
<!-- width="180">-->
<!-- <template slot-scope="scope">-->
<!-- <span v-if="scope.row.timeType == 0">{{ scope.row.validityZero }}天 </span>-->
<!-- <span v-if="scope.row.timeType == 1">{{ scope.row.validityOne }}天 </span>-->
<!-- <span v-if="scope.row.timeType == 2">{{ scope.row.validityTwo }}天 </span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="address"-->
<!-- label="操作">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- @click="chosedata(scope.row)"-->
<!-- >选择-->
<!-- </el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- <div>-->
<!-- <pagination-->
<!-- v-show="ytotal>0"-->
<!-- :total="ytotal"-->
<!-- :page.sync="youhuiquan.pageNum"-->
<!-- :limit.sync="youhuiquan.pageSize"-->
<!-- @pagination="getlistFavorable"-->
<!-- />-->
<!-- </div>-->
<!-- </el-dialog>-->
<!-- &lt;!&ndash; 兑换券列表&ndash;&gt;-->
<!-- <el-dialog title="兑换券列表" :visible.sync="dialogTableVisibledh">-->
<!-- <div style="display: flex;align-items: center; margin-bottom: 20px ">-->
<!-- <el-input v-model="duihuanquan.name" placeholder="兑换券名称"></el-input>-->
<!-- <el-button type="primary" icon="el-icon-search" @click="getlistExchange">搜索</el-button>-->
<!-- </div>-->
<!-- <el-table-->
<!-- :data="tableDatadh"-->
<!-- border-->
<!-- style="width: 100%">-->
<!-- <el-table-column-->
<!-- prop="name"-->
<!-- label="卡券名称"-->
<!-- >-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="date"-->
<!-- label="券类型"-->
<!-- >-->
<!-- <template slot-scope="scope">-->
<!-- <span v-if="scope.row.type == 0">洗车券</span>-->
<!-- <span v-if="scope.row.type == 1">商品券</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="date"-->
<!-- label="券详情"-->
<!-- width="80">-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{ scope.row.cardDetail }}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="date"-->
<!-- label="使用说明"-->
<!-- >-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{ scope.row.useInstructions }}</span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="date"-->
<!-- label="有效期(天)"-->
<!-- >-->
<!-- <template slot-scope="scope">-->
<!-- <span>{{ scope.row.validity }}天 </span>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="address"-->
<!-- label="操作">-->
<!-- <template slot-scope="scope">-->
<!-- <el-button-->
<!-- size="mini"-->
<!-- type="text"-->
<!-- @click="Favorabledata(scope.row)"-->
<!-- >选择-->
<!-- </el-button>-->
<!-- </template>-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- <div>-->
<!-- <pagination-->
<!-- v-show="dtotal>0"-->
<!-- :total="dtotal"-->
<!-- :page.sync="duihuanquan.pageNum"-->
<!-- :limit.sync="duihuanquan.pageSize"-->
<!-- @pagination="getlistExchange"-->
<!-- />-->
<!-- </div>-->
<!-- </el-dialog>-->
<!-- <el-dialog title="详情统计" :visible.sync="opendetails" width="45%" append-to-body>-->
<!-- <div style="display: flex;justify-content: space-between;width: 100%;">-->
<!-- <div class="x-box">-->
<!-- <div>优惠券数量统计</div>-->
<!-- <div>总数量: {{ statisticsyou.count || 0 }}</div>-->
<!-- <div>已使用数量: {{ statisticsyou.countEd || 0 }}</div>-->
<!-- <div>未使用数量: {{ statisticsyou.countLd || 0 }}</div>-->
<!-- </div>-->
<!-- <div class="x-box">-->
<!-- <div>兑换券数量统计</div>-->
<!-- <div>总数量: {{ statisticsyou.counts || 0 }}</div>-->
<!-- <div>已使用数量: {{ statisticsyou.countEds || 0 }}</div>-->
<!-- <div>未使用数量: {{ statisticsyou.countLds || 0 }}</div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <el-table-->
<!-- :data="looklist"-->
<!-- style="width: 100%">-->
<!-- <el-table-column-->
<!-- prop="name"-->
<!-- label="昵称"-->
<!-- >-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="mobile"-->
<!-- label="联系方式"-->
<!-- >-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="createTime"-->
<!-- label="领取日期"-->
<!-- >-->
<!-- </el-table-column>-->
<!-- <el-table-column-->
<!-- prop="exchangeFrom"-->
<!-- label="获取方式"-->
<!-- >-->
<!-- </el-table-column>-->
<!-- </el-table>-->
<!-- </el-dialog>-->
<!-- <el-dialog-->
<!-- title="二维码"-->
<!-- v-loading="loadingdialog"-->
<!-- :visible.sync="centerDialogVisible"-->
<!-- width="350px"-->
<!-- center>-->
<!-- <div style="display: flex;align-items: center">-->
<!-- <div class="qr-code" id="qrCode" ref="qrCodeUrl"></div>-->
<!-- </div>-->
<!-- <span slot="footer" class="dialog-footer">-->
<!-- <el-button @click="centerDialogVisible = false">取 消</el-button>-->
<!-- <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>-->
<!-- </span>-->
<!-- </el-dialog>-->
</div>
<div class="cot-box">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="90px" style="width: 70%;margin: 0 auto">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="活动时间" prop="activeTimeType">
<div class="d-s">
<div class="icon-type" v-for="(item,index) in activityTimeTypeList" :key="index"
:class="{ 'acvtive' : index === tindex1 }" @click="Typeindex1(index)">
<img src="@/assets/images/wx.png" style="width: 20px;height: 20px" v-if="index != tindex1">
<img src="@/assets/images/xz.png" style="width: 20px;height: 20px" v-if="index == tindex1">
{{ item }}
</div>
<el-date-picker
v-model="ruleForm.activeStartTime"
style="width: 160px"
type="date"
value-format="yyyy-MM-dd"
placeholder="开始日期">
</el-date-picker>
<span style="margin: 0 5px">至</span>
<el-date-picker
v-model="ruleForm.activeEndTime"
style="width: 160px"
type="date"
value-format="yyyy-MM-dd"
placeholder="结束日期">
</el-date-picker>
</div>
</el-form-item>
<el-form-item label="通知内容" prop="noticeContent">
<div>
<el-button type="text" @click="ifWrite = !ifWrite">编辑</el-button>
</div>
<el-input type="textarea" :disabled="ifWrite" v-model="ruleForm.noticeContent"
placeholder="请输入通知内容"></el-input>
</el-form-item>
<el-form-item label="活动详情" prop="activityDetails">
<el-input type="textarea" v-model="ruleForm.activityDetails" placeholder="请输入活动详情"></el-input>
</el-form-item>
<el-form-item label="活动奖品" prop="courtesyReward">
<div style="display: flex">
<div style="width: 17%">
<el-checkbox-group v-model="ruleForm.courtesyReward">
<div>
<el-checkbox label="3" name="type">赠送积分</el-checkbox>
</div>
<div>
<el-checkbox label="2" name="type">赠送成长值</el-checkbox>
</div>
<div style="display: flex;font-size: 14px;margin: 15px 0">
<el-checkbox label="0" name="type">赠送优惠券</el-checkbox>
<img src="@/assets/images/tjb.png"
style="width: 20px;height: 20px;cursor: pointer;margin-top: 7px;margin-left: 10px"
@click="addCoupons()">
</div>
</el-checkbox-group>
</div>
<div style="width: 70%">
<div style="display: flex;font-size: 14px;">
<div>赠送</div>
<el-input placeholder="请输入赠送的积分数量" style="width: 70%;margin: 0 10px"
v-model="ruleForm.points">
<template slot="append">积分</template>
</el-input>
</div>
<div style="display: flex;font-size: 14px;margin: 15px 0">
<div>赠送</div>
<el-input placeholder="请输入赠送的成长值数量" style="width: 70%;margin: 0 10px"
v-model="ruleForm.growthValue">
<template slot="append">成长值</template>
</el-input>
</div>
<div v-for="(item,index) in couponList" :key="index" style="font-size: 14px;margin: 15px 0">
<span>赠送</span>
<el-select v-model="item.vouchersId" style="margin-left: 10px;width: 30%" placeholder="请选择">
<el-option
v-for="(item1,index1) in cardCouponList"
:key="index1"
:label="item1.name"
:value="item1.id"></el-option>
</el-select>
<el-input style="width: 30%;margin-left: 10px" v-model="item.giftCardTotal">
<template slot="append">张</template>
</el-input>
<img src="@/assets/images/ljt.png" style="width: 25px;height: 25px;margin-left: 10px"
@click="deleteCoupons(index)">
</div>
</div>
</div>
</el-form-item>
<el-form-item style="text-align: center">
<el-button @click="resetForm('ruleForm')">取消</el-button>
<el-button type="primary" @click="submitRuleForm('ruleForm')">保存</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import {
listActiveNewlyweds,
getActiveNewlyweds,
delActiveNewlyweds,
addActiveNewlyweds,
updateActiveNewlyweds,
huiActiveNewlyweds,
editActiveNewlyweds, getInfoActiveNewlyweds, insertActiveNewlyweds, editActiveNewlyweds1
} from "@/api/EventMarketing/activeNewlyweds";
import {getoilName, listExchange, listFavorable, looklook, looklooklook} from "@/api/EventMarketing/activeConsumption";
import QRCode from "qrcodejs2";
import {
delActiveFullminus,
editActiveFullminus,
getActiveFullminus,
updateActiveFullminus
} from "@/api/EventMarketing/activeFullminus";
import {listCardCoupon} from "@/api/EventMarketing/cardCoupon";
export default {
name: "ActiveNewlyweds",
data() {
return {
opendetails: false,
looklist: [],
statisticsyou: {},
labelPosition: 'left',
loadingdialog: false,
centerDialogVisible: false,
pdidlist: [],//判断优惠券id
pddhidlist: [],//判断兑换券id
tableData: [],//优惠券
tableDatadh: [],//兑换券
dialogTableVisible: false,//优惠券
dialogTableVisibledh: false,//兑换券
tableDatas: [],
//请求优惠券列表时的参数
youhuiquan: {
name: '',
pageNum: 1,
pageSize: 10,
},
ytotal: 0,
//请求兑换券列表时的参数
duihuanquan: {
name: '',
pageNum: 1,
pageSize: 10,
total: 0
},
dtotal: 0,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
ztotal: 0,
// 新人有礼活动表格数据
activeNewlywedsList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
chainStoreId: null,
storeId: null,
name: null,
activeStartTime: null,
activeEndTime: null,
courtesyReward: null,
activeCode: null,
isonline: null,
status: null,
remainderTotal: null,
points: null,
growthValue: null,
},
activeFullminusList: [],
// 表单参数
form: {
id: "",
tableDatas: [],
courtesyReward: [],
activeNewlywedsChildList: [],
},
ruleForm: {},
ifWrite: true,
tindex1: 0,
activityTimeTypeList: [
"永久有效", "自定义"
],
couponList: [],
// 优惠券列表信息
cardCouponList:[],
// 表单校验
rules: {
name: [
{required: true, message: '活动名称不能为空', trigger: 'blur'},
],
activeTimeType: [
{required: true, message: '活动时间不能为空', trigger: 'blur'},
],
noticeContent: [
{required: true, message: '通知内容不能为空', trigger: 'blur'},
],
activityDetails: [
{required: true, message: '活动详情不能为空', trigger: 'blur'},
],
courtesyReward: [
{required: true, message: '活动奖品不能为空', trigger: 'blur'},
],
}
};
},
created() {
// this.getList()
this.getInfo()
this.getCardCoupon()
},
methods: {
getCardCoupon(){
listCardCoupon({status:1,putType:1}).then(res => {
this.cardCouponList = res.data.records
})
},
getInfo(){
getInfoActiveNewlyweds().then(res => {
if (res.data) {
this.ruleForm = res.data
if (res.data.courtesyReward) this.ruleForm.courtesyReward = res.data.courtesyReward.split(",")
if (res.data.activeTimeType) this.tindex1 = res.data.activeTimeType
if (res.data.couponList) this.couponList = res.data.couponList
}else {
this.ruleForm = {
activeTimeType:0,
courtesyReward:[]
}
this.tindex1 = 0
}
})
},
addCoupons() {
let data = {
activeGift: 0,
vouchersId: "",
giftCardTotal: "",
}
this.couponList.push(data)
},
deleteCoupons(index) {
this.couponList.splice(index, 1);
},
Typeindex1(index) {
this.tindex1 = index
this.ruleForm.activeTimeType = index
},
submitRuleForm(formName) {
if (this.tindex1 == 1){
if (!this.ruleForm.activeStartTime || !this.ruleForm.activeEndTime){
this.$message.error("请选择活动开始时间")
return
}
}
this.$refs[formName].validate((valid) => {
if (valid) {
if (this.ruleForm.courtesyReward) this.ruleForm.courtesyReward = this.ruleForm.courtesyReward.toString()
if (this.couponList) this.ruleForm.couponList = this.couponList
if (this.ruleForm.id) {
editActiveNewlyweds1(this.ruleForm).then(response => {
this.$modal.msgSuccess("修改成功");
this.getInfo()
});
}else {
insertActiveNewlyweds(this.ruleForm).then(response => {
this.$modal.msgSuccess("新增成功");
this.getInfo()
});
}
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
this.ifWrite = true
this.getInfo()
},
/** 查询新人有礼活动列表 */
getList() {
this.loading = true;
listActiveNewlyweds(this.queryParams).then(res => {
this.activeFullminusList = res.data.records
this.ztotal = res.data.total;
console.log('wwwwwc', res)
this.loading = false;
})
// this.loading = true;
// listActiveNewlyweds(this.queryParams).then(response => {
// this.activeNewlywedsList = response.data.records;
// this.total = response.data.total;
// this.loading = false;
// });
},
getoilName() {
getoilName().then(res => {
console.log(res)
this.oillist = res.data
})
},
addDatas() {
this.open = true
this.form = {
id: "",
tableDatas: [],
courtesyReward: [],
activeNewlywedsChildList: [],
}
this.form.tableDatas = []
this.tableDatas = []
this.pdidlist = []
this.pddhidlist = []
},
qrcodelook(url) {
this.loadingdialog = true
this.centerDialogVisible = true
setTimeout(() => {
this.creatQrCode(url)
this.loadingdialog = false
}, 1000);
},
creatQrCode(url) {
document.getElementById("qrCode").innerHTML = ""
new QRCode(this.$refs.qrCodeUrl, {
text: url, // 二维码的内容
width: 300,
height: 300,
colorDark: '#000',
colorLight: '#fff',
correctLevel: QRCode.CorrectLevel.H
})
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: 1,
chainStoreId: null,
storeId: null,
name: null,
activeStartTime: null,
activeEndTime: null,
courtesyReward: [],
tableDatas: [],
activeNewlywedsChildList: [],
activeCode: null,
isonline: null,
status: null,
remainderTotal: null,
points: null,
growthValue: null,
remark: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null
};
this.pdidlist = []
this.form.tableDatas = []
this.pddhidlist = []
this.tableDatas = []
this.resetForm("form");
},
// 请求兑换券
getlistExchange() {
this.tableDatadh = []
listExchange(this.duihuanquan).then(res => {
if (res.code == 200) {
this.dialogTableVisibledh = true
this.tableDatadh = res.data.records
this.dtotal = res.data.total
}
})
},
// 请求优惠券
getlistFavorable() {
this.tableData = []
listFavorable(this.youhuiquan).then(res => {
if (res.code == 200) {
this.dialogTableVisible = true
this.tableData = res.data.records
this.ytotal = res.data.total
}
})
},
// 兑换券券列表选择
Favorabledata(row) {
this.dialogTableVisibledh = false
if (this.pddhidlist.indexOf(row.id) > -1) {
this.$message.error("该兑换卡券已存在")
return
}
this.pddhidlist.push(row.id)
console.log(row)
let data = {
activeGift: 2, //活动奖品 0赠送积分1赠送优惠券 2. 赠送兑换券 3赠送成长值 4. 赠送实物
goodsIds: "", //商品id
goodsName: "", //商品名称
goodsTotal: "", //商品数量
vouchersId: row.id, //券id
giftCardName: row.name, //赠送卡券名称
giftCardType: row.type, //券类型
validityZero: null,
validityOne: null,
validityTwo: null,
validity: row.validity,
giftCardDetail: row.cardDetail, //券详情
giftCardTime: row.validity, //券有效期
giftCardTotal: 1, //券数量
instruction: row.useInstructions, //使用说明
}
this.tableDatas.push(data)
this.$message.success("新增成功")
},
// 优惠券列表选择
chosedata(row) {
this.dialogTableVisible = false
if (this.pdidlist.indexOf(row.id) > -1) {
this.$message.error("该优惠卡券已存在")
return
}
this.pdidlist.push(row.id)
let data = {
activeGift: 1, //活动奖品 0赠送积分1赠送优惠券 2. 赠送兑换券 3赠送成长值 4. 赠送实物
goodsIds: "", //商品id
goodsName: "", //商品名称
goodsTotal: "", //商品数量
vouchersId: row.id, //券id
giftCardName: row.name, //赠送卡券名称
giftCardType: row.discountType, //券类型
timeType: row.timeType,
validityZero: row.validityZero,
validityOne: row.validityOne,
validityTwo: row.validityTwo,
giftCardDetail: row.cardDetail, //券详情
giftCardTime: "", //券有效期
giftCardTotal: 1,//券数量
instruction: row.instruction,//使用说明
}
this.form.tableDatas.push(data)
this.$message.success("新增成功")
},
// 优惠券删除
deletedata(row) {
if (this.form.tableDatas && this.form.tableDatas.length > 0) {
let delIdx = -1;
for (let item of this.form.tableDatas) {
delIdx++;
if (item.id === row.id) {
break
}
}
this.pdidlist.splice(delIdx, 1);
this.form.tableDatas.splice(delIdx, 1);
}
},
// 兑换券删除
deletedhdata(row) {
if (this.tableDatas && this.tableDatas.length > 0) {
let delIdx = -1;
for (let item of this.tableDatas) {
delIdx++;
if (item.id === row.id) {
break
}
}
this.pddhidlist.splice(delIdx, 1);
this.tableDatas.splice(delIdx, 1);
}
},
lookDetail(row) {
this.opendetails = true
let data = {
id: row.id,
exchangeFrom: "新人有礼"
}
looklook(data).then(res => {
this.looklist = res.data
console.log('详情', res)
})
looklooklook(row.id).then(resp => {
this.statisticsyou = resp.data
console.log('优惠券详情统计', resp)
})
},
Deleteshan(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除此条新人有礼活动的信息?').then(function () {
return delActiveNewlyweds(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.id)
this.single = selection.length !== 1
this.multiple = !selection.length
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加新人有礼活动";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
getActiveNewlyweds(row.id).then(response => {
this.form = response.data;
if (response.data.activeNewlywedsChildList) {
this.form.tableDatas = response.data.activeNewlywedsChildList.filter(item => item.activeGift == '1')
this.tableDatas = response.data.activeNewlywedsChildList.filter(item => item.activeGift == '2')
}
this.open = true;
this.title = "编辑";
});
},
handleDeletexia(row, isonline) {
// getActiveNewlyweds(row.id).then(response => {
//
// let data = response.data
// data.isonline = 1
// updateActiveNewlyweds(data).then(response => {
// this.$modal.msgSuccess("下线成功");
// this.open = false;
// this.getList();
// });
//
// });
this.$modal.confirm('确定上线此条新人有礼活动信息?').then(function () {
return editActiveNewlyweds({id: row.id, isonline: isonline});
}).then(() => {
this.$modal.msgSuccess("上线成功");
this.open = false;
this.getList();
}).catch(() => {
});
},
submitForm() {
// this.form.activeNewlywedsChildList
this.form.activeNewlywedsChildList = this.form.tableDatas.concat(this.tableDatas);
this.$refs["form"].validate(valid => {
if (valid) {
console.log(this.form)
if (this.form.id) {
updateActiveNewlyweds(this.form).then(response => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addActiveNewlyweds(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 提交按钮 */
// submitForm() {
// // this.form.activeNewlywedsChildList
// this.form.activeNewlywedsChildList = this.form.tableDatas.concat(this.tableDatas);
// this.$refs["form"].validate(valid => {
// if (valid) {
// if (this.form.id != null) {
// updateActiveNewlyweds(this.form).then(response => {
// this.$modal.msgSuccess("修改成功");
// this.open = false;
// this.getList();
// });
// } else {
// addActiveNewlyweds(this.form).then(response => {
// this.$modal.msgSuccess("新增成功");
// this.open = false;
// this.getList();
// });
// }
// }
// });
// },
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal.confirm('是否确认删除此条新人有礼活动信息?').then(function () {
return delActiveNewlyweds(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {
});
},
/** 导出按钮操作 */
handleExport() {
this.download('business/marketingActivity/activeNewlyweds/export', {
...this.queryParams
}, `activeNewlyweds_${new Date().getTime()}.xlsx`)
}
}
};
</script>
<style scoped lang="scss">
.box-bt {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 18px;
}
.x-box {
background: #f9f9f9;
border-radius: 6px;
box-sizing: border-box;
padding: 15px;
width: 45%;
}
.cot-box {
width: 100%;
height: 89vh;
border-radius: 8px;
background: #fff;
box-sizing: border-box;
padding: 20px;
margin: 0 auto;
}
.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>