Skip to content

W
walk_daka_wx
Commit e4c13551 by 穆启卓
Options

改版后的第一版

parent ac739d1f
Showing with 277 additions and 180 deletions
app.js
......@@ -51,32 +51,39 @@ App({
//pay页面收到分享卡片的时间戳
payLastTimeStmp: '',
code: '', // 用户微信登录的code
userInfo: '', // 用户后端登录的userInfo
token: '', // 用户后端登录的token
userAuth: false, // 用户信息授权（为了拿unionId）
unionAuth: false, // unionId授权: 如果为false是需要授权，true是不需要
stepAuth: false, // 步数授权
},
onLaunch(options) {
wx.login({
success:wxres => {
if (wxres.code) {
this.globalData.code = wxres.code;
wx.request({
url: config.service.hostUrl + "/v1/auth_login",
data: {
js_code: wxres.code
},
method: 'POST',
success:myres => {
this.globalData.userInfo = myres.data.data;
this.globalData.token = myres.data.data.token;
}
});
} else {
console.log('登录失败！' + res.errMsg)
}
}
})
// wx.login({
// success:wxres => {
// if (wxres.code) {
// this.globalData.code = wxres.code;
// wx.request({
// url: config.service.hostUrl + "/v1/auth_login",
// data: {
// js_code: wxres.code
// },
// method: 'POST',
// success:myres => {
// if (myres.data.code === 0) {
// this.globalData.userInfo = myres.data.data;
// this.globalData.token = myres.data.data.token;
// } else if (myres.data.data.code === 401) {
// this.globalData.unionAuth = false;
// }
// }
// });
// } else {
// console.log('登录失败！' + res.errMsg)
// }
// }
// })
app = this;
......
images/authorization/auth_false.png
images/authorization/auth_false.png

517 Bytes | W: | H:

images/authorization/auth_false.png

617 Bytes | W: | H:

images/authorization/auth_false.png
images/authorization/auth_false.png
images/authorization/auth_false.png
images/authorization/auth_false.png
  • 2-up
  • Swipe
  • Onion skin
images/authorization/auth_true.png
images/authorization/auth_true.png

446 Bytes | W: | H:

images/authorization/auth_true.png

715 Bytes | W: | H:

images/authorization/auth_true.png
images/authorization/auth_true.png
images/authorization/auth_true.png
images/authorization/auth_true.png
  • 2-up
  • Swipe
  • Onion skin
pages/authorization/authorization.js
let app = getApp();
let getAuthLoading = false;
Page({
data: {
......@@ -5,20 +6,11 @@ Page({
stepAuth: false
},
onLoad(options) {
let data = {};
if (options.userAuth === 'true') {
data.userAuth = true;
} else if (options.userAuth === 'false') {
data.userAuth = false;
}
if (options.stepAuth === 'true') {
data.stepAuth = true;
} else if (options.stepAuth === 'false') {
data.stepAuth = false;
}
console.log(data)
this.setData(data);
onLoad() {
this.setData({
userAuth: app.globalData.userAuth,
stepAuth: app.globalData.stepAuth
});
},
getUserAuth(event) {
......@@ -26,15 +18,21 @@ Page({
getAuthLoading = true;
if (event.detail.errMsg === 'getUserInfo:ok') {
console.log('getUserAuth:ok', event.detail)
app.globalData.userAuth = true;
this.setData({
userAuth: true
});
setTimeout(() => {
getAuthLoading = false;
}, 100);
this.checkAuth();
} else {
console.log('getUserAuth:fail', event)
wx.showModal({
content: '授权失败，请重新点击按钮发起授权',
showCancel: false
});
}
setTimeout(() => {
getAuthLoading = false;
}, 100);
},
getStepAuth() {
......@@ -43,7 +41,11 @@ Page({
wx.authorize({
scope: 'scope.werun',
success:() => {
this.userAuthorizedStep();
app.globalData.stepAuth = true;
this.setData({
stepAuth: true
});
this.checkAuth();
},
fail:() => {
// 调起用户授权窗口失败，因为用户曾经拒绝过，而且在这里不能直接去到openSetting页，需要通过一个弹窗中转过去
......@@ -53,9 +55,24 @@ Page({
success:() => {
wx.openSetting({
success:(res) => {
if (res.authSetting['scope.userInfo']) {
app.globalData.userAuth = true;
this.setData({
userAuth: true
});
} else {
app.globalData.userAuth = false;
this.setData({
userAuth: false
});
}
if (res.authSetting['scope.werun']) {
this.userAuthorizedStep();
app.globalData.stepAuth = true;
this.setData({
stepAuth: true
});
}
this.checkAuth();
}
});
}
......@@ -68,15 +85,12 @@ Page({
}
});
},
userAuthorizedStep() {
this.setData({
stepAuth: true
});
wx.getWeRunData({
success(res) {
console.log('getWeRunData', res)
}
});
checkAuth() {
if (app.globalData.userAuth && app.globalData.stepAuth) {
wx.navigateBack({
delta: 1
});
}
}
})
\ No newline at end of file
pages/authorization/authorization.less
.page-container {
width: 100%;
min-height: 100vh;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
.app-logo {
width: 250rpx;
height: 250rpx;
width: 148rpx;
height: 148rpx;
border-radius: 50%;
margin-top: 60rpx;
margin-top: 100rpx;
background: #000;
}
.app-name {
font-size: 28rpx;
font-size: 36rpx;
line-height: 1;
color: #000;
color: #363636;
font-weight: bold;
margin-top: 30rpx;
margin-top: 28rpx;
}
.title {
width: 710rpx;
font-size: 28rpx;
width: 674rpx;
font-size: 34rpx;
line-height: 1;
color: #000;
color: #333;
font-weight: bold;
margin-top: 80rpx;
margin-top: 130rpx;
}
.explain {
width: 710rpx;
font-size: 26rpx;
width: 674rpx;
font-size: 28rpx;
line-height: 1.2;
color: #000;
margin-top: 20rpx;
color: #a5a5a5;
margin-top: 24rpx;
}
.authorization-container {
width: 710rpx;
width: 690rpx;
margin-top: 40rpx;
display: flex;
align-items: flex-start;
.authorized-icon {
width: 30rpx;
height: 30rpx;
width: 46rpx;
height: 46rpx;
flex-shrink: 0;
background: red;
}
.authorization-title-explain {
margin-left: 10rpx;
flex: 1;
margin-left: 20rpx;
.authorization-title {
font-size: 28rpx;
line-height: 1.2;
color: #000;
font-size: 30rpx;
line-height: 46rpx;
color: #454545;
font-weight: bold;
}
.authorization-explain {
font-size: 26rpx;
line-height: 1.2;
color: #000;
margin-top: 20rpx;
line-height: 40rpx;
color: #a5a5a5;
margin-top: 10rpx;
}
}
}
.authorization-btn {
width: 650rpx;
height: 80rpx;
border-radius: 80rpx;
background: blue;
font-size: 30rpx;
line-height: 80rpx;
width: 690rpx;
height: 90rpx;
border-radius: 16rpx;
background: #51AA38;
font-size: 34rpx;
line-height: 90rpx;
color: #fff;
text-align: center;
margin-top: 120rpx;
......
pages/authorization/authorization.wxml
<navbar showHome="{{false}}" navTitle="{{navTitle}}" navColor="{{navColor}}"></navbar>
<navbar showHome="{{false}}" navTitle="{{navTitle}}" navColor="#fff"></navbar>
<view class="page-container">
<view class="app-logo"></view>
<view class="app-name">运动打卡</view>
<view class="title">请允许运动打卡获取以下权限</view>
<view class="explain">以下信息仅用于您登录运动打卡，我们将严格保密绝不外泄，更不会对您发送垃圾信息造成骚扰</view>
<view class="app-name">步步运动赚</view>
<view class="title">请允许步步运动赚获取以下权限</view>
<view class="explain">以下信息仅用于您登录步步运动赚，我们将严格保密绝不外泄，更不会对您发送垃圾信息造成骚扰</view>
<view class="authorization-container">
<image class="authorized-icon" src="/images/authorization/auth_{{userAuth?'true':'false'}}.png"></image>
<view class="authorization-title-explain">
<view class="authorization-title">获取您的公开信息（昵称、头像等）</view>
<view class="authorization-explain">需获取您的公开信息，方便您使用运动打卡全部功能</view>
<view class="authorization-explain">需获取您的公开信息，方便您使用步步运动赚全部功能</view>
</view>
</view>
<view class="authorization-container">
......
pages/authorization/authorization.wxss
.page-container {
width: 100%;
min-height: 100vh;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
}
.page-container .app-logo {
width: 250rpx;
height: 250rpx;
width: 148rpx;
height: 148rpx;
border-radius: 50%;
margin-top: 60rpx;
margin-top: 100rpx;
background: #000;
}
.page-container .app-name {
font-size: 28rpx;
font-size: 36rpx;
line-height: 1;
color: #000;
color: #363636;
font-weight: bold;
margin-top: 30rpx;
margin-top: 28rpx;
}
.page-container .title {
width: 710rpx;
font-size: 28rpx;
width: 674rpx;
font-size: 34rpx;
line-height: 1;
color: #000;
color: #333;
font-weight: bold;
margin-top: 80rpx;
margin-top: 130rpx;
}
.page-container .explain {
width: 710rpx;
font-size: 26rpx;
width: 674rpx;
font-size: 28rpx;
line-height: 1.2;
color: #000;
margin-top: 20rpx;
color: #a5a5a5;
margin-top: 24rpx;
}
.page-container .authorization-container {
width: 710rpx;
width: 690rpx;
margin-top: 40rpx;
display: flex;
align-items: flex-start;
}
.page-container .authorization-container .authorized-icon {
width: 30rpx;
height: 30rpx;
width: 46rpx;
height: 46rpx;
flex-shrink: 0;
background: red;
}
.page-container .authorization-container .authorization-title-explain {
margin-left: 10rpx;
flex: 1;
margin-left: 20rpx;
}
.page-container .authorization-container .authorization-title-explain .authorization-title {
font-size: 28rpx;
line-height: 1.2;
color: #000;
font-size: 30rpx;
line-height: 46rpx;
color: #454545;
font-weight: bold;
}
.page-container .authorization-container .authorization-title-explain .authorization-explain {
font-size: 26rpx;
line-height: 1.2;
color: #000;
margin-top: 20rpx;
line-height: 40rpx;
color: #a5a5a5;
margin-top: 10rpx;
}
.page-container .authorization-btn {
width: 650rpx;
height: 80rpx;
border-radius: 80rpx;
background: blue;
font-size: 30rpx;
line-height: 80rpx;
width: 690rpx;
height: 90rpx;
border-radius: 16rpx;
background: #51AA38;
font-size: 34rpx;
line-height: 90rpx;
color: #fff;
text-align: center;
margin-top: 120rpx;
......
pages/index/index.less
......@@ -249,58 +249,61 @@ page {
}
}
}
// .commit-step-popup-bg {
// position: fixed;
// left: 0;
// top: 0;
// right: 0;
// bottom: 0;
// background: rgba(0, 0, 0, .8);
// z-index: 999;
// display: flex;
// align-items: center;
// justify-content: center;
// .commit-step-popup {
// width: 560rpx;
// background: #fff;
// border-radius: 10rpx;
// overflow: hidden;
// .popup-content {
// width: 100%;
// height: 230rpx;
// display: flex;
// align-items: center;
// justify-content: center;
// padding: 0 70rpx;
// box-sizing: border-box;
// font-size: 32rpx;
// line-height: 50rpx;
// color: #585858;
// text-align: center;
// }
// .popup-btn-container {
// width: 100%;
// height: 108rpx;
// box-sizing: border-box;
// display: flex;
// border-top: 2rpx solid #e5e5e5;
// .cancel-btn {
// flex: 1;
// height: 108rpx;
// font-size: 32rpx;
// line-height: 108rpx;
// color: #999;
// text-align: center;
// }
// .confirm-btn {
// flex: 1;
// height: 108rpx;
// font-size: 32rpx;
// line-height: 108rpx;
// color: #25d6da;
// text-align: center;
// border-left: 2rpx solid #e5e5e5;
// }
// }
// }
// }
\ No newline at end of file
.commit-step-popup-bg {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .8);
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
.commit-step-popup {
width: 560rpx;
background: #fff;
border-radius: 10rpx;
overflow: hidden;
.popup-content {
width: 100%;
height: 230rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 0 70rpx;
box-sizing: border-box;
font-size: 32rpx;
line-height: 50rpx;
color: #585858;
text-align: center;
}
.popup-btn-container {
width: 100%;
height: 108rpx;
box-sizing: border-box;
display: flex;
border-top: 2rpx solid #e5e5e5;
.cancel-btn {
flex: 1;
height: 108rpx;
font-size: 32rpx;
line-height: 108rpx;
color: #999;
text-align: center;
border-right: 2rpx solid #e5e5e5;
}
.confirm-btn {
flex: 1;
height: 108rpx;
font-size: 32rpx;
line-height: 108rpx;
color: #25d6da;
text-align: center;
padding: 0;
margin: 0;
border: none;
}
}
}
}
\ No newline at end of file
pages/index/index.wxml
......@@ -4,17 +4,16 @@
<image class="today-step-container-bg" src="/images/index/sy_beijing1.png"></image>
<!-- <view class="continuity-days">连续打卡5天</view> -->
<image class="explain" src="/images/index/sy_shuoming.png" bindtap="changeActivityExplainShow"></image>
<view class="today-step-info" bindtap="getStep">
<view class="today-step-info" bindtap="clickStepData">
<image class="today-step-info-bg" src="/images/index/sy_ybp.png"></image>
<block wx:if="{{stepAuth}}">
<block wx:if="{{currentSteps}}">
<view class="info-title">今日步数</view>
<view class="today-step-num">{{currentSteps}}</view>
</block>
<view class="info-title" style="margin-top: 200rpx" wx:else>点此获取步数数据</view>
</view>
<view class="get-info-btn" bindtap="getStep">提交步数打卡</view>
<!-- <view class="get-info-btn" bindtap="goAuthorizationPage">点击完成步数打卡</view> -->
<view class="step-progress-container" wx:if="{{stepAuth && targetSteps}}">
<view class="get-info-btn" bindtap="clickStepData">{{userAuth&&stepAuth?'提交步数打卡':'获取步数记录'}}</view>
<view class="step-progress-container" wx:if="{{currentSteps && targetSteps}}">
<view class="today-status">进行中</view>
<view class="today-progress">{{currentSteps}}/{{targetSteps}}<text>步</text></view>
</view>
......@@ -54,4 +53,13 @@
<navigator class="confirm-btn" hover-class="none" open-type="exit" target="miniProgram">确定</navigator>
</view>
</view>
</view> -->
\ No newline at end of file
</view> -->
<view class="commit-step-popup-bg" wx:if="{{showGetUserInfo}}">
<view class="commit-step-popup">
<view class="popup-content">请允许授权获取步数数据</view>
<view class="popup-btn-container">
<view class="cancel-btn" bindtap="showUserInfoPopup">取消</view>
<button class="confirm-btn" plain open-type="getUserInfo" bindgetuserinfo="onGotUserInfo">确定</button>
</view>
</view>
</view>
\ No newline at end of file
pages/index/index.wxss
......@@ -249,3 +249,61 @@ page {
transform: translateX(-50%);
overflow: visible;
}
.commit-step-popup-bg {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
}
.commit-step-popup-bg .commit-step-popup {
width: 560rpx;
background: #fff;
border-radius: 10rpx;
overflow: hidden;
}
.commit-step-popup-bg .commit-step-popup .popup-content {
width: 100%;
height: 230rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 0 70rpx;
box-sizing: border-box;
font-size: 32rpx;
line-height: 50rpx;
color: #585858;
text-align: center;
}
.commit-step-popup-bg .commit-step-popup .popup-btn-container {
width: 100%;
height: 108rpx;
box-sizing: border-box;
display: flex;
border-top: 2rpx solid #e5e5e5;
}
.commit-step-popup-bg .commit-step-popup .popup-btn-container .cancel-btn {
flex: 1;
height: 108rpx;
font-size: 32rpx;
line-height: 108rpx;
color: #999;
text-align: center;
border-right: 2rpx solid #e5e5e5;
}
.commit-step-popup-bg .commit-step-popup .popup-btn-container .confirm-btn {
flex: 1;
height: 108rpx;
font-size: 32rpx;
line-height: 108rpx;
color: #25d6da;
text-align: center;
padding: 0;
margin: 0;
border: none;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment