1

src/api/index.js

@@ -31,3 +31,41 @@ export function userPhoneLogin(params) {
 		params: params,
 	});
 }
+export function userCollection(params) {
+	return http('/api/user/collection', {
+		method: 'POST',
+		params: params,
+	});
+}
+export function userComment(params) {
+	return http('/api/user/comment', {
+		method: 'GET',
+		params: params,
+	});
+}
+export function userFootprint(params) {
+	return http('/api/user/footprint', {
+		method: 'GET',
+		params: params,
+	});
+}
+export function userAgreement(params) {
+	return http('/api/index/agreement', {
+		method: 'GET',
+		params: params,
+	});
+}
+//export const DelPolitics = data => request.delete('api/politics/delPolitics', data, false);
+export function AddCollection(params) {
+	return http('/api/news/collection', {
+		method: 'POST',
+		params: params,
+	});
+}
+export function delPolitics(params) {
+	return http('/api/politics/delPolitics', {
+		method: 'POST',
+		params: params,
+	});
+}
+

src/api/request.js

@@ -45,6 +45,11 @@ const Request = (url, options = {}) => {
 service.interceptors.request.use(
 	config => {
 		// 此处添加Loading
+		var item = sessionStorage.getItem('user');
+		var jsonArray = JSON.parse(item);
+		if (item) {
+			config.headers['token'] =jsonArray['token']
+		}
 		return config;
 	},
 	error => {

src/components/Head.vue

@@ -47,13 +47,13 @@
   <div style="padding: 5px 0px;">
     <n-flex justify="center" align="center" :size="[141,10]">
       <div class="left-line"></div>
-      <n-button @click="tn('/')" text color="#0051B1">
+      <n-button @click="tn('/')" text :color="x=='/'?'#0051B1':'#000000'">
         <template #default>
           <span style="font-weight: 600;font-size: 1.25rem;">首页</span>
         </template>
       </n-button>
       <div class="left-line"></div>
-      <n-button text color="#000000">
+      <n-button text @click="tn('/department')" :color="x=='/department'?'#0051B1':'#000000'">
         <template #default>
           <span style="font-size: 1.25rem;">部门</span>
         </template>
@@ -71,7 +71,7 @@
         </template>
       </n-button>
       <div class="left-line"></div>
-      <n-button @click="tn('/user')" text color="#000000">
+      <n-button @click="tn('/user')" text :color="x=='/user'?'#0051B1':'#000000'">
         <template #default>
           <span style="font-size: 1.25rem;">我的</span>
         </template>
@@ -113,17 +113,24 @@ const buttonThemeOverrides: ButtonThemeOverrides = {
 const message = useMessage()
 const router = useRouter()
 const userPhone=ref();
+const x = ref();
 onMounted(() => {
   var item = sessionStorage.getItem('user');
+  if(item!=null){
     const jsonArray = JSON.parse(item);
     const hiddenPhoneNumber = jsonArray.mobile.substring(0, 3) + "****" + jsonArray.mobile.substring(7);
     userPhone.value=hiddenPhoneNumber;
+  }else{
+    userPhone.value='';
+  }
+  x.value=router.options.history.location;
 })
 const quit = () => {
   sessionStorage.removeItem('user');
   userPhone.value='';
 }
 const tn = (url) => {
+    x.value=url;
   if(url=='/user'&&userPhone.value==''){
     message.error('请登录！')
       return;

src/router/routes.js

@@ -24,7 +24,14 @@ const router = createRouter({
 			title: '洛阳百姓问政-我的' //title配置
 		},
 		component: () => import("../view/user/user.vue")
-	}],
+	},{
+		path: "/department",
+		meta: {
+			title: '洛阳百姓问政-部门' //title配置
+		},
+		component: () => import("../view/department/index.vue")
+	}
+	],
 });
 
 export default router

src/view/department/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <Header/>
+  <div style="padding: 15px 9rem;background-color: #F5F5F5;overflow: hidden">
+    <n-grid :cols="24" :x-gap="20" item-responsive>
+      <n-gi span="5">
+        <div
+            style="height: 570px;padding-bottom: 30px;background-color: #FFFFFF;box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);overflow: hidden;text-align: center">
+          <n-space vertical :size="[0,25]">
+            <div v-for="(item,index) in 5"
+               >{{ item }}
+            </div>
+          </n-space>
+        </div>
+      </n-gi>
+      <n-gi span="19">
+        <div style="height: 100%;background-color: #FFFFFF;box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);">
+          <div style="padding: 20px;position: relative">
+            <div class="right_title">123</div>
+            <div>
+              <div style="cursor: pointer;padding: 2.5px 0px;margin-top: 20px" v-for="(item,index) in 5">
+                <n-flex justify="space-between" align="center">
+                  <div>1</div>
+                  <div>1</div>
+                </n-flex>
+              </div>
+            </div>
+          </div>
+        </div>
+      </n-gi>
+    </n-grid>
+  </div>
+  <Footer/>
+</template>
+<script setup lang="ts">
+import Header from "@/components/Head.vue";
+import Footer from "@/components/Footer.vue";
+import {onMounted, ref} from "vue";
+import {getPolitics} from "@/api/index";
+import {useMessage} from "naive-ui";
+const leftListIndex = ref(0);
+const leftList = ref(['我的问政', '我的收藏', '我的评论', '历史足迹', '用户协议', '隐私政策']);
+const list=ref();
+onMounted(() => {
+
+  getList();
+})
+const getList = () => {
+
+}
+</script>
+<style>
+.left_text {
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.left_text:hover {
+  color: #0051B1;
+  font-weight: 600;
+}
+.txt-1:hover{
+  color: #0051B1;
+}
+.left_text_init {
+  color: #0051B1;
+  font-weight: 600;
+}
+
+.right_title {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+</style>

src/view/user/user.vue

@@ -13,21 +13,61 @@
           </div>
           <div style="background-color: #E5E5E5;height: 1px;margin: 20px 0px"></div>
           <n-space vertical :size="[0,25]">
-            <div class="left_text left_text_init">我的问政</div>
+            <div v-for="(item,index) in leftList" @click="openLeft(index)"
-            <div class="left_text">我的收藏</div>
+                 :class="`left_text ${leftListIndex === index ? 'left_text_init' : ''}`">{{ item }}
-            <div class="left_text">我的评论</div>
+            </div>
-            <div class="left_text">历史足迹</div>
-            <div class="left_text">用户协议</div>
-            <div class="left_text">隐私政策</div>
-            <div class="left_text">关于我们</div>
           </n-space>
         </div>
       </n-gi>
       <n-gi span="19">
         <div style="height: 100%;background-color: #FFFFFF;box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);">
           <div style="padding: 20px;position: relative">
-            <div class="right_title">我的问政</div>
+            <div class="right_title">{{ leftList[leftListIndex] }}</div>
-            <div style="position: absolute;text-align: center;width: 100%;top: 275px">
+            <div v-if="leftListIndex==0||leftListIndex==1||leftListIndex==3">
+                <div style="cursor: pointer;padding: 2.5px 0px;margin-top: 20px" v-for="(item,index) in list">
+                  <n-flex justify="space-between" align="center">
+                    <div class="txt-1" style="font-size: 17px;width: 50%">
+                      <div style="background-color: #0051B1;width: 5px;height: 5px;border-radius: 50%;display: inline-block;vertical-align: middle"></div>
+                      <text class="news_title" style="vertical-align: middle;margin-left: 10px">{{item.politics_title}}</text>
+                    </div>
+                    <div style="color: #818794">{{item.createtime}}</div>
+                    <div v-if="leftListIndex==1">
+                      <n-popconfirm negative-text="取消" positive-text="确定" @positive-click="delCollection(item)" >
+                        <template #trigger>
+                          <n-button type="error">取消收藏</n-button>
+                        </template>
+                        确定要取消收藏吗？
+                      </n-popconfirm>
+                    </div>
+                    <div v-if="leftListIndex==0">
+                      <n-popconfirm negative-text="取消" positive-text="确定" @positive-click="delDep(item)" >
+                        <template #trigger>
+                          <n-button type="error">删除</n-button>
+                        </template>
+                        确定要取消收藏吗？
+                      </n-popconfirm>
+                    </div>
+                  </n-flex>
+                </div>
+            </div>
+            <div v-if="leftListIndex==2">
+              <div style="cursor: pointer;padding: 2.5px 0px;margin-top: 20px" v-for="(item,index) in list">
+                <n-flex justify="space-between" align="center">
+                  <div class="txt-1" style="font-size: 17px;width: 30%">
+                    <div style="background-color: #0051B1;width: 5px;height: 5px;border-radius: 50%;display: inline-block;vertical-align: middle"></div>
+                    <text class="news_title" style="vertical-align: middle;margin-left: 10px">{{item.info.politics_title}}</text>
+                  </div>
+                  <div>我的回复：{{item.content}}</div>
+                  <div style="color: #818794">{{item.info.createtime}}</div>
+                </n-flex>
+              </div>
+            </div>
+            <div v-if="leftListIndex==4||leftListIndex==5">
+              <div style="cursor: pointer;padding: 2.5px 0px;margin-top: 20px">
+                  <div v-html="list"></div>
+              </div>
+            </div>
+            <div v-if="!list||list.length==0" style="position: absolute;text-align: center;width: 100%;top: 275px">
               <div style="display: flex;justify-content: center;align-items: center;color: #666666">
                 <div style="width: 50px;height: 1px;background: #666666;"></div>
                 <div style="margin: 0px 15px">没有更多了</div>
@@ -45,44 +85,107 @@
 import Header from "@/components/Head.vue";
 import Footer from "@/components/Footer.vue";
 import {onMounted, ref} from "vue";
-
+import {getPolitics,userCollection,userComment,userFootprint,userAgreement,AddCollection,delPolitics} from "@/api/index";
-const userInfo = ref();
+import {useMessage} from "naive-ui";
+const message = useMessage()
+const leftListIndex = ref(0);
+const leftList = ref(['我的问政', '我的收藏', '我的评论', '历史足迹', '用户协议', '隐私政策']);
+const userInfo = ref({});
+const list=ref();
 onMounted(() => {
   var item = sessionStorage.getItem('user');
   var jsonArray = JSON.parse(item);
   // 隐藏用户手机号，只显示前3位和后7位
-  const hiddenPhoneNumber = jsonArray.mobile.substring(0, 3) + "****" + jsonArray.mobile.substring(7);
+  jsonArray.mobile = jsonArray.mobile.substring(0, 3) + "****" + jsonArray.mobile.substring(7);
-  // 更新用户手机号
-  jsonArray.mobile = hiddenPhoneNumber;
-  // 将用户信息赋值给userInfo
   userInfo.value = jsonArray;
-  // 更新用户信息的mobile属性
+  getList();
-  jsonArray.mobile = hiddenPhoneNumber;
+})
-  // 将更新
+const openLeft = (e) => {
-   // 用户通过手机号登录
+  list.value='';
-   userPhoneLogin({'mobile':mobile.value,'captcha':code.value}).then(res => {
+  leftListIndex.value = e;
-     // 如果返回状态码为200，说明登录成功
+  getList();
+}
+const delDep = (item) => {
+  console.log(item);
+  delPolitics({'id':item.id}).then(res => {
+    console.log(res);
     if(res.code==200){
-       // 显示登录成功的信息
+      message.success('删除成功！');
-       message.success(res.msg);
-       // 将用户信息存入sessionStorage
-       sessionStorage.setItem('user', JSON.stringify(res.data.userinfo));
-       // 跳转到首页
-       router.push('/');
     }else{
-       // 如果返回状态码不为200，说明登录失败
+      message.error(res.msg);
-       message.error(res.msg)
     }
+    getList();
   });
- ngify(res.data.userinfo));
+}
-       // 跳转到首页
+const delCollection = (item) => {
-       router.push('/');
+  console.log(item);
+  AddCollection({'type': '3','id':item.news_id}).then(res => {
+    console.log(res);
+    if(res.code==200){
+      message.success('取消成功！');
       }else{
-       // 如果返回状态码不为200，说明登录失败
+      message.error(res.msg);
-       message.error(res.msg)
     }
+    getList();
   });
- _text_init {
+}
+const getList = () => {
+  var type=leftListIndex.value;
+  if (type == 0) {
+    getPolitics({'is_user': 1}).then(res => {
+      console.log(res);
+      list.value=res.data;
+    });
+  } else if (type == 1) {
+    userCollection({'type': 3}).then(res => {
+      console.log(res);
+      list.value=res.data;
+    });
+  } else if (type == 2) {
+    userComment({'type': 3}).then(res => {
+      console.log(res);
+      list.value=res.data;
+    });
+  } else if (type == 3) {
+    userFootprint({'type': 3}).then(res => {
+      console.log(res);
+      list.value=res.data;
+    });
+  } else if (type == 4) {
+    userAgreement({'type': 'user'}).then(res => {
+      console.log(res);
+      list.value=res.data;
+    });
+  } else if (type == 5) {
+    userAgreement({'type': 'privacy'}).then(res => {
+      console.log(res);
+      list.value=res.data;
+    });
+  }
+
+}
+</script>
+<style>
+.left_text {
+  font-size: 20px;
+  cursor: pointer;
+}
+
+.left_text:hover {
+  color: #0051B1;
+  font-weight: 600;
+}
+.txt-1:hover{
   color: #0051B1;
 }
+.left_text_init {
+  color: #0051B1;
+  font-weight: 600;
+}
+
+.right_title {
+  font-size: 20px;
+  font-weight: 600;
+}
+
 </style>