Skip to content

W
walk_daka_h5
Commit e9b1408a by Caiyijun
Options

修复一些样式问题

parent 92f53f9f
Showing with 228 additions and 125 deletions
src/components/NoticeBonus.vue
......@@ -14,8 +14,8 @@
<style>
.notice_bonus {
width: 3.6rem;
height: .32rem;
border-radius: .06rem;
height: .44rem;
border-radius: .22rem;
background: rgba(255, 255, 255, .2);
display: flex;
align-items: center;
......@@ -33,13 +33,13 @@
.msg_container {
flex: 1;
height: .32rem;
height: .34rem;
transform-style: preserve-3d;
overflow: hidden;
}
.notice_msg {
font-size: .2rem;
font-size: .24rem;
color: #fff;
line-height: .32rem;
text-align: center;
......
src/components/axios/api.js
......@@ -424,6 +424,17 @@ export function pop_up_windows() {
})
}
//参与挑战
export function daka_info(grade){
return fetch({
url: api.daka_info,
method: 'GET',
params: {
grade: grade
}
})
}
//有新接口的时候像上面那样再来一次
// //修改昵称接口
......
src/components/axios/fetch.js
......@@ -18,7 +18,7 @@ export function fetch(options) {
headers: {
'Content-Type': 'application/json',
// 'Authorization': window['userData']?window['userData'].token:''
'Authorization':"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoiMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAiLCJvcGVuX2lkIjoiMTExMTExMTExMTExMTExMTExMTExMTExMTExMSIsInVuaW9uX2lkIjoiMTExMTExMTExMTExMTExMTExMTExMTExMTExMSIsImV4cCI6MTU1NDI5MjEwOX0.Qp6mudnew6XyX4xsDgV9J2wgimUBHdaSWN9zqBSeUfg"
'Authorization':"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoiMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAiLCJvcGVuX2lkIjoiMTExMTExMTExMTExMTExMTExMTExMTExMTExMSIsInVuaW9uX2lkIjoiMTExMTExMTExMTExMTExMTExMTExMTExMTExMSIsImV4cCI6MTU1NDMxMTMzMH0.4UEG6I9K0JARU5KDMW-Xwx13DMniYelsmI-qWd97e_c"
// 'token_in_header': global_.token,//token从全局变量那里传过来
},
timeout: 30 * 1000 // 30秒超时
......
src/components/axios/url.js
//也可以像下面这样，区分环境或者区分服务器等等
let service = 'dev';
let service = 'dev'
// let service = 'prod';
let api = '';
let api = ''
if (service === 'dev') {
/**dev开发**/
api = '';
api = ''
} else if (service === 'prod') {
/**prod部署**/
api = 'https://miniapp-api.wxatech.com/game-bsdk';
api = 'https://miniapp-api.wxatech.com/game-bsdk'
}
let trackApi = '';
let trackApi = ''
if (service === 'dev') {
/**dev开发**/
trackApi = 'https://test-api.wxagame.com/game-track';
trackApi = 'https://test-api.wxagame.com/game-track'
} else if (service === 'prod') {
/**prod部署**/
trackApi = 'https://minigame.api.wxagame.com/game-track';
trackApi = 'https://minigame.api.wxagame.com/game-track'
}
......@@ -89,4 +89,6 @@ export default {
daka_status_detail: `${api}/api/v1/daka_status/detail`,
// 比赛详情弹窗
pop_up_windows: `${api}/api/v1/pop_up_windows`,
//首页第一项立即报名
daka_info: `${api}/api/v1/daka_info`,
}
src/views/ChallengeDetail.vue
......@@ -6,7 +6,8 @@
活动规则
</div>
<div class="game-bonus-container">
<div class="bonus-title">本期累计奖励金（元）</div>
<div class="bonus-title" v-if="pageData.status !== 2">预计达标奖励金（元）</div>
<div class="bonus-title" v-else>达标奖励金（元）</div>
<div class="bonus-amount">{{pageData.bet_bonus}}</div>
</div>
<div class="game-title">{{pageData.target_step}}步三日耐力赛</div>
......@@ -34,7 +35,7 @@
</div>
</div>
</div>
<div class="share-btn" @click="inviteFriend">邀请好友来参赛</div>
<div class="share-btn" @click="inviteFriend">邀请好友来参赛0</div>
<ShareModal
v-on:close="closeShareModal"
v-if="showShareModal"
......@@ -43,113 +44,154 @@
</template>
<script>
import Title from "@/components/Title.vue";
import ShareModal from "@/components/ShareModal.vue";
import {dakaPay, shareContent, track, liinShare} from "@/components/axios/api";
import Title from "@/components/Title.vue"
import ShareModal from "@/components/ShareModal.vue"
import {dakaPay, shareContent, track, liinShare} from "@/components/axios/api"
let grabStartTimer = null
export default {
name: "ChallengeDetail",
components: {
Title,
ShareModal
},
data() {
data () {
return {
pageData: JSON.parse(sessionStorage.getItem('ChallengeDetailData')),
showShareModal: false,
userData: null
userData: null,
grabTimer: '--时--分--秒'
}
},
mounted() {
console.log("this.pageType", this.page_type);
mounted () {
console.log("this.pageType", this.page_type)
if (window["userData"]) {
this.userData = window["userData"];
this.userData = window["userData"]
} else {
let localUserData = localStorage.getItem("bs_userData");
let localUserData = localStorage.getItem("bs_userData")
if (localUserData) {
window["userData"] = JSON.parse(localUserData);
this.userData = window["userData"];
window["userData"] = JSON.parse(localUserData)
this.userData = window["userData"]
}
}
console.log("userData", this.userData);
console.log("userData", this.userData)
},
methods: {
goback() {
history.go(-1);
goback () {
history.go(-1)
},
goOtherPage(pageName) {
this.$router.push({name: pageName});
goOtherPage (pageName) {
this.$router.push({name: pageName})
},
inviteFriend() {
console.log("inviteFriend");
this.showShareModal = true;
let id = this.userData.id;
inviteFriend () {
console.log("inviteFriend")
this.showShareModal = true
let id = this.userData.id
// let id = 'yijun';
track("free_contract_share");
track("free_contract_share")
let links = `${
location.href.split("#")[0].split("?")[0]}?inviter=${id}&from_type=free_contract&`;
location.href.split("#")[0].split("?")[0]}?inviter=${id}&from_type=free_contract&`
shareContent("free_contract").then(res => {
let result = res.data;
console.log("分享内容", result, links);
let result = res.data
console.log("分享内容", result, links)
let option1 = {
title: result.title, // 分享标题
desc: result.desc, // 分享描述
link: links, // 分享链接
imgUrl: result.img_url, // 分享图标
success: function(res) {
track("free_contract_share_act");
console.log("option1Success", res);
success: function (res) {
track("free_contract_share_act")
console.log("option1Success", res)
}
};
wx.updateAppMessageShareData(option1);
}
wx.updateAppMessageShareData(option1)
//微信分享菜单测试
let option2 = {
title: result.title, // 分享标题
desc: result.desc, // 分享描述
link: links, // 分享链接
imgUrl: result.img_url, // 分享图标
success: function(res) {
console.log("option2Success", res);
success: function (res) {
console.log("option2Success", res)
}
}
};
let option3 = {
title: result.title, // 分享标题
desc: result.desc, // 分享描述
link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: result.img_url, // 分享图标
success: function(res) {
success: function (res) {
// 用户点击了分享后执行的回调函数
track("free_contract_share_act");
console.log("option3Success", res);
track("free_contract_share_act")
console.log("option3Success", res)
},
fail: err => {
console.log("option3error", err);
console.log("option3error", err)
}
};
wx.onMenuShareAppMessage(option3);
}
wx.onMenuShareAppMessage(option3)
let option4 = {
title: result.title, // 分享标题
link: links, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: result.img_url, // 分享图标
success: function(res) {
console.log("option4Success", res);
success: function (res) {
console.log("option4Success", res)
},
fail: err => {
console.log("option4error", err);
console.log("option4error", err)
}
}
};
// wx.onMenuShareTimeline(option4);
console.log("option", option1, option2, option3, option4);
});
console.log("option", option1, option2, option3, option4)
})
},
closeShareModal() {
this.showShareModal = false;
closeShareModal () {
this.showShareModal = false
},
//倒计时
countDown (times) {
clearInterval(grabStartTimer)
grabStartTimer = null
grabStartTimer = setInterval(function () {
let day = 0,
hour = 0,
minute = 0,
second = 0//时间默认值
// console.log('times:' + times)
if (times > 0) {
day = Math.floor(times / (60 * 60 * 24))
hour = Math.floor(times / (60 * 60)) - (day * 24)
minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60)
second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
if (day < 1) day = ''
else day = day + '天'
if (hour <= 9) hour = '0' + hour
if (minute <= 9) minute = '0' + minute
if (second <= 9) second = '0' + second
this. grabTimer = (day + hour + '时' + minute + '分' + second + '秒')
} else {
clearInterval(grabStartTimer)
// that.setData({
// redpack: {
// ...that.data.redpack,
// redpackStatus: 2
// }
// })
}
times--
//
//console.log(day + "天:" + hour + "小时：" + minute + "分钟：" + second + "秒");
}, 1000)
}
}
}
};
</script>
<style lang="less" scoped>
.partake-challenge-page {
.partake-challenge-page {
width: 100%;
min-height: 100vh;
background-color: rgb(70, 88, 149);
......@@ -278,5 +320,5 @@
text-align: center;
margin-top: 2.24rem;
}
}
}
</style>
src/views/HaveJoinedGame.vue
......@@ -101,9 +101,9 @@
data() {
return {
swiperOption: {
slidesPerView: "auto",
slidesPerView: 'auto',
centeredSlides: true,
spaceBetween: 10
spaceBetween: 10,
},
bet_bonus: '0.00',
next_signup: false,
......@@ -171,7 +171,7 @@
<style lang="less" scoped>
.swiper-container {
margin-left: 0 !important;
/*margin-left: 0 !important;*/
}
.swiper-slide {
......
src/views/MainPage.vue
......@@ -58,6 +58,7 @@
bottom: 0;
left: 0;
z-index: 999;
box-shadow: 0 -0.01rem 0 #e5e5e5;
.bottom-tab {
flex: 1;
height: 100%;
......
src/views/PartakeChallenge.vue
<template>
<div class="partake-challenge-page">
<Title class="page-title" title="　" v-on:goback="goback" show_back="true" v-if="currentPage()==='PartakeChallenge'"></Title>
<Title class="page-title" title="　" v-on:goback="goback" show_back="true"
v-if="currentPage()==='PartakeChallenge'"></Title>
<div class="game-title">5000步七日耐力赛</div>
<div class="game-time">开赛时间：3月11日 00:00-3月17日24:00</div>
<div class="game-cost">本期运动契约金：<span>21.00元/人</span></div>
......@@ -31,27 +32,32 @@
</div>
</div>
<div class="game-introduce-join-container" v-if="currentPage()!=='PartakeChallenge'">
<div class="auth-container">
<img class="auth-checked" src="../images/PartakeChallenge/ic_choose.png" v-if="true">
<div class="auth-container" @click="bindArgeement()">
<div style="display: flex;">
<img class="auth-checked" src="../images/PartakeChallenge/ic_choose.png" v-if="argeement">
<div class="auth-uncheck" v-else></div>
<div class="text1">我同意</div>
</div>
<div class="text2" @click="goOtherPage('Rule')">《步数打卡的挑战规则协议》</div>
</div>
<div class="partake-btn">立即报名</div>
</div>
</div>
<div class="footer-container" v-if="currentPage()==='PartakeChallenge'">
<div class="auth-container">
<img class="auth-checked" src="../images/PartakeChallenge/ic_choose.png" v-if="true">
<div class="auth-container" @click="bindArgeement()">
<div style="display: flex;">
<img class="auth-checked" src="../images/PartakeChallenge/ic_choose.png" v-if="argeement">
<div class="auth-uncheck" v-else></div>
<div class="text1">我同意</div>
</div>
<div class="text2" @click="goOtherPage('Rule')">《步数打卡的挑战规则协议》</div>
</div>
<div class="partake-btn" @click="payToSign()">立即报名</div>
</div>
<PayFailModal v-if="isShowPayFail" @close="togglePayFail()"></PayFailModal>
<div class="modal" v-if="modalShown">
<Modal v-on:close="closeModal" v-on:confirmModal="confirmModal" v-bind:title="modalTitle" v-bind:desc="modalDesc" :option="modalOption"></Modal>
<Modal v-on:close="closeModal" v-on:confirmModal="confirmModal" v-bind:title="modalTitle"
v-bind:desc="modalDesc" :option="modalOption"></Modal>
</div>
<div class="modal" v-if="showFreeModal">
<Free
......@@ -67,13 +73,15 @@
</template>
<script>
import Title from "@/components/Title.vue";
import PayFailModal from "@/components/PayFailModal.vue";
import Free from "@/components/Free.vue";
import Modal from "@/components/Modal.vue";
import Title from "@/components/Title.vue"
import PayFailModal from "@/components/PayFailModal.vue"
import Free from "@/components/Free.vue"
import Modal from "@/components/Modal.vue"
import {daka_info} from "@/components/axios/api";
import {
dakaPay
} from "@/components/axios/api";
} from "@/components/axios/api"
export default {
name: "PartakeChallenge",
components: {
......@@ -82,42 +90,48 @@
Modal,
Free
},
data() {
data () {
return {
isShowPayFail: false,
showFreeModal: false,
modalTitle: "",
modalDesc: "",
modalShown: false,
argeement: true
}
},
created() {
created () {
this.getPageData()
},
methods: {
goback() {
history.go(-1);
goback () {
history.go(-1)
},
goOtherPage(pageName) {
this.$router.push({name: pageName});
goOtherPage (pageName) {
this.$router.push({name: pageName})
},
currentPage() {
return this.$router.history.current.name;
currentPage () {
return this.$router.history.current.name
},
togglePayFail() {
togglePayFail () {
this.isShowPayFail = !this.isShowPayFail
},
payToSign() {
let nextGame = 0;
payToSign () {
if(!this.argeement){
this.showModal("温馨提示", '请先同意协议')
return
}
let nextGame = 0
if (this.$route.query.nextGame) {
nextGame = 2;
nextGame = 2
}
dakaPay(sessionStorage.getItem("bushuType"), nextGame).then(response => {
if (response.code == 1) {
this.showModal("温馨提示", response.msg);
return;
this.showModal("温馨提示", response.msg)
return
}
let result = response.data;
console.log("请求打卡支付数据", result);
let result = response.data
console.log("请求打卡支付数据", result)
if (result) {
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
......@@ -131,13 +145,13 @@
},
// result,
res => {
console.log("支付调用结果", res);
console.log("支付调用结果", res)
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
// 支付成功后的回调函数
console.log("支付成功");
this.showSuccess();
console.log("支付成功")
this.showSuccess()
// this.dateSelect(2);
// localStorage.setItem("is_every", 0)
// location.replace("#/Success");
......@@ -151,34 +165,48 @@
this.togglePayFail()
}
}
);
)
}
});
})
},
showModal(title, desc, option) {
this.modalTitle = title || "";
this.modalDesc = desc || "";
showModal (title, desc, option) {
this.modalTitle = title || ""
this.modalDesc = desc || ""
this.modalOption = option || {}
this.modalShown = true;
this.modalShown = true
},
showSuccess() {
showSuccess () {
this.showModal("温馨提示", "报名成功", {
scb: () => {
sessionStorage.setItem('userHaveJoinGame', 'true');
this.$router.push({name: "HaveJoinedGame"});
sessionStorage.setItem('userHaveJoinGame', 'true')
this.$router.push({name: "HaveJoinedGame"})
}
});
})
},
closeFree() {
this.showFreeModal = false;
closeFree () {
this.showFreeModal = false
},
closeModal() {
this.modalShown = false;
closeModal () {
this.modalShown = false
},
confirmModal(scb) {
confirmModal (scb) {
scb && scb()
this.modalShown = false;
this.modalShown = false
},
bindArgeement () {
console.log('我同意')
this.argeement = !this.argeement
},
getPageData(){
let grade = 1
if(sessionStorage.getItem('bushuType')){
grade = sessionStorage.getItem('bushuType')
}
console.log(grade)
daka_info(grade).then(res=>{
console.log('立即参与',res)
})
}
}
}
</script>
......@@ -194,6 +222,7 @@
display: flex;
flex-direction: column;
align-items: center;
/*align-content: center;*/
.page-title {
position: fixed;
left: 0;
......
src/views/SignUp.vue
......@@ -16,7 +16,7 @@
<img class="corner-marker" src="../images/SignUp/home_tag_zmz.png" v-if="item.status===1">
<img class="corner-marker" src="../images/SignUp/home_tag_yjs.png" v-if="item.status===2">
<div class="card-title">3天健步挑战赛</div>
<div class="card-time"><{{item.already_join===1?'已参赛':'未参赛'}} {{item.period_start}} — {{item.period_end}}></div>
<div class="card-time">{{item.already_join===1?'已参赛':'未参赛'}} {{item.period_start}} - {{item.period_end}}</div>
<div class="card-info">
<div class="info-item" v-if="item.status===0||item.status===2">
<div class="item-title">达标人数</div>
......@@ -31,11 +31,16 @@
<div class="item-money">{{item.total_money || '0.00'}}</div>
</div>
</div>
<div class="card-btn" v-if="item.status===1&&item.already_join===0" @click="goOtherPage('PartakeChallenge')">
<div>参与挑战</div>
<div class="card-btn" v-if="item.status===1&&item.already_join===0" data-item="item"
@click="goOtherPage('PartakeChallenge')">
<div class="btn-title">参与挑战</div>
<div class="card-btn-tip">（每日目标{{item.target_step}}步）</div>
</div>
<div class="card-btn" :style="item.status!==1?'background:#32A1F6;':''" v-else @click="goWhereDetail(item)">{{item.status===1?'已报名':'查看详情'}}</div>
<div class="card-btn" :style="item.status!==1? item.status === 2 ? 'background:#ccc'
:'background:#32A1F6' : ''"
v-else
@click="goWhereDetail(item)">{{item.status===1?'已报名':'查看详情'}}
</div>
</div>
</div>
</template>
......@@ -89,6 +94,7 @@
this.getPageData(level);
},
goOtherPage(pageName) {
console.log('pageName',pageName)
this.$router.push({ name: pageName });
},
goWhereDetail(item) {
......@@ -333,14 +339,18 @@
margin-top: 0.28rem;
}
.card-time {
font-size: 0.22rem;
line-height: 1;
background: rgba(0,0,0,0.1);
padding:0 0.24rem;
border-radius: .24rem;
height: .46rem;
font-size: 0.26rem;
line-height: .46rem;
color: #fff;
margin-top: 0.16rem;
}
.card-info {
width: 100%;
margin-top: 0.56rem;
margin-top: 0.7rem;
display: flex;
align-items: center;
justify-content: space-between;
......@@ -374,7 +384,7 @@
}
.card-btn {
width: 4rem;
height: 0.8rem;
height: 0.88rem;
background: #fabd21;
border-radius: 0.74rem;
box-shadow: 0 0.02rem 0.04rem 0 rgba(0, 0, 0, 0.2);
......@@ -383,6 +393,8 @@
align-items: center;
justify-content: center;
font-size: 0.3rem;
font-weight: bold;
letter-spacing: 0.01rem;
line-height: 1;
color: #fff;
position: absolute;
......@@ -392,6 +404,11 @@
.card-btn-tip {
font-size: 0.22rem;
margin-top: 0.06rem;
font-weight: normal;
}
.btn-title{
font-size: .34rem;
font-weight: bold;
}
}
}
......
src/views/UserCenter.vue
......@@ -5,7 +5,7 @@
<img class="user-avatar" :src="userData.avatar">
<div class="user_msg">
<div class="user_nickname">{{userData.nickname|textFormatter}}</div>
<div class="user_number">昵称：{{userData.student_num|textFormatter}}</div>
<!--<div class="user_number">昵称：{{userData.student_num|textFormatter}}</div>-->
</div>
<div class="btn_container">
<div class="btn_item" v-for="item in btnList" @click="jumpTo(item)">
......@@ -132,6 +132,7 @@
position: relative;
overflow-y: scroll;
background: #f8f8f8;
padding-bottom: 0.1rem;
.banner {
width: 100%;
height: 2.6rem;
......@@ -144,7 +145,7 @@
width: 6.9rem;
margin: 1.76rem auto 0;
background: rgba(255, 255, 255, 1);
box-shadow: 0 .02rem .14rem 0 rgba(180, 197, 200, 0.5);
box-shadow: 0 .05rem .14rem 0 rgba(180, 197, 200, 0.5);
position: relative;
.user-avatar {
overflow: hidden;
......
src/views/Wallet.vue
......@@ -217,13 +217,13 @@
.Wallet .money_input span.dollar {
font-size: 0.48rem;
color: #282828;
margin-bottom: .2rem;
/*margin-bottom: .2rem;*/
}
.Wallet .money_input input {
border: 0;
outline: 0;
font-size: 0.28rem;
font-size: 0.48rem;
color: #282828;
display: inline-block;
/*margin-left: 0.4rem;*/
......@@ -232,7 +232,7 @@
.Wallet .money_input .get_all {
float: right;
color: #52526e;
color: rgba(87, 107, 149, 1);
font-size: 0.3rem;
}
......
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