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({
//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.js
......@@ -2,132 +2,268 @@ var config = require('../../config');
let app = getApp();
Page({
data: {
stepAuth: false,
userAuth: false, // 用户信息授权（为了拿unionId）
stepAuth: false, // 步数授权
getStepLoading: false,
// commitStepPopupShow: false, // 同步步数成功弹窗
activityExplainShow: false, // 活动说明弹窗
currentSteps: 0,
targetSteps: 0,
stepRecordList: [],
showGetUserInfo: false,
isFirstReq: true
},
onLoad() {
onShow() {
this.getPageData();
},
getPageData() {
// 1、第一步，先判断用户信息和步数是否授过权
wx.getSetting({
success:(res) => {
// 用户信息是否授权
if (res.authSetting['scope.userInfo']) {
app.globalData.userAuth = true;
}
// 微信步数是否授权
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({
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
});
}
});
}
}
});
}
});
},
// 找微信获取步数加密数据
getStep() {
if (wx.getStorageSync('getStepLoading') && Date.now() - wx.getStorageSync('getStepLoading') < 60000) {
// 用户点击提交步数打卡1（处理授权情况）
clickStepData() {
console.log('clickStepData')
if (!this.data.isFirstReq && wx.getStorageSync('getStepLoading') && Date.now() - wx.getStorageSync('getStepLoading') < 60000) {
wx.showToast({
title: '已是最新步数，建议前往微信运动获取最新步数再返回同步',
icon: 'none',
duration: 2000
});
return;
// return;
}
if (this.data.getStepLoading) return;
this.data.getStepLoading = true;
// 查看微信运动步数授权信息
if (this.data.stepAuth) {
this.getWeRunData();
} else {
// 调起授权窗口
wx.authorize({
let needStepAuth = () => {
wx.authorize({ // 调起授权窗口
scope: 'scope.werun',
// 授权成功
success:() => {
this.setData({
stepAuth: true
});
this.getWeRunData();
success:() => { // 授权成功
app.globalData.stepAuth = true;
this.clickStepData();
},
// 授权失败，因为用户拒绝或者用户曾经拒绝过，而且在这里不能直接去到openSetting页，需要通过一个弹窗中转过去
fail:(err) => {
console.log('getStep err',err)
fail:(err) => { // 授权失败，因为用户拒绝或者用户曾经拒绝过，而且在这里不能直接去到openSetting页，需要通过一个弹窗中转过去
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);
}
});
}
}
},
// 拿到微信运动步数加密数据
getWeRunData() {
// 用户点击提交步数打卡2（处理获步数和提交）
getClickStepData() {
console.log('getClickStepData')
wx.getWeRunData({
success:(res) => {
console.log('getWeRunData', res)
// this.changeShowPopup();
this.getStepNum(res.encryptedData, res.iv);
success:(stepres) => {
wx.request({
url: config.service.hostUrl + "/v1/sync_step_data",
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:() => {
setTimeout(() => {
this.data.getStepLoading = false;
}, 100);
fail:(err) => {
this.authorizationFail();
}
});
},
// 找后端获取解密步数信息
getStepNum(encryptedData, iv) {
wx.request({
url: config.service.hostUrl + "/v1/get_step_num",
data: {
encrypted_data: encryptedData,
iv: iv
},
header: {
'Authorization': app.globalData.token
},
method: 'POST',
success:(res) => {
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; // 打卡失败
// 显示隐藏用户信息授权弹框
showUserInfoPopup() {
this.setData({
showGetUserInfo: !this.data.showGetUserInfo
});
},
// 用户同意授权
onGotUserInfo(event) {
console.log('onGotUserInfo')
this.showUserInfoPopup();
app.globalData.userAuth = true;
this.sendUserInfo(event.detail.encryptedData, event.detail.iv);
},
// 把用户授权信息传给后端,然后同步数据
sendUserInfo(encryptedData, iv) {
console.log('sendUserInfo',encryptedData, iv)
wx.login({
success:wxres => {
if (wxres.code) {
wx.request({
url: config.service.hostUrl + "/v1/auth_login",
data: {
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页
authorizationFail() {
console.log('authorizationFail')
wx.showModal({
content: '如需完成步数打卡，请点击确定允许微信授权',
content: '如需完成步数打卡，\n请点击确定允许微信授权',
success:(res) => {
if (res.confirm) {
wx.openSetting({
......@@ -136,18 +272,13 @@ Page({
this.setData({
stepAuth: true
});
this.getWeRunData();
// this.getPageData();
} else {
// this.authorizationFail();
}
}
});
}
},
complete:() => {
setTimeout(() => {
this.data.getStepLoading = false;
}, 100);
}
});
},
......@@ -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() {
// this.setData({
......
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