YingXingAI/pages/my/Feedback/Feedback.vue

<template>
  <view>
    <u-navbar title="意见反馈"></u-navbar>
    <view class="flex-col page">
      <view class="flex-col group">
        <view class="flex-col items-center text-wrapper">
          <u-input v-model='contactPhone' class="text_1" placeholder="请输入联系电话" type="text"/>
        </view>
        <view class="flex-col items-start section_3">
          <view class="group_1">
            <u-input v-model='content' :custom-style="textareaStyle" maxlength="500" placeholder="请输入反馈内容" type="textarea"
                     @blur="inputBlur" @click="shuru"/>
          </view>
          <view class="uping">
            <u-upload ref="uUpload" :action="$u.http.config.baseUrl + action" :header='header'
                      @on-success="onSuccess" @on-remove="onRemove"></u-upload>
          </view>
        </view>
      </view>
      <view class="flex-col items-center text-wrapper_4" @click="onbuttonClick">
        <text class="text_18">提 交</text>
      </view>
    </view>
    <u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
    <u-toast ref="uToast"/>
  </view>
</template>

<script>
export default {
  data() {
    return {
      textareaStyle: {
        width: "80%",
      },
      fileList: [],
      contactPhone: '',
      content: '',
      emojiData: [],
      emoji: false,
      emojicurrent: 0,
      header: {
        Authorization: ""
      },
      action: '/app/User/File',
      imgData: [],
      schoolId: "",
      sysSignStr: [],
      num: "",
      tabs: [],
      arr1: [],
      type: "",
    };
  },
  onLoad(e) {
    this.header.Authorization = "Bearer " + this.vuex_token;
    this.getSchool();
  },
  methods: {
    // 获取学校
    async getSchool() {
      const req = {
        userId: this.vuex_user.id,
      };
      const res = await this.$u.apiList.MyEducations(req);
      this.schoolId = res.filter(function (x) {
        return x.isSelected === true
      })[0].schoolId
    },
    // 提示
    tips(title, type, time) {
      this.$refs.uToast.show({
        title: title ? title : "",
        type: type ? type : "success",
        duration: time ? time + "" : "1000",
      });
    },

    onbuttonClick() {
      var reg = new RegExp("^[1][3,4,5,7,8,9][0-9]{9}$", "g"); //手机号
      if (this.contactPhone === "" || !reg.test(this.contactPhone)) {
        this.tips("请输入正确的手机号码", "error");
        return
      }
      if (this.content === "") {
        this.tips('请输入反馈内容', 'error')
        return
      }
      // let files = this.$refs.uUpload.lists[0];
      let file = this.imgData.join(',')
      if (!file) {
        this.tips("请上传图片", "error");
        return false
      }
      const data = {
        userId: this.vuex_user.id,
        schoolId: this.schoolId,
        content: this.content,
        contactPhone: this.contactPhone,
        image: file
      }
      console.info("🚀 ~ file:Feedback method:onbuttonClick line:101 -----", data)

      // return
      this.onSubmitFeedback(data)
    },
    //提交反馈
    onSubmitFeedback(data) {
      this.$u.apiList.SubmitFeedback(data).then((res) => {
        this.$refs.uToast.show({
          title: '提交成功',
          type: 'success',
        })
        setTimeout(() => {
          this.$u.route({
            url: 'pages/my/mySeting/mySeting'
          })
          // uni.switchTab({
          //   url: "../../../pages/my/my/my"
          // });
        }, 1000)
      })
    },

    onSuccess(res) {

      this.imgData.push(res.data)
    },
    onRemove(index, lists) {
      let imgs = []
      lists.forEach(item => {
        imgs.push(item.response.data)
      })
      this.imgData = imgs
    },
    inputBlur() {
      ;
    },
    shuru() {
      ;
    },
    //返回上一级
    router() {
      this.$u.route({
        url: 'pages/my/mySeting/mySeting'
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.emojishow {
  height: 3rem !important;
}

.slider {
  background: #fff;
  width: 7.75rem;
  height: 0rem;
  transition: all 0.3s;
  box-shadow: 0 0 4px #999;
  position: fixed;
  bottom: 0;

  .slider-emoji {
    overflow-y: scroll;
    width: 100vw !important;
  }

  &-emoji {
    width: 6.75rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

    &-icon {
      font-size: 0.265rem;
      display: inline-block;
      width: 11%;
      text-align: center;
      padding: 0.02rem 0;
      border-radius: 0.1rem;
      //   border-bottom: 1px solid #ccc;
    }

    &-icon:active {
      background: #ccc;
    }
  }
}

.page {
  padding-bottom: 0.5rem;
  background-color: rgb(246, 247, 250);
  overflow-y: auto;
  width: 100%;
  overflow-x: hidden;
  height: 100%;

  .group {
    padding-top: 0.015rem;

    .text-wrapper {
      padding: 0.1rem 0rem 0.1rem;
      background-color: rgb(255, 255, 255);
      box-shadow: 0.00018rem 0.005rem rgba(0, 0, 0, 0.03);

      .text_1 {
        color: rgb(2, 2, 2);
        font-size: 0.15rem;
        font-family: Adobe Heiti Std;
        line-height: 0.24rem;
        width: 88%;
        margin: 0 auto;
      }
    }

    .section_3 {
      margin-top: 0.015rem;
      padding: 0.13rem 0 0.24rem;
      background-color: rgb(255, 255, 255);
      box-shadow: 0.00018rem 0.005rem rgba(0, 0, 0, 0.03);

      .group_1 {
        width: 88%;
        margin: 0 auto;
      }

      .uping {
        width: 90%;
        margin: 0 auto;
      }
    }

    .section_4 {
      margin-top: 0.01rem;
      padding: 0.12rem 0.28rem 0.14rem 0.35rem;
      background-color: rgb(255, 255, 255);
      box-shadow: 0.00018rem 0.005rem rgba(0, 0, 0, 0.03);

      .image_2 {
        margin-top: 0.02rem;
        width: 0.23rem;
        height: 0.18rem;
      }

      .image_3 {
        width: 0.22rem;
        height: 0.22rem;
      }

      .group_2 {
        margin-top: 0.01rem;

        .group_4 {
          margin-left: 0.3rem;
          margin-bottom: 0.02rem;

          .image_4 {
            flex-shrink: 0;
            width: 0.14rem;
            height: 0.21rem;
          }

          .text_11 {
            margin-left: 0.06rem;
            align-self: center;
            color: rgb(160, 162, 172);
            font-size: 0.15rem;
            font-family: PingFang;
            line-height: 0.14rem;
          }
        }

        .text_9 {
          color: rgb(80, 80, 81);
          font-size: 0.24rem;
          font-family: PingFang;
          line-height: 0.24rem;
        }

        .text_10 {
          margin-top: 0.03rem;
          color: rgb(160, 162, 172);
          font-size: 0.15rem;
          font-family: PingFang;
          line-height: 0.14rem;
        }
      }
    }
  }

  .text-wrapper_4 {
    margin: 0.31rem 0.24rem 0 0.23rem;
    padding: 0.1rem 0 0.14rem;
    // background-color: rgb(46, 155, 255);
    background-color: #3cb4fb;
    border-radius: 0.3rem;

    .text_18 {
      color: rgb(255, 255, 255);
      font-size: 32rpx;
      font-family: PingFang;
      line-height: 0.16rem;
    }
  }
}
</style>