update

miniprogram/api/login.ts

@@ -4,7 +4,9 @@ import { WX_LOGIN } from '../utils/apiList'
 import { request, Response } from '../utils/http'
 
 interface LoginResType {
-  token: string
+  token: string,
+  sessionKey: string,
+  wxUserId: string
 }
 type RoomDetailRes = Response & {
   data: LoginResType

miniprogram/api/roomList.ts

@@ -10,7 +10,6 @@ type RoomDetailRes = Response & {
   data: LoginResType
 }
 export const login = async (code: string): Promise<LoginResType> => {
-
   const res = await request.get<RoomDetailRes>(WX_LOGIN, {
     code
   })

miniprogram/api/user.ts

@@ -1,13 +1,16 @@
 
 
-import { WX_GET_PHONE, WX_GET_USER } from '../utils/apiList'
+import { WX_GET_PHONE, WX_GET_USER, WX_UPDATE_USER, WX_UPLOAD_URL } from '../utils/apiList'
 import { request, Response } from '../utils/http'
+const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
+// import { UPLOAD, transformUploadResponseOkData } from 'miniprogram-uploader';
 interface PhoneParams {
   code: string
   encryptedData: string
   iv: string
 }
 
+
 interface PhoneResType {
   countryCode: string
   phoneNumber: string
@@ -17,15 +20,23 @@ interface UserResType {
 
 }
 type UserRes = Response & {
-  data: PhoneRes
+  data: GlobalUserInfo
 }
 
 type PhoneRes = Response & {
   data: PhoneResType
 }
 export const getUserInfo = async (): Promise<UserResType> => {
-
   const res = await request.get<UserRes>(WX_GET_USER)
+  const app = getApp<IAppOption>();
+  app.globalData.userInfo = Object.assign({}, app.globalData.userInfo, res.data)
+  wx.setStorageSync('wxUserId', res.data.wxUserId)
+  return res.data
+
+}
+
+export const updateUserInfo = async (params: Partial<GlobalUserInfo>): Promise<UserResType> => {
+  const res = await request.post<UserRes>(WX_UPDATE_USER, params)
   return res.data
 
 }
@@ -33,4 +44,20 @@ export const getUserInfo = async (): Promise<UserResType> => {
 export const decrptPhone = async (params: PhoneParams): Promise<PhoneResType> => {
   const res = await request.get<PhoneRes>(WX_GET_PHONE, params)
   return res.data
+}
+
+export const updateAvatar = async (avatarUrl: string): Promise<string> => {
+  let url = ''
+  wx.uploadFile({
+    filePath: avatarUrl,
+    name: 'file',
+    url: WX_UPLOAD_URL,
+    success: async (res) => {
+      const data = JSON.parse(res.data)
+      url = data.data
+    }
+  })
+  await sleep(500)
+  return Promise.resolve(url)
+
 }

miniprogram/app.ts

@@ -17,9 +17,10 @@ App<IAppOption>({
   globalData: {
     voiceProps,
     userInfo: {
-      nickName: 'Hi,游客',
+      phoneNumber: '',
+      nickName: '',
       country: '',
-      avatarUrl: 'https://platform-wxmall.oss-cn-beijing.aliyuncs.com/upload/20180727/150547696d798c.png',
+      avatarUrl: '',
       gender: 0,
       city: '',
       province: '',
@@ -44,20 +45,45 @@ App<IAppOption>({
   async setLogin(status: boolean): Promise<boolean> {
     this.globalData.isLogin = status
     return Promise.resolve(this.globalData.isLogin)
+  },
+  unwatch(key: string, method: Function) {
+
 
   },
-  onLaunch() {
-    // 展示本地存储能力
-    const logs = wx.getStorageSync('logs') || []
-    logs.unshift(Date.now())
-    wx.setStorageSync('logs', logs)
-
-    // 登录
-    wx.login({
-      success: res => {
-        console.log(res.code)
-        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+  watch(key: string, method: Function) {
+    var obj: GlobalDataProps = this.globalData;
+    type Keys = keyof typeof obj;
+    //加个前缀生成隐藏变量，防止死循环发生
+    let ori = obj[key as Keys]; //obj[key]这个不能放在Object.defineProperty里
+    if (ori) { //处理已经声明的变量，绑定处理
+      method(ori);
+    }
+    Object.defineProperty(obj, key, {
+      configurable: true,
+      enumerable: true,
+      set: function (value) {
+        this['_' + key] = value;
+        console.log('是否会被执行2')
+        method(value);
       },
+      get: function () {
+        // 在其他界面调用key值的时候，这里就会执行。
+        if (typeof this['_' + key] == 'undefined') {
+          if (ori) {
+            //这里读取数据的时候隐藏变量和 globalData设置不一样，所以要做同步处理
+            this['_' + key] = ori;
+            return ori;
+          } else {
+            return undefined;
+          }
+        } else {
+          return this['_' + key];
+        }
+      }
     })
   },
+  onLaunch() {
+ 
+
+  },
 })

miniprogram/pages/my/my.ts

@@ -1,6 +1,6 @@
 // pages/my/my.ts
 import { Login } from '../../api/login'
-
+import { getUserInfo } from '../../api/user'
 Page({
 
   /**
@@ -22,34 +22,56 @@ Page({
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady() {
+    const app = getApp<IAppOption>();
+    app.watch('userInfo', this.updateUserInfo)
+    app.watch('isLogin', this.updateLoginStatus)
+  },
 
+  updateUserInfo(data: GlobalUserInfo) {
+    this.setData({
+      userInfo: data
+    })
   },
 
+  async updateLoginStatus(data: boolean) {
+    this.setData({
+      isLogin: data
+    })
+    if (data) {
+      await getUserInfo();
+    }
+
+  },
   /**
    * 生命周期函数--监听页面显示
    */
-  onShow() {
+  async onShow() {
     this.getTabBar().init();
     const app = getApp<IAppOption>();
     const isLogin = wx.getStorageSync('isLogin')
-    if (!isLogin) {
-      wx.login({
-        success: async function (res) {
-          if (res.code) {
-            const code = res.code
-            const result = await Login(code)
-            if (result.token) {
-              app.setLogin(true)
-              wx.setStorageSync('token', result.token)
-              wx.setStorageSync('isLogin', true)
-            }
-            console.log('result', result)
+    app.setLogin(isLogin)
+  },
+  login() {
+    const app = getApp<IAppOption>();
+    wx.showLoading({
+      title: "登录中..."
+    })
+    wx.login({
+      success: async function (res) {
+        if (res.code) {
+          const code = res.code
+          const result = await Login(code)
+          if (result.token) {
+            app.setLogin(true)
+            wx.hideLoading();
+            wx.setStorageSync('token', result.token)
+            wx.setStorageSync('isLogin', true)
+            wx.setStorageSync('wxUserId', result.wxUserId)
           }
+          console.log('result', result)
         }
-      });
-    }
-
-
+      }
+    });
   },
   /**
    * 生命周期函数--监听页面隐藏

miniprogram/pages/my/my.wxml

@@ -1,13 +1,16 @@
 <!--pages/my/my.wxml-->
 <view class="personal-center">
-  <view class="personal-panel" bindtap="handleToPersonalEdit">
+  <view class="personal-panel">
     <image class="topHeaderBg" src="../../static/images/top.png" mode="aspectFit" />
     <view class="info-box">
-      <t-avatar image="{{avatar}}" class="avatar" size="large" />
-    <view class="personal-info">
-      <text class="title">{{nickname}}</text>
-      <text class="desc">点击查看个人信息</text>
-    </view>
+      <t-avatar image="{{ userInfo.avatarUrl || avatar}}" class="avatar" size="large" />
+      <view class="personal-info" wx:if="{{isLogin}}" bindtap="handleToPersonalEdit">
+        <text class="title">{{userInfo.nickName}}</text>
+        <text class="desc">点击查看个人信息></text>
+      </view>
+      <view class="personal-info" wx:else>
+        <text class="title" bindtap="login">登录/注册</text>
+      </view>
     </view>
 
   </view>

miniprogram/pages/personal/personal.scss

@@ -14,6 +14,10 @@
   --td-button-default-color: #FA5555;
 }
 
+.nickname {
+  --td-input-default-text-color: rgba(0, 0, 0, 0.4)
+}
+
 .phone {
   --td-button-default-color: #rgba(0, 0, 0, 0.4);
   --td-button-font-weight: 300;
@@ -24,11 +28,18 @@
 }
 
 .nickname {
-
   .t-input__control {
     text-align: right;
   }
-  .t-input{
+
+  .t-input {
+    padding: 0;
+  }
+}
+
+.avatar-btn {
+  .t-button {
     padding: 0;
+    height: 96rpx;
   }
 }

miniprogram/pages/personal/personal.ts

@@ -1,6 +1,7 @@
 // pages/personal/personal.ts
 import ActionSheet, { ActionSheetTheme, ActionSheetShowOption } from 'tdesign-miniprogram/action-sheet/index';
-import { decrptPhone } from '../../api/user'
+import { decrptPhone, getUserInfo, updateUserInfo, updateAvatar } from '../../api/user'
+let genderHandler
 
 const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
 Page({
@@ -18,22 +19,31 @@ Page({
   onLoad() {
 
   },
-
+  updateUserInfo(data: GlobalUserInfo) {
+    this.setData({
+      userInfo: data
+    })
+  },
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady() {
+    const app = getApp<IAppOption>();
+    app.watch('userInfo', this.updateUserInfo)
 
   },
 
   /**
    * 生命周期函数--监听页面显示
    */
-  onShow() {
-    const app = getApp<IAppOption>()
+  async onShow() {
+    const isLogin = wx.getStorageSync('isLogin')
+    const app = getApp<IAppOption>();
     this.setData({
-      isLogin: app.globalData.isLogin
+      isLogin: isLogin
     })
+    app.globalData.isLogin = isLogin
+    await getUserInfo();
   },
 
   /**
@@ -47,6 +57,8 @@ Page({
    * 生命周期函数--监听页面卸载
    */
   onUnload() {
+    const app = getApp<IAppOption>();
+    app.unwatch('userInfo', this.updateUserInfo)
 
   },
 
@@ -70,6 +82,28 @@ Page({
   onShareAppMessage() {
 
   },
+  handleLogout() {
+    const app = getApp<IAppOption>();
+    this.setData({
+      isLogin: false
+    })
+    wx.setStorageSync('isLogin', false)
+    wx.setStorageSync('token', '')
+    wx.showToast({
+      title: '登出成功！'
+    });
+    app.globalData.isLogin = false
+    app.globalData.userInfo = {
+      nickName: "",
+      gender: 0,
+      phoneNumber: "",
+      avatarUrl: '',
+      city: '',
+      country: '',
+      language: 'zh_CN',
+      province: ''
+    }
+  },
   async checkSession(): Promise<boolean> {
     let isExist = false
     wx.checkSession({
@@ -98,6 +132,14 @@ Page({
           encryptedData: encryptedData
         })
         console.log('res', res.phoneNumber)
+        if (res.phoneNumber) {
+          const wxUserId = wx.getStorageSync('wxUserId');
+          await updateUserInfo({
+            wxUserId,
+            phoneNumber: res.phoneNumber
+          })
+          await getUserInfo();
+        }
       }
     }
   },
@@ -115,11 +157,53 @@ Page({
 
       ],
     };
-    const handler = ActionSheet.show(basicListOption);
+    genderHandler = ActionSheet.show(basicListOption);
   },
-  handleSelected(event: WechatMiniprogram.TouchEvent) {
-    console.log('event', event)
+  async handleSelected(event: WechatMiniprogram.TouchEvent) {
+
     const { index } = event.detail
+    if (index > -1) {
+      debugger
+      console.log('index', index)
+      const wxUserId = wx.getStorageSync('wxUserId');
+      await updateUserInfo({
+        wxUserId,
+        gender: index + 1
+      })
+      await getUserInfo();
+    }
+
+
+  },
+
+  async onChooseAvatar(e: WechatMiniprogram.TouchEvent) {
+    const {
+      avatarUrl
+    } = e.detail
+    const url = await updateAvatar(avatarUrl)
+    console.log('url', url)
+    const wxUserId = wx.getStorageSync('wxUserId');
+    await updateUserInfo({
+      wxUserId,
+      avatarUrl: url
+    })
+    await getUserInfo();
+  },
+  // async changeNickName(e: WechatMiniprogram.TouchEvent) {
+  //   const { value } = e.detail
+  //   console.log('value-2', value)
+  // },
+  async updateNickName(e: WechatMiniprogram.TouchEvent) {
+    const { value } = e.detail
+    console.log('value-1', value)
+    if (value) {
+      const wxUserId = wx.getStorageSync('wxUserId');
+      await updateUserInfo({
+        wxUserId,
+        nickName: value
+      })
+      await getUserInfo();
+    }
 
   }
 })

miniprogram/pages/personal/personal.wxml

@@ -2,25 +2,37 @@
 <view class="personal-view">
   <t-cell title="头像" arrow hover>
     <view class="avatar" slot="note">
-      <t-avatar image="{{avatar}}" class="avatar" size="medium" />
+      <t-button wx:if="{{userInfo.avatarUrl}}" class="avatar-btn" variant="text" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
+        <t-avatar image="{{userInfo.avatarUrl}}" class="avatar" size="medium" />
+      </t-button>
+
+      <t-button wx:else class="avatar-btn" variant="text" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
+        <t-avatar image="{{avatar}}" class="avatar" size="medium" />
+      </t-button>
     </view>
   </t-cell>
 
   <t-cell title="昵称" hover arrow>
-    <t-input type='nickname' class="nickname" placeholder="请输入昵称" slot='note'></t-input>
+    <t-input value="{{userInfo.nickName}}" bind:blur='updateNickName' type='nickname' class="nickname" placeholder="请输入昵称" slot='note'>
+    </t-input>
   </t-cell>
 
-  <t-cell title="性别" hover note="女" arrow bind:click="handleSexSelectShow">
+  <t-cell title="性别" hover arrow>
+    <view slot='note'>
+      <text wx:if="{{userInfo.gender == 1}}" bind:tap="handleSexSelectShow">男性</text>
+      <text wx:if="{{userInfo.gender == 2}}" bind:tap="handleSexSelectShow">女性</text>
+      <t-button wx:if="{{userInfo.gender == 0}}" class="phone" variant="text" size="small" bind:tap="handleSexSelectShow">点击选择</t-button>
+    </view>
   </t-cell>
 
   <t-cell title="绑定手机" hover arrow>
     <view slot='note'>
-      <!-- <text>13631262857</text> -->
-      <t-button class="phone" variant="text" size="small" open-type="getPhoneNumber" bindgetphonenumber="handleGetPhoneNumber">点击绑定</t-button>
+      <text wx:if="{{userInfo.phoneNumber}}">{{userInfo.phoneNumber}}</text>
+      <t-button wx:else class="phone" variant="text" size="small" open-type="getPhoneNumber" bindgetphonenumber="handleGetPhoneNumber">点击绑定</t-button>
     </view>
   </t-cell>
-  <view class="btn-container">
-    <t-button block size="large" class="btn">退出登录</t-button>
+  <view class="btn-container" wx:if="{{isLogin}}">
+    <t-button block size="large" class="btn" bindtap="handleLogout">退出登录</t-button>
   </view>
-  <t-action-sheet id="t-action-sheet" bind:selected="handleSelected"  bind:cancel="handleCancel"/>
+  <t-action-sheet id="t-action-sheet" bind:selected="handleSelected" bind:cancel="handleCancel" />
 </view>

miniprogram/utils/apiList.ts

@@ -5,4 +5,7 @@ export const LEAVE_ROOM = '/takelook/inOrOutRoom'
 export const WX_LOGIN = '/takelook/wxApi/wxLogin'
 export const WX_GET_PHONE = '/takelook/wxApi/getPhone'
 export const WX_UPDATE_USER = '/takelook/wxApi/updateUser'
-export const WX_GET_USER = '/takelook/wxApi/updateUser'
+export const WX_GET_USER = '/takelook/wxApi/userInfo'
+
+
+export const WX_UPLOAD_URL = 'https://v4-test.4dkankan.com/takelook/upload/file'

miniprogram/utils/http.ts

@@ -1,6 +1,5 @@
 import { setConfig, REQUEST, transformRequestResponseOkData, transformRequestSendDefault } from 'miniprogram-network';
 
-
 REQUEST.Defaults.transformResponse = transformRequestResponseOkData
 
 setConfig('baseURL', 'https://v4-test.4dkankan.com');
@@ -9,7 +8,7 @@ setConfig('baseURL', 'https://v4-test.4dkankan.com');
 REQUEST.Defaults.transformSend = async (options) => {
   // const token = await getAuthTokenPromise(); // 异步方法
   const token = wx.getStorageSync('token') || '';
-    (options as any).headers['token'] = token;
+  (options as any).headers['wxToken'] = token;
   return transformRequestSendDefault(options);
 };
 

typings/index.d.ts

@@ -6,19 +6,28 @@ interface VoiceProps {
   pushUrl?: boolean
 }
 
+interface GlobalUserInfo extends WechatMiniprogram.UserInfo {
+  phoneNumber?: string
+  wxUserId?: string
+}
+
 interface LoginProps {
   isLogin: boolean
 }
+
+interface GlobalDataProps {
+  userInfo?: GlobalUserInfo,
+  voiceProps?: VoiceProps,
+  token: string,
+  isLogin: boolean
+}
 interface IAppOption {
-  globalData: {
-    userInfo?: WechatMiniprogram.UserInfo,
-    voiceProps?: VoiceProps,
-    token: string,
-    isLogin: boolean
-  }
+  globalData: GlobalDataProps
   userInfoReadyCallback?: WechatMiniprogram.GetUserInfoSuccessCallback,
   addVoicePropsListener?: (cb: Function) => void
   removeVoicePropsListener?: (cb: Function) => void
   setVoiceProps?: (param: VoiceProps) => void
   setLogin: (status: boolean) => Promise<boolean>
+  watch: (key: string, method: Function) => void
+  unwatch (key: string, method: Function) => void
 }