295 lines
6.7 KiB
Vue
295 lines
6.7 KiB
Vue
|
<template>
|
||
|
|
<view class="content">
|
||
|
|
<u-overlay :show="show" class="overlay">
|
||
|
|
<view class="slot-content">
|
||
|
|
<view class="title"><text>登陆账号</text></view>
|
||
|
|
<u--form labelPosition="left" :model="form" ref="uForm">
|
||
|
|
<u-form-item prop="phone" border="none">
|
||
|
|
<u-input placeholder="请输入手机号" class="login-input" font-size="28rpx" color="#71C8E8"
|
||
|
|
inputAlign="left" border="none" shape="circle" v-model="form.phone">
|
||
|
|
<template slot="prefix">
|
||
|
|
<div class="prespace"></div>
|
||
|
|
</template>
|
||
|
|
</u-input>
|
||
|
|
</u-form-item>
|
||
|
|
<u-form-item prop="form.code" border="none">
|
||
|
|
<u-input placeholder="请输入验证码" class="login-input" font-size="28rpx" color="#71C8E8"
|
||
|
|
inputAlign="left" border="none" shape="circle" v-model="form.code">
|
||
|
|
<template slot="prefix">
|
||
|
|
<div class="prespace"></div>
|
||
|
|
</template>
|
||
|
|
<template slot="suffix">
|
||
|
|
<view class="login-code" @click="getcode">
|
||
|
|
<text>{{codemsg}}</text>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
</u-input>
|
||
|
|
</u-form-item>
|
||
|
|
</u--form>
|
||
|
|
<u-button class="login-btn" type="primary" shape="circle" size="middle" color="#0BAFEA" text="登陆"
|
||
|
|
@click="login"></u-button>
|
||
|
|
</view>
|
||
|
|
</u-overlay>
|
||
|
|
<view class="bottomcontent">
|
||
|
|
<!-- <u-button type="primary" shape="circle" size="large" color="#F95E6E" text="去兑换立减金"
|
||
|
|
@click="navigateToCoupon"></u-button> -->
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import api from '@/api/api.js'
|
||
|
|
import {authState} from '@/util/auth.js'
|
||
|
|
import code from '@/uni_modules/uview-ui/libs/config/props/code.js'
|
||
|
|
import form from '@/uni_modules/uview-ui/libs/config/props/form.js'
|
||
|
|
import {store} from '@/store/coupon.js'
|
||
|
|
import {acstore} from '@/store/activities.js'
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
show: false,
|
||
|
|
iscode: false,
|
||
|
|
codemsg: "获取验证码",
|
||
|
|
form: {
|
||
|
|
phone: "",
|
||
|
|
code: "",
|
||
|
|
activity_id: undefined
|
||
|
|
},
|
||
|
|
activityId:undefined,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
navigateToCoupon() {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: '/pages/coupons/coupon/index'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// navigateToShop:()=>{
|
||
|
|
// uni.switchTab({
|
||
|
|
// url:'/pages/simpleshop/index/index'
|
||
|
|
// })
|
||
|
|
// },
|
||
|
|
navigateToHinge:()=>{
|
||
|
|
uni.navigateTo({
|
||
|
|
url:'/pages/coupons/hinge/index'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
login() {
|
||
|
|
const validate = this.checkSubmit()
|
||
|
|
if(validate =='success'){
|
||
|
|
api.login(this.form).then((res)=>{
|
||
|
|
if(res.data.code == 200){
|
||
|
|
authState.login({
|
||
|
|
userId:res.data.data.id,
|
||
|
|
token:res.data.data.front_token
|
||
|
|
})
|
||
|
|
uni.showToast({
|
||
|
|
title: "登录成功",
|
||
|
|
icon: "none",
|
||
|
|
})
|
||
|
|
store.dispatch('getanswer').then((ares)=>{
|
||
|
|
if(ares.answer.length>0){
|
||
|
|
api.answerFinished({
|
||
|
|
id:this.activityId,
|
||
|
|
answer:ares.answer
|
||
|
|
}).then((res)=>{
|
||
|
|
if(res.data.code == 200){
|
||
|
|
store.commit('setanswer',[])
|
||
|
|
}else{
|
||
|
|
// uni.showToast({
|
||
|
|
// title: res.data.message,
|
||
|
|
// icon: "none"
|
||
|
|
// })
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
this.navigateToHinge()
|
||
|
|
this.show = false
|
||
|
|
}else{
|
||
|
|
uni.showToast({
|
||
|
|
title: res.data.message,
|
||
|
|
icon: "none"
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
uni.showToast({
|
||
|
|
title: validate,
|
||
|
|
icon: "none"
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
getcode() {
|
||
|
|
const validate = this.checkPhoneNum(this.form.phone)
|
||
|
|
if(validate == 'success'){
|
||
|
|
if (this.iscode) {
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.iscode = true
|
||
|
|
this.getphonecode()
|
||
|
|
}else{
|
||
|
|
uni.showToast({
|
||
|
|
title: validate,
|
||
|
|
icon: "none"
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
getphonecode() {
|
||
|
|
let that = this
|
||
|
|
uni.showLoading({
|
||
|
|
title: "发送中..."
|
||
|
|
})
|
||
|
|
|
||
|
|
api.getcodes({
|
||
|
|
phone: that.form.phone
|
||
|
|
}).then((res) => {
|
||
|
|
if (res.data.code == '200') {
|
||
|
|
uni.showToast({
|
||
|
|
title: "发送成功",
|
||
|
|
icon: "success",
|
||
|
|
duration: 800,
|
||
|
|
})
|
||
|
|
|
||
|
|
that.codemsg = 60;
|
||
|
|
that.interval = setInterval(() => {
|
||
|
|
that.codemsg -= 1;
|
||
|
|
if (that.codemsg == 0) {
|
||
|
|
clearInterval(that.interval);
|
||
|
|
that.iscode = false
|
||
|
|
that.codemsg = "重新发送";
|
||
|
|
}
|
||
|
|
}, 1000);
|
||
|
|
|
||
|
|
} else {
|
||
|
|
uni.showToast({
|
||
|
|
title: res.data.message,
|
||
|
|
icon: 'none'
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
checkPhoneNum(value) {
|
||
|
|
if (value == undefined || value == '' ) {
|
||
|
|
return '手机号不能为空'
|
||
|
|
}
|
||
|
|
var reg = /^1[3456789]\d{9}$/;
|
||
|
|
if (reg.test(value)) {
|
||
|
|
return 'success'
|
||
|
|
} else {
|
||
|
|
return '手机号码格式不正确'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
checkCode(value) {
|
||
|
|
if (value == undefined || value == '') {
|
||
|
|
return '验证码不能为空'
|
||
|
|
}
|
||
|
|
var reg = /^\d{6}$/;
|
||
|
|
if (reg.test(value)) {
|
||
|
|
return 'success'
|
||
|
|
} else {
|
||
|
|
return '验证码格式不正确'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
checkSubmit(){
|
||
|
|
const cphone = this.checkPhoneNum(this.form.phone)
|
||
|
|
if(cphone!='success')return cphone
|
||
|
|
const ccode = this.checkCode(this.form.code)
|
||
|
|
if(ccode != 'success')return ccode
|
||
|
|
return 'success'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow(){
|
||
|
|
acstore.dispatch('getactivitId').then((res)=>{
|
||
|
|
this.activityId = parseInt(res.activitId)
|
||
|
|
this.form.activity_id = parseInt(res.activitId)
|
||
|
|
})
|
||
|
|
if(!authState.isLogin()){
|
||
|
|
this.show = true
|
||
|
|
}else{
|
||
|
|
this.show = false
|
||
|
|
this.navigateToHinge()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.content {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: end;
|
||
|
|
height: 100%;
|
||
|
|
background-image: url('@/static/images/couponindex.png');
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: cover;
|
||
|
|
background-position: center;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.overlay {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slot-content {
|
||
|
|
margin: 0;
|
||
|
|
width: 412rpx;
|
||
|
|
background-image: url('@/static/images/loginwindow.png');
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: contain;
|
||
|
|
padding: 68rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.title {
|
||
|
|
font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #0BAFEA;
|
||
|
|
line-height: 48rpx;
|
||
|
|
text-align: center;
|
||
|
|
font-style: normal;
|
||
|
|
text-transform: none;
|
||
|
|
margin-top: 100rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bottomcontent {
|
||
|
|
width: 540rpx;
|
||
|
|
padding-bottom: 114rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.login-input {
|
||
|
|
background-color: #EEFAFF;
|
||
|
|
height: 72rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.login-btn {
|
||
|
|
margin-top: 18rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.login-code {
|
||
|
|
font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 24rpx;
|
||
|
|
color: #0BAFEA;
|
||
|
|
line-height: 48rpx;
|
||
|
|
text-align: center;
|
||
|
|
font-style: normal;
|
||
|
|
text-transform: none;
|
||
|
|
margin-right: 28rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.prespace {
|
||
|
|
width: 20rpx;
|
||
|
|
}
|
||
|
|
</style>
|