commitTab.vue

<template>
  <div class="commit-page-content">
    <van-form @submit="onSubmit">
      <div class="field-title">
        <span>基本信息</span>
      </div>
      <div class="input-box">
        <van-field
          class="field-form-item"
          readonly
          clickable
          name="boardName"
          input-align="right"
          :value="form.boardName"
          label="展板名称"
          placeholder="请选择展板"
          :right-icon="showBoard ? 'arrow-up' : 'arrow-down'"
          @click="showBoard = true"
          :rules="[{ required: true }]"
        />
        <van-popup v-model="showBoard" position="bottom">
          <van-picker
            show-toolbar
            :columns="boardNameList"
            @confirm="onConfirmBoard"
            @cancel="showBoard = false"
          />
        </van-popup>
        <van-field
          label="账户名"
          v-model="form.username"
          placeholder="请输入账户名称"
          readonly
          input-align="right"
        />
        <van-cell
          class="calendar-icon"
          title="学习时间"
          :value="form.studyTime || ''"
          @click="onDisplay"
          :icon="form.studyTime || cellIcon"
        />
        <van-popup v-model="show" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="datetime"
            title="选择学习时间"
            :formatter="formatter"
            @confirm="onConfirm"
            @cancel="onClose"
          />
        </van-popup>
        <van-field
          label="观影人数"
          v-model="form.num"
          placeholder="请输入观影人数"
          input-align="right"
          :rules="[{ pattern: /^[1-9]\d*$/, message: '请输入正确内容' }]"
        />
        <van-field
          label="管理员账号"
          v-model="form.name"
          placeholder="请输入管理员账号"
          input-align="right"
          :rules="[{ required: true }]"
        />
        <van-field
          type="password"
          label="管理员密码"
          v-model="form.password"
          placeholder="请输入管理员密码"
          input-align="right"
          :rules="[{ required: true }]"
        />
      </div>
      <div class="field-title">
        <span>上传视频</span>
      </div>
      <div class="field-content">
        <div class="upload-content">
          <div class="uplaod-video" style="min-height: 60px">
            <van-uploader
              :max-count="3"
              v-model="fileList"
              accept="video/*"
              :before-read="beforeVideo"
              :after-read="uploadVideo"
              :before-delete="deleteVideo"
              multiple
            >
              <div class="avatar-plus">
                <span>+</span>
              </div>
            </van-uploader>
          </div>
          <div class="tips">
            <img src="@/assets/images/applets/tip.png" alt />
            <span>
              最多支持上传
              <b>3</b> 段视频,每段时长 <b>30s</b>。
            </span>
          </div>
        </div>
      </div>
      <div class="field-title">
        <span>上传照片</span>
      </div>
      <div class="field-content">
        <div class="upload-content">
          <div class="uplaod-video" style="min-height: 60px">
            <van-uploader
              :max-count="6"
              accept="image/png, image/jpeg"
              v-model="imgFileList"
              multiple
              :after-read="uploadImg"
              :before-delete="deleteImg"
            >
              <div class="avatar-plus">
                <span>+</span>
              </div>
            </van-uploader>
          </div>
          <div class="tips">
            <img src="@/assets/images/applets/tip.png" alt />
            <span>
              最多支持上传
              <b>6</b> 张照片
            </span>
          </div>
        </div>
      </div>
      <div class="field-title">
        <span>有话对党说</span>
      </div>
      <div class="field-content">
        <van-field
          class="field-textarea"
          type="textarea"
          v-model="form.content"
          maxlength="500"
          show-word-limit
        />
      </div>
      <div class="commit-page-button">
        <van-button type="default" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: JSON.parse(sessionStorage.getItem("userInfo")).orgName,
        organId: JSON.parse(sessionStorage.getItem("userInfo")).orgId,
        images: [], // 文件地址
        videos: [], // 文件地址
      },
      currentDate: new Date(),
      boardList: [],
      boardNameList: [],
      showBoard: false,
      cellIcon: require("@/assets/images/applets/date.png"),
      show: false,
      fileList: [], // 预览
      imgFileList: [],// 预览
      videoIds:[], // 文件ID
      imageIds:[] // 文件ID
    };
  },
  mounted() {
    this.getBoardList();
  },
  methods: {
    // 获取所属单位
    getBoardList() {
      let vm = this;
      vm.$https({
        url: "exhibitionBoard/getList",
        method: "post",
        authType: this.backToken,
      })
        .then((res) => {
          if (res.data.resultCode === "200") {
            vm.boardList = res.data.data;
            vm.boardNameList = res.data.data.map((item) => item.name);
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 下拉框确认按钮
    onConfirmBoard(value, index) {
      this.form.boardName = value;
      this.form.boardId = this.boardList[index].id;
      this.showBoard = false;
    },
    beforeVideo(file) {
      this.timeOutVideo = false
      if(Array.isArray(file)){
        file.forEach(item=>{
          this.createVideo(item)
        })
      }else{
        this.createVideo(file)
      }
      return true
    },
    createVideo(file){
      let _URL = window.URL || window.webkitURL;
      let videoUrl = _URL.createObjectURL(file);
      let audioElement = new Audio(videoUrl);
      audioElement.addEventListener("loadedmetadata", () => {
        let duration = audioElement.duration; //时长为秒，小数，182.36
        console.log(duration)
        if (duration > 31) {
          this.timeOutVideo = true
          this.fileList = []
          this.$toast.fail("上传视频时长不能超过30秒");
          return false;
        }
      }); 
    },
    // 打开日历
    onDisplay() {
      this.show = true;
    },
    // 关闭日历
    onClose() {
      this.show = false;
    },
    // 确认日历
    onConfirm(event) {
      this.show = false;
      this.form.studyTime = this.timeStamp2String(event);
    },
    // 格式转化
    timeStamp2String(time) {
      var datetime = new Date();
      datetime.setTime(time);
      var year = datetime.getFullYear();
      var month =
        datetime.getMonth() + 1 < 10
          ? "0" + (datetime.getMonth() + 1)
          : datetime.getMonth() + 1;
      var date =
        datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
      var hour =
        datetime.getHours() < 10
          ? "0" + datetime.getHours()
          : datetime.getHours();
      var minute =
        datetime.getMinutes() < 10
          ? "0" + datetime.getMinutes()
          : datetime.getMinutes();
      var second =
        datetime.getSeconds() < 10
          ? "0" + datetime.getSeconds()
          : datetime.getSeconds();
      return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    },
    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      } else if (type === "month") {
        return `${value}月`;
      } else if (type === "day") {
        return `${value}日`;
      } else if (type === "hour") {
        return `${value}时`;
      }
      return `${value}分`;
    },
    // 删除图片
    async deleteImg(file,detail){
      this.form.images.splice(detail.index,1)
      const id = this.imageIds[detail.index]
      this.imageIds.splice(detail.index,1)
      await this.deleteInterface(id)
    },
    // 上传图片
    uploadImg(file) {
      let param = new FormData();
      if(Array.isArray(file)){
        file.forEach(item=>{
          param.append("file", item.file)
        })
      }else{
        param.append("file", file.file)
      }
      this.uploadImgInterface(param)
    },
    // 上传图片接口
    uploadImgInterface(param){
      let vm = this;
      vm.$https(
        {
          url: "file/datum/upload",
          method: "post",
          authType: this.backToken,
        },
        param
      )
        .then((res) => {
          if(res.data.resultCode==='200'){
            res.data.data.fileList.forEach(item=>{
              this.form.images.push(item.fileUrl);
              this.imageIds.push(item.id);
            })
          }else{
            this.$toast(res.data.message)
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 删除视频
    async deleteVideo(file,detail){
      this.form.videos.splice(detail.index,1)
      const id = this.videoIds[detail.index]
      this.videoIds.splice(detail.index,1)
      await this.deleteInterface(id)
    },
    // 上传视频
    uploadVideo(file) {
      let param = new FormData();
      if(Array.isArray(file)){
        file.forEach(item=>{
          param.append("file", item.file)
        })
      }else{
        param.append("file", file.file)
      }
      this.uploadVideoInterface(param)
    },
    // 上传视频接口
    uploadVideoInterface(param){
      let vm = this;
      vm.$https(
        {
          url: "file/video/upload",
          method: "post",
          authType: this.backToken,
        },
        param
      )
        .then((res) => {
          if(res.data.resultCode==='200'){
            if(!this.timeOutVideo){
              res.data.data.fileList.forEach(item=>{
                this.form.videos.push(item.fileUrl);
                this.videoIds.push(item.id);
              })
            }
            
          }else{
            this.$toast(res.data.message)
          }
          
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    // 删除接口
    deleteInterface(id){
        this.$https(
        {
          url: "file/delete/"+id,
          method: "delete",
          authType: this.backToken,
        })
        .then((res) => {
          if(res.data.resultCode==='200'){
            return true
          }else{
            this.$toast(res.data.message)
            return false
          }
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    
    // 提交数据
    onSubmit() {
      let vm = this;
      let param = {};
      for (let key in this.form) {
        if (this.form[key]) {
          param[key] = this.form[key];
        }
      }
      param.images = [...param.images, ...param.videos];
      param.images = param.images.join(",");
      delete param.videos;
      console.log(param);
      vm.$https(
        {
          url: "interaction/add",
          method: "post",
          authType: this.backToken,
        },
        vm.$qs.stringify(param)
      )
        .then((res) => {
          if (res.data.resultCode === "200") {
            this.$router.replace({path:"/success",query:{txt:'提交成功',url:'/commit'}})
          } else {
            this.$toast(res.data.message)
          }
        })
        .catch(function (err) {
          console.log(err)
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.commit-page-content {
  padding: 24px 20px;
  height: calc(100% - 200px);
  overflow-y: auto;
  .field-title {
    position: relative;
    padding-bottom: 20px;
    span {
      color: #333;
      font-size: 16px;
      line-height: 20px;
      &:before {
        content: "";
        height: 16px;
        width: 4px;
        border-radius: 1px;
        display: inline-block;
        background: #a4151d;
        position: absolute;
        left: -20px;
        top: 2px;
      }
    }
  }
  .field-content {
    padding-bottom: 32px;
  }
  .input-box {
    padding-bottom: 32px;
    .van-cell {
      line-height: 40px;
      padding-left: 0;
      padding-right: 0;
      border-bottom: 1px solid #eee;
    }
    .van-cell:after {
      display: none;
    }
  }
  .calendar-icon {
    .van-icon {
      position: absolute;
      width: 20px;
      height: 20px;
      right: 0;
      bottom: 22px;
      z-index: 2;
    }
  }
  .commit-page-button {
    position: fixed;
    bottom: 50px;
    left: 0;
    right: 0;
    padding: 0 40px;
    background-color: #fff;
    box-sizing: border-box;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    .van-button--normal {
      background: #a4151d;
      border-radius: 4px;
      height: 40px;
      width: 100%;
      color: #fff;
      border: none;
      font-size: 16px;
    }
  }
  .van-field__control,
  .van-cell__value {
    color: #333;
  }

  ::v-deep .field-textarea {
    min-height: 80px;
    padding: 0;
    .van-field__value {
      background-color: #f5f5f5;
    }
    .van-cell {
      padding: 0;
    }
  }

  .upload-content {
    .avatar-plus {
      width: 48px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background-color: #f5f5f5;
      border-radius: 1px;
      font-size: 25px;
      color: #999;
      margin-bottom: 12px;
    }
    .tips {
      img {
        width: 12px;
        height: 12px;
        vertical-align: middle;
      }
      span {
        margin-left: 4px;
        color: #666;
        font-size: 12px;
        vertical-align: middle;
      }
    }
  }
}
</style>