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