新增抽奖配置
This commit is contained in:
dengbw
@@ -333,3 +333,15 @@ export async function getStatisticsStackedWatchOrder(params) {
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改抽奖配置
|
||||
* @param data 活动信息
|
||||
*/
|
||||
export async function updateActivityDraw(data) {
|
||||
const res = await request.put('/sylive/activity/draw', data);
|
||||
if (res.data.code === 0) {
|
||||
return res.data.message;
|
||||
}
|
||||
return Promise.reject(new Error(res.data.message));
|
||||
}
|
||||
|
||||
@@ -0,0 +1,359 @@
|
||||
<!-- 编辑弹窗 -->
|
||||
<template>
|
||||
<ele-modal
|
||||
width="900px"
|
||||
:visible="visible"
|
||||
:append-to-body="true"
|
||||
:close-on-click-modal="true"
|
||||
custom-class="ele-dialog-form"
|
||||
title="抽奖配置"
|
||||
@update:visible="updateVisible"
|
||||
>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="82px">
|
||||
<el-form-item label="背景图片:" prop="bgImg">
|
||||
<ele-image-upload
|
||||
v-model="form.bgImg"
|
||||
:limit="1"
|
||||
:drag="true"
|
||||
:multiple="false"
|
||||
@upload="onUpload"
|
||||
/>
|
||||
<div class="ele-text-secondary">
|
||||
建议尺寸1125X2000，主题内容建议做在顶部0~1700像素区域
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="短信内容:">
|
||||
<el-input
|
||||
v-model="form.sms"
|
||||
:rows="2"
|
||||
type="textarea"
|
||||
placeholder="请输入中奖短信内容"
|
||||
/>
|
||||
<div class="ele-text-secondary">
|
||||
当内容有 中奖标题 发短信时就会自动替换为抽奖类型的标题
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="抽奖类型:">
|
||||
<el-table :data="form.winType" :border="true" style="width: 100%">
|
||||
<el-table-column label="标题" align="center">
|
||||
<template v-slot="{ row }">
|
||||
<el-input v-model="row.title" placeholder="标题" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="标签" width="100px" align="center">
|
||||
<template v-slot="{ row }">
|
||||
<el-input v-model="row.tag" placeholder="标签" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="图片" width="120px" align="center">
|
||||
<template v-slot="{ row }">
|
||||
<ele-image-upload
|
||||
v-model="row.img"
|
||||
:limit="1"
|
||||
:drag="true"
|
||||
:multiple="false"
|
||||
@upload="onUpload"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="参与条件" align="center">
|
||||
<template v-slot="{ row }">
|
||||
<el-select
|
||||
v-model="row.itemIds"
|
||||
placeholder="请选择商品"
|
||||
clearable
|
||||
multiple
|
||||
class="ele-fluid"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in goodsList"
|
||||
:key="item.itemId"
|
||||
:value="item.itemId"
|
||||
:label="item.title"
|
||||
/>
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="参与抽奖" width="100px" align="center">
|
||||
<template v-slot="{ row }">
|
||||
<el-select v-model="row.show" class="ele-fluid">
|
||||
<el-option label="是" value="1" />
|
||||
<el-option label="否" value="0" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
width="70px"
|
||||
align="center"
|
||||
:resizable="false"
|
||||
>
|
||||
<template v-slot="{ row, $index }">
|
||||
<span class="ele-action">
|
||||
<el-popconfirm
|
||||
title="确定要删除此抽奖类型吗?"
|
||||
@confirm="removeBottoms(row, $index)"
|
||||
>
|
||||
<template v-slot:reference>
|
||||
<el-link
|
||||
icon="el-icon-delete"
|
||||
type="danger"
|
||||
:underline="false"
|
||||
>
|
||||
删除
|
||||
</el-link>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
style="width: 100%; margin-top: 15px"
|
||||
@click="addBottoms"
|
||||
>
|
||||
新增抽奖类型
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item label="中奖人数:">
|
||||
<el-table :data="form.winNum" :border="true" style="width: 100%">
|
||||
<el-table-column align="center" label="人数">
|
||||
<template v-slot="{ row }">
|
||||
<el-input-number
|
||||
:min="0"
|
||||
v-model="row.value"
|
||||
placeholder="请输入人数"
|
||||
controls-position="right"
|
||||
class="ele-fluid ele-text-left"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="操作"
|
||||
width="100px"
|
||||
align="center"
|
||||
:resizable="false"
|
||||
>
|
||||
<template v-slot="{ row, $index }">
|
||||
<span class="ele-action">
|
||||
<el-popconfirm
|
||||
title="确定要删除此中奖人数吗?"
|
||||
@confirm="removeWinNums(row, $index)"
|
||||
>
|
||||
<template v-slot:reference>
|
||||
<el-link
|
||||
icon="el-icon-delete"
|
||||
type="danger"
|
||||
:underline="false"
|
||||
>
|
||||
删除
|
||||
</el-link>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-button
|
||||
icon="el-icon-plus"
|
||||
style="width: 100%; margin-top: 15px"
|
||||
@click="addWinNums"
|
||||
>
|
||||
新增中奖人数
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template v-slot:footer>
|
||||
<el-button @click="updateVisible(false)">取消</el-button>
|
||||
<el-button type="primary" :loading="loading" @click="save">
|
||||
保存
|
||||
</el-button>
|
||||
</template>
|
||||
</ele-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import EleImageUpload from 'ele-admin/es/ele-image-upload';
|
||||
import request from '@/utils/request';
|
||||
import { updateActivityDraw } from '@/api/sylive/activity';
|
||||
import { listGoods } from '@/api/sylive/goods';
|
||||
export default {
|
||||
components: { EleImageUpload },
|
||||
props: {
|
||||
// 弹窗是否打开
|
||||
visible: Boolean,
|
||||
// 修改回显的数据
|
||||
data: Object
|
||||
},
|
||||
data() {
|
||||
const defaultForm = {
|
||||
activityId: null,
|
||||
sms: '',
|
||||
bgImg: [],
|
||||
winNum: [],
|
||||
winType: []
|
||||
};
|
||||
return {
|
||||
defaultForm,
|
||||
// 表单数据
|
||||
form: { ...defaultForm },
|
||||
goodsList: [],
|
||||
imgIndex: 1,
|
||||
// 表单验证规则
|
||||
rules: {
|
||||
bgImg: [
|
||||
{
|
||||
required: true,
|
||||
message: '请上传背景图',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
// 提交状态
|
||||
loading: false,
|
||||
// 是否是修改
|
||||
isUpdate: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
// 是否开启响应式布局
|
||||
styleResponsive() {
|
||||
return this.$store.state.theme.styleResponsive;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/* 查询商品 */
|
||||
goodsQuery() {
|
||||
listGoods({ activityId: this.data.activityId, type: 0 })
|
||||
.then((list) => {
|
||||
this.goodsList = list;
|
||||
})
|
||||
.catch((e) => {
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
},
|
||||
/* 保存编辑 */
|
||||
save() {
|
||||
this.$refs.form.validate((valid) => {
|
||||
if (!valid) {
|
||||
return false;
|
||||
}
|
||||
this.loading = true;
|
||||
const data = {
|
||||
...this.form
|
||||
};
|
||||
updateActivityDraw(data)
|
||||
.then((msg) => {
|
||||
this.loading = false;
|
||||
this.$message.success(msg);
|
||||
this.updateVisible(false);
|
||||
this.$emit('done');
|
||||
})
|
||||
.catch((e) => {
|
||||
this.loading = false;
|
||||
this.$message.error(e.message);
|
||||
});
|
||||
});
|
||||
},
|
||||
/* 更新visible */
|
||||
updateVisible(value) {
|
||||
this.$emit('update:visible', value);
|
||||
},
|
||||
/* 添加中奖人数 */
|
||||
addWinNums() {
|
||||
this.form.winNum.push({ value: 0 });
|
||||
},
|
||||
/* 删除中奖人数 */
|
||||
removeWinNums(_row, index) {
|
||||
this.form.winNum.splice(index, 1);
|
||||
},
|
||||
addBottoms() {
|
||||
let id = 1;
|
||||
let length = this.form.winType.length;
|
||||
if (length) {
|
||||
let lengthSet = length - 1;
|
||||
id = this.form.winType[lengthSet].id + 1;
|
||||
}
|
||||
this.form.winType.push({
|
||||
id: id,
|
||||
title: '',
|
||||
show: '1',
|
||||
tag: '',
|
||||
itemIds: '',
|
||||
img: []
|
||||
});
|
||||
},
|
||||
/* 删除 */
|
||||
removeBottoms(_row, index) {
|
||||
this.form.winType.splice(index, 1);
|
||||
},
|
||||
/* 上传文件之前的钩子 */
|
||||
onBeforeUpload(file) {
|
||||
// file 即选择后的文件
|
||||
if (!file.type.startsWith('image')) {
|
||||
this.$message.error('只能选择图片');
|
||||
return false;
|
||||
}
|
||||
if (file.size / 1024 / 1024 > 2) {
|
||||
this.$message.error('大小不能超过 2MB');
|
||||
return false;
|
||||
}
|
||||
},
|
||||
/* 上传文件 */
|
||||
onUpload(item) {
|
||||
item.status = 'uploading';
|
||||
const formData = new FormData();
|
||||
formData.append('file', item.file);
|
||||
request({
|
||||
url: '/upload',
|
||||
method: 'post',
|
||||
data: formData,
|
||||
onUploadProgress: (e) => {
|
||||
if (e.lengthComputable) {
|
||||
item.progress = (e.loaded / e.total) * 100;
|
||||
}
|
||||
}
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data.code === 0) {
|
||||
item.status = 'done';
|
||||
item.url = res.data.data.full_url;
|
||||
item.fileUrl = res.data.data.url;
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
item.status = 'exception';
|
||||
});
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible(visible) {
|
||||
if (visible) {
|
||||
if (this.data) {
|
||||
this.goodsQuery();
|
||||
this.$util.assignObject(this.form, {
|
||||
...this.data
|
||||
});
|
||||
this.isUpdate = true;
|
||||
} else {
|
||||
this.form.sms = '';
|
||||
this.form.winType = [];
|
||||
this.form.winNum = [];
|
||||
this.form.bgImg = [];
|
||||
this.isUpdate = false;
|
||||
}
|
||||
} else {
|
||||
this.$refs.form.clearValidate();
|
||||
this.form = { ...this.defaultForm };
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.ele-image-upload-list .ele-image-upload-item {
|
||||
margin-top: 2px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
</style>
|
||||
@@ -89,6 +89,7 @@
|
||||
<el-dropdown-item command="goods">修改商品</el-dropdown-item>
|
||||
<el-dropdown-item command="groups">修改分组</el-dropdown-item>
|
||||
<el-dropdown-item command="copy">复制活动</el-dropdown-item>
|
||||
<el-dropdown-item command="draw">抽奖配置</el-dropdown-item>
|
||||
<!--
|
||||
<el-dropdown-item command="item">修改权益商品</el-dropdown-item>
|
||||
<el-dropdown-item command="coupon">修改券</el-dropdown-item>
|
||||
@@ -131,6 +132,12 @@
|
||||
/>
|
||||
<!-- 二维码 -->
|
||||
<qr-code :visible.sync="showCode" :data="current" />
|
||||
<!-- 抽奖配置弹窗 -->
|
||||
<activity-draw
|
||||
:data="current"
|
||||
:visible.sync="showEditDraw"
|
||||
@done="reload"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -140,6 +147,7 @@
|
||||
import ActivityEdit from './components/activity-edit.vue';
|
||||
import ActivityItem from './components/activity-item.vue';
|
||||
import ActivityCoupon from './components/activity-coupon.vue';
|
||||
import ActivityDraw from './components/activity-draw.vue';
|
||||
import {
|
||||
pageActivity,
|
||||
removeActivity,
|
||||
@@ -156,7 +164,8 @@
|
||||
ActivitySearch,
|
||||
ActivityEdit,
|
||||
ActivityItem,
|
||||
ActivityCoupon
|
||||
ActivityCoupon,
|
||||
ActivityDraw
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -240,6 +249,8 @@
|
||||
showEditItem: false,
|
||||
// 是否显示编辑券弹窗
|
||||
showEditCoupon: false,
|
||||
// 是否显示编辑券弹窗
|
||||
showEditDraw: false,
|
||||
// 是否显示二维码弹窗
|
||||
showCode: false
|
||||
};
|
||||
@@ -255,10 +266,16 @@
|
||||
this.showEdit = true;
|
||||
} else if (command === 'item') {
|
||||
this.current = row.item;
|
||||
this.current.activityId = row.activityId;
|
||||
this.showEditItem = true;
|
||||
} else if (command === 'coupon') {
|
||||
this.current = row.coupon;
|
||||
this.current.activityId = row.activityId;
|
||||
this.showEditCoupon = true;
|
||||
} else if (command === 'draw') {
|
||||
this.current = row.draw;
|
||||
this.current.activityId = row.activityId;
|
||||
this.showEditDraw = true;
|
||||
} else if (command === 'goods') {
|
||||
this.$router.replace('/sylive/goods?id=' + row.activityId);
|
||||
} else if (command === 'groups') {
|
||||
|
||||
Reference in New Issue
Block a user