发送验证码
<template>
<a-spin :spinning="spinning">
<div class="logo-top">
<!-- 签到 -->
<img class="img" src="../assets/images/cj2.png" alt="" />
<div class="nav-title">封神日历</div>
<div class="calendar">
<a-calendar :fullscreen="false">
<ul slot="dateCellRender" slot-scope="value" class="events">
<li v-for="item in getListData(value)" :key="item.content">
<a-badge
style="color: red; font-size: 0.5rem"
:class="item.content"
/>
</li>
</ul>
</a-calendar>
<p>
<span
v-show="nosameResult"
@click="postsameIn(wxuser)"
style="margin-right: 0.3rem;"
>今日签到</span
><span style="margin-right: 0.3rem;" v-show="sameResult">已签到</span>
<span @click="postRepairsign(wxuser)">补签</span>
</p>
</div>
</div>
</a-spin>
</template>
<script>
let Months = new Date().getMonth() + 1 >= 10 ? new Date().getMonth() + 1 : "0" + (new Date().getMonth() + 1)
let timeday = new Date().getFullYear() + "-" + Months
let timedays = timeday + '-' + new Date().getDate()
import http from "../services/http-service";
export default {
name: "HelloWorld",
props: {},
data() {
return {
num: 0,
visible: false,
timeday,
timedays,
spinning: true,
wxuser: window.localStorage.getItem("wxUser"),
arr: [],
// e: new Date(),
// topic: [],
value: new Date(),
sameResult: false,
nosameResult: true,
};
},
mounted() {
this.postsameDay(this.wxuser);
},
created() {},
methods: {
// 补签
async postRepairsign (wxuser) {
let temp = await http.repairSign(wxuser)
if (temp === '这天还没到哦') {
alert('这天还没到哦')
} else if(temp === '补签成功') {
alert('补签成功')
}else if(temp === '已经签到过') {
alert('已经签到过')
}else if(temp === '补签次数不够') {
alert('补签次数不够')
}
this.postsameDay(this.wxuser)
console.log(temp)
},
// 弹框
showModal() {
this.visible = true;
},
// 当日签到
async postsameIn(wxuser) {
let temp = await http.sameIn(wxuser);
console.log(temp)
alert("签到成功")
this.postsameDay(this.wxuser)
},
// 展示所有签到信息
async postsameDay(wxuser) {
let temp = await http.sameDay(wxuser)
this.spinning = false
console.log(temp)
if (temp != null) {
temp.forEach((item) => {
if (this.timeday === item.signTime.substring(0, 7)) {
this.arr.push(item.signTime.substring(8, 10))
}
if (this.timedays === item.signTime.substring(0, 10)) {
this.sameResult = true
this.nosameResult = false
}
console.log(item.signTime.substring(0, 10))
})
}
},
getListData(value) {
let listData;
var Arrs = [...this.arr];
Arrs.forEach((i) => {
if (
value.date() == i &&
value.year() == new Date().getFullYear() &&
value.month() + 1 == new Date().getMonth() + 1
) {
listData = [{ type: "warning", content: "el-icon-check" }];
}
});
return listData || [];
},
onPanelChange(value, mode) {
console.log(mode);
console.log(value);
},
},
};
</script>
<style scoped lang="less">
.calendar {
width: 88%;
left: 0.2rem;
position: absolute;
top: 8rem;
button {
background-color: #9b2816;
border: none;
margin-left: 0.6rem;
color: white;
font-size: 0.4rem;
height: 0.7rem;
padding: 0 0.1rem;
// margin: 0;
// p {
// padding: 0.1rem 0.2rem;
// color: white;
// border-radius: 0.1rem;
// #9b2816;
// }
}
}
/deep/.ant-select-selection {
background-color: transparent;
border: 1px solid rgb(174, 226, 221);
}
/deep/.ant-radio-group-small .ant-radio-button-wrapper {
background-color: transparent;
border: 1px solid rgb(174, 226, 221);
}
// 弹框
/deep/.ant-modal-content {
width: 80%;
margin: 2.5rem auto;
}
/deep/.ant-modal-body {
padding:1.5rem 0.4rem 0;
div{
display: flex;
margin: 0;
width: 100%;
height: 1.5rem;
/deep/.ant-input{
width: 75%;
height: 1rem;
border: 1px solid #9c9c9b;
}
p{
width: 20%;
height: 1rem;
line-height: 1rem;
color: rgb(70, 66, 66);
}
}
}
p {
border: none;
margin-left: 0.6rem;
color: white;
font-size: 0.4rem;
height: 0.7rem;
padding: 0 0.1rem;
margin: 0;
span {
padding: 0.1rem 0.2rem;
color: white;
border-radius: 0.1rem;
background-color: #9b2816;
}
}
</style>
<template>
<div class="register-page">
<!-- 首页 -->
<button @click="postWechatAccount(code)">点击</button>
<!-- {{height}} {{width}} -->
<!-- <button @click="get">点击</button> -->
<a-spin v-if="wxuser" :spinning="spinning">
<div class="background-home" :style="{width:width + 'px'}">
<img :style="{width:width + 'px',height:height + 'px'}" src="../assets/images/home.jpg" alt="" />
<div class="img">
<div class="activity-rules">此活动最终解释权归《幻之封神》运营团队所有</div>
<!-- 每日签到 -->
<div :style="{left: width*110/375 + 'px',top:height*250/667 + 'px'}" class="sign-dailyh" @click="sign"></div>
<!-- 道友封神榜 -->
<div :style="{left: width*220/375 + 'px',top:height*280/667 + 'px'}" class="points-mallh" @click="user"></div>
<!-- 宝箱 -->
<div :style="{left: width*80/375 + 'px',top:height*390/667 + 'px'}" class="treasure-chesth" @click="treasure"></div>
<!-- 积分抽奖 -->
<div :style="{left: width*220/375 + 'px',top:height*460/667 + 'px'}" class="points-lotteryh" @click="lottery"></div>
<!-- 商城 -->
<div :style="{left: width*310/375 + 'px',top:height*360/667 + 'px'}" class="user-centerh" @click="points"></div>
<div :style="{left: width*190/375 + 'px',top:height*570/667 + 'px'}" class="phone-login">
<p class="Bound" :style="{top:height*15/667 +'px',right:width*-10/375 +'px'}" v-show="Bound">已绑定</p>
<a-button type="primary" @click="showModal"></a-button>
<!-- Bindingphone:false, // 已绑定电话 -->
<!-- Unboundphone:true, // 未绑定电话 -->
<a-modal
v-if="personal.invitationCode==1"
v-model="visible"
ok-text="确认"
cancel-text="取消"
@ok="hideModal"
>
<p style="text-align: center; margin-top:0.6rem ;font-size:0.5rem">绑定成功</p>
</a-modal>
<!-- 未绑定 -->
<a-modal
v-else-if="personal.invitationCode==0"
v-model="visible"
ok-text="确认"
cancel-text="取消"
@ok="postbindingSucceed(wxuser, phone, verification)"
>
<div class="bindingPhone">
<van-field
:value="phone"
class="text"
placeholder="请输入手机号"
v-model="phone"
type="tel"
/>
<van-field
class="text"
v-model="verification"
:value="verification"
center
clearable
placeholder="请输入短信验证码"
>
<template #button>
<!-- 倒计时 -->
<!-- 发送验证码 -->
<van-button
@click="countDown(wxuser, phone)"
size="small"
type="primary"
:class="{disabled: !canClick}"
>
{{content}}
</van-button>
</template>
</van-field>
<!-- <div> -->
<!-- <van-button
@click="postbindingSucceed(wxuser, phone, verification)"
class="button"
round
block
type="info"
native-type="submit"
>绑定</van-button
>
</div> -->
</div>
</a-modal>
</div>
<!-- 关注公众号 -->
<div :style="{left: width*285/375 + 'px',top:height*570/667 + 'px'}" class="follow">
<p class="Bound" :style="{top:height*25/667 +'px',right:width*-5/375 +'px'}" v-show="Bounds">已关注</p>
<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg5NTU3MTQ4MA==#wechat_redirect"></a>
<!-- <button @click="bv">点击</button> -->
</div>
</div>
</div>
</a-spin>
<div v-else class="background-home" :style="{width:width + 'px'}">
<img :style="{width:width + 'px',height:height + 'px'}" src="../assets/images/home.jpg" alt="" />
<div class="img">
<div class="activity-rules">此活动最终解释权归《幻之封神》运营团队所有</div>
<!-- 每日签到 -->
<div :style="{left: width*110/375 + 'px',top:height*250/667 + 'px'}" class="sign-dailyh" @click="toRescue"></div>
<!-- 道友封神榜 -->
<div :style="{left: width*220/375 + 'px',top:height*280/667 + 'px'}" class="points-mallh" @click="toRescue"></div>
<!-- 宝箱 -->
<div :style="{left: width*80/375 + 'px',top:height*390/667 + 'px'}" class="treasure-chesth" @click="toRescue"></div>
<!-- 积分抽奖 -->
<div :style="{left: width*220/375 + 'px',top:height*460/667 + 'px'}" class="points-lotteryh" @click="lottery"></div>
<!-- 商城 -->
<div :style="{left: width*310/375 + 'px',top:height*360/667 + 'px'}" class="user-centerh" @click="points"></div>
<!-- 电话 -->
<div :style="{left: width*190/375 + 'px',top:height*570/667 + 'px'}" @click="points" class="phone-login">
</div>
<!-- 关注公众号 -->
<div :style="{left: width*285/375 + 'px',top:height*570/667 + 'px'}" class="follow">
<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg5NTU3MTQ4MA==#wechat_redirect"></a>
</div>
</div>
</div>
</div>
</template>
<script>
import { Toast } from 'vant';
import http from "../services/http-service";
export default {
components: {},
data() {
return {
// bv:'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg5NTU3MTQ4MA==#wechat_redirect',
content: "发送验证码",
totalTime: 60,
canClick: true, //添加canClick
spinning: true, // 加载
phone: null,
visible: false,
Bound:false,
Bounds:false,
Bindingphone:false, // 已绑定电话
Unboundphone:true, // 未绑定电话
width: window.innerWidth,
height: window.innerHeight,
Wechat: [], // wx授权
url:'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8c8d376eeb1ef876&redirect_uri=http://h5.u2sy.cn&response_type=code&scope=snsapi_userinfo&state=STATE&uin=&key=&version=6302019a',
wxuser: window.localStorage.getItem("wxUser"), // 本地用户账号缓存
phoneCache: window.localStorage.getItem("phone"), // 本地电话缓存
verification: null,
personal: [], // 个人基本信息
code: "001aXj0w3lekwW2xjW2w38kywh1aXj07",
}
},
created() {
if (this.wxuser !=null) {
// 没有code时
// alert("请关注公众号")
// this.spinning = true
this.Bounds = true
}
else if (window.document.location.href.indexOf("code") > -1) {
// 有code时
this.code = window.document.location.href.split("?code=")[1].split("&state")[0];
console.log(this.code);
// this.postWechatAccount(this.code)
}
// if(this.wxuser === null){
// alert("请关注公众号")
// }else {
// this.Bounds = true
// }
},
mounted() {
this.Postper(this.wxuser)
},
methods: {
toRescue() {
window.location.href = this.url
},
// wx授权
async postWechatAccount(code) {
let temp = await http.WechatAccount(code);
this.Wechat = temp.states;
localStorage.setItem("wxUser", temp.states.wxUser)
if(this.wxuser === null){
alert("请关注公众号")
}
// console.log(temp)
},
// 个人基本信息
async Postper(wxUser) {
let temp = await http.PostWx(wxUser);
this.personal = temp;
if (temp.invitationCode==1) {
this.Bound = true
}
// localStorage.setItem("wxUser", temp.wxUser)
localStorage.setItem("userId", temp.userId)
localStorage.setItem("phoneCache", temp.phone)
localStorage.setItem("headimgurl", temp.headimgurl)
localStorage.setItem("userNickNameUTF8", temp.userNickNameUTF8)
// console.log(temp.phone)
this.spinning = false // 加载成功
// console.log(this.personal);
},
// 接受验证码
async postbindingSucceed(User, phone, Verification) {
let temp = await http.bindingSucceed(User, phone, Verification)
if (temp === 'Binding succeeded') {
// alert("绑定成功");
this.Postper(this.wxuser) //作用-刷新
this.visible = false
Toast('绑定成功');
}else if (temp === 'The mobile phone number has been bound'){
// alert('该电话已经绑定')
Toast('该电话已经绑定');
}else if (temp === 'The verification code is inconsistent'){
// alert('验证码不一致')
// .success('验证码不一致')
Toast('验证码不一致');
}else if (temp === 'The phone numbers to be bound are inconsistent'){
// alert('要绑定的电话号码不一致 ')
Toast('要绑定的电话号码不一致');
}
// console.log(temp);
// this.visible = false;
},
// 发送验证码
async postphoneBinding(User, phone) {
let temp = await http.phoneBinding(User, phone);
let tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
this.phone
);
// alert(temp)
if (temp === 'OK' && tel) {
Toast('验证码已发送');
} else if (this.phone == "") {
Toast('请输入手机号');
} else if (!tel) {
Toast('手机号不正确');
}
},
countDown(wxuser, phone){
// 倒计时
if (!this.canClick) return; //改动的是这两行代码
this.canClick = false;
this.content = this.totalTime + "S后重新发送";
this.postphoneBinding(wxuser, phone)
let clock = window.setInterval(() => {
this.totalTime--;
this.content = this.totalTime + "S后重新发送";
if (this.totalTime < 0) {
window.clearInterval(clock);
this.content = "重新发送验证码";
this.totalTime = 10;
this.canClick = true; //这里重新开启
}
}, 1000)
},
toDetail() {
this.$router.push({
path: "/",
name: "Home",
});
},
showModal() {
this.visible = true;
},
hideModal() {
this.visible = false;
},
// 抽奖跳转
lottery() {
this.$router.push({
path: "/HeaderPage",
name: "HeaderPage",
})
},
// 每日签到
sign() {
this.$router.push({
path: "/Sign",
name: "Sign",
});
},
// 积分商城
points() {
this.$router.push({
path: "/Points",
name: "Points",
});
},
// 宝箱
treasure() {
this.$router.push({
path: "/Treasure",
name: "Treasure",
});
},
// 用户中心
user() {
this.$router.push({
path: "/User",
name: "User",
});
},
},
};
</script>
<style scoped lang="less">
@import '../../public/HomePage';
</style>
本文来自博客园，作者：zjxgdq，转载请注明原文链接：https://www.cnblogs.com/zjxzhj/p/14788395.html
浙公网安备 33010602011771号