hospital-accompaniment-wechat/pages/mine/evaluate.vue

<template>
  <view class="container">
    <u-navbar title="评价" leftIconColor="#ffffff" titleStyle="color:#fff" :autoBack="true" placeholder></u-navbar>
    <view class="box flex-center">
      <image :src="details.productCover" class="img" mode="" />
      <view class="box_text">{{details.productTitle}}</view>
    </view>
    <view class="box">
      <view class="item">
        <view class="item_t">
          <view class="item_t_lab">评分</view>
          <view>
            <star :value="details.commentScore" @change="starChange" />
          </view>
        </view>
        <view class="item_b">
          <u-textarea v-model="details.comment" placeholder="说点什么吧..." placeholderStyle="color:#cccccc;font-size:28rpx" maxlength="500" count="500"></u-textarea>
        </view>
      </view>

      <view class="item">
        <view class="item_t">
          <view class="item_t_lab">产品图片 {{details.commentImagesCopy.length}}<text>/3</text> </view>
        </view>
        <view class="item_b" style="padding-left:0;">
          <u-upload :fileList="details.commentImagesCopy" file="image" :multiple="false" :maxCount="3" @afterRead="afterRead" @delete="deletePic" name="upload1" width="75" height="75">
            <view class="upload">
              <image src="https://guess-shop.oss-cn-beijing.aliyuncs.com/static/online/img45.png" mode="" />
            </view>
          </u-upload>
        </view>
      </view>
    </view>
    <view class="btnBox">
      <view class="red" @click="submit()">发布</view>
    </view>
  </view>
</template>

<script>
import { shoporderComment } from "@/api/giftPackageCenter"
import { storage } from "@/utils/tools.js"
import star from "@/components/star/index.vue"
export default {
  components: {
    star
  },
  data () {
    return {
      value: "",
      fileList: [],
      details: {
        orderId: undefined,
        productTitle: undefined,
        productCover: undefined,
        productId: undefined,
        comment: '',
        commentScore: 0,
        commentImagesCopy: []
      }
    }
  },
  onLoad (options) {
    if (options.orderId && options.productTitle && options.productCover && options.productId) {
      console.log(options)
      this.details.orderId = options.orderId;
      this.details.productTitle = options.productTitle;
      this.details.productCover = options.productCover;
      this.details.productId = options.productId;
    }
  },
  methods: {
    afterRead (e) {
      console.log(e)
      uni.showLoading({
        title: '上传中',
      });
      uni.uploadFile({
        url: uni.$u.http.config.baseURL + '/common/upload',
        filePath: e.file.url,
        name: 'file',
        header: {
          apiToken: storage.get('apiToken')
        },
        success: (res) => {
          uni.hideLoading();
          let data = JSON.parse(res.data);
          if (data.code != 200) return
          this.details.commentImagesCopy.push(data.data)
          uni.showToast({
            title: '上传成功',
            icon: 'success',
            duration: 1000
          })
        },
        fail: (err) => {
          console.log(err);
          uni.hideLoading();
          uni.showModal({
            content: err.errMsg,
            showCancel: false
          });
        }
      });
    },
    deletePic (e) {
      this.details.commentImagesCopy.splice(e.index, 1);
    },
    starChange (e) {
      this.details.commentScore = e;
    },
    submit () {
      if (!this.details.commentScore) {
        uni.$u.toast('请选择评分');
        return
      } else if (!this.details.comment) {
        uni.$u.toast('请输入评分内容');
        return
      }
      this.details.commentImages = this.details.commentImagesCopy.map((v) => {
        return v.url;
      });
      console.log(this.details)
      shoporderComment(this.details).then(res => {
        uni.showToast({
          title: '评价成功！',
          duration: 2000
        });
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      })
    }
  },
}
</script>

<style lang='scss' scoped>
::v-deep .u-navbar__content,
::v-deep .u-status-bar {
  background-color: #c90700 !important;
}
.container {
  background: #f8f8f8;
  min-height: 100vh;
  padding: 30rpx;
  padding-bottom: 150rpx;
  .box {
    background: #ffffff;
    border-radius: 30rpx;
    padding: 37rpx 20rpx;
    margin-bottom: 30rpx;
    > image {
      width: 144rpx;
      height: 144rpx;
      border-radius: 12rpx;
      margin-right: 24rpx;
      flex-shrink: 0;
    }
    > .box_text {
      font-size: 28rpx;
      color: #1a1a1a;
      line-height: 42rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .item {
      width: 100%;
      margin-bottom: 40rpx;
      .item_t {
        display: flex;
        .item_t_lab {
          font-size: 28rpx;
          color: #1a1a1a;
          font-family: FZCuYuan-M03;
          margin-right: 25rpx;
          text {
            font-size: 22rpx;
            color: #808080;
          }
        }
      }
      .item_b {
        padding-left: 75rpx;
        margin-top: 15rpx;
        ::v-deep .u-textarea {
          background: #f7f7f7;
          margin-top: 10rpx;
        }
        ::v-deep .u-textarea__count {
          background: #f7f7f7 !important;
        }
        .upload {
          width: 146rpx;
          height: 146rpx;
          border-radius: 14rpx;
          text-align: center;
          line-height: 155rpx;
          border: 1rpx dashed #cbcbcb;
          background: #fcfcfc;
          text {
            color: #cbcbcb;
          }
          image {
            width: 51rpx;
            height: 36rpx;
          }
        }
      }
    }
  }
}
.btnBox {
  width: 100%;
  background: #ffffff;
  padding: 45rpx 50rpx 33rpx;
  box-sizing: border-box;
  border-top: 1rpx solid #e7e7e7;
  position: fixed;
  left: 0;
  bottom: 0;
  > view {
    height: 80rpx;
    background: #fb0b03;
    border-radius: 40rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 32rpx;
    color: #ffffff;
  }
}
.flex-center {
  display: flex;
  align-items: center;
}
::v-deep .placeholderClass {
  font-family: FZZhunYuan-M02S;
  font-size: 28rpx;
  color: #cccccc;
}
</style>