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">
          {{ info.content }}
        </div>
        <div class="attach_list">
          <img
            :src="'https://kiq.xazhima.com' + attach.url" @click="showLarge('https://kiq.xazhima.com' + attach.url)" v-for="(attach, idx) in info.attach_list"
            :key="idx"/>
        </div>
      </div>
      <div class="info">
        <div class="flex">
          <div class="info_content">
            <span>咨询人：</span
            ><span class="name">{{ info.contact_name }}</span>
          </div>
          <div class="info_content">
            <span>电话：</span
            ><span class="phone">{{ info.contact_phone }}</span>
          </div>
        </div>
        <div class="info_content">
          <span>提交时间：</span
          ><span class="time">{{ info.addtime }}</span>
        </div>
      </div>
    </div>
    <div class="one"></div>
    <div class="appealState">
      <div class="msg_content" v-if="info.process !== '2'">
        <div class="title">处理进度：</div>
        <div class="msg_state">
          <span v-if="info.process === '0'"> 待分配 </span>
          <span v-if="info.process === '1'"> 待回复 </span>
        </div>
      </div>
      <div class="msg_content" v-if="info.process === '2'">
        <div class="title">回复内容：</div>
        <div class="msg_res">
          <span class="red">{{ info.reply }}:</span
          ><span>{{ info.reply }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import md5 from "@/common/md5.js";
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;
    this.pageDetail(e.id);
  },
  methods: {
    pageDetail(infoId) {
      let md5Sign = md5(
        "method=" +
          "consult" +
          "&timestamp=" +
          getApp().globalData.globalTimestamp +
          "&secret=" +
          getApp().globalData.secret
      );
      let url =
        getApp().globalData.shareUrl +
        "api/api.php" +
        "?method=consult&source=consult&action=info_by_id&timestamp=" +
        getApp().globalData.globalTimestamp +
        "&sign=" +
        md5Sign;
      uni.request({
        url: url,
        method: "POST",
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: {
          openId: getApp().globalData.open_id,
          id: infoId,
        },
        success: (res) => {
          if (res.data.code === 200) {
            let data = res.data.data
            let time = this.$options.filters["globalTime"](data.addtime);
            let timeSecond = this.$options.filters["globalTimeSecond"](
              data.addtime
            );
            data.addtime = time + " " + timeSecond;
            this.info = data;
          }
        },
        fail: () => {
          console.log("连接失败");
        },
      });
    },
    showLarge(src) {
      uni.previewImage({
        urls: [src],
        longPressActions: {
          itemList: ["发送给朋友", "保存图片"],
          success: function (data) {},
          fail: function (err) {
            console.log(err.errMsg);
          },
        },
      });
    },
  },
};
</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;
      }
      .attach_list {
        display: flex;
        justify-content: space-around;
        img {
          width: 200rpx;
          height: 200rpx;
        }
      }
    }
  }
  .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>