uniapp/pages_promotion/message/words.vue

<template>
  <page-meta :page-style="themeColor"></page-meta>
  <view class="words">
    <!--表单内容-->
    <view class="words-list">
      <view class="words-list-block">
        <view class="block-title">填写留言：</view>
        <view class="block-content">
          <textarea v-model="remarks" class="block-textarea" type="text" placeholder="请在此处填写内容"></textarea>
        </view>
      </view>
      <view class="words-list-block">
        <view class="block-title">上传附件（非必传，最多9张）：</view>
        <view class="block-content">
          <view class="upload-image">
            <view class="upload-item" v-for="(item,index) in image_list" :key="index">
              <image class="upload-item-image" :src="$util.img(item)" mode="widthFix"></image>
              <i class="del-button icondiy icon-system-close-circle-fill" @click="delFile(index)"></i>
            </view>
            <view class="upload-item upload-button" @click="uploadFile">
              <i class="icondiy icon-system-camera-line"></i>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!--提交消息-->
    <view class="bottom-buttons">
      <view class="bottom-buttons-btn" @click="submitRemarks">提交留言</view>
    </view>
    <!--登录弹框-->
    <ns-login ref="login"></ns-login>
    <!--加载动画-->
    <loading-cover ref="loadingCover"></loading-cover>
  </view>
</template>

<script>
export default {
  data() {
    return {
      image_list: [],
      remarks: '',
    };
  },
  components: {},
  mixins: [],
  onLoad(option) {},
  onShow() {},
  onReady(){
    // 判断是否登录
    if (!uni.getStorageSync('token')) this.$refs.login.open('/pages_promotion/futures/list');


    if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
  },
  methods: {
    // 点击上传图片
    uploadFile(){
      let _this = this;
      let size = Object.keys(this.image_list).length || 0;
      this.$util.upload(9 - size, {path: 'evaluateimg'}, res => {
        _this.image_list = _this.image_list.concat(res);
        this.$forceUpdate();
      });
    },
    // 点击删除
    delFile(index){
      // 删除内容
      let list = this.$util.deepClone(this.image_list);
      delete list[index];
      this.image_list = this.$util.deepClone(Object.values(list))

      this.$forceUpdate();
    },
    // 提交留言消息
    submitRemarks(){
      // 判断内容
      let _this = this;
      if(!_this.remarks){
        _this.$util.showToast({
          title: '请输入留言信息！',
          mask: true,
          duration: 1500,
        });
        return false;
      }
      // 请求发布
      _this.$api.sendRequest({
        url: '/message/api/message/remarks',
        data: {
          remarks: _this.remarks,
          image_list: _this.image_list,
        },
        success: res => {
          if(parseInt(res.code) === 0){
            _this.$util.showToast({
              title: '提交成功',
              mask: true,
              duration: 1500,
              success: function () {
                setTimeout(() => {
                  _this.$util.redirectTo('/pages_promotion/message/index');
                }, 1000);
              }
            });
          }
        }
      });
    }



  },
  onBackPress(options) {
    if (options.from === 'navigateBack') return false;
    this.$util.redirectTo('/pages/member/index');
    return true;
  }
};
</script>

<style lang="scss" scoped>
.words{
  min-height: 100vh;
  background-color: #f8f8f8;

  .words-list{
    padding: 30rpx;
    .words-list-block{
      width: 100%;
      margin-bottom: 30rpx;
      .block-title{
        font-size: 30rpx;
        font-weight: bold;
        width: 100%;
        height: 60rpx;
        line-height: 60rpx;
        text-align: left;
      }
      .block-content{
        width: 100%;
        .block-textarea{
          background-color: #FFFFFF;
          font-size: 26rpx;
          padding: 20rpx;
          width: calc(100% - (20rpx * 2));
          border-radius: 10rpx;
          height: 30vh;
        }
        .upload-image{
          --image-width--: calc(100vw - (30rpx * 2));
          width: var(--image-width--);
          display: inline-flex;
          flex-direction: row;
          flex-wrap: wrap;
          align-items: center;
          justify-content: flex-start;

          .upload-item{
            --image-size--: calc((var(--image-width--) - (20rpx * 3)) / 4);
            width: var(--image-size--) !important;
            height: var(--image-size--) !important;
            margin-right: 20rpx;
            margin-bottom: 20rpx;
            position: relative;
            .upload-item-image{
              width: 100% !important;
              height: 100% !important;
            }
            .del-button{
              position: absolute;
              top: 0;
              right: 0;
              color: #e5563d;
              height: 30rpx;
              line-height: 36rpx;
              width: 36rpx;
              font-size: 40rpx;
            }
          }
          .upload-item:nth-child(4n){
            margin-right: 0rpx;
          }
          .upload-button{
            width: calc(var(--image-size--) - 4rpx) !important;
            height: calc(var(--image-size--) - 4rpx) !important;
            border: 2rpx solid #b9b9b9;
            display: inline-flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
            align-items: center;
            i{
              font-size: 70rpx;
              color: #8e969e;
            }
          }
        }
      }
    }
  }
  .bottom-buttons{
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 160rpx;

    .bottom-buttons-btn{
      background: linear-gradient(90deg, #0184fa, #1db5b7);
      width: 70%;
      border-radius: 100rpx;
      height: 70rpx;
      line-height: 70rpx;
      color: lightcyan;
      text-align: center;
      font-size: 30rpx;
    }
  }
}
</style>