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 @@ ...@@ -4,7 +4,7 @@
<!-- 左边按钮 --> <!-- 左边按钮 -->
<view wx:if="{{showExit || showHome || showBack}}" class="home-container {{showBack && showHome ? '' : 'show-back-btn'}}" style="{{showBtnBg?'':'background: transparent;'}}"> <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}}"> <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> </navigator>
<view class="back item" wx:if="{{showBack}}" catch:tap="tapNavBack"> <view class="back item" wx:if="{{showBack}}" catch:tap="tapNavBack">
<image src="/images/all_people/nyhb_ic_back.png" class="icon" mode="aspectFit"></image> <image src="/images/all_people/nyhb_ic_back.png" class="icon" mode="aspectFit"></image>
......
components/navBar/navBar.wxss
...@@ -37,7 +37,6 @@ ...@@ -37,7 +37,6 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
z-index: 2000; z-index: 2000;
box-shadow: 0 0 2rpx rgba(255, 255, 255, 1);
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
border-radius: 30rpx; border-radius: 30rpx;
box-sizing: border-box; box-sizing: border-box;
...@@ -89,4 +88,4 @@ ...@@ -89,4 +88,4 @@
.show-back-btn .item { .show-back-btn .item {
width: 65rpx; 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({ ...@@ -5,7 +5,7 @@ Page({
userAuth: false, // 用户信息授权（为了拿unionId） userAuth: false, // 用户信息授权（为了拿unionId）
unionAuth: false, // unionId授权: 如果为false是需要授权，true是不需要 unionAuth: false, // unionId授权: 如果为false是需要授权，true是不需要
stepAuth: false, // 步数授权 stepAuth: false, // 步数授权
commitStepPopupShow: false, // 同步步数成功弹窗 // commitStepPopupShow: false, // 同步步数成功弹窗
activityExplainShow: false, // 活动说明弹窗 activityExplainShow: false, // 活动说明弹窗
currentSteps: 0, currentSteps: 0,
targetSteps: 0, targetSteps: 0,
...@@ -19,6 +19,9 @@ Page({ ...@@ -19,6 +19,9 @@ Page({
}, },
onShow() { onShow() {
wx.showLoading({
title: '获取步数中'
});
this.setData({ this.setData({
scene: app.globalData.scene scene: app.globalData.scene
}); });
...@@ -91,6 +94,8 @@ Page({ ...@@ -91,6 +94,8 @@ Page({
this.getClickStepData(); this.getClickStepData();
} else if (app.globalData.stepAuth) { } else if (app.globalData.stepAuth) {
this.loadStepData(); this.loadStepData();
} else {
wx.hideLoading();
} }
}); });
} }
...@@ -151,6 +156,9 @@ Page({ ...@@ -151,6 +156,9 @@ Page({
// content: '获取微信运动步数成功', // content: '获取微信运动步数成功',
// showCancel: false // showCancel: false
// }); // });
},
complete: () => {
wx.hideLoading();
} }
}); });
} }
...@@ -262,13 +270,17 @@ Page({ ...@@ -262,13 +270,17 @@ Page({
stepRecordList: resData.step_data stepRecordList: resData.step_data
}; };
if (resData.total_step > 0) { if (resData.total_step > 0) {
this.changeShowPopup(); // this.changeShowPopup();
const realCurrentSteps = (resData.step_data && resData.step_data[0]) ? resData.step_data[0].step : 0; const realCurrentSteps = (resData.step_data && resData.step_data[0]) ? resData.step_data[0].step : 0;
this.dynamicDrawCanvas(realCurrentSteps, resData.total_step / 100); this.dynamicDrawCanvas(realCurrentSteps, resData.total_step / 100);
} else { } else {
setData.currentSteps = (resData.step_data && resData.step_data[0]) ? resData.step_data[0].step : 0; setData.currentSteps = (resData.step_data && resData.step_data[0]) ? resData.step_data[0].step : 0;
} }
this.setData(setData); this.setData(setData);
this.showToast();
},
complete: () => {
wx.hideLoading();
} }
}); });
}, },
...@@ -460,6 +472,34 @@ Page({ ...@@ -460,6 +472,34 @@ Page({
activityExplainShow: !this.data.activityExplainShow 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({ ...@@ -488,11 +528,11 @@ Page({
// }, // },
// 同步步数成功弹窗 // 同步步数成功弹窗
changeShowPopup() { // changeShowPopup() {
this.setData({ // this.setData({
commitStepPopupShow: !this.data.commitStepPopupShow // commitStepPopupShow: !this.data.commitStepPopupShow
}); // });
}, // },
// goAuthorizationPage() { // goAuthorizationPage() {
// console.log(`/pages/authorization/authorization?userAuth=${this.data.userAuth}&stepAuth=${this.data.stepAuth}`) // console.log(`/pages/authorization/authorization?userAuth=${this.data.userAuth}&stepAuth=${this.data.stepAuth}`)
......
pages/index/index.less
...@@ -10,7 +10,6 @@ page { ...@@ -10,7 +10,6 @@ page {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: relative; position: relative;
padding-bottom: 82rpx;
.continuity-days { .continuity-days {
height: 48rpx; height: 48rpx;
border-radius: 48rpx; border-radius: 48rpx;
...@@ -24,11 +23,18 @@ page { ...@@ -24,11 +23,18 @@ page {
top: 24rpx; top: 24rpx;
} }
.explain { .explain {
width: 93rpx; font-size: 26rpx;
height: 32rpx; line-height: 30rpx;
color: #fff;
display: flex;
position: absolute; position: absolute;
top: 174rpx; top: 176rpx;
right: 24rpx; right: 24rpx;
image {
width: 30rpx;
height: 30rpx;
margin-right: 6rpx;
}
} }
.today-step-info { .today-step-info {
width: 100%; width: 100%;
...@@ -93,56 +99,73 @@ page { ...@@ -93,56 +99,73 @@ page {
text-align: center; text-align: center;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
margin-top: 74rpx; margin-top: 74rpx;
} letter-spacing: 3rpx;
.other-step-title {
font-size: 34rpx;
line-height: 1;
color: #fff;
position: absolute;
left: 30rpx;
bottom: 0rpx;
} }
} }
.other-step-container { .other-step-container {
width: 100%; width: 100%;
padding: 0 30rpx 36rpx; padding: 28rpx 30rpx 36rpx;
background: #24DDC5;
box-sizing: border-box; box-sizing: border-box;
.other-step-section { .other-step-title {
width: 100%; font-size: 34rpx;
height: 120rpx; line-height: 39rpx;
background: #fff; color: #fff;
border-radius: 10rpx;
box-shadow: 0 4rpx 8rpx 4rpx #05b8c8;
margin-top: 36rpx;
padding: 0 48rpx;
box-sizing: border-box;
display: flex; display: flex;
align-items: center; margin-top: 38rpx;
position: relative; image {
.status-mark { width: 34rpx;
width: 74rpx; height: 39rpx;
height: 73rpx; margin-right: 14rpx;
display: block;
position: absolute;
left: -3rpx;
top: -2rpx;
} }
.date-container { }
flex-shrink: 0; .other-step-section-container {
.date-item { 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; font-size: 30rpx;
line-height: 1.36; color: #888;
color: #357aa6; 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="page-container">
<view class="today-step-container"> <view class="today-step-container">
<!-- <view class="continuity-days">连续打卡5天</view> --> <!-- <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"> <view class="today-step-info" bindtap="clickStepData">
<canvas class="progress-canvas" canvas-id="progressCanvas"></canvas> <canvas class="progress-canvas" canvas-id="progressCanvas"></canvas>
<block wx:if="{{stepAuth}}"> <block wx:if="{{stepAuth}}">
...@@ -16,15 +19,18 @@ ...@@ -16,15 +19,18 @@
</view> </view>
</view> </view>
<view class="get-info-btn" bindtap="clickStepData">{{unionAuth&&stepAuth?'点击提交今日步数':'点击获取微信步数'}}</view> <view class="get-info-btn" bindtap="clickStepData">{{unionAuth&&stepAuth?'点击提交今日步数':'点击获取微信步数'}}</view>
<view class="other-step-title" wx:if="{{stepRecordList.length}}">步数明细</view>
</view> </view>
<view class="other-step-container"> <view class="other-step-container" wx:if="{{stepRecordList.length}}">
<view class="other-step-section" wx:for="{{stepRecordList}}" wx:key="{{index}}" wx:if="{{index!==0}}"> <view class="other-step-title">
<image class="status-mark" src="/images/index/sy_{{item.status===1?'wancheng':'shibai'}}.png" wx:if="{{item.status}}"></image> <image src="/images/index/dakalist_icon.png"></image>
<view class="date-container"> <view>打卡记录</view>
<view class="date-item">{{item.date}}总步数</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>
<view class="other-step-num">+{{item.step}}</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -53,9 +59,9 @@ ...@@ -53,9 +59,9 @@
</view> </view>
</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="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-content" wx:else>{{currentSteps>=targetSteps?'恭喜你今日步数已达标，去比赛详情页同步状态吧':'提交今日步数成功，去继续行走吧'}}</view>
<view class="popup-btn-container"> <view class="popup-btn-container">
<view class="cancel-btn" bindtap="changeShowPopup" wx:if="{{scene === 1048}}">取消</view> <view class="cancel-btn" bindtap="changeShowPopup" wx:if="{{scene === 1048}}">取消</view>
...@@ -63,4 +69,4 @@ ...@@ -63,4 +69,4 @@
<view class="confirm-btn" bindtap="changeShowPopup" wx:else>确定</view> <view class="confirm-btn" bindtap="changeShowPopup" wx:else>确定</view>
</view> </view>
</view> </view>
</view> </view> -->
\ No newline at end of file \ No newline at end of file
pages/index/index.wxss
...@@ -11,7 +11,6 @@ page { ...@@ -11,7 +11,6 @@ page {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
position: relative; position: relative;
padding-bottom: 82rpx;
} }
.page-container .today-step-container .continuity-days { .page-container .today-step-container .continuity-days {
height: 48rpx; height: 48rpx;
...@@ -26,12 +25,19 @@ page { ...@@ -26,12 +25,19 @@ page {
top: 24rpx; top: 24rpx;
} }
.page-container .today-step-container .explain { .page-container .today-step-container .explain {
width: 93rpx; font-size: 26rpx;
height: 32rpx; line-height: 30rpx;
color: #fff;
display: flex;
position: absolute; position: absolute;
top: 174rpx; top: 176rpx;
right: 24rpx; right: 24rpx;
} }
.page-container .today-step-container .explain image {
width: 30rpx;
height: 30rpx;
margin-right: 6rpx;
}
.page-container .today-step-container .today-step-info { .page-container .today-step-container .today-step-info {
width: 100%; width: 100%;
height: 330rpx; height: 330rpx;
...@@ -92,57 +98,74 @@ page { ...@@ -92,57 +98,74 @@ page {
text-align: center; text-align: center;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2); box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
margin-top: 74rpx; margin-top: 74rpx;
} letter-spacing: 3rpx;
.page-container .today-step-container .other-step-title {
font-size: 34rpx;
line-height: 1;
color: #fff;
position: absolute;
left: 30rpx;
bottom: 0rpx;
} }
.page-container .other-step-container { .page-container .other-step-container {
width: 100%; width: 100%;
padding: 0 30rpx 36rpx; padding: 28rpx 30rpx 36rpx;
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-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%; width: 100%;
height: 120rpx; border-radius: 20rpx;
overflow: hidden;
background: #fff; background: #fff;
border-radius: 10rpx; margin-top: 28rpx;
box-shadow: 0 4rpx 8rpx 4rpx #05b8c8; }
margin-top: 36rpx; .page-container .other-step-container .other-step-section-container .other-step-section {
padding: 0 48rpx; height: 110rpx;
box-sizing: border-box; background: #fff;
margin: 0 30rpx;
display: flex; display: flex;
align-items: center; align-items: center;
position: relative; position: relative;
border-top: 1rpx solid #e0e0e0;
} }
.page-container .other-step-container .other-step-section .status-mark { .page-container .other-step-container .other-step-section-container .other-step-section:first-child {
width: 74rpx; border-top: none;
height: 73rpx;
display: block;
position: absolute;
left: -3rpx;
top: -2rpx;
} }
.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; flex-shrink: 0;
} }
.page-container .other-step-container .other-step-section .date-container .date-item { .page-container .other-step-container .other-step-section-container .other-step-section .status {
font-size: 30rpx; width: 90rpx;
line-height: 1.36; height: 48rpx;
color: #357aa6; 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 { .page-container .other-step-container .other-step-section-container .other-step-section .status.status1 {
flex: 1; 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; font-size: 36rpx;
line-height: 1; color: #36DCC9;
color: #477595;
font-weight: bold;
text-align: right; text-align: right;
flex-shrink: 0;
} }
.activity-explain-popup-bg { .activity-explain-popup-bg {
position: fixed; 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