授权微信头像

app.js

@@ -1,7 +1,8 @@
 //app.js
 import $api from './utils/api'
 import {
-  BASEIMGURL
+  BASEIMGURL,
+  BASEIMGURL1
 } from './utils/config';
 
 
@@ -14,6 +15,11 @@ App({
   onLaunch() {
     console.log('v1.0')
     const that = this;
+    wx.getSystemInfo({
+      success:function(res){
+        that.globalData.systemInfo = res;
+      }
+    })
     if (wx.canIUse('getUpdateManager')) {
       const updateManager = wx.getUpdateManager()
       updateManager.onCheckForUpdate(function (res) {
@@ -62,18 +68,7 @@ App({
       }
     });
 
-    wx.getSystemInfo({
-      success:function(res){
-        that.globalData.systemInfo = res;
-        // if(res.platform == "devtools"){
-        //     PC
-        // }else if(res.platform == "ios"){
-        //     IOS
-        // }else if(res.platform == "android"){
-        //     android
-        // }
-      }
-    })
+    
 
     // 获取用户信息
     // wx.getSetting({
@@ -128,6 +123,7 @@ App({
     api: $api,
     openid: '',
     BASEIMGURL,
+    BASEIMGURL1,
     shareOpenId: '', //是否是分享进入
     config: globalConfig,
     imgList: [],

pages/detail/index.js

@@ -30,20 +30,28 @@ Page({
     }],
 
     BASEIMGURL: app.globalData.BASEIMGURL, //图片域名
+    BASEIMGURL1: app.globalData.BASEIMGURL1, //图片域名
     currentActivity: {}, //详情
 
     userInfo: {},
-    scrollTop: 0
+    scrollTop: 0,
+    hideGetInfo: true,
+    loading: true
   },
   add(e) {
     //参加活动
-    if(this.data.currentActivity.isoverdue){
+    if (!app.globalData.userInfo.avatar) {
+      return this.setData({
+        hideGetInfo: false
+      })
+    }
+    if (this.data.currentActivity.isoverdue) {
       return wx.showToast({
         title: '活动时间已截止，您可以参加其它活动哦～',
         icon: 'none'
       })
     }
-    let actid = e.currentTarget.dataset.actid;
+    let actid = this.data.currentActivity.id;
     app.globalData.api.activity_attend({
       phone: app.globalData.userInfo.phone,
       actid
@@ -64,11 +72,11 @@ Page({
       let myDate = new Date();
       let now = myDate.valueOf();
       let time = new Date(v.endtime).valueOf();
-      if(app.globalData.systemInfo.platform == 'ios'){ 
+      if (app.globalData.systemInfo.platform == 'ios') {
         let _date = v.endtime.replace(/\.|\-/g, '/');
         time = new Date(_date).valueOf();
       }
-      
+
       if (now > time) {
         v.isoverdue = true;
       } else {
@@ -110,7 +118,8 @@ Page({
         markers: [{
           latitude: v.latitude || 0,
           longitude: v.longitude || 0
-        }]
+        }],
+        loading: false
       })
     })
   },
@@ -130,9 +139,6 @@ Page({
           'phone': res.data.phone
         }
       });
-      if (e.currentTarget.dataset.type && e.currentTarget.dataset.type == 'getPhone') {
-        return;
-      }
       //参加活动
       that.add(e);
       // wx.showToast({
@@ -242,14 +248,16 @@ Page({
    * 生命周期函数--监听页面隐藏
    */
   onHide: function () {
-
+    
   },
 
   /**
    * 生命周期函数--监听页面卸载
    */
   onUnload: function () {
-
+    this.setData({
+      loading: true
+    })
   },
 
   /**
@@ -280,4 +288,34 @@ Page({
     }
   },
   onPageScroll(e) {},
+  userInfoHandler(e) {
+    const that = this;
+    if (e.detail.errMsg == "getUserInfo:ok") {
+      let userInfo = e.detail.userInfo;
+      let params = Object.assign({}, {
+        openid: app.globalData.userInfo.openid,
+        nickName: userInfo.nickName,
+        gender: userInfo.gender,
+        avatarUrl: userInfo.avatarUrl
+      });
+      app.globalData.api.binduserinfo(params).then(res => {
+        let newUserInfo = app.globalData.userInfo;
+        newUserInfo.avatar = userInfo.avatarUrl;
+        newUserInfo.gender = userInfo.gender;
+        newUserInfo.nickname = userInfo.nickName;
+
+        app.globalData.userInfo = newUserInfo;
+        that.setData({
+          userInfo: newUserInfo,
+          hideGetInfo: true
+        })
+        that.add();
+      })
+    } else {
+      wx.showToast({
+        title: '请授权您的头像！',
+        icon: 'none'
+      })
+    }
+  },
 })

pages/detail/index.wxml

@@ -1,5 +1,6 @@
 <!--pages/detail/index.wxml-->
 <!-- <view class="container" bindtouchstart="touchStart" bindtouchend="touchEnd"> -->
+<view class="loading" wx:if="{{loading}}"></view>
 <view class="container">
 	<!-- <navBar title-text="CoffeeTalk" back-icon="/img/nav/back@3x.png" background="none" bindback="back" /> -->
 	<!-- <view class="container-bg {{background[current]}}" style="height: {{navHeight}}px;"></view> -->
@@ -70,7 +71,7 @@
 						<image src="../../img/over_time.png"></image>
 					</view>
 					<view class="label-text text-overflow time-text">
-						报名截止：{{currentActivity.deadline}}
+						报名截止：{{currentActivity.deadline || 'None'}}
 					</view>
 				</view>
 				<view class="label" wx:if="{{currentActivity.organizer}}">
@@ -167,4 +168,18 @@
 			</view>
 		</view>
 	</view>
+
+	<view class="get-info-mask" hidden="{{hideGetInfo}}">
+		<view class="in {{!hideGetInfo?'scroll-in':''}}">
+			<view class="avatar">
+				<image src="{{ BASEIMGURL1 + 'coffeetalk_small.jpg'}}"></image>
+			</view>
+			<view class="name">Coffee Talk</view>
+			<view class="des">申请获得你的微信头像</view>
+			<view class="btn">
+				<button open-type="getUserInfo" bindgetuserinfo="userInfoHandler">获取微信头像</button>
+			</view>
+		</view>
+	</view>
+
 </view>

pages/detail/index.wxss

@@ -397,4 +397,92 @@
 }
 .title-des{
   color:#999;
+}
+
+.get-info-mask{
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, .3);
+  z-index: 100000;  
+}
+
+.get-info-mask .in{
+  position: absolute;
+  bottom:0;
+  left:0;
+  right:0;
+  height: 600rpx;
+  background-color: #fff;
+  border-top-left-radius: 50rpx;
+  border-top-right-radius: 50rpx;
+}
+.get-info-mask .avatar{
+  width: 130rpx;
+  height: 130rpx;
+  border-radius: 50%;
+  background-color: #ccc;
+  margin: 80rpx auto 0;
+  overflow: hidden;
+}
+.get-info-mask .avatar image{
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.get-info-mask .name{
+  text-align: center;
+  padding: 20rpx 0 10rpx;
+  font-size: 38rpx;
+  font-weight: bold;
+  color:#333;
+}
+.get-info-mask .des{
+  text-align: center;
+  font-size: 28rpx;
+  color:#666;
+}
+.get-info-mask .btn{
+  width:700rpx;
+  height: 100rpx;
+  background-color: blue;
+  margin: 100rpx auto 0;
+  border-radius: 10rpx;
+}
+.get-info-mask button:not([size='mini']) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: normal;
+  width: 100%;
+  height: 100%;
+  margin:0;
+  padding:0;
+  color: #fff;
+  background-color: rgba(143, 103, 232, 1);
+}
+.get-info-mask .scroll-in{
+  bottom:0;
+  animation: myScroll .4s forwards;
+}
+
+@keyframes myScroll {
+  0% {  
+    bottom: -600rpx;
+  }
+  100% {
+    bottom: 0;
+  }
+}
+
+.loading{
+  position: fixed;
+  top:0;
+  left:0;
+  right:0;
+  bottom:0;
+  background-color: #fff;
+  z-index: 2000000;
 }

utils/config.js

@@ -1,2 +1,3 @@
 export const BASEURL='https://hw.cirray.cn/api/'
 export const BASEIMGURL = 'https://cirraybucket.oss-cn-shanghai.aliyuncs.com/coffeetalk/'
+export const BASEIMGURL1 = 'https://cirraybucket.oss-cn-shanghai.aliyuncs.com/ctres/'