Hooke / tswj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
8e76b458 1 parent 0df3f4f2

API请求接口封装

Inline Side-by-side
Showing 3 changed files with 96 additions and 141 deletions
1 import axios from '@/utils/axios'; 1 import axios from '@/utils/axios';
2 +import { fn } from '@/api/fn';
2 3
3 const Api = { 4 const Api = {
4 CHANGE_PERFORMER: '/srv/?a=change_performer', // 切换儿童角色 5 CHANGE_PERFORMER: '/srv/?a=change_performer', // 切换儿童角色
6 + MY_INFO: '/srv/?a=my_info', // 儿童角色信息
7 + MY_PERFORMER: '/srv/?a=my_performer', // 角色列表信息
5 } 8 }
6 9
7 -export const changePerformerAPI = (params) => axios.post(Api.CHANGE_PERFORMER, params) 10 +export const changePerformerAPI = (params) => fn(axios.post(Api.CHANGE_PERFORMER, params))
11 +
12 +export const myInfoAPI = (params) => fn(axios.get(Api.MY_INFO, { params }))
13 +
14 +export const myPerformerAPI = (params) => fn(axios.get(Api.MY_PERFORMER, { params }))
......
...@@ -9,7 +9,7 @@ export const fn = (api) => { ...@@ -9,7 +9,7 @@ export const fn = (api) => {
9 return api 9 return api
10 .then(res => { 10 .then(res => {
11 if (res.data.code === 1) { 11 if (res.data.code === 1) {
12 - return res.data.data; 12 + return res.data.data || true;
13 } else { 13 } else {
14 console.warn(res); 14 console.warn(res);
15 if (!res.data.show) return false; 15 if (!res.data.show) return false;
...@@ -17,9 +17,11 @@ export const fn = (api) => { ...@@ -17,9 +17,11 @@ export const fn = (api) => {
17 icon: 'close', 17 icon: 'close',
18 message: res.data.msg 18 message: res.data.msg
19 }); 19 });
20 + return false;
20 } 21 }
21 }) 22 })
22 .catch(err => { 23 .catch(err => {
23 console.error(err); 24 console.error(err);
25 + return false;
24 }) 26 })
25 } 27 }
......
...@@ -4,13 +4,15 @@ ...@@ -4,13 +4,15 @@
4 <div class="info"> 4 <div class="info">
5 <van-row> 5 <van-row>
6 <van-col> 6 <van-col>
7 - <van-image v-if="userInfo.avatar" @click="handleUser('EDIT')" round width="50" height="50" :src="userInfo.avatar" style="padding-right: 1rem;" /> 7 + <van-image v-if="userInfo.avatar" @click="handleUser('EDIT')" round width="50" height="50"
8 - <van-image v-else @click="handleUser('EDIT')" round width="50" height="50" :src="icon_avatar" style="padding-right: 1rem;" /> 8 + :src="userInfo.avatar" style="padding-right: 1rem;" />
9 + <van-image v-else @click="handleUser('EDIT')" round width="50" height="50" :src="icon_avatar"
10 + style="padding-right: 1rem;" />
9 </van-col> 11 </van-col>
10 <van-col class="text-wrapper" span="18"> 12 <van-col class="text-wrapper" span="18">
11 <div> 13 <div>
12 <div class="username">{{ userInfo.name }}</div> 14 <div class="username">{{ userInfo.name }}</div>
13 - <div v-if="actions.length" class="toggle-user" @click="toggleUser">切换儿童</div> 15 + <div v-if="actions.length" class="toggle-user" @click="show = true">切换儿童</div>
14 </div> 16 </div>
15 <div class="address">{{ userInfo.kg_name }}</div> 17 <div class="address">{{ userInfo.kg_name }}</div>
16 </van-col> 18 </van-col>
...@@ -36,7 +38,9 @@ ...@@ -36,7 +38,9 @@
36 <van-col span="1" class="divide">|</van-col> 38 <van-col span="1" class="divide">|</van-col>
37 <van-col span="5" @click="getUnwatch"> 39 <van-col span="5" @click="getUnwatch">
38 <p class="tap-color">未看</p> 40 <p class="tap-color">未看</p>
39 - <p><van-tag round color="red">{{ userInfo.unplay_num }}</van-tag></p> 41 + <p>
42 + <van-tag round color="red">{{ userInfo.unplay_num }}</van-tag>
43 + </p>
40 </van-col> 44 </van-col>
41 </van-row> 45 </van-row>
42 </div> 46 </div>
...@@ -44,11 +48,13 @@ ...@@ -44,11 +48,13 @@
44 48
45 <div class="van-hairline--bottom sub-handle"> 49 <div class="van-hairline--bottom sub-handle">
46 <div> 50 <div>
47 - <my-button v-if="userInfo.status === 'apply'" type="custom" :custom-style="styleObject1" @on-click="goTo('/me/verifyUser')">实名认证</my-button> 51 + <my-button v-if="userInfo.status === 'apply'" type="custom" :custom-style="styleObject1"
52 + @on-click="goTo('/me/verifyUser')">实名认证</my-button>
48 <my-button v-else type="custom" :custom-style="styleObject3">已认证</my-button> 53 <my-button v-else type="custom" :custom-style="styleObject3">已认证</my-button>
49 </div> 54 </div>
50 <div> 55 <div>
51 - <my-button v-if="userInfo.status === 'enable'" type="custom" :custom-style="styleObject2" @on-click="handleUser('ADD')">新增儿童</my-button> 56 + <my-button v-if="userInfo.status === 'enable'" type="custom" :custom-style="styleObject2"
57 + @on-click="handleUser('ADD')">新增儿童</my-button>
52 <my-button v-else type="custom" :custom-style="styleObject4" @on-click="showNotice = true">新增儿童</my-button> 58 <my-button v-else type="custom" :custom-style="styleObject4" @on-click="showNotice = true">新增儿童</my-button>
53 </div> 59 </div>
54 </div> 60 </div>
...@@ -59,8 +65,11 @@ ...@@ -59,8 +65,11 @@
59 <van-col span="12">{{ item.name }}</van-col> 65 <van-col span="12">{{ item.name }}</van-col>
60 <van-col span="12" style="text-align: right; color: #777777;"> 66 <van-col span="12" style="text-align: right; color: #777777;">
61 <span v-if="!item.tag">{{ item.sum }}&nbsp;&nbsp;</span> 67 <span v-if="!item.tag">{{ item.sum }}&nbsp;&nbsp;</span>
62 - <span v-else><van-tag round color="red">{{ item.sum }}</van-tag>&nbsp;&nbsp;</span> 68 + <span v-else>
63 - <van-icon name="arrow" /></van-col> 69 + <van-tag round color="red">{{ item.sum }}</van-tag>&nbsp;&nbsp;
70 + </span>
71 + <van-icon name="arrow" />
72 + </van-col>
64 </van-row> 73 </van-row>
65 </div> 74 </div>
66 </template> 75 </template>
...@@ -78,23 +87,13 @@ ...@@ -78,23 +87,13 @@
78 </template> 87 </template>
79 88
80 <script setup> 89 <script setup>
81 -import { mainStore } from '@/store'
82 -
83 -import icon_avatar from '@images/que-touxiang@2x.png'
84 -
85 -import MyButton from '@/components/MyButton/index.vue'
86 -import NoticeOverlay from '@/components/NoticeOverlay/index.vue'
87 -
88 import { ref, reactive, onMounted } from 'vue' 90 import { ref, reactive, onMounted } from 'vue'
89 -import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router' 91 +import { useRouter } from 'vue-router'
90 -import axios from '@/utils/axios'; 92 +import { _, mainStore } from '@/utils/generatePackage.js'
91 -import $ from 'jquery' 93 +import { MyButton, NoticeOverlay } from '@/utils/generateModules.js'
92 -import _ from 'lodash' 94 +import { icon_avatar } from '@/utils/generateIcons.js'
93 -import { Toast } from 'vant'; 95 +import { changePerformerAPI, myInfoAPI, myPerformerAPI } from '@/api/C/me.js'
94 96
95 -import { changePerformerAPI } from '@/api/C/me.js'
96 -
97 -const $route = useRoute();
98 const $router = useRouter(); 97 const $router = useRouter();
99 98
100 // 删除 keep-alive 缓存 99 // 删除 keep-alive 缓存
...@@ -102,82 +101,12 @@ const store = mainStore(); ...@@ -102,82 +101,12 @@ const store = mainStore();
102 store.changeKeepPages('clear'); 101 store.changeKeepPages('clear');
103 102
104 // onBeforeRouteLeave(() => { 103 // onBeforeRouteLeave(() => {
105 - // 重置位置缓存 104 +// 重置位置缓存
106 - // store.changeScrollTopCollection(0); 105 +// store.changeScrollTopCollection(0);
107 - // store.changeScrollTopLike(0); 106 +// store.changeScrollTopLike(0);
108 // }) 107 // })
109 108
110 -/********** 切换用户功能 START *************/ 109 +const userInfo = ref({});
111 -
112 -const show = ref(false);
113 -let actions = ref([]);
114 -axios.get('/srv/?a=my_performer')
115 -.then(res => {
116 - if (res.data.code === 1) {
117 - actions.value = res.data.data;
118 - } else {
119 - console.warn(res);
120 - if (!res.data.show) return false;
121 - Toast({
122 - icon: 'close',
123 - message: res.data.msg
124 - });
125 - }
126 -})
127 -.catch(err => {
128 - console.error(err);
129 -})
130 -
131 -const toggleUser = () => {
132 - show.value = true;
133 -}
134 -
135 -const onSelect = (item) => {
136 - // 默认情况下点击选项时不会自动收起
137 - // 可以通过 close-on-click-action 属性开启自动收起
138 - show.value = false;
139 - // 切换当前角色
140 - changePerformerAPI({
141 - perf_id: item.id
142 - })
143 - .then(res => {
144 - if (res.data.code === 1) {
145 - // 重新获取新角色的信息
146 - axios.get('/srv/?a=my_info')
147 - .then(res => {
148 - if (res.data.code === 1) {
149 - userInfo.value = res.data.data;
150 - _.each(itemList, item => {
151 - item.sum = userInfo.value[item.key]
152 - });
153 - } else {
154 - console.warn(res);
155 - if (!res.data.show) return false;
156 - Toast({
157 - icon: 'close',
158 - message: res.data.msg
159 - });
160 - }
161 - })
162 - .catch(err => {
163 - console.error(err);
164 - })
165 - } else {
166 - console.warn(res);
167 - if (!res.data.show) return false;
168 - Toast({
169 - icon: 'close',
170 - message: res.data.msg
171 - });
172 - }
173 - })
174 - .catch(err => {
175 - console.error(err);
176 - })
177 -};
178 -
179 -/********** 切换用户功能 END *************/
180 -
181 // 查询用户信息 110 // 查询用户信息
182 const itemList = [ 111 const itemList = [
183 { 112 {
...@@ -226,28 +155,33 @@ const itemList = [ ...@@ -226,28 +155,33 @@ const itemList = [
226 }, 155 },
227 ] 156 ]
228 157
229 -const userInfo = ref({}) 158 +// 异步获取我的列表数量信息
230 -axios.get('/srv/?a=my_info') 159 +async function getMySum() {
231 -.then(res => { 160 + userInfo.value = await myInfoAPI();
232 - if (res.data.code === 1) { 161 + _.each(itemList, item => {
233 - userInfo.value = res.data.data; 162 + item.sum = userInfo.value[item.key]
234 - _.each(itemList, item => { 163 + });
235 - item.sum = userInfo.value[item.key] 164 +}
236 - }); 165 +
237 - } else { 166 +onMounted(async () => {
238 - console.warn(res); 167 + actions.value = await myPerformerAPI();
239 - if (!res.data.show) return false; 168 + getMySum();
240 - Toast({ 169 +});
241 - icon: 'close', 170 +
242 - message: res.data.msg 171 +/********** 切换用户功能 START *************/
243 - }); 172 +const show = ref(false);
244 - } 173 +let actions = ref([]); // 角色列表容器
245 -})
246 -.catch(err => {
247 - console.error(err);
248 -})
249 174
250 -/************************************************ */ 175 +const onSelect = async (item) => {
176 + // 默认情况下点击选项时不会自动收起
177 + // 可以通过 close-on-click-action 属性开启自动收起
178 + show.value = false;
179 + // 切换当前角色
180 + if (await changePerformerAPI({ perf_id: item.id })) {
181 + getMySum()
182 + }
183 +};
184 +/********** 切换用户功能 END *************/
251 185
252 // 跳转相关页面 186 // 跳转相关页面
253 const goTo = (path) => { 187 const goTo = (path) => {
...@@ -335,7 +269,6 @@ const getUnwatch = () => { ...@@ -335,7 +269,6 @@ const getUnwatch = () => {
335 269
336 <script> 270 <script>
337 import mixin from 'common/mixin'; 271 import mixin from 'common/mixin';
338 -import Cookies from 'js-cookie'
339 272
340 export default { 273 export default {
341 mixins: [mixin.init], 274 mixins: [mixin.init],
...@@ -356,66 +289,79 @@ export default { ...@@ -356,66 +289,79 @@ export default {
356 .me-index-page { 289 .me-index-page {
357 .header-wrapper { 290 .header-wrapper {
358 background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%); 291 background: linear-gradient(310deg, #FDD347 0%, #FFED6D 100%);
292 +
359 .info { 293 .info {
360 - padding: 2rem; 294 + padding: 2rem;
361 padding-right: 0; 295 padding-right: 0;
296 +
362 .text-wrapper { 297 .text-wrapper {
363 line-height: 1.5; 298 line-height: 1.5;
299 +
364 .username { 300 .username {
365 - display: inline-block; 301 + display: inline-block;
366 - overflow: auto; 302 + overflow: auto;
367 - font-size: 1.15rem; 303 + font-size: 1.15rem;
368 color: #222222; 304 color: #222222;
369 } 305 }
306 +
370 .toggle-user { 307 .toggle-user {
371 float: right; 308 float: right;
372 - font-size: 0.8rem; 309 + font-size: 0.8rem;
373 - background-color: white; 310 + background-color: white;
374 - border-radius: 15px; 311 + border-radius: 15px;
375 - padding: 5px 10px; 312 + padding: 5px 10px;
376 color: #713610; 313 color: #713610;
377 } 314 }
378 } 315 }
316 +
379 .address { 317 .address {
380 - font-size: 0.85rem; 318 + font-size: 0.85rem;
381 color: #999999; 319 color: #999999;
382 opacity: 0.8; 320 opacity: 0.8;
383 } 321 }
384 } 322 }
323 +
385 .sub-data { 324 .sub-data {
386 - text-align: center; 325 + text-align: center;
387 - overflow: auto; 326 + overflow: auto;
388 padding-bottom: 1rem; 327 padding-bottom: 1rem;
328 +
389 .un-tap-color { 329 .un-tap-color {
390 color: #666666; 330 color: #666666;
391 } 331 }
332 +
392 .tap-color { 333 .tap-color {
393 color: #713610; 334 color: #713610;
394 } 335 }
336 +
395 .divide { 337 .divide {
396 - line-height: 2.5; 338 + line-height: 2.5;
397 - color: #999999; 339 + color: #999999;
398 font-size: 1rem; 340 font-size: 1rem;
399 } 341 }
400 } 342 }
401 } 343 }
344 +
402 .sub-handle { 345 .sub-handle {
403 - padding: 1rem 0; 346 + padding: 1rem 0;
404 - margin: 0 1rem; 347 + margin: 0 1rem;
405 overflow: auto; 348 overflow: auto;
349 +
406 div:first-child { 350 div:first-child {
407 - width: 48%; 351 + width: 48%;
408 - float: left; 352 + float: left;
409 margin-right: 2%; 353 margin-right: 2%;
410 } 354 }
355 +
411 div:last-child { 356 div:last-child {
412 - width: 48%; 357 + width: 48%;
413 - float: left; 358 + float: left;
414 margin-left: 2%; 359 margin-left: 2%;
415 } 360 }
416 } 361 }
362 +
417 .item-list { 363 .item-list {
418 - padding: 1rem 0; 364 + padding: 1rem 0;
419 margin: 0 1rem; 365 margin: 0 1rem;
420 } 366 }
421 } 367 }
......