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

+/*
+ * @Date: 2022-10-20 13:15:00
+ * @LastEditors: hookehuyr hookehuyr@gmail.com
+ * @LastEditTime: 2022-10-21 17:29:36
+ * @FilePath: /swx/src/api/Member/index.js
+ * @Description: 主办方用户
+ */
+import { fn, fetch } from '../fn';
+
+const Api = {
+  MEMBER_INFO: '/srv/?a=member_info',
+}
+
+/**
+ * @description: 用户详情
+ * @returns
+ */
+export const infoMemberAPI = (params) => fn(fetch.get(Api.MEMBER_INFO, params));

@@ -47,8 +47,8 @@
         <view v-for="(item, index) in reg_list" :key="index" class="list-item">
           <van-row>
             <van-col span="6">
-              <view v-if="item.avatar" @tap="goToUserInfo()" class="avatar" :style="{ backgroundImage: `url(${item.avatar})` }"></view>
-              <view v-else @tap="goToUserInfo()" class="avatar" :style="{ backgroundImage: `url('https://img.yzcdn.cn/vant/cat.jpeg')` }"></view>
+              <view v-if="item.avatar" @tap="goToUserInfo(item.member_id)" class="avatar" :style="{ backgroundImage: `url(${item.avatar})` }"></view>
+              <view v-else @tap="goToUserInfo(item.member_id)" class="avatar" :style="{ backgroundImage: `url('https://img.yzcdn.cn/vant/cat.jpeg')` }"></view>
             </van-col>
             <van-col span="14">
               <view class="content">
@@ -98,9 +98,9 @@ const onPhoneClick = (number) => {
   })
 }
 
-const goToUserInfo = () => {
+const goToUserInfo = (member_id) => {
   Taro.navigateTo({
-    url: '../userInfo/index'
+    url: '../userInfo/index?member_id=' + member_id
   })
 }
 

@@ -39,6 +39,6 @@
     /*调整下划线的宽度占百分之百  高度是3px */
     background-size: 100% 1vw;
     /* 调整下划线的起始位置 左侧是0 上边是1.15em */
-    background-position: 0 1.1rem;
+    background-position: 0 1.3rem;
   }
 }

 <!--
  * @Date: 2022-09-29 16:32:03
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-30 14:14:44
+ * @LastEditTime: 2022-10-21 18:18:46
  * @FilePath: /swx/src/pages/userInfo/index.vue
- * @Description: 文件描述
+ * @Description: 用户资料
 -->
 <template>
   <view class="user-info-page">
@@ -12,10 +12,10 @@
         <van-row>
           <van-col span="17">
             <view style="position: relative;">
-              <AtAvatar circle size="large" image='https://jdc.jd.com/img/200' style="display: inline-block;"></AtAvatar>
+              <van-image :round="true" width="4rem" height="4rem" :src="avatar" />
               <view style="display: inline-block; position: absolute; top: 30%; left: 30%;">
-                <text style="font-size: 1.15rem;">净妙</text>
-                <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" />
+                <text style="font-size: 1.15rem;">{{ name }}</text>
+                <!-- <van-icon :name="icon_vip" size="1rem" color="" class="vip-icon" /> -->
               </view>
             </view>
           </van-col>
@@ -27,20 +27,20 @@
       <view style="background-color: white; margin: 1rem; padding: 1rem; border-radius: 1rem;">
         <view class="header-info">
           <view class="activity">
-            <view><text style="font-size: 1.25rem;">20</text>次</view>
+            <view><text style="font-size: 1.25rem;">{{ reg_count }}</text>次</view>
             <view>
               <van-icon :name="icon_join" size="1.5rem" color="" style="vertical-align: sub;" />
               <text style="font-size: 0.9rem; color: #999999;">参加活动</text>
             </view>
           </view>
           <view class="job">
-            <text style="font-size: 1.25rem;">30-40</text>岁
+            <text style="font-size: 1.25rem;">{{ age_group }}</text>
             <view>
               <text style="font-size: 0.9rem; color: #999999;">年龄</text>
             </view>
           </view>
           <view class="sign">
-            <view><text style="font-size: 1.25rem;">男士</text></view>
+            <view><text style="font-size: 1.25rem;">{{ gender }}</text></view>
             <view>
               <text style="font-size: 0.9rem; color: #999999;">性别</text>
             </view>
@@ -143,8 +143,29 @@ const onSubmit = (val) => {
 
 <script>
 import "./index.less";
+import { infoMemberAPI } from '@/api/Member/index';
+import { getCurrentPageParam } from "@/utils/weapp";
 
 export default {
   name: "userInfoPage",
+  data () {
+    return {
+      avatar: '',
+      name: '',
+      reg_count: '',
+      age_group: '',
+      gender: '',
+    }
+  },
+  async onShow () {
+    const { code, data } = await infoMemberAPI({ i: getCurrentPageParam().member_id });
+    if (code) {
+      this.name = data.member.name;
+      this.avatar = data.member.avatar ? data.member.avatar : 'https://jdc.jd.com/img/200';
+      this.reg_count = data.reg_count;
+      this.age_group = data.member.age_group;
+      this.gender = data.member.gender === 'man' ?  '男士' : '女士';
+    }
+  }
 };
 </script>