From 10827d8abd3f19d3c7d46c4e00efd886d5462522 Mon Sep 17 00:00:00 2001
From: xuhuajiao <13476289682@163.com>
Date: Wed, 6 Apr 2022 20:32:52 +0800
Subject: [PATCH] login-bind

---
 App.vue                       |   6 ++
 pages.json                    |   4 +
 pages/bind/bind.vue           |  28 +++++++
 pages/header.vue              |  71 +++++++++++++++-
 pages/login/login.vue         | 149 +++++++++++++++++++++++++++++-----
 static/images/bind-select.png | Bin 0 -> 1347 bytes
 6 files changed, 234 insertions(+), 24 deletions(-)
 create mode 100644 pages/bind/bind.vue
 create mode 100644 static/images/bind-select.png

diff --git a/App.vue b/App.vue
index 4f55c08..169150f 100644
--- a/App.vue
+++ b/App.vue
@@ -15,4 +15,10 @@
 <style>
 	/*每个页面公共css */
 	@import './static/iconfont/iconfont.css';
+	.main_container {
+		width: 100%;
+		height: 100vh;
+		background: url(./static/images/bg.png) no-repeat left top;
+		background-size: cover;
+	}
 </style>
diff --git a/pages.json b/pages.json
index c550239..d408f20 100644
--- a/pages.json
+++ b/pages.json
@@ -9,6 +9,10 @@
 		{
 		    "path" : "pages/login/login",
 		    "style" : {}
+		},
+		{
+		    "path" : "pages/bind/bind",
+		    "style" : {}
 		}
 	],
 	"globalStyle": {
diff --git a/pages/bind/bind.vue b/pages/bind/bind.vue
new file mode 100644
index 0000000..a629594
--- /dev/null
+++ b/pages/bind/bind.vue
@@ -0,0 +1,28 @@
+<template>
+	<view class="main_container">
+		<Header></Header>
+		<view class="login">
+			<form @submit="formSubmit">
+			</form>
+		</view>
+		<view class="login_bg"></view>
+	</view>
+</template>
+
+<script>
+import Header from '@/pages/header.vue'
+export default {
+	components: {
+		Header
+	},
+	data() {
+		return {
+		};
+	},
+	methods: {
+	}
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/pages/header.vue b/pages/header.vue
index f9ba204..dc5e8c5 100644
--- a/pages/header.vue
+++ b/pages/header.vue
@@ -1,19 +1,51 @@
 <template>
-	<view class="header-content">
-		<text class="iconfont icon-bangzhu" ></text>
-		帮助
+	<view class="header">
+		<view class="header-content" @tap="helpClick()">
+			<text class="iconfont icon-bangzhu" ></text>
+			帮助
+		</view>
+		<uni-popup ref="uniPop" class="help-cont">
+			<image src="../static/images/bt.png" class="help-title"></image>
+			<view>
+				<text class="step">第一步</text>
+				<view class="step-txt">下载apk在终端设备上进行安装</view>
+			</view>
+			<view>
+				<text class="step">第二步</text>
+				<view class="step-txt">输入后台登录账号、密码进行登录</view>
+			</view>
+			<view>
+				<text class="step">第三步</text>
+				<view class="step-txt">账号登录完成后，自动绑定当前设备，您可以选择输入设备名称、设定设备方向</view>
+			</view>
+			<view>
+				<text class="step">第四步</text>
+				<view class="step-txt">根据当前推荐选择您需要的节目点击进行播放，或选择电脑登录后台管理自行发布节目内容</view>
+			</view>
+			<view @tap="closedClick()"><text class="iconfont icon-guanbi"></text></view>
+		</uni-popup>
 	</view>
 </template>
 
 <script>
+	import uniPopup from '@/components/uni-popup/uni-popup.vue'
 export default {
 	name:'Header',
 	components: {
+		uniPopup
 	},
 	data() {
 		return {
 		};
 	},
+	methods: {
+		helpClick(){
+			this.$refs.uniPop.open()
+		},
+		closedClick(){
+			this.$refs.uniPop.close()
+		}
+	}
 };
 </script>
 
@@ -26,9 +58,40 @@ export default {
 		line-height: 27.77rpx;
 		color: #fff;
 	}
+	.iconfont{
+		color: #fff;
+	}
 	.icon-bangzhu{
 		margin-top: 1.38rpx;
 		margin-right: 11.11rpx;
-		color: #fff;
+	}
+	.help-title{
+		display: block;
+		width: 133.33rpx;
+		height: 53.47rpx;
+		margin: 0 auto;
+	}
+	.help-cont /deep/ .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box{
+		padding: 83.33rpx 69.44rpx 62.5rpx 69.44rpx;
+		/* width: 597.22rpx; */
+		border-radius: 20.83rpx;
+		overflow: initial;
+	}
+	.step{
+		display: block;
+		font-size: 27.77rpx;
+		color: #0069f9;
+		padding: 41.66rpx 0 20.83rpx 0;
+	}
+	.step-txt{
+		font-size: 25rpx;
+		line-height: 48.61rpx;
+	}
+	.icon-guanbi{
+		position: absolute;
+		bottom: -76.38rpx;
+		left: 50%;
+		font-size: 48.61rpx;
+		transform: translateX(-50%);
 	}
 </style>
diff --git a/pages/login/login.vue b/pages/login/login.vue
index aafb003..64a365b 100644
--- a/pages/login/login.vue
+++ b/pages/login/login.vue
@@ -1,17 +1,43 @@
 <template>
 	<view class="main_container">
 		<Header></Header>
-		<view class="login">
-			<image class="logo" src="/static/logo.png"></image>
-			<form @submit="formSubmit">
-				<view class="uni-form-item uni-column">
-					<input class="uni-input" name="phone" type="number" placeholder="登录账号" />
-				</view>
-				<view class="uni-form-item uni-column">
-					<input class="uni-input" name="password" placeholder="密码" password="true" />
-				</view>
-				<view class="uni-btn-v"><button class="uni-login-btn" form-type="submit">登 录</button></view>
-			</form>
+		<view class="login-bind">
+			<view v-if="!isLogin" class="login">
+				<image class="logo" src="/static/logo.png"></image>
+				<form @submit="loginSubmit">
+					<view class="uni-form-item uni-column">
+						<input class="uni-input" name="phone" type="number" placeholder="登录账号" />
+					</view>
+					<view class="uni-form-item uni-column">
+						<input class="uni-input" name="password" placeholder="密码" password="true" />
+					</view>
+					<view class="uni-btn-v"><button class="uni-login-btn" form-type="submit">登 录</button></view>
+				</form>
+			</view>
+			<view v-else class="bind">
+				<text class="bind-title">设备信息</text>
+				<form @submit="bindSubmit">
+					<view class="uni-form-item uni-column">
+						<view class="title">设备账号：</view>
+						<input class="uni-input" name="phone" type="text" placeholder="设备账号" disabled />
+					</view>
+					<view class="uni-form-item uni-column">
+						<view class="title">设备名称：</view>
+						<input class="uni-input" name="name" placeholder="设备名称" />
+					</view>
+					<view class="uni-form-item uni-column">
+						<view class="title">选择设备方向</view>
+						<image class="select_img" src="../../static/images/bind-select.png"></image>
+						<view class="device_radio">
+							<radio-group>
+								<label class="radio"><radio value="r1" checked="true" />竖屏</label>
+								<label class="radio"><radio value="r2" />横屏</label>
+							</radio-group>
+						</view>
+					</view>
+					<view class="uni-btn-v"><button class="uni-login-btn" form-type="submit">授权绑定</button></view>
+				</form>
+			</view>
 		</view>
 		<view class="login_bg"></view>
 	</view>
@@ -25,28 +51,30 @@ export default {
 	},
 	data() {
 		return {
+			isLogin: false
 		};
 	},
 	methods: {
-		formSubmit: function(e) {
+		loginSubmit: function(e) {
 			console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));
 			var formdata = e.detail.value;
 			// uni.showModal({
 			// 	content: '表单数据内容：' + JSON.stringify(formdata),
 			// 	showCancel: false
 			// });
+			// uni.navigateTo({
+			// 	url: '../bind/bind'
+			// });
+			this.isLogin = true
+		},
+		bindSubmit: function(e){
+			console.log('bindform发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value));
 		}
 	}
 };
 </script>
 
 <style scoped>
-.main_container {
-	width: 100%;
-	height: 100vh;
-	background: url(../../static/images/bg.png) no-repeat left top;
-	background-size: cover;
-}
 .login_bg {
 	position: absolute;
 	top: 50%;
@@ -60,7 +88,7 @@ export default {
 	box-shadow: 0 0 24rpx 2rpx rgba(0, 0, 0, 0.15);
 	z-index: 9;
 }
-.login {
+.login-bind {
 	position: absolute;
 	top: 50%;
 	left: 50%;
@@ -76,13 +104,19 @@ export default {
 	align-items: center;
 	justify-content: center;
 }
+.login{
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
 .logo {
 	width: 278rpx;
 	height: 52rpx;
 	margin-bottom: 69.44rpx;
 	/* margin: 132rpx auto 70rpx auto; */
 }
-.uni-input {
+.login .uni-input {
 	width: 520rpx;
 	height: 86rpx;
 	margin-bottom: 41.66rpx;
@@ -104,4 +138,79 @@ export default {
 	border-radius: 86rpx;
 	color: #fff;
 }
+.bind-title{
+	display: block;
+	margin-bottom: 37.5rpx;
+	font-size: 37.5rpx;
+	font-weight: bold;
+	color: #333;
+	text-align: center;
+}
+.bind .uni-form-item{
+	position: relative;
+	display: flex;
+	justify-content: space-between;
+	width: 409.72rpx;
+	height: 86.11rpx;
+	padding: 0 55.55rpx;
+	line-height: 86.11rpx;
+	margin-bottom: 27.77rpx;
+	font-size: 27.77rpx;
+	background-color: #f6f6f6;
+	border-radius: 86.11rpx;
+}
+.bind .uni-form-item .title{
+	min-width: 138.88rpx;
+}
+.bind .uni-input{
+	width: auto;
+	height: 86.11rpx;
+	font-size: 27.77rpx;
+}
+.select_img{
+	display: block;
+	width: 21.52rpx;
+	height: 13.88rpx;
+	margin-top: 36.8rpx;
+}
+.device_radio{
+	position: absolute;
+	bottom: -145.83rpx;
+	left: 0;
+	z-index: 99;
+}
+.device_radio uni-radio-group{
+	width: 520.83rpx;
+	height: 145.83rpx;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: 25rpx;
+	background-color: #FFFFFF;
+	border-radius: 13.88rpx;
+	box-shadow: 0 0 24rpx 2rpx rgba(0, 0, 0, 0.15);
+}
+.device_radio .radio {
+	width: 50%;
+	text-align: center;
+}
+.device_radio /deep/ uni-radio .uni-radio-input{
+	width: 27.77rpx;
+	height: 27.77rpx;
+	background: url(../../static/images/an-wx.png) no-repeat left top;
+	background-size: 100% 100%;
+	border: none;
+}
+.device_radio /deep/ uni-radio .uni-radio-input.uni-radio-input-checked{
+	background: none !important;
+	border: none !important;
+}
+.device_radio /deep/ uni-radio .uni-radio-input.uni-radio-input-checked:before{
+	content: "";
+	width: 27.77rpx;
+	height: 27.77rpx;
+	background: url(../../static/images/an-xz.png) no-repeat left top;
+	background-size: 100% 100%;
+	transform: translate(-50%,-50%) scale(1);
+}
 </style>
diff --git a/static/images/bind-select.png b/static/images/bind-select.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f3d5f8074b0df7f76188bf177866965a27b7b0d
GIT binary patch
literal 1347
zcmbVMZA{c=94{j%kP#S?kvTJ(Dn?#<ZSR$KciirEo_KgWF5ba5rPn@i4P4u`y%!kS
zE@aLj2}@Yqk`bdZ`hkIFN;KO{bc_1I%t-d;GNOUOhB0R7VwR8%=bi(O?E~?{nzYZ`
z|M&a<p8rb+0?jX%6mKp@5TwMn(;b9k6?`iSH^6T~nEw+F&uN~B)*^LiDOLf9gO{QJ
z^~Kpv5CkmW^Tst`MUecY5Q=CK|89np;yN~Kqf5tSh(-{rJuS0b7tqis=oCa7cK^a9
z3>A1A7B=}wzw81rVP~%bT6&v9TyGag^O(I6wWb+J5C<BIrsLhB%A{@BGA{$?*=+(t
zmrb-T8@3`U;t!xMNdc%yXTmv>GNKk*N0}&N167aeNy<Qw27)r+l%64JhBBe64+gy{
zd<PSBdsltIl?{t&n#>SHDwWcu3_3~aBq*Au2~tn!^*FS^)gDn})3~T^%`v!v$|-`Z
z36h9r8QG|m&}<k~x^jiM?Dww`i|T5iV91CxD-)ECB;xVxy_T(2EeQUVv97fm>X88v
z1gex!IGB%)tvN7^-IE<<4WSxlk0QXNu-$HnOT>Yw`P?=Pp6GaiXDk31d5SjUQ9xR7
zKp8na8l`ER<N;0U0pK}`%<-&;_nO@Xr-gPpO|*xiJT8ZU@^}oSfu_6`v$?^U!}>&3
zV?_?+d<)R`D%SBtEaOrDt4T^olDczM5Qs^dq{bu}b-A)xx1c-1g2+oLwI-XUm0P=k
zA|wItRirq&9A`#YM}yvEqKyp(7AH9ihtnpb5pUo+jIg%!4N<e1r$`E5t9btZ#*cua
zh-|U^r+9K(up+b5wN`+OwPpe$>>vfU${2omH-hAGKDQ&3p1N|_)^z!$Ee9trP3-^j
zo3{$=nH|5E9O-M_a@8Trn;ey+gCi}8q*mc5oQ;+hRNmWmbM)}u*V{hrZ<|%+1HoZ)
zc;uIvyC+kRZ#{hR<ED*$)8V1H@w$`A_Q=)geQfE_M%(18bF+o-hV=e7=Z|gc>mJpn
z&VSe$9DYC6Q(fKT`C6^HrnX%yy;C$eiPoLI_qTH9=^u**i1ueT_ue^#Bpxo>uhd`c
zFIc>}{{+1&Q+vCjB3eHEmG%3P{BN12%-N#A!o=bW+kc)&1g6Fc1LT2ojRRHehEIOm
zR37qYthej?9<_{H^m+FkACxC6^Q>P~FW!A+=_&5PvwP7a3)?e|kH>89HO>E2ldK&U
z$I52j5x;XT<;^{~bt-Ut+?#Pd@}4cTds@TC#e>L&`M2%kKU^QItxEXMEa8?JWBY4I
z4+)>0YrVef#=`Sjo!oxoROv@#vE}@pUymaB$lTDrp+7$VEBl*7e4b|aX=i)?Ke>L{
Axc~qF

literal 0
HcmV?d00001