From c5d2dfdf10f7b6f617ea1a3013c027b304abb985 Mon Sep 17 00:00:00 2001
From: jiangyy <jiang478938504@126.com>
Date: Wed, 8 Jun 2022 16:03:37 +0800
Subject: [PATCH] 11

---
 .../visual/communityGovern/duoyuanDialog.vue  | 335 ++++++++++++++++++
 1 file changed, 335 insertions(+)
 create mode 100644 src/views/modules/visual/communityGovern/duoyuanDialog.vue

diff --git a/src/views/modules/visual/communityGovern/duoyuanDialog.vue b/src/views/modules/visual/communityGovern/duoyuanDialog.vue
new file mode 100644
index 00000000..dfb584ae
--- /dev/null
+++ b/src/views/modules/visual/communityGovern/duoyuanDialog.vue
@@ -0,0 +1,335 @@
+<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 = '/heart/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>