|
@@ -0,0 +1,527 @@
|
|
|
+<template>
|
|
|
+ <div id="marketingActivitiesList">
|
|
|
+ <search-box-new
|
|
|
+ ref="searchBox"
|
|
|
+ :formData="formData"
|
|
|
+ :formList="formList"
|
|
|
+ @search="search"
|
|
|
+ @init="init"
|
|
|
+ />
|
|
|
+ <table-list
|
|
|
+ :tableSets="tableSet"
|
|
|
+ :tableData="tableData"
|
|
|
+ :navText="navText"
|
|
|
+ :loading="loading"
|
|
|
+ >
|
|
|
+ <template slot="customize">
|
|
|
+ <el-button size="medium" type="success" @click="allClick"
|
|
|
+ >新增活动</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <template slot="btn" slot-scope="props">
|
|
|
+ <el-button type="text" @click="reply(props.scope.row)">修改</el-button>
|
|
|
+ <el-button type="text" @click="del(props.scope.row)">删除</el-button>
|
|
|
+ <el-button type="text" @click="openCode(props.scope.row)"
|
|
|
+ >二维码</el-button
|
|
|
+ >
|
|
|
+ <el-button type="text" @click="userBoxsOpen(props.scope.row)"
|
|
|
+ >报名情况</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </table-list>
|
|
|
+ <pagination
|
|
|
+ :total="total"
|
|
|
+ :pageSize="formData.pageSize"
|
|
|
+ :currentPage="formData.pageNum"
|
|
|
+ @handleSizeChange="handleSizeChange"
|
|
|
+ @handleCurrentChange="handleCurrentChange"
|
|
|
+ />
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ width="610px"
|
|
|
+ :show-close="false"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <div slot="title" class="hearders">
|
|
|
+ <div class="leftTitle">修改活动</div>
|
|
|
+ <div class="rightBoxs">
|
|
|
+ <img src="@/assets/images/Close@2x.png" alt="" @click="closeBZ" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <el-form
|
|
|
+ label-position="right"
|
|
|
+ label-width="150px"
|
|
|
+ :model="listData"
|
|
|
+ :rules="rules"
|
|
|
+ ref="listData"
|
|
|
+ >
|
|
|
+ <el-form-item label="活动名称" prop="name">
|
|
|
+ <el-input v-model="listData.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="活动科目(多个科目使用逗号','隔开)" prop="majors">
|
|
|
+ <el-input v-model="listData.majors"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="活动开始时间" prop="startTime"
|
|
|
+ ><el-date-picker
|
|
|
+ type="datetime"
|
|
|
+ placeholder="开始日期"
|
|
|
+ @change="changeEndTime(1)"
|
|
|
+ v-model="listData.startTime"
|
|
|
+ style="width: 100%"
|
|
|
+ value-format="timestamp"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="活动结束时间" prop="endTime">
|
|
|
+ <el-date-picker
|
|
|
+ type="datetime"
|
|
|
+ placeholder="开始日期"
|
|
|
+ @change="changeEndTime(2)"
|
|
|
+ v-model="listData.endTime"
|
|
|
+ style="width: 100%"
|
|
|
+ value-format="timestamp"
|
|
|
+ ></el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="closeBZ">取 消</el-button>
|
|
|
+ <el-button @click="submitForm('listData')">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="dialogVisibleCode"
|
|
|
+ width="610px"
|
|
|
+ :show-close="false"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <div slot="title" class="hearders">
|
|
|
+ <div class="leftTitle">二维码</div>
|
|
|
+ <div class="rightBoxs">
|
|
|
+ <img
|
|
|
+ src="@/assets/images/Close@2x.png"
|
|
|
+ alt=""
|
|
|
+ @click="dialogVisibleCode = false"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: center">
|
|
|
+ <img style="max-width: 420px" :src="baseImgCode" alt="" />
|
|
|
+ <div style="margin-top: 16px">
|
|
|
+ <el-button size="small" type="success" @click="downCode"
|
|
|
+ >下载二维码</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="dialogVisibleCode = false">取 消</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ <userBoxs ref="userBoxs" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import searchBoxNew from "@/components/searchBoxNew";
|
|
|
+import tableList from "@/components/tableList";
|
|
|
+import pagination from "@/components/pagination";
|
|
|
+import userBoxs from "./userBoxs.vue";
|
|
|
+export default {
|
|
|
+ name: "MarketingActivitiesList",
|
|
|
+ components: { searchBoxNew, tableList, pagination, userBoxs },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ baseImgCode: "",
|
|
|
+ dialogVisibleCode: false,
|
|
|
+ loading: false, //当前表单加载是否加载动画
|
|
|
+ navText: {
|
|
|
+ title: "营销活动",
|
|
|
+ index: 0,
|
|
|
+ ch: "条",
|
|
|
+ num: false,
|
|
|
+ border: true,
|
|
|
+ choice: true,
|
|
|
+ addHide: true,
|
|
|
+ changeWidth: "240px",
|
|
|
+ backFatherBtn: {
|
|
|
+ status: false,
|
|
|
+ title: "未定义",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //搜索
|
|
|
+ formList: [
|
|
|
+ {
|
|
|
+ prop: "name",
|
|
|
+ placeholder: "请输入活动名称",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ formData: {
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ status: 1,
|
|
|
+ },
|
|
|
+ // 表单
|
|
|
+ tableSet: [
|
|
|
+ {
|
|
|
+ label: "活动名称",
|
|
|
+ prop: "name",
|
|
|
+ hidden: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "科目",
|
|
|
+ prop: "majors",
|
|
|
+ hidden: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "活动开始时间",
|
|
|
+ prop: "startTime",
|
|
|
+ hidden: true,
|
|
|
+ scope: "aTimeList",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "活动结束时间",
|
|
|
+ prop: "endTime",
|
|
|
+ hidden: true,
|
|
|
+ scope: "aTimeList",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "创建人",
|
|
|
+ prop: "creatorName",
|
|
|
+ hidden: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "创建时间",
|
|
|
+ prop: "createTime",
|
|
|
+ hidden: true,
|
|
|
+ scope: "aTimeList",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ tableData: [], //表单数据
|
|
|
+ total: 0, //一共多少条
|
|
|
+ listData: {
|
|
|
+ name: "",
|
|
|
+ majors: "",
|
|
|
+ startTime: "",
|
|
|
+ endTime: "",
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
|
|
|
+ majors: [{ required: true, message: "请输入科目", trigger: "blur" }],
|
|
|
+ startTime: [
|
|
|
+ {
|
|
|
+ type: "date",
|
|
|
+ required: true,
|
|
|
+ message: "请选择活动开始时间",
|
|
|
+ trigger: "change",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ endTime: [
|
|
|
+ {
|
|
|
+ type: "date",
|
|
|
+ required: true,
|
|
|
+ message: "请选择活动结束时间",
|
|
|
+ trigger: "change",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ listPop: 1, //1新增2修改
|
|
|
+ dialogVisible: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //将base64转换为blob
|
|
|
+ dataURLtoBlob(dataurl) {
|
|
|
+ if (!dataurl) {
|
|
|
+ this.$message.error("下载失败");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var arr = dataurl.split(","),
|
|
|
+ mime = arr[0].match(/:(.*?);/)[1],
|
|
|
+ bstr = atob(arr[1]),
|
|
|
+ n = bstr.length,
|
|
|
+ u8arr = new Uint8Array(n);
|
|
|
+ while (n--) {
|
|
|
+ u8arr[n] = bstr.charCodeAt(n);
|
|
|
+ }
|
|
|
+ return new Blob([u8arr], { type: mime });
|
|
|
+ },
|
|
|
+ //下载方法
|
|
|
+ downloadFile(url, name = "下载图") {
|
|
|
+ var a = document.createElement("a");
|
|
|
+ a.setAttribute("href", url);
|
|
|
+ a.setAttribute("download", name);
|
|
|
+ a.setAttribute("target", "_blank");
|
|
|
+ let clickEvent = document.createEvent("MouseEvents");
|
|
|
+ clickEvent.initEvent("click", true, true);
|
|
|
+ a.dispatchEvent(clickEvent);
|
|
|
+ },
|
|
|
+ //下载二维码
|
|
|
+ downCode() {
|
|
|
+ var base64 = this.baseImgCode;
|
|
|
+ var name = "营销活动小程序二维码";
|
|
|
+ var myBlob = this.dataURLtoBlob(base64);
|
|
|
+ var myUrl = URL.createObjectURL(myBlob);
|
|
|
+ this.downloadFile(myUrl, name);
|
|
|
+ },
|
|
|
+ //打开二维码
|
|
|
+ openCode(row) {
|
|
|
+ this.$api.exportsystemexamactivitycode(row.activityId).then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ this.baseImgCode = res.data;
|
|
|
+ this.dialogVisibleCode = true;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ userBoxsOpen(row) {
|
|
|
+ this.$refs.userBoxs.openBox(row);
|
|
|
+ },
|
|
|
+ changeEndTime(int) {
|
|
|
+ if (this.listData.startTime === this.listData.endTime) {
|
|
|
+ this.$message.warning("开始时间与结束时间不允许相同");
|
|
|
+ if (int === 1) {
|
|
|
+ this.listData.startTime = "";
|
|
|
+ }
|
|
|
+ if (int === 2) {
|
|
|
+ this.listData.endTime = "";
|
|
|
+ }
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ int === 1 &&
|
|
|
+ this.listData.endTime &&
|
|
|
+ this.listData.startTime > this.listData.endTime
|
|
|
+ ) {
|
|
|
+ this.$message.warning(
|
|
|
+ "当前选择的开始时间大于结束时间,请重新选择开始时间!"
|
|
|
+ );
|
|
|
+ this.listData.startTime = "";
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ int === 2 &&
|
|
|
+ this.listData.startTime &&
|
|
|
+ this.listData.endTime < this.listData.startTime
|
|
|
+ ) {
|
|
|
+ this.$message.warning(
|
|
|
+ "当前选择的结束时间小于开始时间,请重新选择结束时间!"
|
|
|
+ );
|
|
|
+ this.listData.endTime = "";
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ search(int) {
|
|
|
+ this.loading = true;
|
|
|
+ if (int === 1) {
|
|
|
+ this.formData.pageNum = 1;
|
|
|
+ }
|
|
|
+ if (int === 2) {
|
|
|
+ this.formData = {
|
|
|
+ pageSize: 10,
|
|
|
+ pageNum: 1,
|
|
|
+ status: 1,
|
|
|
+ };
|
|
|
+ }
|
|
|
+ var data = JSON.parse(JSON.stringify(this.formData));
|
|
|
+ this.$api
|
|
|
+ .inquireSystemexamactivitylist(data)
|
|
|
+ .then((res) => {
|
|
|
+ this.tableData = res.rows;
|
|
|
+ this.total = res.total;
|
|
|
+ this.navText.index = res.total;
|
|
|
+ })
|
|
|
+ .finally(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ init() {
|
|
|
+ this.search(2);
|
|
|
+ },
|
|
|
+ del(v) {
|
|
|
+ this.$alert(
|
|
|
+ "确定删除此内容?<br />内容删除后将无法恢复,请慎重考虑",
|
|
|
+ "提示",
|
|
|
+ {
|
|
|
+ dangerouslyUseHTMLString: true,
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(() => {
|
|
|
+ var data = {
|
|
|
+ activityId: v.activityId,
|
|
|
+ status: -1,
|
|
|
+ };
|
|
|
+ this.$api.editSystemexamactivity(data).then((res) => {
|
|
|
+ this.$message.success("删除成功");
|
|
|
+ this.search();
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message({
|
|
|
+ type: "info",
|
|
|
+ message: "已取消删除",
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleSizeChange(v) {
|
|
|
+ this.formData.pageSize = v;
|
|
|
+ this.formData.pageNum = 1;
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ handleCurrentChange(v) {
|
|
|
+ this.formData.pageNum = v;
|
|
|
+ this.search();
|
|
|
+ },
|
|
|
+ reply(item) {
|
|
|
+ this.listPop = 2;
|
|
|
+ this.listData = JSON.parse(JSON.stringify(item));
|
|
|
+ this.listData.startTime = this.listData.startTime * 1000;
|
|
|
+ this.listData.endTime = this.listData.endTime * 1000;
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs["listData"].clearValidate();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ allClick() {
|
|
|
+ this.listPop = 1;
|
|
|
+ this.listData = {
|
|
|
+ name: "",
|
|
|
+ majors: "",
|
|
|
+ startTime: "",
|
|
|
+ endTime: "",
|
|
|
+ };
|
|
|
+ this.dialogVisible = true;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs["listData"].clearValidate();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ closeBZ() {
|
|
|
+ this.dialogVisible = false;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 提交-表单验证
|
|
|
+ */
|
|
|
+ submitForm(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.submit();
|
|
|
+ } else {
|
|
|
+ console.log("error submit!!");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ var data = JSON.parse(JSON.stringify(this.listData));
|
|
|
+ data.startTime = data.startTime / 1000;
|
|
|
+ data.endTime = data.endTime / 1000;
|
|
|
+ if (this.listPop === 1) {
|
|
|
+ this.$api.addSystemexamactivity(data).then((res) => {
|
|
|
+ this.$message.success("新增成功");
|
|
|
+ this.search();
|
|
|
+ this.dialogVisible = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ if (this.listPop === 2) {
|
|
|
+ this.$api.editSystemexamactivity(data).then((res) => {
|
|
|
+ this.$message.success("修改成功");
|
|
|
+ this.search();
|
|
|
+ this.dialogVisible = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+/deep/.el-button {
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+/deep/.el-dialog {
|
|
|
+ border-radius: 8px;
|
|
|
+ .el-dialog__header {
|
|
|
+ padding: 0;
|
|
|
+ .hearders {
|
|
|
+ height: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0px 18px 0px 20px;
|
|
|
+ border-bottom: 1px solid #e2e2e2;
|
|
|
+ .leftTitle {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #2f4378;
|
|
|
+ }
|
|
|
+ .rightBoxs {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ margin-left: 13px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-dialog__footer {
|
|
|
+ padding: 0;
|
|
|
+ .dialog-footer {
|
|
|
+ padding: 0px 40px;
|
|
|
+ height: 70px;
|
|
|
+ border-top: 1px solid #e2e2e2;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.imgBox {
|
|
|
+ width: 100%;
|
|
|
+ // height: 210px;
|
|
|
+ border: 1px solid #e2e2e2;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 8px 8px 3px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ .imgLabel {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ border: 1px dotted #e2e2e2;
|
|
|
+ color: #999;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 8px;
|
|
|
+ .msPhoto {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 270px;
|
|
|
+ img {
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 270px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .imgbbx {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ i {
|
|
|
+ font-weight: bold;
|
|
|
+ margin: 14px 0;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ margin: 5px 0px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|