1181 lines
42 KiB
Vue
1181 lines
42 KiB
Vue
<template>
|
|
<div class="content">
|
|
<div class="tab-box">
|
|
<div class="tab_" :class="{active:index== tabindex }" @click="getindex(index)" v-for="(item,index) in tabs"
|
|
:key="index">
|
|
{{ item.name }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cot-box" v-if="tabindex==0">
|
|
<div>
|
|
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="120px">
|
|
|
|
<el-form-item label="" prop="groupName" style="width: 180px">
|
|
<el-input
|
|
v-model="queryParams.groupName"
|
|
placeholder="请输入分组名称"
|
|
clearable
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="">
|
|
<el-date-picker
|
|
v-model="beginTime"
|
|
style="width: 160px"
|
|
type="date"
|
|
placeholder="开始日期">
|
|
</el-date-picker>
|
|
至
|
|
<el-date-picker
|
|
v-model="endTime"
|
|
style="width: 160px"
|
|
type="date"
|
|
placeholder="结束日期">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item style="float: right;margin-right: 0px">
|
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
|
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
|
<el-button type="primary" @click="handleAdd">新增分组</el-button>
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
</div>
|
|
<!-- -->
|
|
<div style="height: 72vh;overflow: auto">
|
|
<el-table
|
|
:data="userGroupList"
|
|
border
|
|
style="width: 100%">
|
|
<el-table-column type="index" width="50" align="center" label="序号"/>
|
|
<el-table-column prop="groupName" align="center" label="分组名称" width="180">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.groupName || "--" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="remark" align="center" label="备注" width="180">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.remark || "--" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="userNum" align="center" label="会员数量">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.userNum || 0 }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="userProportion" align="center" label="会员占比">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.userProportion || 0 }}%</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="status" label="状态">
|
|
<template slot-scope="scope">
|
|
<el-switch
|
|
v-model="scope.row.status"
|
|
active-value="qy"
|
|
inactive-value="jy"
|
|
active-color="#13ce66"
|
|
inactive-color="#ff4949">
|
|
</el-switch>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="accountName" align="center" label="创建人">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.accountName || "--" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createTime" align="center" label="创建时间">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.createTime || "--" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="updateTime" align="center" label="更新时间">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.updateTime || "--" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="操作" width="120">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
@click="handleUpdate(scope.row)"
|
|
>修改
|
|
</el-button>
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
@click="handleDelete(scope.row)"
|
|
>删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<pagination
|
|
v-show="total>0"
|
|
:total="total"
|
|
:page.sync="queryParams.page"
|
|
:limit.sync="queryParams.pageSize"
|
|
@pagination="getList"
|
|
/>
|
|
|
|
</div>
|
|
<div class="cot-box" v-if="tabindex==1">
|
|
<div>
|
|
<el-form :model="queryParams1" ref="queryForm" size="small" :inline="true" label-width="120px">
|
|
<el-form-item label="" prop="name" style="width: 180px">
|
|
<el-input
|
|
v-model="queryParams1.name"
|
|
placeholder="请输入活动名称"
|
|
clearable
|
|
@keyup.enter.native="handleQuery"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item label="">
|
|
<el-date-picker
|
|
v-model="beginTime1"
|
|
style="width: 160px"
|
|
type="date"
|
|
placeholder="开始日期">
|
|
</el-date-picker>
|
|
至
|
|
<el-date-picker
|
|
v-model="endTime1"
|
|
style="width: 160px"
|
|
type="date"
|
|
placeholder="结束日期">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item style="float: right;margin-right: 0px">
|
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery1">搜索</el-button>
|
|
<el-button icon="el-icon-refresh" @click="resetQuery1">重置</el-button>
|
|
<el-button type="primary" @click="handleAdd1">新增定时群发</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<!-- -->
|
|
<div style="height: 72vh;overflow: auto">
|
|
<el-table
|
|
:data="massSendList"
|
|
border
|
|
style="width: 100%">
|
|
<el-table-column type="index" width="50" align="center" label="序号"/>
|
|
<el-table-column prop="name" align="center" label="活动名称" width="180">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.name || "--" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="activityTimeType" align="center" label="活动时间" width="190">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.activityTimeType==0">永久有效</span>
|
|
<span v-else>{{ scope.row.activityTimeFront }} ~ {{ scope.row.activityTimeAfter }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="sendFrequency" align="center" label="发送频次">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.sendFrequency==0">每天一次</span>
|
|
<span v-if="scope.row.sendFrequency==1">周固定时间</span>
|
|
<span v-if="scope.row.sendFrequency==2">月固定时间</span>
|
|
<span v-if="scope.row.sendFrequency==3">法定节日时间</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="sendUserNum" align="center" label="群发会员">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.sendUserNum || 0 }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="senfGift" align="center" label="群发礼品">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.senfGift || "--" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="status" align="center" label="活动状态">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.status == 0" style="color: #FF7E00">未开始</div>
|
|
<div v-if="scope.row.status == 1" style="color: #00CAFF">进行中</div>
|
|
<div v-if="scope.row.status == 2" style="color: #0DC291">已结束</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="accountName" align="center" label="创建人">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.accountName || "--" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createTime" align="center" label="创建时间">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.createTime || "--" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="操作" width="120">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
v-if="scope.row.status == 0"
|
|
@click="handleUpdate1(scope.row)"
|
|
>修改
|
|
</el-button>
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
@click="handleDelete1(scope.row)"
|
|
>删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<pagination
|
|
v-show="total1>0"
|
|
:total="total1"
|
|
:page.sync="queryParams1.page"
|
|
:limit.sync="queryParams1.pageSize"
|
|
@pagination="getList1"
|
|
/>
|
|
</div>
|
|
<div class="cot-box" v-if="tabindex==2">
|
|
<div>
|
|
<el-form :model="queryParams2" ref="queryForm" size="small" :inline="true" label-width="120px">
|
|
<el-form-item label="" prop="groupName" style="width: 180px">
|
|
<el-input placeholder="请输入活动名称" v-model="queryParams.tableName"/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="" prop="groupName" style="width: 180px">
|
|
<el-select v-model="queryParams2.status" placeholder="请选择状态">
|
|
<el-option label="已发送" value="0"></el-option>
|
|
<el-option label="发送失败" value="1"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="">
|
|
<el-date-picker
|
|
v-model="beginTime2"
|
|
style="width: 160px"
|
|
type="date"
|
|
placeholder="开始日期">
|
|
</el-date-picker>
|
|
至
|
|
<el-date-picker
|
|
v-model="endTime2"
|
|
style="width: 160px"
|
|
type="date"
|
|
placeholder="结束日期">
|
|
</el-date-picker>
|
|
</el-form-item>
|
|
<el-form-item style="float: right;margin-right: 0px">
|
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery2">搜索</el-button>
|
|
<el-button icon="el-icon-refresh" @click="resetQuery2">重置</el-button>
|
|
</el-form-item>
|
|
|
|
</el-form>
|
|
</div>
|
|
<!-- -->
|
|
<div style="height: 72vh;overflow: auto">
|
|
<el-table
|
|
:data="massSendRecordList"
|
|
border
|
|
style="width: 100%">
|
|
<el-table-column type="index" width="50" align="center" label="序号"/>
|
|
<el-table-column prop="activityName" align="center" label="活动名称" width="180">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.activityName || "--" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="sendGift" align="center" label="群发礼品">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.sendGift || "--" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="sendWay" align="center" label="群发方式">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.sendWay || "--" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="massContent" align="center" label="群发内容" width="220">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.massContent || "--" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column prop="userNum" align="center" label="群发会员数量">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.userNum || 0 }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="successNum" align="center" label="成功数量">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.successNum || 0 }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="failNum" align="center" label="失败数量">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.failNum || 0 }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="status" align="center" label="状态">
|
|
<template slot-scope="scope">
|
|
<div v-if="scope.row.status == 0" style="color: #0DC291">已发送</div>
|
|
<div v-if="scope.row.status == 1" style="color: #F44522">发送失败</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="address" align="center" label="已领取数量">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.userNum || 0 }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="address" align="center" label="已核销数量">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.userNum || 0 }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="address" align="center" label="未核销数量">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.userNum || 0 }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="accountName" align="center" label="操作人员">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.accountName || "--" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createTime" align="center" label="群发时间" width="160">
|
|
<template slot-scope="scope">
|
|
<span>{{ scope.row.createTime || "--" }}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" label="操作" width="120">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
size="mini"
|
|
type="text"
|
|
@click="handleDelete2(scope.row)"
|
|
>删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<pagination
|
|
v-show="total2>0"
|
|
:total="total2"
|
|
:page.sync="queryParams2.page"
|
|
:limit.sync="queryParams2.pageSize"
|
|
@pagination="getList2"
|
|
/>
|
|
</div>
|
|
<div style="width: 100%; height: 10px;"></div>
|
|
|
|
|
|
<!-- 添加或修改对话框 -->
|
|
<el-dialog center :title="title" :close-on-click-modal="false" :visible.sync="open" width="55%" append-to-body>
|
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
|
<div class="flax_box">
|
|
<el-form-item label="分组名称" prop="groupName">
|
|
<el-input style="width: 424px;" v-model="form.groupName" placeholder="请输入分组名称" maxlength="30"/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="会员等级" prop="gradeId">
|
|
<el-select v-model="form.gradeId" placeholder="请选择会员等级" style="width: 424px">
|
|
<el-option v-for="(item,index) in userGradeList" :key="index" :label="item.name"
|
|
:value="item.id"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="flax_box">
|
|
<el-form-item label="会员标签" prop="userLabelId">
|
|
<el-select v-model="form.userLabelId" multiple placeholder="请选择会员标签（多选）" style="width: 424px">
|
|
<el-option v-for="(item,index) in userLabelList" :key="index" :label="item.labelName"
|
|
:value="item.id+''"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="会员性别" prop="userSex">
|
|
<el-checkbox-group v-model="form.userSex">
|
|
<el-checkbox type="name" label="1">男</el-checkbox>
|
|
<el-checkbox type="name" label="0">女</el-checkbox>
|
|
<el-checkbox type="name" label="2">不详</el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
</div>
|
|
|
|
<div class="flax_box">
|
|
<el-form-item label="会员年龄" prop="paymentType">
|
|
<div class="d-s">
|
|
<el-input placeholder="请输入年龄" v-model="form.userAgeFront" style="width: 190px"></el-input>
|
|
<div style="margin: 0 15px">至</div>
|
|
<el-input placeholder="请输入年龄" v-model="form.userAgeAfter" style="width: 190px"></el-input>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="会员余额" prop="paymentType">
|
|
<div class="d-s">
|
|
<el-input placeholder="请输入余额" v-model="form.userBalanceFront" style="width: 190px"></el-input>
|
|
<div style="margin: 0 15px">至</div>
|
|
<el-input placeholder="请输入余额" v-model="form.userBalanceAfter" style="width: 190px"></el-input>
|
|
</div>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="flax_box">
|
|
<el-form-item label="会员积分" prop="paymentType">
|
|
<div class="d-s">
|
|
<el-input placeholder="请输入积分" v-model="form.userPointFront" style="width: 190px"></el-input>
|
|
<div style="margin: 0 15px">至</div>
|
|
<el-input placeholder="请输入积分" v-model="form.userPointAfter" style="width: 190px"></el-input>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="充值次数" prop="paymentType">
|
|
<div class="d-s">
|
|
<el-input placeholder="请输入充值次数" v-model="form.rechargeNumFront" style="width: 190px"></el-input>
|
|
<div style="margin: 0 15px">至</div>
|
|
<el-input placeholder="请输入充值次数" v-model="form.rechargeNumAfter" style="width: 190px"></el-input>
|
|
</div>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="flax_box">
|
|
<el-form-item label="充值金额" prop="paymentType">
|
|
<div class="d-s">
|
|
<el-input placeholder="请输入充值金额" v-model="form.rechargeAmountFront" style="width: 190px"></el-input>
|
|
<div style="margin: 0 15px">至</div>
|
|
<el-input placeholder="请输入充值金额" v-model="form.rechargeAmountAfter" style="width: 190px"></el-input>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="消费次数" prop="paymentType">
|
|
<div class="d-s">
|
|
<el-input placeholder="请输入消费次数" v-model="form.consumeNumFront" style="width: 190px"></el-input>
|
|
<div style="margin: 0 15px">至</div>
|
|
<el-input placeholder="请输入消费次数" v-model="form.consumeNumAfter" style="width: 190px"></el-input>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
</div>
|
|
|
|
<div class="flax_box">
|
|
<el-form-item label="消费油品" prop="consumeOil">
|
|
<el-select style="width: 424px" v-model="form.consumeOil" multiple placeholder="请选择油品（多选）" >
|
|
<el-option v-for="(item,index) in oilNumberList" :key="index"
|
|
:label="getOilNamess(oilNameList,item.oilName)" :value="item.oilName"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="消费金额" prop="paymentType">
|
|
<div class="d-s">
|
|
<el-input placeholder="请输入消费金额" v-model="form.consumeAmountFront" style="width: 190px"></el-input>
|
|
<div style="margin: 0 15px">至</div>
|
|
<el-input placeholder="请输入消费金额" v-model="form.consumeAmountAfter" style="width: 190px"></el-input>
|
|
</div>
|
|
</el-form-item>
|
|
</div>
|
|
|
|
<div class="flax_box">
|
|
<el-form-item label="平均消费" prop="paymentType">
|
|
<div class="d-s">
|
|
<el-input placeholder="请输入平均消费金额" v-model="form.averageConsumeFront"
|
|
style="width: 190px"></el-input>
|
|
<div style="margin: 0 15px">至</div>
|
|
<el-input placeholder="请输入平均消费金额" v-model="form.averageConsumeAfter"
|
|
style="width: 190px"></el-input>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="状态" prop="status">
|
|
<el-switch
|
|
v-model="form.status"
|
|
active-value="qy"
|
|
inactive-value="jy"
|
|
active-color="#13ce66"
|
|
inactive-color="#ff4949">
|
|
</el-switch>
|
|
</el-form-item>
|
|
</div>
|
|
<el-form-item label="消费周期" prop="consumeCycle">
|
|
<div class="d-s">
|
|
<div class="icon-type" v-for="(item,index) in paymentTypelist" :key="index"
|
|
:class="{ 'acvtive' : index === tindex }" @click="Typeindex(index)">
|
|
<img src="../../assets/images/wx.png" style="width: 20px;height: 20px" v-if="index != tindex">
|
|
<img src="../../assets/images/xz.png" style="width: 20px;height: 20px" v-if="index == tindex">
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="备注">
|
|
<el-input v-model="form.remark" placeholder="请输入备注" type="textarea"/>
|
|
</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>
|
|
|
|
<!-- 添加或修改对话框 -->
|
|
<el-dialog center :title="title" :close-on-click-modal="false" :visible.sync="open1" width="35%" append-to-body>
|
|
<el-form ref="form1" :model="form1" :rules="rules" label-width="80px">
|
|
|
|
<el-form-item label="活动名称" prop="name">
|
|
<el-input v-model="form1.name" placeholder="请输入活动名称" maxlength="30"/>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="群发会员" prop="userGroupId">
|
|
<el-select v-model="form1.userGroupId" @change="chooseGroup" placeholder="请选择群发会员" style="width: 100%">
|
|
<el-option v-for="(item,index) in groupList" :key="index" :label="item.groupName" :value="item.id"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="活动时间" prop="activityTimeType">
|
|
<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="form1.activityTimeFront"
|
|
style="width: 160px"
|
|
type="date"
|
|
placeholder="开始日期">
|
|
</el-date-picker>
|
|
<span style="margin: 0px 15px">至</span>
|
|
<el-date-picker
|
|
v-model="form1.activityTimeAfter"
|
|
style="width: 160px"
|
|
type="date"
|
|
placeholder="结束日期">
|
|
</el-date-picker>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="发送频次" prop="sendFrequency">
|
|
<div class="d-s">
|
|
<div class="icon-type" v-for="(item,index) in sendFrequencyList" :key="index"
|
|
:class="{ 'acvtive' : index === tindex2 }" @click="Typeindex2(index)">
|
|
<img src="../../assets/images/wx.png" style="width: 20px;height: 20px" v-if="index != tindex2">
|
|
<img src="../../assets/images/xz.png" style="width: 20px;height: 20px" v-if="index == tindex2">
|
|
{{ item }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<el-checkbox-group v-model="weekDay" v-if="form1.sendFrequency==1">
|
|
<el-checkbox v-for="(item,index) in weekList" :key="index" :label="item"></el-checkbox>
|
|
</el-checkbox-group>
|
|
<el-checkbox-group v-model="monthDay" v-if="form1.sendFrequency==2">
|
|
<el-checkbox v-for="item in 31" :key="item" :label="item+''">{{ item }}日</el-checkbox>
|
|
</el-checkbox-group>
|
|
<el-time-picker
|
|
v-model="form1.sendTime"
|
|
format="HH:mm"
|
|
placeholder="请选择发送时间点">
|
|
</el-time-picker>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="群发方式" prop="sendWay">
|
|
<div style="display: flex">
|
|
<el-checkbox-group v-model="form1.sendWay">
|
|
<el-checkbox label="短信消息"></el-checkbox>
|
|
</el-checkbox-group>
|
|
<el-tooltip class="item" effect="light" content="仅对有手机号的会员进行群发" placement="right">
|
|
<img style="width: 16px;height: 16px;margin-top: 9px;margin-left: 10px" src="@/assets/images/wenhao.png">
|
|
</el-tooltip>
|
|
</div>
|
|
</el-form-item>
|
|
<el-form-item label="群发礼品" prop="senfGift">
|
|
<el-checkbox-group v-model="form1.senfGift">
|
|
<el-checkbox label="积分"></el-checkbox>
|
|
<el-checkbox label="优惠券"></el-checkbox>
|
|
<el-checkbox label="成长值"></el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
<el-form-item label="短信模板" prop="messageId">
|
|
<el-select v-model="form1.messageId" placeholder="请选择短信模板名称" style="width: 100%">
|
|
<el-option v-for="(item,index) in messageList" :key="index" :label="item.name" :value="item.id"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="跳转链接" prop="jumpLink">
|
|
<div class="d-s">
|
|
<div class="icon-type" v-for="(item,index) in jumpLinkList" :key="index"
|
|
:class="{ 'acvtive' : index === tindex3 }" @click="Typeindex3(index)">
|
|
<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 }}
|
|
</div>
|
|
</div>
|
|
<el-select v-if="form1.jumpLink==0" v-model="form1.appletJumpPage" placeholder="请选择跳转页面"
|
|
style="width: 100%">
|
|
<el-option v-for="(item,index) in jumpPageList" :key="index" :label="item.name"
|
|
:value="item.id"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<!-- <el-form-item label="会员数量">-->
|
|
<!-- {{ form1.sendUserNum }}-->
|
|
<!-- </el-form-item>-->
|
|
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" @click="submitForm1">确 定</el-button>
|
|
<el-button @click="cancel1">取 消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {addUserGroup, deleteUserGroup, editUserGroup, getUserGroup, listUserGroup} from "../../api/userGroup/usergroup";
|
|
import {
|
|
addUserMassSend,
|
|
deleteUserMassSend,
|
|
editUserMassSend,
|
|
getUserMassSend,
|
|
listUserMassSend
|
|
} from "@/api/userGroup/userMassSend";
|
|
import {deleteUserMassSendRecord, listUserMassSendRecord} from "@/api/userGroup/userMassSendRecord";
|
|
import {listUserLabel} from "@/api/staff/user/userlabel";
|
|
import {listUserGrade} from "@/api/staff/user/usergrade";
|
|
import {getOilNameList, oilNumberList} from "@/api/order/oilnumgun";
|
|
import {getListApi} from "@/api/setting/message";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
tabindex: 0,
|
|
tindex: 0,
|
|
tindex1: 0,
|
|
tindex2: 0,
|
|
tindex3: 0,
|
|
paymentTypelist: [
|
|
"不限制", "7天", "15天", "30天", "60天", "90天", "180天",
|
|
],
|
|
activityTimeTypeList: [
|
|
"永久有效", "自定义"
|
|
],
|
|
sendFrequencyList: [
|
|
"每天一次", "周固定时间", "月固定时间", "法定节日时间"
|
|
],
|
|
jumpLinkList: [
|
|
"小程序链接", "常用链接"
|
|
],
|
|
weekList: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
|
|
weekDay: [],
|
|
monthDay: [],
|
|
tableData: [{
|
|
status: 0,
|
|
date: '2016-05-02',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1518 弄'
|
|
}, {
|
|
status: 0,
|
|
date: '2016-05-04',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1517 弄'
|
|
}, {
|
|
status: 0,
|
|
date: '2016-05-01',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1519 弄'
|
|
}, {
|
|
status: 0,
|
|
date: '2016-05-03',
|
|
name: '王小虎',
|
|
address: '上海市普陀区金沙江路 1516 弄'
|
|
}],
|
|
input: '',
|
|
value: '',
|
|
tabs: [
|
|
{
|
|
name: "分组管理",
|
|
},
|
|
{
|
|
name: "定时群发",
|
|
},
|
|
{
|
|
name: "群发记录",
|
|
}
|
|
],
|
|
|
|
total: 0,
|
|
queryParams: {
|
|
page: 1,
|
|
pageSize: 10
|
|
},
|
|
beginTime: "",
|
|
endTime: "",
|
|
userGroupList: [],
|
|
|
|
total1: 0,
|
|
queryParams1: {
|
|
page: 1,
|
|
pageSize: 10
|
|
},
|
|
beginTime1: "",
|
|
endTime1: "",
|
|
massSendList: [],
|
|
|
|
total2: 0,
|
|
queryParams2: {
|
|
page: 1,
|
|
pageSize: 10
|
|
},
|
|
beginTime2: "",
|
|
endTime2: "",
|
|
massSendRecordList: [],
|
|
|
|
title: '',
|
|
open: false,
|
|
form: {userSex: []},
|
|
userLabelList: [],
|
|
userGradeList: [],
|
|
oilNameList: [],
|
|
// 油号列表
|
|
oilNumberList: [],
|
|
|
|
open1: false,
|
|
form1: {userSex: []},
|
|
messageList: [],
|
|
jumpPageList: [
|
|
{id: 0, name: "首页"},
|
|
{id: 1, name: "一键加油"},
|
|
{id: 2, name: "储值卡充值"},
|
|
{id: 3, name: "囤油卡充值"},
|
|
{id: 4, name: "礼品卡兑换"},
|
|
{id: 5, name: "消费有礼"},
|
|
{id: 6, name: "折扣营销"},
|
|
{id: 7, name: "满减营销"},
|
|
{id: 8, name: "积分商城"},
|
|
{id: 9, name: "邀请有礼"},
|
|
],
|
|
groupList:[],
|
|
|
|
// 表单校验
|
|
rules: {
|
|
groupName: [
|
|
{required: true, message: "分组名称不能为空", trigger: "blur"},
|
|
],
|
|
status: [
|
|
{required: true, message: "状态不能为空", trigger: "blur"}
|
|
],
|
|
name: [
|
|
{required: true, message: "活动名称不能为空", trigger: "blur"}
|
|
],
|
|
userGroupId: [
|
|
{required: true, message: "群发会员不能为空", trigger: "blur"}
|
|
],
|
|
activityTimeType: [
|
|
{required: true, message: "活动时间不能为空", trigger: "blur"}
|
|
],
|
|
sendFrequency: [
|
|
{required: true, message: "发送频次不能为空", trigger: "blur"}
|
|
],
|
|
sendWay: [
|
|
{required: true, message: "群发方式不能为空", trigger: "blur"}
|
|
],
|
|
senfGift: [
|
|
{required: true, message: "群发礼品不能为空", trigger: "blur"}
|
|
],
|
|
messageId: [
|
|
{required: true, message: "短信模板不能为空", trigger: "blur"}
|
|
],
|
|
}
|
|
};
|
|
},
|
|
created() {
|
|
this.getList()
|
|
this.getUserLabelList()
|
|
},
|
|
methods: {
|
|
// 定时群发选择分组
|
|
chooseGroup(){
|
|
this.groupList.forEach(item => {
|
|
if (this.form1.userGroupId==item.id){
|
|
this.form1.sendUserNum = item.userNum
|
|
}
|
|
})
|
|
},
|
|
getUserLabelList() {
|
|
listUserLabel({page: 1, pageSize: 10, status: 'qy'}).then(res => {
|
|
this.userLabelList = res.data.records
|
|
})
|
|
listUserGrade({page: 1, pageSize: 20}).then(response => {
|
|
this.userGradeList = response.data.records;
|
|
});
|
|
getOilNameList().then(response => {
|
|
this.oilNameList = response.data;
|
|
})
|
|
oilNumberList().then(response => {
|
|
this.oilNumberList = response.data.records;
|
|
})
|
|
},
|
|
getMessageList() {
|
|
getListApi({page: 1, pageSize: 10000, status: '1'}).then(res => {
|
|
this.messageList = res.data.records;
|
|
})
|
|
|
|
listUserGroup({page: 1, pageSize: 10000, status: 'qy'}).then(res => {
|
|
this.groupList = res.data.records
|
|
})
|
|
},
|
|
getOilNamess(list, id) {
|
|
let name = ""
|
|
if (list != null && list != "") {
|
|
list.forEach(item => {
|
|
if (item.id == id) {
|
|
name = item.oilName;
|
|
}
|
|
})
|
|
}
|
|
return name;
|
|
},
|
|
// 取消按钮
|
|
cancel1() {
|
|
this.open1 = false;
|
|
this.reset();
|
|
},
|
|
// 提交按钮
|
|
submitForm1: function () {
|
|
this.$refs["form1"].validate(valid => {
|
|
if (valid) {
|
|
this.form1.sendWay = this.form1.sendWay.toString()
|
|
this.form1.senfGift = this.form1.senfGift.toString()
|
|
if (this.form1.sendFrequency==1){
|
|
if (this.weekDay.length>0) this.form1.sendDate = this.weekDay.toString()
|
|
}else if (this.form1.sendFrequency==2){
|
|
if (this.monthDay.length>0) this.form1.sendDate = this.monthDay.toString()
|
|
}
|
|
if (!this.form1.id) {
|
|
addUserMassSend(this.form1).then(res => {
|
|
this.$message.success("添加成功")
|
|
this.open1 = false
|
|
this.queryParams1.page = 1;
|
|
this.getList1()
|
|
})
|
|
} else {
|
|
editUserMassSend(this.form1).then(res => {
|
|
this.$message.success("修改成功")
|
|
this.open1 = false
|
|
this.queryParams1.page = 1;
|
|
this.getList1()
|
|
})
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 取消按钮
|
|
cancel() {
|
|
this.open = false;
|
|
this.reset();
|
|
},
|
|
// 提交按钮
|
|
submitForm: function () {
|
|
this.$refs["form"].validate(valid => {
|
|
if (valid) {
|
|
if (this.form.userSex) this.form.userSex = this.form.userSex.toString()
|
|
if (this.form.userLabelId) this.form.userLabelId = this.form.userLabelId.toString()
|
|
if (this.form.consumeOil) this.form.consumeOil = this.form.consumeOil.toString()
|
|
if (!this.form.id) {
|
|
addUserGroup(this.form).then(res => {
|
|
this.$message.success("添加成功")
|
|
this.open = false
|
|
this.queryParams.page = 1;
|
|
this.getList()
|
|
})
|
|
} else {
|
|
editUserGroup(this.form).then(res => {
|
|
this.$message.success("修改成功")
|
|
this.open = false
|
|
this.queryParams.page = 1;
|
|
this.getList()
|
|
})
|
|
}
|
|
}
|
|
});
|
|
},
|
|
Typeindex(index) {
|
|
this.tindex = index
|
|
this.form.consumeCycle = index
|
|
},
|
|
Typeindex1(index) {
|
|
this.tindex1 = index
|
|
this.form1.activityTimeType = index
|
|
},
|
|
Typeindex2(index) {
|
|
this.tindex2 = index
|
|
this.form1.sendFrequency = index
|
|
},
|
|
Typeindex3(index) {
|
|
this.tindex3 = index
|
|
this.form1.jumpLink = index
|
|
},
|
|
getList() {
|
|
let dateRange = []
|
|
if (this.beginTime && this.endTime) {
|
|
dateRange.push(this.beginTime.toLocaleDateString())
|
|
dateRange.push(this.endTime.toLocaleDateString())
|
|
}
|
|
listUserGroup(this.addDateRange(this.queryParams, dateRange)).then(res => {
|
|
this.userGroupList = res.data.records
|
|
this.total = res.data.total
|
|
})
|
|
},
|
|
getList1() {
|
|
let dateRange = []
|
|
if (this.beginTime1 && this.endTime1) {
|
|
dateRange.push(this.beginTime1.toLocaleDateString())
|
|
dateRange.push(this.endTime1.toLocaleDateString())
|
|
}
|
|
listUserMassSend(this.addDateRange(this.queryParams1, dateRange)).then(res => {
|
|
this.massSendList = res.data.records
|
|
this.total1 = res.data.total
|
|
})
|
|
},
|
|
getList2() {
|
|
let dateRange = []
|
|
if (this.beginTime2 && this.endTime2) {
|
|
dateRange.push(this.beginTime2.toLocaleDateString())
|
|
dateRange.push(this.endTime2.toLocaleDateString())
|
|
}
|
|
listUserMassSendRecord(this.addDateRange(this.queryParams2, dateRange)).then(res => {
|
|
this.massSendRecordList = res.data.records
|
|
this.total2 = res.data.total
|
|
})
|
|
},
|
|
// 修改按钮操作
|
|
handleUpdate(row) {
|
|
this.reset();
|
|
getUserGroup(row.id).then(res => {
|
|
this.open = true;
|
|
this.form = res.data;
|
|
if (res.data.userSex) {
|
|
this.form.userSex = res.data.userSex.split(",")
|
|
} else {
|
|
this.form.userSex = []
|
|
}
|
|
if (res.data.userLabelId) this.form.userLabelId = res.data.userLabelId.split(",")
|
|
if (res.data.consumeOil) this.form.consumeOil = res.data.consumeOil.split(",")
|
|
if (res.data.consumeCycle) this.tindex = res.data.consumeCycle
|
|
this.title = "修改会员分组"
|
|
})
|
|
},
|
|
// 修改按钮操作
|
|
handleUpdate1(row) {
|
|
getUserMassSend(row.id).then(res => {
|
|
this.open1 = true;
|
|
this.form1 = res.data;
|
|
if (res.data.sendDate){
|
|
if (res.data.sendFrequency==1) {
|
|
this.weekDay = res.data.sendDate.split(",")
|
|
}else if (res.data.sendFrequency==2){
|
|
this.monthDay = res.data.sendDate.split(",")
|
|
}
|
|
}else {
|
|
this.monthDay = []
|
|
this.weekDay = []
|
|
}
|
|
this.form1.sendWay = res.data.sendWay.split(",")
|
|
this.form1.senfGift = res.data.senfGift.split(",")
|
|
this.title = "修改定时群发"
|
|
})
|
|
},
|
|
// 表单重置
|
|
reset() {
|
|
this.resetForm("form");
|
|
},
|
|
// 删除按钮操作
|
|
handleDelete(row) {
|
|
const name = row.labelName || this.id;
|
|
this.$modal.confirm('是否删除本条数据，删除后无法恢复！').then(function () {
|
|
return deleteUserGroup(row.id);
|
|
}).then(() => {
|
|
this.queryParams.page = 1
|
|
this.getList();
|
|
this.$modal.msgSuccess("删除成功");
|
|
}).catch(() => {
|
|
});
|
|
},
|
|
// 删除按钮操作
|
|
handleDelete1(row) {
|
|
const name = row.labelName || this.id;
|
|
this.$modal.confirm('是否删除本条数据，删除后无法恢复！').then(function () {
|
|
return deleteUserMassSend(row.id);
|
|
}).then(() => {
|
|
this.queryParams1.page = 1
|
|
this.getList1();
|
|
this.$modal.msgSuccess("删除成功");
|
|
}).catch(() => {
|
|
});
|
|
},
|
|
// 删除按钮操作
|
|
handleDelete2(row) {
|
|
const name = row.labelName || this.id;
|
|
this.$modal.confirm('是否删除本条数据，删除后无法恢复！').then(function () {
|
|
return deleteUserMassSendRecord(row.id);
|
|
}).then(() => {
|
|
this.queryParams2.page = 1
|
|
this.getList2();
|
|
this.$modal.msgSuccess("删除成功");
|
|
}).catch(() => {
|
|
});
|
|
},
|
|
// 新增按钮操作
|
|
handleAdd1() {
|
|
this.tindex1 = 0
|
|
this.tindex2 = 0
|
|
this.tindex3 = 0
|
|
this.form1 = {
|
|
sendWay: [],
|
|
senfGift: [],
|
|
activityTimeType:this.tindex1,
|
|
sendFrequency:this.tindex2,
|
|
jumpLink:this.tindex3,
|
|
sendUserNum:0,
|
|
}
|
|
this.monthDay = []
|
|
this.weekDay = []
|
|
this.open1 = true;
|
|
this.title = "新增定时群发";
|
|
},
|
|
// 新增按钮操作
|
|
handleAdd() {
|
|
this.tindex = 0
|
|
this.reset();
|
|
this.form = {
|
|
status: "qy",
|
|
userSex: [],
|
|
consumeCycle: this.tindex
|
|
}
|
|
this.open = true;
|
|
this.title = "新增会员标签";
|
|
},
|
|
// 搜索按钮操作
|
|
handleQuery2() {
|
|
this.queryParams2.page = 1;
|
|
this.getList2();
|
|
},
|
|
// 重置按钮操作
|
|
resetQuery2() {
|
|
this.queryParams2 = {
|
|
page: 1,
|
|
pageSize: 10,
|
|
}
|
|
this.beginTime2 = ''
|
|
this.endTime2 = ''
|
|
this.handleQuery2();
|
|
},
|
|
// 搜索按钮操作
|
|
handleQuery1() {
|
|
this.queryParams1.page = 1;
|
|
this.getList1();
|
|
},
|
|
// 重置按钮操作
|
|
resetQuery1() {
|
|
this.queryParams1 = {
|
|
page: 1,
|
|
pageSize: 10,
|
|
}
|
|
this.beginTime1 = ''
|
|
this.endTime1 = ''
|
|
this.handleQuery1();
|
|
},
|
|
// 搜索按钮操作
|
|
handleQuery() {
|
|
this.queryParams.page = 1;
|
|
this.getList();
|
|
},
|
|
// 重置按钮操作
|
|
resetQuery() {
|
|
this.dateRange = [];
|
|
this.queryParams = {
|
|
page: 1,
|
|
pageSize: 10,
|
|
}
|
|
this.beginTime = ''
|
|
this.endTime = ''
|
|
this.handleQuery();
|
|
},
|
|
getindex(index) {
|
|
this.tabindex = index
|
|
if (index == 0) {
|
|
this.getList()
|
|
this.getUserLabelList()
|
|
} else if (index == 1) {
|
|
this.getList1()
|
|
this.getMessageList()
|
|
} else if (index == 2) {
|
|
this.getList2()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.content {
|
|
background: #f5f7f8;
|
|
width: 100%;
|
|
}
|
|
|
|
.tab-box {
|
|
width: 100%;
|
|
height: 40px;
|
|
background: #fff;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
border-top: 1px solid #eceff1;
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
.tab_ {
|
|
width: 75px;
|
|
height: 100%;
|
|
//border-bottom: 2px solid #FF770F;
|
|
display: flex;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
color: #999999;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 50px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.active {
|
|
border-bottom: 2px solid #FF770F !important;
|
|
color: #FF770F !important;
|
|
}
|
|
|
|
.cot-box {
|
|
width: 99%;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
box-sizing: border-box;
|
|
padding: 20px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.d-s-b {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
.flax_box{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.acvtive {
|
|
color: #FF770F !important;
|
|
}
|
|
</style>
|