商品详情

src/pages/common/login/index.vue

@@ -1,47 +1,48 @@
 <template>
   <view>
-    <view class="login-form-wrap">
-      <view class="title">
+    <view class='login-form-wrap'>
+      <view class='title'>
         欢迎登录
       </view>
-      <input v-model="tel" class="u-border-bottom" type="number" placeholder="请输入手机号">
-      <view class="u-border-bottom my-40rpx flex">
-        <input v-model="code" class="flex-1" type="number" placeholder="请输入验证码">
+      <input v-model='tel' class='u-border-bottom' type='number' placeholder='请输入手机号'>
+      <view class='u-border-bottom my-40rpx flex'>
+        <input v-model='code' class='flex-1' type='number' placeholder='请输入验证码'>
         <view>
-          <u-code ref="uCodeRef" @change="codeChange" />
-          <u-button :text="tips" type="success" size="mini" @click="getCode" />
+          <u-code ref='uCodeRef' @change='codeChange' />
+          <u-button :text='tips' type='success' size='mini' @click='getCode' />
         </view>
       </view>
-      <button :style="[inputStyle]" class="login-btn" @tap="submit">
+      <button :style='[inputStyle]' class='login-btn' @tap='submit'>
         登录
       </button>
 
-      <view class="alternative">
-        <view class="password">
+      <view class='alternative'>
+        <view class='password'>
           密码登录
         </view>
-        <view class="issue">
+        <view class='issue'>
           遇到问题
         </view>
       </view>
     </view>
-    <view class="login-type-wrap">
-      <view class="item wechat">
-        <view class="icon">
-          <u-icon size="35" name="weixin-fill" color="rgb(83,194,64)" />
+    <view class='login-type-wrap'>
+      <view class='item wechat' @click.stop='wechatLogin'>
+        <view class='icon'>
+          <u-icon size='35' name='weixin-fill' color='rgb(83,194,64)' />
         </view>
         微信
+        <!--        <button open-type='getUserInfo' @getuserinfo='bindGetUserInfo'>确认授权</button>-->
       </view>
-      <view class="item QQ">
-        <view class="icon">
-          <u-icon size="35" name="qq-fill" color="rgb(17,183,233)" />
+      <view class='item QQ'>
+        <view class='icon'>
+          <u-icon size='35' name='qq-fill' color='rgb(17,183,233)' />
         </view>
         QQ
       </view>
     </view>
-    <view class="hint">
+    <view class='hint'>
       登录代表同意
-      <text class="link">
+      <text class='link'>
         用户协议、隐私政策，
       </text>
       并授权使用您的账号信息（如昵称、头像、收获地址）以便您统一管理
@@ -49,10 +50,12 @@
   </view>
 </template>
 
-<script setup lang="ts">
+<script setup lang='ts'>
 import uCode from 'uview-plus/components/u-code/u-code.vue';
 import { setToken } from '@/utils/auth';
+import { useUserStore } from '@/store';
 
+const userStore = useUserStore();
 const tel = ref<string>('18502811111');
 const code = ref<string>('1234');
 const tips = ref<string>();
@@ -60,7 +63,7 @@ const uCodeRef = ref<InstanceType<typeof uCode> | null>(null);
 
 const inputStyle = computed<CSSStyleDeclaration>(() => {
   const style = {} as CSSStyleDeclaration;
-  if (tel.value && code.value) {
+  if(tel.value && code.value) {
     style.color = '#fff';
     style.backgroundColor = uni.$u.color.warning;
   }
@@ -72,10 +75,10 @@ function codeChange(text: string) {
 }
 
 function getCode() {
-  if (uCodeRef.value?.canGetCode) {
+  if(uCodeRef.value?.canGetCode) {
     // 模拟向后端请求验证码
     uni.showLoading({
-      title: '正在获取验证码',
+      title: '正在获取验证码'
     });
     setTimeout(() => {
       uni.hideLoading();
@@ -83,21 +86,24 @@ function getCode() {
       // 通知验证码组件内部开始倒计时
       uCodeRef.value?.start();
     }, 1000);
-  }
-  else {
+  } else {
     uni.$u.toast('倒计时结束后再发送');
   }
 }
 
+function wechatLogin() {
+  userStore.authLogin();
+}
+
 function submit() {
-  if (uni.$u.test.mobile(tel.value)) {
+  if(uni.$u.test.mobile(tel.value)) {
     setToken('1234567890');
     uni.reLaunch({ url: '/pages/home/index' });
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .login-form-wrap {
   margin: 80rpx auto 0;
   width: 600rpx;