Skip to content

W
walk_daka_wx
Commit e4c13551 by 穆启卓
Options

改版后的第一版

parent ac739d1f
Showing with 519 additions and 265 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.js
...@@ -2,132 +2,268 @@ var config = require('../../config'); ...@@ -2,132 +2,268 @@ var config = require('../../config');
let app = getApp(); let app = getApp();
Page({ Page({
data: { data: {
stepAuth: false, userAuth: false, // 用户信息授权（为了拿unionId）
stepAuth: false, // 步数授权
getStepLoading: false, getStepLoading: false,
// commitStepPopupShow: false, // 同步步数成功弹窗 // commitStepPopupShow: false, // 同步步数成功弹窗
activityExplainShow: false, // 活动说明弹窗 activityExplainShow: false, // 活动说明弹窗
currentSteps: 0, currentSteps: 0,
targetSteps: 0, targetSteps: 0,
stepRecordList: [], stepRecordList: [],
showGetUserInfo: false,
isFirstReq: true
}, },
onLoad() { onShow() {
this.getPageData();
},
getPageData() {
// 1、第一步，先判断用户信息和步数是否授过权
wx.getSetting({ wx.getSetting({
success:(res) => { success:(res) => {
// 用户信息是否授权
if (res.authSetting['scope.userInfo']) {
app.globalData.userAuth = true;
}
// 微信步数是否授权 // 微信步数是否授权
if (res.authSetting['scope.werun']) { if (res.authSetting['scope.werun']) {
app.globalData.stepAuth = true;
}
// 2、询问后端是否需要unionId授权
this.needUnionAuth().then(unionRes => {
app.globalData.unionAuth = unionRes;
console.log('needUnionAuth',app.globalData.unionAuth,app.globalData.userAuth,app.globalData.stepAuth)
// 视图层数据赋值
this.setData({ this.setData({
stepAuth: true userAuth: app.globalData.userAuth,
stepAuth: app.globalData.stepAuth
}); });
this.getWeRunData(); if (app.globalData.unionAuth && app.globalData.stepAuth) {
this.clickStepData();
} else if (app.globalData.stepAuth) {
this.loadStepData();
}
});
}
});
},
// 询问后端是否需要unionId授权
needUnionAuth() {
return new Promise((resolve, reject) => {
wx.login({
success:wxres => {
if (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) {
app.globalData.userInfo = myres.data.data;
app.globalData.token = myres.data.data.token;
resolve(true);
} else if (myres.data.data.code === 401) {
resolve(false);
}
}
});
}
} }
});
});
},
// 页面加载时请求的展示步数数据
loadStepData() {
console.log('loadStepData')
wx.getWeRunData({
success:(stepres) => {
wx.login({
success:wxres => {
if (wxres.code) {
wx.request({
url: config.service.hostUrl + "/v1/get_step_num",
data: {
js_code: wxres.code,
encrypted_data: stepres.encryptedData,
iv: stepres.iv
},
method: 'POST',
success:(res) => {
const resData = res.data.data;
this.setData({
currentSteps: (resData && resData[0]) ? resData[0].step : 0,
stepRecordList: resData
});
wx.setStorageSync('getStepLoading', Date.now());
wx.showModal({
content: '获取微信运动步数成功',
showCancel: false
});
}
});
}
}
});
} }
}); });
}, },
// 找微信获取步数加密数据 // 用户点击提交步数打卡1（处理授权情况）
getStep() { clickStepData() {
if (wx.getStorageSync('getStepLoading') && Date.now() - wx.getStorageSync('getStepLoading') < 60000) { console.log('clickStepData')
if (!this.data.isFirstReq && wx.getStorageSync('getStepLoading') && Date.now() - wx.getStorageSync('getStepLoading') < 60000) {
wx.showToast({ wx.showToast({
title: '已是最新步数，建议前往微信运动获取最新步数再返回同步', title: '已是最新步数，建议前往微信运动获取最新步数再返回同步',
icon: 'none', icon: 'none',
duration: 2000 duration: 2000
}); });
return; // return;
} }
if (this.data.getStepLoading) return; let needStepAuth = () => {
this.data.getStepLoading = true; wx.authorize({ // 调起授权窗口
// 查看微信运动步数授权信息
if (this.data.stepAuth) {
this.getWeRunData();
} else {
// 调起授权窗口
wx.authorize({
scope: 'scope.werun', scope: 'scope.werun',
// 授权成功 success:() => { // 授权成功
success:() => { app.globalData.stepAuth = true;
this.setData({ this.clickStepData();
stepAuth: true
});
this.getWeRunData();
}, },
// 授权失败，因为用户拒绝或者用户曾经拒绝过，而且在这里不能直接去到openSetting页，需要通过一个弹窗中转过去 fail:(err) => { // 授权失败，因为用户拒绝或者用户曾经拒绝过，而且在这里不能直接去到openSetting页，需要通过一个弹窗中转过去
fail:(err) => {
console.log('getStep err',err)
this.authorizationFail(); this.authorizationFail();
} }
}); });
} }
if (app.globalData.unionAuth) { // 不需要unionId授权
if (app.globalData.stepAuth) { // 步数已授权
this.getClickStepData();
} else { // 步数没有授权，弹出步数授权框
needStepAuth();
}
} else { // 需要unionId授权
if (!app.globalData.userAuth && !app.globalData.stepAuth) {
wx.navigateTo({
url: '/pages/authorization/authorization'
});
} else if (app.globalData.userAuth && !app.globalData.stepAuth) {
needStepAuth();
} else if (!app.globalData.userAuth && app.globalData.stepAuth) {
this.showUserInfoPopup();
} else if (app.globalData.userAuth && app.globalData.stepAuth) {
wx.getUserInfo({
withCredentials: true,
success:(userres) => {
this.sendUserInfo(userres.encryptedData, userres.iv);
}
});
}
}
}, },
// 拿到微信运动步数加密数据 // 用户点击提交步数打卡2（处理获步数和提交）
getWeRunData() { getClickStepData() {
console.log('getClickStepData')
wx.getWeRunData({ wx.getWeRunData({
success:(res) => { success:(stepres) => {
console.log('getWeRunData', res) wx.request({
// this.changeShowPopup(); url: config.service.hostUrl + "/v1/sync_step_data",
this.getStepNum(res.encryptedData, res.iv); data: {
encrypted_data: stepres.encryptedData,
iv: stepres.iv
},
header: {
'Authorization': app.globalData.token
},
method: 'POST',
success:(res) => {
this.data.isFirstReq = false;
const resData = res.data.data;
// 数据处理，结合两个数组判断是否显示打卡角标和状态
const joinDate = [];
resData.records_info.forEach(item => {
joinDate.push(item.period);
});
resData.step_data.forEach(item => {
if (joinDate.indexOf(item.period) > -1) {
if (resData.records_info[joinDate.indexOf(item.period)].daka_done) {
item.status = 1; // 打卡成功
} else {
item.status = 2; // 打卡失败
}
} else {
item.status = 0; // 未参与打卡
}
});
console.log(resData.step_data)
this.setData({
currentSteps: (resData.step_data && resData.step_data[0]) ? resData.step_data[0].step : 0,
targetSteps: resData.total_step,
stepRecordList: resData.step_data
});
wx.setStorageSync('getStepLoading', Date.now());
wx.showModal({
content: '获取微信运动步数成功',
showCancel: false
});
}
});
}, },
complete:() => { fail:(err) => {
setTimeout(() => { this.authorizationFail();
this.data.getStepLoading = false;
}, 100);
} }
}); });
}, },
// 找后端获取解密步数信息 // 显示隐藏用户信息授权弹框
getStepNum(encryptedData, iv) { showUserInfoPopup() {
wx.request({ this.setData({
url: config.service.hostUrl + "/v1/get_step_num", showGetUserInfo: !this.data.showGetUserInfo
data: { });
encrypted_data: encryptedData, },
iv: iv
}, // 用户同意授权
header: { onGotUserInfo(event) {
'Authorization': app.globalData.token console.log('onGotUserInfo')
}, this.showUserInfoPopup();
method: 'POST', app.globalData.userAuth = true;
success:(res) => { this.sendUserInfo(event.detail.encryptedData, event.detail.iv);
const resData = res.data.data; },
// 数据处理，结合两个数组判断是否显示打卡角标和状态
const joinDate = []; // 把用户授权信息传给后端,然后同步数据
resData.records_info.forEach(item => { sendUserInfo(encryptedData, iv) {
joinDate.push(item.period); console.log('sendUserInfo',encryptedData, iv)
}); wx.login({
resData.step_data.forEach(item => { success:wxres => {
if (joinDate.indexOf(item.period) > -1) { if (wxres.code) {
if (resData.records_info[joinDate.indexOf(item.period)].daka_done) { wx.request({
item.status = 1; // 打卡成功 url: config.service.hostUrl + "/v1/auth_login",
} else { data: {
item.status = 2; // 打卡失败 js_code: wxres.code,
encrypted_data: encryptedData,
iv: iv
},
method: 'POST',
success:myres => {
if (myres.data.code === 0) {
app.globalData.unionAuth = true;
app.globalData.userInfo = myres.data.data;
app.globalData.token = myres.data.data.token;
this.getClickStepData();
}
} }
} else { });
item.status = 0; // 未参与打卡 }
}
});
console.log(resData.step_data)
this.setData({
currentSteps: (resData.step_data && resData.step_data[0]) ? resData.step_data[0].step : 0,
targetSteps: resData.total_step,
stepRecordList: resData.step_data
});
wx.setStorageSync('getStepLoading', Date.now());
wx.showModal({
content: '获取微信运动步数成功',
showCancel: false
});
},
fail:(err) => {
console.log('fail', err);
} }
}); });
}, },
// 授权失败，去到openSetting页 // 授权失败，去到openSetting页
authorizationFail() { authorizationFail() {
console.log('authorizationFail')
wx.showModal({ wx.showModal({
content: '如需完成步数打卡，请点击确定允许微信授权', content: '如需完成步数打卡，\n请点击确定允许微信授权',
success:(res) => { success:(res) => {
if (res.confirm) { if (res.confirm) {
wx.openSetting({ wx.openSetting({
...@@ -136,18 +272,13 @@ Page({ ...@@ -136,18 +272,13 @@ Page({
this.setData({ this.setData({
stepAuth: true stepAuth: true
}); });
this.getWeRunData(); // this.getPageData();
} else { } else {
// this.authorizationFail(); // this.authorizationFail();
} }
} }
}); });
} }
},
complete:() => {
setTimeout(() => {
this.data.getStepLoading = false;
}, 100);
} }
}); });
}, },
...@@ -159,6 +290,32 @@ Page({ ...@@ -159,6 +290,32 @@ Page({
}); });
}, },
// 暂留==================================================================
// 通过code2session方式拿unionid
// byCode2session() {
// wx.login({
// success:wxres => {
// if (wxres.code) {
// wx.request({
// url: 'https://api.weixin.qq.com/sns/jscode2session',
// data: {
// appid: 'wx035eac0d4d63b3e4',
// secret: 'cbb0d286083bee53e44f9518621eedb3',
// js_code: wxres.code,
// grant_type: 'authorization_code'
// },
// method: 'GET',
// success:res => {
// console.log('通过code2session方式拿unionid：',res.data.unionid)
// }
// });
// }
// }
// });
// },
// // 同步步数成功弹窗 // // 同步步数成功弹窗
// changeShowPopup() { // changeShowPopup() {
// this.setData({ // this.setData({
......
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