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({ ...@@ -5,7 +5,7 @@ Component({
properties: { properties: {
navColor: { navColor: {
type: String, type: String,
value: "#E65845", value: "",
}, },
titleColor:{ titleColor:{
type: String, type: String,
......
pages/index/index.js
...@@ -13,7 +13,9 @@ Page({ ...@@ -13,7 +13,9 @@ Page({
showGetUserInfo: false, showGetUserInfo: false,
isFirstReq: true, isFirstReq: true,
reCheck: false, reCheck: false,
scene: 1001 scene: 1001,
progressCanvasContext: '',
progressCanvasRate: '',
}, },
onShow() { onShow() {
...@@ -23,6 +25,46 @@ Page({ ...@@ -23,6 +25,46 @@ Page({
this.getPageData(); 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() { getPageData() {
// 1、第一步，先判断用户信息和步数是否授过权 // 1、第一步，先判断用户信息和步数是否授过权
wx.getSetting({ wx.getSetting({
...@@ -213,20 +255,20 @@ Page({ ...@@ -213,20 +255,20 @@ Page({
item.status = 0; // 未参与打卡 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.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(); 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({ ...@@ -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) { getWeRunDataFail(err) {
if ('device not support'.indexOf(err)) { if ('device not support'.indexOf(err)) {
wx.showModal({ wx.showModal({
content: '设备不支持', content: '设备不支持微信步数',
showCancel: false showCancel: false
}); });
} else { } else {
......
pages/index/index.json
{ {
"navigationBarTextStyle":"black", "navigationBarTextStyle":"white",
"backgroundColor": "#37d4a9", "backgroundColor": "#0DB8D7",
"backgroundColorTop": "#37d4a9", "backgroundColorTop": "#0DB8D7",
"backgroundColorBottom": "#24d6dc", "backgroundColorBottom": "#24DDC5",
"usingComponents": { "usingComponents": {
"navbar": "/components/navBar/navBar" "navbar": "/components/navBar/navBar"
} }
......
pages/index/index.less
page { page {
background: #24d6dc; background: #24DDC5;
} }
.page-container { .page-container {
width: 100%; width: 100%;
.today-step-container { .today-step-container {
width: 100%; width: 100%;
height: 684rpx; background: linear-gradient(180deg, #0DB8D7, #24DDC5);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: relative; position: relative;
.today-step-container-bg { padding-bottom: 82rpx;
width: 100%;
height: 684rpx;
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.continuity-days { .continuity-days {
height: 48rpx; height: 48rpx;
border-radius: 48rpx; border-radius: 48rpx;
...@@ -34,95 +27,86 @@ page { ...@@ -34,95 +27,86 @@ page {
width: 93rpx; width: 93rpx;
height: 32rpx; height: 32rpx;
position: absolute; position: absolute;
top: 30rpx; top: 174rpx;
right: 24rpx; right: 24rpx;
} }
.today-step-info { .today-step-info {
width: 430rpx; width: 100%;
height: 430rpx; height: 330rpx;
margin-top: 100rpx; margin-top: 230rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: relative; position: relative;
.today-step-info-bg { overflow: visible;
width: 430rpx; .progress-canvas {
height: 430rpx; width: 100%;
height: 350rpx;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
z-index: -1;
} }
.info-title { .info-title {
font-size: 30rpx; font-size: 30rpx;
line-height: 1; line-height: 1;
color: #fff; color: #fff;
margin-top: 150rpx; margin-top: 138rpx;
} }
.today-step-num { .today-step-num {
font-size: 72rpx; font-size: 80rpx;
line-height: 1; line-height: .8;
color: #fff; color: #fff;
margin-top: 2rpx; // font-weight: bold;
} margin-top: 24rpx;
}
.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;
} }
.step-progress-container { .step-progress-container {
height: 34rpx; height: 48rpx;
background: #cef0f0; background: rgba(255, 255, 255, .3);
border-radius: 6rpx; border-radius: 48rpx;
overflow: hidden; padding: 0 26rpx;
margin-top: 12rpx; box-sizing: border-box;
display: flex; display: flex;
align-items: center; align-items: center;
.today-status { position: absolute;
height: 34rpx; bottom: -24rpx;
font-size: 22rpx; left: 50%;
line-height: 34rpx; transform: translateX(-50%);
font-size: 24rpx;
line-height: 1;
color: #fff; color: #fff;
border-radius: 6rpx; .today-status {
padding: 0 8rpx;
&.color1 {
background: #948cc9;
}
&.color2 {
background: #ffa0d1;
}
} }
.today-progress { .today-progress {
font-size: 26rpx; margin-left: 18rpx;
line-height: 1;
color: #698da7;
padding: 0 8rpx;
&>text {
font-size: 22rpx;
} }
} }
} }
.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 { .other-step-title {
font-size: 34rpx; font-size: 34rpx;
line-height: 1; line-height: 1;
color: #fff; color: #fff;
position: absolute; position: absolute;
left: 30rpx; left: 30rpx;
bottom: 28rpx; bottom: 0rpx;
} }
} }
.other-step-container { .other-step-container {
width: 100%; width: 100%;
padding: 0 30rpx 36rpx; padding: 0 30rpx 36rpx;
background: #24d6dc; background: #24DDC5;
box-sizing: border-box; box-sizing: border-box;
.other-step-section { .other-step-section {
width: 100%; width: 100%;
...@@ -136,9 +120,6 @@ page { ...@@ -136,9 +120,6 @@ page {
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
&:first-child {
margin-top: 0;
}
.status-mark { .status-mark {
width: 74rpx; width: 74rpx;
height: 73rpx; 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="page-container">
<view class="today-step-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> --> <!-- <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="clickStepData"> <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}}"> <block wx:if="{{stepAuth}}">
<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: 226rpx" wx:else>点此获取步数数据</view>
</view>
<view class="get-info-btn" bindtap="clickStepData">{{unionAuth&&stepAuth?'提交步数打卡':'获取步数记录'}}</view>
<view class="step-progress-container" wx:if="{{targetSteps}}"> <view class="step-progress-container" wx:if="{{targetSteps}}">
<view class="today-status {{currentSteps>=targetSteps?'color2':'color1'}}">{{currentSteps>=targetSteps?'已达标':'进行中'}}</view> <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>
<view class="get-info-btn" bindtap="clickStepData">{{unionAuth&&stepAuth?'点击提交今日步数':'点击获取微信步数'}}</view>
<view class="other-step-title" wx:if="{{stepRecordList.length}}">步数明细</view> <view class="other-step-title" wx:if="{{stepRecordList.length}}">步数明细</view>
</view> </view>
<view class="other-step-container"> <view class="other-step-container">
......
pages/index/index.wxss
page { page {
background: #24d6dc; background: #24DDC5;
} }
.page-container { .page-container {
width: 100%; width: 100%;
} }
.page-container .today-step-container { .page-container .today-step-container {
width: 100%; width: 100%;
height: 684rpx; background: linear-gradient(180deg, #0DB8D7, #24DDC5);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: relative; position: relative;
} padding-bottom: 82rpx;
.page-container .today-step-container .today-step-container-bg {
width: 100%;
height: 684rpx;
position: absolute;
left: 0;
top: 0;
z-index: -1;
} }
.page-container .today-step-container .continuity-days { .page-container .today-step-container .continuity-days {
height: 48rpx; height: 48rpx;
...@@ -36,81 +29,69 @@ page { ...@@ -36,81 +29,69 @@ page {
width: 93rpx; width: 93rpx;
height: 32rpx; height: 32rpx;
position: absolute; position: absolute;
top: 30rpx; top: 174rpx;
right: 24rpx; right: 24rpx;
} }
.page-container .today-step-container .today-step-info { .page-container .today-step-container .today-step-info {
width: 430rpx; width: 100%;
height: 430rpx; height: 330rpx;
margin-top: 100rpx; margin-top: 230rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: relative; position: relative;
overflow: visible;
} }
.page-container .today-step-container .today-step-info .today-step-info-bg { .page-container .today-step-container .today-step-info .progress-canvas {
width: 430rpx; width: 100%;
height: 430rpx; height: 350rpx;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
z-index: -1;
} }
.page-container .today-step-container .today-step-info .info-title { .page-container .today-step-container .today-step-info .info-title {
font-size: 30rpx; font-size: 30rpx;
line-height: 1; line-height: 1;
color: #fff; color: #fff;
margin-top: 150rpx; margin-top: 138rpx;
} }
.page-container .today-step-container .today-step-info .today-step-num { .page-container .today-step-container .today-step-info .today-step-num {
font-size: 72rpx; font-size: 80rpx;
line-height: 1; line-height: .8;
color: #fff; color: #fff;
margin-top: 2rpx; margin-top: 24rpx;
} }
.page-container .today-step-container .get-info-btn { .page-container .today-step-container .today-step-info .step-progress-container {
width: 296rpx; height: 48rpx;
height: 50rpx; background: rgba(255, 255, 255, 0.3);
border-radius: 50rpx; border-radius: 48rpx;
background: #19afe6; padding: 0 26rpx;
font-size: 30rpx; box-sizing: border-box;
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;
display: flex; display: flex;
align-items: center; align-items: center;
} position: absolute;
.page-container .today-step-container .step-progress-container .today-status { bottom: -24rpx;
height: 34rpx; left: 50%;
font-size: 22rpx; transform: translateX(-50%);
line-height: 34rpx; font-size: 24rpx;
line-height: 1;
color: #fff; color: #fff;
border-radius: 6rpx;
padding: 0 8rpx;
} }
.page-container .today-step-container .step-progress-container .today-status.color1 { .page-container .today-step-container .today-step-info .step-progress-container .today-progress {
background: #948cc9; margin-left: 18rpx;
} }
.page-container .today-step-container .step-progress-container .today-status.color2 { .page-container .today-step-container .get-info-btn {
background: #ffa0d1; width: 460rpx;
} height: 88rpx;
.page-container .today-step-container .step-progress-container .today-progress { border-radius: 88rpx;
font-size: 26rpx; background: #FABD21;
line-height: 1; font-size: 34rpx;
color: #698da7; line-height: 88rpx;
padding: 0 8rpx; color: #fff;
} font-weight: bold;
.page-container .today-step-container .step-progress-container .today-progress > text { text-align: center;
font-size: 22rpx; box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
margin-top: 74rpx;
} }
.page-container .today-step-container .other-step-title { .page-container .today-step-container .other-step-title {
font-size: 34rpx; font-size: 34rpx;
...@@ -118,12 +99,12 @@ page { ...@@ -118,12 +99,12 @@ page {
color: #fff; color: #fff;
position: absolute; position: absolute;
left: 30rpx; left: 30rpx;
bottom: 28rpx; bottom: 0rpx;
} }
.page-container .other-step-container { .page-container .other-step-container {
width: 100%; width: 100%;
padding: 0 30rpx 36rpx; padding: 0 30rpx 36rpx;
background: #24d6dc; background: #24DDC5;
box-sizing: border-box; box-sizing: border-box;
} }
.page-container .other-step-container .other-step-section { .page-container .other-step-container .other-step-section {
...@@ -139,9 +120,6 @@ page { ...@@ -139,9 +120,6 @@ page {
align-items: center; align-items: center;
position: relative; 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 { .page-container .other-step-container .other-step-section .status-mark {
width: 74rpx; width: 74rpx;
height: 73rpx; 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