products/uni-shop/layout/layout-commet/main.vue

<template>
  <view class="layout-comment-container row"
    :class="['layout-comment-'+size]"
        @click="triggerGoDetail"
  >
    <v-image :src="vItem.user_avatar" class="comment-avatar overflow"></v-image>
    <view class="flex-all-1 layout-comment-content">
      <view class="row">
        <view class="flex-all-1">
          <view v-if="skeleton" class="layout-comment-skeleton layout-comment-skeleton-title"></view>
          <view v-else class="line-1">{{vItem.user_nickname}}</view>

          <view v-if="skeleton" class="layout-comment-skeleton layout-comment-skeleton-time comment-time"></view>
          <view v-else class="line-1 comment-time">{{item.createtime}}</view>
        </view>
        <uni-rate v-if="vItem.rate" :disabled="true" :value="vItem.rate || 0"></uni-rate>
      </view>

      <view v-if="skeleton" class="layout-comment-skeleton layout-comment-skeleton-context layout-comment-context"></view>
      <view v-else class="layout-comment-context">{{vItem.comment}}</view>
      <view v-if="image" class="layout-comment-images row wrap aCenter">
        <view class="layout-comment-image overflow"
          v-for="(cItem,cIndex) in skeleton?3:vItem.images"
              :key="cIndex"
        >
          <v-image :src="skeleton?'':cItem" class="screen_all"></v-image>
        </view>
      </view>
      <view v-if="control" class="layout-comment-control-footer row jEnd">
        <view v-for="(cItem,cIndex) in controlData" :key="cIndex"
              class="row aCenter layout-comment-control-item"
              @click.stop="triggerControl(cItem)"
        >
          <text>{{(vItem[cItem.key] <= 0 ? 0:vItem[cItem.key]) || 0}}</text>
          <image class="layout-control-icon" :src="'/static/images/'+(cItem.active && vItem[cItem.active]?cItem.activeIcon:cItem.icon)+'.png'"></image>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import props from './props';
import uniRate from '@/components/uni-rate/uni-rate';
import vImage from '@/components/v-image/main.vue';
import controlData from './data/control';
import login from '@/mixins/login';
import Throttle from "../../utils/tool/throttle";
export default {
  name: "layout-comment",
  mixins:[login],
  data(){
    return {
      controlData,
      vItem:{}
    }
  },
  props,

  watch:{
    item:function (){
      this.setVItem(this.item);
    }
  },

  methods:{

    triggerGoDetail(){
      if (this.goDetail) {
        return this.$router.navigateTo({
          name:'comment-detail',
          params:{
            id: this.item.id
          },
          memoryParams:{
            item:this.item
          }
        });
      }
    },

    setVItem(item){
      if (item) {

        item = JSON.parse(JSON.stringify(item));

        if (item.is_tutop && item.tutop<=0) {
          item.tutop = 1;
        }
        console.log(item);

        this.vItem = item;
      }
    },

    triggerControl(cItem){
      return this[cItem.trigger] && this[cItem.trigger]();
    },

    give(){
      this.routerLogin(()=>{

        if (this.vItem.is_storage_tutop === undefined) {
          this.vItem.is_storage_tutop = this.vItem.is_tutop;
        }

        this.$set(this.vItem,'is_tutop',this.vItem.is_tutop === 1 ? 0 :1);

        let useValue = this.vItem.tutop <= 0 ? 0 : this.vItem.tutop;
        let value = useValue + (this.vItem.is_tutop=== 1 ? 1 : -1);
        this.$set(this.vItem,'tutop',value < 0 ? 0 :value);

        this.triggerGive();
      });
    },

    triggerGive(){
      if(this.vItem.is_storage_tutop !== this.vItem.is_tutop){
        this.vItem.is_storage_tutop = this.vItem.is_tutop;
        return this.$request({
          url:'product/addCommondTutop',
          data:{
            commond_id:this.vItem.id
          },
          token:true
        });
      }
    }
  },

  computed:{
    skeleton(){
      return this.item.id === undefined;
    }
  },

  created(){
    this.setVItem(this.item);
    this.givThrottle = new Throttle({
      first:false,
      call:this,
      delay:300,
      handle: this.triggerGive
    });
    this.triggerGive = this.givThrottle.supper;
  },

  beforeDestroy(){
    this.givThrottle && this.givThrottle.destroy();
  },

  components:{
    uniRate,
    vImage
  }
}
</script>

<style scoped lang="scss" src="./style.scss"></style>