活动预约

master
lion 3 years ago
parent 3e40167831
commit e67e16c307

@ -2,4 +2,4 @@
ENV = 'development'
# base api
VUE_APP_BASE_API = ''
VUE_APP_BASE_API = 'http://leyitest.ali251.langye.net'

@ -2,4 +2,4 @@
ENV = 'production'
# base api
VUE_APP_BASE_API = ''
VUE_APP_BASE_API = 'https://leyiyuyue.szgmbwg.org.cn'

@ -39,8 +39,17 @@ export function del(id) {
id
}
})
}
export function delNum(id) {
return request({
url: '/api/admin/activity/activity-number-destroy',
method: 'get',
params: {
id
}
})
}
export function get(id) {
return request({
url: '/api/admin/activity/show',

@ -55,16 +55,149 @@
</el-pagination>
</div>
</div>
</div>
</div>
<!-- 选择预约时段设置 -->
<el-dialog title="预约时段" :visible.sync="showRules" width="60%">
<el-form :model="currentVisit" :rules="rules" ref="form" label-position="right" :label-width="formLabelWidth">
<!-- <div style="padding-bottom:20px" class="form-sub-title">
<span>预约时段
</span>
</div> -->
<el-row>
<el-col :span="10">
<el-form-item label="预约时段" prop="visit">
<el-select v-model="visitid" @change="changeVisit" placeholder="请选择预约时段" style="width:100%">
<el-option v-for="item in visitList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10" :offset="2">
<el-form-item label="特殊时段" prop="special">
<el-select v-model="specialVisitid" @change="changeSpecialVisit" placeholder="请选择特殊时段" style="width:100%">
<el-option v-for="item in specialVisitList" :key="item.id" :label="item.name" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-table :data="visitInfo" height="400" class="v-table" style="width: 100%;margin-bottom: 20px;">
<el-table-column type="index" align="center">
</el-table-column>
<!-- {{visitInfo}} -->
<el-table-column prop="start_time" label="开始时间">
<template slot-scope="scope">
{{scope.row.start_time}}
</template>
</el-table-column>
<el-table-column prop="show_start_time" label="实际开始时间">
<template slot-scope="scope">
{{scope.row.show_start_time}}
</template>
</el-table-column>
<el-table-column prop="end_time" label="结束时间">
<template slot-scope="scope">
{{scope.row.end_time}}
</template>
</el-table-column>
<el-table-column prop="show_end_time" label="实际结束时间">
<template slot-scope="scope">
{{scope.row.show_end_time}}
</template>
</el-table-column>
<el-table-column prop="total" label="可预约人数">
<template slot-scope="scope">
{{scope.row.total}}
</template>
</el-table-column>
<el-table-column label="操作" width="120px" align="center">
<template slot-scope="scope">
<el-input style="display: none;" type="hidden" v-model="scope.row.id"></el-input>
<Button type="primary" @click="chooseVisit(scope.row)" size="small"
style="margin-left: 10px;" ghost>选择</Button>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
</el-form>
</el-dialog>
<el-dialog title="详情编辑" :visible.sync="dialogFormVisible" fullscreen width="90%">
<el-form :model="form" :rules="rules" ref="form" label-position="right" :label-width="formLabelWidth">
<el-row>
<el-col :span="10">
<el-col :span="10">
<el-form-item label="活动名称" prop="name">
<el-input v-model="form.name" placeholder="请填写活动名称" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="10" :offset="4">
<el-form-item label="预定截止" prop="end_plan">
<el-date-picker style="width:100%" v-model="form.end_plan" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择预定截止时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="活动时间" prop="dateRange">
<el-date-picker style="width:100%" v-model="dateRange" type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="活动开始日期"
end-placeholder="活动结束日期">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="24">
<div class="table-tree tableswidth">
<div style="display: flex;justify-content: space-between;margin-right: 20px;margin-bottom: 10px;">
<div style="font-size: 18px;color: #303133;">活动场次</div>
<Button type="primary" @click="addRow()" size="small" style="margin-left: 10px;" ghost>新增</Button>
</div>
<el-table :data="form.numbers_list" height="200" class="v-table" style="width: 100%;margin-bottom: 20px;">
<el-table-column type="index" align="center">
</el-table-column>
<el-table-column prop="name" label="活动名称">
<template slot-scope="scope">
<el-input v-model="scope.row.name" placeholder="请填写活动名称" autocomplete="off"></el-input>
</template>
</el-table-column>
<el-table-column prop="start_time" label="活动时间">
<template slot-scope="scope">
<el-date-picker style="width:100%" v-model="scope.row.dateRange" type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="活动开始日期"
end-placeholder="活动结束日期">
</el-date-picker>
</template>
</el-table-column>
<el-table-column prop="end_time" label="预定截止">
<template slot-scope="scope">
<el-date-picker style="width:100%" v-model="scope.row.end_plan" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择预定截止时间">
</el-date-picker>
</template>
</el-table-column>
<el-table-column prop="total" label="总人数">
<template slot-scope="scope">
<el-input v-model="scope.row.total" placeholder="请填写总人数(0为不限制)" autocomplete="off"></el-input>
</template>
</el-table-column>
<el-table-column prop="total" label="预约时段">
<template slot-scope="scope">
<el-button type="primary" @click="openVisit(scope.$index)">
{{form.numbers_list[scope.$index].time?form.numbers_list[scope.$index].time:currentVisit.text}}
</el-button>
</template>
</el-table-column>
<el-table-column label="操作" width="120px" align="center">
<template slot-scope="scope">
<el-input style="display: none;" type="hidden" v-model="scope.row.id"></el-input>
<Button type="error" @click="delRow(scope.$index,scope.row.id)" size="small" style="margin-left: 10px;"
ghost>删除</Button>
</template>
</el-table-column>
</el-table>
</div>
</el-col>
<el-col :span="10" :offset="4">
<el-col :span="10">
<el-form-item label="所属区域" prop="area">
<el-select v-model="form.area" placeholder="请选择所属区域" style="width:100%">
<el-option v-for="item in parameters.activityArea" :key="item.value" :label="item.value"
@ -73,7 +206,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-col :span="10" :offset="4">
<el-form-item label="关联类型" prop="type">
<el-select v-model="form.type" placeholder="请选择关联类型" style="width:100%">
<el-option v-for="item in parameters.activityType" :key="item.value" :label="item.value"
@ -81,7 +214,14 @@
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-col>
<el-col :span="10" >
<el-form-item label="地址" prop="address">
<avue-input-map :params="mapparams" placeholder="请选择地图" v-model="mapform"></avue-input-map>
</el-form-item>
</el-col>
<el-col :span="10" :offset="4">
<el-form-item label="关联内容" prop="con">
<el-select v-model="form.form" placeholder="请选择关联内容" style="width:100%">
@ -91,17 +231,6 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="地址" prop="address">
<avue-input-map :params="mapparams" placeholder="请选择地图" v-model="mapform"></avue-input-map>
</el-form-item>
</el-col>
<el-col :span="10" :offset="4">
<el-form-item label="集合地" prop="resort">
<el-input v-model="form.assemble" placeholder="请填写集合地" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="地址经度" prop="longitude">
<el-input disabled="" v-model="form.longitude" placeholder="请填写地址经度" autocomplete="off"></el-input>
@ -112,18 +241,23 @@
<el-input disabled="" v-model="form.latitude" placeholder="请填写地址纬度" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="集合地" prop="resort">
<el-input v-model="form.assemble" placeholder="请填写集合地" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<!-- <el-col :span="10" :offset="4">
<el-form-item label="总人数" prop="total">
<el-input v-model="form.total" placeholder="请填写总人数(0为不限制)" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
</el-col> -->
<el-col :span="10" :offset="4">
<el-form-item label="价格" prop="price">
<el-input v-model="form.price" placeholder="请填写价格" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-col :span="10">
<el-form-item label="目标群体" prop="group">
<el-select v-model="form.target" placeholder="请选择目标群体" style="width:100%">
<el-option v-for="item in parameters.activityGroup" :key="item.value" :label="item.value"
@ -134,7 +268,7 @@
</el-col>
<el-col :span="8">
<el-col :span="10" :offset="4">
<el-form-item label="参加范围" prop="group">
<el-select v-model="form.join_type" placeholder="请选择参加范围" style="width:100%">
<el-option v-for="item in parameters.joinTypes" :key="item.value" :label="item.value" :value="item.id">
@ -142,25 +276,6 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="预定截止" prop="end_plan">
<el-date-picker style="width:100%" v-model="form.end_plan" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择预定截止时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="活动时间" prop="dateRange">
<el-date-picker style="width:100%" v-model="dateRange" type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="活动开始日期"
end-placeholder="活动结束日期">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-form-item class='nextlabel' label="海报图(建议上传图片宽度750px)" prop="cover">
<el-upload action="/api/admin/upload-file" list-type="picture-card" :file-list="coverlist" ref="pictureUpload"
@ -248,8 +363,17 @@
save,
del,
get,
chanStatus
chanStatus,
delNum
} from "../../api/active/activity.js";
import {
listvisit,
get as getVisit
} from "../../api/resource/visitresource.js";
import {
listvisitspecial,
get as getSpecialVisit
} from "../../api/resource/visitspecial.js";
export default {
components: {
LxHeader,
@ -356,7 +480,29 @@
latitude: "",
banners_list: [],
join_type: 0,
numbers_list: [{
name: "",
dateRange:"",
start_time: "",
end_time: "",
end_plan: "",
total: 0,
date: "",
rule_id: "",
time: ""
}],
},
//
currentVisit:{
text:"选择预约时段"
},
visitList: [], //
visitInfo: [], //
visitid: "",
specialVisitid: "",
specialVisitList: [],
showRules: false,
dateRange: "",
showTime: "",
coverlist: [],
@ -460,8 +606,65 @@
this.form.address = newVal[2];
}
},
methods: {
methods: {
//
addRow() {
var len = this.form.numbers_list.length;
this.form.numbers_list.push({
name: "",
dateRange:"",
start_time: "",
end_time: "",
end_plan: "",
total: 0,
date: "",
rule_id: "",
time: ""
});
},
//
delRow(index,id) {
var that = this
if (id) {
delNum(id).then(response => {
that.$Message.success('删除成功');
that.form.numbers_list.splice(index, 1);
}).catch(error => {
console.log(error)
reject(error)
})
} else {
this.form.rules_list.splice(index, 1);
}
},
//
openVisit(index){
this.showRules=true
this.currentVisit.index = index
},
//
changeVisit(val) {
console.log("visit", val)
this.specialVisitid = ""
getVisit(val).then(res => {
this.visitInfo = res.rules
})
},
//
changeSpecialVisit(val) {
console.log("Specialvisit", val)
this.visitid = ""
getSpecialVisit(val).then(res => {
this.visitInfo = res.rules
})
},
//
chooseVisit(val){
this.form.numbers_list[this.currentVisit.index]['rule_id'] = val.id
this.form.numbers_list[this.currentVisit.index]['time'] = val.start_time + "-" + val.end_time
this.showRules = false
console.log("this.form.numbers_list",this.form.numbers_list)
},
initLoad() {
var that = this;
var clientHeight = document.documentElement.clientHeight
@ -483,6 +686,22 @@
this.paginations.total = res.total
}).catch(error => {
})
listvisit({
page: 1,
page_size: 999,
}).then(res => {
this.visitList = res.data;
}).catch(error => {
})
listvisitspecial({
page: 1,
page_size: 999,
}).then(res => {
this.specialVisitList = res.data;
}).catch(error => {
})
},
info(obj) {
@ -493,7 +712,13 @@
that.form = result;
that.dateRange = [result.start_time, result.end_time];
that.mapform = [result.longitude, result.latitude, result.address]
console.log(that.dateRange);
console.log(that.dateRange);
let numArr = []
for(var k of result.numbers){
k.dateRange = [k.start_time,k.end_time]
numArr.push(k)
}
that.form.numbers_list = numArr
// that.showTime = result.start_time.substring(11, result.start_time.length);
// that.form.end_time = result.end_time.substring(11, result.end_time.length);
result.cover_upload.coverType = "cover";
@ -533,19 +758,43 @@
},
submitForm(formName) {
var that = this;
that.form.start_time = this.dateRange[0];
that.form.end_time = this.dateRange[1];
if (!that.form.start_time || !that.form.end_time) {
that.$message.error('请选择活动时间');
return false;
}
//
let checktime = that.compareDate(that.form.start_time, that.form.end_plan);
if (!checktime) {
that.$message.error('截止时间不能晚于开始时间');
return false;
}
var that = this;
this.form.start_time = this.dateRange[0];
this.form.end_time = this.dateRange[1];
if (!this.form.start_time || !this.form.end_time) {
that.$message.error('请选择活动时间');
return false;
}
//
let checktime = that.compareDate(that.form.start_time, that.form.end_plan);
if (!checktime) {
that.$message.error('截止时间不能晚于开始时间');
return false;
}
let upTotal = 0
for(var k of that.form.numbers_list){
if(!k.name){
that.$message.error('请填写活动名称');
return false;
}
k.start_time = k.dateRange[0];
k.end_time = k.dateRange[1];
if (!k.start_time || !k.end_time) {
that.$message.error('请选择活动时间');
return false;
}
let checktime = that.compareDate(k.start_time, k.end_plan);
if (!checktime) {
that.$message.error('截止时间不能晚于开始时间');
return false;
}
upTotal += parseInt(k.total)
}
that.form.total = upTotal
// console.log(a)
// that.form.end_time = that.form.start_time.substring(0, 10) + " " + that.form.end_time;
@ -560,7 +809,9 @@
"upload_id": m.upload_id
});
}
that.form.banners_list = listUrl;
that.form.banners_list = listUrl;
console.log("this.form",this.form)
// return
this.$refs[formName].validate((valid) => {
if (valid) {
if (that.form.id) {
@ -619,8 +870,8 @@
id: para.id,
status: para.status,
cancel_all: para.cancel_all
}).then(response => {
that.dialogConfirmVisible=false;
}).then(response => {
that.dialogConfirmVisible = false;
this.$Message.success('操作成功');
that.load();
}).catch(error => {})

@ -0,0 +1,734 @@
<template>
<div class="container">
<!-- 查询配置 -->
<div style="padding: 0px 20px">
<div ref="lxHeader">
<LxHeader icon="md-apps" text="活动管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
<div slot="content"></div>
<slot>
<div>
<Input style="width: 200px; margin-right: 10px" v-model="searchFields.name" placeholder="关键字搜索" />
<Button type="primary" @click="load" style="margin-left: 10px">查询</Button>
<Button type="primary" @click="edit()" style="margin-left: 10px">新增活动</Button>
</div>
</slot>
</LxHeader>
</div>
<div class="table-tree">
<el-table :data="tableData" class="v-table" :height="tableHeight" style="width: 100%">
<el-table-column type="index" width="50" label="序号" align="center"> </el-table-column>
<el-table-column :prop="column.field" :align="column.align" v-for="(column,index) in columns"
:label="column.title" :width="column.width">
<template slot-scope="scope">
<div v-if="column.type=='opt'">
<Button ghost size="small" @click="toactive(scope.row)" type="success"
style="margin-left: 10px;">订单</Button>
<Button ghost size="small" @click="edit(scope.row)" type="primary"
style="margin-left: 10px;">编辑</Button>
<Button ghost size="small" type="error" @click="del(scope.row)" style="margin-left: 10px;">删除</Button>
<Button v-if="scope.row['status']==1" ghost size="small" type="info"
@click="dialogConfirmVisible=true,currentId=scope.row.id" style="margin-left: 10px;">下架</Button>
<Button v-if="scope.row['status']==0" ghost size="small" type="warning" @click="changeStatus(scope.row)"
style="margin-left: 10px;">上架</Button>
</div>
<div v-else-if="column.type=='dateRange'">
<!-- {{dateRange}} -->
{{scope.row["start_time"]+"-"+changeEndTime(scope.row["end_time"])}}
</div>
<div v-else-if="column.type=='status'">
<el-tag v-if="scope.row['status']==1" type="" effect="dark">
上架中
</el-tag>
<el-tag v-if="scope.row['status']==0" type="info" effect="dark">
下架
</el-tag>
</div>
<div v-else>{{scope.row[column.field]}}</div>
</template>
</el-table-column>
</el-table>
<div class="pagination">
<el-pagination @current-change="handleCurrentChange" :current-page="paginations.page"
:page-size="paginations.page_size" background layout="prev, pager, next" :total="paginations.total">
</el-pagination>
</div>
</div>
</div>
<el-dialog title="详情编辑" :visible.sync="dialogFormVisible" fullscreen width="90%">
<el-form :model="form" :rules="rules" ref="form" label-position="right" :label-width="formLabelWidth">
<el-row>
<el-col :span="10">
<el-form-item label="活动名称" prop="name">
<el-input v-model="form.name" placeholder="请填写活动名称" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="10" :offset="4">
<el-form-item label="所属区域" prop="area">
<el-select v-model="form.area" placeholder="请选择所属区域" style="width:100%">
<el-option v-for="item in parameters.activityArea" :key="item.value" :label="item.value"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="关联类型" prop="type">
<el-select v-model="form.type" placeholder="请选择关联类型" style="width:100%">
<el-option v-for="item in parameters.activityType" :key="item.value" :label="item.value"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10" :offset="4">
<el-form-item label="关联内容" prop="con">
<el-select v-model="form.form" placeholder="请选择关联内容" style="width:100%">
<el-option v-for="item in parameters.activityCon" :key="item.value" :label="item.value"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="地址" prop="address">
<avue-input-map :params="mapparams" placeholder="请选择地图" v-model="mapform"></avue-input-map>
</el-form-item>
</el-col>
<el-col :span="10" :offset="4">
<el-form-item label="集合地" prop="resort">
<el-input v-model="form.assemble" placeholder="请填写集合地" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="地址经度" prop="longitude">
<el-input disabled="" v-model="form.longitude" placeholder="请填写地址经度" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="10" :offset="4">
<el-form-item label="地址纬度" prop="latitude">
<el-input disabled="" v-model="form.latitude" placeholder="请填写地址纬度" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="总人数" prop="total">
<el-input v-model="form.total" placeholder="请填写总人数(0为不限制)" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="价格" prop="price">
<el-input v-model="form.price" placeholder="请填写价格" autocomplete="off"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="目标群体" prop="group">
<el-select v-model="form.target" placeholder="请选择目标群体" style="width:100%">
<el-option v-for="item in parameters.activityGroup" :key="item.value" :label="item.value"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="参加范围" prop="group">
<el-select v-model="form.join_type" placeholder="请选择参加范围" style="width:100%">
<el-option v-for="item in parameters.joinTypes" :key="item.value" :label="item.value" :value="item.id">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="预定截止" prop="end_plan">
<el-date-picker style="width:100%" v-model="form.end_plan" type="datetime"
value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择预定截止时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="活动时间" prop="dateRange">
<el-date-picker style="width:100%" v-model="dateRange" type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="活动开始日期"
end-placeholder="活动结束日期">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
<el-form-item class='nextlabel' label="海报图(建议上传图片宽度750px)" prop="cover">
<el-upload action="/api/admin/upload-file" list-type="picture-card" :file-list="coverlist" ref="pictureUpload"
:limit="1" :auto-upload="true" :data="uploadOther"
:on-success="function(responsose,file,fileList) {return handlesuccess(responsose,file,fileList,1)}">
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<i class="el-icon-zoom-in"></i>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
</el-form-item>
<el-form-item class='nextlabel' label="轮播图(最多三张,建议上传图片宽度750px)" prop="banners_list">
<el-upload action="/api/admin/upload-file" list-type="picture-card" :file-list="bannersList"
ref="pictureUploads" :limit="3" :auto-upload="true" :data="uploadOther"
:on-success="function(responsose,file,fileList) {return handlesuccess(responsose,file,fileList,2)}">
<i slot="default" class="el-icon-plus"></i>
<div slot="file" slot-scope="{file}">
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
<i class="el-icon-zoom-in"></i>
</span>
<span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
</el-form-item>
<el-form-item label="活动介绍" prop="content">
<div style="width: 99.9%;">
<tinymce v-model="form.content" ref="tiny" :height="300" />
</div>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="resetForm('form')"> </el-button>
<el-button type="primary" @click="submitForm('form')"> </el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
<el-dialog :visible.sync="dialogConfirmVisible" title="下架确认" width="40%">
<el-form>
<el-form-item label="是否取消预约" prop="content">
<el-switch v-model="cancel_all" active-text="" inactive-text=""
active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogConfirmVisible=false"> </el-button>
<el-button type="primary" @click="toCancel()"> </el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import LxHeader from "@/components/LxHeader/index.vue";
import Tinymce from '@/components/Tinymce'
import AvueMap from 'avue-plugin-map'
import {
getToken
} from '@/utils/auth'
import {
listactive,
store,
save,
del,
get,
chanStatus
} from "../../api/active/activity.js";
export default {
components: {
LxHeader,
Tinymce,
AvueMap
},
data() {
return {
currentId: 0,
dialogConfirmVisible: false,
cancel_all: false,
dialogFormVisible: false,
formLabelWidth: "120px",
selectedValue: null,
dialogImageUrl: '',
dialogVisible: false,
disabled: false,
tableHeight: 0,
//
searchFields: {
name: ""
},
tableData: [],
paginations: {
page: 1,
page_size: 15,
total: 0
},
uploadOther: {
token: ""
},
parameters: {
joinTypes: [{
id: 0,
value: "不限制"
}, {
id: 1,
value: "仅团体参与"
}, {
id: 2,
value: "仅个人参与"
}],
activityArea: [{
id: 1,
value: "本馆"
}, {
id: 2,
value: "馆外"
}],
activityType: [{
id: 1,
value: "公益"
}, {
id: 2,
value: "商业"
}],
activityCon: [{
id: 1,
value: "讲座"
}, {
id: 2,
value: "主题参观"
}, {
id: 3,
value: "体验活动"
}],
activityGroup: [{
id: 1,
value: "幼儿园"
}, {
id: 2,
value: "小学生"
}, {
id: 3,
value: "初中生"
}, {
id: 4,
value: "高中生"
}, {
id: 5,
value: "不限"
}]
},
mapparams: {
zoom: 11,
},
mapform: [],
form: {
name: "",
area: "",
type: "",
form: "",
target: "",
address: "",
assemble: "",
cover: "",
start_time: "",
end_time: "",
end_plan: "",
total: 0,
content: "",
price: "",
longitude: "",
latitude: "",
banners_list: [],
join_type: 0,
},
dateRange: "",
showTime: "",
coverlist: [],
bannersList: [],
// fileList:[],
columns: [{
field: "name",
title: "活动名称",
type: "string",
},
{
field: "address",
title: "活动地址",
type: "string",
},
{
field: "dateRange",
title: "活动时间",
type: "dateRange",
align: "center",
width: 300
},
{
field: "end_plan",
title: "截止时间",
type: "string",
align: "center",
width: 220
},
{
field: "status",
title: "状态",
type: "status",
align: "center",
width: 120
},
{
field: "操作",
title: "操作",
width: 240,
type: "opt",
}
],
rules: {
name: [{
required: true,
message: '请输入活动名称',
trigger: 'blur'
}],
longitude: [{
required: true,
message: '请输入经度',
trigger: 'blur'
}],
latitude: [{
required: true,
message: '请输入纬度',
trigger: 'blur'
}],
start_time: [{
required: true,
message: '请选择开始时间',
trigger: 'blur'
}],
end_time: [{
required: true,
message: '请选择结束时间',
trigger: 'blur'
}],
end_plan: [{
required: true,
message: '请选择截止日期',
trigger: 'blur'
}]
},
markerLayer: {},
map: null,
imgsrc: "/src/assets/imgs/ditu.png"
}
},
mounted() {
},
destroyed() {
},
beforeUpdate() {
},
created() {
this.uploadOther.token = getToken();
this.initLoad();
this.load();
},
watch: {
mapform(newVal, oldVal) {
this.form.longitude = newVal[0];
this.form.latitude = newVal[1];
this.form.address = newVal[2];
}
},
methods: {
initLoad() {
var that = this;
var clientHeight = document.documentElement.clientHeight
var lxHeader_height = 96.5; //
var paginationHeight = 37; //
var topHeight = 50; //
let tableHeight = clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
that.tableHeight = tableHeight;
},
load() {
var that = this;
listactive({
page: this.paginations.page,
page_size: this.paginations.page_size,
name: this.searchFields.name
}).then(res => {
this.tableData = res.data;
this.paginations.total = res.total
}).catch(error => {
})
},
info(obj) {
var that = this;
get(obj.id).then(res => {
that.coverlist = [];
let result = Object.assign(that.form, res);
that.form = result;
that.dateRange = [result.start_time, result.end_time];
that.mapform = [result.longitude, result.latitude, result.address]
console.log(that.dateRange);
// that.showTime = result.start_time.substring(11, result.start_time.length);
// that.form.end_time = result.end_time.substring(11, result.end_time.length);
result.cover_upload.coverType = "cover";
that.coverlist.push(result.cover_upload);
let _files = [];
for (var mod of result.banners) {
let m = Object.assign({}, mod);
m.url = mod.upload.url;
m.id = mod.upload.id;
m.coverType = "poster";
_files.push(m);
}
that.bannersList = _files;
this.$refs.tiny.setContent(result.content);
}).catch(error => {
//reject(error)
})
},
edit(obj) {
this.form = this.$options.data().form;
this.clientHeight = document.documentElement.clientHeight - 84 - 110;
if (obj) {
var that = this;
that.info(obj);
} else {
this.dateRange = [];
this.mapform = ['', '', ''];
}
this.dialogFormVisible = true;
},
compareDate(d1, d2) {
let reg = new RegExp('-', 'g')
return ((new Date(d1.replace(reg, '/'))) > (new Date(d2.replace(reg, '/'))))
},
submitForm(formName) {
var that = this;
that.form.start_time = this.dateRange[0];
that.form.end_time = this.dateRange[1];
if (!that.form.start_time || !that.form.end_time) {
that.$message.error('请选择活动时间');
return false;
}
//
let checktime = that.compareDate(that.form.start_time, that.form.end_plan);
if (!checktime) {
that.$message.error('截止时间不能晚于开始时间');
return false;
}
// console.log(a)
// that.form.end_time = that.form.start_time.substring(0, 10) + " " + that.form.end_time;
let listUrl = [];
for (var m of that.bannersList) {
if (m.response)
listUrl.push({
"upload_id": m.response.id
});
else
listUrl.push({
"upload_id": m.upload_id
});
}
that.form.banners_list = listUrl;
this.$refs[formName].validate((valid) => {
if (valid) {
if (that.form.id) {
save(that.form).then(response => {
console.log(response)
this.$Message.success('操作成功');
that.dialogFormVisible = false;
that.load();
}).catch(error => {})
} else {
store(that.form).then(response => {
console.log(response)
this.$Message.success('操作成功');
that.dialogFormVisible = false;
that.load();
}).catch(error => {})
}
} else {
this.$Message.error('数据校验失败');
return false;
}
});
},
changeStatus(obj) {
var that = this;
if (obj) {
let status = obj.status == 0 ? 1 : 0;
let para = {
id: obj.id,
status: status,
cancel_all: 0
}
this.$Modal.confirm({
title: '确认要变更状态?',
onOk: () => {
that.toChangeStatus(para);
},
onCancel: () => {
//this.$Message.info('Clicked cancel');
}
});
}
},
toCancel() {
let para = {
id: this.currentId,
status: 0,
cancel_all: 0
}
this.toChangeStatus(para);
},
toChangeStatus(para) {
let that = this;
chanStatus({
id: para.id,
status: para.status,
cancel_all: para.cancel_all
}).then(response => {
that.dialogConfirmVisible=false;
this.$Message.success('操作成功');
that.load();
}).catch(error => {})
},
resetForm(formName) {
var that = this;
this.coverlist = [];
this.bannersList = [];
this.$refs.tiny.setContent("");
this.$refs[formName].resetFields();
that.dialogFormVisible = false;
},
del(obj) {
var that = this;
if (obj) {
this.$Modal.confirm({
title: '确认要删除数据?',
onOk: () => {
del(obj.id).then(response => {
this.$Message.success('操作成功');
that.load();
}).catch(error => {
console.log(error)
reject(error)
})
},
onCancel: () => {
//this.$Message.info('Clicked cancel');
}
});
}
},
handleRemove(file) {
if (file.coverType == "cover") {
this.coverlist = [];
} else if (file.coverType == "poster") {
for (var i = 0; i < this.bannersList.length; i++) {
if (this.bannersList[i].url == file.url) {
this.bannersList.splice(i, 1)
}
}
}
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
},
handlesuccess(response, file, fileList, index) {
if (index == 1) {
let listid = "";
for (var m of fileList) {
m.coverType = "cover";
if (m.response)
listid = m.response.id;
else
listid = m.id;
}
this.coverlist = fileList;
this.form.cover = listid;
} else {
let listUrl = [];
for (var m of fileList) {
m.coverType = "poster";
if (m.response)
listUrl.push({
"upload_id": m.response.id
});
else
listUrl.push({
"upload_id": m.id
});
}
this.bannersList = fileList
this.form.banners_list = listUrl
}
},
handleCurrentChange(page) {
this.paginations.page = page;
this.load();
},
toactive(obj) {
if (obj.id) {
this.$router.push({
path: '/order/activeorder',
query: {
activity_id: obj.id
}
})
}
},
changeEndTime(val) {
if (val) {
val = val.substring(11, val.length);
return val
}
},
isShowTime(val) {
this.showTime = val.substring(11, val.length);
},
}
};
</script>
<style>
.nextlabel label {
display: block;
width: 100% !important;
text-align: left;
}
</style>
Loading…
Cancel
Save