修改提建议主页样式 服用卡片组件 完成我的请求页面 完成请求详情页面

pages.json

@@ -29,6 +29,27 @@
 			}
 		},
 		{
+			"path": "pages/appeal/myAppeal",
+			"style": {
+				"navigationBarTitleText": "我的诉求",				"navigationBarBackgroundColor": "#02A7F0",
+				"navigationBarTextStyle":"white"
+			}
+		},
+		{
+			"path": "pages/appeal/putAppeal",
+			"style": {
+				"navigationBarTitleText": "提出诉求",				"navigationBarBackgroundColor": "#02A7F0",
+				"navigationBarTextStyle":"white"
+			}
+		},
+		{
+			"path": "pages/appeal/appeal_detail",
+			"style": {
+				"navigationBarTitleText": "诉求详情",				"navigationBarBackgroundColor": "#02A7F0",
+				"navigationBarTextStyle":"white"
+			}
+		},
+		{
 			"path": "pages/policy/index",
 			"style": {
 				"navigationBarTitleText": "搜政策"

pages/appeal/appealCard.vue

@@ -3,39 +3,87 @@
     <div class="title">
       {{ otherAppeal.title }}
     </div>
-    <div class="details">
+    <img
+      src="/static/appeal/waited.png"
+      class="state"
+      v-if="otherAppeal.state === 1"
+    />
+    <img
+      src="/static/appeal/waiting.png"
+      class="state"
+      v-if="otherAppeal.state === 0"
+    />
+    <div class="details" v-if="otherAppeal.state === 1">
       <img :src="otherAppeal.image" class="icon" />
-      <span class="name">{{ otherAppeal.name }}</span
-      >：
-      <span class="msg">{{ otherAppeal.msg }}</span>
+      <p class="msg">
+        <span class="name">{{ otherAppeal.name }}</span
+        >：
+        <span class="msg_body">{{ otherAppeal.msg }}</span>
+      </p>
+    </div>
+    <div class="details" v-else-if="otherAppeal.state === 0">
+      <p class="msg">
+        <span class="msg_body_waiting">{{ otherAppeal.msg }}</span>
+      </p>
+    </div>
+    <div class="details" v-else>
+      <img :src="otherAppeal.image" class="icon" />
+      <p class="msg">
+        <span class="name">{{ otherAppeal.name }}</span
+        >：
+        <span class="msg_body">{{ otherAppeal.msg }}</span>
+      </p>
     </div>
   </div>
 </template>
 <script>
 export default {
-    props:['otherAppeal']
-}
+  props: ["otherAppeal"],
+};
 </script>
 <style lang="scss" scoped>
 .otherAppeal {
-  margin: 5% 9%;
+  margin: 5% 8%;
+  position: relative;
+  height: 200rpx;
   .title {
     margin-bottom: 5%;
-    font-size: 35rpx;
+    font-size: 28rpx;
+  }
+  .state {
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translateY(-30%);
+    width: 94rpx;
+    height: 74rpx;
   }
   .details {
+    position: relative;
     .name {
-      font-size: 30rpx;
+      font-size: 25rpx;
       color: red;
     }
     .msg {
-      font-size: 30rpx;
+      font-size: 25rpx;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      word-wrap: break-word;
+      word-break: break-all;
+      line-height: 40rpx;
+      letter-spacing: 2rpx;
+      .msg_body_waiting {
+        color: #aaa;
+      }
     }
     .icon {
-      width: 60rpx;
-      height: 60rpx;
+      width: 50rpx;
+      height: 50rpx;
       position: absolute;
-      left: 1%;
+      transform: translateX(-100%);
     }
   }
 }

pages/appeal/appeal_detail.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="content">
+    <div class="appealMsg">
+      <div class="title">诉求内容：</div>
+      <div class="msg">
+        5月13日晚在周公大道周陵中心幼儿团北侧200米（A区5排第二家）酒店订房间，夜间拉土车作业声音很大，建议有关部门可以将拉土车运营时间调整一下。或者为拉土车规划路线，避免在居民区及酒店宾馆临近路段行驶。
+      </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="title">处理进度：</div>
+      <div class="msg">
+        {{ info.state }}
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      id: 0,
+      info: {
+        name: "樊**",
+        phone: "153753****",
+        time: "2021-05-14  09:32:20",
+        state: "正在处理中……",
+      },
+    };
+  },
+  onLoad: function (e) {
+    this.id = e.id;
+  },
+};
+</script>
+<style lang="scss" scoped>
+.flex {
+  display: flex;
+}
+.title {
+  padding-left: 5%;
+  font-weight: bolder;
+}
+.name,
+.phone,
+.time {
+  font-weight: 200;
+}
+.info_content {
+  padding-left: 5%;
+  padding-top: 1%;
+  padding-bottom: 1%;
+}
+.content {
+  padding: 3% 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 {
+      padding: 5%;
+      margin: 1%;
+      border: 1px solid rgb(233, 229, 229);
+      border-radius: 20rpx;
+      text-indent: 2em;
+      line-height: 50rpx;
+      letter-spacing: 2rpx;
+    }
+  }
+  .appealState {
+    .msg {
+      padding: 5%;
+      margin: 1%;
+      border: 1px solid rgb(233, 229, 229);
+      border-radius: 20rpx;
+      text-indent: 2em;
+      line-height: 50rpx;
+      letter-spacing: 2rpx;
+    }
+  }
+}
+</style>

pages/appeal/index.vue

@@ -5,16 +5,20 @@
     </div>
     <div class="menus flex">
       <div class="menu">
-        <p class="logo">
-          <img src="/static/appeal/myappeal.png" />
-        </p>
-        <div class="desc">我的诉求</div>
+        <navigator url="/pages/appeal/myAppeal">
+          <p class="logo">
+            <img src="/static/appeal/myappeal.png" />
+          </p>
+          <div class="desc">我的诉求</div>
+        </navigator>
       </div>
       <div class="menu">
-        <p class="logo">
-          <img src="/static/appeal/putappeal.png" />
-        </p>
-        <div class="desc">提出诉求</div>
+        <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">
@@ -83,6 +87,7 @@ export default {
       .desc {
         font-weight: bolder;
         text-align: center;
+        font-size: 25rpx;
       }
       .logo {
         text-align: center;
@@ -95,28 +100,6 @@ export default {
   }
   .otherAppealList {
 	  transform: translateY(-15%);
-    .otherAppeal {
-      margin: 5% 9%;
-      .title {
-        margin-bottom: 5%;
-        font-size: 35rpx;
-      }
-      .details {
-        .name {
-          font-size: 30rpx;
-          color: red;
-        }
-        .msg {
-          font-size: 30rpx;
-        }
-        .icon {
-          width: 60rpx;
-          height: 60rpx;
-          position: absolute;
-          left: 1%;
-        }
-      }
-    }
   }
 }
 </style>

pages/appeal/myAppeal.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="content">
+    <div v-for="(otherAppeal, index) in otherAppealList" :key="index">
+      <appealCard
+        :otherAppeal="otherAppeal"
+        @tap="toDetail(index)"
+      ></appealCard>
+    </div>
+  </div>
+</template>
+<script>
+import appealCard from "./appealCard.vue";
+export default {
+  components: {
+    appealCard,
+  },
+  data() {
+    return {
+      otherAppealList: [
+        {
+          title: "航投大厦餐厅服务建议",
+          state: 0,
+          image: "/static/appeal/avator.png",
+          msg: "正在处理中",
+        },
+        {
+          title: "拉土车夜间噪音问题整改诉求",
+          name: "市场服务与监督管理局",
+          state: 1,
+          msg: "尊敬的市民您好！收到您的留言，我们十分重视！正平大街开展拉土作业的车辆为西安（咸阳）机场三期扩建工程建设项目运输……",
+          image: "/static/appeal/avator.png",
+        },
+      ],
+    };
+  },
+  methods: {
+    toDetail(index) {
+      uni.navigateTo({
+        url: "/pages/appeal/appeal_detail?id="+index,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.content {
+  width: 100%;
+  height: 100vh;
+}
+</style>

pages/appeal/putAppeal.vue

@@ -0,0 +1,14 @@
+<template>
+    <div>
+        {{msg}}
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            msg:'提出诉求'
+        }
+    },
+}
+</script>