product_wx/pages/subPackages/activityPromulgate/add.vue

<template>
  <div class="addActivity">
    <div class="reportBody">
      <ul class="detailUl">
        <li class="detailLi2">
          <span class="liName" style="margin-bottom: 16rpx"><span style="color: red">*</span> &nbsp;活动主题</span>
          <van-field
              :value="form.activityName"
              autosize
              type="textarea"
              placeholder="请填写活动名称"
              class="myField"
              maxlength="50"
              show-word-limit
              @change="changeActivityName"
          />
        </li>
        <li class="detailLi2">
          <span class="liName">
            <span style="color: red">*</span> &nbsp;选择类别
          </span>
          <div class="detailLi2Box">
            <div class="detailLi2BoxTop">
              <div class="checkItem" :class="item.value===form.activityType?'checked':''" v-for="item in tabList" @click="clickCheck(item)">{{item.label}}</div>
            </div>
          </div>
        </li>
        <li class="detailLi2">
          <span class="liName">
            <span style="color: red">*</span> &nbsp;主题图
            <span style="color: #B3B3B3;font-size: 28rpx">（支持图片/视频上传限20M内，最多1张）</span>
          </span>
          <div class="detailLi2Box" style="margin: 24rpx 0 0 0">
            <van-uploader
                :max-count="6"
                @delete="deleteRYXXZP"
                :file-list="fileList"
                @after-read="uploadRYXXZP"
                :show-upload="true"
            />
          </div>
        </li>
        <li class="detailLi" style="border-bottom: none">
          <span class="liName">
            <span style="color: red">*</span>&nbsp; 联系电话
          </span>
          <input placeholder="请填写" v-model="form.activityPhone" class="liIpt">
        </li>
      </ul>
    </div>
    <div class="reportBody">
      <ul class="detailUl">
        <li class="detailLi2">
          <span class="liName" style="margin-bottom: 16rpx"><span style="color: red">*</span>&nbsp; 活动举办</span>
          <van-field
              :value="form.activitiesNotice"
              autosize
              type="textarea"
              placeholder="请填写活动举办相关信息"
              class="myField"
              maxlength="2000"
              show-word-limit
              @change="changeNotice"
          />
        </li>
        <li class="detailLi2">
          <span class="liName" style="margin-bottom: 16rpx">
           <span style="color: red">*</span>&nbsp; 活动内容
          </span>
          <van-field
              :value="form.activityContent"
              autosize
              type="textarea"
              placeholder="请填写活动举办相关信息"
              class="myField"
              maxlength="2000"
              show-word-limit
              @change="changeContent"
          />
          <span class="liName" style="margin: 24rpx 0">
            <span style="color: #B3B3B3;font-size: 28rpx">（支持图片上传限20M内，最多6张）</span>
          </span>
          <div class="detailLi2Box">
            <van-uploader
                :max-count="6"
                @delete="deleteRYXXZP"
                :file-list="fileList"
                @after-read="uploadRYXXZP"
                :show-upload="true"
            />
          </div>
        </li>
        <li class="detailLi2">
          <span class="liName" style="margin-bottom: 16rpx">
             <span style="color: red">*</span>&nbsp; 活动时间
          </span>
          <div class="choosTimeBox">
            <input placeholder="请选择年月日时分" class="timeIpt" disabled v-model="form.activityStartTime" @click="showTime('actStartTime')">
            <span class="midZ">至</span>
            <input placeholder="请选择年月日时分" class="timeIpt" disabled v-model="form.activityEndTime" @click="showTime('actEndTime')">
          </div>
        </li>
        <li class="detailLi2" style="border-bottom: none">
          <span class="liName" style="margin-bottom: 16rpx">
             <span style="color: red">*</span>&nbsp; 活动地址
          </span>
          <div class="placeBox">
            <input placeholder="使用地图拾取" class="timeIpt" v-model="form.activityAddress" disabled>
            <van-icon name="location" style="color: rgba(51, 51, 51, 0.90);font-size: 30rpx" @tap="toMap"/>
          </div>
          <div class="placeBox">
            <input placeholder="请补充详细地址，如楼栋-门牌号" class="timeIpt" v-model="form.activityAddressDetail">
          </div>
        </li>
      </ul>
    </div>
    <div class="reportBody">
      <ul class="detailUl">
        <li class="detailLi2">
          <span class="liName" style="margin-bottom: 16rpx"><span style="color: red">*</span>&nbsp; 报名条件</span>
          <van-field
              :value="form.registrationConditions"
              autosize
              type="textarea"
              placeholder="请填写活动举办相关信息"
              class="myField"
              maxlength="2000"
              show-word-limit
              @change="changeCond"
          />
        </li>
        <li class="detailLi2">
          <span class="liName" style="margin-bottom: 16rpx">
             <span style="color: red">*</span>&nbsp; 报名时间
          </span>
          <div class="choosTimeBox">
            <input placeholder="请选择年月日时分" class="timeIpt" disabled v-model="regTime1" @click="showTime('regStartTime')">
            <span class="midZ">至</span>
            <input placeholder="自动带出" class="timeIpt" disabled v-model="form.activityStartTime" style="background: white">
<!--            <span>活动开始时间</span>-->
          </div>
        </li>
        <li class="detailLi2" style="border-bottom: none">
          <span class="liName" style="margin-bottom: 16rpx">活动参与</span>
          <van-field
              :value="form.activityQuota"
              autosize
              type="textarea"
              placeholder="请填写限制人数等"
              class="myField"
              maxlength="2000"
              show-word-limit
              @change="changeQuota"
          />
        </li>
      </ul>
    </div>
       <div class="buttonBox">
         <button class="btn zcBtn">暂存</button>
         <button class="btn fbBtn" @tap="submit('发布')">发布</button>
       </div>
    <van-popup
        :show="timeShow"
        position="bottom"
        custom-style="height: 50%;"
    >
      <van-datetime-picker
          type="datetime"
          :value="currentDate"
          :formatter="formatter"
          @cancel="timeShow=false"
          @confirm="selectTime"
      />
    </van-popup>
  </div>
</template>
<script>
import {getByCodes} from "@/js_sdk/http";
export default {
  data(){
    return {
      dc_key:['activity_type'],
      timeShow:false,
      isCheck:false,
      isCheck2:false,
      time1Str:'',
      time2Str:'',
      regTime1:'',
      regTime1Str:'',
      place:'',
      currentDate: new Date().getTime(),
      form:{
        activityName:'',
        activityType:'3',
        activityPhone: '',
        activitiesNotice: '',
        activityContent: '',
        activityAddress:'',
        activityEndTime:'',
        activityStartTime:'',
        registrationConditions:'',
        activityAddressDetail:'',
        activityQuota:'',
        longitude:'',
        latitude:'',
      },
      phone:'',
      tabList:[],
      fileList:[],
      optionsType:'',
      timePickerType:'',
    }
  },
  onLoad(options) {
    console.log('options',options);
  },
  onShow(){
    this.getByCodes()
  },
  methods:{
    toMap(){
      let _this = this
      uni.chooseLocation({
        success: function (res) {
          console.log('选择的位置：', res.name);
          _this.form.activityAddress = res.name
          console.log('纬度：' + res.latitude + '，经度：' + res.longitude);
          _this.form.longitude = res.longitude
          _this.form.latitude = res.latitude
          // 其他业务逻辑
        },
        fail: function (error) {
          console.error('Choose location failed: ' + JSON.stringify(error));
        },
        complete: function () {
          console.log('chooseLocation operation is complete');
        }
      });
    },
    changeActivityName(e){
      this.form.activityName = e.detail
    },
    changeNotice(e){
      this.form.activitiesNotice = e.detail
    },
    changeContent(e){
      this.form.activityContent = e.detail
    },
    changeCond(e){
      this.form.registrationConditions = e.detail
    },
    changeQuota(e){
      this.form.activityQuota = e.detail
    },
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dc_key));
      this.tabList = this.$common.handleDicList(data).activity_type;
      console.log('this.tabList',this.tabList)
    },
    clickCheck(item){
      this.form.activityType = item.value
    },
    selectTime(e){
      const dateString = this.timestampToDate(e.detail);
      if(this.timePickerType === 'actStartTime'){
        this.time1Str = e.detail
        if (this.time2Str){
          if (this.time1Str >= this.time2Str){
            this.$showToast("请选择合理时间");
            return
          }else{
            this.form.activityStartTime = dateString
          }
        }else{
          this.form.activityStartTime = dateString
        }
      }else if(this.timePickerType === 'actEndTime'){
        this.time2Str = e.detail
        if (this.time1Str){
          if (this.time1Str >= this.time2Str){
            this.$showToast("请选择合理时间");
            return
          }else{
            this.form.activityEndTime = dateString
          }
        }else{
          this.form.activityEndTime = dateString
        }
      }else if(this.timePickerType === 'regStartTime'){
        this.regTime1Str = e.detail
        if (this.time1Str){
          if (this.time1Str <= this.regTime1Str){
            this.$showToast("请选择合理时间");
            return
          }else{
            this.regTime1 = dateString
          }
        }else{
          this.regTime1 = dateString
        }
      }
      this.timeShow = false
      // console.log(dateString)
    },
    showTime(e){
      if (e === 'regStartTime'){
        if (!this.form.activityStartTime){
          this.$showToast("请先在上方选择活动开始时间");
        }else{
          this.timePickerType = e
          this.timeShow = true
        }
      } else{
        this.timePickerType = e
        this.timeShow = true
      }
    },

    submit(e){
      const _this = this;
      if (_this.form.activityName === "") {
        this.$showToast("请填写活动主题");
        return;
      }
      if (_this.form.activityType === "") {
        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.fileList.length) {
        this.$showToast("请上传主题图");
        return;
      }
      if (_this.form.activityPhone === "") {
        this.$showToast("请输入联系电话");
        return;
      }
      if (_this.form.activityAddress === "") {
        this.$showToast("请输入活动地址");
        return;
      }
      // 差报名条件等必填
      console.log(_this.form)
    },

    deleteRYXXZP(event) {
      this.fileList.splice(event.detail.index, 1);
      this.$forceUpdate();
    },
    uploadRYXXZP(event) {
      // console.log(event)
      let that = this;
      const { file } = event.detail;
      console.log(event.detail)
      uni.uploadFile({
        url: that.$constant.BASE_URI + "/wx/fileController/upload",
        filePath: file.url,
        name: "file",
        formData: { user: "test" },
        success(res) {
          // 上传完成需要更新 fileList
          let data = JSON.parse(res.data);
          if (event.detail.file.type==='image'){
            that.fileList.push({
              imgUrl: "/FileController/download/" + data.data[0],
              id: data.data[0],
              url:
                  that.$constant.BASE_URI +
                  "/FileController/download/" +
                  data.data[0],
              type:event.detail.file.type,
              isImage:true,
            });
          }else{
            that.fileList.push({
              imgUrl: "/FileController/download/" + data.data[0],
              id: data.data[0],
              url:
                  that.$constant.BASE_URI +
                  "/FileController/download/" +
                  data.data[0],
              type:event.detail.file.type,
              isVideo:true
            });
          }
        },
        fail(res) {},
      });
    },
    // 时间选择单位
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`;
      } else if (type === 'month') {
        return `${val}月`;
      }else if (type === 'day') {
        return `${val}日`;
      }else if (type === 'hour') {
        return `${val}时`;
      }else if (type === 'minute') {
        return `${val}分`;
      }
      return val;
    },
    // 时间戳转换方法
    timestampToDate(timestamp) {
      const date = new Date(timestamp); // 如果timestamp是字符串，确保它是整数：parseInt(timestamp)
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      const seconds = date.getSeconds().toString().padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
  }
}
</script>
<style lang="scss">
.addActivity{
  .reportBody{
    margin-top: 24rpx;
    padding: 0rpx 36rpx;
    background: white;
    //height: 1416rpx;
    box-sizing: border-box;
    .record {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      color: #0365F9;
      font-size: 32rpx;
      .recordImg{
        width: 36rpx;
        height: 36rpx;
        padding: 5rpx 0 0 10rpx;
      }
    }
    .detailUl{
      margin-top: 20rpx;
      .liName{
        font-size: 32rpx;
        color: rgba(51, 51, 51, 1);
        white-space: nowrap;
      }
      .liIpt{
        text-align: right;
      }
      .detailLi{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32rpx 0;
        border-bottom: 2rpx solid #E6E6E6;
        .liInfo{
          display: inline-block;
          text-align: right;
          max-width: 428rpx;
          color: rgba(102, 102, 102, 1);
          font-size: 32rpx;
          line-height: 38rpx;
          display: flex;
          align-items: center;
          .radio{
            margin-left: 64rpx;
          }
          .phoneIcon{
            width: 64rpx;
            height: 64rpx;
            margin-left: 24rpx;
          }
        }
      }
      .detailLi2{
        display: flex;
        flex-direction: column;
        padding: 32rpx 0;
        border-bottom: 2rpx solid #E6E6E6;
        .detailLi2BoxTop{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          margin: 12rpx 0;
          .checkItem{
            width: 160rpx;
            height: 64rpx;
            font-size: 28rpx;
            color: #666666;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #F5F7FA;
            border-radius: 8rpx;
            margin: 12rpx 0;
          }
          .checked{
            background: #0365F9;
            color: white;
          }
        }
        .choosTimeBox{
          display: flex;
          align-items: center;
          justify-content: space-between;
          .timeIpt{
            width: 300rpx;
            height: 96rpx;
            background: rgba(245, 247, 250, 1);
            font-size: 32rpx;
            border-radius: 8rpx;
            padding: 0 20rpx;
            box-sizing: border-box;
          }
          .midZ{
            color: rgba(51, 51, 51, 1);
            font-size: 32rpx;
          }
        }
        .placeBox{
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 32rpx;
          margin: 12rpx 0;
        }
      }
    }
  }
  .van-cell {
    background: #F5F7FA !important;
    border-radius: 8rpx;
    font-size: 28rpx;
  }
  .buttonBox{
    display: flex;
    justify-content: center;
    .btn{
      width: 240rpx;
      height: 80rpx;
      display: flex;
      border-radius: 8rpx;
      align-items: center;
      justify-content: center;
      margin: 48rpx 16rpx 150rpx 16rpx;
      color: white;
      letter-spacing: 2rpx;
      text-indent: 2rpx;
      &::after{
        border: none;
      }
    }
    .zcBtn{
      background: rgba(254, 134, 67, 1);
    }
    .fbBtn{
      background: #0365F9;
    }
  }
}
</style>