我是个攻城狮
739 lines
16 KiB
Vue
739 lines
16 KiB
Vue
<template>
|
||
<view>
|
||
<match-media :min-width="900">
|
||
<view class="header_top">
|
||
<view style="color: #D5C6B2;">孵化精品游戏 <text style="margin-left: 10px;">助力企业发展</text></view>
|
||
<view class="top_r">
|
||
<p @tap="active({url: '/'})">回到首页</p>
|
||
</view>
|
||
|
||
</view>
|
||
</match-media>
|
||
<match-media :max-width="900">
|
||
<view class="headers">
|
||
<view class="header-titles">
|
||
<image class="logos" src="../../static/img/index/blogo.png"></image>
|
||
</view>
|
||
<view class="header-right" @tap="open('drawer')">
|
||
<uni-icons type="bars" size="24" color="#f18b37"></uni-icons>
|
||
</view>
|
||
</view>
|
||
</match-media>
|
||
<uni-drawer mode="right" ref="drawer">
|
||
<view class="drawer-box">
|
||
<ul>
|
||
<li v-for="(item,index) in list" :class="{'active-hover':num==index}" :key="index"
|
||
@tap="active(item)">
|
||
<span href="./">{{item.text}}</span>
|
||
</li>
|
||
|
||
<li @tap="active9({url: 'apply'})" :class="{'active-hover':nums==9}">
|
||
<span href="./">立即申请</span>
|
||
</li>
|
||
|
||
<!-- <li @tap="active10({url: 'blockchainquery'})" :class="{'active-hover':currentRoute=='/blockchainquery'}">
|
||
<span href="./">资产核验</span>
|
||
</li> -->
|
||
</ul>
|
||
</view>
|
||
</uni-drawer>
|
||
|
||
<uni-popup mode="center" ref="login">
|
||
<view class="login-box">
|
||
<image class="logos" src="../../static/img/index/blogo.png"></image>
|
||
<view class="login_type">
|
||
<text class="login_text" :class="{'check':l_type==1}" @tap="check(1)">登录</text>
|
||
<text class="login_text">|</text>
|
||
<text class="login_text" :class="{'check':l_type==2}" @tap="check(2)">注册</text>
|
||
</view>
|
||
<view class="login_desc" v-if="l_type==1">
|
||
欢迎回来～
|
||
</view>
|
||
<view class="login_descs" v-else>
|
||
快速开始尽享COG可信资产服务平台榜单，你可申请游戏评分、申请融资或处理游戏投融资业务
|
||
</view>
|
||
<view class="input-wrap" v-if="l_type==1">
|
||
<input class="input" v-model="formData.mobile" type="text" placeholder="请输入手机号" placeholder-class="placeholder-class" maxlength="20">
|
||
<input class="input" v-model="formData.password" type="password" placeholder="请输入登录密码" placeholder-class="placeholder-class"/>
|
||
</view>
|
||
|
||
<!-- <img :src="captchaUrl" @tap="refreshCaptcha" alt="Captcha" /> -->
|
||
<view class="login_bt" v-if="l_type==1" @tap="login()">
|
||
<text>登录</text>
|
||
</view>
|
||
<view class="login_check" v-if="l_type==1">
|
||
<label class="radio"><radio value="r1" :checked="checkedss" @tap="select()" activeBackgroundColor="#f48612" borderColor="#f48612" color="#f48612" style="transform:scale(0.65);border-radius: 100%;" /></label>
|
||
登录即代表同意《用户协议》
|
||
</view>
|
||
<view class="input-wrap mg-t-30" v-if="l_type==2">
|
||
<input class="input" v-model="formData.mobile" type="text" placeholder="请输入手机号" maxlength="20" placeholder-class="placeholder-class" >
|
||
<input class="input" v-model="formData.password" type="password" placeholder="请输入登录密码" placeholder-class="placeholder-class" />
|
||
<view class="login_code mg-b-30">
|
||
<input class="input2" v-model="formData.code" type="text" placeholder="请输入短信验证码" placeholder-class="placeholder-class" />
|
||
<view class="dynacode" @click="sendMobileCode">{{dynacodeData.codeText }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="login_bt" v-if="l_type==2" @tap="register()">
|
||
注册并登录
|
||
</view>
|
||
<view class="login_checks" v-if="l_type==2">
|
||
<label class="radio"><radio value="r1" :checked="checkedss" @tap="select()" activeBackgroundColor="#f48612" borderColor="#f48612" color="#f48612" style="transform:scale(0.65);border-radius: 100%;" /></label>
|
||
注册即代表同意《用户协议》
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { err } from '../../js_sdk/hhyang-uni-simple-router/helpers/warn';
|
||
export default {
|
||
props: {
|
||
index: {
|
||
type: Number,
|
||
default: 0
|
||
},
|
||
name: {
|
||
type: String,
|
||
default: 'COG可信资产服务平台'
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
list: [{
|
||
text: '首页',
|
||
url: '/',
|
||
path: '/pages/index',
|
||
},
|
||
{
|
||
text: '我要资金',
|
||
url: 'invest',
|
||
path: '/pages/invest',
|
||
},
|
||
{
|
||
text: '我要发行',
|
||
url: 'publish',
|
||
path: '/pages/publish',
|
||
},
|
||
{
|
||
text: '我要出海',
|
||
url: 'oversea',
|
||
path: '/pages/oversea',
|
||
},
|
||
{
|
||
text: '我要版号',
|
||
url: 'versionNumber',
|
||
path: '/pages/versionNumber',
|
||
},{
|
||
text: '我要版权',
|
||
url: 'copyright',
|
||
path: '/pages/copyright',
|
||
},
|
||
{
|
||
text: '我要技术',
|
||
url: 'development',
|
||
path: '/pages/development',
|
||
},
|
||
{
|
||
text: '我要参展',
|
||
url: 'expo',
|
||
path: '/pages/expo',
|
||
},
|
||
{
|
||
text: '我要补贴',
|
||
url: 'subsidy',
|
||
path: '/pages/subsidy',
|
||
},
|
||
//首页
|
||
|
||
],
|
||
num: 0,
|
||
nums: 0,
|
||
l_type:1,
|
||
formData:[],
|
||
dynacodeData: {
|
||
seconds: 120,
|
||
timer: null,
|
||
codeText: '获取验证码',
|
||
isSend: false
|
||
},
|
||
checkedss:true,
|
||
token:'',
|
||
currentRoute:'',
|
||
captchaUrl:''
|
||
}
|
||
},
|
||
created() {
|
||
// this.num ='';
|
||
this.nums ='';
|
||
this.token = uni.getStorageSync('token');
|
||
this.num = this.index;
|
||
// console.log(this.num ,222)
|
||
this.currentRoute = this.$route.path;
|
||
// console.log(currentRoute,222)
|
||
// if(this.currentRoute=='/blockchainquery'){
|
||
// this.nums = 10;
|
||
// this.num ='';
|
||
// }
|
||
if(this.currentRoute=='/apply'){
|
||
this.nums = 9;
|
||
this.num =-1;
|
||
}
|
||
// if(this.currentRoute=='/subsidy'){
|
||
// this.num = 8;
|
||
// }
|
||
//this.refreshCaptcha();
|
||
},
|
||
watch: {
|
||
'dynacodeData.seconds': {
|
||
handler(newValue, oldValue) {
|
||
if (newValue == 0) {
|
||
clearInterval(this.dynacodeData.timer);
|
||
this.dynacodeData = {
|
||
seconds: 120,
|
||
timer: null,
|
||
codeText: '获取验证码',
|
||
isSend: false
|
||
};
|
||
}
|
||
},
|
||
immediate: true,
|
||
deep: true
|
||
}
|
||
},
|
||
methods: {
|
||
refreshCaptcha() {
|
||
this.captchaUrl ='';
|
||
this.captchaUrl = `http://gg.com/index.php/api/user.code?${new Date().getTime()}`; // 防止缓存
|
||
},
|
||
select(){
|
||
if(this.checkedss==true){
|
||
this.checkedss=false;
|
||
}else{
|
||
this.checkedss=true;
|
||
}
|
||
},
|
||
check(e){
|
||
this.l_type=e;
|
||
},
|
||
login(){
|
||
if(this.checked==false){
|
||
uni.showToast({
|
||
icon:'none',
|
||
title: '请同意用户协议',
|
||
duration:1500
|
||
})
|
||
return;
|
||
}
|
||
if(this.formData.mobile==''){
|
||
uni.showToast({
|
||
icon:'none',
|
||
title: '请输入手机号',
|
||
duration:1500
|
||
})
|
||
return;
|
||
}
|
||
if(this.formData.password==''){
|
||
uni.showToast({
|
||
icon:'none',
|
||
title: '请输入密码',
|
||
duration:1500
|
||
})
|
||
return;
|
||
}
|
||
this._post('user.Useropen/phonelogin',{
|
||
mobile: this.formData.mobile,
|
||
password: this.formData.password,
|
||
|
||
},res=>{
|
||
uni.setStorageSync('token',res.data.token)
|
||
uni.showToast({
|
||
icon:'none',
|
||
title: '登录成功',
|
||
duration:1500
|
||
})
|
||
this.token =res.data.token;
|
||
this.close('login');
|
||
}
|
||
,err=>{
|
||
uni.showToast({
|
||
icon:'none',
|
||
title: err.data.msg
|
||
})
|
||
return;
|
||
// this.$message(err.data.msg);
|
||
}
|
||
);
|
||
},
|
||
sendMobileCode(){
|
||
if(this.checked==false){
|
||
uni.showToast({
|
||
icon:'none',
|
||
title: '请同意用户协议',
|
||
duration:1500
|
||
})
|
||
return;
|
||
}
|
||
if(!this.formData.mobile){
|
||
uni.showToast({
|
||
icon:'none',
|
||
title: '请输入手机号',
|
||
duration:1500
|
||
})
|
||
return;
|
||
}
|
||
if(!this.formData.password){
|
||
uni.showToast({
|
||
icon:'none',
|
||
title: '请输入密码',
|
||
duration:1500
|
||
})
|
||
return;
|
||
}
|
||
this._post('user.Useropen/sendCode',{
|
||
mobile: this.formData.mobile,
|
||
type: 'register',
|
||
},res=>{
|
||
this.dynacodeData.timer = setInterval(() => {
|
||
this.dynacodeData.seconds--;
|
||
this.dynacodeData.codeText = this.dynacodeData.seconds + 's后重发';
|
||
}, 1000);
|
||
uni.showToast({
|
||
icon:'none',
|
||
title: '发送成功',
|
||
duration:1500
|
||
})
|
||
}
|
||
,err=>{
|
||
uni.showToast({
|
||
icon:'none',
|
||
title: err.data.msg
|
||
})
|
||
return;
|
||
// this.$message(err.data.msg);
|
||
}
|
||
);
|
||
},
|
||
register(){
|
||
if(this.checked==false){
|
||
uni.showToast({
|
||
icon:'none',
|
||
title: '请同意用户协议',
|
||
duration:1500
|
||
})
|
||
return;
|
||
}
|
||
if(this.formData.mobile==''){
|
||
uni.showToast({
|
||
icon:'none',
|
||
title: '请输入手机号',
|
||
duration:1500
|
||
})
|
||
return;
|
||
}
|
||
if(this.formData.password==''){
|
||
uni.showToast({
|
||
icon:'none',
|
||
title: '请输入密码',
|
||
duration:1500
|
||
})
|
||
return;
|
||
}
|
||
this._post('user.Useropen/register',{
|
||
mobile: this.formData.mobile,
|
||
password: this.formData.password,
|
||
code: this.formData.code,
|
||
corporate_idcard: 'arguments11',
|
||
company_code: 'arguments11',
|
||
name: 'arguments11',
|
||
legal_person: 'arguments11',
|
||
},res=>{
|
||
uni.setStorageSync('token',res.data.token)
|
||
uni.showToast({
|
||
icon:'none',
|
||
title: '注册成功',
|
||
duration:1500
|
||
})
|
||
this.token =res.data.token;
|
||
this.close('login');
|
||
}
|
||
,err=>{
|
||
uni.showToast({
|
||
icon:'none',
|
||
title: err.data.msg
|
||
})
|
||
return;
|
||
// this.$message(err.data.msg);
|
||
}
|
||
);
|
||
},
|
||
|
||
active(e) {
|
||
const path = this.$route.path;
|
||
// const query = this.$route.query;
|
||
if(path=='/'+e.url){
|
||
return;
|
||
}
|
||
if(e.url.includes("http")){
|
||
window.open(e.url, '_blank');
|
||
// window.location.href = '';
|
||
}
|
||
else{
|
||
this.$router.replace({
|
||
path: e.url
|
||
});
|
||
}
|
||
},
|
||
active9(e) {
|
||
// this.num =9;
|
||
// console.log(this.num,222)
|
||
const path = this.$route.path;
|
||
// const query = this.$route.query;
|
||
if(path=='/'+e.url){
|
||
return;
|
||
}
|
||
if(e.url.includes("http")){
|
||
window.open(e.url, '_blank');
|
||
// window.location.href = '';
|
||
}
|
||
else{
|
||
this.$router.replace({
|
||
path: e.url
|
||
});
|
||
}
|
||
},
|
||
active10(e) {
|
||
this.nums =10;
|
||
console.log(this.nums,222)
|
||
const path = this.$route.path;
|
||
// const query = this.$route.query;
|
||
if(path=='/'+e.url){
|
||
return;
|
||
}
|
||
if(e.url.includes("http")){
|
||
window.open(e.url, '_blank');
|
||
// window.location.href = '';
|
||
}
|
||
else{
|
||
this.$router.replace({
|
||
path: e.url
|
||
});
|
||
}
|
||
},
|
||
open(name){
|
||
this.$refs[name].open();
|
||
},
|
||
close(name){
|
||
this.$refs[name].close();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.login-box{
|
||
width: 640px;
|
||
min-height: 768px;
|
||
background: #282627;
|
||
box-shadow: 0px 0px 57px 0px rgba(239,131,18,0.15);
|
||
text-align: center;
|
||
.logos{
|
||
width: 380px;
|
||
height: 56px;
|
||
margin: 48px auto;
|
||
}
|
||
.login_type{
|
||
width: 541px;
|
||
border-bottom: 1px solid #383838;
|
||
padding:15px 0;
|
||
margin: 0 auto;
|
||
|
||
.login_text{
|
||
width: 45px;
|
||
height: 21px;
|
||
font-size: 21px;
|
||
font-weight: 400;
|
||
color: #9E9E9E;
|
||
line-height: 32px;
|
||
padding:25px 22px;
|
||
cursor: pointer;
|
||
}
|
||
.check{
|
||
font-size: 24px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
}
|
||
.login_descs{
|
||
margin-top: 20px;
|
||
height: 55px;
|
||
font-size: 21px;
|
||
font-weight: 400;
|
||
color: #9E9E9E;
|
||
text-align: center;
|
||
padding: 0 60px;
|
||
text-align: left;
|
||
}
|
||
.login_desc{
|
||
margin-top: 20px;
|
||
height: 55px;
|
||
font-size: 21px;
|
||
font-weight: 400;
|
||
color: #9E9E9E;
|
||
text-align: center;
|
||
padding: 0 60px;
|
||
}
|
||
.login_bt{
|
||
width: 85%;
|
||
height: 53px;
|
||
background: #383838;
|
||
border-radius: 5px;
|
||
line-height: 53px;
|
||
margin: 0 auto;
|
||
color: #9E9E9E;
|
||
cursor: pointer;
|
||
margin-top: 40px;
|
||
}
|
||
.login_bt:hover{
|
||
background: #F48612;
|
||
color: #ffffff;
|
||
}
|
||
.login_check{
|
||
font-size: 19px;
|
||
font-weight: 400;
|
||
color: #9E9E9E;
|
||
margin-top: 60px;
|
||
}
|
||
.login_code{
|
||
width: 85%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin:0 auto
|
||
}
|
||
.login_checks{
|
||
font-size: 19px;
|
||
font-weight: 400;
|
||
color: #9E9E9E;
|
||
margin-top: 10px;
|
||
}
|
||
.uni-checkbox-input{
|
||
border-radius: 100% !important;
|
||
}
|
||
.input{
|
||
width: 81%;
|
||
height: 53px;
|
||
border: 1px solid #383838;
|
||
border-radius: 5px;
|
||
margin: 0 auto;
|
||
color: #ffffff;
|
||
margin-bottom: 25px;
|
||
text-align: left;
|
||
padding: 0 2%;
|
||
}
|
||
.input2{
|
||
width: 60%;
|
||
height: 53px;
|
||
border: 1px solid #383838;
|
||
border-radius: 5px;
|
||
color: #ffffff;
|
||
padding: 0 2%;
|
||
text-align: left;
|
||
}
|
||
.dynacode{
|
||
width: 30%;
|
||
height: 53px;
|
||
background: #F48612;
|
||
border-radius: 5px;
|
||
color: #ffffff;
|
||
line-height: 53px;
|
||
cursor: pointer;
|
||
}
|
||
.input:hover{
|
||
border: 1px solid #F48612;
|
||
}
|
||
.input2:hover{
|
||
border: 1px solid #F48612;
|
||
}
|
||
.placeholder-class{
|
||
font-size: 21px;
|
||
font-weight: 400;
|
||
color: #9E9E9E;
|
||
text-align: left;
|
||
}
|
||
}
|
||
.header_top{
|
||
padding: 0 300px;
|
||
height: 36px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-color: #2b2b29;
|
||
color: #D5C6B2;
|
||
font-size: 13px;
|
||
letter-spacing: 1px;
|
||
.top_r{
|
||
width: 320px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
flex-direction: row-reverse; /* 从右到左排列 */
|
||
letter-spacing: 0px;
|
||
font-size: 15px;
|
||
p{
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
.headers {
|
||
padding: 0 2%;
|
||
height: 300px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-color: #140D08;
|
||
.header-titles {
|
||
font-size: 36px;
|
||
font-weight: bold;
|
||
line-height: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
.logos{
|
||
width: 1000px;
|
||
height: 125px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
.header {
|
||
padding: 0 300px;
|
||
height: 70px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background-color: #140D08;
|
||
.header-title {
|
||
font-size: 36px;
|
||
font-weight: bold;
|
||
line-height: 100px;
|
||
display: flex;
|
||
align-items: center;
|
||
.logo{
|
||
width: 310px;
|
||
height: 37px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.apply{
|
||
width: 113px;
|
||
height: 34px;
|
||
background-image: url('../../static/img/home/apply.png');
|
||
background-size: 100%;
|
||
font-size: 15px;
|
||
color: #070707;
|
||
line-height: 34px;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
}
|
||
|
||
&>ul {
|
||
// float: right;
|
||
// margin-left: 30px;
|
||
&>li {
|
||
list-style: none;
|
||
float: left;
|
||
position: relative;
|
||
|
||
a,
|
||
span {
|
||
display: inline-block;
|
||
padding: 0 14px;
|
||
font-weight: 400;
|
||
line-height: 100px;
|
||
font-size: 16px;
|
||
text-decoration: none;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.active-hover {
|
||
a,
|
||
span {
|
||
font-weight: bold;
|
||
color: #F48612;
|
||
}
|
||
|
||
// &::before {
|
||
// content: '';
|
||
// width: calc(100% - 40px);
|
||
// height: 4px;
|
||
// background-color: #1ab44d;
|
||
// position: absolute;
|
||
// left: 20px;
|
||
// bottom: 20px;
|
||
// }
|
||
}
|
||
}
|
||
|
||
.header-right {
|
||
padding: 0 30px;
|
||
font-size: 40px;
|
||
height: 100px;
|
||
line-height: 100px;
|
||
float: right;
|
||
.icon-caidan{
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
}
|
||
.drawer-box{
|
||
width: 30vw;
|
||
height: 100vh;
|
||
background-color: #FFFFFF;
|
||
&>ul {
|
||
width: 100%;
|
||
float: right;
|
||
|
||
&>li {
|
||
width: 100%;
|
||
list-style: none;
|
||
float: left;
|
||
position: relative;
|
||
text-align: center;
|
||
a,
|
||
span {
|
||
display: inline-block;
|
||
padding: 0 20px;
|
||
line-height: 150px;
|
||
font-size: 20px;
|
||
text-decoration: none;
|
||
color: #000;
|
||
}
|
||
}
|
||
|
||
.active-hover {
|
||
a,
|
||
span {
|
||
font-weight: bold;
|
||
color: #F48612;
|
||
}
|
||
&::before {
|
||
content: '';
|
||
width: calc(100% - 40px);
|
||
height: 4px;
|
||
background-color: #F48612;
|
||
position: absolute;
|
||
left: 20px;
|
||
bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
</style>
|