|
|
@@ -0,0 +1,442 @@
|
|
|
+<template>
|
|
|
+ <div class="tab1Add">
|
|
|
+ <div class="top">
|
|
|
+ <div class="tit"></div>
|
|
|
+ 活动发布
|
|
|
+ </div>
|
|
|
+ <div class="main">
|
|
|
+ <div class="mainTit1">活动信息</div>
|
|
|
+ <div class="mainBox">
|
|
|
+ <el-form
|
|
|
+ :model="ruleForm"
|
|
|
+ :rules="rules"
|
|
|
+ ref="ruleForm"
|
|
|
+ label-width="140px"
|
|
|
+ class="demo-ruleForm"
|
|
|
+ >
|
|
|
+ <el-form-item label="活动名称：" prop="name">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="ruleForm.name"
|
|
|
+ maxlength="30"
|
|
|
+ show-word-limit
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="活动地点：" prop="name2">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="ruleForm.name2"
|
|
|
+ maxlength="50"
|
|
|
+ show-word-limit
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="活动主持人：" prop="name2">
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="ruleForm.name2"
|
|
|
+ maxlength="10"
|
|
|
+ show-word-limit
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="row">
|
|
|
+ <el-form-item label="参与活动年龄段：" prop="name2">
|
|
|
+ <el-select
|
|
|
+ v-model="ruleForm.name2"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 170px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="i in 99"
|
|
|
+ :key="i"
|
|
|
+ :label="`${i}岁`"
|
|
|
+ :value="i"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <span class="fenge">-</span>
|
|
|
+ <el-form-item prop="name3" class="mySelect">
|
|
|
+ <el-select
|
|
|
+ v-model="ruleForm.name3"
|
|
|
+ placeholder="请选择"
|
|
|
+ style="width: 170px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="i in 99"
|
|
|
+ :key="i"
|
|
|
+ :label="`${i}岁`"
|
|
|
+ :value="i"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ <!-- 照片墙1 -->
|
|
|
+ <el-form-item label="图文封面：">
|
|
|
+ <span class="biaoshi">*</span>
|
|
|
+ <el-upload
|
|
|
+ accept=".png,.jpg,.jpeg,.gif"
|
|
|
+ :action="baseURL + '/cms/content/upload'"
|
|
|
+ :data="{}"
|
|
|
+ :file-list="imgUpList1"
|
|
|
+ :headers="{ token }"
|
|
|
+ :limit="1"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ list-type="picture-card"
|
|
|
+ :on-preview="handlePictureCardPreview"
|
|
|
+ :on-remove="handleRemove1"
|
|
|
+ :before-remove="beforeRemove"
|
|
|
+ :before-upload="beforethumbUploadImg"
|
|
|
+ :on-success="upload_thumb_successImg1"
|
|
|
+ >
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
+ <div slot="tip" class="el-upload__tip">
|
|
|
+ 格式要求：支持png、jpg、gif和jpeg的图片格式；最大支持20M
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- 照片墙2 -->
|
|
|
+ <el-form-item label="活动顶部配图：">
|
|
|
+ <span class="biaoshi biaoshi2">*</span>
|
|
|
+ <el-upload
|
|
|
+ accept=".png,.jpg,.jpeg,.gif"
|
|
|
+ :action="baseURL + '/cms/content/upload'"
|
|
|
+ :data="{}"
|
|
|
+ :file-list="imgUpList2"
|
|
|
+ :headers="{ token }"
|
|
|
+ :limit="1"
|
|
|
+ :on-exceed="handleExceed"
|
|
|
+ list-type="picture-card"
|
|
|
+ :on-preview="handlePictureCardPreview"
|
|
|
+ :on-remove="handleRemove2"
|
|
|
+ :before-remove="beforeRemove"
|
|
|
+ :before-upload="beforethumbUploadImg"
|
|
|
+ :on-success="upload_thumb_successImg2"
|
|
|
+ >
|
|
|
+ <i class="el-icon-plus"></i>
|
|
|
+ <div slot="tip" class="el-upload__tip">
|
|
|
+ 格式要求：支持png、jpg、gif和jpeg的图片格式；最大支持20M
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="mainTit1 mainTit2">活动时间</div>
|
|
|
+ <div class="mainBox">
|
|
|
+ <div class="row2">
|
|
|
+ <div>
|
|
|
+ <span>活动时间：</span>
|
|
|
+ <el-date-picker
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ v-model="time1"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="row2 row3" v-for="(item, index) in timeArr" :key="item.id">
|
|
|
+ <div>
|
|
|
+ <span>活动时段{{ index + 1 }}：</span>
|
|
|
+ <el-date-picker
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ v-model="timeArr[index].time"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>预设名额{{ index + 1 }}：</span>
|
|
|
+ <el-input
|
|
|
+ style="width: 300px"
|
|
|
+ onkeyup="value=value.replace(/[^\d]/g,'')"
|
|
|
+ onblur="value=value.replace(/[^\d]/g,'')"
|
|
|
+ placeholder="请输入数字"
|
|
|
+ v-model="timeArr[index].num"
|
|
|
+ maxlength="3"
|
|
|
+ ></el-input>
|
|
|
+ <div class="addTime" v-if="index === 0" @click="addTime">
|
|
|
+ 增加时间段+
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="addTime el-icon-close"
|
|
|
+ v-else
|
|
|
+ @click="delTime(item.id)"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mainTit1">活动详情</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "tab1Add",
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ //这里存放数据
|
|
|
+ return {
|
|
|
+ token: "",
|
|
|
+ baseURL: "",
|
|
|
+ dialogImageUrl: "",
|
|
|
+ dialogVisible: false,
|
|
|
+ imgUpList1: [],
|
|
|
+ imgUpList2: [],
|
|
|
+ // 关于照片墙 👆
|
|
|
+ time1: "",
|
|
|
+ timeArr: [{ id: Date.now(), time: "", num: "" }],
|
|
|
+ //关于活动时间 👆
|
|
|
+ ruleForm: {
|
|
|
+ name: "",
|
|
|
+ name2: 18,
|
|
|
+ name3: 40,
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ name: [{ required: true, message: "不能为空", trigger: "blur" }],
|
|
|
+ name2: [{ required: true, message: "不能为空", trigger: "blur" }],
|
|
|
+ name3: [{ required: true, message: "不能为空", trigger: "blur" }],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ //监听属性 类似于data概念
|
|
|
+ computed: {},
|
|
|
+ //监控data中的数据变化
|
|
|
+ watch: {
|
|
|
+ time(val) {
|
|
|
+ if (!val) this.formData.startTime = this.formData.endTime = "";
|
|
|
+ else {
|
|
|
+ this.formData.startTime = val[0];
|
|
|
+ this.formData.endTime = val[1];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ // 关于活动时间
|
|
|
+ addTime() {
|
|
|
+ this.timeArr.push({ id: Date.now(), time: "", num: "" });
|
|
|
+ },
|
|
|
+ delTime(id) {
|
|
|
+ this.$confirm("确定删除吗?", "提示", {
|
|
|
+ confirmButtonText: "确定",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ this.timeArr = this.timeArr.filter((v) => v.id !== id);
|
|
|
+
|
|
|
+ this.$message.success("删除成功!");
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message.info("已取消");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // ---------------照片墙1
|
|
|
+ beforeRemove(file, fileList) {
|
|
|
+ if (file && file.status === "success") {
|
|
|
+ return this.$confirm(`此操作将永久删除 ${file.name}`);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async handleRemove1(file, fileList) {
|
|
|
+ const id = file.id || file.response.data.id;
|
|
|
+ const res = await delFileApi(id);
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$message.success("删除成功");
|
|
|
+ this.imgUpList1 = [];
|
|
|
+ } else this.$message.warning(res.msg);
|
|
|
+ },
|
|
|
+ handlePictureCardPreview(file) {
|
|
|
+ this.dialogImageUrl = file.url;
|
|
|
+ this.dialogVisible = true;
|
|
|
+ },
|
|
|
+ beforethumbUploadImg(file) {
|
|
|
+ // console.log(998, file)
|
|
|
+ // 限制图片大小和格式
|
|
|
+ const sizeOk = file.size / 1024 / 1024 < 20;
|
|
|
+ const typeOk =
|
|
|
+ file.type === "image/png" ||
|
|
|
+ file.type === "image/gif" ||
|
|
|
+ (file.type === "image/jpeg" && !file.name.includes(".jfif"));
|
|
|
+
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ if (!typeOk) {
|
|
|
+ this.$message.error("图片格式有误！");
|
|
|
+ reject(file);
|
|
|
+ } else if (!sizeOk) {
|
|
|
+ this.$message.error("图片大小超过20M！");
|
|
|
+ reject(file);
|
|
|
+ } else {
|
|
|
+ resolve(file);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ upload_thumb_successImg1(data) {
|
|
|
+ this.$message.success("上传图片成功");
|
|
|
+ this.imgUpList1 = [data.data.id];
|
|
|
+ },
|
|
|
+ handleExceed(files, fileList) {
|
|
|
+ this.$message.warning("最多上传1张图片");
|
|
|
+ },
|
|
|
+ // 照片墙2
|
|
|
+ async handleRemove2(file, fileList) {
|
|
|
+ const id = file.id || file.response.data.id;
|
|
|
+ const res = await delFileApi(id);
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$message.success("删除成功");
|
|
|
+ this.imgUpList2 = [];
|
|
|
+ } else this.$message.warning(res.msg);
|
|
|
+ },
|
|
|
+ upload_thumb_successImg2(data) {
|
|
|
+ this.$message.success("上传图片成功");
|
|
|
+ this.imgUpList2 = [data.data.id];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {},
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {},
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.tab1Add {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .top {
|
|
|
+ position: relative;
|
|
|
+ padding: 0 30px;
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 1px 1px 6px 0px black;
|
|
|
+ color: #b7b7b7;
|
|
|
+ font-size: 14px;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .tit {
|
|
|
+ margin-right: 5px;
|
|
|
+ width: 3px;
|
|
|
+ height: 20px;
|
|
|
+ background-color: #6f774e;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .main {
|
|
|
+ margin-top: 15px;
|
|
|
+ background-color: #fff;
|
|
|
+ box-shadow: 1px 1px 6px 0px;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 65px);
|
|
|
+ overflow-y: auto;
|
|
|
+ .mainTit1 {
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ background-color: #d5d8cc;
|
|
|
+ padding-left: 26px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .mainTit2 {
|
|
|
+ background-color: #ece3d4;
|
|
|
+ }
|
|
|
+ .mainBox {
|
|
|
+ width: 1200px;
|
|
|
+ padding-left: 35px;
|
|
|
+ /deep/.el-form {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ /deep/.el-form-item {
|
|
|
+ width: 500px;
|
|
|
+ }
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ padding-right: 50px;
|
|
|
+ }
|
|
|
+ .row {
|
|
|
+ width: 500px;
|
|
|
+ display: flex;
|
|
|
+ .fenge {
|
|
|
+ border-top: 1px solid #dcdfe6;
|
|
|
+ border-bottom: 1px solid #dcdfe6;
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 36px;
|
|
|
+ padding: 0 7px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ /deep/input {
|
|
|
+ border-radius: 4px 0 0 4px;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mySelect {
|
|
|
+ /deep/input {
|
|
|
+ border-radius: 0 4px 4px 0;
|
|
|
+ border-right: 1px solid #dcdfe6;
|
|
|
+ border-left: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .biaoshi {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: -92px;
|
|
|
+ color: #f56c6c;
|
|
|
+ }
|
|
|
+ .biaoshi2 {
|
|
|
+ left: -120px;
|
|
|
+ }
|
|
|
+ .row2 {
|
|
|
+ & > div {
|
|
|
+ & > span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 140px;
|
|
|
+ text-align: right;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #606266;
|
|
|
+ padding-right: 12px;
|
|
|
+ &::before {
|
|
|
+ content: "*";
|
|
|
+ color: #f56c6c;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .row3 {
|
|
|
+ display: flex;
|
|
|
+ margin: 22px 0;
|
|
|
+ & > div {
|
|
|
+ width: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .addTime {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #b02323;
|
|
|
+ margin-left: 27px;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .mySelect {
|
|
|
+ /deep/.el-form-item__content {
|
|
|
+ margin-left: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
