crm-mobile/pages_oa/legwork/component/legworkItem.vue

<template>
  <view class="legwork-item">
    <view class="top">
      <wk-avatar
        :name="itemData.realname"
        :avatar="itemData.userImg"
        class="avatar" />
      <view class="info">
        <view class="user">
          <view class="text">
            {{ itemData.realname }}
          </view>
          <text class="time">
            {{ formatTime(itemData.createTime) }}
          </text>
        </view>
        <view class="address">
          {{ itemData.content.address }}
        </view>
      </view>
    </view>

    <view class="content">
      <view>{{ itemData.content.content }}</view>
      <wk-image-content
        v-if="itemData.img && itemData.img.length > 0"
        :list="itemData.img" />
    </view>

    <view class="customer">
      <view class="box" @click="handleToCustomer">
        <view>拜访客户：</view>
        <text class="text">
          {{ itemData.activityTypeName }}
        </text>
      </view>
    </view>

    <view
      v-if="deleteBtnAuth"
      class="more"
      @click.stop="handleDeleteAction">
      <image :src="$static('images/icon/dot.png')" alt="" class="dot" />
      <view
        v-if="showDeleteBtn"
        class="delete-box"
        @click.stop="handleDelete">
        <text class="wk wk-delete" />
        <text>删除</text>
      </view>
    </view>

    <view
      v-if="showDeleteBtn"
      class="mask"
      @click.stop="handleDeleteAction" />
  </view>
</template>

<script>
  import moment from 'moment'

  export default {
    name: 'LegworkItem',
    props: {
      itemData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        showDeleteBtn: false
      }
    },
    computed: {
      deleteBtnAuth() {
        return this.$auth('crm.outwork.delete')
      }
    },
    methods: {
      formatTime(time) {
        return moment(time).format('MM-DD HH:mm')
      },

      handleDeleteAction() {
        this.showDeleteBtn = !this.showDeleteBtn
      },

      handleDelete() {
        this.showDeleteBtn = false
        this.$emit('delete', this.itemData.activityId)
      },

      handleToCustomer() {
        this.$Router.navigateTo({
          url: '/pages_crm/customer/detail',
          query: {
            id: this.itemData.activityId
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
.legwork-item {
  position: relative;
  background-color: white;
  border-bottom: 1rpx solid $border-color;
  padding: 26rpx 32rpx 32rpx;

  .top {
    width: 100%;
    @include left;
    .avatar {
      width: 80rpx;
      height: 80rpx;
      margin-right: 15rpx;
    }
    .info {
      flex: 1;
      overflow-x: hidden;
      overflow-y: auto;
      .user {
        font-size: 30rpx;
        @include left;
        .time {
          font-size: 24rpx;
          color: $light;
          margin-left: 15rpx;
        }
      }
      .address {
        flex: 1;
        font-size: 24rpx;
        color: $theme-color;
        margin-top: 5rpx;
        @include ellipsis;
      }
    }
  }
  .content {
    font-size: 28rpx;
    white-space: pre-wrap;
    word-wrap: break-word;
    padding: 26rpx 0;
  }
  .customer {
    width: 100%;
    overflow: hidden;
    display: flex;
    .box {
      font-size: $wk-font-mini;
      overflow: hidden;
      @include left;
      .icon {
        width: 28rpx;
        height: 28rpx;
        margin-right: 10rpx;
      }
      .text {
        flex: 1;
        color: $theme-color;
        @include ellipsis;
      }
    }
  }

  .more {
    position: absolute;
    top: 32rpx;
    right: 32rpx;
    width: 36rpx;
    overflow: unset;
    .dot {
      width: 36rpx;
      height: 36rpx;
      display: block;
    }
    .delete-box {
      position: absolute;
      top: 46rpx;
      left: -150rpx;
      z-index: 1000;
      width: 188rpx;
      font-size: 26rpx;
      color: #F95A5A;
      background-color: white;
      box-shadow: 0 0 16rpx 0 rgba(102,102,102,0.2);
      border-radius: 6rpx;
      padding: 10rpx 0;

      @include center;
      .wk {
        margin-right: 30rpx;
        font-size: 30rpx;
      }
    }
  }

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 500;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0);
  }
}
</style>