Hooke / swx_weapp

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
6632d5c0 1 parent 006663ed

✨ feat(用户资料): 头部数据显示API联调

Inline Side-by-side
Showing 4 changed files with 52 additions and 13 deletions
1 +/*
2 + * @Date: 2022-10-20 13:15:00
3 + * @LastEditors: hookehuyr hookehuyr@gmail.com
4 + * @LastEditTime: 2022-10-21 17:29:36
5 + * @FilePath: /swx/src/api/Member/index.js
6 + * @Description: 主办方用户
7 + */
8 +import { fn, fetch } from '../fn';
9 +
10 +const Api = {
11 + MEMBER_INFO: '/srv/?a=member_info',
12 +}
13 +
14 +/**
15 + * @description: 用户详情
16 + * @returns
17 + */
18 +export const infoMemberAPI = (params) => fn(fetch.get(Api.MEMBER_INFO, params));
...@@ -47,8 +47,8 @@ ...@@ -47,8 +47,8 @@
47 <view v-for="(item, index) in reg_list" :key="index" class="list-item"> 47 <view v-for="(item, index) in reg_list" :key="index" class="list-item">
48 <van-row> 48 <van-row>
49 <van-col span="6"> 49 <van-col span="6">
50 - <view v-if="item.avatar" @tap="goToUserInfo()" class="avatar" :style="{ backgroundImage: `url(${item.avatar})` }"></view> 50 + <view v-if="item.avatar" @tap="goToUserInfo(item.member_id)" class="avatar" :style="{ backgroundImage: `url(${item.avatar})` }"></view>
51 - <view v-else @tap="goToUserInfo()" class="avatar" :style="{ backgroundImage: `url('https://img.yzcdn.cn/vant/cat.jpeg')` }"></view> 51 + <view v-else @tap="goToUserInfo(item.member_id)" class="avatar" :style="{ backgroundImage: `url('https://img.yzcdn.cn/vant/cat.jpeg')` }"></view>
52 </van-col> 52 </van-col>
53 <van-col span="14"> 53 <van-col span="14">
54 <view class="content"> 54 <view class="content">
...@@ -98,9 +98,9 @@ const onPhoneClick = (number) => { ...@@ -98,9 +98,9 @@ const onPhoneClick = (number) => {
98 }) 98 })
99 } 99 }
100 100
101 -const goToUserInfo = () => { 101 +const goToUserInfo = (member_id) => {
102 Taro.navigateTo({ 102 Taro.navigateTo({
103 - url: '../userInfo/index' 103 + url: '../userInfo/index?member_id=' + member_id
104 }) 104 })
105 } 105 }
106 106
......
...@@ -39,6 +39,6 @@ ...@@ -39,6 +39,6 @@
39 /*调整下划线的宽度占百分之百 高度是3px */ 39 /*调整下划线的宽度占百分之百 高度是3px */
40 background-size: 100% 1vw; 40 background-size: 100% 1vw;
41 /* 调整下划线的起始位置 左侧是0 上边是1.15em */ 41 /* 调整下划线的起始位置 左侧是0 上边是1.15em */
42 - background-position: 0 1.1rem; 42 + background-position: 0 1.3rem;
43 } 43 }
44 } 44 }
......
1 <!-- 1 <!--
2 * @Date: 2022-09-29 16:32:03 2 * @Date: 2022-09-29 16:32:03
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2022-09-30 14:14:44 4 + * @LastEditTime: 2022-10-21 18:18:46
5 * @FilePath: /swx/src/pages/userInfo/index.vue 5 * @FilePath: /swx/src/pages/userInfo/index.vue
6 - * @Description: 文件描述 6 + * @Description: 用户资料
7 --> 7 -->
8 <template> 8 <template>
9 <view class="user-info-page"> 9 <view class="user-info-page">
...@@ -12,10 +12,10 @@ ...@@ -12,10 +12,10 @@
12 <van-row> 12 <van-row>
13 <van-col span="17"> 13 <van-col span="17">
14 <view style="position: relative;"> 14 <view style="position: relative;">
15 - <AtAvatar circle size="large" image='https://jdc.jd.com/img/200' style="display: inline-block;"></AtAvatar> 15 + <van-image :round="true" width="4rem" height="4rem" :src="avatar" />
16 <view style="display: inline-block; position: absolute; top: 30%; left: 30%;"> 16 <view style="display: inline-block; position: absolute; top: 30%; left: 30%;">
17 - <text style="font-size: 1.15rem;">净妙</text> 17 + <text style="font-size: 1.15rem;">{{ name }}</text>
18 - <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" /> 18 + <!-- <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" /> -->
19 </view> 19 </view>
20 </view> 20 </view>
21 </van-col> 21 </van-col>
...@@ -27,20 +27,20 @@ ...@@ -27,20 +27,20 @@
27 <view style="background-color: white; margin: 1rem; padding: 1rem; border-radius: 1rem;"> 27 <view style="background-color: white; margin: 1rem; padding: 1rem; border-radius: 1rem;">
28 <view class="header-info"> 28 <view class="header-info">
29 <view class="activity"> 29 <view class="activity">
30 - <view><text style="font-size: 1.25rem;">20</text>次</view> 30 + <view><text style="font-size: 1.25rem;">{{ reg_count }}</text>次</view>
31 <view> 31 <view>
32 <van-icon :name="icon_join" size="1.5rem" color="" style="vertical-align: sub;" /> 32 <van-icon :name="icon_join" size="1.5rem" color="" style="vertical-align: sub;" />
33 <text style="font-size: 0.9rem; color: #999999;">参加活动</text> 33 <text style="font-size: 0.9rem; color: #999999;">参加活动</text>
34 </view> 34 </view>
35 </view> 35 </view>
36 <view class="job"> 36 <view class="job">
37 - <text style="font-size: 1.25rem;">30-40</text>岁 37 + <text style="font-size: 1.25rem;">{{ age_group }}</text>
38 <view> 38 <view>
39 <text style="font-size: 0.9rem; color: #999999;">年龄</text> 39 <text style="font-size: 0.9rem; color: #999999;">年龄</text>
40 </view> 40 </view>
41 </view> 41 </view>
42 <view class="sign"> 42 <view class="sign">
43 - <view><text style="font-size: 1.25rem;">男士</text></view> 43 + <view><text style="font-size: 1.25rem;">{{ gender }}</text></view>
44 <view> 44 <view>
45 <text style="font-size: 0.9rem; color: #999999;">性别</text> 45 <text style="font-size: 0.9rem; color: #999999;">性别</text>
46 </view> 46 </view>
...@@ -143,8 +143,29 @@ const onSubmit = (val) => { ...@@ -143,8 +143,29 @@ const onSubmit = (val) => {
143 143
144 <script> 144 <script>
145 import "./index.less"; 145 import "./index.less";
146 +import { infoMemberAPI } from '@/api/Member/index';
147 +import { getCurrentPageParam } from "@/utils/weapp";
146 148
147 export default { 149 export default {
148 name: "userInfoPage", 150 name: "userInfoPage",
151 + data () {
152 + return {
153 + avatar: '',
154 + name: '',
155 + reg_count: '',
156 + age_group: '',
157 + gender: '',
158 + }
159 + },
160 + async onShow () {
161 + const { code, data } = await infoMemberAPI({ i: getCurrentPageParam().member_id });
162 + if (code) {
163 + this.name = data.member.name;
164 + this.avatar = data.member.avatar ? data.member.avatar : 'https://jdc.jd.com/img/200';
165 + this.reg_count = data.reg_count;
166 + this.age_group = data.member.age_group;
167 + this.gender = data.member.gender === 'man' ? '男士' : '女士';
168 + }
169 + }
149 }; 170 };
150 </script> 171 </script>
......