konggang-city-miniprogram/pages/appeal/appeal_detail.vue

<template>
  <div class="content" v-if="isLoad">
    <div class="appealMsg">
      <div class="msg_content">
        <div class="title">诉求内容：</div>
        <div class="msg">
          5月13日晚在周公大道周陵中心幼儿团北侧200米（A区5排第二家）酒店订房间，夜间拉土车作业声音很大，建议有关部门可以将拉土车运营时间调整一下。或者为拉土车规划路线，避免在居民区及酒店宾馆临近路段行驶。
        </div>
      </div>
      <div class="info">
        <div class="flex">
          <div class="info_content">
            <span>咨询人：</span><span class="name">{{ info.name }}</span>
          </div>
          <div class="info_content">
            <span>电话：</span><span class="phone">{{ info.phone }}</span>
          </div>
        </div>
        <div class="info_content">
          <span>提交时间：</span><span class="time">{{ info.time }}</span>
        </div>
      </div>
    </div>
    <div class="one"></div>
    <div class="appealState">
      <div class="msg_content" v-if="info.status == 0">
        <div class="title">处理进度：</div>
        <div class="msg_state">
            {{ info.states }}
        </div>
      </div>
      <div class="msg_content" v-if="info.status == 1">
        <div class="title">回复内容：</div>
        <div class="msg_res">
            <span class="red">{{info.state.name}}:</span><span>{{info.state.msg}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isLoad:false,
      info: {
        name: "樊**",
        phone: "153753****",
        time: "2021-05-14  09:32:20",
        state:{
          msg:'尊敬的市民您好！收到您的留言，我们十分重视！正平大街开展拉土作业的车辆为西安（咸阳）机场三期扩建工程建设项目运输。您的建议我们会与有关部门沟通协商，尽量确保市民不会在夜间被工程噪音影响。',
          name:'市场服务与监督管理局'
        },
        status:null,
        states: "正在处理中……",
      },
    };
  },
  onLoad: function (e) {
    this.$set(this.info,'status',e.id)
    this.isLoad = true
  },
};
</script>
<style lang="scss" scoped>
.flex {
  display: flex;
}
.red{
  color: red;
}
.title {
  font-weight: bolder;
  padding-bottom: 3%;
  font-size: 30rpx;
}
.name,
.phone,
.time {
  font-weight: 200;
}
.info_content {
  padding-left: 5%;
  padding-top: 1%;
  padding-bottom: 1%;
  font-size: 25rpx;
}
.content {
  padding: 2% 0;
  .one {
    height: 20rpx;
    margin: 3% 4%;
    background: linear-gradient(
      to right,
      transparent 0%,
      transparent 50%,
      rgb(206, 203, 203) 50%,
      rgb(207, 207, 207) 100%
    );
    background-size: 30rpx 1rpx;
    background-repeat: repeat-x;
  }
  .appealMsg {
    .msg_content {
      padding: 5%;
      margin: 1%;
      margin-bottom: 6%;
      border: 1px solid rgb(233, 229, 229);
      border-radius: 20rpx;
      .msg {
        text-indent: 2em;
        line-height: 50rpx;
        letter-spacing: 2rpx;
        font-size: 25rpx;
      }
    }
  }
  .appealState {
    .msg_content {
      padding: 5%;
      margin: 1%;
      margin-bottom: 6%;
      border: 1px solid rgb(233, 229, 229);
      border-radius: 20rpx;
      .msg_state {
        text-indent: 2em;
        line-height: 50rpx;
        letter-spacing: 2rpx;
        font-size: 25rpx;
      }
      .msg_res {
        line-height: 50rpx;
        letter-spacing: 2rpx;
        font-size: 25rpx;
      }
    }
  }
}
</style>