登录界面

pages/index/index.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="container">
     <!-- 店铺页面组件 -->
-    <Page :items="items" />
+    <!-- <Page :items="items" /> -->
   </view>
 </template>
 

pages/login/index.vue

@@ -1,32 +1,68 @@
 <template>
-  <view v-if="isLoad" class="login">
+  <view class="login">
-    <MpWeixin v-if="isMpWeixinAuth" @success="onGetUserInfoSuccess" />
+	  <view class="titzone">
-    <Main v-else :isParty="isParty" :partyData="partyData" />
+		 <view class="title">你好，欢迎使用</view>
+		 <view class="subtitle">国家文化专网网络注册登录系统</view> 
+	  </view>
+	  
+	  <!-- 表单 -->
+	  <view class="login-form">
+		  <!-- 手机号 -->
+		  <view class="form-item">
+			  <view class="form-item--parts">
+			    <view class="gjcode">
+			      +86
+			    </view>
+			  </view>
+		    <input class="form-item--input" type="number" v-model="mobile" maxlength="11" placeholder="请输入手机号码" />
+		  </view>
+		  <!-- 密码 -->
+		  <view class="form-item">
+			  <input  class="form-item--input" type="password" v-model="vpass" placeholder="请输入密码"/>
+		  </view>
+		  
+		  <!-- 登录按钮 -->
+		  <view class="login-button" @click="handleLogin">
+		    <text>登录</text>
+		  </view>
+	  </view>
+	  <view class="tips">
+		登录即表明同意《用户协议》和《隐私政策》
+	  </view>
+	  
+	  <!-- 验证码登录 -->
+	  <view class="vfcode">验证码登录</view>
+	  
+	  <!-- logo -->
+	  <view class="vbottom">
+		  <view class="imagezone">
+			  <image mode="heightFix" style="height: 72rpx;" src="../../static/wjslogo.png"/>X
+			  <image mode="heightFix" style="height: 72rpx;" src="../../static/ccde.png"/>
+		  </view>
+		  <view class="txtzone">
+			  数据集成系统服务商：百链数据科技（深圳）有限公司
+		  </view>
+
+	  </view>
   </view>
 </template>
 
 <script>
-  import Main from './components/main'
+
-  import MpWeixin from './components/mp-weixin'
-  import SettingKeyEnum from '@/common/enum/setting/Key'
-  import SettingModel from '@/common/model/Setting'
 
   export default {
     components: {
-      Main,
+		// nothing
-      MpWeixin
     },
 
     data() {
       return {
         // 数据加载完成 [防止在微信小程序端onLoad和view渲染同步进行]
         isLoad: false,
-        // 是否显示微信小程序授权登录
+		// 手机号
-        isMpWeixinAuth: false,
+		mobile: '',
-        // 是否存在第三方用户信息
+		// 密码
-        isParty: false,
+		vpass:"",
-        // 第三方用户信息数据
-        partyData: {}
       }
     },
 
@@ -36,7 +72,7 @@
     async onLoad(options) {
       console.log('login onLoad')
       // 设置当前是否显示微信小程序授权登录
-      await this.setShowUserInfo()
+      // await this.setShowUserInfo()
       // 数据加载完成
       this.isLoad = true
       console.log('isLoad', true)
@@ -44,6 +80,14 @@
 
     methods: {
 		
+		// 点击登录
+		handleLogin() {
+		  const app = this
+		  if (!app.isLoading && app.formValidation(SUBMIT_LOGIN)) {
+		    app.submitLogin()
+		  }
+		},
+
       /**
        * 设置当前是否显示微信小程序授权登录
        *  - 条件1: 只有微信小程序才显示获取用户信息按钮
@@ -83,5 +127,116 @@
 </script>
 
 <style lang="scss" scoped>
+	.login{
+		position: relative;
+		min-height: 100vh;
+	}
+	.titzone{
+		padding: 3.2rem;
+		font-size: 32rpx;
 		
+		.title{
+			display: flex;
+			font-size: 40rpx;
+			font-weight: 600;
+			line-height: 1.4;
+		}
+		.subtitle{
+			line-height: 1.6;
+		}
+	}
+  // 输入框元素
+  .form-item {
+    display: flex;
+    padding: 18rpx;
+    border-bottom: 1rpx solid #f3f1f2;
+    margin-bottom: 30rpx;
+    height: 126rpx;
+
+    &--input {
+      font-size: 28rpx;
+      letter-spacing: 1rpx;
+      flex: 1;
+      height: 100%;
+	  background-color: #F8F8F8;
+    }
+
+    &--parts {
+      min-width: 100rpx;
+      height: 100%;
+    }
+	
+	.gjcode{
+		font-size: 36rpx;
+		width: 46rpx;
+		height: 100%;
+	}
+
+    // 图形验证码
+    .captcha {
+      height: 100%;
+
+      .image {
+        display: block;
+        width: 192rpx;
+        height: 100%;
+		line-height: 100%;
+      }
+    }
+  }
+  
+  // 登录按钮
+  .login-button {
+    width: 90%;
+	
+	margin-left: auto;
+	margin-right: auto;
+    height: 86rpx;
+    margin-top: 80rpx;
+    background: linear-gradient(to right, #034373, #034373); 
+    color: #fff;
+    
+    box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
+    letter-spacing: 5rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  //
+  .tips{
+	  padding:12rpx;
+	  color:#999;
+	  margin-left: 26rpx;
+  }
+  //vfcode
+  .vfcode{
+	  margin-left: 32rpx;
+  }
+  .vbottom{
+	  position: absolute;
+	  width: 100%;
+	  height: 72rpx;
+	  // margin-top: 272rpx;
+	  left: 12rpx;
+	  bottom: 12%;
+	  left: 2%;
+	
+	  .imagezone{
+		  display: flex;
+		  line-height: 72rpx;
+		  padding: 10rpx;
+		  
+		  img{
+			  margin-left: 32rpx;
+		  }
+	  }
+	  
+	  .txtzone{
+		  margin-top: 12rpx;
+		  font-size: 26rpx;
+		  color: #999;
+		  padding-left: 32rpx;
+	  }
+
+  }
 </style>