Skip to content

W
walk_daka_wx
Commit 05b22c30 by 穆启卓
Options

样式大改版第一版，步数canvas进度条

parent 14f061ce
Showing with 228 additions and 152 deletions
components/navBar/navBar.js
......@@ -5,7 +5,7 @@ Component({
properties: {
navColor: {
type: String,
value: "#E65845",
value: "",
},
titleColor:{
type: String,
......
pages/index/index.js
......@@ -13,7 +13,9 @@ Page({
showGetUserInfo: false,
isFirstReq: true,
reCheck: false,
scene: 1001
scene: 1001,
progressCanvasContext: '',
progressCanvasRate: '',
},
onShow() {
......@@ -23,6 +25,46 @@ Page({
this.getPageData();
},
onReady() {
const rate = wx.getSystemInfoSync().screenWidth / 750,
context = wx.createCanvasContext('progressCanvas');
context.translate(375 * rate, 255 * rate);
this.data.progressCanvasContext = context;
this.data.progressCanvasRate = rate;
// 画进度条总长
context.setStrokeStyle('rgba(255, 255, 255, 0.4)');
context.setLineWidth(4 * rate);
context.setLineCap('round');
context.beginPath();
context.arc(0, 0, 245 * rate, 0.90625 * Math.PI, 2.09375 * Math.PI, false);
context.stroke();
// 画刻度
context.setStrokeStyle('#ffffff');
context.setLineWidth(4 * rate);
context.rotate(-0.09375 * Math.PI);
context.beginPath();
const keduLeft = -230 * rate,
keduRight = -220 * rate,
oneKedu = 0.03125 * Math.PI;
context.moveTo(keduLeft, 0);
context.lineTo(keduRight, 0);
context.stroke();
for (let i = 0; i < 38; i++) {
context.rotate(oneKedu);
context.beginPath();
context.moveTo(keduLeft, 0);
context.lineTo(keduRight, 0);
context.stroke();
}
// 画当前圆球
context.setFillStyle('#ffffff');
context.rotate(2.544);
context.arc(-245 * rate, 0, 7 * rate, 0, 2 * Math.PI, false);
context.fill();
// 画
context.draw();
},
getPageData() {
// 1、第一步，先判断用户信息和步数是否授过权
wx.getSetting({
......@@ -213,20 +255,20 @@ Page({
item.status = 0; // 未参与打卡
}
});
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
// });
// 避免没有目标步数，不好比较是否达标
if (this.data.targetSteps > 0) {
const setData = {
targetSteps: resData.total_step,
stepRecordList: resData.step_data
};
if (resData.total_step > 0) {
this.changeShowPopup();
const realCurrentSteps = (resData.step_data && resData.step_data[0]) ? resData.step_data[0].step : 0;
this.dynamicDrawCanvas(realCurrentSteps, resData.total_step / 100);
} else {
setData.currentSteps = (resData.step_data && resData.step_data[0]) ? resData.step_data[0].step : 0;
}
this.setData(setData);
}
});
},
......@@ -237,11 +279,87 @@ Page({
});
},
// 让canvas动起来
dynamicDrawCanvas(realCurrentSteps, increment) {
setTimeout(() => {
this.drawProgressCanvas();
if (this.data.currentSteps < realCurrentSteps - increment) {
this.setData({
currentSteps: this.data.currentSteps + increment
});
this.dynamicDrawCanvas(realCurrentSteps, increment);
} else {
this.setData({
currentSteps: realCurrentSteps
});
return;
}
}, 10);
},
// 获取数据之后的进度canvas
drawProgressCanvas() {
const rate = this.data.progressCanvasRate,
context = this.data.progressCanvasContext,
currentSteps = this.data.currentSteps || 0,
targetSteps = this.data.targetSteps || 1,
progressValue = currentSteps / targetSteps;
context.translate(375 * rate, 255 * rate);
// 画进度条总长
context.setStrokeStyle('rgba(255, 255, 255, 0.4)');
context.setLineWidth(4 * rate);
context.setLineCap('round');
context.beginPath();
context.arc(0, 0, 245 * rate, 0.90625 * Math.PI, 2.09375 * Math.PI, false);
context.stroke();
// 画进度条当前长
context.setStrokeStyle('#ffffff');
context.beginPath();
context.arc(0, 0, 245 * rate, 0.90625 * Math.PI, (1.1875 * progressValue + 0.90625) * Math.PI, false);
context.stroke();
// 画刻度
context.setStrokeStyle('#ffffff');
context.setLineWidth(4 * rate);
context.rotate(-0.09375 * Math.PI);
context.beginPath();
const keduLeft = -230 * rate,
keduRight = -220 * rate,
oneKedu = 0.03125 * Math.PI;
context.moveTo(keduLeft, 0);
context.lineTo(keduRight, 0);
context.stroke();
for (let i = 0; i < 38; i++) {
context.rotate(oneKedu);
context.beginPath();
context.moveTo(keduLeft, 0);
context.lineTo(keduRight, 0);
context.stroke();
}
// 画步数0，中值，末值
context.save();
context.setFillStyle('rgba(255, 255, 255, 0.4)');
context.setFontSize(22 * rate);
context.setTextAlign('center');
context.rotate(0.342 * Math.PI);
context.fillText((this.data.targetSteps?'0':''), 0 * rate, -188 * rate);
context.rotate(0.56 * Math.PI);
context.fillText(String(Math.floor(this.data.targetSteps / 2) || ''), 0 * rate, -188 * rate);
context.rotate(0.56 * Math.PI);
context.fillText((this.data.targetSteps || ''), 0 * rate, -188 * rate);
// 画当前圆球
context.setFillStyle('#ffffff');
context.rotate((1.1932 * progressValue - 0.653) * Math.PI);
context.arc(-245 * rate, 0, 7 * rate, 0, 2 * Math.PI, false);
context.fill();
// 画
context.draw();
},
// 获取微信步数失败处理，包括未授权、设备不支持等
getWeRunDataFail(err) {
if ('device not support'.indexOf(err)) {
wx.showModal({
content: '设备不支持',
content: '设备不支持微信步数',
showCancel: false
});
} else {
......
pages/index/index.json
{
"navigationBarTextStyle":"black",
"backgroundColor": "#37d4a9",
"backgroundColorTop": "#37d4a9",
"backgroundColorBottom": "#24d6dc",
"navigationBarTextStyle":"white",
"backgroundColor": "#0DB8D7",
"backgroundColorTop": "#0DB8D7",
"backgroundColorBottom": "#24DDC5",
"usingComponents": {
"navbar": "/components/navBar/navBar"
}
......
pages/index/index.less
page {
background: #24d6dc;
background: #24DDC5;
}
.page-container {
width: 100%;
.today-step-container {
width: 100%;
height: 684rpx;
background: linear-gradient(180deg, #0DB8D7, #24DDC5);
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.today-step-container-bg {
width: 100%;
height: 684rpx;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
padding-bottom: 82rpx;
.continuity-days {
height: 48rpx;
border-radius: 48rpx;
......@@ -34,95 +27,86 @@ page {
width: 93rpx;
height: 32rpx;
position: absolute;
top: 30rpx;
top: 174rpx;
right: 24rpx;
}
.today-step-info {
width: 430rpx;
height: 430rpx;
margin-top: 100rpx;
width: 100%;
height: 330rpx;
margin-top: 230rpx;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.today-step-info-bg {
width: 430rpx;
height: 430rpx;
overflow: visible;
.progress-canvas {
width: 100%;
height: 350rpx;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.info-title {
font-size: 30rpx;
line-height: 1;
color: #fff;
margin-top: 150rpx;
margin-top: 138rpx;
}
.today-step-num {
font-size: 72rpx;
line-height: 1;
font-size: 80rpx;
line-height: .8;
color: #fff;
margin-top: 2rpx;
}
}
.get-info-btn {
width: 296rpx;
height: 50rpx;
border-radius: 50rpx;
background: #19afe6;
font-size: 30rpx;
line-height: 50rpx;
color: #fff;
text-align: center;
margin-top: -40rpx;
z-index: 2;
// font-weight: bold;
margin-top: 24rpx;
}
.step-progress-container {
height: 34rpx;
background: #cef0f0;
border-radius: 6rpx;
overflow: hidden;
margin-top: 12rpx;
height: 48rpx;
background: rgba(255, 255, 255, .3);
border-radius: 48rpx;
padding: 0 26rpx;
box-sizing: border-box;
display: flex;
align-items: center;
.today-status {
height: 34rpx;
font-size: 22rpx;
line-height: 34rpx;
position: absolute;
bottom: -24rpx;
left: 50%;
transform: translateX(-50%);
font-size: 24rpx;
line-height: 1;
color: #fff;
border-radius: 6rpx;
padding: 0 8rpx;
&.color1 {
background: #948cc9;
}
&.color2 {
background: #ffa0d1;
}
.today-status {
}
.today-progress {
font-size: 26rpx;
line-height: 1;
color: #698da7;
padding: 0 8rpx;
&>text {
font-size: 22rpx;
margin-left: 18rpx;
}
}
}
.get-info-btn {
width: 460rpx;
height: 88rpx;
border-radius: 88rpx;
background: #FABD21;
font-size: 34rpx;
line-height: 88rpx;
color: #fff;
font-weight: bold;
text-align: center;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
margin-top: 74rpx;
}
.other-step-title {
font-size: 34rpx;
line-height: 1;
color: #fff;
position: absolute;
left: 30rpx;
bottom: 28rpx;
bottom: 0rpx;
}
}
.other-step-container {
width: 100%;
padding: 0 30rpx 36rpx;
background: #24d6dc;
background: #24DDC5;
box-sizing: border-box;
.other-step-section {
width: 100%;
......@@ -136,9 +120,6 @@ page {
display: flex;
align-items: center;
position: relative;
&:first-child {
margin-top: 0;
}
.status-mark {
width: 74rpx;
height: 73rpx;
......
pages/index/index.wxml
<navbar showExit="{{true}}" navTitle="{{'步数打卡'}}" titleColor="{{'#000'}}" navColor="{{'#fff'}}" paddingColor="{{'#37d4a9'}}" showBtnBg="{{false}}"></navbar>
<navbar navTitle="{{'步数打卡'}}" titleColor="{{'#fff'}}" showMargin="{{false}}"></navbar>
<view class="page-container">
<view class="today-step-container">
<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="clickStepData">
<image class="today-step-info-bg" src="/images/index/sy_ybp.png"></image>
<canvas class="progress-canvas" canvas-id="progressCanvas"></canvas>
<block wx:if="{{stepAuth}}">
<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="clickStepData">{{unionAuth&&stepAuth?'提交步数打卡':'获取步数记录'}}</view>
<view class="info-title" style="margin-top: 226rpx" wx:else>点此获取步数数据</view>
<view class="step-progress-container" wx:if="{{targetSteps}}">
<view class="today-status {{currentSteps>=targetSteps?'color2':'color1'}}">{{currentSteps>=targetSteps?'已达标':'进行中'}}</view>
<view class="today-progress">{{currentSteps}}/{{targetSteps}}<text>步</text></view>
<view class="today-progress">{{currentSteps}}/{{targetSteps}}步</view>
</view>
</view>
<view class="get-info-btn" bindtap="clickStepData">{{unionAuth&&stepAuth?'点击提交今日步数':'点击获取微信步数'}}</view>
<view class="other-step-title" wx:if="{{stepRecordList.length}}">步数明细</view>
</view>
<view class="other-step-container">
......
pages/index/index.wxss
page {
background: #24d6dc;
background: #24DDC5;
}
.page-container {
width: 100%;
}
.page-container .today-step-container {
width: 100%;
height: 684rpx;
background: linear-gradient(180deg, #0DB8D7, #24DDC5);
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.page-container .today-step-container .today-step-container-bg {
width: 100%;
height: 684rpx;
position: absolute;
left: 0;
top: 0;
z-index: -1;
padding-bottom: 82rpx;
}
.page-container .today-step-container .continuity-days {
height: 48rpx;
......@@ -36,81 +29,69 @@ page {
width: 93rpx;
height: 32rpx;
position: absolute;
top: 30rpx;
top: 174rpx;
right: 24rpx;
}
.page-container .today-step-container .today-step-info {
width: 430rpx;
height: 430rpx;
margin-top: 100rpx;
width: 100%;
height: 330rpx;
margin-top: 230rpx;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
overflow: visible;
}
.page-container .today-step-container .today-step-info .today-step-info-bg {
width: 430rpx;
height: 430rpx;
.page-container .today-step-container .today-step-info .progress-canvas {
width: 100%;
height: 350rpx;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.page-container .today-step-container .today-step-info .info-title {
font-size: 30rpx;
line-height: 1;
color: #fff;
margin-top: 150rpx;
margin-top: 138rpx;
}
.page-container .today-step-container .today-step-info .today-step-num {
font-size: 72rpx;
line-height: 1;
font-size: 80rpx;
line-height: .8;
color: #fff;
margin-top: 2rpx;
margin-top: 24rpx;
}
.page-container .today-step-container .get-info-btn {
width: 296rpx;
height: 50rpx;
border-radius: 50rpx;
background: #19afe6;
font-size: 30rpx;
line-height: 50rpx;
color: #fff;
text-align: center;
margin-top: -40rpx;
z-index: 2;
}
.page-container .today-step-container .step-progress-container {
height: 34rpx;
background: #cef0f0;
border-radius: 6rpx;
overflow: hidden;
margin-top: 12rpx;
.page-container .today-step-container .today-step-info .step-progress-container {
height: 48rpx;
background: rgba(255, 255, 255, 0.3);
border-radius: 48rpx;
padding: 0 26rpx;
box-sizing: border-box;
display: flex;
align-items: center;
}
.page-container .today-step-container .step-progress-container .today-status {
height: 34rpx;
font-size: 22rpx;
line-height: 34rpx;
position: absolute;
bottom: -24rpx;
left: 50%;
transform: translateX(-50%);
font-size: 24rpx;
line-height: 1;
color: #fff;
border-radius: 6rpx;
padding: 0 8rpx;
}
.page-container .today-step-container .step-progress-container .today-status.color1 {
background: #948cc9;
.page-container .today-step-container .today-step-info .step-progress-container .today-progress {
margin-left: 18rpx;
}
.page-container .today-step-container .step-progress-container .today-status.color2 {
background: #ffa0d1;
}
.page-container .today-step-container .step-progress-container .today-progress {
font-size: 26rpx;
line-height: 1;
color: #698da7;
padding: 0 8rpx;
}
.page-container .today-step-container .step-progress-container .today-progress > text {
font-size: 22rpx;
.page-container .today-step-container .get-info-btn {
width: 460rpx;
height: 88rpx;
border-radius: 88rpx;
background: #FABD21;
font-size: 34rpx;
line-height: 88rpx;
color: #fff;
font-weight: bold;
text-align: center;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
margin-top: 74rpx;
}
.page-container .today-step-container .other-step-title {
font-size: 34rpx;
......@@ -118,12 +99,12 @@ page {
color: #fff;
position: absolute;
left: 30rpx;
bottom: 28rpx;
bottom: 0rpx;
}
.page-container .other-step-container {
width: 100%;
padding: 0 30rpx 36rpx;
background: #24d6dc;
background: #24DDC5;
box-sizing: border-box;
}
.page-container .other-step-container .other-step-section {
......@@ -139,9 +120,6 @@ page {
align-items: center;
position: relative;
}
.page-container .other-step-container .other-step-section:first-child {
margin-top: 0;
}
.page-container .other-step-container .other-step-section .status-mark {
width: 74rpx;
height: 73rpx;
......
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