454 lines
13 KiB
Vue
454 lines
13 KiB
Vue
<template>
|
|
<div class="agent-action-box">
|
|
<el-dialog
|
|
:title="title"
|
|
:visible.sync="dialogVisible"
|
|
width="800px"
|
|
:before-close="handleClose"
|
|
:close-on-click-modal="false"
|
|
class="el-dialogs"
|
|
>
|
|
<el-form ref="form" :model="params" :rules="rules" label-width="140px">
|
|
<div class="form-flex-box">
|
|
<el-form-item label="奖品图片:" prop="activityId">
|
|
<base-upload
|
|
:cover="params.image"
|
|
:action="actionPics"
|
|
@successCallback="successCallback"
|
|
:id="id"
|
|
:wSize="184"
|
|
:hSize="184"
|
|
:width="'184px'"
|
|
:height="'184px'"
|
|
></base-upload>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="form-flex-box">
|
|
<el-form-item label="活动:" prop="activityId">
|
|
<el-select
|
|
v-model="params.activityId"
|
|
size="small"
|
|
placeholder="请选择活动"
|
|
filterable
|
|
clearable
|
|
>
|
|
<el-option
|
|
v-for="item in actIDs"
|
|
:value="item.value"
|
|
:label="item.label"
|
|
:key="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="奖品名称:" prop="name">
|
|
<el-input
|
|
v-model="params.name"
|
|
size="small"
|
|
placeholder="请输入奖品名称"
|
|
clearable
|
|
:maxlength="5"
|
|
></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="form-flex-box">
|
|
<el-form-item label="奖品类型:" prop="type">
|
|
<el-select
|
|
v-model="params.type"
|
|
size="small"
|
|
placeholder="请选择奖品类型"
|
|
filterable
|
|
clearable
|
|
>
|
|
<el-option
|
|
v-for="item in priceType"
|
|
:value="item.value"
|
|
:label="item.label"
|
|
:key="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="会员卡:"
|
|
prop="vipCardId"
|
|
v-if="params.type == 5"
|
|
>
|
|
<el-select
|
|
v-model="params.vipCardId"
|
|
size="small"
|
|
placeholder="请选择会员卡"
|
|
filterable
|
|
clearable
|
|
>
|
|
<el-option
|
|
v-for="item in vipCardIds"
|
|
:value="item.value"
|
|
:label="item.label"
|
|
:key="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item
|
|
label="折扣率/活跃值:"
|
|
prop="value"
|
|
v-if="params.type == 1 || params.type == 4 || params.type == 6"
|
|
>
|
|
<el-input
|
|
v-model.number="params.value"
|
|
size="small"
|
|
placeholder="请输入奖品折扣率/活跃值"
|
|
clearable
|
|
></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="form-flex-box">
|
|
<el-form-item label="奖品价值:" prop="price">
|
|
<el-input
|
|
v-model.number="params.price"
|
|
size="small"
|
|
placeholder="请输入奖品价值"
|
|
clearable
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="奖品总数:" prop="count">
|
|
<el-input
|
|
v-model.number="params.count"
|
|
size="small"
|
|
placeholder="请输入奖品总数"
|
|
clearable
|
|
></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="form-flex-box">
|
|
<el-form-item label="中奖权重:" prop="weights">
|
|
<el-input
|
|
v-model.number="params.weights"
|
|
size="small"
|
|
type="number"
|
|
placeholder="请输入权重"
|
|
clearable
|
|
:min="0"
|
|
:max="100"
|
|
:controls="false"
|
|
oninput="if(value>100)value=100;if(value<0)value=0;value=((value.replace(/[^0-9.]/g,'')).replace(/([0-9]+\.[0-9]{2})[0-9]*/,'$1'))"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="奖品等级:" prop="level">
|
|
<el-select
|
|
v-model="params.level"
|
|
size="small"
|
|
placeholder="请选择奖品类型"
|
|
clearable
|
|
>
|
|
<el-option
|
|
v-for="item in levels"
|
|
:value="item.value"
|
|
:label="item.label"
|
|
:key="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="form-flex-box">
|
|
<el-form-item label="奖品有效期(天):" prop="validityTime">
|
|
<el-input
|
|
v-model.number="params.validityTime"
|
|
type="number"
|
|
size="small"
|
|
placeholder="请输入奖品有效期(天)"
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="奖品排序:" prop="sort">
|
|
<el-input
|
|
v-model.number="params.sort"
|
|
size="small"
|
|
placeholder="请输入奖品排序"
|
|
clearable
|
|
></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="form-flex-box">
|
|
<el-form-item label="是否激活:" v-if="this.type != 'add'">
|
|
<el-select
|
|
v-model="params.status"
|
|
size="small"
|
|
clearable
|
|
placeholder="请选择是否激活"
|
|
>
|
|
<el-option
|
|
v-for="item in enables"
|
|
:value="item.value"
|
|
:label="item.label"
|
|
:key="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</div>
|
|
<div class="form-flex-box">
|
|
<el-form-item label="奖品描述:" prop="desc">
|
|
<el-input
|
|
style="width: 300px;"
|
|
v-model="params.desc"
|
|
size="small"
|
|
type="textarea"
|
|
:autosize="{ minRows: 2, maxRows: 4 }"
|
|
placeholder="请输入奖品描述"
|
|
:maxlength="9"
|
|
show-word-limit
|
|
clearable
|
|
></el-input>
|
|
</el-form-item>
|
|
</div>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="handleClose" size="small">取 消</el-button>
|
|
<el-button
|
|
type="primary"
|
|
@click="submitForm('form')"
|
|
:loading="flag"
|
|
size="small"
|
|
>确 认</el-button
|
|
>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import API from "@/api";
|
|
import baseConfig from "@/utils/serverUrlConfig";
|
|
export default {
|
|
props: {
|
|
vipCardIds: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
actIDs: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
// 外层弹出框
|
|
dialogVisible: false,
|
|
// 弹窗标题
|
|
title: "",
|
|
// 提交按钮状态
|
|
flag: false,
|
|
// 内层弹窗表格加载状态
|
|
loading: false,
|
|
// 编辑id
|
|
id: "",
|
|
// 当前是编辑还是新增
|
|
type: "",
|
|
//图集上传
|
|
actionPics: baseConfig.baseServerUrl + "/vid/uploadStatic",
|
|
// 新增兑换码请求参数
|
|
params: {
|
|
activityId: "",
|
|
vipCardId: "",
|
|
name: "",
|
|
type: "",
|
|
value: "",
|
|
price: "",
|
|
count: "",
|
|
weights: "",
|
|
image: "",
|
|
level: "",
|
|
sort: "",
|
|
validityTime: "",
|
|
desc: "",
|
|
status: false,
|
|
},
|
|
levels: [
|
|
{ label: "初级(免费可获取)", value: 1 },
|
|
{ label: "中级(放分可获取)", value: 2 },
|
|
{ label: "高级(奖池流水达到一定条件可获取)", value: 3 },
|
|
],
|
|
priceType: [
|
|
{ label: "活跃值", value: 1 },
|
|
{ label: "金币", value: 2 },
|
|
{ label: "棋牌金币", value: 3 },
|
|
{ label: "楼风解锁折扣券", value: 4 },
|
|
{ label: "会员卡", value: 5 },
|
|
{ label: "会员折扣券", value: 6 },
|
|
{ label: "实物", value: 7 },
|
|
{ label: "积分", value: 8 },
|
|
{ label: "AI脱衣", value: 9 },
|
|
{ label: "AI换脸", value: 10 },
|
|
{ label: "观影券", value: 11 },
|
|
],
|
|
// 是否激活
|
|
enables: [
|
|
{ label: "未激活", value: false },
|
|
{ label: "激活", value: true },
|
|
],
|
|
// 验证规则
|
|
rules: {
|
|
// activityId: [
|
|
// { required: true, message: "请选择活动", trigger: "change" },
|
|
// ],
|
|
vipCardId: [
|
|
{ required: true, message: "请选择会员卡", trigger: "change" },
|
|
],
|
|
name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
|
|
type: [
|
|
{ required: true, message: "请选择奖品类型", trigger: "change" },
|
|
],
|
|
price: [{ required: true, message: "请输入奖品价值", trigger: "blur" }],
|
|
value: [
|
|
{
|
|
required: true,
|
|
message: "请输入奖品折扣率/活跃值",
|
|
trigger: "blur",
|
|
},
|
|
],
|
|
count: [{ required: true, message: "请输入奖品数量", trigger: "blur" }],
|
|
weights: [
|
|
{ required: true, message: "请输入中奖权重", trigger: "blur" },
|
|
],
|
|
level: [
|
|
{ required: true, message: "请选择奖品等级", trigger: "change" },
|
|
],
|
|
// validityTime: [
|
|
// { required: true, message: "请输入奖品有效期(天)", trigger: "blur" },
|
|
// ],
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
openDataSelector() {
|
|
const val = this.params.channel;
|
|
this.$refs.channelSelector.open(val);
|
|
},
|
|
// 数据提交验证
|
|
submitForm() {
|
|
this.$refs.form.validate((valid) => {
|
|
if (valid) {
|
|
this.flag = true;
|
|
if (this.type === "add") {
|
|
this.addCode();
|
|
} else if (this.type === "edit") {
|
|
this.editCode();
|
|
}
|
|
} else {
|
|
return false;
|
|
}
|
|
});
|
|
},
|
|
/**
|
|
* 新增
|
|
* @param {object} [params] - 新增接口需要的参数
|
|
* @function [addActivityPrize] - api新增奖品
|
|
*/
|
|
addCode() {
|
|
let params = Object.assign({}, this.params);
|
|
API.addWebPrice(params)
|
|
.then((res) => {
|
|
if (res.code === 200) {
|
|
this.$message({
|
|
message: "新增成功！",
|
|
type: "success",
|
|
});
|
|
this.$emit("handlerCodeList");
|
|
} else {
|
|
if (res.tip) {
|
|
this.$message.error(this.tip);
|
|
} else {
|
|
this.$message.error("新增失败！");
|
|
}
|
|
}
|
|
this.handleClose();
|
|
this.flag = false;
|
|
})
|
|
.catch(() => {
|
|
this.flag = false;
|
|
this.handleClose();
|
|
});
|
|
},
|
|
/**
|
|
* 修改
|
|
*/
|
|
editCode() {
|
|
let params = Object.assign({}, this.params);
|
|
API.editWebPrice(params)
|
|
.then((res) => {
|
|
if (res.code === 200) {
|
|
this.$message({
|
|
message: "修改成功！",
|
|
type: "success",
|
|
});
|
|
this.$emit("handlerCodeList");
|
|
} else {
|
|
if (res.tip) {
|
|
this.$message.error(this.tip);
|
|
} else {
|
|
this.$message.error("修改失败！");
|
|
}
|
|
}
|
|
this.handleClose();
|
|
this.flag = false;
|
|
})
|
|
.catch(() => {
|
|
this.flag = false;
|
|
this.handleClose();
|
|
});
|
|
},
|
|
// 关闭弹窗
|
|
handleClose() {
|
|
this.dialogVisible = false;
|
|
this.params = {
|
|
activityId: "",
|
|
vipCardId: "",
|
|
name: "",
|
|
type: "",
|
|
value: "",
|
|
count: "",
|
|
weights: "",
|
|
level: "",
|
|
validityTime: "",
|
|
image: "",
|
|
sort: "",
|
|
desc: "",
|
|
status: false,
|
|
};
|
|
this.$refs.form.resetFields();
|
|
},
|
|
// 打开编辑视频弹窗、传递需要编辑的参数
|
|
open(type, data) {
|
|
this.dialogVisible = true;
|
|
if (type === "add") {
|
|
this.type = "add";
|
|
this.title = "新增奖品";
|
|
} else {
|
|
this.type = "edit";
|
|
this.title = "编辑奖品";
|
|
this.params = Object.assign({}, data);
|
|
}
|
|
},
|
|
// 上传成功
|
|
successCallback(res) {
|
|
this.params.image = res.data.coverImg;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.form-flex-box {
|
|
display: flex;
|
|
.el-form-item {
|
|
flex: 1;
|
|
}
|
|
.item-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
agent-action-box {
|
|
.checked {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
</style>
|