horzi_rai_wxa/pageMy/advice/advice.vue

<template>
  <view class="container advice-container">
    <view class="content">
      <view class="advice-ipt-cont">
        <u-input v-model="advice_content" type="textarea" maxlength="100" :clearable="false" placeholder="您有任何使用建议，可以提供给我们，以便为您提供更好的产品服务。" height="300" class="ipt" />
        <text class="num-tag">{{ advice_content.length }}/100</text>
      </view>
      <view class="upload-cont">
        <block v-if="fileList.length">
          <view class="add_icon" v-for="(item, index) in fileList" :key="item">
            <image class="img" :src="item" @click="viewImage(item, fileList)"> </image>
            <icon type="clear" size="16" class="del-ico" color="#f00" @click.stop="delImg(index)" />
          </view>
        </block>
        <view class="add_icon upload-ico" v-if="fileList.length < 3" @click="ChooseFile">
          <u-icon name="plus" color="#9C9C9C" size="48"></u-icon>
          <text class="add-tip">上传图片</text>
        </view>
      </view>
      <view class="btn-cont" @click="submitHandle"> 提交 </view>
      <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
      <Loading />
    </view>
  </view>
</template>

<script>
import { uploadurl, Mine } from "@/config/api.js";
import freeCharge from "@/components/freeCharge";
export default {
  data() {
    return {
      fileList: [], //上传的图片地址
      uploadIndex: 0,
      advice_content: "",
    };
  },
  components: {
    freeCharge,
  },
  methods: {
    init() {
      (this.fileList = []), (this.uploadIndex = 0);
      this.advice_content = "";
    },
    /* 提交 */
    submitHandle() {
      if (this.advice_content) {
        Mine.advice({
          Advice: this.advice_content,
          AdviceImgUrl: this.fileList.join("#"),
        }).then((res) => {
          if (res.Ret === 200) {
            this.$util.toast("提交成功");
            this.init();
          }
        });
      } else {
        this.$util.toast("请填写内容");
      }
    },
    // 选择图片
    ChooseFile() {
      uni.chooseImage({
        count: 3, // 上传选择图片张数
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success: (res) => {
          this.uploadIndex = 0;
          let tempFilePaths = res.tempFilePaths;
          this.upload(tempFilePaths, tempFilePaths.length);
        },
      });
    },
    // 上传图片到服务器
    upload(imgs, len) {
      let token = this.$db.get("access_token");
      let authHeader = token || "";
      let that = this;
      // loading 模态框
      uni.uploadFile({
        url: uploadurl,
        filePath: imgs[that.uploadIndex], // 要上传文件的路径
        header: {
          "Content-Type": "multipart/form-data",
          Authorization: authHeader,
        },
        name: "file",
        success(res) {
          let data = JSON.parse(res.data);
          if (data.Ret === 200) {
            that.uploadIndex++;
            that.fileList = that.fileList.concat(data.Data.ResourceUrl);
            if (that.uploadIndex === len) {
              that.$util.toast("上传成功");
            } else {
              that.upload(imgs, len);
            }
          }
        },
        fail(err) {
          uni.hideToast();
          uni.showModal({
            title: "错误提示",
            content: "上传图片失败" + err,
            showCancel: false,
            success: function (res) {},
          });
        },
      });
    },
    //预览图片
    viewImage(path, imgList) {
      uni.previewImage({
        current: path, // 当前显示图片的http链接
        urls: imgList, // 需要预览的图片http链接列表
      });
    },
    // 删除图片
    delImg(index) {
      uni.showModal({
        title: "",
        content: "确定要删除图片吗 ?",
        success: (res) => {
          if (res.confirm) {
            this.fileList.splice(index, 1);
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.advice-container {
  background-color: $uni-color-new;
  padding: 30rpx 34rpx;
  .content {
    width: 100%;
    border-radius: 8rpx;
    background-color: #fff;
    padding: 25rpx 25rpx 50rpx;
  }
  .advice-ipt-cont {
    height: 420rpx;
    border: 1rpx solid #d0cfd5;
    border-radius: 8rpx;
    padding: 30rpx;
    position: relative;
    font-size: 28rpx;
    color: #d0cfd5;
    .num-tag {
      position: absolute;
      bottom: 30rpx;
      right: 30rpx;
    }
  }
  .upload-cont {
    margin: 40rpx 0 160rpx;
    display: flex;
    align-items: center;
    .add_icon {
      width: 194rpx;
      height: 194rpx;
      margin-right: 50rpx;
      position: relative;
      .del-ico {
        position: absolute;
        right: 20rpx;
        top: 20rpx;
      }
      &:last-child {
        margin-right: 0;
      }
      .img {
        width: 194rpx;
        height: 194rpx;
        box-shadow: 3rpx 3rpx 3rpx rgba(158, 158, 158, 0.16);
      }
      &.upload-ico {
        padding-top: 50rpx;
        text-align: center;
        background-color: $uni-bg-color;
        color: #4a4a4a;
        .add-tip {
          margin-top: 10rpx;
        }
      }
    }
  }
  .btn-cont {
    width: 368rpx;
    height: 60rpx;
    background: $uni-color-new;
    color: #fff;
    font-size: 34rpx;
    margin: 0 auto;
    text-align: center;
    line-height: 60rpx;
    .btn_bg {
      width: 100%;
      height: 60rpx;
      position: absolute;
      left: 0;
      top: 0;
    }
    .btn-txt {
      width: 100%;
      z-index: 1;
    }
  }
}
</style>