product_wx/pages/subPackages/minePages/feedback.vue

<template>
    <div class="feedback">
        <ul class="detailUl">
          <div class="record" @click.stop="toRecord">
            反馈记录 <img src="https://www.idea-co-sf.com/gardenProduct/image/rightIcon.png" class="recordImg">
          </div>
          <li class="detailLi2">
            <div class="detailLi2Box">
              <van-field
                  :value="form.feedbackContent"
                  autosize
                  type="textarea"
                  placeholder="请输入文字进行描述"
                  class="myField"
                  maxlength="800"
                  show-word-limit
                  @change="changeField"
              />
            </div>
          </li>
          <li class="detailLi2">
          <span class="liName">
            上传照片
            <span style="color: #B3B3B3;font-size: 28rpx">（支持图片/视频上传限20M内，最多6张）</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>
        </ul>
      <button class="submitBtn" @tap="submit">
        提交
      </button>
    </div>
</template>

<script>
import { parkFeedbackInfoAdd,getUserLocalStorageInfo } from "@/js_sdk/http.js";
export default {
  name: "feedback",
  data(){
    return{
      form:{
        feedbackContent:'',
        feedbackPicture: '',
        feedbackId: getUserLocalStorageInfo().userId,
        feedbackName:getUserLocalStorageInfo().username
      },
      fileList:[]
    }
  },
  methods:{
    changeField(e){
      // console.log(e.detail)
      this.form.feedbackContent = e.detail
    },
    submit(){
      let picArr = []
      this.fileList.forEach(item=>{
        picArr.push(item.id)
      })
      this.form.feedbackPicture = picArr.toString()
      // console.log(this.form.feedbackld)
      if (!this.form.feedbackContent){
        uni.showToast({
          title: '请描述反馈内容',
          icon: 'error',
          mask: true,
          duration: 1000
        });
      }else{
        parkFeedbackInfoAdd(this.form).then(res=>{
          console.log(res)
            uni.showToast({
              title: res.msg,
              icon: 'none',
              mask: true,
              duration: 1000
            });
          uni.navigateBack({});
        })
      }
    },
    toRecord(){
      uni.navigateTo({
        url:'/pages/subPackages/minePages/feedback_record'
      })
    },
    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);
          console.log('data',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">
    .feedback{
      .record {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #0365F9;
        font-size: 32rpx;
        padding-top: 24rpx;
        .recordImg{
          width: 36rpx;
          height: 36rpx;
          padding: 5rpx 0 0 10rpx;
        }
      }
      .detailUl{
        margin-top: 20rpx;
        background: white;
        padding: 0 32rpx;
        .liName{
          font-size: 32rpx;
          color: rgba(51, 51, 51, 1);
          white-space: nowrap;
        }
        .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;
            .radio{
              margin-left: 64rpx;
            }
          }
        }
        .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;
            }
          }
        }
        .van-cell {
          background: #F5F7FA !important;
          border-radius: 8rpx;
          font-size: 28rpx;
        }
      }
      .submitBtn{
        width: 654rpx;
        height: 96rpx;
        background: #0365F9;
        border-radius: 8rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 64rpx 48rpx;
        color: white;
      }
    }
</style>