1.修改商品规格中可能出现的sku判断，优化选择商品规格上下滑动。2.优化登录页面样式。3.优化购物车样式

pages/passport/login.vue

@@ -1,113 +1,242 @@
 <template>
-  <view>
-    <!--  -->
-    <view v-if="codeLogin">
-      <!-- 背景 -->
-      <view class="login-ball bg-linear-gradient small"></view>
-
-      <view class="logo-cell">
-        <image class="logo" :src="config.logo" mode="aspectFit"></image>
-      </view>
-      <view class="title">{{config.name}}</view>
-
-      <!-- 验证码登录 -->
-      <codeLogin @open="open" :status="value" v-if="login && loginData.code" />
-      <!-- 账号密码登录 -->
-      <onClickLogin @open="open" :status="value" v-if="login && loginData.click" />
-      <view class="form"> </view>
-
-      <!-- 隐私政策 -->
-      <div class="privacy">
+  <div class="wrapper">
+    <u-navbar :is-back="showBack" :border-bottom="false"></u-navbar>
+    <div>
+      <div class="title">{{loginTitleWay[current].title}}</div>
+      <div :class="current == 1 ? 'desc-light':'desc'">{{loginTitleWay[current].desc}}<span
+          v-if="current == 1">{{mobile | secrecyMobile}}</span></div>
+    </div>
+    <!-- 手机号 -->
+    <div v-show="current==0">
+      <u-input :custom-style="inputStyle" :placeholder-style="placeholderStyle" placeholder="请输入手机号 (11位)"
+        class='mobile' focus v-model="mobile" type="number" maxlength="11" />
+      <div :class="!enabuleFetchCode ?'disable':'fetch'" @click="fetchCode" class=" btn">获取验证码</div>
+      <div class="flex">
         <u-checkbox-group :icon-size="24" width="45rpx">
-          <u-checkbox v-model="value" :active-color="lightColor"></u-checkbox>
-
+          <u-checkbox shape="circle" v-model="enabulePrivacy" active-color="#FF5E00"></u-checkbox>
         </u-checkbox-group>
-        同意<span @click="handleClick('user')">《用户协议》</span>和<span @click="handleClick('privacy')">《隐私政策》</span>
+        <div class="tips">未注册的手机号验证后将自动创建用户账号，登录即代表您已同意<span @click="navigateToPrivacy('privacy')">《使用条款及隐私协议》</span>
+        </div>
       </div>
-    </view>
-    <view v-if="wechatLogin">
-      <wechatH5Login />
-    </view>
-  </view>
+
+    </div>
+    <!-- 输入验证码 -->
+    <div v-show="current==1" class="box-code">
+      <verifyCode type="bottom" @confirm="submit" boxActiveColor="#D8D8D8" v-model="code" isFocus
+        boxNormalColor="#D8D8D8" cursorColor="#D8D8D8" />
+
+      <div class="fetch-btn">
+        <u-verification-code change-text="验证码已发送（x）" end-text="重新获取验证码" keep-running unique-key="page-login"
+          :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
+        <span @tap="fetchCode" :style="{color:codeColor}"> {{tips}}</span>
+      </div>
+    </div>
+
+    <!-- 循环出当前可使用的第三方登录模式 -->
+    <div class="flex login-list">
+      <div :style="{background:item.color}" class="login-item" v-for="(item,index) in loginList" :key="index">
+        <u-icon v-if="item.title!='APPLE'" color="#fff" size="42" :name="item.icon" @click="navigateLogin(item)">
+        </u-icon>
+        <u-image v-else src="/static/appleidButton@2x.png" :lazy-load="false" @click="navigateLogin(item)" width="80"
+          height="80" />
+      </div>
+    </div>
+    <myVerification v-if="codeFlag" @send="verification" class="verification" ref="verification" business="LOGIN" />
+
+  </div>
 </template>
+
 <script>
-import codeLogin from "./codeLogin";
-import onClickLogin from "./onClickLogin";
+import { openIdLogin ,loginCallback } from "@/api/connect.js";
+import api from "@/config/api.js";
+import { sendMobile, smsLogin } from "@/api/login";
+import myVerification from "@/components/verification/verification.vue"; //验证码模块
+import uuid from "@/utils/uuid.modified.js"; // uuid
+import verifyCode from "@/components/verify-code/verify-code";
 import { getUserInfo } from "@/api/members";
-import storage from "@/utils/storage.js";
-import { loginCallback } from "@/api/connect.js";
-import { webConnect } from "@/api/connect.js";
-import config from "@/config/config";
-import wechatH5Login from "./wechatH5Login.vue";
+import { whetherNavigate } from "@/utils/Foundation"; //登录跳转
+import storage from "@/utils/storage.js"; //缓存
+
 export default {
-  onShow() {
-    //#ifdef H5
-    let isWXBrowser = /micromessenger/i.test(navigator.userAgent);
-    if (isWXBrowser) {
-      webConnect("WECHAT").then((res) => {
-        let data = res.data;
-        if (data.success) {
-          window.location = data.result;
-        }
-      });
-    }
-    //#endif
-  },
+  components: { myVerification, verifyCode },
+
   data() {
     return {
-      config,
+      uuid,
+      flage: false, //是否验证码验证
+      codeFlag: true, //验证开关，用于是否展示验证码
+      tips: "",
+      current: 0,
+      codeColor: "#999", //按钮验证码颜色
       lightColor: this.$lightColor,
-      wechatLogin: false, //是否加载微信公众号登录
-      codeLogin: false, //是否加载正常验证码登录
-      value: true, //隐私政策
-      loginData: {
-        code: true, //验证码登录
-        click: false,
+      seconds: 60, //默认验证码等待时间
+      loginTitleWay: [
+        {
+          title: "欢迎登录",
+          desc: "登录后更精彩，美好生活即将开始",
+        },
+        {
+          title: "请输入验证码",
+          desc: "已经发送验证码至",
+        },
+      ],
+      showBack: false,
+      enabuleFetchCode: false,
+      enabulePrivacy: false, //隐私政策
+      mobile: "", //手机号
+      code: "", //验证码
+      inputStyle: {
+        height: "104rpx",
+        "border-bottom": "1rpx solid #D8D8D8",
+        "letter-spacing": "1rpx",
+        "font-size": "40rpx",
+        "line-height": "40rpx",
+        color: "#333",
       },
-      login: true, //登录
+      placeholderStyle: "font-size: 32rpx;line-height: 32rpx;color: #999999;",
+      loginList: [
+        //第三方登录集合
+        {
+          icon: "weixin-fill",
+          color: "#00a327",
+          title: "微信",
+          code: "WECHAT",
+        },
+        {
+          icon: "qq-fill",
+          color: "#38ace9",
+          title: "QQ",
+          code: "QQ",
+        },
+        {
+          icon: "apple-fill",
+          color: "#000000",
+          title: "Apple",
+          code: "APPLE",
+        },
+      ],
     };
   },
-  watch: {},
-  components: {
-    codeLogin,
-    onClickLogin,
-    wechatH5Login,
-  },
   mounted() {
-    // #ifndef APP-PLUS
-    //判断是否微信浏览器
-    var ua = window.navigator.userAgent.toLowerCase();
-    if (ua.match(/MicroMessenger/i) == "micromessenger") {
-      this.wechatLogin = true;
-      return;
-  
-    } else {
-      this.codeLogin = true;
-    }
+    /**
+     * 条件编译判断当前客户端类型
+     */
+    //#ifdef H5
+    this.clientType = "H5";
+    //#endif
+
+    //#ifdef APP-PLUS
+    this.clientType = "APP";
+    /**如果是app 加载支持的登录方式*/
+    let _this = this;
+    uni.getProvider({
+      service: "oauth",
+      success: (result) => {
+        _this.loginList = result.provider.map((value) => {
+          //展示title
+          let title = "";
+          //系统code
+          let code = "";
+          //颜色
+          let color = "#8b8b8b";
+          //图标
+          let icon = "";
+          //uni 联合登录 code
+          let appcode = "";
+          switch (value) {
+            case "weixin":
+              icon = "weixin-circle-fill";
+              color = "#00a327";
+              title = "微信";
+              code = "WECHAT";
+              break;
+            case "qq":
+              icon = "qq-circle-fill";
+              color = "#38ace9";
+              title = "QQ";
+              code = "QQ";
+              break;
+            case "apple":
+              icon = "apple-fill";
+              color = "#000000";
+              title = "Apple";
+              code = "APPLE";
+              break;
+          }
+          return {
+            title: title,
+            code: code,
+            color: color,
+            icon: icon,
+            appcode: value,
+          };
+        });
+      },
+      fail: (error) => {
+        uni.showToast({
+          title: "获取登录通道失败" + error,
+          duration: 2000,
+          icon: "none",
+        });
+      },
+    });
+    //#endif
+
+    //特殊平台，登录方式需要过滤
+    // #ifdef H5
+    this.methodFilter(["QQ"]);
     // #endif
-    // #ifdef APP-PLUS
-    this.codeLogin = true;
+
+    //微信小程序，只支持微信登录
+    // #ifdef MP-WEIXIN
+    this.methodFilter(["WECHAT"]);
     // #endif
   },
+  watch: {
+    current(val) {
+      val ? (this.showBack = true) : (this.showBack = false);
+    },
+    mobile: {
+      handler(val) {
+        if (val.length == 11) {
+          this.enabuleFetchCode = true;
+        }
+      },
+    },
 
-  onLoad(options) {
+    async flage(val) {
+      if (val) {
+        if (this.$refs.uCode.canGetCode) {
+          // 向后端请求验证码
+          uni.showLoading({});
+          let res = await sendMobile(this.mobile);
+          uni.hideLoading();
+          // 这里此提示会被this.start()方法中的提示覆盖
+          if (res.data.success) {
+            this.current = 1;
+            this.$refs.uCode.start();
+          } else {
+            uni.showToast({
+              title: res.data.message,
+              duration: 2000,
+              icon: "none",
+            });
+            this.flage = false;
+          }
+        } else {
+          this.$u.toast("请倒计时结束后再发送");
+        }
+      } else {
+        this.$refs.verification.hide();
+      }
+    },
+  },
+   onLoad(options) {
     if (options && options.state) {
       this.stateLogin(options.state);
     }
   },
   methods: {
-    handleClick(val) {
-      uni.navigateTo({
-        url: "/pages/mine/help/tips?type=" + val,
-      });
-    },
-    // open 开启另一个模板
-    open(val) {
-      Object.keys(this.loginData).forEach((item) => {
-        this.$set(this.loginData, item, false);
-      });
-      this.$set(this.loginData, val, true);
-    },
     //联合信息返回登录
     stateLogin(state) {
       loginCallback(state).then((res) => {
@@ -134,9 +263,362 @@ export default {
         }
       });
     },
+    /** 根据参数显示登录模块 */
+    methodFilter(code) {
+      let way = [];
+      this.loginList.forEach((item) => {
+        if (code.length != 0) {
+          code.forEach((val) => {
+            if (item.code == val) {
+              way.push(item);
+            }
+          });
+        } else {
+          uni.showToast({
+            title: "配置有误请联系管理员",
+            duration: 2000,
+            icon: "none",
+          });
+        }
+      });
+      this.loginList = way;
+    },
+    //非h5 获取openid
+    async nonH5OpenId(item) {
+      let _this = this;
+      //获取各个openid
+      await uni.login({
+        provider: item.appcode,
+        // #ifdef MP-ALIPAY
+        scopes: "auth_user", //支付宝小程序需设置授权类型
+        // #endif
+        success: function (res) {
+          uni.setStorageSync("type", item.code);
+          //微信小程序意外的其它方式直接在storage中写入openid
+          // #ifndef MP-WEIXIN
+          uni.setStorageSync("openid", res.authResult.openid);
+          // #endif
+        },
+        fail(e) {
+          uni.showToast({
+            title: "第三方登录暂不可用！",
+            icon: "none",
+            duration: 3000,
+          });
+        },
+        complete(e) {
+          //获取用户信息
+          uni.getUserInfo({
+            provider: item.appcode,
+            success: function (infoRes) {
+              //写入用户信息
+              uni.setStorageSync("nickname", infoRes.userInfo.nickName);
+              uni.setStorageSync("avatar", infoRes.userInfo.avatarUrl);
+
+              // #ifdef MP-WEIXIN
+              //微信小程序获取openid 需要特殊处理 如需获取openid请参考uni-id: https://uniapp.dcloud.net.cn/uniCloud/uni-id
+              _this.weixinMPOpenID(res).then((res) => {
+                //这里需要先行获得openid，再使用openid登录，小程序登录需要两步，所以这里特殊编译
+                _this.goOpenidLogin("WECHAT_MP");
+              });
+              // #endif
+
+              // #ifndef MP-WEIXIN
+              _this.goOpenidLogin("APP");
+              //#endif
+            },
+          });
+        },
+      });
+    },
+    //openid 登录
+    goOpenidLogin(clientType) {
+      // 获取准备好的参数，进行登录系统
+      let params = {
+        uuid: uni.getStorageSync("openid"), //联合登陆id
+        source: uni.getStorageSync("type"), //联合登陆类型
+        nickname: uni.getStorageSync("nickname"), // 昵称
+        avatar: uni.getStorageSync("avatar"), // 头像
+        uniAccessToken: uni.getStorageSync("uni_access_token"), //第三方token
+      };
+      openIdLogin(params, clientType).then((res) => {
+        if (!res.data.success) {
+          let errormessage = "第三方登录暂不可用";
+          uni.showToast({
+            // title: '未绑定第三方账号',
+            title: errormessage,
+            icon: "none",
+            duration: 3000,
+          });
+          return;
+        } else {
+          storage.setAccessToken(res.data.result.accessToken);
+          storage.setRefreshToken(res.data.result.refreshToken);
+          // 登录成功
+          uni.showToast({
+            title: "第三方登录成功!",
+            icon: "none",
+          });
+          // 执行登录
+          getUserInfo().then((user) => {
+            if (user.data.success) {
+              /**
+               * 个人信息存储到缓存userInfo中
+               */
+              storage.setUserInfo(user.data.result);
+              storage.setHasLogin(true);
+
+              /**
+               * 计算出当前router路径
+               * 1.如果跳转的链接为登录页面或跳转的链接为空页面。则会重新跳转到首页
+               * 2.都不满足返回跳转页面
+               */
+              whetherNavigate();
+            } else {
+              uni.switchTab({
+                url: "/pages/tabbar/home/index",
+              });
+            }
+          });
+        }
+      });
+    },
+    //微信小程序获取openid
+    async weixinMPOpenID(res) {
+      await miniProgramLogin(res.code).then((res) => {
+        uni.setStorageSync("openid", res.data);
+      });
+    },
+    /**跳转到登录页面 */
+    navigateLogin(connectLogin) {
+      // #ifdef H5
+      let code = connectLogin.code;
+      let buyer = api.buyer;
+      window.open(buyer + `/connect/login/web/` + code, "_self");
+      // #endif
+      // #ifdef APP-PLUS
+      this.nonH5OpenId(connectLogin);
+      // #endif
+    },
+
+    // 提交
+    submit() {
+      /**
+       * 清空当前账号信息
+       */
+      storage.setHasLogin(false);
+      storage.setAccessToken("");
+      storage.setRefreshToken("");
+      storage.setUuid(this.uuid.v1());
+      storage.setUserInfo({});
+      /**
+       * 执行登录
+       */
+      smsLogin({ mobile: this.mobile, code: this.code }, this.clientType).then(
+        (res) => {
+          if (res.data.success) {
+            storage.setAccessToken(res.data.result.accessToken);
+            storage.setRefreshToken(res.data.result.refreshToken);
+
+            /**
+             * 登录成功后获取个人信息
+             */
+            getUserInfo().then((user) => {
+              if (user.data.success) {
+                /**
+                 * 个人信息存储到缓存userInfo中
+                 */
+                storage.setUserInfo(user.data.result);
+                storage.setHasLogin(true);
+                // 登录成功
+                uni.showToast({
+                  title: "登录成功!",
+                  icon: "none",
+                });
+
+                /**
+                 * 计算出当前router路径
+                 * 1.如果跳转的链接为登录页面或跳转的链接为空页面。则会重新跳转到首页
+                 * 2.都不满足返回跳转页面
+                 */
+                whetherNavigate();
+              } else {
+                uni.switchTab({
+                  url: "/pages/tabbar/home/index",
+                });
+              }
+            });
+          }
+        }
+      );
+    },
+    // 验证码验证
+    verification(val) {
+      this.flage = val == this.$store.state.verificationKey ? true : false;
+    },
+    // 跳转
+    navigateToPrivacy(val) {
+      uni.navigateTo({
+        url: "/pages/mine/help/tips?type=" + val,
+      });
+    },
+    // 点击获取验证码
+    start() {
+      this.codeColor = "#999";
+      this.$u.toast("验证码已发送");
+      this.flage = false;
+      this.codeFlag = false;
+
+      this.$refs.verification.hide();
+    },
+    /**点击验证码*/
+    codeChange(text) {
+      this.tips = text;
+    },
+    /** 结束验证码后执行 */
+    end() {
+      this.codeColor = this.lightColor;
+
+      console.log(this.codeColor);
+    },
+    // 发送验证码
+    fetchCode() {
+      if (!this.enabulePrivacy) {
+        uni.showToast({
+          title: "请同意用户隐私",
+          duration: 2000,
+          icon: "none",
+        });
+        return false;
+      }
+
+      if (!this.$u.test.mobile(this.mobile)) {
+        uni.showToast({
+          title: "请填写正确手机号",
+          duration: 2000,
+          icon: "none",
+        });
+        return false;
+      }
+      if (this.tips == "重新获取验证码") {
+        uni.showLoading({
+          title: "加载中",
+        });
+        if (!this.codeFlag) {
+          this.codeFlag = true;
+
+          let timer = setInterval(() => {
+            if (this.$refs.verification) {
+              this.$refs.verification.error(); //发送
+            }
+            clearInterval(timer);
+          }, 100);
+        }
+        uni.hideLoading();
+      }
+      if (!this.flage) {
+        this.$refs.verification.error(); //发送
+
+        return false;
+      }
+    },
   },
 };
 </script>
-<style lang="scss" scoped>
-@import url("./login.scss");
+<style >
+page {
+  background: #fff;
+}
 </style>
+<style lang="scss" scoped>
+.wrapper {
+  padding: 0 80rpx;
+}
+.title {
+  padding-top: calc(104rpx);
+  font-style: normal;
+  line-height: 1;
+  font-weight: 500;
+  font-size: 56rpx;
+  color: #333;
+}
+.box-code {
+  margin-top: 78rpx;
+}
+.desc,
+.desc-light {
+  font-size: 32rpx;
+  line-height: 32rpx;
+  color: #333333;
+  margin-top: 40rpx;
+}
+.desc {
+  color: #333;
+}
+.desc-light {
+  color: #999999;
+  > span {
+    color: #333;
+    margin-left: 8rpx;
+  }
+}
+.mobile {
+  margin-top: 80rpx;
+}
+.disable {
+  background: linear-gradient(90deg, #ffdcba 2.21%, #ffcfb2 99.86%);
+}
+.fetch {
+  background: linear-gradient(57.72deg, #ff8a19 18.14%, #ff5e00 98.44%);
+}
+.btn {
+  border-radius: 100px;
+  width: 590rpx;
+  margin-top: 97rpx;
+  height: 80rpx;
+  font-size: 30rpx;
+  line-height: 80rpx;
+  text-align: center;
+  color: #ffffff;
+}
+.tips {
+  font-size: 12px;
+  line-height: 20px;
+  margin-top: 32rpx;
+  width: 546rpx;
+  > span {
+    color: $light-color;
+  }
+}
+.fetch-btn {
+  width: 370rpx;
+  height: 80rpx;
+  line-height: 80rpx;
+  text-align: center;
+  background: #f2f2f2;
+  border-radius: 100rpx;
+  font-size: 28rpx;
+  color: #999;
+
+  margin: 71rpx auto 0 auto;
+}
+
+.login-list {
+  display: flex;
+  width: 590rpx;
+  position: absolute;
+  bottom: 20px;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.login-item {
+  width: 80rpx;
+
+  border-radius: 10rpx;
+  height: 80rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>