product_wx/pages/subPackages/propertyNotice_manage/newRelease.vue

<template>
     <div class="newRelease">
         <ul class="predetermineUl">
           <li class="predetermineLi2">
             <div class="liName">标题</div>
             <van-field
                 :value="postData.title"
                 autosize
                 type="textarea"
                 placeholder="请输入"
                 class="myField"
                 maxlength="50"
                 show-word-limit
                 @input="onInput"
             />
           </li>
           <li class="predetermineLi2" style="border-bottom: none">
             <div class="titleBox" style="margin-bottom: 24rpx">
               <span class="liName">上传图片</span>
               <span class="tips">（支持图片上传限20M内，最多6张）</span>
             </div>
             <van-uploader
                 :max-count="12"
                 @delete="deleteRYXXZP"
                 :file-list="fileList"
                 @after-read="uploadRYXXZP"
                 :show-upload="true"
             />
           </li>
           <li class="predetermineLi2" style="border-bottom: none">
             <div class="titleBox" style="margin-bottom: 24rpx">
               <span class="liName">内容</span>
             </div>
             <van-field
                 :value="postData.content"
                 autosize
                 type="textarea"
                 placeholder="请输入"
                 class="myField"
                 maxlength="1000"
                 show-word-limit
                 @input="onInput2"
             />
           </li>
         </ul>
       <div class="buttonBox" >
         <button class="btn zcBtn" @tap="commitCliack">暂存</button>
         <button class="btn tjBtn" @tap="addClick">发布</button>
       </div>
     </div>
</template>

<script>
import { noticeParkAdd,getUserLocalStorageInfo,noticeParkGetById,noticeParkEdit } from "@/js_sdk/http";
import dayjs from "dayjs";
export default {
  name: "newRelease",
  data(){
    return{
      postData:{
        content:'',
        title:'',
        createdBy: getUserLocalStorageInfo().userId,
        source:'2',
        status:''
      },
      fileList:[],
      addType: '',
      type:''
    }
  },
  onLoad(type){
    console.log(type)
    this.type = type.noticeType
    this.addType = type.addType
    if (type.id){
      noticeParkGetById({id:type.id}).then(res=>{
        console.log(res)
        this.postData = res.data
      })
    }
  },
  methods:{
    onInput(event){
      console.log(event)
      this.postData.title = event.detail;
    },
    onInput2(event){
      this.postData.content = event.detail;
    },
    addClick() {
      const dayjs = require('dayjs')
      this.postData.releaseTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
      this.postData.status = 'published'
      if (this.addType === '发布'){
        // console.log(this.postData)
        noticeParkAdd(this.postData).then(res=>{
          if (res.code == '200'){
            uni.reLaunch({
              url:'/pages/subPackages/propertyNotice_manage/index?type=' + this.type
            })
            uni.showToast({
              title: '操作成功',
              duration: 500
            });
          }
        })
      }else if(this.addType === '编辑'){
        noticeParkEdit(this.postData).then(res=>{
          if (res.code == '200'){
            uni.reLaunch({
              url:'/pages/subPackages/propertyNotice_manage/index?type=' + this.type
            })
            uni.showToast({
              title: '操作成功',
              duration: 500
            });
          }
        })
      }
    },
    commitCliack() {
      const dayjs = require('dayjs')
      if (this.addType === '发布'){
        this.postData.releaseTime = dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss')
        this.postData.status = 'unpublished'
        noticeParkAdd(this.postData).then(res=>{
          if (res.code == '200'){
            uni.reLaunch({
              url:'/pages/subPackages/propertyNotice_manage/index?type=' + this.type
            })
            uni.showToast({
              title: '操作成功',
              duration: 500
            });
          }
        })
      }else if(this.addType === '编辑'){
        noticeParkEdit(this.postData).then(res=>{
           if (res.code == '200'){
             uni.reLaunch({
               url:'/pages/subPackages/propertyNotice_manage/index?type=' + this.type
             })
             uni.showToast({
               title: '操作成功',
               duration: 500
             });
           }
        })
      }
    },
    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) {},
      });
    },
  }
}
</script>

<style lang="scss">
    .newRelease{
      .predetermineUl{
        margin: 24rpx 0;
        background: white;
        box-sizing: border-box;
        padding: 0 32rpx;
        .predetermineLi{
          padding: 32rpx 0;
          border-bottom: 1px solid rgba(230, 230, 230, 1);
          display: flex;
          justify-content: space-between;
        }
        .predetermineLi2{
          padding: 32rpx 0;
          border-bottom: 1px solid rgba(230, 230, 230, 1);
          display: flex;
          flex-direction: column;
        }
        .van-cell {
          background: #F5F7FA !important;
          border-radius: 8rpx;
          font-size: 28rpx;
          margin-top: 16rpx;
        }
        .liName{
          color: rgba(51, 51, 51, 1);
          font-size: 32rpx;
        }
        .liIpt{
          color: rgba(102, 102, 102, 1);
          font-size: 32rpx;
          text-align: right;
        }
      }
      .titleBox{
        display: flex;
        align-items: center;
        .titleName{
          color: rgba(24, 23, 42, 1);
          font-size: 32rpx;
          font-weight: 600;
          margin-right: 16rpx;
        }
        .tips{
          font-size: 28rpx;
          color: rgba(179, 179, 179, 1);
        }
      }
      .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;
        }
        .zcBtn{
          background: #FE8643;
        }
        .tjBtn{
          background: #0365F9;
        }
      }
    }
</style>