Skip to content

W
walk_daka_wx
Commit ecd7cf68 by 穆启卓
Options

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

parent 9f3be329
Showing with 631 additions and 811 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.js
let config = require('../../config');
let app = getApp();
// 在页面中定义激励视频广告
let videoAd = null
Page({
data: {
userAuth: false, // 用户信息授权（为了拿unionId）
......@@ -20,8 +22,10 @@ Page({
bubbleList: [],
appName: '',
appTitle: '',
bottomAdId: '',
videoAdId: '',
},
onShow() {
wx.showLoading({
title: '获取步数中'
......@@ -32,7 +36,7 @@ Page({
appTitle: config.appTitle
});
this.getPageData();
this.earnStep();
this.getAdId();
},
onReady() {
......@@ -42,7 +46,7 @@ Page({
getPageData() {
// 1、第一步，先判断用户信息和步数是否授过权
wx.getSetting({
success:(res) => {
success: (res) => {
// 用户信息是否授权
if (res.authSetting['scope.userInfo']) {
app.globalData.userAuth = true;
......@@ -53,8 +57,11 @@ Page({
}
// 2、询问后端是否需要unionId授权
this.needUnionAuth().then(unionRes => {
// 获取气泡广告
this.earnStep();
app.globalData.unionAuth = unionRes;
console.log('needUnionAuth',app.globalData.unionAuth,app.globalData.userAuth,app.globalData.stepAuth)
console.log('needUnionAuth', app.globalData.unionAuth, app.globalData.userAuth, app.globalData.stepAuth)
// 视图层数据赋值
this.setData({
userAuth: app.globalData.userAuth,
......@@ -77,7 +84,7 @@ Page({
needUnionAuth() {
return new Promise((resolve, reject) => {
wx.login({
success:wxres => {
success: wxres => {
if (wxres.code) {
wx.request({
url: config.service.hostUrl + "/v1/auth_login",
......@@ -85,8 +92,8 @@ Page({
js_code: wxres.code
},
method: 'POST',
success:myres => {
console.log('询问后端是否需要unionId授权',myres)
success: myres => {
console.log('询问后端是否需要unionId授权', myres)
if (myres.data.code === 0) {
app.globalData.userInfo = myres.data.data;
app.globalData.token = myres.data.data.token;
......@@ -106,9 +113,9 @@ Page({
loadStepData() {
console.log('loadStepData')
wx.getWeRunData({
success:(stepres) => {
success: (stepres) => {
wx.login({
success:wxres => {
success: wxres => {
if (wxres.code) {
wx.request({
url: config.service.hostUrl + "/v1/get_step_num",
......@@ -118,7 +125,7 @@ Page({
iv: stepres.iv
},
method: 'POST',
success:(res) => {
success: (res) => {
const resData = res.data.data;
this.setData({
currentSteps: (resData && resData[0]) ? resData[0].step : 0,
......@@ -137,7 +144,7 @@ Page({
}
});
},
fail:(err) => {
fail: (err) => {
console.log(err)
this.getWeRunDataFail(err);
}
......@@ -158,7 +165,7 @@ Page({
let needStepAuth = (reCheck) => {
wx.authorize({ // 调起授权窗口
scope: 'scope.werun',
success:() => { // 授权成功
success: () => { // 授权成功
app.globalData.stepAuth = true;
this.setData({
stepAuth: true
......@@ -170,7 +177,7 @@ Page({
this.getClickStepData();
}
},
fail:(err) => { // 授权失败，因为用户拒绝或者用户曾经拒绝过，而且在这里不能直接去到openSetting页，需要通过一个弹窗中转过去
fail: (err) => { // 授权失败，因为用户拒绝或者用户曾经拒绝过，而且在这里不能直接去到openSetting页，需要通过一个弹窗中转过去
this.authorizationFail();
}
});
......@@ -193,7 +200,7 @@ Page({
} else if (app.globalData.userAuth && app.globalData.stepAuth) {
wx.getUserInfo({
withCredentials: true,
success:(userres) => {
success: (userres) => {
this.sendUserInfo(userres.encryptedData, userres.iv);
}
});
......@@ -205,7 +212,7 @@ Page({
getClickStepData() {
console.log('getClickStepData')
wx.getWeRunData({
success:(stepres) => {
success: (stepres) => {
wx.request({
url: config.service.hostUrl + "/v1/sync_step_data",
data: {
......@@ -216,7 +223,7 @@ Page({
'Authorization': app.globalData.token
},
method: 'POST',
success:(res) => {
success: (res) => {
wx.hideLoading();
if (res.data.code === 0) {
this.data.isFirstReq = false;
......@@ -265,7 +272,7 @@ Page({
}
});
},
fail:(err) => {
fail: (err) => {
console.log(err)
this.getWeRunDataFail(err);
}
......@@ -337,7 +344,7 @@ Page({
context.setFontSize(22 * rate);
context.setTextAlign('center');
context.rotate(0.342 * Math.PI);
context.fillText((this.data.targetSteps?'0':''), 0 * rate, -188 * rate);
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);
......@@ -352,7 +359,7 @@ Page({
if (drawRes.errMsg === 'drawCanvas:ok') {
wx.canvasToTempFilePath({
canvasId: 'progressCanvas',
success:(ImageRes) => {
success: (ImageRes) => {
this.setData({
progressCanvasImage: ImageRes.tempFilePath
});
......@@ -396,9 +403,9 @@ Page({
// 把用户授权信息传给后端,然后同步数据
sendUserInfo(encryptedData, iv) {
console.log('sendUserInfo',encryptedData, iv)
console.log('sendUserInfo', encryptedData, iv)
wx.login({
success:wxres => {
success: wxres => {
if (wxres.code) {
wx.request({
url: config.service.hostUrl + "/v1/auth_login",
......@@ -408,7 +415,7 @@ Page({
iv: iv
},
method: 'POST',
success:myres => {
success: myres => {
if (myres.data.code === 0) {
app.globalData.unionAuth = true;
this.setData({
......@@ -430,10 +437,10 @@ Page({
console.log('authorizationFail')
wx.showModal({
content: '如需完成步数打卡，请点击确定允许微信授权',
success:(res) => {
success: (res) => {
if (res.confirm) {
wx.openSetting({
success:(res) => {
success: (res) => {
if (res.authSetting['scope.userInfo']) {
app.globalData.userAuth = true;
this.setData({
......@@ -462,14 +469,14 @@ Page({
}
});
},
// 活动说明弹窗
changeActivityExplainShow() {
this.setData({
activityExplainShow: !this.data.activityExplainShow
});
},
// 活动说明弹窗
showToast() {
const scene = this.data.scene,
......@@ -506,19 +513,13 @@ Page({
// 赚步数的跳转气泡
earnStep() {
console.log('earnStep')
if (!app.globalData.token) {
return setTimeout(() => {
this.earnStep();
}, 200);
}
let requestData = {
url: config.service.hostUrl + "/v1/user_task",
header: {
'Authorization': app.globalData.token
},
success:res => {
console.log('earnStep',res)
success: res => {
console.log('earnStep', res)
if (res.data.code === 0) {
this.setData({
bubbleList: res.data.data
......@@ -535,7 +536,7 @@ Page({
};
requestData.method = 'POST';
requestData.success = res => {
console.log('earnStep',res)
console.log('earnStep', res)
if (res.data.code === 0) {
wx.showToast({
title: '恭喜赚取步数成功',
......@@ -560,7 +561,7 @@ Page({
// 点击气泡
clickBubble(event) {
console.log('event',event.currentTarget.dataset.item)
console.log('event', event.currentTarget.dataset.item)
const item = event.currentTarget.dataset.item;
if (item.task_type === 1) { // 打开小程序
wx.navigateToMiniProgram({
......@@ -572,9 +573,115 @@ Page({
}
}
});
} else if (item.task_type === 2) { // 看视频
if (videoAd) {
videoAd.show().catch(() => {
// 失败重试
videoAd.load().then(() => videoAd.show()).catch(err => {
console.log('激励视频 广告显示失败',err)
});
});
// 看完后会关闭视频，然后触发initVideoAd的videoAd.onClose
} else {
this.initVideoAd();
}
}
},
// 初始化创建激励视频广告实例
initVideoAd() {
if (wx.createRewardedVideoAd) {
videoAd = wx.createRewardedVideoAd({
adUnitId: this.data.videoAdId
})
videoAd.onLoad();
videoAd.onError((err) => {
console.log('videoAd.onError', err)
if (err.errCode === 1004) {
console.log(err.errMsg)
}
wx.request({
url: config.service.hostUrl + "/v1/watch_video",
data: {
not_video: 1
},
header: {
'Authorization': app.globalData.token
},
method: 'POST',
success: res2 => {
if (res2.data.code === 0) {
wx.showToast({
title: '视频错误,请尝试其他方式赚取步数',
icon: 'none',
duration: 2000
});
this.data.bubbleList.forEach(item => {
if (item.task_type === 2) {
item.can_watch = false;
}
});
this.setData({
bubbleList: this.data.bubbleList
});
}
}
});
});
videoAd.onClose((res) => {
if (res.isEnded) {
console.log('isEnded为true，观看达标')
wx.request({
url: config.service.hostUrl + "/v1/watch_video",
data: {
not_video: ''
},
header: {
'Authorization': app.globalData.token
},
method: 'POST',
success: res2 => {
if (res2.data.code === 0) {
wx.showToast({
title: '获取步数成功',
icon: 'none',
duration: 2000
});
let earnStep = 0;
this.data.bubbleList.forEach(item => {
if (item.task_type === 2) {
item.can_watch = false;
earnStep = item.bonus_step;
}
});
this.setData({
bubbleList: this.data.bubbleList,
currentSteps: this.data.currentSteps + earnStep
});
}
}
});
}
});
}
},
// 获取广告id
getAdId() {
wx.request({
url: config.service.hostUrl + "/v1/get_adid",
success: res => {
if (res.data.code === 0) {
this.setData({
bottomAdId: res.data.data.banner_id,
videoAdId: res.data.data.video_id
});
this.initVideoAd();
}
}
});
},
// 初始化仪表盘
initCanvas() {
const rate = wx.getSystemInfoSync().screenWidth / 750,
......@@ -617,7 +724,7 @@ Page({
if (drawRes.errMsg === 'drawCanvas:ok') {
wx.canvasToTempFilePath({
canvasId: 'progressCanvas',
success:(ImageRes) => {
success: (ImageRes) => {
this.setData({
progressCanvasImage: ImageRes.tempFilePath
});
......
pages/index/index.less
page {
background: #24DDC5;
background: #24DDC5;
}
.page-container {
width: 100%;
.today-step-container {
width: 100%;
.today-step-container {
background: linear-gradient(180deg, #0DB8D7, #24DDC5);
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.continuity-days {
height: 48rpx;
border-radius: 48rpx;
background: #fdb62d;
padding: 0 28rpx;
font-size: 26rpx;
line-height: 48rpx;
color: #fff;
position: absolute;
left: 20rpx;
top: 24rpx;
}
.explain {
font-size: 26rpx;
line-height: 30rpx;
color: #fff;
display: flex;
position: absolute;
top: 176rpx;
right: 24rpx;
image {
width: 30rpx;
height: 30rpx;
margin-right: 6rpx;
}
}
.bubble-container {
width: 110rpx;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
z-index: 2;
animation: updownmove 3s infinite;
&.bubble-fixed0 {
left: 40rpx;
top: 176rpx;
}
&.bubble-fixed1 {
right: 24rpx;
top: 246rpx;
}
&.bubble-fixed2 {
right: 160rpx;
top: 126rpx;
transform: scale(0.9);
}
.bg {
width: 110rpx;
height: 110rpx;
position: absolute;
left: 0;
top: 0;
}
.content1 {
font-size: 26rpx;
line-height: 1;
color: #fff;
margin-top: 30rpx;
}
.content2 {
font-size: 24rpx;
line-height: 1;
color: #fff;
margin-top: 4rpx;
}
.title {
font-size: 24rpx;
line-height: 1;
color: #fff;
margin-top: 38rpx;
white-space: nowrap;
}
}
@keyframes updownmove {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-10rpx);
}
100% {
transform: translateY(0);
}
}
.today-step-info {
width: 100%;
height: 330rpx;
margin-top: 230rpx;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
overflow: visible;
.progress-canvas {
width: 100%;
background: linear-gradient(180deg, #0DB8D7, #24DDC5);
height: 350rpx;
position: absolute;
left: 0;
top: 0;
}
.info-title {
font-size: 30rpx;
line-height: 1;
color: #fff;
margin-top: 138rpx;
}
.today-step-num {
font-size: 80rpx;
line-height: .8;
color: #fff; // font-weight: bold;
margin-top: 24rpx;
}
.step-progress-container {
height: 48rpx;
background: rgba(255, 255, 255, .3);
border-radius: 48rpx;
padding: 0 26rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.continuity-days {
height: 48rpx;
border-radius: 48rpx;
background: #fdb62d;
padding: 0 28rpx;
font-size: 26rpx;
line-height: 48rpx;
color: #fff;
position: absolute;
left: 20rpx;
top: 24rpx;
}
.explain {
font-size: 26rpx;
line-height: 30rpx;
color: #fff;
display: flex;
position: absolute;
top: 176rpx;
right: 24rpx;
image {
width: 30rpx;
height: 30rpx;
margin-right: 6rpx;
}
}
.bubble-container {
width: 110rpx;
display: flex;
flex-direction: column;
align-items: center;
position: absolute;
z-index: 2;
&.bubble-fixed0 {
left: 40rpx;
top: 176rpx;
}
&.bubble-fixed1 {
right: 24rpx;
top: 246rpx;
}
.bg {
width: 110rpx;
height: 110rpx;
position: absolute;
left: 0;
top: 0;
}
.content1 {
font-size: 26rpx;
line-height: 1;
color: #fff;
margin-top: 30rpx;
}
.content2 {
font-size: 24rpx;
line-height: 1;
color: #fff;
margin-top: 4rpx;
}
.title {
font-size: 24rpx;
line-height: 1;
color: #fff;
margin-top: 38rpx;
white-space: nowrap;
}
}
.today-step-info {
width: 100%;
height: 330rpx;
margin-top: 230rpx;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
overflow: visible;
.progress-canvas {
width: 100%;
height: 350rpx;
position: absolute;
left: 0;
top: 0;
}
.info-title {
font-size: 30rpx;
line-height: 1;
color: #fff;
margin-top: 138rpx;
}
.today-step-num {
font-size: 80rpx;
line-height: .8;
color: #fff;
// font-weight: bold;
margin-top: 24rpx;
}
.step-progress-container {
height: 48rpx;
background: rgba(255, 255, 255, .3);
border-radius: 48rpx;
padding: 0 26rpx;
box-sizing: border-box;
display: flex;
align-items: center;
position: absolute;
bottom: -24rpx;
left: 50%;
transform: translateX(-50%);
font-size: 24rpx;
line-height: 1;
color: #fff;
.today-status {
}
.today-progress {
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;
letter-spacing: 3rpx;
}
.commit-record {
display: flex;
align-items: center;
font-size: 28rpx;
line-height: 1;
color: #fff;
margin-top: 30rpx;
image {
width: 26rpx;
height: 26rpx;
}
position: absolute;
bottom: -24rpx;
left: 50%;
transform: translateX(-50%);
font-size: 24rpx;
line-height: 1;
color: #fff;
.today-status {}
.today-progress {
margin-left: 18rpx;
}
}
}
.other-step-container {
width: 100%;
padding: 50rpx 30rpx 36rpx;
box-sizing: border-box;
.other-step-title {
font-size: 34rpx;
line-height: 39rpx;
color: #fff;
display: flex;
image {
width: 34rpx;
height: 39rpx;
margin-right: 14rpx;
}
}
.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;
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;
}
}
}
.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;
letter-spacing: 3rpx;
}
}
.activity-explain-popup-bg {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .5);
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
.activity-explain-popup-container {
width: 600rpx;
.commit-record {
display: flex;
align-items: center;
font-size: 28rpx;
line-height: 1;
color: #fff;
margin-top: 30rpx;
image {
width: 26rpx;
height: 26rpx;
}
}
}
.other-step-container {
width: 100%;
padding: 50rpx 30rpx 36rpx;
box-sizing: border-box;
.other-step-title {
font-size: 34rpx;
line-height: 39rpx;
color: #fff;
display: flex;
image {
width: 34rpx;
height: 39rpx;
margin-right: 14rpx;
}
}
.other-step-section-container {
width: 100%;
border-radius: 20rpx;
overflow: hidden;
background: #fff;
margin-top: 28rpx;
.other-step-section {
height: 110rpx;
background: #fff;
border-radius: 20rpx;
padding: 50rpx 0;
box-sizing: border-box;
position: relative;
margin: 0 30rpx;
display: flex;
flex-direction: column;
align-items: center;
.popup-title {
font-size: 32rpx;
line-height: 1;
color: #333;
font-weight: bold;
}
.popup-explain {
width: 520rpx;
font-size: 26rpx;
line-height: 44rpx;
color: #888;
margin-top: 22rpx;
}
.hr {
width: 400rpx;
height: 1px;
background: #E5E5E5;
margin-top: 40rpx;
position: relative;
border-top: 1rpx solid #e0e0e0;
&:first-child {
border-top: none;
}
.content-title {
width: 480rpx;
font-size: 28rpx;
line-height: 1;
color: #333;
margin: 50rpx 0 12rpx;
position: relative;
&.title1:after {
content: '';
width: 12rpx;
height: 12rpx;
background: #25D6DA;
border-radius: 50%;
position: absolute;
left: -32rpx;
top: 50%;
transform: translateY(-50%);
}
&.title2:after {
content: '';
width: 12rpx;
height: 12rpx;
background: #FFA0D1;
border-radius: 50%;
position: absolute;
left: -32rpx;
top: 50%;
transform: translateY(-50%);
}
.date {
flex: 1;
font-size: 30rpx;
color: #888;
flex-shrink: 0;
}
.content-text {
width: 480rpx;
font-size: 26rpx;
line-height: 44rpx;
color: #888;
.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;
}
}
.activity-explain-close-btn {
width: 58rpx;
height: 58rpx;
display: block;
position: absolute;
bottom: -108rpx;
left: 50%;
transform: translateX(-50%);
overflow: visible;
.step {
width: 178rpx;
font-size: 36rpx;
color: #36DCC9;
text-align: right;
flex-shrink: 0;
}
}
}
}
}
.commit-step-popup-bg {
position: fixed;
.ad-container {
height: 252rpx;
position: fixed;
left: 0;
right: 0;
bottom: 0;
ad {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .8);
z-index: 999;
}
}
.activity-explain-popup-bg {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .5);
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
.activity-explain-popup-container {
width: 600rpx;
background: #fff;
border-radius: 20rpx;
padding: 50rpx 0;
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.commit-step-popup {
width: 560rpx;
background: #fff;
border-radius: 10rpx;
overflow: hidden;
.popup-content {
width: 100%;
height: 230rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 0 70rpx;
box-sizing: border-box;
font-size: 32rpx;
line-height: 50rpx;
color: #585858;
text-align: center;
}
.popup-btn-container {
width: 100%;
height: 108rpx;
box-sizing: border-box;
display: flex;
border-top: 2rpx solid #e5e5e5;
.cancel-btn {
flex: 1;
height: 108rpx;
font-size: 32rpx;
line-height: 108rpx;
color: #999;
text-align: center;
border-right: 2rpx solid #e5e5e5;
}
.confirm-btn {
flex: 1;
height: 108rpx;
font-size: 32rpx;
line-height: 108rpx;
color: #25d6da;
text-align: center;
padding: 0;
margin: 0;
border: none;
}
}
.popup-title {
font-size: 32rpx;
line-height: 1;
color: #333;
font-weight: bold;
}
.popup-explain {
width: 520rpx;
font-size: 26rpx;
line-height: 44rpx;
color: #888;
margin-top: 22rpx;
}
.hr {
width: 400rpx;
height: 1px;
background: #E5E5E5;
margin-top: 40rpx;
}
.content-title {
width: 480rpx;
font-size: 28rpx;
line-height: 1;
color: #333;
margin: 50rpx 0 12rpx;
position: relative;
&.title1:after {
content: '';
width: 12rpx;
height: 12rpx;
background: #25D6DA;
border-radius: 50%;
position: absolute;
left: -32rpx;
top: 50%;
transform: translateY(-50%);
}
&.title2:after {
content: '';
width: 12rpx;
height: 12rpx;
background: #FFA0D1;
border-radius: 50%;
position: absolute;
left: -32rpx;
top: 50%;
transform: translateY(-50%);
}
}
.content-text {
width: 480rpx;
font-size: 26rpx;
line-height: 44rpx;
color: #888;
}
.activity-explain-close-btn {
width: 58rpx;
height: 58rpx;
display: block;
position: absolute;
bottom: -108rpx;
left: 50%;
transform: translateX(-50%);
overflow: visible;
}
}
}
.commit-step-popup-bg {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, .8);
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
.commit-step-popup {
width: 560rpx;
background: #fff;
border-radius: 10rpx;
overflow: hidden;
.popup-content {
width: 100%;
height: 230rpx;
display: flex;
align-items: center;
justify-content: center;
padding: 0 70rpx;
box-sizing: border-box;
font-size: 32rpx;
line-height: 50rpx;
color: #585858;
text-align: center;
}
.popup-btn-container {
width: 100%;
height: 108rpx;
box-sizing: border-box;
display: flex;
border-top: 2rpx solid #e5e5e5;
.cancel-btn {
flex: 1;
height: 108rpx;
font-size: 32rpx;
line-height: 108rpx;
color: #999;
text-align: center;
border-right: 2rpx solid #e5e5e5;
}
.confirm-btn {
flex: 1;
height: 108rpx;
font-size: 32rpx;
line-height: 108rpx;
color: #25d6da;
text-align: center;
padding: 0;
margin: 0;
border: none;
}
}
}
}
\ No newline at end of file
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