Selaa lähdekoodia

1.增加选择身份界面
2.增加登录界面(身份选择教师不显示注册)

FailedToRead 3 vuotta sitten
vanhempi
commit
c6a4f7137e

+ 13 - 12
miniprogram/app.json

@@ -1,14 +1,15 @@
 {
-  "pages": [
-    "pages/index/index",
-    "pages/logs/logs"
-  ],
-  "window": {
-    "backgroundTextStyle": "light",
-    "navigationBarBackgroundColor": "#fff",
-    "navigationBarTitleText": "Weixin",
-    "navigationBarTextStyle": "black"
-  },
-  "style": "v2",
-  "sitemapLocation": "sitemap.json"
+    "pages": [
+        "pages/index/index",
+        "pages/login/login",
+        "pages/logs/logs"
+    ],
+    "window": {
+        "backgroundTextStyle": "light",
+        "navigationBarBackgroundColor": "#fff",
+        "navigationBarTitleText": "Weixin",
+        "navigationBarTextStyle": "black"
+    },
+    "style": "v2",
+    "sitemapLocation": "sitemap.json"
 }

+ 5 - 7
miniprogram/app.wxss

@@ -1,10 +1,8 @@
 /**app.wxss**/
 .container {
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-  padding: 200rpx 0;
-  box-sizing: border-box;
-} 
+  width: 100%;
+  position: absolute;
+  min-height: 100%;
+
+}

+ 4 - 0
miniprogram/component/dropDownSelection/dropDownSelection.json

@@ -0,0 +1,4 @@
+{
+    "component": true,
+    "usingComponents": {}
+}

+ 23 - 0
miniprogram/component/dropDownSelection/dropDownSelection.ts

@@ -0,0 +1,23 @@
+// component/dropDownSelection.ts
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+
+    }
+})

+ 2 - 0
miniprogram/component/dropDownSelection/dropDownSelection.wxml

@@ -0,0 +1,2 @@
+<!--component/dropDownSelection.wxml-->
+<text>component/dropDownSelection.wxml</text>

+ 1 - 0
miniprogram/component/dropDownSelection/dropDownSelection.wxss

@@ -0,0 +1 @@
+/* component/dropDownSelection.wxss */

BIN
miniprogram/image/index/installer.png


BIN
miniprogram/image/index/it.png


BIN
miniprogram/image/index/repairman.png


BIN
miniprogram/image/index/teacher.png


+ 41 - 47
miniprogram/pages/index/index.ts

@@ -1,49 +1,43 @@
-// index.ts
-// 获取应用实例
-const app = getApp<IAppOption>()
-
+// pages/index/index.ts
 Page({
-  data: {
-    motto: 'Hello World',
-    userInfo: {},
-    hasUserInfo: false,
-    canIUse: wx.canIUse('button.open-type.getUserInfo'),
-    canIUseGetUserProfile: false,
-    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false
-  },
-  // 事件处理函数
-  bindViewTap() {
-    wx.navigateTo({
-      url: '../logs/logs',
-    })
-  },
-  onLoad() {
-    // @ts-ignore
-    if (wx.getUserProfile) {
-      this.setData({
-        canIUseGetUserProfile: true
-      })
-    }
-  },
-  getUserProfile() {
-    // 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认,开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
-    wx.getUserProfile({
-      desc: '展示用户信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
-      success: (res) => {
-        console.log(res)
-        this.setData({
-          userInfo: res.userInfo,
-          hasUserInfo: true
+
+    /**
+     * 页面的初始数据
+     */
+    data: {
+
+    },
+
+    /**
+     * 生命周期函数--监听页面加载
+     */
+    onLoad() {
+
+    },
+    clickItem: function (event: any) {
+        console.log(event.target.id)
+        switch (Number(event.target.id)) {
+            case 0:
+                console.log("click teacher")
+                break;
+            case 1:
+                console.log("click installer")
+                break;
+            case 2:
+                console.log("click repairman")
+                break;
+            case 3:
+                console.log("click it")
+                break;
+        }
+        this.toNextPage(Number(event.target.id))
+    },
+    toNextPage: function (type: any) {
+        wx.navigateTo({
+            url: '../login/login?id=' + type,
         })
-      }
-    })
-  },
-  getUserInfo(e: any) {
-    // 不推荐使用getUserInfo获取用户信息,预计自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息
-    console.log(e)
-    this.setData({
-      userInfo: e.detail.userInfo,
-      hasUserInfo: true
-    })
-  }
-})
+
+
+
+    }
+})

+ 28 - 22
miniprogram/pages/index/index.wxml

@@ -1,23 +1,29 @@
-<!--index.wxml-->
+<!--pages/index/index.wxml-->
+
 <view class="container">
-  <view class="userinfo">
-    <block wx:if="{{canIUseOpenData}}">
-      <view class="userinfo-avatar" bindtap="bindViewTap">
-        <open-data type="userAvatarUrl"></open-data>
-      </view>
-      <open-data type="userNickName"></open-data>
-    </block>
-    <block wx:elif="{{!hasUserInfo}}">
-      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
-      <button wx:elif="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
-      <view wx:else> 请使用1.4.4及以上版本基础库 </view>
-    </block>
-    <block wx:else>
-      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
-      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
-    </block>
-  </view>
-  <view class="usermotto">
-    <text class="user-motto">{{motto}}</text>
-  </view>
-</view>
+    <view class="page">
+        <text style="margin-top: 200rpx;">请选择身份</text>
+        <view class="layout">
+            <view class="item_bg">
+                <view class="teacher" id="0" bindtap="clickItem">
+                    <image id="0" class="item_icon" src="../../image/index/teacher.png"></image>
+                    <text id="0" class="item_text">教师</text>
+                </view>
+                <view class="installer" id="1" bindtap="clickItem">
+                    <image id="1" class="item_icon" src="../../image/index/installer.png"></image>
+                    <text id="1" class="item_text">安装员</text>
+                </view>
+            </view>
+            <view class="item_bg">
+                <view class="repairman" id="2" bindtap="clickItem">
+                    <image id="2" class="item_icon" src="../../image/index/repairman.png"></image>
+                    <text id="2" class="item_text">维修员</text>
+                </view>
+                <view class="it" id="3" bindtap="clickItem">
+                    <image id="3" class="item_icon" src="../../image/index/it.png"></image>
+                    <text id="3" class="item_text">IT管理员</text>
+                </view>
+            </view>
+        </view>
+    </view>
+</view>

+ 82 - 14
miniprogram/pages/index/index.wxss

@@ -1,19 +1,87 @@
-/**index.wxss**/
-.userinfo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #aaa;
+/* pages/index/index.wxss */
+
+
+.page {
+    height: 100%;
+    display: flex;
+    justify-content: start;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+.layout {
+    height: 560rpx;
+    margin-top: 60rpx;
+    width: 75%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 75%;
+    max-height: 560rpx;
+
+}
+
+.item_bg {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: row;
+}
+
+
+.teacher {
+    width: 250rpx;
+    height: 250rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(136deg, #fe9f68 2%, #ff8f74);
+    border-radius: 10px;
+}
+
+.installer {
+    width: 250rpx;
+    height: 250rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(135deg, #04e6bc, #1be5bc 38%);
+    border-radius: 10px;
+}
+
+.repairman {
+    width: 250rpx;
+    height: 250rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(170deg, #a6d5ff 0%, #6dabfe 100%);
+    border-radius: 10px;
+}
+
+.it {
+    width: 250rpx;
+    height: 250rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(171deg, #cdbdff 0%, #9e88ff 100%);
+    border-radius: 10px;
 }
 
-.userinfo-avatar {
-  overflow: hidden;
-  width: 128rpx;
-  height: 128rpx;
-  margin: 20rpx;
-  border-radius: 50%;
+.item_icon {
+    height: 76rpx;
+    width: 76rpx
 }
 
-.usermotto {
-  margin-top: 200px;
+.item_text {
+    margin-top: 30rpx;
+    color: white;
+    font-size: 36rpx;
 }

+ 3 - 0
miniprogram/pages/login/login.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

+ 46 - 0
miniprogram/pages/login/login.ts

@@ -0,0 +1,46 @@
+// index.ts
+// 获取应用实例
+const app = getApp<IAppOption>()
+
+Page({
+  data: {
+    login_check_tab: 0,
+    loginType: 0
+  },
+
+  onLoad(opention: any) {
+    console.log("opention:" + opention.id)
+    this.setData({
+      login_check_tab: 0,
+      loginType: opention.id
+    })
+
+  },
+
+
+  // 点击短信验证码登录
+  clickPhoneNumLogin: function (event: any) {
+    console.log("短信验证码登录")
+    console.log(event)
+    this.setData({
+      login_check_tab: 0
+    })
+
+  },
+
+  // 点击账号密码登录
+  clicAccountPasswordLogin: function (event: any) {
+    console.log("账号密码登录")
+    console.log(event)
+    this.setData({
+      login_check_tab: 1
+    })
+  },
+
+  // 获取验证码
+  clickGetVCode: function (event: any) {
+    console.log("账号密码登录")
+  }
+
+
+})

+ 70 - 0
miniprogram/pages/login/login.wxml

@@ -0,0 +1,70 @@
+<view class="container">
+  <!-- <view class="icon_layout">
+    <image class="icon" src="https://mmbiz.qpic.cn/mmbiz_png/icTdbqWNOwNQ0ia79enzYJBsZ3CIkLQGe39qeOxbpT9oM9KaCthzBa0PF75xzBGjZQGlM69TDggxpNX7ACibCjjtw/0?wx_fmt=png&t=1614824466" />
+  </view> -->
+
+  <!-- 短信验证码/账号密码登录的两个按钮-->
+  <view class="login_check">
+    <view style="margin-left: 66rpx;" bindtap="clickPhoneNumLogin">
+      <text wx:if="{{login_check_tab==0}}" class="login_check_true">短信验证码登录</text>
+      <text wx:else class="login_check_false">短信验证码登录</text>
+      <block wx:if="{{login_check_tab==0}}">
+        <view style="width: 225rpx; background-color: #5090FE; height: 1rpx;"> </view>
+      </block>
+    </view>
+    <view style="margin-right: 66rpx;" bindtap="clicAccountPasswordLogin">
+      <text wx:if="{{login_check_tab==1}}" class="login_check_true">账号密码登录</text>
+      <text wx:else class="login_check_false">账号密码登录</text>
+      <block wx:if="{{login_check_tab==1}}">
+        <view style="width: 192rpx; background-color: #5090FE; height: 1rpx;"> </view>
+      </block>
+    </view>
+  </view>
+  <!-- 短信验证码/账号密码登录的两个按钮 end-->
+
+  <!-- 短信验证码登录框等 -->
+  <view wx:if="{{login_check_tab==0}}" class="phonenumber_login_layout">
+    <!--输入手机号的iput-->
+    <view class="phonenum_login_layout_input_bg">
+      <image class="phonenum_login_layout_input_icon" src="https://mmbiz.qpic.cn/mmbiz_png/icTdbqWNOwNQ0ia79enzYJBsZ3CIkLQGe39qeOxbpT9oM9KaCthzBa0PF75xzBGjZQGlM69TDggxpNX7ACibCjjtw/0?wx_fmt=png&t=1614824466"></image>
+      <input class="phonenum_login_layout_input" maxlength="11" type="number" placeholder="输入您的手机号" />
+    </view>
+    <!--输入手机号的iput end-->
+    <!--输入验证码的iput-->
+    <view class="phonenum_login_layout_input_bg" style="margin-top: 48rpx;">
+      <image class="phonenum_login_layout_input_icon" src="https://mmbiz.qpic.cn/mmbiz_png/icTdbqWNOwNQ0ia79enzYJBsZ3CIkLQGe39qeOxbpT9oM9KaCthzBa0PF75xzBGjZQGlM69TDggxpNX7ACibCjjtw/0?wx_fmt=png&t=1614824466"></image>
+      <input class="phonenum_login_layout_input" maxlength="6" type="number" placeholder="输入验证码" />
+      <text style="color: #6275FE; font-size: 30rpx; margin-right: 19rpx;" bindtap="clickGetVCode">获取验证码</text>
+    </view>
+    <!--输入验证码的iput end-->
+
+  </view>
+  <!-- 短信验证码登录框等  end-->
+  <!--账号密码登录框-->
+  <view wx:elif="{{login_check_tab==1}}" class="phonenumber_login_layout">
+    <!--输入手机号的iput-->
+    <view class="phonenum_login_layout_input_bg">
+      <image class="phonenum_login_layout_input_icon" src="https://mmbiz.qpic.cn/mmbiz_png/icTdbqWNOwNQ0ia79enzYJBsZ3CIkLQGe39qeOxbpT9oM9KaCthzBa0PF75xzBGjZQGlM69TDggxpNX7ACibCjjtw/0?wx_fmt=png&t=1614824466"></image>
+      <input class="phonenum_login_layout_input" maxlength="11" type="number" placeholder="输入您的手机号" />
+    </view>
+    <!--输入手机号的iput end-->
+    <!-- 密码的input-->
+    <view class="phonenum_login_layout_input_bg" style="margin-top: 48rpx;">
+      <image class="phonenum_login_layout_input_icon" src="https://mmbiz.qpic.cn/mmbiz_png/icTdbqWNOwNQ0ia79enzYJBsZ3CIkLQGe39qeOxbpT9oM9KaCthzBa0PF75xzBGjZQGlM69TDggxpNX7ACibCjjtw/0?wx_fmt=png&t=1614824466"></image>
+      <input class="phonenum_login_layout_input" maxlength="11" type="number" placeholder="输入密码" />
+      <image class="phonenum_login_layout_input_icon" style="margin-right: 22rpx;" src=" https://mmbiz.qpic.cn/mmbiz_png/icTdbqWNOwNQ0ia79enzYJBsZ3CIkLQGe39qeOxbpT9oM9KaCthzBa0PF75xzBGjZQGlM69TDggxpNX7ACibCjjtw/0?wx_fmt=png&t=1614824466"></image>
+    </view>
+    <!-- 密码的input end-->
+    <text style="color: #7F7F7F; margin-left: 500rpx; font-size: 30rpx;margin-top: 18rpx;">忘记密码</text>
+  </view>
+  <!--账号密码登录框 end-->
+  <!-- 按钮-->
+  <view>
+    <view class="login_btn_layout">
+      <button class="login_btn" style="width: 100%;">登 录</button>
+      <text wx:if="{{loginType==0}}" style="margin-top: 21rpx;">注册</text>
+    </view>
+
+  </view>
+
+</view>

+ 92 - 0
miniprogram/pages/login/login.wxss

@@ -0,0 +1,92 @@
+/**index.wxss**/
+
+
+
+.icon_layout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: antiquewhite;
+  height: 383rpx;
+  width: 100%;
+}
+
+.icon {
+  width: 103rpx;
+  margin-top: 80rpx;
+  height: 199rpx;
+}
+
+.login_check {
+  margin-top: 200rpx;
+  flex-direction: row;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.login_check_true {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #5090FE;
+}
+
+.login_check_false {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #353535;
+}
+
+.phonenumber_login_layout {
+  margin-top: 60rpx;
+  height: 315rpx;
+  padding-top: 2rpx;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+
+.phonenum_login_layout_input_bg {
+  width: 618.06rpx;
+  height: 84rpx;
+  border: 2rpx solid #d4d4d4;
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  align-items: center;
+  border-radius: 9rpx;
+  justify-content: start;
+}
+
+.phonenum_login_layout_input_icon {
+  width: 27rpx;
+  height: 37rpx;
+  margin-left: 22rpx;
+}
+
+.phonenum_login_layout_input {
+  flex: 1;
+  width: 360rpx;
+  margin-left: 23rpx;
+  font-size: 30rpx;
+}
+
+
+.login_btn_layout {
+  margin-left: 66rpx;
+  margin-top: 265rpx;
+  display: flex;
+  width: 616rpx;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.login_btn {
+  background-color: #45abfe;
+  width: 100%;
+  height: 89rpx;
+  color: white;
+}

+ 50 - 50
project.config.json

@@ -1,53 +1,53 @@
 {
-  "description": "项目配置文件",
-  "packOptions": {
-    "ignore": []
-  },
-  "miniprogramRoot": "miniprogram/",
-  "compileType": "miniprogram",
-  "projectname": "wordPad-applet",
-  "setting": {
-    "urlCheck": true,
-    "es6": true,
-    "enhance": true,
-    "postcss": true,
-    "preloadBackgroundData": false,
-    "minified": true,
-    "newFeature": false,
-    "coverView": true,
-    "nodeModules": false,
-    "autoAudits": false,
-    "showShadowRootInWxmlPanel": true,
-    "scopeDataCheck": false,
-    "uglifyFileName": false,
-    "checkInvalidKey": true,
-    "checkSiteMap": true,
-    "uploadWithSourceMap": true,
-    "compileHotReLoad": true,
-    "lazyloadPlaceholderEnable": false,
-    "useMultiFrameRuntime": true,
-    "useApiHook": true,
-    "useApiHostProcess": true,
-    "babelSetting": {
-      "ignore": [],
-      "disablePlugins": [],
-      "outputPath": ""
+    "description": "项目配置文件",
+    "packOptions": {
+        "ignore": []
     },
-    "useIsolateContext": true,
-    "userConfirmedBundleSwitch": false,
-    "packNpmManually": false,
-    "packNpmRelationList": [],
-    "minifyWXSS": true,
-    "disableUseStrict": false,
-    "minifyWXML": true,
-    "showES6CompileOption": false,
-    "useCompilerPlugins": [
-      "typescript"
-    ],
-    "ignoreUploadUnusedFiles": true
-  },
-  "simulatorType": "wechat",
-  "simulatorPluginLibVersion": {},
-  "appid": "wx443a542b6dceb5b6",
-  "condition": {}
+    "miniprogramRoot": "miniprogram/",
+    "compileType": "miniprogram",
+    "projectname": "wordPad-applet",
+    "setting": {
+        "urlCheck": true,
+        "es6": true,
+        "enhance": true,
+        "postcss": true,
+        "preloadBackgroundData": false,
+        "minified": true,
+        "newFeature": false,
+        "coverView": true,
+        "nodeModules": false,
+        "autoAudits": false,
+        "showShadowRootInWxmlPanel": true,
+        "scopeDataCheck": false,
+        "uglifyFileName": false,
+        "checkInvalidKey": true,
+        "checkSiteMap": true,
+        "uploadWithSourceMap": true,
+        "compileHotReLoad": true,
+        "lazyloadPlaceholderEnable": false,
+        "useMultiFrameRuntime": true,
+        "useApiHook": true,
+        "useApiHostProcess": true,
+        "babelSetting": {
+            "ignore": [],
+            "disablePlugins": [],
+            "outputPath": ""
+        },
+        "useIsolateContext": true,
+        "userConfirmedBundleSwitch": false,
+        "packNpmManually": false,
+        "packNpmRelationList": [],
+        "minifyWXSS": true,
+        "disableUseStrict": false,
+        "minifyWXML": true,
+        "showES6CompileOption": false,
+        "useCompilerPlugins": [
+            "typescript"
+        ],
+        "ignoreUploadUnusedFiles": true
+    },
+    "simulatorType": "wechat",
+    "simulatorPluginLibVersion": {},
+    "appid": "wxed03d75c15bf10a0",
+    "condition": {}
 }