ln徐版本新UI

pages/login/user-login/index.vue

@@ -8,172 +8,89 @@
       :rules="rules"
       class="loginForm"
     >
-      <u-form-item prop="loginName">
-        <u--input
-          border="surround"
-          placeholder="账号"
-          shape="circle"
-          v-model="formData.loginName"
-          fontSize="30"
-        ></u--input>
-      </u-form-item>
-      <u-form-item prop="pwd">
-        <u--input
-          border="surround"
-          placeholder="密码"
-          type="password"
-          shape="circle"
-          v-model="formData.pwd"
-          fontSize="30"
-        ></u--input>
-      </u-form-item>
-      <view>
-        <checkbox-group @change="changeCheck">
-          <checkbox class="checkbox">
-            <view slot="label">
-              <view class="label">
-                阅读并同意
-                <view class="text_link" @tap="privatyShow = true"
-                  >《用户服务协议》和《隐私政策》</view
-                >
-              </view>
-            </view>
-          </checkbox>
-        </checkbox-group>
+      <!-- 账号密码输入框 -->
+      <view v-if="showAccountLogin">
+        <view class="input-group">
+          <u-form-item borderBottom>
+            <u-input
+              placeholder="请输入账号"
+              v-model="formData.loginName"
+              fontSize="30"
+              border="none"
+              :customStyle="{
+                padding: '10rpx 30rpx',
+                borderRadius: '16rpx',
+              }"
+            >
+              <template #prefix>
+                <image
+                  src="/static/user.png"
+                  style="width: 20px; height: 20px; margin-right: 8px"
+                />
+              </template>
+            </u-input>
+          </u-form-item>
+        </view>
+
+        <view class="input-group">
+          <u-form-item borderBottom>
+            <u-input
+              placeholder="请输入密码"
+              type="password"
+              v-model="formData.pwd"
+              fontSize="30"
+              border="bottom"
+              :customStyle="{
+                padding: '10rpx 30rpx',
+                borderRadius: '16rpx',
+              }"
+            >
+              <template #prefix>
+                <image
+                  src="/static/pwd.png"
+                  style="width: 20px; height: 20px; margin-right: 8px"
+                />
+              </template>
+            </u-input>
+          </u-form-item>
+        </view>
       </view>
 
-      <!-- <view v-if="showAgreement" class="index-privaty">
-          <van-checkbox checked-color="#4A47E0" value="{{ hasAgreement }}" bind:change="onCheckboxChanged"/>
-        </view> -->
       <view class="login-btn">
+        <!-- 微信一键登录按钮 -->
         <button
+          v-if="!showAccountLogin"
           open-type="getPhoneNumber"
           @getphonenumber="getPhoneNumber"
-          class="u-button u-reset-button u-button--success u-button--square u-button--normal wexin-but"
+          class="wexin-but"
         >
-          授权登录
+          微信一键登录
         </button>
+
+        <!-- 账号密码登录按钮 -->
         <u-button
+          v-if="showAccountLogin"
           @click="submit"
-          plain
-          color="#017043"
-          :hairline="false"
+          color="#327C4E"
           :loading="loading"
           :disabled="loading"
-          >{{ `登 录` }}</u-button
+          shape="circle"
+          size="large"
+          :customStyle="{
+            height: '78rpx',
+            fontSize: '32rpx',
+            fontWeight: '500',
+          }"
         >
+          {{ `登 录` }}
+        </u-button>
+
+        <!-- 切换登录方式文字 -->
+        <view class="switch-login" @tap="toggleLoginMethod">
+          {{ showAccountLogin ? "微信快捷登录" : "切换账号登录" }}
+        </view>
       </view>
     </u--form>
-    <u-popup :show="privatyShow" mode="bottom" @close="privatyShow = false">
-      <scroll-view scroll-y="true" style="height: 95vh">
-        <view class="content">
-          <text style="text-align: center">隐私协议</text>
-          <view>
-            <text>一、概述</text>
-            <text
-              >本小程序是由羚牛氢能科技（上海）有限公司开发运营的一款产品（以下简称我们），帮助解决用户开通搭建小程序公众号网站方面遇到的问题，可以达到快速上线的目的。我们深知个人信息对您而言的重要性，也感谢您对我们的信任。我们将通过本政策向您说明互助文档会如何收集、存储、保护、使用及对外提供您的信息，并说明您享有的权利，其中要点如下：</text
-            >
-            <view>
-              <text
-                >1.
-                为了便于您了解您在使用我们的服务时，我们需要收集的信息类型与用途，我们将结合具体服务向您逐一说明。</text
-              >
-            </view>
-            <view>
-              <text
-                >2.
-                为了向您提供服务所需，我们会按照合法、正当、必要的原则收集您的信息。</text
-              >
-            </view>
-            <view>
-              <text
-                >3.
-                如果为了向您提供服务而需要将您的信息共享至第三方，我们将评估该第三方收集信息的合法性、正当性、必要性。我们将要求第三方对您的信息采取保护措施并严格遵守相关法律法规与监管要求。另外，我们会按照法律法规及国家标准的要求以确认协议、具体场景下的文案确认、弹窗提示等形式征得您的同意或确认第三方已经征得您的同意。</text
-              >
-            </view>
-
-            <!-- 省略其他条款内容，以类似方式嵌入 -->
-            <view>
-              <text>二、我们如何收集信息：</text>
-              <text
-                >在您使用互助文档以下各项业务功能（以下简称“服务”）的过程中，我们需要收集您的一些信息，用以向您提供服务、提升我们的服务质量、保障您的账户和资金安全以及符合国家法律法规及监管规定：</text
-              >
-              <view>
-                <text
-                  >1.
-                  依据法律法规及监管规定进行实名制管理在您注册互助文档账户或使用互助文档服务时，您需提供手机号码或者第三方账号登陆信息作为账户登录名。</text
-                >
-              </view>
-              <view>
-                <text>2. 身份验证</text>
-                <view>
-                  <text>（1）登录验证</text>
-                  <text
-                    >为了让您更安全、便捷地登录互助文档，我们提供自动登陆服务，您也可以选择密码登录、短信验证码登录等其他方式；</text
-                  >
-                </view>
-                <view>
-                  <text>（2）重要操作行为验证</text>
-                  <text
-                    >为了保障您的账户安全，在您进行一些重要的账户操作时（例如：查看、收藏、下载应用内资料内容时），我们需要验证您的身份，为此您可能需向第三方安全服务提供商提交身份验证信息；如您不同意提供前述信息，您将无法完成特定操作，但不影响您使用我们提供的其他服务；</text
-                  >
-                </view>
-                <!-- 省略其他子条款内容，以类似方式嵌入 -->
-              </view>
-              <!-- 省略其他条款内容，以类似方式嵌入 -->
-              <view>
-                <text>3. 获取外部存储权限，获取设备ID, MAC地址</text>
-                <text
-                  >获取外部存储权限用于：记录登录同意的信息，下次登录不用重新选择。获取设备ID，MAC地址，设备ID用于记录用户的唯一性，MAC地址获取是用于确定用户是属于真实用户。</text
-                >
-                <text
-                  >本程序嵌入了百度插移动统计分析sdk，百度移动SDK隐私政策说明，具体隐私政策准则按百度移动SDK隐私为准</text
-                >
-              </view>
-              <view>
-                <text>4. 其他</text>
-                <text
-                  >请您理解，我们向您提供的服务是不断更新和发展的。如您选择使用了前述说明当中尚未涵盖的其他服务，基于该服务我们需要收集您的信息的，我们会通过页面提示、交互流程、协议约定的方式另行向您说明信息收集的范围与目的，并征得您的同意。我们会按照本政策以及相应的用户协议约定使用、存储、对外提供及保护您的信息；如您选择不提供前述信息，您可能无法使用某项或某部分服务，但不影响您使用我们提供的其他服务。此外，第三方主体可能会通过互助文档APP向您提供服务。当您进入第三方主体运营的服务页面时，请注意相关服务由第三方主体向您提供。涉及到第三方主体向您收集个人信息的，建议您仔细查看第三方主体的隐私政策或协议约定。</text
-                >
-              </view>
-            </view>
-            <view>
-              <text>三、我们如何存储和保护信息</text>
-              <view>
-                <text
-                  >1.
-                  我们在中华人民共和国境内收集和产生的个人信息将存储在中华人民共和国境内。如部分服务涉及跨境业务，我们需要向境外机构传输境内收集的相关个人信息的，我们会按照法律法规和相关监管部门的规定执行，向您说明个人信息出境的目的以及涉及的个人信息类型，征得您的同意，并通过签订协议、现场核查等有效措施，要求境外机构为所获得的您的个人信息保密。我们仅在本政策所述目的所必需期间和法律法规及监管规定的时限内保存您的个人信息。</text
-                >
-              </view>
-              <view>
-                <text
-                  >2.
-                  为了保障您的信息安全，我们在收集您的信息后，将采取各种合理必要的措施保护您的信息。例如，在技术开发环境当中，我们仅使用经过去标识化处理的信息进行统计分析；对外提供研究报告时，我们将对报告中所包含的信息进行去标识化处理。我们会将去标识化后的信息与可用于恢复识别个人的信息分开存储，确保在针对去标识化信息的后续处理中不重新识别个人。</text
-                >
-              </view>
-              <view>
-                <text
-                  >3.
-                  我们承诺我们将使信息安全保护达到业界领先的安全水平。为保障您的信息安全，我们致力于使用各种安全技术及配套的管理体系来尽量降低您的信息被泄露、毁损、误用、非授权访问、非授权披露和更改的风险。例如：通过网络安全层软件（SSL）进行加密传输、信息加密存储、严格限制数据中心的访问。传输和存储个人敏感信息时，我们将采用加密、权限控制、去标识化等安全措施。</text
-                >
-              </view>
-              <view>
-                <text
-                  >4.
-                  请您务必妥善保管好您的互助文档登录名及其他身份要素。您在使用互助文档服务时，我们会通过您的登录名及其他身份要素来识别您的身份。一旦您泄漏了前述信息，您可能会蒙受损失，并可能对您产生不利。如您发现互助文档登录名及/或其他身份要素可能或已经泄露时，请您立即和我们取得联系，以便我们及时采取相应措施以避免或降低相关损失。</text
-                >
-              </view>
-              <view>
-                <text
-                  >5.
-                  在您终止使用互助文档服务后，我们会停止对您的信息的收集和使用，法律法规或监管部门另有规定的除外。如我们停止运营，我们将及时停止收集您个人信息的活动，将停止运营的通知以逐一送达或公告的形式通知您，并对所持有的您的个人信息进行删除或匿名化处理。</text
-                >
-              </view>
-            </view>
-          </view>
-        </view>
-      </scroll-view>
-    </u-popup>
   </view>
 </template>
 
@@ -182,13 +99,12 @@ import { setToken, setUser } from "@/utils/auth.js";
 import en from "@/utils/key.js";
 export default {
   options: {
-    styleIsolation: "shared", // 解除样式隔离
+    styleIsolation: "shared",
   },
   data() {
     return {
       loading: false,
-      privatyShow: false,
-      showAgreement: false,
+      showAccountLogin: false, // 默认显示微信登录
       formData: {
         loginName: "",
         pwd: "",
@@ -212,17 +128,12 @@ export default {
     };
   },
   methods: {
-    changeCheck(e) {
-      if (e.detail.value.length > 0) {
-        this.showAgreement = true;
-      } else {
-        this.showAgreement = false;
-      }
+    // 切换登录方式
+    toggleLoginMethod() {
+      this.showAccountLogin = !this.showAccountLogin;
     },
     getPhoneNumber(data) {
-      // 获取手机号
-      //debugger;
-      if (!this.showAgreement) {
+      if (!this.$parent.showAgreement) {
         uni.showToast({
           title: "请先勾选用户协议",
           icon: "none",
@@ -235,8 +146,6 @@ export default {
         this.loading = true;
         wx.login({
           success: function (resp) {
-            console.log(resp);
-            //var userInfo = res.userInfo;
             _this.$api.login
               .loginByPhoneForDriver({
                 phoneCode: data.detail.code,
@@ -263,7 +172,6 @@ export default {
       await this.$api.login
         .getUserMenu()
         .then((res) => {
-          console.log(res);
           this.$store.dispatch("setResources", res);
         })
         .catch((err) => {
@@ -271,7 +179,7 @@ export default {
         });
     },
     submit() {
-      if (!this.showAgreement) {
+      if (!this.$parent.showAgreement) {
         uni.showToast({
           title: "请先勾选用户协议",
           icon: "none",
@@ -285,8 +193,6 @@ export default {
         const _this = this;
         wx.login({
           success: function (resp) {
-            console.log(resp);
-            //var userInfo = res.userInfo;
             _this.$api.login
               .loginUser({
                 loginName: _this.formData.loginName,
@@ -300,7 +206,7 @@ export default {
                 _this.getUserMenu();
                 setTimeout(() => {
                   uni.switchTab({
-                    url: "/pages/index/index",
+                    url: "/pages/map/index",
                   });
                 }, 500);
               })
@@ -314,7 +220,6 @@ export default {
   },
   onReady() {
     try {
-      //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
       this.$refs.uForm.setRules(this.rules);
     } catch (e) {}
   },
@@ -322,51 +227,45 @@ export default {
 </script>
 
 <style lang="less" scoped>
-/deep/ .u-input--circle {
-  background-color: #f5f6fa !important;
-  padding-left: 20px !important;
-}
-/deep/ .u-button {
-  border: none !important;
-  color: #017043;
-  margin-top: 10rpx;
-  width: auto;
-}
-.content {
-  padding: 10px;
-}
-.checkbox {
-  display: flex;
-  font-size: 28rpx;
-  .label {
-    display: flex;
-    padding-top: 5rpx;
-    flex-wrap: wrap;
-  }
-  .text_link {
-    color: #4a47e0;
-  }
+.loginForm {
+  width: 100%;
 }
 
-/deep/ .wx-checkbox-input {
-  width: 36rpx !important;
-  height: 36rpx !important;
+.input-group {
+  margin-bottom: 30rpx;
 }
+
 .login-btn {
+  margin-top: 40rpx;
+}
+
+.wexin-but {
+  width: 100%;
+  height: 78rpx;
+  //   background: linear-gradient(135deg, #2890e5 0%, #667eea 100%);
+  color: white;
+  font-size: 32rpx;
+  //border-radius: 48rpx;
+  //border: none;
+  font-weight: 500;
+  //box-shadow: 0 8rpx 24rpx rgba(40, 144, 229, 0.4);
   display: flex;
-  flex-direction: column;
+  align-items: center;
   justify-content: center;
+  background: #327c4e;
+  border-radius: 198rpx 198rpx 198rpx 198rpx;
+  border: 2rpx solid rgba(255, 255, 255, 0.2);
+}
+
+.switch-login {
+  margin-top: 30rpx;
   text-align: center;
-  padding: 0 80rpx;
-  .wexin-but {
-    // width: 80%;
-    margin-top: 40rpx;
-    padding: 0rpx 122rpx;
-    border-radius: 50rpx;
-    box-sizing: border-box;
-    background-color: #017043;
-    color: white;
-    font-size: 38rpx;
-  }
+  font-size: 28rpx;
+  color: #327c4e;
+  text-decoration: underline;
+}
+
+/deep/ .u-form-item {
+  margin-bottom: 0;
 }
 </style>