view
<uniNavHeader nIndex="0" isIndex="true" title="首页"></uniNavHeader>import uniNavHeader from ‘@/components/uni-head-bar/uni-head-bar.vue’
components
<template>
<view class="navbar-box">
<!-- pc -->
<view class="uni-pc-navbar ">
<view class="uni-navbar-top flex-center justify-zBetween">
<view class="logo flex-center">
<navigator url="/" class="logo-link"><image src="../../static/img/logo.png" mode=""></image></navigator>
<view class="language-box" @click="useOutClickSide">
<easySelect ref="easySelect" size="mini" :value="selecValue" :icon="iconV" @selectOne="selectOne"></easySelect>
</view>
</view>
<!-- 登陆前 -->
<view class="top-button flex-center" v-if="!islogin">
<text class="btn" @click="open()">登录</text>
<text class="btn btn--black" @click="ropen()">注册</text>
</view>
<!-- 登录后 -->
<view class="top-user flex-center" v-if="islogin">
</view>
</view>
<view class="navbar-main flex-center">
<view class="col" v-for="(item,index) in navs">
<navigator :url="item.link" class="navbar-item" :class="nIndex == index?'active':''">
{{item.text}}
</navigator>
</view>
</view>
</view>
<!-- 手机端头部---------------------------- -->
<!-- 手机首页头部 -->
<view v-if="isIndex" class="uni-index-navbar flex-center justify-zBetween">
<view class="logo">
<navigator url="/" class="m_index-link"><image src="../../static/images/logo.png" mode=""></image></navigator>
</view>
<view class="index-right-bar flex-center">
<view class="language-box" @click="useOutClickSide">
<easySelect ref="easySelect" size="mini" :value="selecValue" :icon="iconV" @selectOne="selectOne"></easySelect>
</view>
<view class="notice-bar" @click="goUrl('/pages/notice/notice')">
<text class="iconfont icon-xiaoxitongzhi"></text>
<view class="badge">1</view>
</view>
<!-- 登陆前 -->
<view class="top-button flex-center" >
<text class="btn" @click="open()">登录</text>
<text class="btn" @click="ropen()">注册</text>
</view>
<!-- 登录后 -->
<!-- <view class="top-user flex-center" @click="goUrl('/pages/ucenter/index')">
<image src="../../static/images/useravatar.jpg" class="u-avatar" mode=""></image>
</view> -->
</view>
</view>
<uni-nav-bar v-else @clickLeft="clickLeft" fixed="true" statusBar="true" :border="false" color="#ffffff" backgroundColor="#e51e33" left-icon="back" :title="title">
<view class="icon-group" slot="right">
<text @click="openMenu" class="iconfont icon-menut"></text>
<text class="iconfont icon-kf"></text>
</view>
</uni-nav-bar>
<!-- 手机侧边导航 -->
<uni-popup ref="popup" type="right" >
<view class="popup-menu">
<view class="m-logo">
<navigator url="/" class="logo-link"><image src="../../static/images/logo.png" mode=""></image></navigator>
</view>
<view class="m_menu-item" v-for="(item,index) in navsM">
<navigator :url="item.link" class="navbar_m-item" :class="nIndex == index?'active':''">
<text class="iconfont" :class="item.icon"></text><text>{{item.text}}</text>
</navigator>
</view>
</view>
</uni-popup>
<!-- 登陆注册 -->
<uni-popup ref="LoginPopup" type="center" >
<view class="form-popup flex login-popup">
<view class="form-main">
<view class="form-hd">登录</view>
<view class="form-body">
<uni-forms err-show-type="toast" ref="form" :modelValue="formData" :rules="rules" :label-width="0" :border="false" size="lg">
<uni-forms-item name="account">
<uni-easyinput type="text" v-model="formData.account" placeholder="请输入账号/用户名/ID" />
</uni-forms-item>
<uni-forms-item name="pwd">
<uni-easyinput type="text" v-model="formData.pwd" placeholder="请输入密码" />
</uni-forms-item>
<uni-forms-item class="form-item-code" name="yzm">
<uni-easyinput type="text" v-model="formData.yzm" placeholder="验证码" />
<view class="link-code"><image src="../../static/images/code.png" mode=""></image></view>
</uni-forms-item>
<view class="sw-forms-item flex-center justify-zBetween">
<label class="sw-checkbox flex-center">
<checkbox style="transform: scale(.8);" color="#FF0000" value="cb" checked="true" /><text>保持登录</text>
</label>
<navigator url="/">忘记密码？</navigator>
</view>
</uni-forms>
</view>
<view class="form-ft">
<button @click="submit" type="default" class="btn btn--default">登录</button>
</view>
</view>
<view class="form-arrow abs-right" @click="goReist()">
<image src="../../static/images/f_left.png" mode=""></image><text>注册</text>
</view>
<view class="people-right-abs">
<image src="../../static/images/neimaer.png" mode=""></image>
</view>
</view>
</uni-popup>
<uni-popup ref="RegistPopup" type="center" >
<view class="form-popup flex regist-popup">
<view class="form-arrow abs-left" @click="goLogin">
<text>登录</text><image src="../../static/images/f_right.png" mode=""></image>
</view>
<view class="form-main">
<view class="form-hd">注册</view>
<view class="form-body">
<uni-forms err-show-type="toast" ref="formRegist" :modelValue="formDataRegist" :rules="registrules" :label-width="0" :border="false" size="lg">
<uni-forms-item name="account">
<uni-easyinput type="text" v-model="formData.account" placeholder="请输入账号/用户名/ID" />
</uni-forms-item>
<uni-forms-item name="pwd">
<uni-easyinput type="text" v-model="formData.pwd" placeholder="请输入密码（6-15位英文及数字）" />
</uni-forms-item>
<uni-forms-item name="pwd">
<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入手机号码" />
</uni-forms-item>
<uni-forms-item name="pwd">
<uni-easyinput type="text" v-model="formData.tcode" placeholder="请输入推荐码（非必填）" />
</uni-forms-item>
<uni-forms-item class="form-item-code" name="yzm">
<uni-easyinput type="text" v-model="formData.yzm" placeholder="请输入验证码" />
<view class="link-code"><image src="../../static/images/code.png" mode=""></image></view>
</uni-forms-item>
</uni-forms>
</view>
<view class="form-ft">
<button @click="registSubmit" type="default" class="btn btn--default">马上注册</button>
</view>
</view>
<view class="people-left-abs">
<image src="../../static/images/pp-pic.png" mode="widthFix"></image>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import easySelect from "@/components/easy-language/easy-select.vue"
export default {
name: "",
components: {easySelect},
props: {
nIndex: {
type: String,
default: "1"
},
isIndex: {
type: String,
default: false
},
title: {
type: String,
default: ""
},
islogin:false,
show:false,
selecValue: 'CH',
iconV: '../../static/images/cn.png',
},
data() {
return {
formData: {
account: '',
pwd: '',
yzm: ''
},
rules: {
// 对name字段进行必填验证
account: {
rules: [{
required: true,
errorMessage: '请输入账号/用户名/ID',
},
]
},
pwd: {
rules: [{
required: true,
errorMessage: '请输入密码',
},
]
},
yzm: {
rules: [{
required: true,
errorMessage: '请输入验证码',
},
]
},
},
formDataRegist: {
account: '',
phone: '',
tcode: '',
pwd: '',
yzm: ''
},
registrules: {
// 对name字段进行必填验证
account: {
rules: [{
required: true,
errorMessage: '请输入账号/用户名/ID',
},
]
},
phone: {
rules: [{
required: true,
errorMessage: '请输入手机号',
},
]
},
pwd: {
rules: [{
required: true,
errorMessage: '请输入密码',
},
]
},
Tcode: {
rules: [{
required: true,
errorMessage: '请输入推荐码（非必填）',
},
]
},
yzm: {
rules: [{
required: true,
errorMessage: '请输入验证码',
},
]
},
},
navs:[
{
text:'首页',
link:'/pages/index/index'
},
{
text:'市场列表',
link:'/pages/market/index'
},
{
text:'正在交易',
link:'/pages/tradeing/index'
},
{
text:'历史账务',
link:'/pages/gameResult/index'
},
{
text:'公告中心',
link:'/pages/gameResult/index'
},
{
text:'代理中心',
link:'/pages/wsCenter/index'
},
{
text:'赛事结果',
link:'/pages/gameResult/index'
},
{
text:'赛事资讯',
link:'/pages/page/news'
},
{
text:'活动大厅',
link:'/pages/activity/activity'
},
],
// 手机导航
navsM:[
{
text:'市场列表',
link:'/pages/market/index',
icon:'icon-qushi'
},
{
text:'正在交易',
link:'/pages/tradeing/index',
icon:'icon-jiaoyishuju'
},
{
text:'赛事列表',
link:'/pages/gameResult/index',
icon:'icon-saishiliebiao'
},
{
text:'合作中心',
link:'/pages/wsCenter/index',
icon:'icon-hezuo'
},
{
text:'活动大厅',
link:'/pages/activity/activity',
icon:'icon-huodong'
},
{
text:'赛事资讯',
link:'/pages/page/news',
icon:'icon-zixun'
},
{
text:'个人中心',
link:'/pages/ucenter/index',
icon:'icon-gerenzhongxin'
},
{
text:'公告中心',
link:'/pages/notice/notice',
icon:'icon-gonggaozhongxin'
},
{
text:'规则说明',
link:'/pages/page/rule',
icon:'icon-guizeshuoming'
},
]
}
},
mounted() {},
methods: {
selectOne(options) {
this.selecValue = options.label
this.iconV = options.icon
},
useOutClickSide() {
this.$refs.easySelect.hideOptions && this.$refs.easySelect.hideOptions()
},
goUrl(url){
uni.navigateTo({
url: url
});
},
clickLeft(){
uni.navigateBack()
},
// 登陆注册
open() {
this.$refs.LoginPopup.open('center')
},
close() {
this.$refs.LoginPopup.close()
},
submit() {
this.$refs.form.validate().then(res => {
console.log('表单数据信息：', res);
}).catch(err => {
console.log('表单错误信息：', err);
})
},
ropen() {
this.$refs.RegistPopup.open('center')
},
rclose() {
this.$refs.RegistPopup.close()
},
registSubmit() {
this.$refs.formRegist.validate().then(res => {
console.log('表单数据信息：', res);
}).catch(err => {
console.log('表单错误信息：', err);
})
},
goLogin(){
this.$refs.RegistPopup.close()
this.$refs.LoginPopup.open('center')
},
goReist(){
this.$refs.LoginPopup.close()
this.$refs.RegistPopup.open('center')
},
openMenu(){
// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
this.$refs.popup.open('right')
}
}
};
</script>
<style lang="scss" scoped>
.u-value{
background: url(../../static/images/qbao.png) left center no-repeat;
padding-left: 22px;
}
.u-rank{
background: url(../../static/images/rank.png) no-repeat;
background-size: contain;
}
.login-popup{
background: url(../../static/images/login-bg.png) no-repeat;
background-size: cover;
}
.regist-popup{
background: url(../../static/images/regist-bg.png) no-repeat;
background-size: cover;
}
.news-link-box::after{
background: url(../../static/images/zhezhao.png) no-repeat;
content: '';
width: 148px;
height: 180px;
background-size: cover;
position: absolute;
left: 0;
top: 0;
z-index:11;
}
.gm-result-box{
background: url(../../static/images/gmbg.png) no-repeat;
background-size: cover;
}
.gm-result-box::after{
background: url(../../static/images/gm-zhezhao.png) no-repeat;
content: '';
width: 93px;
height: 66px;
background-size: cover;
position: absolute;
left: 0;
bottom: 0;
z-index:11;
}
.trade-link-box{
background: url(../../static/images/jj-pop-bg.png) no-repeat;
background-size: cover;
}
.trade-link-box::after{
background: url(../../static/images/zhezhao.png) no-repeat;
content: '';
width: 148px;
height: 180px;
background-size: cover;
position: absolute;
left: 0;
top: 0;
z-index:11;
}
.popup-menu{
position: relative;
z-index: 9999;
background: url(../../static/images/sidebg.jpg) no-repeat;
background-size: cover;
}
</style>