nbjk-xcx/src/otherPages/userAdvise/index.vue

<template>
  <view class="bg">
    <view class="header">
      <radio-group class="option" @change="radioChange">
        <label class="radio">
          <radio checked color="#498ef5" value="1" /><text
            style="font-weight: 600; padding-left: 10rpx"
            >遇到问题</text
          >
        </label>
        <label class="radio">
          <radio color="#498ef5" value="2" /><text
            style="font-weight: 600; padding-left: 10rpx"
            >使用建议</text
          >
        </label>
      </radio-group>
    </view>
    <view>
      <view class="form">
        <view class="content">
          <textarea
            maxlength="250"
            :placeholder="placeholder"
            class=""
            v-model="form.content"
          ></textarea>
          <view class="uplaod">
            <van-uploader
              accept="image"
              @delete="deleteAdviseImg"
              :max-count="4"
              :file-list="fileList"
              @after-read="afterRead"
            >
              <image style="width: 80px; height: 80px" :src="i"></image>
            </van-uploader>
          </view>
        </view>
        <view class="phone">
          <input
            v-model="form.phone"
            placeholder="请填写手机号码"
            class="phone-input"
          />
        </view>
      </view>
    </view>
    <view class="submit">
      <view @click="submitAdvise" class="submit-button">提交</view>
    </view>
  </view>
</template>

<script>
import store from "@/store";
import api from "@/api";
export default {
  data() {
    return {
      form: {
        content: "",
        phone: "",
        type: "1",
        imgs: "",
      },
      uploadUrl:
        process.env.NODE_ENV === "development"
          ? "https://nbjk1.zzxcx.net/nbjk-admin/"
          : "https://nbjk.zzxcx.net/nbjk-admin/",
      i: "https://ct-1305573081.cos.ap-shanghai.myqcloud.com/ctjk/mp-wx/userAdvise/upload_icon.png",
      fileList: [],
      placeholder:
        "遇到的问题如下：1、打开了某个页面2、执行某个操作遇到了什么问题3、其他附加描述",
    };
  },
  methods: {
    deleteAdviseImg(e){
      console.log(e)
     let fileList= this.fileList.filter((item,index)=>{
       return e.detail.index!==index

      })

      this.fileList =fileList

    },
    submitAdvise(e) {
      console.log(e);
      let that = this;
      var res = /^[1][3,4,5,6.7,8,9][0-9]{9}$/;
      if (!res.test(this.form.phone)) {
        uni.showToast({
          icon: "error",
          title: "手机号格式错误",
        });
        return;
      }
      api.advise
        .studentFeedBack({
          ...that.form,
          imgIds: that.fileList.map((item) => item.id).join(","),
        })
        .then((res) => {
          uni.showToast({
            title: "成功",
          });
        });
    },
    afterRead(e) {
      console.log(e);

      let that = this;
      uni.uploadFile({
        url: that.uploadUrl + "/student/file/info/uploadImage",
        filePath: e.detail.file.url,
        name: "img",
        header: {
          Authorization: store.state.user.tokenObj.token
            ? "Bearer " + store.state.user.tokenObj.token
            : "",
          "Content-Type": "application/json;charset=utf8",
        },
        formData: {
          businessType: that.form.type,
        },
        success(res) {
          var resData = JSON.parse(res.data);

          if (resData.code == 200) {
            that.fileList.push({
              url: e.detail.file.url,
              id: resData.data,
              name: resData.data,
              isImage:true
            });
          } else {
            uni.showToast({
              icon: "error",
              title: "上传失败",
            });
          }
        },
      });
    },
    radioChange(e) {
      this.form.type = e.detail.value;
      this.placeholder =
        e.detail.value == "1"
          ? "遇到的问题如下：1、打开了某个页面2、执行某个操作遇到了什么问题3、其他附加描述"
          : "请详细描述您在使用视频APP时的想法和建议";
    },
  },
};
</script>

<style lang="scss" scoped>
.bg {
  background: #fff;
  width: 100vw;
  height: 100vh;
}
.inline-block {
  display: inline-block;
}
.header {
  padding-left: 114rpx;
  padding-right: 114rpx;
  display: flex;
  justify-content: space-between;
  .option {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 56rpx;
  }
}
.form {
  padding-left: 30rpx;
  padding-right: 30rpx;
  margin-top: 30rpx;
  .phone {
    margin-top: 50rpx;
    .phone-input {
      height: 108rpx;
      line-height: 108rpx;
      background: rgba(242, 243, 245, 1);
      overflow: hidden;
      border-radius: 54rpx;
      padding-left: 40rpx;
    }
  }

  .content {
    width: 100%;
    background: rgba(242, 243, 245, 1);
    height: 456rpx;
    position: relative;

    .uplaod {
      // position: absolute;
      // bottom: 32rpx;
      padding-left: 30rpx;
      z-index: 999;
      margin-top: 20px;
    }
  }
  .content > textarea {
    width: 630rpx;

    height: 220rpx;
    padding-top: 20rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
    border-radius: 5rpx;
  }
}
.submit {
  position: absolute;
  bottom: 80rpx;
  width: 100%;
  .submit-button {
    width: 530rpx;
    line-height: 80rpx;
    text-align: center;
    margin: 0 auto;
    background: rgba(73, 142, 245, 1);
    color: #fff;

    border-radius: 40rpx;
  }
}
</style>