上传文件至 ''

b.js

@@ -0,0 +1,176 @@
+Page({
+  data: {
+    isLogin: false, // 登录状态
+    isHidden: true, // 弹窗状态
+    avatarUrl: '', // 用户头像
+    nickName: '', // 用户昵称
+    username: '', // 用户名（用户名密码登录）
+    password: '', // 密码（用户名密码登录）
+    errorMessage: '', // 错误信息
+  },
+
+  // 获取用户头像
+  getAvatar(e) {
+    const avatarUrl = e.detail.avatarUrl; // 从事件中获取头像URL
+
+    if (avatarUrl) {
+      this.setData({
+        avatarUrl: avatarUrl
+      });
+
+      // 授权登录后，自动设置默认密码到缓存
+      wx.setStorageSync('password', '123');
+
+      // 创建userInfo对象，保存头像和昵称到缓存
+      let userInfo = {
+        avatarUrl: avatarUrl,
+        nickName: this.data.nickName
+      };
+      wx.setStorageSync('userinfo', userInfo); // 保存到缓存
+    } else {
+      wx.showToast({
+        title: '头像获取失败',
+        icon: 'error',
+        duration: 2000
+      });
+    }
+  },
+
+  // 获取用户昵称
+  getName(e) {
+    const nickName = e.detail.value; // 获取昵称
+    this.setData({
+      nickName: nickName
+    });
+
+    // 在授权登录时，将昵称更新到缓存的 userInfo 对象中
+    let userInfo = wx.getStorageSync('userinfo') || {};
+    userInfo.nickName = nickName;
+    wx.setStorageSync('userinfo', userInfo); // 更新缓存
+  },
+
+  // 显示登录弹窗
+  gologin() {
+    this.setData({
+      isHidden: false
+    });
+  },
+
+  // 取消登录弹窗
+  potNo() {
+    this.setData({
+      isHidden: true
+    });
+  },
+
+  // 确认登录弹窗
+  popYes() {
+    const { avatarUrl, nickName } = this.data;
+    if (!avatarUrl || !nickName) {
+      wx.showToast({
+        icon: 'error',
+        title: '请获取头像和昵称',
+      });
+      return;
+    }
+
+    this.setData({
+      isLogin: true,
+      isHidden: true,
+    });
+
+    // 登录成功后跳转到指定页面
+    wx.switchTab({
+      url: '/pages/Calculate/Calculate',
+    });
+  },
+
+  // 用户名密码登录
+  inputUsername(e) {
+    this.setData({
+      username: e.detail.value
+    });
+  },
+
+  inputPassword(e) {
+    this.setData({
+      password: e.detail.value
+    });
+  },
+
+  // 登录验证
+  login() {
+    const { username, password } = this.data;
+
+    if (!username || !password) {
+      this.setData({
+        errorMessage: '用户名和密码不能为空'
+      });
+      return;
+    }
+
+    wx.showLoading({
+      title: '登录中...'
+    });
+
+    setTimeout(() => {
+      wx.hideLoading();
+
+      // 假设用户名和密码为123时登录成功
+      if (username === '123' && password === '123') {
+        wx.showToast({
+          title: '登录成功',
+          icon: 'success',
+          duration: 2000
+        });
+        this.setData({
+          isLogin: true,
+          errorMessage: '',
+        });
+
+        // 登录成功后跳转到指定页面
+        wx.switchTab({
+          url: '/pages/Calculate/Calculate',
+        });
+      } else {
+        this.setData({
+          errorMessage: '用户名或密码错误'
+        });
+        wx.showToast({
+          title: '用户名或密码错误',
+          icon: 'none',
+          duration: 2000
+        });
+      }
+    }, 1500);
+  },
+
+  // 页面加载时，检查是否有缓存的密码
+  onLoad() {
+    const storedPassword = wx.getStorageSync('password');
+    const storedUserInfo = wx.getStorageSync('userinfo');
+
+    // 如果有缓存的密码，则自动填充
+    if (storedPassword) {
+      this.setData({
+        password: storedPassword // 自动填充缓存的密码
+      });
+    }
+
+    // 如果有缓存的用户信息，自动填充头像和昵称
+    if (storedUserInfo) {
+      this.setData({
+        avatarUrl: storedUserInfo.avatarUrl || '/assets/taddar/授权管理.png', // 默认头像
+        nickName: storedUserInfo.nickName || '未登录', // 默认昵称
+        isLogin: true, // 设置已登录状态
+      });
+    }
+
+    // 如果没有设置头像，使用默认头像
+    if (!this.data.avatarUrl) {
+      this.setData({
+        avatarUrl: '/assets/taddar/授权管理.png' // 默认头像
+      });
+    }
+  }
+});

b.json

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

b.wxml

@@ -0,0 +1,37 @@
+<view class="container">
+   <!-- 用户名密码登录 -->
+   <view >
+    <input class="input" bindinput="inputUsername" placeholder="请输入用户名" />
+    <input class="input" bindinput="inputPassword" placeholder="请输入密码" type="password" />
+    <button class="gologin" bindtap="login">登录</button>
+    <text class="error">{{errorMessage}}</text>
+  </view>
+  <view class="container">
+<button bindtap="gologin">微信登录</button>
+</view>
+
+  <!-- 登录弹窗 -->
+  <view class="pop_root" hidden="{{isHidden}}">
+    <view class="pop_content">
+      <view class="pot_tip">授权登录弹窗</view>
+      
+      <!-- 获取头像 -->
+      <button class="pop_avatar" open-type="chooseAvatar" bindchooseavatar="getAvatar">
+        <image class="pop_img" wx:if="{{avatarUrl}}" src="{{avatarUrl}}" />
+        <view wx:else>获取头像</view>
+      </button>
+      
+      <!-- 获取昵称 -->
+      <input 
+    class="pop_name" 
+    type="nickname" 
+    bindblur="getName"
+    placeholder="获取昵称"/>
+      
+      <view class="pop_bot">
+        <view class="btn" bind:tap="potNo">取消</view>
+        <view class="btn1" bind:tap="popYes">确定</view>
+      </view>
+    </view>
+  </view>
+</view>

b.wxss

@@ -0,0 +1,177 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 20rpx 40rpx;
+  height: 50vh; /* 使容器占据整个屏幕高度 */
+}
+
+.input {
+  width: 100%;
+  height: 80rpx;
+  margin-bottom: 20rpx;
+  padding: 0 20rpx;
+  border: 1px solid #ddd;
+  border-radius: var(--border-radius, 10rpx);
+  box-sizing: border-box;
+}
+
+.btn {
+  width: 100%;
+  height: 80rpx;
+  background-color: var(--primary-color, #1aad19);
+  color: #fff;
+  border: none;
+  border-radius: var(--border-radius, 10rpx);
+  text-align: center;
+  line-height: 45rpx;
+  font-size: 36rpx;
+  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);  /* 添加阴影 */
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;  /* 背景颜色和阴影过渡效果 */
+}
+
+.btn:active {
+  background-color: var(--active-color, #128c13);
+  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2);  /* 按钮点击时阴影变化 */
+}
+
+.btn:hover {
+  background-color: var(--hover-color, #16b818);
+  cursor: pointer;  /* 鼠标悬浮时显示手型 */
+}
+
+.error {
+  color: red;
+  margin-top: 10rpx;
+  animation: fadeIn 0.5s ease;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.avatar {
+  width: 150rpx;
+  height: 150rpx;
+  border-radius: 50%;
+  margin-top: 20rpx;
+  object-fit: cover;
+}
+
+@media screen and (max-width: 375px) {
+  .container {
+    padding: 100rpx 20rpx;
+  }
+  .btn {
+    font-size: 28rpx;
+    height: 60rpx;
+    line-height: 60rpx;
+  }
+  .input {
+    height: 60rpx;
+  }
+}
+
+/* pages/demo/demo.wxss */
+.root {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.touxiang {
+  width: 300rpx;
+  height: 300rpx;
+  border-radius: 50%;
+  margin-top: 30rpx;
+}
+
+.name {
+  margin-top: 30rpx;
+}
+
+/* 弹窗 */
+.pop_root {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgb(0, 0, 0, 0.6);
+  z-index: 1000;
+}
+
+.pop_content {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: 30rpx 30rpx 0 0;
+}
+
+.pot_tip {
+  font-size: 48rpx;
+  margin-top: 30rpx;
+}
+
+.pop_avatar {
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 50%;
+  background: gainsboro;
+  font-size: 35rpx;
+  display: flex;
+  flex-direction: center;
+  align-items: center;
+  margin: 30rpx;
+  padding: 0;
+}
+
+.pop_img {
+  width: 100%;
+  height: 100%;
+}
+
+.pop_name {
+  width: 300rpx;
+  bottom: 1px solid gray;
+  border-radius: 25epx;
+  padding-left: 160rpx;
+  margin-bottom: 50rpx;
+}
+
+.pop_bot {
+  display: flex;
+  margin-bottom: 50rpx;
+
+}
+
+.btn {
+  width: 150rpx;
+  border: 1px solid gray;
+  border-radius: 20rpx;
+  text-align: center;
+  background: red;
+  color: white;
+}
+
+.btn1 {
+  width: 150rpx;
+  border: 1px solid gray;
+  border-radius: 20rpx;
+  text-align: center;
+  background: green;
+  color: white;
+  margin-left: 90rpx;
+}