Skip to content

W
walk_daka_wx
Commit ecd7cf68 by 穆启卓
Options

步数打卡 加 底部banner广告和看视频的气泡广告

parent 9f3be329
Showing with 109 additions and 428 deletions
app.wxss
......@@ -2,360 +2,4 @@ page {
background-color: #f2f2f2;
height: 100%;
font-family: Microsoft YaHei;
}
.container {
display: flex;
display: -webkit-flex;
flex-direction: column;
justify-content: space-between;
/* height: 100%; */
height: 89.5%;
}
.page-body {
width: 100%;
flex-grow: 1;
overflow-x: hidden;
}
.page-foot {
padding: 0 0 34rpx 0;
text-align: center;
color: #1aad19;
font-size: 0;
}
.foot2 {
color: #586c94;
font-size: 26rpx;
display: inline-block;
}
.foot1 {
margin: 0 auto;
color: #888;
font-size: 24rpx;
}
.content-container {
height: 100%;
display: flex;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
}
.content-body {
flex-grow: 1;
-webkit-flex-grow: 1;
}
.torecord {
color: #586c94;
font-size: 28rpx;
display: inline-block;
}
.descript {
margin: 0 auto;
color: #888;
font-size: 28rpx;
}
/* authorization modal */
.auth-container {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
background: rgba(0, 0, 0, 0.75);
z-index: 900;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.auth-modal-container {
margin: -64rpx 90rpx 0;
background-color: white;
border-radius: 8rpx;
position: relative;
}
.auth-modal-title {
font-size: 36rpx;
color: black;
font-weight: bold;
height: 100rpx;
line-height: 100rpx;
text-align: center;
border-bottom: 1rpx solid #eaeaea;
}
.auth-modal-content {
margin-top: 42rpx;
padding: 0 48rpx;
font-size: 34rpx;
color: #333;
text-align: left;
line-height: 1.5;
}
.auth-modal-content-tips {
margin-top: 20rpx;
padding: 0 48rpx;
font-size: 30rpx;
color: #ccc;
text-align: left;
line-height: 1.4;
}
.auth-btn-container {
width: 100%;
text-align: center;
padding-bottom: 16rpx;
margin-top: 42rpx;
}
.modal-auth-button {
font-size: 34rpx !important;
margin: 0 48rpx !important;
font-weight: bold;
}
/* .song-list{
style="padding-bottom:64rpx;"
} */
.song-info {
display: flex;
justify-content: space-between;
border-bottom: 1rpx solid rgba(224, 224, 224, 0.6);
padding: 30rpx 0 30rpx 0;
align-items: center;
overflow: visible;
}
.song-colunm {
display: flex;
flex-direction: column;
}
.song-row {
display: flex;
align-items: baseline;
line-height:1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.song-lyrics-row {
display: block !important;
margin-top: 26rpx;
line-height: 36rpx;
}
.song-lyrics {
font-size: 26rpx;
color: #a5a5a5;
}
.song-title {
display: flex;
align-items: baseline;
font-size: 30rpx;
color: #333;
/* line-height: 34rpx; */
height: 34rpx;
}
.song-listen {
display: flex;
font-size: 26rpx;
padding: 0 20rpx;
align-items: center;
}
.ic-play-btn {
width: 16rpx;
height: 20rpx;
display: flex;
/* margin-top: 10rpx; */
margin-left: 8rpx;
}
.ic-pause-btn {
width: 23rpx;
height: 23rpx;
/* display: flex; */
margin-top: 9rpx;
margin-left: 8rpx;
}
.song-lyrics {
font-size: 26rpx;
color: #a5a5a5;
margin-right: 20rpx;
}
.song-artist {
color: #ccc;
font-size: 26rpx;
margin-left: 10rpx;
}
.listen {
display: flex;
font-size: 26rpx;
color: #efa150;
line-height: 1;
}
.song-right {
display: flex;
align-items: center;
height: 100%;
/* width: 80rpx; */
position: relative;
}
.songlist-add, .songlist-del {
display: flex;
}
.song-left {
width: 600rpx;
}
.song-name{
max-width: 290rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.ic-song-chose {
height: 52rpx;
width: 52rpx;
}
.bottom-bar {
position: fixed;
left: 0;
bottom: -110rpx;
z-index: 1003;
height: 110rpx;
width: 100%;
background: #E65845;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.5s ease;
}
.bar-ani {
bottom: 0;
}
.bar-left {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 162rpx;
height: 100%;
background: #ffd666;
}
.bar-right {
/* display: flex; */
justify-content: center;
align-items: center;
flex: 1;
height: 100%;
color: #fff;
font-size: 36rpx;
}
.ic-song-chose {
height: 52rpx;
width: 52rpx;
}
.chose-song-num {
position: absolute;
left: 106rpx;
top: 22rpx;
background-color: #E65845;
color: #fff;
height: 28rpx;
width: 28rpx;
border-radius: 50%;
text-align: center;
line-height: 28rpx;
font-size: 20rpx;
}
.select-list-mask {
position: fixed;
top: 0;
left: 0;
z-index: 1001;
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.6);
}
.select-list-box {
position: fixed;
bottom: 110rpx;
left: 0;
z-index: 1002;
width: 100%;
max-height: 100%;
background: #fff;
border-radius: 20rpx 20rpx 0 0;
box-sizing: border-box;
transition: all 0.3s linear;
transform: translate3d(0, 140%, 0);
}
.select-list-bot {
padding-bottom: 0;
}
.select-box-tip {
font-size: 26rpx;
color: #ccc;
height: 80rpx;
text-align: center;
line-height: 80rpx;
/* text-align: center; */
}
.navbar-div {
flex: 1;
position: absolute;
width: 100%;
top: 96rpx;
left: 0;
bottom: 0;
right: 0;
}
.word-area {
/* padding-left: 32rpx; */
padding-top: 0;
padding-bottom: 0;
box-sizing: border-box;
}
.word-item {
border: 0 !important;
display: flex;
padding: 40rpx 32rpx;
}
}
\ No newline at end of file
config.js
......@@ -4,8 +4,8 @@
// const host = 'miniapp-testapi.wxatech.com';
const host = 'miniapp-api.wxatech.com';
// const content = 'game-bsdk'; // 步数打卡
const content = 'game-team_walk'; // 组队打卡
const content = 'game-bsdk'; // 步数打卡
// const content = 'game-team_walk'; // 组队打卡
let appName = '';
let appTitle = '';
......
pages/index/index.wxml
<navbar showExit="{{true}}" showBtnBg="{{false}}" navTitle="{{appTitle}}" titleColor="{{'#fff'}}" showMargin="{{false}}"></navbar>
<view class="page-container">
<view class="today-step-container">
<!-- <view class="continuity-days">连续打卡5天</view> -->
<!-- 说明 -->
<view class="explain" bindtap="changeActivityExplainShow">
<image src="/images/index/sy_shuoming.png"></image>
<view>说明</view>
</view>
<!-- 气泡 -->
<view wx:for="{{bubbleList}}" wx:key="{{index}}" class="bubble-container {{'bubble-fixed'+index}}" data-item="{{item}}" catchtap="clickBubble" wx:if="{{index < 2}}">
<image class="bg" src="/images/index/bg_bubble.png"></image>
<div class="content1">{{item.bonus_step}}</div>
<div class="content2">步</div>
<div class="title">{{item.task_title}}</div>
</view>
<!-- 今日步数 -->
<view class="today-step-info" bindtap="clickStepData">
<image class="progress-canvas" src="{{progressCanvasImage}}" wx:if="{{activityExplainShow || showGetUserInfo}}"></image>
<canvas class="progress-canvas" canvas-id="progressCanvas" hidden="{{activityExplainShow || showGetUserInfo}}"></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: 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}}步</view>
</view>
</view>
<!-- 提交步数按钮 -->
<view class="get-info-btn" bindtap="clickStepData">{{unionAuth&&stepAuth?'点击提交今日步数':'点击获取微信步数'}}</view>
<!-- 步数上报记录 -->
<navigator url="/pages/commitRecord/commitRecord" hover-class="none">
<view class="commit-record">
<view>步数上报记录</view>
<image src="/images/common/right_arrow1.png"></image>
</view>
</navigator>
<navbar showExit="{{true}}" showBtnBg="{{false}}" navTitle="{{appTitle}}" titleColor="{{'#fff'}}"
showMargin="{{false}}"></navbar>
<view class="page-container" style="{{bottomAdId?'padding-bottom: 252rpx;':''}}">
<view class="today-step-container">
<!-- <view class="continuity-days">连续打卡5天</view> -->
<!-- 说明 -->
<view class="explain" bindtap="changeActivityExplainShow">
<image src="/images/index/sy_shuoming.png"></image>
<view>说明</view>
</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>
<!-- 气泡 -->
<view wx:for="{{bubbleList}}" wx:key="{{index}}" class="bubble-container {{'bubble-fixed'+index}}" data-item="{{item}}" catchtap="clickBubble" wx:if="{{index < 3 && (item.task_type !== 2 || (item.task_type === 2 && item.can_watch))}}">
<image class="bg" src="/images/index/bg_bubble.png"></image>
<div class="content1">{{item.bonus_step}}</div>
<div class="content2">步</div>
<div class="title">{{item.task_title}}</div>
</view>
<!-- 今日步数 -->
<view class="today-step-info" bindtap="clickStepData">
<image class="progress-canvas" src="{{progressCanvasImage}}" wx:if="{{activityExplainShow || showGetUserInfo}}"></image>
<canvas class="progress-canvas" canvas-id="progressCanvas" hidden="{{activityExplainShow || showGetUserInfo}}"></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: 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}}步</view>
</view>
</view>
<!-- 提交步数按钮 -->
<view class="get-info-btn" bindtap="clickStepData">{{unionAuth&&stepAuth?'点击提交今日步数':'点击获取微信步数'}}</view>
<!-- 步数上报记录 -->
<navigator url="/pages/commitRecord/commitRecord" hover-class="none">
<view class="commit-record">
<view>步数上报记录</view>
<image src="/images/common/right_arrow1.png"></image>
</view>
</navigator>
</view>
<view class="other-step-container">
<view class="other-step-title" wx:if="{{stepRecordList.length}}">
<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>
</view>
</view>
<view class="ad-container" wx:if="{{bottomAdId}}">
<ad unit-id="{{bottomAdId}}" bindload="bindAdLoad" binderror="bindAdError" bindclose="bindAdClose"></ad>
</view>
<!-- 活动说明弹窗 -->
<view class="activity-explain-popup-bg" catchtouchmove wx:if="{{activityExplainShow}}">
<view class="activity-explain-popup-container">
<view class="popup-title">活动说明</view>
<view class="popup-explain">本小程序仅用于记录您的步数明细数据，获取步数数据成功后，返回报名页面，即打卡成功</view>
<view class="hr"></view>
<view class="content-title title1">运动步数为0怎么办？</view>
<view class="content-text">请检查是否关注微信运动公众号，如已关注请继续行走；</view>
<view class="content-text">如未关注，则进入微信【添加好友】— 搜索【微信运动】找到公众号并关注，进入公众号后你会收到一条提示是否要让微信访问我们的活动记录点击“好”即可。</view>
<view class="content-title title2">如何参与步数打卡？</view>
<view class="content-text">关注公众号【{{appName}}】，点击菜单栏【打卡入口】，成功报名活动后，活动结束24点前登录小程序同步最新步数。</view>
<image class="activity-explain-close-btn" src="/images/index/pop_ic_close.png" bindtap="changeActivityExplainShow"></image>
</view>
<view class="activity-explain-popup-container">
<view class="popup-title">活动说明</view>
<view class="popup-explain">本小程序仅用于记录您的步数明细数据，获取步数数据成功后，返回报名页面，即打卡成功</view>
<view class="hr"></view>
<view class="content-title title1">运动步数为0怎么办？</view>
<view class="content-text">请检查是否关注微信运动公众号，如已关注请继续行走；</view>
<view class="content-text">如未关注，则进入微信【添加好友】— 搜索【微信运动】找到公众号并关注，进入公众号后你会收到一条提示是否要让微信访问我们的活动记录点击“好”即可。</view>
<view class="content-title title2">如何参与步数打卡？</view>
<view class="content-text">关注公众号【{{appName}}】，点击菜单栏【打卡入口】，成功报名活动后，活动结束24点前登录小程序同步最新步数。</view>
<image class="activity-explain-close-btn" src="/images/index/pop_ic_close.png" bindtap="changeActivityExplainShow">
</image>
</view>
</view>
<!-- 用戶信息授权，为了拿unionId -->
<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 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>
<!-- 同步步数成功弹窗 -->
<!-- <view class="commit-step-popup-bg" wx:if="{{commitStepPopupShow}}">
......
pages/index/index.wxss
......@@ -45,6 +45,7 @@ page {
align-items: center;
position: absolute;
z-index: 2;
animation: updownmove 3s infinite;
}
.page-container .today-step-container .bubble-container.bubble-fixed0 {
left: 40rpx;
......@@ -54,6 +55,11 @@ page {
right: 24rpx;
top: 246rpx;
}
.page-container .today-step-container .bubble-container.bubble-fixed2 {
right: 160rpx;
top: 126rpx;
transform: scale(0.9);
}
.page-container .today-step-container .bubble-container .bg {
width: 110rpx;
height: 110rpx;
......@@ -80,6 +86,17 @@ page {
margin-top: 38rpx;
white-space: nowrap;
}
@keyframes updownmove {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10rpx);
}
100% {
transform: translateY(0);
}
}
.page-container .today-step-container .today-step-info {
width: 100%;
height: 330rpx;
......@@ -220,6 +237,18 @@ page {
text-align: right;
flex-shrink: 0;
}
.ad-container {
height: 252rpx;
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
.ad-container ad {
position: absolute;
left: 0;
bottom: 0;
}
.activity-explain-popup-bg {
position: fixed;
left: 0;
......
project.config.json
......@@ -13,7 +13,7 @@
},
"compileType": "miniprogram",
"libVersion": "2.6.6",
"appid": "wx41d6ac4f57b878d2",
"appid": "wx035eac0d4d63b3e4",
"projectname": "walk_daka",
"debugOptions": {
"hidedInDevtools": []
......
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