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

<template>
  <view class="content">
    <div class="banner">
      <img :src="bannerSrc" alt="banner" />
    </div>
    <div class="menus flex">
      <div class="menu">
        <navigator url="/pages/appeal/myAppeal">
          <p class="logo">
            <img src="/static/appeal/myappeal.png" />
          </p>
          <div class="desc">我的诉求</div>
        </navigator>
      </div>
      <div class="menu">
        <navigator url="/pages/appeal/putAppeal">
          <p class="logo">
            <img src="/static/appeal/putappeal.png" />
          </p>
          <div class="desc">提出诉求</div>
        </navigator>
      </div>
    </div>
    <div class="otherAppealList">
      <div
        v-for="(otherAppeal, index) in otherAppealList"
        :key="index"
        @tap="toDetail(otherAppeal.id)"
      >
        <appealCard :otherAppeal="otherAppeal" :isOther='true'></appealCard>
      </div>
    </div>
  </view>
</template>

<script>
import md5 from "@/common/md5.js";
import appealCard from "./appealCard.vue";
export default {
  components: {
    appealCard,
  },
  data() {
    return {
      bannerSrc: "/static/appeal/banner.png",
      otherAppealList: [
        // {
        //   title: "航投大厦餐厅服务建议",
        //   name: "市场服务与监督管理局",
        //   msg: "尊敬的市民您好！空港市场监管分局已与餐厅负责人取得了电话联系，根据您所提出的建议，餐厅将有针对性的进行整改，加强……",
        //   image: "/static/appeal/avator.png",
        // },
        // {
        //   title: "拉土车夜间噪音问题整改诉求",
        //   name: "市场服务与监督管理局",
        //   msg: "尊敬的市民您好！收到您的留言，我们十分重视！正平大街开展拉土作业的车辆为西安（咸阳）机场三期扩建工程建设项目运输……",
        //   image: "/static/appeal/avator.png",
        // },
      ],
    };
  },
  onLoad() {
	  
  },
  onShow() {
  	this.getList()
  },
  methods: {
	getList(){
		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=list&timestamp=" +
		  getApp().globalData.globalTimestamp +
		  "&sign=" +
		  md5Sign;
		uni.request({
		  url: url,
		  method: "POST",
		  header: {
		    "content-type": "application/x-www-form-urlencoded",
		  },
		  data: {
		  },
		  success: (res) => {
		    if (res.data.code === 200) {
				this.otherAppealList = res.data.data.list
        console.log(res.data.data.list[0]);
			}
		  },
		  fail: () => {
		    console.log("连接失败");
		  },
		});
	},
    toDetail(id) {
      uni.navigateTo({
        url: "/pages/appeal/appeal_detail?id=" + id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
}
.content {
  width: 100%;
  height: 100vh;
  .banner {
    height: 25%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .menus {
    width: 80%;
    height: 15%;
    justify-content: space-evenly;
    align-items: center;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 25rpx;
    transform: translateY(-60%);
    box-shadow: 0rpx 10rpx 5rpx rgb(212, 212, 212);
    .menu {
      .desc {
        font-weight: bolder;
        text-align: center;
        font-size: 25rpx;
      }
      .logo {
        text-align: center;
        img {
          width: 100rpx;
          height: 100rpx;
        }
      }
    }
  }
  .otherAppealList {
    transform: translateY(-15%);
  }
}
</style>