Skip to content

W
walk_daka_wx
Commit 91a97b7b by 穆启卓
Options

改样式2 

把以前不要的又搬出来了
把现在的又不要了
parent 05b22c30
Showing with 198 additions and 106 deletions
components/navBar/navBar.wxml
......@@ -4,7 +4,7 @@
<!-- 左边按钮 -->
<view wx:if="{{showExit || showHome || showBack}}" class="home-container {{showBack && showHome ? '' : 'show-back-btn'}}" style="{{showBtnBg?'':'background: transparent;'}}">
<navigator class="exit item" hover-class="none" open-type="exit" target="miniProgram" wx:if="{{showExit}}">
<image src="/images/all_people/nyhb_ic_exit.png" class="icon" mode="aspectFit"></image>
<image src="/images/all_people/nyhb_ic_back.png" class="icon" mode="aspectFit"></image>
</navigator>
<view class="back item" wx:if="{{showBack}}" catch:tap="tapNavBack">
<image src="/images/all_people/nyhb_ic_back.png" class="icon" mode="aspectFit"></image>
......
components/navBar/navBar.wxss
......@@ -37,7 +37,6 @@
justify-content: center;
align-items: center;
z-index: 2000;
box-shadow: 0 0 2rpx rgba(255, 255, 255, 1);
background-color: rgba(0, 0, 0, 0.1);
border-radius: 30rpx;
box-sizing: border-box;
......@@ -89,4 +88,4 @@
.show-back-btn .item {
width: 65rpx;
}
}
\ No newline at end of file
images/index/sy_shuoming.png
images/index/sy_shuoming.png

878 Bytes | W: | H:

images/index/sy_shuoming.png

454 Bytes | W: | H:

images/index/sy_shuoming.png
images/index/sy_shuoming.png
images/index/sy_shuoming.png
images/index/sy_shuoming.png
  • 2-up
  • Swipe
  • Onion skin
pages/index/index.js
......@@ -5,7 +5,7 @@ Page({
userAuth: false, // 用户信息授权（为了拿unionId）
unionAuth: false, // unionId授权: 如果为false是需要授权，true是不需要
stepAuth: false, // 步数授权
commitStepPopupShow: false, // 同步步数成功弹窗
// commitStepPopupShow: false, // 同步步数成功弹窗
activityExplainShow: false, // 活动说明弹窗
currentSteps: 0,
targetSteps: 0,
......@@ -19,6 +19,9 @@ Page({
},
onShow() {
wx.showLoading({
title: '获取步数中'
});
this.setData({
scene: app.globalData.scene
});
......@@ -91,6 +94,8 @@ Page({
this.getClickStepData();
} else if (app.globalData.stepAuth) {
this.loadStepData();
} else {
wx.hideLoading();
}
});
}
......@@ -151,6 +156,9 @@ Page({
// content: '获取微信运动步数成功',
// showCancel: false
// });
},
complete: () => {
wx.hideLoading();
}
});
}
......@@ -262,13 +270,17 @@ Page({
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);
this.showToast();
},
complete: () => {
wx.hideLoading();
}
});
},
......@@ -460,6 +472,34 @@ Page({
activityExplainShow: !this.data.activityExplainShow
});
},
// 活动说明弹窗
showToast() {
let content = '获取步数成功';
const scene = this.data.scene,
currentSteps = this.data.currentSteps,
targetSteps = this.data.targetSteps;
if (targetSteps) { // 报名比赛了
if (scene === 1048) { // 场景值是二维码进来
if (currentSteps >= targetSteps) { // 步数达标
content = '恭喜你今日步数已达标';
} else {
content = '提交今日步数成功';
}
} else {
if (currentSteps >= targetSteps) {
content = '恭喜你今日步数已达标，去比赛详情页同步状态吧';
} else {
content = '提交今日步数成功，去继续行走吧';
}
}
}
wx.showToast({
title: content,
icon: 'none',
duration: 2000
});
},
// 暂留==================================================================
......@@ -488,11 +528,11 @@ Page({
// },
// 同步步数成功弹窗
changeShowPopup() {
this.setData({
commitStepPopupShow: !this.data.commitStepPopupShow
});
},
// changeShowPopup() {
// this.setData({
// commitStepPopupShow: !this.data.commitStepPopupShow
// });
// },
// goAuthorizationPage() {
// console.log(`/pages/authorization/authorization?userAuth=${this.data.userAuth}&stepAuth=${this.data.stepAuth}`)
......
pages/index/index.less
......@@ -10,7 +10,6 @@ page {
flex-direction: column;
align-items: center;
position: relative;
padding-bottom: 82rpx;
.continuity-days {
height: 48rpx;
border-radius: 48rpx;
......@@ -24,11 +23,18 @@ page {
top: 24rpx;
}
.explain {
width: 93rpx;
height: 32rpx;
font-size: 26rpx;
line-height: 30rpx;
color: #fff;
display: flex;
position: absolute;
top: 174rpx;
top: 176rpx;
right: 24rpx;
image {
width: 30rpx;
height: 30rpx;
margin-right: 6rpx;
}
}
.today-step-info {
width: 100%;
......@@ -93,56 +99,73 @@ page {
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: 0rpx;
letter-spacing: 3rpx;
}
}
.other-step-container {
width: 100%;
padding: 0 30rpx 36rpx;
background: #24DDC5;
padding: 28rpx 30rpx 36rpx;
box-sizing: border-box;
.other-step-section {
width: 100%;
height: 120rpx;
background: #fff;
border-radius: 10rpx;
box-shadow: 0 4rpx 8rpx 4rpx #05b8c8;
margin-top: 36rpx;
padding: 0 48rpx;
box-sizing: border-box;
.other-step-title {
font-size: 34rpx;
line-height: 39rpx;
color: #fff;
display: flex;
align-items: center;
position: relative;
.status-mark {
width: 74rpx;
height: 73rpx;
display: block;
position: absolute;
left: -3rpx;
top: -2rpx;
margin-top: 38rpx;
image {
width: 34rpx;
height: 39rpx;
margin-right: 14rpx;
}
.date-container {
flex-shrink: 0;
.date-item {
}
.other-step-section-container {
width: 100%;
border-radius: 20rpx;
overflow: hidden;
background: #fff;
margin-top: 28rpx;
.other-step-section {
height: 110rpx;
background: #fff;
margin: 0 30rpx;
display: flex;
align-items: center;
position: relative;
border-top: 1rpx solid #e0e0e0;
&:first-child {
border-top: none;
}
.date {
flex: 1;
font-size: 30rpx;
line-height: 1.36;
color: #357aa6;
color: #888;
flex-shrink: 0;
}
.status {
width: 90rpx;
height: 48rpx;
border-radius: 48rpx;
box-sizing: border-box;
font-size: 26rpx;
line-height: 44rpx;
text-align: center;
flex-shrink: 0;
&.status1 {
border: 1rpx solid #FABD21;
color: #FABD21;
}
&.status2 {
border: 1rpx solid #ccc;
color: #ccc;
}
}
.step {
width: 178rpx;
font-size: 36rpx;
color: #36DCC9;
text-align: right;
flex-shrink: 0;
}
}
.other-step-num {
flex: 1;
font-size: 36rpx;
line-height: 1;
color: #477595;
font-weight: bold;
text-align: right;
}
}
}
......
pages/index/index.wxml
<navbar navTitle="{{'步数打卡'}}" titleColor="{{'#fff'}}" showMargin="{{false}}"></navbar>
<navbar showExit="{{true}}" showBtnBg="{{false}}" navTitle="{{'步数打卡'}}" titleColor="{{'#fff'}}" showMargin="{{false}}"></navbar>
<view class="page-container">
<view class="today-step-container">
<!-- <view class="continuity-days">连续打卡5天</view> -->
<image class="explain" src="/images/index/sy_shuoming.png" bindtap="changeActivityExplainShow"></image>
<view class="explain" bindtap="changeActivityExplainShow">
<image src="/images/index/sy_shuoming.png"></image>
<view>说明</view>
</view>
<view class="today-step-info" bindtap="clickStepData">
<canvas class="progress-canvas" canvas-id="progressCanvas"></canvas>
<block wx:if="{{stepAuth}}">
......@@ -16,15 +19,18 @@
</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">
<view class="other-step-section" wx:for="{{stepRecordList}}" wx:key="{{index}}" wx:if="{{index!==0}}">
<image class="status-mark" src="/images/index/sy_{{item.status===1?'wancheng':'shibai'}}.png" wx:if="{{item.status}}"></image>
<view class="date-container">
<view class="date-item">{{item.date}}总步数</view>
<view class="other-step-container" wx:if="{{stepRecordList.length}}">
<view class="other-step-title">
<image src="/images/index/dakalist_icon.png"></image>
<view>打卡记录</view>
</view>
<view class="other-step-section-container">
<view class="other-step-section" wx:for="{{stepRecordList}}" wx:key="{{index}}" wx:if="{{index!==0}}">
<view class="date">{{item.date}}总步数</view>
<view class="status {{item.status===1?'status1':'status2'}}" wx:if="{{item.status}}">{{item.status===1?'成功':'失败'}}</view>
<view class="step">{{item.step}}</view>
</view>
<view class="other-step-num">+{{item.step}}</view>
</view>
</view>
</view>
......@@ -53,9 +59,9 @@
</view>
</view>
<!-- 同步步数成功弹窗 -->
<view class="commit-step-popup-bg" wx:if="{{commitStepPopupShow}}">
<!-- <view class="commit-step-popup-bg" wx:if="{{commitStepPopupShow}}">
<view class="commit-step-popup">
<view class="popup-content" wx:if="{{scene === 1048}}">{{currentSteps>=targetSteps?'恭喜你今日步数已达标，将返回比赛详情页':'提交今日步数成功，将返回比赛详情页'}}</view>
<view class="popup-content" wx:if="{{scene === 1048}}">{{currentSteps>=targetSteps?'恭喜你今日步数已达标':'提交今日步数成功'}}</view>
<view class="popup-content" wx:else>{{currentSteps>=targetSteps?'恭喜你今日步数已达标，去比赛详情页同步状态吧':'提交今日步数成功，去继续行走吧'}}</view>
<view class="popup-btn-container">
<view class="cancel-btn" bindtap="changeShowPopup" wx:if="{{scene === 1048}}">取消</view>
......@@ -63,4 +69,4 @@
<view class="confirm-btn" bindtap="changeShowPopup" wx:else>确定</view>
</view>
</view>
</view>
\ No newline at end of file
</view> -->
\ No newline at end of file
pages/index/index.wxss
......@@ -11,7 +11,6 @@ page {
flex-direction: column;
align-items: center;
position: relative;
padding-bottom: 82rpx;
}
.page-container .today-step-container .continuity-days {
height: 48rpx;
......@@ -26,12 +25,19 @@ page {
top: 24rpx;
}
.page-container .today-step-container .explain {
width: 93rpx;
height: 32rpx;
font-size: 26rpx;
line-height: 30rpx;
color: #fff;
display: flex;
position: absolute;
top: 174rpx;
top: 176rpx;
right: 24rpx;
}
.page-container .today-step-container .explain image {
width: 30rpx;
height: 30rpx;
margin-right: 6rpx;
}
.page-container .today-step-container .today-step-info {
width: 100%;
height: 330rpx;
......@@ -92,57 +98,74 @@ page {
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;
line-height: 1;
color: #fff;
position: absolute;
left: 30rpx;
bottom: 0rpx;
letter-spacing: 3rpx;
}
.page-container .other-step-container {
width: 100%;
padding: 0 30rpx 36rpx;
background: #24DDC5;
padding: 28rpx 30rpx 36rpx;
box-sizing: border-box;
}
.page-container .other-step-container .other-step-section {
.page-container .other-step-container .other-step-title {
font-size: 34rpx;
line-height: 39rpx;
color: #fff;
display: flex;
margin-top: 38rpx;
}
.page-container .other-step-container .other-step-title image {
width: 34rpx;
height: 39rpx;
margin-right: 14rpx;
}
.page-container .other-step-container .other-step-section-container {
width: 100%;
height: 120rpx;
border-radius: 20rpx;
overflow: hidden;
background: #fff;
border-radius: 10rpx;
box-shadow: 0 4rpx 8rpx 4rpx #05b8c8;
margin-top: 36rpx;
padding: 0 48rpx;
box-sizing: border-box;
margin-top: 28rpx;
}
.page-container .other-step-container .other-step-section-container .other-step-section {
height: 110rpx;
background: #fff;
margin: 0 30rpx;
display: flex;
align-items: center;
position: relative;
border-top: 1rpx solid #e0e0e0;
}
.page-container .other-step-container .other-step-section .status-mark {
width: 74rpx;
height: 73rpx;
display: block;
position: absolute;
left: -3rpx;
top: -2rpx;
.page-container .other-step-container .other-step-section-container .other-step-section:first-child {
border-top: none;
}
.page-container .other-step-container .other-step-section .date-container {
.page-container .other-step-container .other-step-section-container .other-step-section .date {
flex: 1;
font-size: 30rpx;
color: #888;
flex-shrink: 0;
}
.page-container .other-step-container .other-step-section .date-container .date-item {
font-size: 30rpx;
line-height: 1.36;
color: #357aa6;
.page-container .other-step-container .other-step-section-container .other-step-section .status {
width: 90rpx;
height: 48rpx;
border-radius: 48rpx;
box-sizing: border-box;
font-size: 26rpx;
line-height: 44rpx;
text-align: center;
flex-shrink: 0;
}
.page-container .other-step-container .other-step-section .other-step-num {
flex: 1;
.page-container .other-step-container .other-step-section-container .other-step-section .status.status1 {
border: 1rpx solid #FABD21;
color: #FABD21;
}
.page-container .other-step-container .other-step-section-container .other-step-section .status.status2 {
border: 1rpx solid #ccc;
color: #ccc;
}
.page-container .other-step-container .other-step-section-container .other-step-section .step {
width: 178rpx;
font-size: 36rpx;
line-height: 1;
color: #477595;
font-weight: bold;
color: #36DCC9;
text-align: right;
flex-shrink: 0;
}
.activity-explain-popup-bg {
position: fixed;
......
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