<template>
|
<div class="act_add">
|
<v-header :title="(info_id ? '编辑' : '新增') + '抽奖活动'"></v-header>
|
<el-form
|
:model="form"
|
:rules="rules"
|
label-position="right"
|
ref="ruleForm"
|
label-width="150px"
|
class="demo-ruleForm"
|
>
|
<el-form-item label="活动名称:" prop="name">
|
<el-input
|
class="input-width"
|
placeholder="请输入活动名称"
|
size="small"
|
maxlength="20"
|
show-word-limit
|
v-model.trim="form.name"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="报名时间:" prop="startTime">
|
<el-date-picker
|
class="input-width"
|
@change="signTimeChange"
|
v-model="signTime"
|
type="datetimerange"
|
format="yyyy-MM-dd HH:mm"
|
value-format="yyyy-MM-dd HH:mm"
|
range-separator="至"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
:picker-options="pickerOptions"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="开奖时间:" prop="lotteryTime">
|
<el-date-picker
|
class="input-width"
|
v-model="form.lotteryTime"
|
type="datetime"
|
format="yyyy-MM-dd HH:mm"
|
value-format="yyyy-MM-dd HH:mm"
|
placeholder="选择开奖时间"
|
:picker-options="pickerOptions"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="兑奖时间:" prop="raffleStartTime">
|
<el-date-picker
|
class="input-width"
|
@change="cashTimeChange"
|
v-model="cashTime"
|
type="datetimerange"
|
format="yyyy-MM-dd HH:mm"
|
value-format="yyyy-MM-dd HH:mm"
|
range-separator="至"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
:picker-options="pickerOptions"
|
:default-time="['00:00:00', '23:59:59']"
|
>
|
</el-date-picker>
|
</el-form-item>
|
<el-form-item label="工作时间:" prop="workTime">
|
<el-input
|
class="input-width"
|
placeholder="请输入工作时间"
|
size="small"
|
v-model.trim="form.workTime"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="兑奖地点:" prop="address">
|
<el-input
|
class="input-width"
|
placeholder="请选择兑奖地点"
|
size="small"
|
type="textarea"
|
resize="none"
|
:rows="3"
|
v-model="form.address"
|
maxlength="100"
|
@focus="mapCheck"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="联系电话:" prop="phone">
|
<el-input
|
class="input-width"
|
placeholder="请输入联系电话"
|
size="small"
|
maxlength="11"
|
v-model.trim="form.phone"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="活动封面:" prop="cover">
|
<UploadImg @fileHandle="fileHandle" :imgShow="form.cover" :imgNum="1" />
|
</el-form-item>
|
<el-form-item label="奖品设置:">
|
<div class="fl-al">
|
<span class="mr-r-50">奖品总数即最大中奖人数</span>
|
<el-button size="mini" @click="addClick">添加</el-button>
|
</div>
|
<div class="fl-fw mr-t-10">
|
<div class="fl-f mr-r-20" v-for="(it, ix) in prizeList" :key="ix">
|
<div
|
style="width: 50px"
|
class="fl-al mr-r-10"
|
@click="deletePrize(ix)"
|
>
|
<el-button type="danger" icon="el-icon-delete" circle></el-button>
|
</div>
|
<UploadImg
|
@fileHandle="fileHandlePrize"
|
:imgShow="it.image"
|
:ix="ix"
|
:imgNum="1"
|
/>
|
<div class="fl-co mr-l-10">
|
<div class="fl-al">
|
<div class="label-width">奖品名称:</div>
|
<el-input
|
class="input-width2"
|
placeholder="奖品名称"
|
size="small"
|
v-model.trim="it.name"
|
></el-input>
|
</div>
|
<div class="fl-al mr-t-10">
|
<div class="label-width">奖品数量:</div>
|
<el-input
|
class="input-width2"
|
placeholder="奖品数量"
|
size="small"
|
v-model.trim.number="it.total"
|
@input="
|
it.total = String(it.total)
|
.replace(/[^\d]/g, '')
|
.replace(/^0{1,}/g, '')
|
"
|
></el-input>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item label="">
|
<el-button size="small" @click="$router.go(-1)">返回</el-button>
|
<el-button
|
size="small"
|
:loading="btnLoading"
|
type="primary"
|
@click="submitHandle"
|
>提交</el-button
|
>
|
</el-form-item>
|
</el-form>
|
<el-dialog
|
title="地址"
|
:visible.sync="dialogVisibleMap"
|
:before-close="handleCloseMap"
|
append-to-body
|
>
|
<MapBox ref="mapContent" @setLocation="setLocation" />
|
<div style="text-align: center; margin-top: 20px">
|
<el-button @click="handleCloseMap">取 消</el-button>
|
<el-button type="primary" @click="mapComfirm">确 定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import MapBox from "../../components/map/map.vue";
|
import { PHONE } from "../../utils/validation";
|
import { objCopyPro } from "../../utils/common";
|
import UploadImg from "../../components/upload/uploadImg.vue";
|
export default {
|
components: {
|
MapBox,
|
UploadImg
|
},
|
data() {
|
return {
|
btnLoading: false,
|
dialogVisibleMap: false,
|
info_id: "",
|
signTime: [],
|
cashTime: [],
|
positionData: {},
|
form: {
|
name: "", // 活动名称
|
startTime: "", // 报名时间
|
stopTime: "", // 结束时间
|
lotteryTime: "", // 开奖时间
|
raffleStartTime: "", // 兑奖开始时间
|
raffleStopTime: "", // 兑奖结束时间
|
workTime: "周一至周五09:00—18:00 节假日除外", // 工作时间
|
address: "", // 兑奖地点
|
longitude: "", // 经度
|
latitude: "", // 纬度
|
phone: "", // 联系电话
|
cover: "", // 封面
|
comActRafflePrizeVOList: [] // 奖品列表
|
},
|
rules: {
|
name: [
|
{
|
required: true,
|
message: "请输入活动名称",
|
trigger: "blur"
|
}
|
],
|
workTime: [
|
{
|
required: true,
|
message: "请输入工作时间",
|
trigger: "blur"
|
}
|
],
|
startTime: [
|
{
|
required: true,
|
message: "请选择报名时间",
|
trigger: "change"
|
}
|
],
|
lotteryTime: [
|
{
|
required: true,
|
message: "选择开奖时间",
|
trigger: "change"
|
}
|
],
|
raffleStartTime: [
|
{
|
required: true,
|
message: "选择兑奖时间",
|
trigger: "change"
|
}
|
],
|
address: [
|
{
|
required: true,
|
message: "请选择兑奖地点",
|
trigger: "change"
|
}
|
],
|
cover: [
|
{
|
required: true,
|
message: "请上传活动封面",
|
trigger: "change"
|
}
|
],
|
phone: [
|
{
|
required: true,
|
validator: PHONE,
|
trigger: "blur"
|
}
|
]
|
}, // 表单验证
|
pickerOptions: {
|
disabledDate(time) {
|
return time.getTime() < Date.now() - 8.64e7;
|
}
|
},
|
prizeList: [
|
{
|
image: "",
|
name: "",
|
total: ""
|
}
|
]
|
};
|
},
|
mounted() {
|
this.info_id = this.$route.query.id;
|
this.$api.get("user", {}, e => {
|
this.form.address = e.comActVO.address;
|
this.form.longitude = e.comActVO.lng;
|
this.form.latitude = e.comActVO.lat;
|
this.form.phone = e.comActVO.contactsPhone;
|
});
|
if (this.info_id) {
|
this.info_type = false;
|
this.$api.get("comActRaffle/" + this.info_id, {}, e => {
|
this.form = objCopyPro(this.form, e);
|
this.signTime = [e.startTime, e.stopTime];
|
this.cashTime = [e.raffleStartTime, e.raffleStopTime];
|
this.prizeList = e.comActRafflePrizeVOList;
|
});
|
}
|
},
|
methods: {
|
signTimeChange(arr) {
|
if (arr) {
|
this.form.startTime = arr[0];
|
this.form.stopTime = arr[1];
|
} else {
|
this.form.startTime = "";
|
this.form.stopTime = "";
|
}
|
},
|
cashTimeChange(arr) {
|
if (arr) {
|
this.form.raffleStartTime = arr[0];
|
this.form.raffleStopTime = arr[1];
|
} else {
|
this.form.raffleStartTime = "";
|
this.form.raffleStopTime = "";
|
}
|
},
|
deletePrize(i) {
|
if (this.prizeList.length === 1) return;
|
this.prizeList.splice(i, 1);
|
},
|
addClick() {
|
if (this.prizeList.length === 9) return;
|
this.prizeList.push({
|
image: "",
|
name: "",
|
total: ""
|
});
|
},
|
mapCheck() {
|
this.dialogVisibleMap = true;
|
this.$nextTick(() => {
|
this.$refs.mapContent.getLocation();
|
});
|
},
|
handleCloseMap() {
|
this.dialogVisibleMap = false;
|
this.positionData = {};
|
},
|
mapComfirm() {
|
if (this.positionData.addr) {
|
this.form.longitude = this.positionData.lng;
|
this.form.latitude = this.positionData.lat;
|
this.form.address = this.positionData.addr;
|
}
|
this.$refs.ruleForm.validateField("address");
|
this.dialogVisibleMap = false;
|
this.positionData = {};
|
},
|
setLocation(data) {
|
this.positionData = data;
|
},
|
returnTimeNum(t) {
|
return new Date(t).getTime();
|
},
|
// 保存
|
submitHandle() {
|
this.$refs["ruleForm"].validate(val => {
|
if (val) {
|
let st = this.returnTimeNum(this.form.stopTime),
|
nt = new Date().getTime(),
|
bt = this.returnTimeNum(this.form.startTime),
|
lt = this.returnTimeNum(this.form.lotteryTime),
|
rt = this.returnTimeNum(this.form.raffleStartTime);
|
if (bt <= nt) {
|
return demo.toast("活动开始时间不能小于当前时间");
|
}
|
if (lt <= st) {
|
return demo.toast("开奖时间不能小于活动结束时间");
|
}
|
if (rt <= lt) {
|
return demo.toast("兑奖时间不能小于开奖时间");
|
}
|
const prizeFormType = this.prizeList.some(item => {
|
return item.image === "" || item.name === "" || item.total === "";
|
});
|
if (prizeFormType) return demo.toast("奖品图片/名称/数量不能为空");
|
this.form.comActRafflePrizeVOList = this.prizeList;
|
const url = this.info_id ? "comActRaffle/update" : "comActRaffle";
|
this.$api.post(url, this.form, () => {
|
demo.toast((this.info_id ? "编辑" : "新增") + "成功");
|
this.$nextTick(() => {
|
this.$router.go(-1);
|
});
|
});
|
}
|
});
|
},
|
fileHandle(data) {
|
if (data.type === "loading") {
|
this.btnloading = data.val;
|
} else {
|
this.form.cover = data.val;
|
this.$refs.ruleForm.validateField("cover");
|
}
|
},
|
fileHandlePrize(data) {
|
if (data.type === "loading") {
|
this.btnloading = data.val;
|
} else {
|
this.prizeList[data.ix].image = data.val;
|
}
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.act_add {
|
padding-top: 10px;
|
overflow: auto;
|
}
|
.input-width {
|
width: 300px;
|
}
|
.textarea-width {
|
width: 450px;
|
}
|
.input-width2 {
|
width: 150px;
|
}
|
.label-width {
|
width: 70px;
|
}
|
</style>
|
