代码提交

pages/login/guid.vue

@@ -6,19 +6,96 @@
     @update: 2023-11-08 16:20
 -->
 <script setup>
+import wechat from '@/static/icon/login/wechat.png'
 import { useRouter } from "@/hooks/useRouter";
 import { loginMethods } from "@/pages/login/index.data";
+import { wxLogin } from "@/utils/wechatUtils";
+import { error } from "@/uni_modules/uv-ui-tools/libs/function";
+import { nextTick, ref } from "vue";
+import { useInterface } from "@/hooks/useInterface";
+import { privacyAgreementUrl, userAgreementUrl, weixinLogin } from "@/api/auth";
+import { useMainStore } from "@/store/store";
+import { afterLogin } from "@/utils";
 
+const {toast, loading, hideLoading} = useInterface()
 const {goBack, push} = useRouter()
+const mainStore = useMainStore()
 
-function toLogin(loginMethod) {
-  if (loginMethod.type === 0) {
-    // 微信登录
-    console.log('微信登录')
-  } else {
+async function toLogin(loginMethod) {
     push({url: '/pages/login/index', animationType: 'slide-in-right'}, {data: {...loginMethod}})
+}
+
+// ============================= 微信登录相关
+const code = ref('') // logingCode必须比getPhoneNumber的code先获取
+
+async function getCode() {
+  loading({
+    title: '登陆中...'
+  })
+  try {
+    code.value = await wxLogin();
+  } catch (e) {
+    console.error(e)
+    toast('获取code失败')
+    hideLoading()
   }
 }
+
+async function getPhoneNumber(e) {
+  if (e.detail.errMsg !== 'getPhoneNumber:ok') {
+    console.error(e)
+    hideLoading()
+    toast({title: '登录失败'})
+  }
+  try {
+    const phoneCode = e.detail.code
+    const res = await weixinLogin({
+      phoneCode,
+      loginCode: code.value
+    });
+    if (res) {
+      await mainStore.setAccessToken(res)
+      afterLogin()
+    }
+  } catch (e) {
+    console.error(e)
+    toast({title: '登录失败'})
+  } finally {
+    hideLoading()
+  }
+}
+
+
+
+const privacyPolicy = ref([]) // 协议双向绑定
+
+const isPrivacyError = ref(false) // 未勾选协议
+
+/**
+ * 检查是否勾选协议
+ * @returns {boolean}
+ */
+function checkPrivacy() {
+  const flag = privacyPolicy.value.length > 0
+  if (!flag) {
+    toast({title: '请先阅读并同意用户协议和隐私政策'})
+    isPrivacyError.value = true
+    setTimeout(() => {
+      isPrivacyError.value = false
+    }, 1000)
+  }
+  return flag
+}
+
+/**
+ * 跳转协议
+ * @param type
+ */
+function toAgreement(type) {
+  const urls = [userAgreementUrl, privacyAgreementUrl]
+  push({url: '/pages/webview/index'}, {data: {src: urls[type]}})
+}
+
 </script>
 
 <template>
@@ -37,6 +114,32 @@ function toLogin(loginMethod) {
     </view>
 
     <view class="button-group">
+      <!-- #ifdef MP-WEIXIN -->
+      <view
+          v-if="privacyPolicy.length<=0"
+          class="button animation-button disabled"
+          @click="checkPrivacy"
+      >
+        <image
+            class="icon"
+            :src="wechat"
+        />
+        微信快捷登录
+      </view>
+      <button
+          v-else
+          class="button animation-button"
+          open-type="getPhoneNumber"
+          @getphonenumber="getPhoneNumber"
+          @click="getCode"
+      >
+        <image
+            class="icon"
+            :src="wechat"
+        />
+        微信快捷登录
+      </button>
+      <!-- #endif -->
       <template
           v-for="(loginMethod) in loginMethods"
           :key="loginMethod.type"
@@ -55,8 +158,34 @@ function toLogin(loginMethod) {
 
     </view>
 
-    <view class="tips-row">
-      为了给您提供更好的服务 我们需要您的授权哦~
+    <view
+        class="agreement-box"
+        :class="{'error-animation':isPrivacyError}"
+    >
+      <uv-checkbox-group
+          v-model="privacyPolicy"
+          shape="circle"
+          activeColor="#ec6e47"
+      >
+        <uv-checkbox :name="1">
+          <view class="agreement-text">
+            阅读并同意
+            <span
+                class="color"
+                @click="toAgreement(0)"
+            >
+              《YSHOP商城用户协议》
+            </span>
+            和
+            <span
+                class="color"
+                @click="toAgreement(1)"
+            >
+              《YSHOP商城隐私协议》
+            </span>
+          </view>
+        </uv-checkbox>
+      </uv-checkbox-group>
     </view>
   </view>
 
@@ -112,14 +241,54 @@ function toLogin(loginMethod) {
     }
   }
 
-  .tips-row {
-    position: absolute;
-    bottom: 5%;
-    left: 0;
-    width: 100%;
-    color: $tips-color;
-    font-size: 24rpx;
+}
+
+.agreement-box {
+  @include usePadding(30, 0);
+  position: fixed;
+  bottom: 5%;
+  width: 100%;
+  font-size: 24rpx;
+  color: $tips-color;
+  transition: all .3s;
+
+
+  .agreement-text {
     text-align: center;
+
+    .color {
+      color: $primary-color;
+    }
+  }
+
+  :deep(.uv-checkbox ) {
+    width: 100%;
+    align-items: flex-start;
+
+    .uv-checkbox__icon-wrap {
+    }
+  }
+}
+
+.error-animation {
+  animation: error-text 0.8s 1;
+}
+
+@keyframes error-text {
+  0% {
+    transform: translateX(0);
+  }
+  5%, 25%, 45%, 65%, 85% {
+    transform: translateX(-10rpx);
+  }
+  10%, 30%, 50%, 70%, 90% {
+    transform: translateX(10rpx);
+  }
+  15%, 35%, 55%, 75%, 95% {
+    transform: translateX(20rpx);
+  }
+  20%, 40%, 60%, 80%, 100% {
+    transform: translateX(-20rpx);
   }
 }
 </style>