更新优化
This commit is contained in:
@@ -0,0 +1,630 @@
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" :title="form.id ? '编辑推送任务' : '添加推送任务'" width="1200px" top="4vh"
|
||||
@closed="formRef.resetFields()">
|
||||
<div class="scroll" ref="scrollRef">
|
||||
<el-form ref="formRef" :model="form" :rules="formRules" label-width="160px">
|
||||
<div class="title">选择目标用户</div>
|
||||
<el-form-item label-width="0">
|
||||
<div class="shop_user_wrap">
|
||||
<div class="item">
|
||||
<el-form-item label="发送对象">
|
||||
<el-radio-group v-model="form.userType">
|
||||
<el-radio label="全部绑定手机号用户" :value="1"></el-radio>
|
||||
<el-radio label="自定义用户" :value="2"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<div v-if="form.userType == 2">
|
||||
<el-form-item label="性别">
|
||||
<el-checkbox v-model="form.pushEventUser.sexMan" label="男" :true-value="1"
|
||||
:false-value="0"></el-checkbox>
|
||||
<el-checkbox v-model="form.pushEventUser.sexWoman" label="女" :true-value="1"
|
||||
:false-value="0"></el-checkbox>
|
||||
<el-checkbox v-model="form.pushEventUser.sexUnknown" label="未知" :true-value="1"
|
||||
:false-value="0"></el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item label="下单">
|
||||
<el-checkbox v-model="form.pushEventUser.noOrder" label="从未下单" :true-value="1"
|
||||
:false-value="0"></el-checkbox>
|
||||
<el-checkbox v-model="form.pushEventUser.oneOrder" label="下过1单" :true-value="1"
|
||||
:false-value="0"></el-checkbox>
|
||||
<el-checkbox v-model="form.pushEventUser.fiveOrder" label="下过5单及以上" :true-value="1"
|
||||
:false-value="0"></el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item label="下单时间">
|
||||
<el-checkbox v-model="form.pushEventUser.orderTimeToday" label="今天" :true-value="1"
|
||||
:false-value="0"></el-checkbox>
|
||||
<el-checkbox v-model="form.pushEventUser.orderTimeYesterday" label="昨天" :true-value="1"
|
||||
:false-value="0"></el-checkbox>
|
||||
<el-checkbox v-model="form.pushEventUser.orderTimeTwoWeeks" label="2周内" :true-value="1"
|
||||
:false-value="0"></el-checkbox>
|
||||
<el-checkbox v-model="form.pushEventUser.orderTimeMoreThanTwoWeeks" label="2周前" :true-value="1"
|
||||
:false-value="0"></el-checkbox>
|
||||
</el-form-item>
|
||||
<el-form-item label="会员">
|
||||
<el-radio-group v-model="form.pushEventUser.isVip">
|
||||
<el-radio label="全部" value=""></el-radio>
|
||||
<el-radio label="会员" :value="1"></el-radio>
|
||||
<el-radio label="非会员" :value="0"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="充值">
|
||||
<el-radio-group v-model="form.pushEventUser.isRecharge">
|
||||
<el-radio label="全部" value=""></el-radio>
|
||||
<el-radio label="从未充值过" :value="0"></el-radio>
|
||||
<el-radio label="充值过" :value="1"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label-width="160" style="margin-top: 50px;">
|
||||
<el-button type="primary" icon="Search" :loading="userTableData.loading"
|
||||
@click="getPushEventUserAjax">搜索</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="item2">
|
||||
<div class="user_wrap" v-loading="userTableData.loading">
|
||||
<div class="user_header">
|
||||
<span>预计发送</span>
|
||||
<span>{{ form.estimateNum }}人</span>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item" v-for="item in userTableData.list" :key="item.id">
|
||||
<div class="avatar">
|
||||
<el-avatar :size="50" :src="item.headImg" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="name">{{ item.nickName }}</div>
|
||||
<div class="info_wrap">
|
||||
<span>余额：{{ item.amount }}</span>
|
||||
<span>积分：{{ item.accountPoints }}</span>
|
||||
<span>手机号：{{ item.phone }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex;justify-content: center;padding-bottom: 14px;">
|
||||
<el-pagination v-model:current-page="userTableData.page" v-model:page-size="userTableData.pageSize"
|
||||
:page-sizes="[100, 200, 300, 400]" background layout="prev, pager, next"
|
||||
:total="userTableData.total" @size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div class="title">发送内容</div>
|
||||
<el-form-item label="商家名称">
|
||||
<el-input placeholder="请输入文字" v-model="form.shopName" disabled :maxlength="20" show-word-limit
|
||||
style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="商家地址" prop="address">
|
||||
<el-input placeholder="请输入文字" type="textarea" :rows="4" v-model="form.address" :maxlength="10" show-word-limit
|
||||
style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动描述" prop="activityDetail">
|
||||
<el-input type="textarea" v-model="form.activityDetail" :rows="4" placeholder="请输入活动描述" :maxlength="20"
|
||||
show-word-limit style="width: 300px;"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="活动时间" prop="activityTime">
|
||||
<el-date-picker v-model="form.activityTime" type="datetime" placeholder="请选择时间" format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss" style="width: 300px;" />
|
||||
</el-form-item>
|
||||
<el-form-item label="赠送优惠券">
|
||||
<div class="column">
|
||||
<div class="center" v-for="(item, index) in selectCoupons" :key="item.id">
|
||||
<el-select v-model="item.id" @change="selectCouponChnge($event, index)">
|
||||
<el-option :label="val.title" :value="val.id" v-for="val in couponList" :key="val.id"></el-option>
|
||||
</el-select>
|
||||
<el-input v-model="item.num" input-style="text-align:center;">
|
||||
<template #append>数量</template>
|
||||
</el-input>
|
||||
<div class="del" @click="selectCoupons.splice(index, 1)">
|
||||
<el-icon size="18" color="#FF2F2F">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<el-button link type="primary" icon="CirclePlus" @click="addCoupon">新增券</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<div class="title">发送设置</div>
|
||||
<el-form-item label="发送时间">
|
||||
<el-radio-group v-model="form.sendType">
|
||||
<el-radio label="立即发送" :value="1"></el-radio>
|
||||
<el-radio label="定时发送" :value="2"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择时间" v-if="form.sendType == 2" prop="sendTime">
|
||||
<el-date-picker v-model="form.sendTime" type="datetime" placeholder="请选择发送时间" format="YYYY-MM-DD HH:mm:ss"
|
||||
value-format="YYYY-MM-DD HH:mm:ss" :min-date="minTime" :teleported="false" style="width: 220px;"
|
||||
@open="refreshMinTime" @change="handleChange" />
|
||||
</el-form-item>
|
||||
<el-form-item label="预计发送人数">
|
||||
{{ form.estimateNum }}人
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="短信单价">
|
||||
{{ notePirce }}元/条
|
||||
</el-form-item>
|
||||
<el-form-item label="预计费用">
|
||||
¥{{ predictPrice }}
|
||||
</el-form-item>
|
||||
<el-form-item label="账户余额">
|
||||
¥{{ multiplyAndFormat(shopBalance.money || 0) }}
|
||||
<span v-if="predictPrice > shopBalance.money"
|
||||
style="color:#FF2F2F;margin-left: 14px;">余额不足，请联系管理员充值后再发送</span>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" :disabled="form.estimateNum <= 0" :loading="loading" @click="submitHandle">确
|
||||
定</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import _ from 'lodash'
|
||||
import { multiplyAndFormat } from '@/utils'
|
||||
import { ref, reactive, onMounted, computed, nextTick } from 'vue'
|
||||
import { getAcPushEventUser, couponPage, acPushEventPost, smsMoneyGet, smsMoneyGetFee } from '@/api/coupon'
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const smsPushEventUserObj = ref({
|
||||
sexMan: 1,
|
||||
sexWoman: 1,
|
||||
sexUnknown: 1,
|
||||
noOrder: 1,
|
||||
oneOrder: 0,
|
||||
fiveOrder: 0,
|
||||
orderTimeToday: 0,
|
||||
orderTimeYesterday: 0,
|
||||
orderTimeTwoWeeks: 0,
|
||||
orderTimeMoreThanTwoWeeks: 0,
|
||||
isVip: '',
|
||||
isRecharge: '',
|
||||
vipLevel: 0,
|
||||
vipLevelId: 0
|
||||
})
|
||||
|
||||
const form = ref({
|
||||
id: '',
|
||||
shopId: localStorage.getItem('shopId') || '',
|
||||
userType: 1,
|
||||
pushEventId: '',
|
||||
estimateNum: 0, // 预计人数
|
||||
coupon: '',
|
||||
shopName: '',
|
||||
activityDetail: '',
|
||||
activityTime: '',
|
||||
address: '',
|
||||
sendType: 1,
|
||||
sendTime: '',
|
||||
pushEventUser: { ...smsPushEventUserObj.value }
|
||||
})
|
||||
|
||||
const resetForm = ref({})
|
||||
|
||||
const formRules = ref({
|
||||
address: [
|
||||
{
|
||||
required: true,
|
||||
validator: (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入商家地址'));
|
||||
return;
|
||||
}
|
||||
if (value && value.length > 10) {
|
||||
callback(new Error('最多10个字'));
|
||||
return;
|
||||
}
|
||||
callback();
|
||||
},
|
||||
trigger: 'blur'
|
||||
},
|
||||
],
|
||||
activityDetail: [
|
||||
{ required: true, message: '请输入活动描述', trigger: 'blur' },
|
||||
],
|
||||
activityTime: [
|
||||
{ required: true, message: '请选择活动时间', trigger: 'change' },
|
||||
],
|
||||
coupon: [
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
// value 是 selectCoupons.value 的 JSON 字符串
|
||||
let coupons = selectCoupons.value;
|
||||
if (coupons.length === 0) {
|
||||
// 没有添加优惠券，不校验
|
||||
callback();
|
||||
} else {
|
||||
// 校验每个优惠券
|
||||
for (let i = 0; i < coupons.length; i++) {
|
||||
if (!coupons[i].id) {
|
||||
callback(new Error('请选择优惠券'));
|
||||
return;
|
||||
}
|
||||
if (!coupons[i].num || !Number.isInteger(Number(coupons[i].num)) || Number(coupons[i].num) <= 0) {
|
||||
callback(new Error('请输入大于零的优惠券数量'));
|
||||
return;
|
||||
}
|
||||
}
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: 'change'
|
||||
}
|
||||
],
|
||||
sendTime: [
|
||||
{
|
||||
required: (form) => form.sendType == 2,
|
||||
message: '请选择发送时间',
|
||||
trigger: 'change'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// 最小可选时间（响应式）
|
||||
const minTime = ref(new Date());
|
||||
|
||||
// 刷新最小时间为当前时间
|
||||
const refreshMinTime = () => {
|
||||
minTime.value = new Date(); // 每次打开面板，强制更新为当前时间
|
||||
};
|
||||
|
||||
// 变更时二次校验（防止极端情况）
|
||||
const handleChange = (value) => {
|
||||
if (!value) return;
|
||||
const selectedTime = new Date(value).getTime();
|
||||
const currentTime = new Date().getTime();
|
||||
if (selectedTime < currentTime) {
|
||||
form.value.sendTime = '';
|
||||
ElMessage.warning('选择的时间不能早于当前时间');
|
||||
}
|
||||
};
|
||||
|
||||
// 开始提交
|
||||
const formRef = ref(null)
|
||||
const emits = defineEmits(["success"]);
|
||||
const loading = ref(false);
|
||||
|
||||
function submitHandle() {
|
||||
formRef.value.validate(async (valid) => {
|
||||
try {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
let data = { ...form.value }
|
||||
data.coupon = JSON.stringify(selectCoupons.value);
|
||||
// console.log(data.json);
|
||||
// return
|
||||
await acPushEventPost(data, data.id ? 'put' : 'post');
|
||||
emits("success");
|
||||
dialogVisible.value = false;
|
||||
|
||||
ElNotification({
|
||||
title: '注意',
|
||||
message: '保存成功',
|
||||
type: 'success'
|
||||
})
|
||||
|
||||
form.value = { ...resetForm.value }
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
loading.value = false;
|
||||
});
|
||||
}
|
||||
|
||||
// 获取用户列表
|
||||
const notePirce = ref(0); // 短信单价
|
||||
|
||||
// 预计费用
|
||||
const predictPrice = computed(() => {
|
||||
return multiplyAndFormat(form.value.estimateNum, notePirce.value);
|
||||
})
|
||||
|
||||
const userTableData = reactive({
|
||||
loading: false,
|
||||
list: [],
|
||||
total: 0,
|
||||
page: 1,
|
||||
pageSize: 5
|
||||
})
|
||||
|
||||
// 获取推送用户
|
||||
async function getPushEventUserAjax() {
|
||||
try {
|
||||
userTableData.loading = true
|
||||
const res = await getAcPushEventUser({
|
||||
...form.value.pushEventUser,
|
||||
isAll: form.value.userType,
|
||||
shopId: form.value.shopId,
|
||||
page: userTableData.page,
|
||||
size: userTableData.pageSize
|
||||
})
|
||||
userTableData.list = res.records
|
||||
userTableData.total = res.totalRow
|
||||
form.value.estimateNum = res.totalRow
|
||||
|
||||
console.log(form.value);
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
setTimeout(() => {
|
||||
userTableData.loading = false
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// 分页大小发生变化
|
||||
function handleSizeChange(e) {
|
||||
userTableData.pageSize = e;
|
||||
getPushEventUserAjax();
|
||||
}
|
||||
|
||||
// 分页发生变化
|
||||
function handleCurrentChange(e) {
|
||||
userTableData.page = e;
|
||||
getPushEventUserAjax();
|
||||
}
|
||||
|
||||
// 获取商户短信余额
|
||||
const shopBalance = ref('')
|
||||
async function smsMoneyGetAjax() {
|
||||
try {
|
||||
const res = await smsMoneyGet()
|
||||
shopBalance.value = res
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取短信单价
|
||||
async function smsMoneyGetFeeAjax() {
|
||||
try {
|
||||
const res = await smsMoneyGetFee()
|
||||
console.log('获取短信单价', res);
|
||||
notePirce.value = +res.paramValue
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 显示弹窗
|
||||
const scrollRef = ref(null);
|
||||
async function show(obj, temp = null) {
|
||||
dialogVisible.value = true
|
||||
nextTick(() => {
|
||||
if (scrollRef.value) {
|
||||
setTimeout(() => {
|
||||
scrollRef.value.scrollTop = 0;
|
||||
}, 50);
|
||||
}
|
||||
});
|
||||
|
||||
// smsMoneyGetAjax()
|
||||
// smsMoneyGetFeeAjax()
|
||||
|
||||
if (obj && obj.id) {
|
||||
form.value = { ...obj }
|
||||
form.value.userType = +obj.userType
|
||||
if (obj.userType == 1) {
|
||||
form.value.pushEventUser = { ...smsPushEventUserObj.value }
|
||||
}
|
||||
|
||||
// 解析优惠券
|
||||
if (form.value.coupon) {
|
||||
try {
|
||||
const coupons = JSON.parse(form.value.coupon)
|
||||
if (Array.isArray(coupons)) {
|
||||
selectCoupons.value = coupons
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
} else {
|
||||
selectCoupons.value = []
|
||||
}
|
||||
} else {
|
||||
form.value = { ...resetForm.value }
|
||||
form.value.shopName = shopInfo.value.shopName || ''
|
||||
form.value.address = shopInfo.value.address || ''
|
||||
selectCoupons.value = []
|
||||
form.value.estimateNum = userTableData.total
|
||||
}
|
||||
getPushEventUserAjax()
|
||||
}
|
||||
|
||||
// 从本地获取商户信息
|
||||
const shopInfo = ref(JSON.parse(localStorage.getItem("userInfo")));
|
||||
|
||||
// 选择优惠券开始
|
||||
const couponList = ref([])
|
||||
const selectCoupons = ref([]);
|
||||
const couponObj = ref({ id: '', num: 1, title: '' });
|
||||
|
||||
// 选择优惠券添加标题
|
||||
function selectCouponChnge(e, index) {
|
||||
const coupon = couponList.value.find(item => item.id === e)
|
||||
if (coupon) {
|
||||
selectCoupons.value[index].title = coupon.title
|
||||
}
|
||||
}
|
||||
|
||||
// 新增优惠券
|
||||
function addCoupon() {
|
||||
selectCoupons.value.push(_.cloneDeep(couponObj.value));
|
||||
}
|
||||
|
||||
// 获取优惠券列表
|
||||
async function couponPageAjax() {
|
||||
try {
|
||||
const res = await couponPage({
|
||||
shopId: form.value.shopId,
|
||||
page: 1,
|
||||
size: 500
|
||||
})
|
||||
couponList.value = res.records
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
// 选择优惠券结束
|
||||
|
||||
defineExpose({
|
||||
show
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
resetForm.value = { ...form.value }
|
||||
couponPageAjax()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.title {
|
||||
color: #000;
|
||||
padding: 14px;
|
||||
background-color: #f8f8f8;
|
||||
margin-bottom: 14px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
height: 76vh;
|
||||
padding-bottom: 60px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.del {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.shop_user_wrap {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
|
||||
.item {
|
||||
flex: 1;
|
||||
|
||||
.temp_preview {
|
||||
border: 1px solid #D9D9D9;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
background-color: #F8F8F8;
|
||||
padding: 14px;
|
||||
|
||||
.temp_preview_title {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 16px;
|
||||
}
|
||||
|
||||
.temp_preview_content {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
line-height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item2 {
|
||||
width: 400px;
|
||||
margin-right: 50px;
|
||||
|
||||
.user_wrap {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
.user_header {
|
||||
padding: 20px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #F8F8F8;
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
--count: 5;
|
||||
--itemHeight: 70px;
|
||||
height: calc(var(--count) * var(--itemHeight) + 30px);
|
||||
|
||||
.item {
|
||||
height: var(--itemHeight);
|
||||
border-bottom: 1px solid #ddd;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 14px;
|
||||
|
||||
.avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
margin-left: 10px;
|
||||
|
||||
.name {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.info_wrap {
|
||||
margin-top: 4px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
display: flex;
|
||||
|
||||
span {
|
||||
&:nth-child(1) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
flex: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
247
src/views/marketing_center/official_accounts/index.vue
Normal file
247
src/views/marketing_center/official_accounts/index.vue
Normal file
@@ -0,0 +1,247 @@
|
||||
<!-- 公众号推送列表 -->
|
||||
<template>
|
||||
<div class="gyq_container">
|
||||
<div class="gyq_content">
|
||||
<div class="row">
|
||||
<el-form inline>
|
||||
<el-form-item>
|
||||
<el-select v-model="querForm.status" style="width: 300px;">
|
||||
<el-option value="" label="全部"></el-option>
|
||||
<el-option v-for="item in statusList" :key="item.value" :label="item.label"
|
||||
:value="item.value"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="getTableData">搜索</el-button>
|
||||
<el-button type="warning" icon="Refresh" :loading="tableData.loading"
|
||||
@click="reseQueryHandle">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="primary" icon="Plus" @click="addTaskRef?.show()">添加任务</el-button>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-table :data="tableData.list" stripe border v-loading="tableData.loading">
|
||||
<el-table-column label="ID" prop="id" width="80"></el-table-column>
|
||||
<el-table-column label="推送任务" min-width="300">
|
||||
<template #default="scope">
|
||||
<div class="column">
|
||||
<div>商家名称：{{ scope.row.shopName }}</div>
|
||||
<div>活动描述：{{ scope.row.activityDetail }}</div>
|
||||
<div>开始时间：{{ scope.row.activityTime }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="优惠券信息" prop="coupon" width="160">
|
||||
<template #default="scope">
|
||||
<div class="column" v-if="scope.row.coupon">
|
||||
<div v-for="item in JSON.parse(scope.row.coupon)" :key="item.id">
|
||||
<el-tag effect="dark" round disable-transitions :type="getRandomStatus()">
|
||||
{{ item.title }} x{{ item.num }}
|
||||
</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="发送对象" prop="userType" width="100">
|
||||
<template #default="scope">
|
||||
{{ userTypeFilters(scope.row.userType).label }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="发送人数「预计」" prop="estimateNum" width="150"></el-table-column>
|
||||
<el-table-column label="发送时间" prop="sendTime" width="200"></el-table-column>
|
||||
<el-table-column label="状态" prop="status" width="100">
|
||||
<template #default="scope">
|
||||
<el-tag disable-transitions :type="statusListFilter(scope.row.status).type">
|
||||
{{ statusListFilter(scope.row.status).label }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="创建时间" prop="createTime" width="200"></el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="120">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" v-if="scope.row.status != 2 && scope.row.status != 1"
|
||||
@click="addTaskRef.show(scope.row)">编辑</el-button>
|
||||
<el-popconfirm title="确认要删除吗？" @confirm="deleteHandle(scope.row)"
|
||||
v-if="scope.row.status != 2 && scope.row.status != 1">
|
||||
<template #reference>
|
||||
<el-button type="danger" link>删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="row">
|
||||
<el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.size"
|
||||
:page-sizes="[100, 200, 300, 400]" background layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
<addTask ref="addTaskRef" @success="getTableData" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import addTask from './components/addTask.vue';
|
||||
import { acPushEventGet, acPushEventDel } from '@/api/coupon'
|
||||
|
||||
function getRandomStatus() {
|
||||
const statusList = ['primary', 'success', 'warning', 'danger'];
|
||||
// 生成0到数组长度之间的随机整数索引
|
||||
const randomIndex = Math.floor(Math.random() * statusList.length);
|
||||
// 返回随机索引对应的元素
|
||||
return statusList[randomIndex];
|
||||
}
|
||||
|
||||
const addTaskRef = ref(null)
|
||||
|
||||
const tableData = reactive({
|
||||
loading: false,
|
||||
page: 1,
|
||||
size: 10,
|
||||
list: []
|
||||
})
|
||||
|
||||
// 发送对象
|
||||
function userTypeFilters(status) {
|
||||
const m = [
|
||||
{
|
||||
value: 1,
|
||||
label: '全部用户',
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '范围用户',
|
||||
},
|
||||
{
|
||||
value: 3,
|
||||
label: '指定用户',
|
||||
},
|
||||
]
|
||||
return m.find(item => item.value == status)
|
||||
}
|
||||
|
||||
const querForm = ref({
|
||||
status: ''
|
||||
})
|
||||
|
||||
// 重置
|
||||
function reseQueryHandle() {
|
||||
querForm.value.status = ''
|
||||
getTableData()
|
||||
}
|
||||
|
||||
// 状态列表
|
||||
const statusList = ref([
|
||||
{
|
||||
value: 0,
|
||||
label: '待发送',
|
||||
type: 'info'
|
||||
},
|
||||
{
|
||||
value: 1,
|
||||
label: '发送中...',
|
||||
type: 'warning'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '发送成功',
|
||||
type: 'success'
|
||||
},
|
||||
{
|
||||
value: -1,
|
||||
label: '失败 ',
|
||||
type: 'danger'
|
||||
},
|
||||
])
|
||||
|
||||
// 筛选状态
|
||||
function statusListFilter(status) {
|
||||
return statusList.value.find(item => item.value == status)
|
||||
}
|
||||
|
||||
// 删除
|
||||
async function deleteHandle(row) {
|
||||
try {
|
||||
tableData.loading = true;
|
||||
await acPushEventDel(row.id);
|
||||
ElNotification({
|
||||
title: '注意',
|
||||
message: '已删除',
|
||||
type: 'success'
|
||||
})
|
||||
getTableData();
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
}
|
||||
|
||||
// 分页大小发生变化
|
||||
function handleSizeChange(e) {
|
||||
tableData.pageSize = e;
|
||||
getTableData();
|
||||
}
|
||||
|
||||
// 分页发生变化
|
||||
function handleCurrentChange(e) {
|
||||
tableData.page = e;
|
||||
getTableData();
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getTableData = async () => {
|
||||
try {
|
||||
tableData.loading = true;
|
||||
const res = await acPushEventGet({
|
||||
page: tableData.page,
|
||||
size: tableData.size,
|
||||
status: querForm.value.status
|
||||
});
|
||||
tableData.list = res.records;
|
||||
tableData.total = res.totalRow;
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
setTimeout(() => {
|
||||
tableData.loading = false;
|
||||
}, 500);
|
||||
}
|
||||
|
||||
// 添加模板，并且默认选中模板
|
||||
function useTemplate(item) {
|
||||
addTaskRef.value?.show(null, item)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
useTemplate
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.gyq_container {
|
||||
padding: 14px;
|
||||
|
||||
.gyq_content {
|
||||
padding: 14px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
padding-top: 14px;
|
||||
}
|
||||
|
||||
.column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user