dvcp_v2_wxcp_app/library/project/biaopin/AppGridReview/AppGridReview.vue

<!--suppress ALL -->
<template>
  <div class="AppGridReview">
    <AiTopFixed v-if="tabs.length">
      <u-search class="serach_content" placeholder="请输入内容" :show-action="false" v-model="keyword" @clear="clearSearch"
        @search="getListInit"></u-search>
      <div class="select-top">
        <div class="tab-item">
          <AiPagePicker type="gird" valueObj nodeKey="id" formType="2" @select="handleSelectGird" action="/app/appgirdmemberinfo/queryMyGirdList">
            <AiMore v-model="searchGrid.girdName" icon="arrow-down" placeholder="所属网格"/>
          </AiPagePicker>
        </div>
        <div class="tab-item" @click="showType = true">
          <AiMore v-model="typeText" icon="arrow-down" placeholder="类型"/>
        </div>
        <u-select v-model="showType" :list="typeList" value-name="dictValue" label-name="dictName" @confirm="confirmType"></u-select>
      </div>
    </AiTopFixed>
    <div class="user-list">
      <div class="item" v-for="(item, index) in datas" :key="index" @click="toDetail(item)">
        <div class="item-top">
          <div class="title">{{item.content}}</div>
          <div class="info">所属网格：{{item.girdName}}</div>
          <div class="info">类型：{{$dict.getLabel('wyGirdNewsType', item.type)}}</div>
          <div class="info">网格员姓名：{{item.name}}</div>
        </div>
        <div class="item-bottom">
          <div class="status" :class="`status${item.status}`">{{$dict.getLabel('auditStatus', item.status)}}</div>
          <div class="time">{{item.createTime}}</div>
        </div>
      </div>
      <AiEmpty v-if="!datas.length"></AiEmpty>
    </div>
    <AiFixedBtn>
      <div class="addBtn iconfont iconfont-iconfangda" @tap.stop="toAdd()"/>
    </AiFixedBtn>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  name: 'AppGridReview',
  appName: '网格动态',
  components: {},
  props: {},
  data() {
    return {
      datas: [],
      keyword: '',
      current: 1,
      size: 10,
      pages: 0,
      tabs: [{name: '全部'}, {name: '我发布的'}],
      tabIndex: 0,
      searchGrid: {},
      showType: false,
      type: '',
      typeText: '',
      typeList: []
    }
  },
  computed: {
    ...mapState(['user']),
  },
  onLoad() {
    this.searchGrid.girdId = this.user.girdId
    this.searchGrid.girdName = this.user.girdName
    this.$dict.load(['wyGirdNewsType', 'auditStatus']).then(() => {
      this.typeList = this.$dict.getDict('wyGirdNewsType')
      this.typeList.unshift({dictName: '全部', dictValue: ''})
      this.getList()
    })
    uni.$on('update', () => {
      this.current = 1
      this.getList()
    })
  },
  onShow() {
    document.title = '网格动态'
  },
  methods: {
    previewImage(images, img) {
      uni.previewImage({
        urls: images.map(v => v.url),
        current: img
      })
    },
    tabClick(index) {
      this.tabIndex = index
      this.getListInit()
    },

    getListInit() {
      this.current = 1
      this.getList()
    },

    getList() {
      this.$http.post('/app/appgirdnews/list', null, {
        params: {
          size: 20,
          current: this.current,
          girdId: this.searchGrid.id,
          content: this.keyword,
          createUserId: this.tabindex == 1 ? this.user.id : '',
          type: this.type
        },
      }).then((res) => {
        if (res.code == 0) {
          this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
          this.pages = res.data.pages
        }
      })
    },

    toAdd() {
      uni.navigateTo({url: './Add'})
    },

    toDetail(row) {
      uni.navigateTo({url: `./Detail?id=${row.id}`})
    },

    handleSelectGird(v) {
      console.log(v)
      this.searchGrid = v
      this.getListInit()
    },

    confirmType(e) {
      this.type = e[0].value
      this.typeText = e[0].label
      this.getListInit()
    },
  },
  onReachBottom() {
    this.current = this.current + 1
    this.getList()
  },
}
</script>

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

.tab-select {
  width: 100%;
  height: 96px;
  line-height: 96px;
  background: #3975C6;
  display: flex;

  .item {
    flex: 1;
    text-align: center;
    font-size: 28px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: #CDDCF0;
  }

  .active {
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    position: relative;
    color: #fff;

    span {
      width: 48px;
      height: 4px;
      background: #FFF;
      position: absolute;
      bottom: 14px;
      left: 50%;
      margin-left: -24px;
    }
  }
}

.AppGridReview {
  height: 100%;


  .select-top {
    background: #fff;
    display: flex;
    padding: 24px 0;
    border-top: 1px solid #eee;

    .tab-item {
      flex: 1;
      text-align: center;
      line-height: 48px;
      font-size: 26px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #666;

      img {
        width: 32px;
        height: 32px;
        margin-left: 8px;
        vertical-align: middle;
      }
    }

    .tab-item:nth-of-type(1) {
      border-right: 1px solid #eee;
    }
  }

  .u-search {
    background: #fff;
    padding: 20px 30px;
  }

  ::v-deep .u-search {
    margin-bottom: 0!important;
  }

  .user-list {
    padding: 24px 32px 0 32px;
    box-sizing: border-box;
    .item {
      width: 100%;
      background: #FFF;
      border-radius: 16px;
      margin-bottom: 24px;
      .item-top {
        padding: 24px;
        .title {
          line-height: 48px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 34px;
          color: #333;
          margin-bottom: 12px;
          word-break: break-all;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
        .info {
          line-height: 48px;
          font-family: PingFangSC-Regular;
          font-size: 26px;
          color: #666;
        }
      }
      .item-bottom {
        padding: 18px 24px;
        border-top: 1px solid #E4E5E6;
        display: flex;
        justify-content: space-between;
        .time {
          line-height: 48px;
          font-family: PingFangSC-Regular;
          font-size: 24px;
          color: #999;
        }
        .status0{
          color: #FF883C;
        }
        .status1{
          color: #2EA222;
        }
        .status2{
          color: #F46;
        }
      }
    }
  }

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

  ::v-deep uni-video {
    width: 100%;
  }
}
</style>