feat: 对接投票接口

YasinChan · Jan 2, 2024 · f4d0874 · f4d0874
1 parent 57c0e8a
commit f4d0874
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 9 deletions.
diff --git a/src/components/SuggestModal.vue b/src/components/SuggestModal.vue
@@ -14,7 +14,7 @@ import { storeToRefs } from 'pinia';
 import { useUserStore } from '@/store/user';
 
 // apis
-import { getSuggest, createSuggest } from '@/request';
+import { getSuggest, createSuggest, voteSuggest } from '@/request';
 
 // svg
 import IcoUp from '@/assets/svg/up.svg';
@@ -113,11 +113,117 @@ async function confirmSuggest() {
   }
 }
 
+function getVoteInfo(id: string) {
+  return localStorage.getItem('typing:vote:' + id);
+}
+function setVoteInfo(id: string, value: string) {
+  // 这里的 value 只能是 '1' '-1' '0'
+  if (value === '0') {
+    localStorage.removeItem('typing:vote:' + id);
+    return;
+  }
+  localStorage.setItem('typing:vote:' + id, value);
+}
+
 function upClick(id: string) {
-  console.log('----------', 'id', id, '----------cyy log');
+  // value '3' 表示 up - 1 down 不动
+  // value '2' 表示 up + 1 down - 1
+  // value '1' 表示 up + 1 down 不动
+  // value '-1' 表示 up 不动 down + 1
+  // value '-2' 表示 up - 1 down + 1
+  // value '-3' 表示 up 不动 down - 1
+  const voteInfo = getVoteInfo(id);
+  if (voteInfo === '1') {
+    voteSuggest({
+      id,
+      value: '3'
+    }).then((res) => {
+      message({ message: '取消投票' });
+      setVoteInfo(id, '0');
+      state.suggestList = state.suggestList.map((item) => {
+        if (item.id === id) {
+          item.up = item.up - 1;
+        }
+        return item;
+      });
+    });
+  } else if (voteInfo === '-1') {
+    voteSuggest({
+      id,
+      value: '2'
+    }).then((res) => {
+      message({ message: '已投票' });
+      setVoteInfo(id, '1');
+      state.suggestList = state.suggestList.map((item) => {
+        if (item.id === id) {
+          item.up = item.up + 1;
+          item.down = item.down - 1;
+        }
+        return item;
+      });
+    });
+  } else {
+    voteSuggest({
+      id,
+      value: '1'
+    }).then((res) => {
+      message({ message: '已投票' });
+      setVoteInfo(id, '1');
+      state.suggestList = state.suggestList.map((item) => {
+        if (item.id === id) {
+          item.up = item.up + 1;
+        }
+        return item;
+      });
+    });
+  }
 }
 function downClick(id: string) {
-  console.log('----------', 'id', id, '----------cyy log');
+  const voteInfo = getVoteInfo(id);
+  if (voteInfo === '1') {
+    voteSuggest({
+      id,
+      value: '-2'
+    }).then((res) => {
+      message({ message: '已投票' });
+      setVoteInfo(id, '-1');
+      state.suggestList = state.suggestList.map((item) => {
+        if (item.id === id) {
+          item.up = item.up - 1;
+          item.down = item.down + 1;
+        }
+        return item;
+      });
+    });
+  } else if (voteInfo === '-1') {
+    voteSuggest({
+      id,
+      value: '-3'
+    }).then((res) => {
+      message({ message: '取消投票' });
+      setVoteInfo(id, '0');
+      state.suggestList = state.suggestList.map((item) => {
+        if (item.id === id) {
+          item.down = item.down - 1;
+        }
+        return item;
+      });
+    });
+  } else {
+    voteSuggest({
+      id,
+      value: '-1'
+    }).then((res) => {
+      message({ message: '已投票' });
+      setVoteInfo(id, '-1');
+      state.suggestList = state.suggestList.map((item) => {
+        if (item.id === id) {
+          item.down = item.down + 1;
+        }
+        return item;
+      });
+    });
+  }
 }
 
 defineExpose({
@@ -155,24 +261,26 @@ defineExpose({
         <div class="y-submit-suggest__list-info">
           <div class="y-submit-suggest__list-data">
             <span
-              v-throttle-click:1000="upClick.bind(null, item.id)"
+              v-throttle-click:2000="upClick.bind(null, item.id)"
               class="y-submit-suggest__list-data-up"
+              :class="{ 'y-submit-suggest__list-data--active': getVoteInfo(item.id) === '1' }"
             >
               <IcoUp></IcoUp>
               {{ item.up ? item.up : '' }}
             </span>
             <span
-              v-throttle-click:1000="downClick.bind(null, item.id)"
+              v-throttle-click:2000="downClick.bind(null, item.id)"
               class="y-submit-suggest__list-data-down"
+              :class="{ 'y-submit-suggest__list-data--active': getVoteInfo(item.id) === '-1' }"
             >
               <IcoUp></IcoUp>
               {{ item.down ? item.down : '' }}
             </span>
           </div>
           <div>
-            <span class="gray-08">{{ item.userName }}</span>
-            <span> · </span>
-            <span class="gray-06">{{ dayjs(item.updatedAt).format('YY-MM-DD HH:mm') }}</span>
+            <span v-if="item.userName" class="gray-08">{{ item.userName }}</span>
+            <span v-if="item.userName"> · </span>
+            <span class="gray-06">{{ dayjs(item.updatedAt).format('YY/MM/DD HH:mm') }}</span>
           </div>
         </div>
       </div>
@@ -262,6 +370,7 @@ defineExpose({
 .y-submit-suggest__list-data {
   display: flex;
   align-items: center;
+  height: 18px;
 }
 .y-submit-suggest__list-data-up,
 .y-submit-suggest__list-data-down {
@@ -284,6 +393,12 @@ defineExpose({
     transform: rotate(180deg);
   }
 }
+.y-submit-suggest__list-data--active {
+  color: $main-color;
+  svg {
+    fill: $main-color;
+  }
+}
 
 .y-submit-suggest__reply-title {
   font-weight: bold;

diff --git a/src/request/index.ts b/src/request/index.ts
@@ -57,6 +57,10 @@ export const createSuggest = (params: { content: string; userId?: string; userNa
   return axios.post('/api/suggest/create', params);
 };
 
+export const voteSuggest = (params: { id: string; value: string }) => {
+  return axios.post('/api/suggest/vote', params);
+};
+
 // 获取将要做的列表
 export const getTodo = () => {
   return axios.get('/api/todo');

diff --git a/src/view/TimeLimit.vue b/src/view/TimeLimit.vue
@@ -27,7 +27,7 @@ const confirm: any = inject('confirm');
 const wordInputRef = ref<any>(null);
 const useConfig = useConfigStore();
 const { currentFont, onlyShowMain } = storeToRefs(useConfig);
-const customTime = [1, 15, 30, 60, 120];
+const customTime = [15, 30, 60, 120];
 
 const state = reactive({
   showSetTime: false,