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.contant"
              autosize
              type="textarea"
              placeholder="请填写活动名称"
              class="myField"
              maxlength="50"
              show-word-limit
          />
        </li>
        <li class="detailLi2">
          <span class="liName">
            选择类别
          </span>
          <div class="detailLi2Box">
            <div class="detailLi2BoxTop">
              <div class="checkItem" :class="item.isCheck?'checked':''" v-for="item in checkList" @click="clickCheck(item)">{{item.name}}</div>
            </div>
          </div>
        </li>
        <li class="detailLi2">
          <span class="liName">
            主题图
            <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="phone" 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.contant"
              autosize
              type="textarea"
              placeholder="请填写活动举办相关信息"
              class="myField"
              maxlength="2000"
              show-word-limit
          />
        </li>
        <li class="detailLi2">
          <span class="liName" style="margin-bottom: 16rpx">
           <span style="color: red">*</span>&nbsp; 活动内容
          </span>
          <van-field
              :value="form.contant"
              autosize
              type="textarea"
              placeholder="请填写活动举办相关信息"
              class="myField"
              maxlength="2000"
              show-word-limit
          />
          <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="time1" @click="showTime('actStartTime')">
            <span class="midZ">至</span>
            <input placeholder="请选择年月日时分" class="timeIpt" disabled v-model="time2" @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="place">
            <van-icon name="location" style="color: rgba(51, 51, 51, 0.90);font-size: 30rpx"/>
          </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.contant"
              autosize
              type="textarea"
              placeholder="请填写活动举办相关信息"
              class="myField"
              maxlength="2000"
              show-word-limit
          />
        </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="time1" 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.contant"
              autosize
              type="textarea"
              placeholder="请填写限制人数等"
              class="myField"
              maxlength="2000"
              show-word-limit
          />
        </li>
      </ul>
    </div>
       <div class="buttonBox">
         <button class="btn zcBtn">暂存</button>
         <button class="btn fbBtn">发布</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>
export default {
  data(){
    return{
      timeShow:false,
      isCheck:false,
      isCheck2:false,
      time1:'',
      time1Str:'',
      time2Str:'',
      time2:'',
      regTime1:'',
      regTime1Str:'',
      place:'',
      currentDate: new Date().getTime(),
      form:{
        contant:''
      },
      phone:'',
      checkList:[
        {name:'培训',isCheck:true},
        {name:'法务',isCheck:false},
        {name:'财税',isCheck:false},
        {name:'私募',isCheck:false},
      ],
      fileList:[],
      optionsType:'',
      timePickerType:''
    }
  },
  onLoad(options) {
    console.log(options);
    this.optionsType = options.type
    if (options.type==='待处理'){
      uni.setNavigationBarTitle({
        title: '报修处理',
      });
    }else if(options.type==='已处理'){
      uni.setNavigationBarTitle({
        title: '报修详情',
      });
    }else {
      uni.setNavigationBarTitle({
        title: '报修派单',
      });
    }
  },
  methods:{
    clickCheck(item){
      item.isCheck = !item.isCheck
    },
    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.time1 = dateString
          }
        }else{
          this.time1 = dateString
        }
      }else if(this.timePickerType === 'actEndTime'){
        this.time2Str = e.detail
        if (this.time1Str){
          if (this.time1Str >= this.time2Str){
            this.$showToast("请选择合理时间");
            return
          }else{
            this.time2 = dateString
          }
        }else{
          this.time2 = 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){
       this.timePickerType = e
       this.timeShow = true
    },
    deleteRYXXZP(event) {
      this.fileList.splice(event.detail.index, 1);
      this.$forceUpdate();
    },
    uploadRYXXZP(event) {
      console.log(event)
      let that = this;
      const { file } = 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);
          that.fileList.push({
            imgUrl: "/FileController/download/" + data.data[0],
            id: data.data[0],
            url:
                that.$constant.BASE_URI +
                "/FileController/download/" +
                data.data[0],
            isImage: 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;
          margin-top: 8rpx;
        }
      }
    }
  }
  .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>