settle_down_wx/pages/subPackages/eventRelease/add.vue

<template>
  <div class="app-body-white">
    <div class="form-box form-box-label-width">
      <div class="item-box">
        <div class="input-tit">
          <p class="tit">活动名称</p>
        </div>
        <div class="input-item-box blue">
          <div class="one-selcet-box">
            <input
              type="text"
              v-model="form.activityName"
              placeholder="请输入活动名称"
            />
          </div>
        </div>
      </div>
      <div class="item-box">
        <div class="input-tit">
          <p class="tit">活动类型</p>
        </div>
        <div class="input-item-box blue">
          <div class="one-selcet-box">
            <input
              type="text"
              placeholder="请选择类型"
              @click="choseActiveType = true"
              v-model="activeTypeName"
              readonly
            />
            <!--                        <van-popup v-model="choseActiveType" round position="bottom">-->
            <!--                            <van-picker-->
            <!--                                    show-toolbar-->
            <!--                                    @confirm="(value) => typeConfirm(value)"-->
            <!--                                    @cancel="chose = false"-->
            <!--                            />-->
            <!--                        </van-popup>-->
            <i class="iconfont icon-down"></i>
          </div>
        </div>
      </div>
      <div class="item-box">
        <div class="input-tit">
          <p class="tit">参与可得</p>
        </div>
        <div class="input-item-box blue">
          <div class="one-selcet-box">
            <input
              type="number"
              placeholder="请输入积分值"
              v-model="form.integral"
            />
          </div>
        </div>
      </div>

      <div class="upload-group">
        <div class="video-name">
          主题图片 <span>（支持图片上传限20M内，最多6张）</span>
        </div>
        <van-uploader
          :max-count="12"
          @delete="deleteFileList"
          :file-list="fileList"
          @after-read="afterRead"
          :show-upload="true"
          class="upload-style"
        />
      </div>
      <div class="item-box">
        <div class="input-tit">
          <p class="tit">联系电话</p>
        </div>
        <div class="input-item-box blue">
          <div class="one-selcet-box">
            <input
              type="text"
              v-model="form.activityPhone"
              placeholder="请输入联系电话"
            />
          </div>
        </div>
      </div>
      <div class="item-box">
        <div class="input-tit">
          <p class="tit">举办方</p>
        </div>
        <div class="input-item-box blue">
          <div class="one-selcet-box">
            <input
              type="text"
              v-model="form.activitiesNotice"
              placeholder="请输入活动举办"
            />
          </div>
        </div>
      </div>
      <div class="item-box">
        <div class="input-tit">
          <p class="tit">活动内容</p>
        </div>
        <div class="input-item-box blue">
          <van-field
            @input="getInputValue($event, 'activityContent')"
            :value="form.activityContent"
            style="padding: 0rpx"
            autosize
            :rows="4"
            type="textarea"
            placeholder="请输入内容"
          ></van-field>
        </div>
      </div>
      <div class="item-box">
        <div class="input-tit">
          <p class="tit">活动开始</p>
        </div>
        <div class="input-item-box blue">
          <div class="date-selcet-box" @click="activityStartDateShow = true">
            <input
              type="text"
              v-model="form.activityStartTime"
              placeholder="请选择活动开始时间"
              disabled
            />
            <!-- <img src="@/assets/image/date-icon.png" alt="" /> -->
          </div>
        </div>
      </div>
      <div class="item-box">
        <div class="input-tit">
          <p class="tit">活动结束</p>
        </div>
        <div class="input-item-box blue">
          <div class="date-selcet-box" @click="activityEndDateShow = true">
            <input
              type="text"
              v-model="form.activityEndTime"
              placeholder="请选择活动结束时间"
              disabled
            />
            <!-- <img src="@/assets/image/date-icon.png" alt="" /> -->
          </div>
        </div>
      </div>
      <div class="item-box">
        <div class="input-tit">
          <p class="tit">活动地址</p>
        </div>
        <div class="input-item-box blue">
          <div class="one-selcet-box">
            <input
              type="text"
              v-model="form.activityAddress"
              placeholder="请输入活动地址"
            />
          </div>
        </div>
      </div>
      <div class="item-box">
        <div class="input-tit">
          <p class="tit">报名条件</p>
        </div>
        <div class="input-item-box blue">
          <van-field
            @input="getInputValue($event, 'registrationConditions')"
            :value="form.registrationConditions"
            style="padding: 0rpx"
            autosize
            rows="4"
            type="textarea"
            placeholder="请输入报名条件"
          ></van-field>
        </div>
      </div>
      <div class="item-box">
        <div class="input-tit">
          <p class="tit">报名开始</p>
        </div>
        <div class="input-item-box blue">
          <div
            class="date-selcet-box"
            @click="registrationStartDateShow = true"
          >
            <input
              type="text"
              v-model="form.registrationStartTime"
              placeholder="请选择报名开始时间"
              disabled
            />
            <!-- <img src="@/assets/image/date-icon.png" alt="" /> -->
          </div>
        </div>
      </div>
      <div class="item-box">
        <div class="input-tit">
          <p class="tit">报名结束</p>
        </div>
        <div class="input-item-box blue">
          <div class="date-selcet-box" @click="registrationEndDateShow = true">
            <input
              type="text"
              v-model="form.registrationEndTime"
              placeholder="请选择报名结束时间"
              disabled
            />
            <!-- <img src="@/assets/image/date-icon.png" alt="" /> -->
          </div>
        </div>
      </div>
      <div class="item-box">
        <div class="input-tit">
          <p class="tit">参与人数</p>
        </div>
        <div class="input-item-box blue">
          <div class="one-selcet-box">
            <input
              v-model="form.activityQuota"
              type="text"
              placeholder="请输入限制人数"
            />
          </div>
        </div>
      </div>

      <!--            <div class="button-group" v-if="form.id&&form.id!==''&&form.isValid==='0'">
                <van-button color="#3b7aff" size="small" plain round  @click="commit()">保存</van-button>
                <van-button color="#3b7aff" size="small" round  @click="commit('0')">发布</van-button>
            </div>-->
      <div class="button-group" v-if="type !== 'view'">
        <van-button
          color="#3b7aff"
          size="small"
          plain
          round
          @click="commit('1')"
          >暂存</van-button
        >
        <van-button color="#3b7aff" size="small" round @click="commit('0')"
          >发布</van-button
        >
      </div>
    </div>
    <van-popup :show="chose" round position="bottom">
      <van-picker
        show-toolbar
        :columns="communityList"
        @confirm="onConfirm"
        @cancel="chose = false"
      />
    </van-popup>
    <van-popup :show="choseActiveType" round position="bottom">
      <van-picker
        show-toolbar
        :columns="activeTypeList"
        value-key="label"
        @confirm="onConfirmType"
        @cancel="choseActiveType = false"
      />
    </van-popup>

    <!-- 时间选择器 -->
    <van-popup :show="activityStartDateShow" position="bottom">
      <van-datetime-picker
        type="datetime"
        :min-date="minDate"
        :value="currentDate"
        @confirm="onActivityStartDateConfirm"
        @cancel="activityStartDateShow = false"
      />
    </van-popup>
    <van-popup :show="activityEndDateShow" position="bottom">
      <van-datetime-picker
        type="datetime"
        :min-date="minDate"
        :value="currentDate"
        @confirm="onActivityEndDateConfirm"
        @cancel="activityEndDateShow = false"
      />
    </van-popup>
    <!--        <van-calendar v-model="activityDateShow" type="range" @confirm="onActivityDateConfirm" />-->
    <van-popup :show="registrationStartDateShow" position="bottom">
      <van-datetime-picker
        type="datetime"
        :min-date="minDate"
        :value="currentDate"
        @confirm="onRegistrationStartDateConfirm"
        @cancel="registrationStartDateShow = false"
      />
    </van-popup>
    <van-popup :show="registrationEndDateShow" position="bottom">
      <van-datetime-picker
        type="datetime"
        :min-date="minDate"
        :value="currentDate"
        @confirm="onRegistrationEndDateConfirm"
        @cancel="registrationEndDateShow = false"
      />
    </van-popup>
  </div>
</template>
<script>
import {
  listPubCommunityByFrameUser,
  insertHomeCommunityActivity,
  getHomeCommunityActivityIsValid,
  getHomeCommunityActivityById,
  compareDate,
} from "@/js_sdk/api_community";
import common from "../../utils/common.js";
import { getByCodes, getUserLocalStorageInfo } from "@/js_sdk/http";

// import { upload } from "@/service/api_file";

export default {
  data() {
    return {
      dc_key: ["activity_type"],
      id: "",
      dic_SelectList: {},
      type: "",
      currentDate: new Date().getTime(),
      chose: false,
      choseActiveType: false,
      activityStartDateShow: false,
      activityEndDateShow: false,
      activityDateShow: false,
      registrationStartDateShow: false,
      registrationEndDateShow: false,
      activeTypeList: [],
      activeTypeName: "",
      communityList: [],
      minDate: new Date(2022, 3, 1),
      communityName: "",
      activityStartDate: "",
      activityEndDate: "",
      activityDate: "",
      registrationDate: "",
      form: this.initForm(),
      fileList: [
        // { url: 'https://img.yzcdn.cn/vant/leaf.jpg' },
        // { url: 'https://cloud-image', isImage: true }
      ],
      fileUrlList: [],
    };
  },

  onLoad(option) {
    console.log(option);
    this.id = option.id;
    this.type = option.type;
    // this.selectCommunityByFrameUser();
    this.getDictData(this.dc_key);
  },
  methods: {
    getInputValue(event, formKey) {
      console.log(event);
      this.form[formKey] = event.detail;
    },
    onActivityStartDateConfirm(event) {
      this.activityStartDateShow = false;
      this.form.activityStartTime = common.transServDate(event.detail);
    },
    onActivityEndDateConfirm(event) {
      this.activityEndDateShow = false;
      this.form.activityEndTime = common.transServDate(event.detail);
    },
    onRegistrationStartDateConfirm(event) {
      this.registrationStartDateShow = false;
      this.form.registrationStartTime = common.transServDate(event.detail);
    },
    onRegistrationEndDateConfirm(event) {
      this.registrationEndDateShow = false;
      this.form.registrationEndTime = common.transServDate(event.detail);
    },
    getActivityById() {
      const _this = this;
      getHomeCommunityActivityById({ id: _this.id }).then((res) => {
        if (res.data) {
          _this.form = res.data;
          _this.activeTypeName =
            _this.dic_SelectList.activity_type[res.data.activityType].label;
          const fileList = [];
          if (_this.form.annex && _this.form.annex.length != 0) {
            console.log("_this.form.annex", _this.form.annex);
            // const annex = _common.castEval(_this.form.annex);
            _this.fileUrlList = JSON.parse(_this.form.annex);
            _this.fileList = _this.fileUrlList;
            console.log(JSON.parse(_this.form.annex));
            // annex.forEach((item) => {
            //   fileList.push({
            //     url:
            //       process.env.VUE_APP_API_URL +
            //       item.url.substring(7, item.url.length),
            //     isImage: true,
            //   });
            // });
          } else {
            _this.fileList = _this.fileUrlList = [];
          }

          _this.communityList.forEach((item) => {
            if (item.id === res.data.communityId) {
              _this.communityName = item.label;
            }
          });

          _this.form.activityStartTime = common.transServDate(
            res.data.activityStartTime
          );
          _this.form.activityEndTime = common.transServDate(
            res.data.activityEndTime
          );
          _this.form.registrationStartTime = common.transServDate(
            res.data.registrationStartTime
          );
          _this.form.registrationEndTime = common.transServDate(
            res.data.registrationEndTime
          );
          console.log(res.data);
        }
      });
    },

    goNavigateBack() {
      uni.navigateBack();
    },
    getDictData(codes) {
      const _this = this;
      const postData = {
        codes: JSON.stringify(codes),
      };

      getByCodes(JSON.stringify(this.dc_key)).then((data) => {
        console.log(data);
        _this.dic_SelectList = common.handleDicList(data);

        _this.activeTypeList = _this.dic_SelectList.activity_type;
        console.log(
          "_this.dic_SelectList.activity_type",
          _this.dic_SelectList.activity_type
        );
        // if (res.data) {
        //   _this.dc_key.forEach((key) => {
        //     const dictValue = _this.getDictValue(res.data, key, false);
        //     _this.dic_SelectList[key] = dictValue;
        //     _this.dic_SelectList[key] = _common.transDcMap(dictValue);
        //   });
        //   _this.activeTypeList = _this.dic_SelectList.activity_type;
        // }
        _this.getActivityById();
      });
    },
    deleteFileList(event) {
      this.fileList.splice(event.detail.index, 1);
    },
    commit(val) {
      const _this = this;
      if (_this.form.activityName === "") {
        this.$showToast("请填写活动名称");
        return;
      }

      if (_this.form.activityType === "") {
        this.$showToast("请选择活动类型");
        return;
      }
      if (_this.form.integral === "" || _this.form.integral < 1) {
        this.$showToast("请填写参与积分");
        return;
      }
      if (_this.form.registrationStartTime === "") {
        this.$showToast("请选择报名开始时间");
        return;
      }
      if (_this.form.registrationEndTime === "") {
        this.$showToast("请选择报名结束时间");
        return;
      }
      if (_this.form.activityStartTime === "") {
        this.$showToast("请选择活动开始时间");
        return;
      }
      if (_this.form.activityEndTime === "") {
        this.$showToast("请选择活动结束时间");
        return;
      }
      if (_this.fileUrlList.length === 0) {
        this.$showToast("请上传主题图");
        return;
      }
      if (_this.form.activityPhone === "") {
        this.$showToast("请输入联系电话");
        return;
      }
      if (_this.form.activityAddress === "") {
        this.$showToast("请输入活动地址");
        return;
      }
      if (
        compareDate(
          _this.form.registrationStartTime,
          _this.form.registrationEndTime
        )
      ) {
        this.$showToast("报名开始时间不能大于结束时间");
        return;
      }
      if (
        compareDate(_this.form.activityStartTime, _this.form.activityEndTime)
      ) {
        this.$showToast("活动开始时间不能大于结束时间");
        return;
      }
      if (
        compareDate(_this.form.registrationEndTime, _this.form.activityEndTime)
      ) {
        this.$showToast("报名结束时间不能大于活动结束时间");
        return;
      }
      _this.form.isValid = val;
      if (val == "0") {
        _this.form.releaseStatus = "1";
      }
      this.$delete(this.form, "updatedAt");
      this.$delete(this.form, "createdAt");
      _this.form.annex = JSON.stringify(_this.fileUrlList);
      insertHomeCommunityActivity(_this.form).then((res) => {
        this.goNavigateBack();
      });
    },
    onConfirm(value) {
      this.form.communityId = value.id;
      this.communityName = value.label;
      this.chose = false;
    },
    onConfirmType(event) {
      let { value } = event.detail;
      this.form.activityType = value.value;
      this.activeTypeName = value.label;
      this.choseActiveType = false;
    },
    initForm: function () {
      return {
        id: "",
        communityId: "",
        activityName: "",
        activityType: "",
        registrationStartTime: "",
        registrationEndTime: "",
        activityStartTime: "",
        activityEndTime: "",
        collectorsNumbers: "",
        registrationNumbers: "",
        releaseTime: "",
        status: "0",
        activityQuota: "",
        releaseStatus: "",
        activityPhone: "",
        activityAddress: "",
        activityContent: "",
        registrationConditions: "",
        annex: "",
        isValid: "",
        integral: "",
        createdBy: getUserLocalStorageInfo().user.id,
      };
    },
    // selectCommunityByFrameUser() {
    //   const _this = this;
    //   listPubCommunityByFrameUser({
    //     userId: getUserLocalStorageInfo().user.id,
    //   }).then((res) => {
    //     if (res.data) {
    //       this.communityList = [];
    //       res.data.forEach((item) => {
    //         const i = {
    //           id: item.id,
    //           text: item.communityName,
    //           label: item.communityName,
    //           value: item.id,
    //         };
    //         _this.communityList.push(i);
    //       });
    //     }
    //   });
    // },

    afterRead(event) {
      let that = this;
      const { file } = event.detail;
      uni.uploadFile({
        url: that.$constant.BASE_URI + "/wx/fileController/upload2",
        filePath: file.url,
        name: "file",
        formData: { user: "test" },
        success(res) {
          // 上传完成需要更新 fileList
          let data = JSON.parse(res.data);
          that.fileList.push({
            name: JSON.parse(data.data[0]).name,
            size: JSON.parse(data.data[0]).size,
            imgUrl: "/FileController/download/" + data.data[1],
            url:
              that.$constant.BASE_URI +
              "/FileController/download/" +
              data.data[1],
            isImage: true,
          });
          that.fileUrlList = that.fileList;
        },
        fail(res) {},
      });
    },
    /**
     * 上传图片
     */
  },
};
</script>
<style lang="scss" scoped></style>
<style lang="scss">
.input-item-box {
  textarea {
    min-height: 300rpx !important;
  }
}

.form-box {
  background: #fff;
  padding: 12rpx 0;
  .van-cell {
    padding: 0;
  }
  .item-box {
    display: flex;
    padding: 0rpx 30rpx;
    .input-tit {
      width: 130rpx;
      margin-right: 10rpx;
      .tit {
        font-size: 28rpx;
        line-height: 96rpx;
        font-weight: bold;
        color: #000000;
        &.title-warp {
          line-height: 56rpx;
        }
      }
    }
    .input-item-box {
      flex: 1;
      .n-input-box {
        padding: 12rpx 0;
        input {
          font-size: 28rpx;
          font-weight: 500;
          width: 100%;
          height: 72rpx;
          border: transparent;
          padding: 0 24rpx;
          color: #000;
          box-sizing: border-box;
          border-radius: 6rpx;
        }

        &.inp-x-box {
          position: relative;
          input {
            padding: 0 54rpx 0 24rpx;
          }
          svg {
            position: absolute;
            top: 39%;
            right: 4%;
            width: 24rpx;
            height: 24rpx;
            color: #868686;
          }
        }

        &.inp-txt-box {
          position: relative;
          input {
            padding: 0 88rpx 0 24rpx;
          }
          span {
            position: absolute;
            top: 36%;
            right: 4%;
            font-weight: 500;
            font-size: 28rpx;
            color: #3b7aff;
          }
        }
      }

      .dis-select-box {
        padding: 12rpx 0;

        position: relative;
        .select-left {
          font-size: 28rpx;
          font-weight: 500;
          width: 248rpx;
          height: 72rpx;
          border: transparent;
          padding: 0 24rpx;
          box-sizing: border-box;
          border-radius: 6rpx;
        }
        .select-right {
          font-size: 28rpx;
          font-weight: 500;
          width: 280rpx;
          height: 72rpx;
          color: #000;
          border: transparent;
          padding: 0 48rpx 0 24rpx;
          box-sizing: border-box;
          border-radius: 6rpx;
        }
        .icon-down {
          position: absolute;
          top: 36rpx;
          right: 22rpx;
          color: #767676;
          font-size: 24rpx;
        }
      }
      .two-inp-box {
        width: 100%;
        box-sizing: border-box;
        padding: 12rpx 0;

        input {
          width: 256rpx;
          font-size: 28rpx;
          font-weight: 500;
          height: 72rpx;
          border: transparent;
          padding: 0 24rpx;
          box-sizing: border-box;
          border-radius: 6rpx;
          &:first-child {
            margin-right: 16rpx;
          }
        }
      }

      .one-selcet-box {
        padding: 12rpx 0;
        position: relative;
        input {
          font-size: 28rpx;
          font-weight: 500;
          width: 100%;
          height: 72rpx;
          color: #000;
          border: transparent;
          padding: 0 48rpx 0 24rpx;
          box-sizing: border-box;
          border-radius: 6rpx;
        }
        .icon-down {
          position: absolute;
          top: 36rpx;
          right: 22rpx;
          color: #767676;
          font-size: 24rpx;
        }
      }
      // 文本框
      textarea {
        margin: 12rpx 0;
        padding: 14rpx 24rpx;
        border-radius: 6rpx;
        font-size: 28rpx;
        font-weight: 500;
        line-height: 1.6;
        color: #000;
        &::-webkit-input-placeholder {
          /* WebKit browsers */
          color: #999;
        }
      }
      //相机
      .xj-box {
        padding: 36rpx 0 28rpx;
      }
      // 删除照片
      .img-d-box {
        width: 266rpx;
      }
      // 时间选择
      .date-selcet-box {
        padding: 12rpx 0;
        position: relative;
        input {
          font-size: 28rpx;
          font-weight: 500;
          width: 100%;
          height: 72rpx;
          color: #000;
          border: transparent;
          padding: 0 24rpx 0 74rpx;
          box-sizing: border-box;
          border-radius: 6rpx;
        }
        img {
          position: absolute;
          top: 32%;
          left: 4%;
          width: 30rpx;
        }
      }
      // 图片展示
      .img-show-box {
        width: 100%;
        padding: 20rpx;
        box-sizing: border-box;
        img {
          width: 100%;
        }
      }
      // 单选
      .radio-box {
        display: flex;
        align-items: center;
        height: 100%;
        .van-radio {
          flex: 1;
        }
        .van-radio__label {
          font-size: 24rpx;
          font-weight: 500;
          color: #999999;
        }
      }
      // 按钮
      .file-box {
        position: relative;
        top: 20%;
        padding: 0 50rpx;
        display: inline-block;
        height: 60rpx;
        background: #3b7aff;
        border-radius: 40rpx;
        font-size: 28rpx;
        font-weight: 500;
        line-height: 60rpx;
        color: #ffffff;
      }
      // 样式
      input {
        color: #000;
        &::-webkit-input-placeholder {
          /* WebKit browsers */
          color: #999;
        }
      }
      &.gray {
        .n-input-box {
          input {
            background: #f8f8f8 !important;
          }
        }
        .dis-select-box {
          .select-left {
            background: #f8f8f8;
          }
          .select-right {
            background: #f8f8f8;
          }
        }
        .one-selcet-box {
          input {
            background: #f8f8f8;
          }
        }
        textarea {
          background: #f8f8f8;
        }
        .date-selcet-box {
          input {
            background: #f8f8f8;
          }
        }
      }
      &.blue {
        .n-input-box {
          input {
            background: #f3f7ff;
          }
        }
        .dis-select-box {
          .select-left {
            background: #f3f7ff;
          }
          .select-right {
            background: #f3f7ff;
          }
        }
        .one-selcet-box {
          input {
            background: #f3f7ff;
          }
        }
        textarea {
          background: #f3f7ff;
        }
        .date-selcet-box {
          input {
            background: #f3f7ff;
          }
        }
        .two-inp-box {
          input {
            background: #f3f7ff;
          }
        }
      }
      &.green {
        .n-input-box {
          input {
            background: #dcffec;
          }
        }
        .dis-select-box {
          .select-left {
            background: #dcffec;
          }
          .select-right {
            background: #dcffec;
          }
        }
        .one-selcet-box {
          input {
            background: #dcffec;
          }
        }
        textarea {
          background: #dcffec;
        }
      }
      &.red {
        .img-show-box {
          background: #fff1f1;
        }
        textarea {
          background: #fff1f1;
        }
      }
    }
  }
  // 详情标题
  .detail-title-box {
    margin: 0 30rpx;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #e7e7e7;
  }
}
.button-group {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 4vw 0 !important;
}
.upload-group {
  padding: 0.5rem 0.9rem;
}
.video-name {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  width: 17em;
  font-weight: 700;
  font-size: 0.8rem;
}
.upload-group {
  padding: 0.5rem 0.9rem;
}
</style>