https://www.wendyhair.com/dist/front/static/new_default_theme/addon-quick-login.js?v=640

1// ==================== quick-login.js ====================
2/**
3 * 快速登录自定义组件（替代原有Vue组件）
4 * 功能：Facebook / Google 第三方登录，微信浏览器自动隐藏
5 */
6
7// 注册自定义元素
8if (!customElements.get('f-quick-login-html')) {
9    class QuickLoginHtml extends HTMLElement {
10        constructor() {
11            super();
12            this.facebookID = '';
13            this.googleLoginUrl = '';
14            this.facebookLoad = false;
15            this.returnUrl = null;
16            this.isWeixin = window.isWeixinBrowser();//是否微信浏览器
17            this.container = null;
18        }
19
20        // ========== 生命周期 ==========
21        connectedCallback() {
22            // 微信浏览器不执行下面逻辑
23            if (this.isWeixin) {
24                return;
25            }
26            this.checkLoginStatus()
27            this.getReturnUrl();//获取返回url
28            this.container = document.createElement('div');
29            this.appendChild(this.container);
30            this.getLoginData();
31        }
32
33        checkLoginStatus() {
34            let google_login = sessionStorage.getItem('google_login') || 2
35            let facebook_login = sessionStorage.getItem('facebook_login') || 2
36            if (google_login == 1 || facebook_login == 1) {
37                console.log('谷歌登录了需要设置账号状态')
38
39                // 更新登录状态
40                window.accountBaseLoginEvent({}, '', () => {
41                    sessionStorage.removeItem('google_login')
42                    sessionStorage.removeItem('facebook_login')
43                    let isLogined = false;
44                    let loginStatus = localStorage.getItem('loginStatus')
45                    if (loginStatus) {
46                        loginStatus = JSON.parse(loginStatus);
47                        isLogined = loginStatus.isLogined
48                        if (isLogined) {
49                            window.location.href = $buildUrl(window.common_base_url, '/account/order')
50                        }
51                    }
52
53                })//登录完成事件
54            }
55        }
56
57        // 获取URL参数
58        getQueryParam(name) {
59            const urlParams = new URLSearchParams(window.location.search);
60            return urlParams.get(name);
61        }
62
63        // 获取 Facebook App ID
64        async getFacebookAppId() {
65            let fblogin = window.baseData.addons.includes('fblogin')
66            $log('获取 Facebook App ID')
67            if (fblogin) {
68                //前台-得到Facebook应用编号
69                const res = await api.get('/api/apps/fblogin/account/get-app-id')
70                return res?.app_id || '';
71            } else {
72                return '';
73            }
74
75        }
76
77        // 获取 Google 登录 URL
78        async getGoogleLoginUrl() {

79            let googlelogin = window?.baseData?.addons.includes('googlelogin')
80            if (googlelogin) {
81                const res = await api.get('/api/apps/googlelogin/account/get-google-login-url'); // 替换为实际接口
82                return res?.google_login_url || '';
83            } else {
84                return '';
85            }
86
87        }
88
89        // 提交 Facebook 登录信息
90        async facebookLoginApi(params) {
91            return api.post('/api/apps/fblogin/account/login', params);
92        }
93
94        // ========== 获取登录后跳转地址 ==========
95        getReturnUrl() {
96            this.returnUrl = this.getQueryParam('_returnUrl') || null;
97        }
98
99        initFacebookSDK(appId) {
100            window.fbAsyncInit = () => {
101                FB.init({
102                    appId: appId,
103                    oauth: true,
104                    status: true,
105                    cookie: true,
106                    xfbml: true,
107                    version: 'v16.0'
108                });
109                this.facebookLoad = true;
110                this.render(); // 重新渲染显示按钮
111            };
112            // 如果 SDK 已加载但未执行 fbAsyncInit，手动调用
113            if (window.FB && typeof window.FB === 'object' && !window.fbAsyncInitCalled) {
114                window.fbAsyncInitCalled = true;
115                window.fbAsyncInit();
116            }
117        }
118
119        // ========== 业务逻辑 ==========
120        async getLoginData() {
121            // 获取 Facebook 配置
122            try {
123                const appId = await this.getFacebookAppId();
124                if (appId) {
125                    this.facebookID = appId;
126                    // ========== 加载 Facebook SDK ==========
127                    loadSdk('https://connect.facebook.net/en_US/sdk.js').then(() => {
128                        this.initFacebookSDK(this.facebookID);
129                    })
130                }
131            } catch (err) {
132                $log('[quick-login] Facebook init error', err);
133            }
134
135            // 获取 Google 配置
136            try {
137                const url = await this.getGoogleLoginUrl();
138                if (url) this.googleLoginUrl = url;
139            } catch (err) {
140                $log('[quick-login] Google URL error', err);
141            }
142
143            this.render(); // 更新按钮显示状态
144        }
145
146        facebookLogin() {
147            if (!window.FB) {
148                $log('[quick-login] FB not ready');
149                return;
150            }
151            // 设置为脸书登录状态，一旦设置了 那么进入 login 页需要调用下面俩函数
152            sessionStorage.setItem('facebook_login', '1');
153            FB.login((response) => {
154                if (response.authResponse) {
155                    FB.api('/me?locale=en_US&fields=name,email', async (userInfo) => {
156                        $log('Facebook login success', userInfo);
157                        try {
158                            await this.facebookLoginApi({
159                                fb_id: userInfo.id,
160                                fb_email: userInfo.email
161                            });
162                            // 更新登录状态
163                            window.accountBaseLoginEvent(userInfo, '', () => {
164                                let isLogined = false;
165                                let loginStatus = localStorage.getItem('loginStatus')
166                                if (loginStatus) {
167                                    loginStatus = JSON.parse(loginStatus);
168                                    isLogined = loginStatus.isLogined
169                                }
170                                if (isLogined) {
171                                    sessionStorage.removeItem('facebook_login');
172                                    if (this.returnUrl) {
173                                        location.replace(decodeURI(this.returnUrl));
174                                    } else {
175                                        window.location.href = $buildUrl(window.common_base_url, '/account/order')
176                                    }
177                                }
178                            })//登录完成事件
179
180                        } catch (err) {
181                            $log('[quick-login] facebook login api error', err);
182                        }
183                    });
184                } else {
185                    $log('User cancelled Facebook login');
186                }
187            }, {scope: 'public_profile,email'});
188        }
189
190        googleLogin() {
191            if (!this.googleLoginUrl) return;
192            sessionStorage.setItem('google_login', '1');
193            const screenX = typeof window.screenX !== 'undefined' ? window.screenX : window.screenLeft;
194            const screenY = typeof window.screenY !== 'undefined' ? window.screenY : window.screenTop;
195            const outerWidth = typeof window.outerWidth !== 'undefined' ? window.outerWidth : document.body.clientWidth;
196            const outerHeight = typeof window.outerHeight !== 'undefined' ? window.outerHeight : document.body.clientHeight - 22;
197            const width = 800, height = 650;
198            const left = parseInt(screenX + (outerWidth - width) / 2, 10);
199            const top = parseInt(screenY + (outerHeight - height) / 2.5, 10);
200            const features = `width=${width},height=${height}

200,left=${left},top=${top}`;
201            const newWindow = window.open(this.googleLoginUrl, 'Login_by_google', features);
202            if (newWindow && window.focus) newWindow.focus();
203        }
204
205
206        // ========== UI 渲染 ==========
207        render() {
208            if (!this.container) return;
209
210            const showGoogle = !!this.googleLoginUrl;
211            const showFacebook = !!(this.facebookID && this.facebookLoad);
212            if (!showGoogle && !showFacebook) {
213                this.container.style.display = 'none';
214                return;
215            }
216            this.container.style.display = 'block';
217            this.container.innerHTML = `
218      <div class="quick_login">
219        ${(showFacebook || showGoogle) ? `<div class="title uppercase">${this.dataset.joinWith}</div>` : ''}
220        <div class="quick_login_button">
221          ${showFacebook ? `
222            <div class="login-item facebook-login-btn">
223              <svg class="icon" viewBox="0 0 1024 1024" width="200" height="200">
224                <path d="M546.986667 1024H56.490667A56.533333 56.533333 0 0 1 0 967.466667V56.533333C0 25.301333 25.301333 0 56.533333 0h910.933334C998.698667 0 1024 25.301333 1024 56.533333v910.933334c0 31.232-25.301333 56.533333-56.533333 56.533333H706.56v-396.544h133.12l19.882667-154.538667H706.56V374.186667c0-44.714667 12.373333-75.221333 76.586667-75.221334h81.834666v-138.24c-14.165333-1.92-62.72-6.101333-119.253333-6.101333-118.016 0-198.784 72.021333-198.784 204.288v113.92H413.525333v154.581333h133.418667V1024z" fill="#3B5998"></path>
225              </svg>
226            </div>
227          ` : ''}
228          ${showGoogle ? `
229            <div class="login-item google-login-btn">
230              <svg class="icon" viewBox="0 0 1024 1024" width="200" height="200">
231                <path d="M213.1976 515.482c0-33.485 5.632-65.588 15.616-95.693L53.4536 287.155A511.053 511.053 0 0 0 0.0016 515.482c0 82.048 19.2 159.436 53.35 228.147L228.6606 610.765c-10.24-30.72-15.437-62.9-15.463-95.283" fill="#FBBC05"></path>
232                <path d="M521.2426 210.944a303.36 303.36 0 0 1 191.872 67.891l151.629-149.913C772.3536 49.306 653.9006 0.077 521.2436 0.077c-205.978 0-383.028 116.659-467.79 287.078L228.9416 419.79c40.397-121.498 155.597-208.87 292.352-208.87" fill="#EA4335"></path>
233                <path d="M523.4706 813.235c-137.473 0-253.236-86.81-293.889-207.565L53.3256 737.51c85.172 169.37 263.092 285.261 470.144 285.261 127.719 0 249.677-44.39 341.248-127.641L697.3706 768.46c-47.18 29.108-106.65 44.8-173.952 44.8" fill="#34A853"></path>
234                <path d="M1023.4376 510.618c0-30.26-4.787-62.874-11.904-93.133H523.4186v197.888h280.935c-14.004 67.481-52.224 119.347-106.957 153.088L864.7176 895.13c96.18-87.373 158.72-217.55 158.72-384.512" fill="#4285F4"></path>
235              </svg>
236            </div>
237          ` : ''}
238        </div>
239      </div>
240    `;
241            // 绑定事件
242            const fbBtn = this.container.querySelector('.facebook-login-btn');
243            if (fbBtn) fbBtn.addEventListener('click', () => this.facebookLogin());
244            const googleBtn = this.container.querySelector('.google-login-btn');
245            if (googleBtn) googleBtn.addEventListener('click', () => this.googleLogin());
246        }
247
248    }
249
250    customElements.define('f-quick-login-html', QuickLoginHtml);
251}