epmet-work-pc-chengyang/src/views/modules/visual/communityGovern/duoyuanfuwu/duoyuanDialog.vue

<template>
  <div class="m-pop">
    <div class="wrap">
      <cpt-card>
        <div class="title">
          <img src="@/assets/img/shuju/title-tip.png" />
          <span>详情</span>
        </div>

        <div class="btn-close" @click="handleClose">
          <img src="@/assets/img/shuju/people/close.png" />
        </div>
        <!-- <div class="list-title">需求内容</div> -->
        <div class="list-wr">
          <div class="list left-list" v-infinite-scroll="getServicelist" style="overflow:auto">
            <template v-if="servicelist.length > 0">
            <div class="left-item" :class="activeIndex == index ? 'active-item' : ''" v-for="(item, index) in servicelist" :key="index" @click="toDetail(index)">
              <div class="item-time">{{item.reportTime || '2022-05-18'}}</div>
              <div class="item-content">{{item.content || '本周加班本周加班本周加班本周加班本周加班本周加班'}}</div>
            </div>
            </template>
            <screen-nodata class="nodata" v-else></screen-nodata>
          </div>
          <div class="dashed-line"></div>
          <div class="list right-list">
            <template v-if="info.content">
              <!-- <div class="item-title">需求内容</div> -->
              <div class="item">
                <span class="item-field">所属网格：</span>
                <span>{{ info.gridName }}</span>
              </div>
              <div class="item">
                <span class="item-field">需求类型：</span>
                <span>{{ info.categoryName }}</span>
              </div>
              <!-- <div class="item">
                <span class="item-field">需求状态：</span>
                <span>{{ info.statusName }}</span>
              </div> -->
              <div class="item">
                <span class="item-field">上报类型：</span>
                <span>{{ info.reportTypeName }}</span>
              </div>
              <div class="item">
                <span class="item-field">上报人：</span>
                <span>{{ info.reportUserName }}</span>
              </div>
              <div class="item">
                <span class="item-field">上报人联系方式	：</span>
                <span>{{ info.reportUserMobile }}</span>
              </div>
              <div class="item">
                <span class="item-field">上报时间	：</span>
                <span>{{ info.reportTime }}</span>
              </div>
              <div class="item">
                <span class="item-field">需求人	：</span>
                <span>{{ info.demandUserName }}</span>
              </div>
              <div class="item">
                <span class="item-field">服务时间	：</span>
                <span>{{ info.wantServiceTime }}</span>
              </div>
              <div class="item">
                <span class="item-field">需求内容：</span>
                <div>{{ info.content }}</div>
              </div>
              <div class="item">
                <span class="item-field">服务组织	：</span>
                <span>{{ info.serviceShowName }}</span>
              </div>
              <div class="item">
                <span class="item-field">实际服务时间	：</span>
                <span>{{ info.serviceStartTime }} 至 {{ info.serviceEndTime }}</span>
              </div>
              <!-- <div class="item">
                <span class="item-field">完成情况	：</span>
                <span>{{ info.finishDesc }}</span>
              </div> -->
              <div class="item">
                <span class="item-field">评价	：</span>
                <span>
                  <el-rate :value="info.score" disabled></el-rate>
                </span>
              </div>
            </template>
            <screen-nodata class="nodata" v-else></screen-nodata>
          </div>
        </div>
      </cpt-card>
    </div>
  </div>
</template>

<script>
import ScreenNodata from "@/views/modules/visual/components/screen-nodata"
import cptCard from '@/views/modules/visual/cpts/card'
import { requestPost } from '@/js/dai/request'

export default {
  name: 'dialogInfo',
  props: {
    userId: {
      type: String,
      default: '',
    },
    gridName: {
      type: String,
      default: '',
    },
    orgId: {
      type: String,
      default: ''
    }
  },

  components: {
    cptCard,
    ScreenNodata
  },

  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      servicelist: [],
      info: {
        // content: '受到供应链等不可抗力的影响，大多数车企的销量都呈现环比下滑的趋势，不过像供应链断供这样的问题只是暂时的，在复工复产后，5、6月份的销量也许就会恢复到正常水平。长远来看新能源的发展还是非常可观的，其市场格局正在逐步稳定，新能源汽车的前景仍然大有可为。',
        // gridName: '第一网格',
        // categoryName: '便民服务',
        // statusName: '待处理',
        // reportTypeName: '自身上报',
        // reportUserName: '张三',
        // reportUserMobile: '13794049999',
        // reportTime: '2022-05-18 14:47:00',
        // wantServiceTime: '2022-05-18 14:47:00',
        // serviceShowName: '李四',
        // serviceStartTime: '2022-05-18 14:47:00',
        // serviceEndTime: '2022-05-18 14:47:00',
        // finishDesc: '已解决',
        // score: '3.5'
      },
      loadType: 'loading',
      activeIndex: 0
    }
  },
  created () {
    this.servicelist = []
  },
  methods: {
    // 获取组织需求列表
    async getServicelist () {
      if (this.loadType == 'none') {
        return
      }
      const url = '/heart/residemand/service-list'
      const params = {
        serverId: this.orgId,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        type: 'community_org', // 志愿者：volunteer；社区自组织：community_org；
      }
      const { data, code, msg } = await requestPost(url, params)
      if (code === 0) {
        if (this.pageNo == 1) {
          this.getDemandDetail(data.list[0].demandRecId)
        }
        this.pageNo++
        this.servicelist = this.servicelist.concat(data.list)
        this.loadType = this.servicelist.length < data.total ? 'loading' : 'none'
      } else {
        this.$message.error(msg)
      }
    },    
    // 获取需求详情
    async getDemandDetail (id) {
      this.info = {}
      const url = '/governance/userdemand/demandDetail'
      const params = {
        demandRecId: id, // 需求id
      }
      const { data, code, msg } = await requestPost(url, params)
      if (code === 0) {
        this.info = data
      } else {
        this.$message.error(msg)
      }
    },
    toDetail (index) {
      this.activeIndex = index
      this.getDemandDetail(this.servicelist[index].demandRecId)
    },
    handleClose() {
      this.$emit("close")
    },
  }
}
</script>

<style lang="scss" src="@/assets/scss/modules/visual/people.scss" scoped></style>
<style lang="scss" scoped>
@mixin scrollBar {
    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 8px;
        box-shadow: inset 0 0 5px rgba(#00023f, 0.2);
        background: linear-gradient(270deg, #0063fe, #0095ff);
    }
    &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        box-shadow: inset 0 0 5px rgba(#00023f, 0.2);
        border-radius: 8px;
        background: darken(#0c81fe, 20);
    }
}
.m-pop {
  .wrap {
    .list {
      display: block;
      width: calc(100% - 280px);
      max-height: 600px;
      overflow: auto;
      @include scrollBar;
      .item-title {
        padding: 0;
        font-size: 22px;
        font-family: PingFang SC;
        font-weight: 800;
        color: #ffffff;
        margin-bottom: 15px;
      }
      .item {
        display: flex;
        width: 100%;
        box-sizing: border-box;
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 16px;
        cursor: pointer;
        .item-field {
          // width: 100px;
          flex-shrink: 0;
        }
        .item-content {
          width: 100%;
          max-height: 420px;
          overflow-y: auto;
          @include scrollBar;
        }
        ::v-deep p {
          margin: 0;
          img {
            width: 100%;
            height: 100%;
          }
        }

        .item-imgs {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          
          img {
            display: block;
            width: 240px;
            height: 240px;
            margin-right: 10px;
          }
        }
      }
      .item-desc {
        font-size: 16px;
        margin-bottom: 10px;
        line-height: 24px;
      }
    }
  }
  .list-title {
      width: 100%;
      box-sizing: border-box;
      padding: 20px 0 10px 62px;
      font-size: 20px;
      cursor: pointer;
    }
}
.list-wr {
  display: flex;
  padding: 0 20px;
  .dashed-line {
    width: 1px;
    height: 600px;
    margin: 0 15px;
    border: 1px dashed #1257c9;
  }
  .left-list {
    width: 280px !important;
    height: 600px;
    overflow: auto;
    padding: 10px 0 !important;
    @include scrollBar;
    .active-item {
      border: 1px solid #0063FE !important;
      box-shadow: 0px 0px 10px #0063fe inset;
    }
    .left-item {
      display: flex;
      flex-direction: column;
      width: 100%;
      box-sizing: border-box;
      margin-top: 0;
      margin-bottom: 20px;
      font-size: 16px;
      cursor: pointer;
      color: #ffffff;
      padding: 5px;
      border: 1px solid transparent;
      .item-content {
        margin-top: 10px;
        width: 100%;    
        overflow: hidden;    
        text-overflow: ellipsis;    
        white-space: nowrap;
      }
    }
  }
  .right-list {
    padding: 0 15px !important;
  }
}
</style>