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>

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注