xq-csg-weapp_uni-ts/src/packages/people/pages/masses-appraise/masses-appraise.vue

<template>
  <view>
    <custom-nav-bar position="fixed" color="black" left-text="评价" left-arrow />

    <view class="appraise flex flex-v-center">
      <view class="mr-25">满意度：</view>
      <block v-for="item in 5" :key="item">
        <image src="/static/images/void-icon2.png"  v-if="form.appraiseStar >= item" @click="headleChange(item)"  style="width: 36rpx;height: 36rpx;margin-right: 10rpx;" mode=""></image>
        <image src="/static/images/rate-icon.png" v-else @click="headleChange(item)"  style="width: 36rpx;height: 36rpx;margin-right: 10rpx;" mode=""></image>
      </block>
    </view>
    <view class="division"></view>
    <!-- 描述 -->
    <view class="describe">
      <view>描述</view>
      <textarea class="textarea" placeholder="请输入" @input="headleInput" maxlength="300" :value="form.title"
        data-name="appraiseContent" focus auto-height></textarea>
      <view class="form-image">
        <van-uploader :after-read="afterRead" v-model="fileList" :deletable="true" max-count="9"
          :delete="imageDelete">
          <image class="camera" src="/static/images/icon9.png"></image>
        </van-uploader>
      </view>
    </view>

    <view class="van-button">
      <van-button color="#fe3b53" v-if="form.appraiseContent === '' && form.appraiseStar === 0" block>
        提交评价
      </van-button>
      <van-button color="#fe3b53" @tap.native="submit" v-if="form.appraiseContent !== '' || form.appraiseStar !== 0" block>
        提交评价
      </van-button>
    </view>
  </view>
</template>

<script>
  // const app = getApp();
  // const { peopleApi } = app.globalData.api;
  import * as peopleApi from '@/api/peopleApi';
  import * as publicApi from '@/api/publicApi';
  export default {
    components: {},
    data() {
      return {
        // 上传图片所需
        appealEnclosure: [],

        fileList: [],
        options: null,

        form: {
          appraiseContent: '',
          appraiseStar: 0,
          title: ''
        },

        name: ''
      };
    },
    onLoad(options) {
     this.options = options
    },
    methods: {
      headleChange(event) {
        this.form.appraiseStar = event
      },

      // 上传图片
      async afterRead(event) {
        const {
          file
        } = event;
        const res = await getApp().globalData.upload({
          file
        });
        if (res.code !== 0) {
          uni.showToast({
            title: '上传图片失败',
            icon: 'none'
          });
          return false;
        }
        const url = res.data;
        // this.fileList.push({url});
        this.appealEnclosure.push(url);
      },

      // 清楚对应的image图片
      imageDelete(event) {
        const {
          index
        } = event.detail;
        this.fileList.splice(index, 1);
        this.appealEnclosure.splice(index,1)
      },

      headleInput(event) {
        const {
          value
        } = event.detail;
        const {
          name
        } = event.currentTarget.dataset;
        this.form[name] = value;
        this[name] = this[name]
      },

      // 提交
      async submit() {
        const {
          appraiseContent,
          appraiseStar
        } = this.form;
        if (appraiseStar === 0 || appraiseContent === '') {
          let toastTitle = '';
          if (appraiseStar === 0) {
            toastTitle = '请输入满意度不能为空';
          } else if (appraiseContent === '') {
            toastTitle = '请输入描述';
          } else {
            toastTitle = '带*属于必填项';
          }
          uni.showToast({
            title: toastTitle,
            icon: 'none'
          });
          return false;
        }
        let params = {
          id: this.options.id,
          appraiseContent: appraiseContent,
          appraiseStar: appraiseStar,
          appraiseImage: this.appealEnclosure
        };
        console.log(params);
        const res = await peopleApi.CrateAppraiseApi(params);
        if (res.code !== 0) {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
          return;
        }
        uni.showToast({
          title: '评论成功',
          icon: 'none'
        });
        uni.redirectTo({
          url: '/packages/people/pages/masses/masses'
        });
      }
    }
  };
</script>
<style lang="less">
  .appraise {
    padding: 60rpx 40rpx;
    font-size: 32rpx;
    color: #333333;
    font-weight: 400;
    line-height: 32rpx;
  }

  .mr-25 {
    margin-right: 25rpx;
  }

  .division {
    height: 20rpx;
    background: #f9f9f9;
  }

  .describe {
    background: #ffffff;
    border-radius: 16px;
    padding: 40rpx 40rpx 150rpx 40rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;

    .textarea {
      padding: 24rpx 0;
      padding-top: 20rpx;
    }

    .form-image {
      margin: 20rpx 0rpx 50rpx 0;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    .form-image>view {
      width: 31.3%;
      position: relative;
      margin-right: 13.5rpx;
    }

    .form-image>view>image:nth-child(1) {
      width: 100%;
      height: 200rpx;
      border-radius: 10rpx;
    }

    .form-image>view>image:nth-child(2) {
      position: absolute;
      top: -0rpx;
      right: 0rpx;
      width: 40rpx;
      height: 40rpx;
    }

    .camera {
      width: 160rpx;
      height: 160rpx;
      border-radius: 8rpx;
    }
  }

  .van-button {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 99;
    background-color: #fff;
  }
</style>