'交接版本'

王恒

2025-09-26 28ab9da809aa7c5d42e1871af5fd10c2de09ac66

 qiye/complaint/details.vue

@@ -1,432 +1,469 @@
<template>
   <view>
      <u-navbar placeholder bgColor="#1171E0FF" leftIconColor="white" :autoBack="true">
         <template slot="center">
            <view style="color: white;">投诉记录</view>
         </template>
      </u-navbar>
      <view class="donw-box"></view>
      <view class="page-main">
         <view class="title">
            <template v-if="msg.orderStatus>2&&msg.isEva==0">已执法待评价</template>
            <template v-if="msg.orderStatus>2&&msg.isEva==1">已评价</template>
            <template v-if="msg.orderStatus==2">待执法</template>
         </view>
         <view class="wbox">
            <view class="item">
               <view class="k">
                  执法类型
               </view>
               <view class="v">
                  {{dictLabel}}
               </view>
            </view>
            <view class="item">
               <view class="k">
                  执法人
               </view>
               <view class="v">
                  {{details.executeUser}}
               </view>
            </view>
            <view class="item">
               <view class="k">
                  执法部门
               </view>
               <view class="v">
                  {{details.executeDeptName}}
               </view>
            </view>
            <view class="item">
               <view class="k">
                  企业
               </view>
               <view class="v">
                  {{details.companyName}}
               </view>
            </view>
         </view>
         <view style="height: 20rpx;"></view>
         <template v-if="orderId">
            <view class="wbox">
               <view class="item">
                  <view class="k">
                     执法主题
                  </view>
                  <view class="v">
                     {{details.enforceReason}}
                  </view>
               </view>
               <view class="item">
                  <view class="k">
                     执法过程
                  </view>
               </view>
               <view class="imgbox">
                  <img :src="baseUrl+item" v-for="(item,index) in orderDetailsMsg.regionImgs" :key="index" class="more" @click="imgclick(item)" alt="" />
						
               </view>
               <view class="item">
                  <view class="k">
                     执法结果
                  </view>
                  <view class="v" style="color: #EB4746;">
                     <!-- {{details.regionStatus == 0? "正常" : "停业整顿" }} -->
                     {{orderDetailsMsg.regionReason}}
                  </view>
               </view>
               <view class="item">
                  <view class="k">
                     执法时间
                  </view>
                  <view class="v">
                     {{details.executeTime}}
                  </view>
               </view>
            </view>
            <view style="height: 20rpx;"></view>
         </template>
         <view class="wbox2">
            <view class="t">
               投诉记录
            </view>
            <view class="jilu" :class="{start: item.nodeName == '发起投诉' || item.nodeName == '已办结', handler: item.nodeName == '处理中', nonde: index == nodeList.length - 1}" v-for="(item,index) in nodeList" :key="index">
               <image src="/static/policy/icon.png" class="img" alt="" mode="widthFix" v-if="item.nodeName == '发起投诉'"/>
               <image src="/static/guocheng.png" class="img" alt=""  mode="widthFix"  v-if="item.nodeName == '处理中'"/>
               <image src="/static/policy/refject.png" class="img"  mode="widthFix" alt="" v-if="item.nodeName == '已驳回'"/>
               <image src="/static/policy/icon.png" class="img" alt=""  mode="widthFix" v-if="item.nodeName == '已办结'"/>
               <view class="font" style="width: calc(100% - 50rpx);">
                  <view class="h" >
                     <view class="s" >
                        {{item.nodeName}}
                     </view>
                     <view class="time">
                        {{item.nodeTime}}
                     </view>
                  </view>
                  <view class="b">
                     <view class="name" style="margin-bottom: 18rpx;">
                        {{item.nodeUser}}
                     </view>
                     <view class="p" style="margin-bottom: 18rpx;">
                        <span>申诉主题：</span>
                        {{dictLabel1}}
                     </view>
                     <view class="p" style="margin-bottom: 18rpx;">
                        <span>申诉内容：</span>
                        {{details.complaintReason}}
                     </view>
                     <view class="p"  v-if="item.nodeName == '已驳回'">
                        <span>驳回原因：</span>
                        {{item.nodeReason}}
<template>

  <view>

    <u-navbar placeholder bgColor="#1171E0FF" leftIconColor="white" :autoBack="true">

      <template slot="center">

        <view style="color: white;">投诉记录</view>

      </template>

    </u-navbar>

    <view class="donw-box"></view>

    <view class="page-main">

      <view class="title">

        <template v-if="msg.orderStatus>2&&msg.isEva==0">已执法待评价</template>

        <template v-if="msg.orderStatus>2&&msg.isEva==1">已评价</template>

        <template v-if="msg.orderStatus==2">待执法</template>

      </view>

      <view class="wbox">

        <view class="item" v-if="dictLabel">

          <view class="k">

            检查方式

          </view>

          <view class="v">

            {{dictLabel}}

          </view>

        </view>

        <view class="item" v-if="details.executeUser">

          <view class="k">

            执法人

          </view>

          <view class="v">

            {{details.executeUser}}

          </view>

        </view>

        <view class="item">

          <view class="k">

            执法部门

          </view>

          <view class="v">

            {{details.executeDeptName}}

          </view>

        </view>

        <view class="item">

          <view class="k">

            企业

          </view>

          <view class="v">

            {{details.companyName}}

          </view>

        </view>

      </view>

      <view style="height: 20rpx;"></view>

      <template v-if="orderId">

        <view class="wbox">

          <view class="item">

            <view class="k">

              执法主题

            </view>

            <view class="v">

              {{details.enforceReason}}

            </view>

          </view>

          <view class="item">

            <view class="k">

              执法过程

            </view>

          </view>

          <view class="imgbox">

            <img :src="baseUrl+item" v-for="(item,index) in orderDetailsMsg.regionImgs" :key="index" class="more"

              @click="imgclick(item)" alt="" />



          </view>

          <view class="item">

            <view class="k">

              执法结果

            </view>

            <view class="v" style="color: #EB4746;">

              <!-- {{details.regionStatus == 0? "正常" : "停业整顿" }} -->

              {{orderDetailsMsg.regionReason}}

            </view>

          </view>

          <view class="item">

            <view class="k">

              执法时间

            </view>

            <view class="v">

              {{details.executeTime}}

            </view>

          </view>

        </view>

        <view style="height: 20rpx;"></view>

      </template>

      <view class="wbox2">

        <view class="t">

          投诉记录

        </view>

        <view class="jilu"

          :class="{start: item.nodeName == '发起投诉' || item.nodeName == '已办结', handler: item.nodeName == '处理中', nonde: index == nodeList.length - 1}"

          v-for="(item,index) in nodeList" :key="index">

          <image src="/static/policy/icon.png" class="img" alt="" mode="widthFix"

            v-if="item.nodeName == '发起投诉' || item.nodeName == '发起诉求'" />

          <image src="/static/guocheng.png" class="img" alt="" mode="widthFix" v-if="item.nodeName == '处理中'" />

          <image src="/static/policy/refject.png" class="img" mode="widthFix" alt="" v-if="item.nodeName == '已驳回'" />

          <image src="/static/policy/icon.png" class="img" alt="" mode="widthFix" v-if="item.nodeName == '已办结'" />

          <view class="font" style="width: calc(100% - 50rpx);">

            <view class="h">

              <view class="s">

                {{item.nodeName}}

              </view>

              <view class="time">

                {{item.nodeTime}}

              </view>

            </view>

            <view class="b">

              <view class="name" style="margin-bottom: 18rpx;">

                {{item.nodeUser}}

              </view>

              <view class="p" style="margin-bottom: 18rpx;">

                <span>申诉主题：</span>

                {{dictLabel1}}

              </view>

              <view class="p" style="margin-bottom: 18rpx;">

                <span>申诉内容：</span>

                {{details.complaintReason}}

              </view>

              <view class="p" v-if="item.nodeName == '已驳回'">

                <span>驳回原因：</span>

                {{item.nodeReason}}

              </view>

              <view class="p" v-if="item.nodeName == '已办结' && item.nodeReason">

                <span>办结结果：</span>

                {{item.nodeReason}}

              </view>

            </view>

          </view>

        </view>

        <!-- <view class="jilu">

               <image src="/static/policy/refject.png" class="img" alt="" />

               <view class="font">

                  <view class="h">

                     <view class="s">

                        {{item.nodeName}}

                     </view>

                     <view class="p"  v-if="item.nodeName == '已办结' && item.nodeReason">

                        <span>办结结果：</span>

                        {{item.nodeReason}}

                     </view>
                  </view>
               </view>
            </view>
            <!-- <view class="jilu">
               <image src="/static/policy/refject.png" class="img" alt="" />
               <view class="font">
                  <view class="h">
                     <view class="s">
                        {{item.nodeName}}
                     </view>
                     <view class="time">
                        {{item.nodeTime}}
                     </view>
                  </view>
                  <view class="b">
                     <view class="name">
                        {{details.companyUser}}
                     </view>
                     <view class="p">
                        <span>申诉主题：</span>
                        {{dictLabel1}}
                     </view>
                     <view class="p">
                        <span>申诉内容：</span>
                        {{details.complaintReason}}
                     </view>
                  </view>
               </view>
            </view>
            <view class="jilu">
               <image src="/static/guocheng.png" class="img" alt=""  />
               <view class="font">
                  <view class="h">
                     <view class="s">
                        处理中
                     </view>
                     <view class="time">
                        2024-06-07 12:14
                     </view>
                  </view>
                  <view class="b">
                     <view class="name">
                        {{details.companyUser}}
                     </view>
                     <view class="p">
                        <span>申诉主题：</span>
                        {{dictLabel1}}
                     </view>
                     <view class="p">
                        <span>申诉内容：</span>
                        {{details.complaintReason}}
                     </view>
                  </view>
               </view>
            </view>
          -->
         </view>
      </view>
		
   </view>
</template>

<script>
   import { complaintDetails, orderNodeList, orderComplaintNodeList } from '@/api/qiye.js'
   import { orderDetails } from '@/api/policy.js'
   import { config } from '@/common/config.js'
   import { getDicts } from '@/api/data.js'
   export default {
      data() {
         return {
            details: {},
            orderId: "",
            orderDetailsMsg: {},
            baseUrl: config.baseUrl,
            dictLabel: "",
            dictLabel1: "",
            nodeList: []
         }
      },
      onLoad(options) {
         this.complaint(options.id)
         if(options.orderId) {
            this.orderId = options.orderId
            this.orderDetails()
         } else {
            this.orderNodeList(options.id)
         }
      },
      methods: {
         orderNodeList(id) {
            orderNodeList({id}).then(val => {
               // console.log(val)
               this.nodeList = val.data.data
            })
         },
         // 获取投诉类型
         getComtype() {
            getDicts('complaint_type').then(val => {
               console.log(val)
               this.dictLabel1 = val.data.data.find(item => item.dictCode == this.details.complaintType).dictLabel
					
            })
         },
         enforceType() {
            getDicts('enforce_type').then(val => {
               console.log(val)
               this.dictLabel = val.data.data.find(item => item.dictCode == this.orderDetailsMsg.enforceType).dictLabel
					
            })
         },
         imgclick(url) {
            url = this.baseUrl + url
            uni.previewImage({
               urls: [url]
            })
         },
         complaint(details) {
            complaintDetails(details).then(val => {
               // console.log(val.data.data)
               this.details = val.data.data
               this.getComtype()
            })
         },
         orderDetails() {
            orderDetails({ orderId: this.orderId}).then(val => {
               // console.log(val.data.data)
               val.data.data.regionImgs = val.data.data.regionImgs.split(",")
               this.orderDetailsMsg = val.data.data
               this.orderComplaintNodeList()
               this.enforceType()
            })
         },
         orderComplaintNodeList() {
            orderComplaintNodeList({ orderId: this.orderId }).then(val => {
               console.log(val.data.data, 'val===')
               this.nodeList = val.data.data
            })
         }
      }
   }
</script>

<style>
   page {
      background: #F4F4F4;
   }
</style>
<style lang="scss" scoped>
   .page-main {
      position: relative;
      top: -380rpx;
   }
	
   .donw-box {
      width: 100%;
      height: 380rpx;
      flex-shrink: 0;
      background: linear-gradient(180deg, #1171E0 42.5%, #F4F4F4 100%);
   }
   .wbox {
      background: #fff;
      border-radius: 5px;
      padding: 24rpx;
      box-sizing: border-box;
      margin: 0 32rpx;
	
      .item {
         display: flex;
         margin-bottom: 20rpx;
         font-size: 30rpx;
	
         .k {
            color: #7E8596;
            width: 30%;
	
         }
	
         .v {
            color: #202D44;
            width: 70%;
	
         }
      }
	
      .item:last-child {
         margin-bottom: 0;
      }
	
      .imgbox {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         border-radius: 10rpx;
	
         img {
            width: 198rpx;
            height: 198rpx;
            margin-bottom: 20rpx;
	
         }
      }
   }
   .title {
      color: #ffffff;
      font-size: 44rpx;
      font-weight: bold;
      padding-left: 32rpx;
      margin-top: 24rpx;
      margin-bottom: 24rpx;
	
   }
	
   .wbox2 {
      background: #fff;
      border-radius: 5px;
      box-sizing: border-box;
      margin: 0 32rpx;
      position: relative;
      z-index: 10;

      .t {
         padding: 24rpx;
         border-bottom: 1px solid #EEEEEE;
         color: #202d44;
         font-size: 36rpx;
         font-weight: bold;
      }
	
   }

   .jilu{
      display: flex;
      justify-content: space-between;
      padding: 24rpx;
      position: relative;
      &::before{
         content: '';
         display: inline-block;
         width: 2rpx;
         height: 100%;
         background: #eb47460d;
         position: absolute;
         left: 44rpx;
         top: 30rpx;
         z-index: 99;
      }
		
      .img{
         width: 50rpx;
         height: 50rpx;
         margin-right: 24rpx;
         position: relative;
         z-index: 100;
      }
      .font{
         width: calc(100% - 70rpx);
         .h{
            display: flex;
            justify-content: space-between;
            margin-bottom: 20rpx;
            .s{
                color: #202d44;
                font-size: 32rpx;
            }
            .time{
               color: #7e8596;
               font-size: 24rpx;
            }
         }
         .b{
            // width: 289px;
            // height: 111px;
            // flex-shrink: 0;
            border-radius: 4px;
            background: #F6F6F6;
            padding: 24rpx;
            .name{
                color: #202d44;
                font-size: 32rpx;
            }
            .p{
               color: #202d44;
               font-size: 26rpx;
               span{
                  color: #666666;
						
               }
            }
         }
      }
   }
   .handler{
      &::before {
         background: #fe7b320d;
      }
   }
   .start{
      &::before{
         background: #E7F8F0;
      }
   }
   .nonde{
      &::before{
         background: none;
      }
   }
                     <view class="time">

                        {{item.nodeTime}}

                     </view>

                  </view>

                  <view class="b">

                     <view class="name">

                        {{details.companyUser}}

                     </view>

                     <view class="p">

                        <span>申诉主题：</span>

                        {{dictLabel1}}

                     </view>

                     <view class="p">

                        <span>申诉内容：</span>

                        {{details.complaintReason}}

                     </view>

                  </view>

               </view>

            </view>

            <view class="jilu">

               <image src="/static/guocheng.png" class="img" alt=""  />

               <view class="font">

                  <view class="h">

                     <view class="s">

                        处理中

                     </view>

                     <view class="time">

                        2024-06-07 12:14

                     </view>

                  </view>

                  <view class="b">

                     <view class="name">

                        {{details.companyUser}}

                     </view>

                     <view class="p">

                        <span>申诉主题：</span>

                        {{dictLabel1}}

                     </view>

                     <view class="p">

                        <span>申诉内容：</span>

                        {{details.complaintReason}}

                     </view>

                  </view>

               </view>

            </view>

          -->

      </view>

    </view>



  </view>

</template>



<script>

  import {

    complaintDetails,

    orderNodeList,

    orderComplaintNodeList

  } from '@/api/qiye.js'

  import {

    orderDetails,

    orderDetailsLog

  } from '@/api/policy.js'

  import {

    config

  } from '@/common/config.js'

  import {

    getDicts

  } from '@/api/data.js'

  export default {

    data() {

      return {

        details: {},

        orderId: "",

        orderDetailsMsg: {},

        baseUrl: config.baseUrl,

        dictLabel: "",

        dictLabel1: "",

        nodeList: []

      }

    },

    onLoad(options) {

      this.complaint(options.id)

      if (options.orderId && options.orderId !== 'null') {

        this.orderId = options.orderId

        this.orderDetails()

      } else {

        this.orderNodeList(options.id)

      }

    },

    methods: {

      orderNodeList(id) {

        orderNodeList({

          id

        }).then(val => {

          // console.log(val)

          this.nodeList = val.data.data

        })

      },

      // 获取投诉类型

      getComtype() {

        getDicts('complaint_type').then(val => {

          this.dictLabel1 = val.data.data.find(item => item.dictCode == this.details.complaintType).dictLabel



        })

      },

      enforceType() {

        getDicts('enforce_type').then(val => {

          console.log(val)

          this.dictLabel = val.data.data.find(item => item.dictCode == this.orderDetailsMsg.enforceType).dictLabel



        })

      },

      imgclick(url) {

        url = this.baseUrl + url

        uni.previewImage({

          urls: [url]

        })

      },

      complaint(details) {

        complaintDetails(details).then(val => {

          // console.log(val.data.data)

          this.details = val.data.data

          this.getComtype()

        })

      },

      orderDetails() {

        orderDetails({

          orderId: this.orderId

        }).then(val => {

          // console.log(val.data.data)

          val.data.data.regionImgs = val.data.data.regionImgs.split(",")

          this.orderDetailsMsg = val.data.data

          if (this.orderId) {

            this.orderComplaintNodeList()

          }

          this.enforceType()

        })

      },

      orderComplaintNodeList() {

        orderComplaintNodeList({

          orderId: this.orderId

        }).then(val => {

          console.log(val.data.data, 'val===')

          this.nodeList = val.data.data

        })

      }

    }

  }

</script>



<style>

  page {

    background: #F4F4F4;

  }

</style>

<style lang="scss" scoped>

  .page-main {

    position: relative;

    top: -380rpx;

  }



  .donw-box {

    width: 100%;

    height: 380rpx;

    flex-shrink: 0;

    background: linear-gradient(180deg, #1171E0 42.5%, #F4F4F4 100%);

  }



  .wbox {

    background: #fff;

    border-radius: 5px;

    padding: 24rpx;

    box-sizing: border-box;

    margin: 0 32rpx;



    .item {

      display: flex;

      margin-bottom: 20rpx;

      font-size: 30rpx;



      .k {

        color: #7E8596;

        width: 30%;



      }



      .v {

        color: #202D44;

        width: 70%;



      }

    }



    .item:last-child {

      margin-bottom: 0;

    }



    .imgbox {

      display: flex;

      flex-wrap: wrap;

      justify-content: space-between;

      border-radius: 10rpx;



      img {

        width: 198rpx;

        height: 198rpx;

        margin-bottom: 20rpx;



      }

    }

  }



  .title {

    color: #ffffff;

    font-size: 44rpx;

    font-weight: bold;

    padding-left: 32rpx;

    margin-top: 24rpx;

    margin-bottom: 24rpx;



  }



  .wbox2 {

    background: #fff;

    border-radius: 5px;

    box-sizing: border-box;

    margin: 0 32rpx;

    position: relative;

    z-index: 10;



    .t {

      padding: 24rpx;

      border-bottom: 1px solid #EEEEEE;

      color: #202d44;

      font-size: 36rpx;

      font-weight: bold;

    }



  }



  .jilu {

    display: flex;

    justify-content: space-between;

    padding: 24rpx;

    position: relative;



    &::before {

      content: '';

      display: inline-block;

      width: 2rpx;

      height: 100%;

      background: #eb47460d;

      position: absolute;

      left: 44rpx;

      top: 30rpx;

      z-index: 99;

    }



    .img {

      width: 50rpx;

      height: 50rpx;

      margin-right: 24rpx;

      position: relative;

      z-index: 100;

    }



    .font {

      width: calc(100% - 70rpx);



      .h {

        display: flex;

        justify-content: space-between;

        margin-bottom: 20rpx;



        .s {

          color: #202d44;

          font-size: 32rpx;

        }



        .time {

          color: #7e8596;

          font-size: 24rpx;

        }

      }



      .b {

        // width: 289px;

        // height: 111px;

        // flex-shrink: 0;

        border-radius: 4px;

        background: #F6F6F6;

        padding: 24rpx;



        .name {

          color: #202d44;

          font-size: 32rpx;

        }



        .p {

          color: #202d44;

          font-size: 26rpx;



          span {

            color: #666666;



          }

        }

      }

    }

  }



  .handler {

    &::before {

      background: #fe7b320d;

    }

  }



  .start {

    &::before {

      background: #E7F8F0;

    }

  }



  .nonde {

    &::before {

      background: none;

    }

  }

</style>