1.删除废物代码

miniprogram/app.wxss

@@ -4,5 +4,5 @@
   width: 100%;
   position: absolute;
   min-height: 100%;
+}
 
-}

miniprogram/component/dropDownSelection/dropDownSelection.ts

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

miniprogram/component/dropDownSelection/dropDownSelection.wxml

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

miniprogram/component/dropDownSelection/dropDownSelection.wxss

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

miniprogram/component/updatePassword/updatePassword.ts

@@ -0,0 +1,75 @@
+// component/updatePassword/updatePassword.ts
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        width: 671,
+        height: 713,
+        initScale: 0,
+        showAccPwd: true,
+        scaleAnim: 0
+    },
+    lifetimes: {
+        attached: function () {
+            // 在组件实例被从页面节点树添加时执行
+            //放大小动画（）
+            this.data.scaleAnim = setInterval(() => {
+                if (this.data.initScale < 0.9) {
+                    this.setData({
+                        initScale: this.data.initScale + 0.1
+                    })
+                } else {
+                    clearInterval(this.data.scaleAnim)
+                }
+                console.log("123123123")
+            }, 15);
+
+        },
+        detached: function () {
+            // 在组件实例被从页面节点树移除时执行
+
+        },
+    },
+
+
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+
+
+        //账号密码登录——---------------------------
+        showAccountPwd: function (event: any) {
+            if (this.data.showAccPwd) {
+                this.setData({
+                    showAccPwd: false
+                })
+            } else {
+                this.setData({
+                    showAccPwd: true
+                })
+            }
+
+            console.log("this.data.showAccPwd:" + this.data.showAccPwd)
+        },
+
+        hideSelf: function (event: any) {
+            //调用父组件方法移除自身
+            this.triggerEvent('showUpdatePwdLayout');
+        }
+
+
+    }
+
+
+
+})

miniprogram/component/updatePassword/updatePassword.wxml

@@ -0,0 +1,39 @@
+<!--component/updatePassword/updatePassword.wxml-->
+<view class="updatepassword_page">
+    <view class="updatepassword_window" style="width: {{width}}rpx;height: {{height}}rpx; scale: {{initScale}};">
+        <view class="updatepassword_window_top">
+            <text>找回密码</text>
+        </view>
+        <view class="updatepassword_input_layout">
+            <!--输入手机号的iput-->
+            <view class="phonenum_login_layout_input_bg" style="height: 77rpx;">
+                <image class="phonenum_login_layout_input_icon" src="../../image/login/phone_num_icon.png"></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: 41rpx; height: 77rpx;">
+                <image class="phonenum_login_layout_input_icon" src="../../image/login/phone_vcode_icon.png"></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-->
+            <!-- 密码的input-->
+            <view class="phonenum_login_layout_input_bg" style="margin-top: 41rpx; height: 77rpx;">
+                <image class="phonenum_login_layout_input_icon" src="../../image/login/account_pwd_icon.png"></image>
+                <input class="phonenum_login_layout_input" password="{{showAccPwd}}" maxlength="11" placeholder="输入密码" />
+                <view class="account_show_pwd_icon_layout" bindtap="showAccountPwd">
+                    <image class="account_show_pwd_icon" style="margin-right: 22rpx;" src="../../image/login/account_show_pwd_icon.png"></image>
+                </view>
+            </view>
+
+            <button class="login_btn" style="width: 618.06rpx; height: 83rpx; margin-top: 58rpx;">登 录</button>
+            <text style="margin-top: 21rpx;font-size: 30rpx;" bindtap="hideSelf">取消</text>
+            <!-- 密码的input end-->
+
+        </view>
+
+    </view>
+
+
+</view>

miniprogram/component/updatePassword/updatePassword.wxss

@@ -0,0 +1,38 @@
+/* component/updatePassword/updatePassword.wxss */
+@import "../../pages/login/login.wxss";
+
+.updatepassword_page {
+    height: 100%;
+    display: flex;
+    background-color: rgba(0, 0, 0, 0.74);
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+}
+
+.updatepassword_window {
+ 
+    background-color: white;
+    border-radius: 7rpx;
+}
+
+.updatepassword_window_top {
+    border-radius: 7px 7px 2px 2px;
+    background-color: #eeeeee;
+    width: 100%;
+    height: 90rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.updatepassword_input_layout {
+    display: flex;
+    margin-top: 80rpx;
+    flex-direction: column;
+    justify-content: start;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+}

miniprogram/pages/index/index.json

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

miniprogram/pages/index/index.wxml

@@ -2,6 +2,7 @@
 
 <view class="container">
     <view class="page">
+        <dropDownSelection></dropDownSelection>
         <text style="margin-top: 200rpx;">请选择身份</text>
         <view class="layout">
             <view class="item_bg">
@@ -25,5 +26,9 @@
                 </view>
             </view>
         </view>
+
     </view>
+
+
+
 </view>

miniprogram/pages/login/login.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "updatePassword": "../../component/updatePassword/updatePassword"
+  }
 }

miniprogram/pages/login/login.ts

@@ -5,7 +5,9 @@ const app = getApp<IAppOption>()
 Page({
   data: {
     login_check_tab: 0,
-    loginType: 0
+    loginType: 0,
+    showAccPwd: true,
+    showUpdatePassWordLayout: false
   },
 
   onLoad(opention: any) {
@@ -40,7 +42,39 @@ Page({
   // 获取验证码
   clickGetVCode: function (event: any) {
     console.log("账号密码登录")
-  }
+  },
+
+
+  //账号密码登录——---------------------------
+  showAccountPwd: function (event: any) {
+    if (this.data.showAccPwd) {
+      this.setData({
+        showAccPwd: false
+      })
+    } else {
+      this.setData({
+        showAccPwd: true
+      })
+    }
+    console.log("this.data.showAccPwd:" + this.data.showAccPwd)
+  },
+
 
+  //显示修改密码的框
+  showUpdatePwdLayout: function (event: any) {
+
+    if (this.data.showUpdatePassWordLayout) {
+      this.setData({
+        showUpdatePassWordLayout: false
+      })
+    } else {
+      this.setData({
+        showUpdatePassWordLayout: true
+      })
+
+    }
+
+
+  }
 
 })

miniprogram/pages/login/login.wxml

@@ -1,4 +1,5 @@
 <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> -->
@@ -26,13 +27,13 @@
   <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>
+      <image class="phonenum_login_layout_input_icon" src="../../image/login/phone_num_icon.png"></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>
+      <image class="phonenum_login_layout_input_icon" src="../../image/login/phone_vcode_icon.png"></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>
@@ -44,18 +45,20 @@
   <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>
+      <image class="phonenum_login_layout_input_icon" src="../../image/login/phone_num_icon.png"></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>
+      <image class="phonenum_login_layout_input_icon" src="../../image/login/account_pwd_icon.png"></image>
+      <input class="phonenum_login_layout_input" password="{{showAccPwd}}" maxlength="11" placeholder="输入密码" />
+      <view class="account_show_pwd_icon_layout" bindtap="showAccountPwd">
+        <image class="account_show_pwd_icon" style="margin-right: 22rpx;" src="../../image/login/account_show_pwd_icon.png"></image>
+      </view>
     </view>
     <!-- 密码的input end-->
-    <text style="color: #7F7F7F; margin-left: 500rpx; font-size: 30rpx;margin-top: 18rpx;">忘记密码</text>
+    <text style="color: #7F7F7F; margin-left: 500rpx; font-size: 30rpx;margin-top: 18rpx;" bindtap="showUpdatePwdLayout">忘记密码</text>
   </view>
   <!--账号密码登录框 end-->
   <!-- 按钮-->
@@ -64,7 +67,14 @@
       <button class="login_btn" style="width: 100%;">登 录</button>
       <text wx:if="{{loginType==0}}" style="margin-top: 21rpx;">注册</text>
     </view>
-
   </view>
 
+
+
+  <!--修改密码框-->
+  <updatePassword  wx:if="{{showUpdatePassWordLayout}}" class="updatepwd_layout" bind:showUpdatePwdLayout="showUpdatePwdLayout"></updatePassword>
+  <!--修改密码框 end-->
+
+
+
 </view>

miniprogram/pages/login/login.wxss

@@ -1,5 +1,13 @@
 /**index.wxss**/
 
+.page {
+  height: 100%;
+  display: flex;
+  justify-content: start;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
 
 
 .icon_layout {
@@ -74,6 +82,22 @@
 }
 
 
+.account_show_pwd_icon_layout {
+  height: 100%;
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-items: center;
+  padding-left: 10rpx;
+}
+
+.account_show_pwd_icon {
+
+  width: 39rpx;
+  height: 29rpx;
+}
+
+
 .login_btn_layout {
   margin-left: 66rpx;
   margin-top: 265rpx;
@@ -89,4 +113,13 @@
   width: 100%;
   height: 89rpx;
   color: white;
+}
+
+.updatepwd_layout {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  left: 0;
+  top: 0;
+  z-index: 20;
 }