列表渲染

project.config.json

@@ -27,7 +27,7 @@
 			"outputPath": ""
 		},
 		"useIsolateContext": true,
-		"useCompilerModule": false,
+		"useCompilerModule": true,
 		"userConfirmedUseCompilerModuleSwitch": false
 	},
 	"compileType": "miniprogram",

src/app.config.js

@@ -1,5 +1,6 @@
 export default {
   pages: [
+
     'pages/HuiShengHuo/index', // 荟生活
     'pages/HuiShengHuo/ActivityList/index', // 荟生活-活动列表
     'pages/HuiShengHuo/ActivityList/ActivityDetail/index', // 荟生活-活动列表-活动详情
@@ -18,8 +19,8 @@ export default {
     'pages/HuiAiXin/EnergyStory/EnergyStoryDetail/index', // 荟爱心-正能量事迹-详情
 
     'pages/WoDe/index', // 我的
-    'pages/WoDe/MyActivityList/index', // 我的-活动列表
     'pages/WoDe/Feedback/index', // 我的-反馈
+    'pages/WoDe/MyActivityList/index', // 我的-活动列表
 
     'pages/SignIn/index' // 登录页
 

src/components/GetUserIcon/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <view class="GetUserIcon" v-show="Show">
+    <view class="centerLabel">
+      <image mode="widthFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/morentouxiang.png"></image>
+      <text>授权头像</text>
+      <button open-type="getUserInfo" @tap="ToGetUserIcon">授权头像</button>
+    </view>
+  </view>
+</template>
+
+<script>
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapUserState, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
+export default {
+  name: 'GetUserIcon',
+  data () {
+    return {
+      Show: false
+    }
+  },
+  computed: {
+    ...mapUserState({
+      UserInfo: x => x.UserInfo // 用户信息
+    })
+  },
+  created () {
+    this.Init() // 初始化
+  },
+  methods: {
+    ...mapUserMutations([
+      'EditUserInfo'
+    ]),
+    Init () { // 初始化
+      let _that = this
+      wx.getSetting({ // 校验用户是否已授权
+        success (res) {
+          if (res.authSetting['scope.userInfo']) { // 已授权时，获取用户信息
+            wx.authorize({
+              scope: 'scope.userInfo',
+              success () {
+                wx.getUserInfo({ // 授权成功时，获取用户信息
+                  success (res) {
+                    _that.EditUserInfo({ name: 'Icon', value: res.userInfo.avatarUrl })
+                    _that.EditUserInfo({ name: 'Name', value: res.userInfo.nickName })
+                  }
+                })
+              }
+            })
+          } else { // 未授权时，显示弹窗
+            _that.Show = true
+          }
+        }
+      })
+    },
+    ToGetUserIcon () { // 获取用户头像
+      let _that = this
+      wx.authorize({
+        scope: 'scope.userInfo',
+        success () {
+          wx.getUserInfo({ // 授权成功时，获取用户信息
+            success (res) {
+              _that.EditUserInfo({ name: 'Icon', value: res.userInfo.avatarUrl })
+              _that.EditUserInfo({ name: 'Name', value: res.userInfo.nickName })
+              _that.Show = false
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.GetUserIcon {
+  width: 100%;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  z-index: 100;
+  background: rgba(0, 0, 0, 0.6);
+  > view {
+    width: 60%;
+    padding: 20px 0 0;
+    background: #fff;
+    border-radius: 10px;
+    overflow: hidden;
+    > image {
+      width: 120px;
+      margin: 0 auto;
+      display: block;
+    }
+    > text {
+      font-size: 32px;
+      color: #07c160;
+      line-height: 80px;
+      display: block;
+      text-align: center;
+      border-top: 2px solid #f5f5f5;
+      margin-top: 40px;
+      &:active {
+        background: #f5f5f5;
+      }
+    }
+    > button {
+      width: 100%;
+      height: 80px;
+      opacity: 0;
+      display: block;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+    }
+  }
+}
+</style>

src/pages/SignIn/index.vue

@@ -2,12 +2,13 @@
   <view class="page DengLu">
     <image mode="widthFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/signinbg.png"></image>
     <view class="Btn flex-h">
-      <view class="flex-item"><text>取消登录</text></view>
+      <view class="flex-item"><text @tap="Back">取消登录</text></view>
       <view class="flex-item"><text>授权登录</text></view>
+      <button open-type="getPhoneNumber" v-if="Agree && UserInfo !== null && UserInfo.PersonId !== undefined" @getphonenumber="GetPhoneNumber">授权登录</button>
     </view>
     <view class="Agree flex-h">
-      <text class="iconfont icongouxuan"></text>
-      <text class="iconfont iconweigouxuan"></text>
+      <text class="iconfont icongouxuan" v-if="Agree" @tap="Agree = false"></text>
+      <text class="iconfont iconweigouxuan" v-else @tap="Agree = true"></text>
       <view class="flex-item">
         <text>我已认真阅读，理解并同意<text>《用户协议及隐私政策》</text></text>
       </view>
@@ -16,20 +17,58 @@
 </template>
 
 <script>
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapUserState, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: 'DengLu',
   data () {
     return {
-
+      DataLock: false,
+      Agree: false
     }
   },
+  computed: {
+    ...mapUserState({
+      UserInfo: x => x.UserInfo // 用户信息
+    })
+  },
   components: {
   },
   created () {
     this.Init()
   },
   methods: {
+    ...mapUserMutations([
+      'EditUserInfo'
+    ]),
     Init () {
+      this.ToLogin()
+    },
+    Back () {
+      wx.navigateBack({ changed: true })
+    },
+    ToLogin () {
+      let _that = this
+      wx.login({
+        success (res) {
+          wx.request({ // 获取用户信息
+            url: `https://dev.fangdeal.cn/liyuanhui/wx/login?code=${res.code}`,
+            method: 'post',
+            success: (res) => {
+              _that.EditUserInfo({ name: 'PersonId', value: res.data.data.person.personId })
+              _that.EditUserInfo({ name: 'OpenId', value: res.data.data.person.openId })
+            }
+          })
+        }
+      })
+    },
+    GetPhoneNumber (e) {
+      if (this.DataLock) return
+      this.DataLock = true
+      console.log(e)
+      console.log(e.detail.errMsg)
+      console.log(e.detail.iv)
+      console.log(e.detail.encryptedData)
     }
   }
 }

src/pages/SignIn/page.scss

@@ -11,7 +11,9 @@
     margin-top: 40px;
     align-items: center;
     overflow: visible;
+    position: relative;
     > view {
+      position: relative;
       margin-left: 40px;
       overflow: visible;
       &:nth-child(1) {
@@ -35,6 +37,16 @@
         text-align: center;
       }
     }
+    > button {
+      width: 40%;
+      display: block;
+      position: absolute;
+      font-size: 28px;
+      line-height: 80px;
+      right: 76px;
+      top: 0;
+      opacity: 0;
+    }
   }
   > .Agree {
     padding: 0 76px;
@@ -52,7 +64,7 @@
         font-size: 24px;
         color: #333;
         line-height: 40px;
-        >text {
+        > text {
           display: inline-block;
           font-size: 24px;
           color: #333;

src/pages/WoDe/index.vue

@@ -7,12 +7,13 @@
       <view class="centerLabel">
         <view class="flex-h">
           <view class="Icon">
-            <image mode="widthFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/morentouxiang.png"></image>
+            <image mode="widthFix" v-if="this.UserInfo === null || this.UserInfo.Icon === undefined || this.UserInfo.Icon === null" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/morentouxiang.png"></image>
+            <image mode="widthFix" v-else :src="this.UserInfo.Icon"></image>
           </view>
           <view class="flex-item">
-            <!-- <navigator url="../SignIn/index" hover-class="other-navigator-hover" class="SiginIn">立即登录</navigator> -->
-            <text>用户名</text>
-            <text>123456789</text>
+            <navigator url="../SignIn/index" hover-class="other-navigator-hover" class="SiginIn" v-if="UserInfo === null || UserInfo.Phone === undefined || UserInfo.Phone === null">立即登录</navigator>
+            <text v-else>{{UserInfo.Name}}</text>
+            <text v-else>{{UserInfo.Phone}}</text>
           </view>
         </view>
       </view>
@@ -21,36 +22,56 @@
     <!-- tab -->
     <view class="TabList">
       <navigator url="./MyActivityList/index" hover-class="other-navigator-hover" class="flex-h">
-        <view><image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/wodeicon1.png"></image></view>
+        <view>
+          <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/wodeicon1.png"></image>
+        </view>
         <text class="flex-item">我的报名</text>
         <text class="iconfont iconjiantouright"></text>
       </navigator>
       <navigator url="./Feedback/index" hover-class="other-navigator-hover" class="flex-h">
-        <view><image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/wodeicon2.png"></image></view>
+        <view>
+          <image mode="heightFix" src="https://cjgw.oss-cn-hangzhou.aliyuncs.com/ygcxxfb/image/wodeicon2.png"></image>
+        </view>
         <text class="flex-item">意见反馈</text>
         <text class="iconfont iconjiantouright"></text>
       </navigator>
     </view>
 
+    <!-- 授权头像获取弹窗 -->
+    <GetUserIcon></GetUserIcon>
+
   </view>
 </template>
 
 <script>
-
+import GetUserIcon from '../../components/GetUserIcon/index'
+import { createNamespacedHelpers } from 'vuex'
+const { mapState: mapUserState, mapActions: mapUserActions, mapMutations: mapUserMutations } = createNamespacedHelpers('user')
 export default {
   name: 'WoDe',
   data () {
     return {
-
     }
   },
+  computed: {
+    ...mapUserState({
+      UserInfo: x => x.UserInfo // 用户信息
+    })
+  },
   components: {
+    GetUserIcon
   },
   created () {
-    this.Init()
+    this.Init() // 初始化
   },
   methods: {
-    Init () {
+    ...mapUserActions([
+      ''
+    ]),
+    ...mapUserMutations([
+      ''
+    ]),
+    Init () { // 初始化
     }
   }
 }

src/pages/WoDe/page.scss

@@ -87,4 +87,13 @@
       }
     }
   }
+  > .GetUserIconPopup {
+    width: 100%;
+    position: fixed;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 100;
+    background: rgba(0, 0, 0, 0.5);
+  }
 }

src/store/user/index.js

@@ -5,11 +5,15 @@ import ToolClass from '../../util/PublicMethod/index'
 export default {
   namespaced: true,
   state: {
-    UserPlaylist: [] // 用户片单
+    UserInfo: null // 用户信息
   },
   mutations: {
     UpdateUserPlaylist (state, data) {
       state.UserPlaylist = data || []
+    },
+    EditUserInfo (state, data) { // 编辑用户信息
+      state.UserInfo = state.UserInfo === null ? {} : state.UserInfo
+      state.UserInfo[data.name] = data.value
     }
   },
   actions: {

src/util/Api/index.js

@@ -4,43 +4,43 @@ const prefix = process.env.NODE_ENV === 'production' ? '' : ''
 const Api = {
   GetIndexBanner: { // 获取首页banner
     method: 'get',
-    url: `${prefix}/pieceGroup/listGroup`
+    url: `${prefix}/news`
   },
   GetPhotoList: { // 获取照片墙列表
     method: 'get',
-    url: `${prefix}/pieceGroup/listGroup`
+    url: `${prefix}/news`
   },
   GetActivityList: { // 获取活动列表
     method: 'get',
-    url: `${prefix}/pieceGroup/listGroup`
+    url: `${prefix}/news`
   },
   GetHuiQuanYiBanner: { // 获取荟权益banner
     method: 'get',
-    url: `${prefix}/pieceGroup/listGroup`
+    url: `${prefix}/news`
   },
   GetYeZhuZiXunList: { // 获取业主资讯列表
     method: 'get',
-    url: `${prefix}/pieceGroup/listGroup`
+    url: `${prefix}/news`
   },
   GetHuiAiXinBanner: { // 获取荟爱心banner
     method: 'get',
-    url: `${prefix}/pieceGroup/listGroup`
+    url: `${prefix}/news`
   },
   GetMingXingYeZhuList: { // 获取明星业主列表
     method: 'get',
-    url: `${prefix}/pieceGroup/listGroup`
+    url: `${prefix}/news`
   },
   GetZhengNengLiangShiJiList: { // 获取正能量事迹列表
     method: 'get',
-    url: `${prefix}/pieceGroup/listGroup`
+    url: `${prefix}/news`
   },
   GetHuoDongNavList: { // 获取活动类型列表
     method: 'get',
-    url: `${prefix}/pieceGroup/listGroup`
+    url: `${prefix}/news`
   },
   GetUserActivityList: { // 获取我的活动列表
     method: 'get',
-    url: `${prefix}/pieceGroup/listGroup`
+    url: `${prefix}/news`
   }
 }
 

src/util/PublicMethod/index.js

@@ -13,7 +13,6 @@ const ToolClass = {
   WxRequest (config) { // 网络请求
     let urlData = qs.stringify(config.urlData)
     let queryData = qs.stringify(config.queryData)
-    // 判断是通过斜杠传参
     if (config.url.indexOf(':') > -1) {
       if (typeof config.urlData === 'object') {
         config.url = this.ReplaceURLParams(config.url, config.urlData)
@@ -24,16 +23,34 @@ const ToolClass = {
     if (queryData) {
       config.url += '?' + queryData
     }
+    let Header = {}
+    if (wx.getStorageSync('token') !== '') { // 本地获取token
+      Header['X-Authorization-JWT'] = wx.getStorageSync('token')
+    }
     wx.request({
-      url: `http://121.40.96.72:91${config.url}`,
+      url: `https://dev.fangdeal.cn/liyuanhui/wx${config.url}`,
       method: config.method,
       ...(config.data || {}),
+      header: { ...Header },
       success: (res) => {
+        console.log(res)
+        if (res.header['X-Authorization-JWT'] !== undefined) { // 更新本地存储token
+          wx.setStorageSync('token', res.header['X-Authorization-JWT'])
+        }
+        if (res.data.code - 0 === 1001) { // token失效
+          wx.navigateTo({url: '../../SignIn/index'})
+        }
         if (config.success !== undefined) {
           config.success(res)
         }
       },
       fail: (res) => {
+        if (res.header['X-Authorization-JWT'] !== undefined) { // 更新本地存储token
+          wx.setStorageSync('token', res.header['X-Authorization-JWT'])
+        }
+        if (res.data.code - 0 === 1001) { // token失效
+          wx.navigateTo({url: '../../SignIn/index'})
+        }
         if (config.error !== undefined) {
           config.error(res)
         }