dvcp_v2_wxcp_app/library/apps/AppHelpEffect/helpDetail.vue

<template>
  <div class="helpDetail">
    <AiTopFixed>
      <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bar-width="150" @change="change"></u-tabs>
    </AiTopFixed>

    <div class="tab-content">
      <div class="tab-content__item" v-if="list.length">
        <div class="log-item" v-for="(item, index) in list" :key="index">
          <div class="log-item__wrapper">
            <div class="log-item__user">
              <div class="left">
                <div class="user">
                  <span>{{ item.createUserName.substr(item.createUserName.length - 2) }}</span>
                </div>
                <h2>{{ item.createUserName }}</h2>
              </div>
              <div class="right">
                <span>{{ item.createTime }}</span>
                <u-icon name="list" color="#999" size="28" @click="edit(item.id, '1')" style="margin-left:16px;" v-if="item.createUserId == user.id && currentTabs==0"></u-icon>
                <u-icon name="list" color="#999" size="28" @click="edit(item.id, '0')" style="margin-left:16px;" v-if="item.createUserId == user.id && item.operationDesc == '走访排查' && currentTabs==1"></u-icon>
              </div>
            </div>
            <p style="color: #999999;" v-if="currentTabs==0">帮扶措施：{{ $dict.getLabel('fpAssistanceMeasures',item.operationDesc) }}</p>
            <p style="color: #999999;" v-if="currentTabs==1">操作类型：{{ item.operationDesc }}</p>
            <p>{{ item.detail }}</p>
            <div class="imgs" v-if="item.files && item.files.length">
              <image :src="img.url" @click="prevImg(item.files, img.url)" v-for="(img, index) in item.files"
                     :key="index"/>
            </div>
          </div>
        </div>
      </div>
      <AiEmpty v-else style="padding-top: 50px;" description="暂无数据"></AiEmpty>
    </div>

    <AiFixedBtn v-if="currentTabs === 0">
      <div class="addBtn iconfont iconfont-iconfangda" @tap="toAddLog('1')" v-if="$permissions('app_apppreventionreturntopovertylog_edit')"></div>
    </AiFixedBtn>
    <!-- 走访日志0  帮扶措施1 -->
    <AiFixedBtn v-if="currentTabs === 1">
      <div class="addBtn iconfont iconfont-iconfangda" @tap="toAddLog('0')"></div>
    </AiFixedBtn>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'helpDetail',
  data() {
    return {
      tabList: [
        {
          name: '帮扶措施',
        },
        {
          name: '走访日志',
        }
      ],
      currentTabs: 0,
      list: [],
      id: '',
      current: 1,
    }
  },
  computed: {
    ...mapState(['user'])
  },
  onLoad(o) {
    this.id = o.id
    this.$dict.load('fpAssistanceMeasures')
  },
  methods: {
    change(index) {
      this.list = []
      this.current = 1
      this.currentTabs = index
      this.getList()
    },
    getList() {
      this.$http.post(`/app/apppreventionreturntopovertylog/list`,null,{
        params: {
          pid: this.id,
          size: 1000,
          current: this.current,
          type: this.currentTabs==0? '1':'0'
        }
      }).then(res => {
        if (res?.data) {
          this.list = this.current==1? res.data.records : [...this.list, ...res.data.records]
        }
      })
    },
    toAddLog(type) {
      uni.navigateTo({
        url: `./addLog?pid=${this.id}&type=${type}`
      })
    },

    prevImg(urls, img) {
      const imgs = urls.map(v => v.url)
      uni.previewImage({
        urls: imgs,
        current: img
      })
    },

    edit(id,type) {
      uni.showActionSheet({
        itemList: ['编辑', '删除'],
        success: res => {
          if (res.tapIndex === 0) {
            if (type == 0) {
              uni.navigateTo({
                url: `./addLog?pid=${this.id}&id=${id}&type=0`
              })
            } else if (type == 1) {
              uni.navigateTo({
                url: `./addLog?pid=${this.id}&id=${id}&type=1`
              })
            }
            
          } else if (res.tapIndex == 1) {
            this.$confirm('确定删除该数据？').then(() => {
              uni.showLoading()
              this.$http.post(`/app/apppreventionreturntopovertylog/delete?ids=${id}`).then(res => {
                if (res.code === 0) {
                  this.$u.toast('删除成功')
                  this.getList()
                }
                uni.hideLoading()
              })
            }).catch(() => {
            })
          }
        }
      })
    },
  },
  onShow() {
    document.title = '帮扶情况'
    if(this.id) {
      this.getList()
    }
    this.getList()
  },
  onReachBottom() {
    this.current ++
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.helpDetail {
  ::v-deep .AiTopFixed .content{
    padding: 0;
  }

  .log-item {
    padding: 0 0 0 32px;
    background: #fff;

    &:first-child {
      margin-top: 16px;
    }

    &:last-child {
      .log-item__wrapper {
        border: none !important;
      }
    }

    .log-item__wrapper {
      padding: 32px 32px 32px 0;
      border-bottom: 1px solid #E4E5E6;

      .log-item__user {
        display: flex;
        align-items: center;
        justify-content: space-between;

        & > div {
          display: flex;
          align-items: center;
        }

        .left {
          .user, image {
            width: 80px;
            height: 80px;
            line-height: 80px;
            margin-right: 16px;
            text-align: center;
            border-radius: 50%;
            background: #2266FF;

            span {
              color: #fff;
              font-size: 28px;
            }
          }

          h2 {
            color: #333;
            font-size: 32px;
          }
        }

        .right {
          image {
            width: 32px;
            height: 32px;
          }

          span {
            margin-right: 6px;
            color: #999999;
            font-size: 28px;
          }
        }
      }

      p {
        margin: 4px 0 16px 96px;
        color: #343D65;
        font-size: 28px;
      }

      .imgs {
        margin-left: 96px;

        image {
          width: 136px;
          height: 136px;
          margin-right: 8px;
          margin-bottom: 8px;
        }
      }
    }
  }


  .addBtn {
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    background: $uni-color-primary;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    font-size: 48px;
    color: #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
  }
}
</style>