mall4pc-bbc/pages/write-comments.vue

<template>
  <div class="write-comments">
    <div class="content">
      <div class="crumbs">
        <nuxt-link to="/user-center" class="item-a">{{$t('comments.personalCenter')}}</nuxt-link>
        <span class="arrow">></span>
        <span class="item-span" v-if="isComm == 0">{{$t('comments.postComment')}}</span>
        <span class="item-span" v-if="isComm == 1">{{$t('comments.commentDetails')}}</span>
      </div>
      <div class="comments-con">
        <!-- 待评价 -->
        <div v-if="orderItemProds.length > 0">
        <div class="comments-box" v-for="(item,index) in orderItemProds" :key="index">
          <div class="goods-msg">
            <div class="img">
              <img v-if="item.pic" :src="item.pic" alt @error="handlePicError"/>
              <img v-else src="~/assets/img/def.png" alt />
            </div>
            <a
              class="name"
              href="javascript:void(0);"
              @click="toProdDetail(item.prodId)"
            >{{item.prodName}}</a>
            <div v-if="item.skuName" class="sku">{{$t('comments.specification')}}: {{item.skuName}}</div>
            <div class="order-number">
              {{$t('comments.orderNumber')}}：
              <a
                href="javascript:void(0);"
                @click="toOrderDetail(item.orderNumber)"
                class="number"
              >{{item.orderNumber}}</a>
            </div>
            <div class="deal-time">
              {{$t('comments.transactionTime')}}：
              <span class="number">{{item.payTime}}</span>
            </div>
          </div>
          <div class="operation">
            <div class="item" aria-disabled="true">
              <div class="tit">{{$t('comments.productRating')}}</div>
              <!-- 评分星级: -->
              <div class="star-box">
                <!-- <span class="text">商品评分</span> -->
                <span class="stars">
                  <i
                    :class="[item.score > 0?'star':'star-gray']"
                    @click="prodComm(1,item.orderItemId)"
                  ></i>
                  <i
                    :class="[item.score > 1?'star':'star-gray']"
                    @click="prodComm(2,item.orderItemId)"
                  ></i>
                  <i
                    :class="[item.score > 2?'star':'star-gray']"
                    @click="prodComm(3,item.orderItemId)"
                  ></i>
                  <i
                    :class="[item.score > 3?'star':'star-gray']"
                    @click="prodComm(4,item.orderItemId)"
                  ></i>
                  <i
                    :class="[item.score > 4?'star':'star-gray']"
                    @click="prodComm(5,item.orderItemId)"
                  ></i>
                </span>
              </div>
              <!-- <div class="star-box">
                <span class="text">店铺服务</span>
                <span class="stars">
                  <i :class="[storeCommNum > 0?'star':'star-gray']" @click="storeComm(1)"></i>
                  <i :class="[storeCommNum > 1?'star':'star-gray']" @click="storeComm(2)"></i>
                  <i :class="[storeCommNum > 2?'star':'star-gray']" @click="storeComm(3)"></i>
                  <i :class="[storeCommNum > 3?'star':'star-gray']" @click="storeComm(4)"></i>
                  <i :class="[storeCommNum > 4?'star':'star-gray']" @click="storeComm(5)"></i>
                </span>
              </div>
              <div class="star-box">
                <span class="text">物流服务</span>
                <span class="stars">
                  <i :class="[logCommNum > 0?'star':'star-gray']" @click="logComm(1)"></i>
                  <i :class="[logCommNum > 1?'star':'star-gray']" @click="logComm(2)"></i>
                  <i :class="[logCommNum > 2?'star':'star-gray']" @click="logComm(3)"></i>
                  <i :class="[logCommNum > 3?'star':'star-gray']" @click="logComm(4)"></i>
                  <i :class="[logCommNum > 4?'star':'star-gray']" @click="logComm(5)"></i>
                </span>
              </div>-->
            </div>
            <!-- <div class="item">
              <div class="tit">大众评价</div>
              <div class="comments">
                <div class="c-item active">产品质量很好</div>
                <div class="c-item">细节做工很棒</div>
                <div class="c-item">快递运输快</div>
                <div class="c-item">卖家服务很好</div>
                <div class="c-item">价格很便宜</div>
              </div>
            </div>-->
            <div class="item">
              <div class="tit">{{$t('comments.specificDescription')}}</div>
              <div class="des-box">
                <textarea
                  v-model="item.content"
                  class="des"
                  maxlength="150"
                  :placeholder="$t('comments.provideYourComments')"
                ></textarea>
                <div class="des-tip">{{$t('comments.enterUpTo150Characters')}}</div>
              </div>
            </div>
            <div class="item">
              <div class="tit">{{$t('comments.uploadImages')}}</div>
              <div class="img-box">
                <mul-pic-upload v-model="item.imgs" :limit="9" />
                <div class="img-des">（ {{$t('comments.uploadUpTo9Photos')}} ）</div>
              </div>
            </div>
          </div>
        </div>
        </div>
        <!-- /待评价 -->
        <!-- 已评价 -->
        <div class="comments-box" v-if="isComm == 1">
          <div class="goods-msg">
            <div class="img">
              <img v-if="orderItem.pic" :src="orderItem.pic" alt @error="handlePicError"/>
              <img v-else src="~/assets/img/def.png" alt />
            </div>
            <a
              class="name"
              href="javascript:void(0);"
              @click="toProdDetail(orderItem.prodId)"
            >{{orderItem.prodName}}</a>
            <div v-if="orderItem.skuName" class="sku">{{$t('comments.specification')}}: {{orderItem.skuName}}</div>
            <div class="order-number">
              {{$t('comments.orderNumber')}}：
              <a
                href="javascript:void(0);"
                @click="toOrderDetail(orderItem.orderNumber)"
                class="number"
              >{{orderItem.orderNumber}}</a>
            </div>
            <div class="deal-time">
              {{$t('comments.transactionTime')}}：
              <span class="number">{{orderItem.recTime}}</span>
            </div>
          </div>
          <div class="operation">
            <div class="item" aria-disabled="true">
              <div class="tit">{{$t('comments.productRating')}}</div>
              <!-- 评分星级: -->
              <div class="star-box">
                <span class="stars">
                  <i :class="[prodCommNum > 0?'star':'star-gray']" @click="prodComm(1)"></i>
                  <i :class="[prodCommNum > 1?'star':'star-gray']" @click="prodComm(2)"></i>
                  <i :class="[prodCommNum > 2?'star':'star-gray']" @click="prodComm(3)"></i>
                  <i :class="[prodCommNum > 3?'star':'star-gray']" @click="prodComm(4)"></i>
                  <i :class="[prodCommNum > 4?'star':'star-gray']" @click="prodComm(5)"></i>
                </span>
              </div>
            </div>
            <div class="item" style="margin-top: -15px;">
              <div class="tit">{{$t('comments.specificDescription')}}</div>
              <div class="des-content">
                <span>{{content}}</span>
              </div>
            </div>
            <div class="item">
              <div class="tit">{{$t('comments.commentsOnPictures')}}</div>
              <div class="img-box" v-if="pics.length">
                <div class="file-img" v-for="(item, index) in pics" :key="index">
                  <img :src="item" alt />
                </div>
              </div>
              <div class="des-content" style="color: #999;" v-if="!pics.length">{{$t('comments.none')}}</div>
            </div>
          </div>
        </div>
        <!-- /已评价 -->
        <div class="btn-box">
          <a href="javascript:void(0);" v-if="isComm == 0" @click="submitComm()" class="btn">{{$t('comments.postComment')}}</a>
          <div class="agree-box" v-if="isComm == 0" @click="checkAgree">
            <input
              type="checkbox"
              :class="['checkbox',isAnonymous?'checked': 'default']"
              class="checkbox default"
            />
            <span class="text">{{$t('comments.anonymousOrNot')}}</span>
          </div>
          <a href="javascript:void(0);" v-if="isComm == 1" @click="cancel()" class="btn back">{{$t('comments.backToList')}}</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MulPicUpload from '~/components/mul-pic-upload'
export default {
  data () {
    return {
      orderItemId: 0,
      orderItem: {},
      prodCommNum: 0,
      storeCommNum: 0,
      logCommNum: 0,
      pics: [],
      imgs: '',
      content: '',
      isAnonymous: false,
      isComm: this.$route.query.isComm,
      orderNumber: this.$route.query.orderNumber,  //订单号
      orderItemProds: [],  //订单商品信息
      submitCommCount: 0 // 已经提交了的评价数
    }
  },
  created () {
    this.orderItemId = this.$route.query.orderItemId || 0
    // this.getOrderItem(this.orderItemId)
  },
  mounted () {
    this.isComm = this.$route.query.isComm
    this.orderItemId = this.$route.query.orderItemId || 0
    // this.getUserInfo()
    if (this.isComm == 0) {
      this.getOrderItems(this.orderNumber)
    } else if (this.isComm == 1) {
      this.getOrderItem(this.orderItemId)
      this.getComm(this.orderItemId)
    } else {
      this.isComm = 0
    }
  },
  components: {
    MulPicUpload
  },
  methods: {
    /**
     * 加载默认图片
     */
    handlePicError(e){
       e.target.src=require('@/assets/img/def.png')
    },

    /**
     * 改变商品评分
     */
    prodComm (num, orderItemId) {
      if (this.isComm == 1) {
        return
      }
      this.orderItemProds.forEach(orderItem => {
        if (orderItemId == orderItem.orderItemId) {
          orderItem.score = num
        }
      })
    },
    /**
     * 改变店铺评分
     */
    storeComm (num) {
      if (this.isComm == 1) {
        return
      }
      this.storeCommNum = num
    },
    /**
     * 改变物流评分
     */
    logComm (num) {
      if (this.isComm == 1) {
        return
      }
      this.logCommNum = num
    },
    /**
    * 获取商品评价
    */
    getComm (orderItemId) {
      this.$axios.get('/p/prodComm/getProdComment', {
        params: {
          orderItemId: orderItemId
        }
      })
        .then(({ data }) => {
          this.content = data.content
          this.prodCommNum = data.score
          if (data.pics) {
            this.pics = data.pics.split(",")
          }
        })
    },
    /**
    * 获取多个商品详情
    */
    getOrderItems (orderNumber) {
      this.$axios.get('/p/myOrder/getOrderItems', {
        params: {
          orderNumber: orderNumber
        }
      }).then(({ data }) => {
        console.log(data);

        for (var i = 0; i < data.length; i++) {
          data[i].images = [];
          data[i].content = "";
          data[i].score = 5;
          data[i].evaluate = 0;
        }
        this.orderItemProds = data
      })
    },
    /**
    * 获取单个商品详情
    */
    getOrderItem (orderItemId) {
      this.$axios.get('/p/myOrder/getOrderItem', {
        params: {
          orderItemId: orderItemId
        }
      }).then(({ data }) => {
          console.log(data);

        this.orderItem = data
      })
    },
    /**
     * 提交评论
     */
    submitComm () {
      var allFill = true;
      for (var i = 0; i < this.orderItemProds.length; i++) {
        var cont = this.orderItemProds[i].content.trim();
        if (cont == "") {
          this.$message({
            message: this.$t('comments.evaluationCannotBeEmpty'),
            type: 'warning',
            duration: 1000,
          })
          allFill = false;
          break;
        }
      }
      if (allFill) {
        for (var i = 0; i < this.orderItemProds.length; i++) {
          let prodComm = {
            orderItemId: this.orderItemProds[i].orderItemId,
            score: this.orderItemProds[i].score,
            content: this.orderItemProds[i].content,
            isAnonymous: this.isAnonymous ? 1 : 0,
            evaluate: this.orderItemProds[i].score == 3 ? 1 : this.orderItemProds[i].score < 3 ? 2 : 0,
            prodId: this.orderItemProds.prodId,
            pics: this.orderItemProds[i].imgs,
          }

          this.$axios.post('/p/prodComm', prodComm)
            .then(({ data }) => {
              this.submitCommCount += 1
              if (this.submitCommCount == this.orderItemProds.length) {
                this.$message({
                  message: this.$t('comments.submitCommentSuccessfully'),
                  type: 'success',
                  duration: 1000,
                  onClose: () => {
                    this.$router.push({ path: '/user-center/uc-comments' })
                  }
                })
              }

            })
        }
      }
    },

    /**
     * 跳转订单详情
     */
    toOrderDetail (orderNumber) {
      this.$router.push({ path: '/order-detail', query: { orderNumber: orderNumber } })
    },

    /**
     * 跳转店铺页
     */
    // toOrderDetail (shopId) {
    //   this.$router.push({ path: '/shopIndex?pn=', query: { shopId: shopId } })
    // },

    /**
     * 是否匿名
     */
    checkAgree () {
      this.isAnonymous = !this.isAnonymous
    },
    /**
    * 跳转到商品详情页
    */
    toProdDetail (prodId) {
      this.$router.push({ path: '/detail/' + prodId })
    },

    /**
     * 返回
     */
    cancel () {
      this.$router.push({ path: '/user-center/uc-comments', query: { isComm: 1 } })
    },

  }
}
</script>

<style scoped src='~/assets/css/write-comments.css'></style>

<style>
.write-comments .el-upload--picture-card {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 0;
  width: 112px;
  height: 112px;
  line-height: 112px;
  margin: 0 0 15px 15px;
}

.write-comments .el-upload--picture-card:hover {
  border-color: #eee;
}

.write-comments .el-upload--picture-card i {
  margin-top: -35px;
  font-size: 20px;
  color: #999;
}

.write-comments .el-upload-list--picture-card .el-upload-list__item {
  border: 1px solid #eee;
  border-radius: 0;
  width: 112px;
  height: 112px;
  margin: 0 0 15px 15px;
}
.write-comments .el-icon-plus{
  width:20px;
  height:20px;
}
</style>