backstage / wutong

Blame view

Antis.Erp.Plat/sy/login.html 16.2 KB
Edit Raw Normal View History
f946e9dd   hexiaodong   hhh 
1
 
  <!DOCTYPE html>
39999bd8   “wangming”   feat(erp-plat): 单... 
2
 
  <html lang="zh-CN" class="pos-app-root">
f946e9dd   hexiaodong   hhh 
3
4
5
 
  
  <head>
    <meta charset="UTF-8">
ec04c7b4   “wangming”   123 
6
7
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, maximum-scale=5">
    <title>PongGame 收银台 · 登录</title>
f946e9dd   hexiaodong   hhh 
8
 
    <link rel="stylesheet" href="css/style.css">
39999bd8   “wangming”   feat(erp-plat): 单... 
9
 
    <link rel="stylesheet" href="css/pos-unified.css">
ec04c7b4   “wangming”   123 
10
 
    <link rel="stylesheet" href="css/pos-login-reflow.css">
f946e9dd   hexiaodong   hhh 
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
    <script src="./js/vue.min.js"></script>
    <script src="./axios-1.x/axios-1.x/dist/axios.js"></script>
    <script src="./axios-1.x/axios-1.x/dist/axios.min.js"></script>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <!-- 引入 crypto-js 库 - 使用多个CDN源作为备选 -->
    <script>
      // 动态加载CryptoJS库，支持多个CDN源
      (function() {
        var cryptoJsLoaded = false;
        var cdnSources = [
          'https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.js',
          'https://unpkg.com/crypto-js@4.1.1/crypto-js.js',
          'https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js'
        ];
        var currentIndex = 0;
        
        function loadCryptoJS() {
          if (currentIndex >= cdnSources.length) {
            console.error('所有CDN源加载失败，请检查网络连接');
            alert('CryptoJS库加载失败，请检查网络连接或联系管理员');
            return;
          }
          
          var script = document.createElement('script');
          script.src = cdnSources[currentIndex];
          script.onload = function() {
            cryptoJsLoaded = true;
            console.log('CryptoJS库加载成功，来源:', cdnSources[currentIndex]);
          };
          script.onerror = function() {
            console.warn('CDN源加载失败:', cdnSources[currentIndex]);
            currentIndex++;
            loadCryptoJS(); // 尝试下一个CDN源
          };
          document.head.appendChild(script);
        }
        
        loadCryptoJS();
      })();
    </script>
  </head>
39999bd8   “wangming”   feat(erp-plat): 单... 
53
 
  <body class="pos-page pos-page--login">
f946e9dd   hexiaodong   hhh 
54
 
    <div id="app">
ec04c7b4   “wangming”   123 
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
 
      <main class="pos-login-page" role="main">
        <div class="pos-login-center">
          <div class="pos-login-split">
            <aside class="pos-login-split__brand" aria-label="PongGame 收银台">
              <div class="pos-login-split__brand-bg" aria-hidden="true"></div>
              <div class="pos-login-split__brand-inner">
                <div class="pos-login-split__logo" aria-hidden="true">
                  <svg class="pos-inline-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 21v-7.5a.75.75 0 01.75-.75h3a.75.75 0 01.75.75V21m-9 0H3.75A2.25 2.25 0 012 18.75v-9.5A2.25 2.25 0 014.25 7h4.379a2.25 2.25 0 001.59-.659l.816-.816A2.25 2.25 0 0112.122 4.5h7.128A2.25 2.25 0 0122 6.628V18.75A2.25 2.25 0 0119.75 21H13.5z" />
                  </svg>
                </div>
                <h1 class="pos-login-split__title">
                  <span class="pos-login-split__title-main">PongGame</span>
                  <span class="pos-login-split__title-sub">收银台</span>
                </h1>
                <p class="pos-login-split__welcome">欢迎回来，登录后继续营业</p>
              </div>
              <div class="pos-login-split__pill">
                <svg class="pos-inline-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
                </svg>
                <span>高效运营 · 对接 ERP</span>
              </div>
            </aside>
            <div class="pos-login-split__panel">
              <div class="pos-login-split__panel-inner">
                <header class="pos-login-welcome-head">
                  <h2 class="pos-login-welcome-head__title">欢迎登录</h2>
                  <p class="pos-login-welcome-head__sub">请输入门店账号信息</p>
                </header>
                <form id="loginForm" @submit.prevent="gain">
                  <div class="pos-login-fieldset">
                    <div class="pos-form-group">
                      <label for="username">用户名</label>
                      <div class="pos-login-input-row">
                        <span class="pos-login-input-row__icon" aria-hidden="true">
                          <svg class="pos-inline-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                          </svg>
                        </span>
                        <input id="username" class="pos-input" type="text" v-model="username" placeholder="请输入用户名或手机号" autocomplete="username" @input="loginError = ''">
                      </div>
                    </div>
                    <div class="pos-form-group">
                      <label for="password">密码</label>
                      <div class="pos-login-input-row">
                        <span class="pos-login-input-row__icon" aria-hidden="true">
                          <svg class="pos-inline-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
                          </svg>
                        </span>
                        <input id="password" class="pos-input" type="password" v-model="password" placeholder="请输入密码" autocomplete="current-password" @input="loginError = ''">
                      </div>
                    </div>
                  </div>
                  <div class="pos-form-group pos-form-group--store">
                    <div class="pos-login-store-shell">
                      <div id="pos-store-field-label" class="pos-store-label">选择门店 <span class="pos-store-label__hint">点击卡片选择</span></div>
                      <div v-if="storeListLoading" class="pos-store-grid pos-store-grid--loading" role="status" aria-live="polite">门店列表加载中…</div>
                      <div v-else-if="!storeList.length" class="pos-store-grid pos-store-grid--empty" role="status">暂无门店数据，请检查网络或后台配置</div>
                      <div
                        v-else
                        class="pos-store-grid pos-store-grid--matrix"
                        role="listbox"
                        aria-labelledby="pos-store-field-label"
                      >
                        <button
                          v-for="store in storeList"
                          :key="store.id"
                          type="button"
                          class="pos-store-tile pos-store-tile--cell settlement-touch"
                          :class="{ 'pos-store-tile--active': isStoreSelected(store) }"
                          role="option"
                          :aria-selected="isStoreSelected(store) ? 'true' : 'false'"
                          @click="pickStore(store); loginError = ''"
                        >
                          <span class="pos-store-tile__name">{{ store.mdmc || '无' }}</span>
                        </button>
                      </div>
                    </div>
                  </div>
                  <div v-if="loginError" class="pos-login-form-error" role="alert">{{ loginError }}</div>
                  <button type="submit" class="pos-btn pos-btn--primary settlement-touch">登录</button>
                  <p class="pos-login-footnote">门店账号，对接结算 ERP 系统</p>
                </form>
              </div>
f946e9dd   hexiaodong   hhh 
141
 
            </div>
ec04c7b4   “wangming”   123 
142
 
          </div>
f946e9dd   hexiaodong   hhh 
143
 
        </div>
ec04c7b4   “wangming”   123 
144
 
      </main>
f946e9dd   hexiaodong   hhh 
145
146
147
148
149
150
151
152
153
 
    </div>
  
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          baseUrl: (() => {
            const currentOrigin = window.location.origin;
            if (currentOrigin.includes('localhost') || currentOrigin.includes('127.0.0.1')) {
39999bd8   “wangming”   feat(erp-plat): 单... 
154
 
              return 'http://localhost:2011';
f946e9dd   hexiaodong   hhh 
155
156
157
158
159
160
161
 
            } else {
              return currentOrigin.replace(/:\d+$/, '');
            }
          })(),
          password: '',
          username: '',
          selectedStore: '',
ec04c7b4   “wangming”   123 
162
163
164
 
          storeList: [],
          storeListLoading: true,
          loginError: ''
f946e9dd   hexiaodong   hhh 
165
166
167
168
169
170
171
172
173
 
        },
        created() {
            localStorage.setItem('userId', '');
            localStorage.setItem('token', '');
            localStorage.setItem('username', '');
            this.loadStoreList();
        },
    
        methods: {
ec04c7b4   “wangming”   123 
174
175
176
177
178
179
180
181
182
 
          storeIdStr(id) {
            return id == null ? '' : String(id);
          },
          isStoreSelected(store) {
            return this.storeIdStr(store.id) === this.storeIdStr(this.selectedStore);
          },
          pickStore(store) {
            this.selectedStore = this.storeIdStr(store.id);
          },
f946e9dd   hexiaodong   hhh 
183
184
 
          loadStoreList() {
            var that = this;
ec04c7b4   “wangming”   123 
185
 
            that.storeListLoading = true;
f946e9dd   hexiaodong   hhh 
186
187
188
 
            axios({
              url: that.baseUrl + "/api/Extend/WtMd",
              method: 'GET',
27fb1711   “wangming”   feat(erp): WtAcco... 
189
190
191
192
193
194
195
 
              // 列表接口分页：不传 pageSize 时后端默认 50，门店多于 50 时登录页显示不全
              params: {
                currentPage: 1,
                pageSize: 2000,
                sort: 'asc',
                sidx: 'mdmc'
              },
f946e9dd   hexiaodong   hhh 
196
197
198
199
200
201
 
              headers: {
                'accept': 'text/plain',
                'Content-Type': 'application/json',
              }
            }).then((res) => {
              if (res.data.code === 200) {
27fb1711   “wangming”   feat(erp): WtAcco... 
202
203
204
205
206
207
208
 
                var raw = res.data.data.list || [];
                // 门店主键必须当字符串用，避免 JSON 数字精度丢失导致与后台 wt_skzhb.ssmd 对不上
                that.storeList = raw.map(function (s) {
                  var o = Object.assign({}, s);
                  if (o.id != null && o.id !== '') o.id = String(o.id);
                  return o;
                });
f946e9dd   hexiaodong   hhh 
209
210
211
212
213
214
 
                console.log('门店列表加载成功:', that.storeList);
              } else {
                console.error('获取门店列表失败:', res.data);
              }
            }).catch((error) => {
              console.error('获取门店列表出错:', error);
ec04c7b4   “wangming”   123 
215
216
 
            }).finally(function () {
              that.storeListLoading = false;
f946e9dd   hexiaodong   hhh 
217
218
219
 
            });
          },
          gain() {
ec04c7b4   “wangming”   123 
220
221
222
 
            var that = this;
            that.loginError = '';
f946e9dd   hexiaodong   hhh 
223
224
 
            // ✅ 登录时立即清除客户选择，确保每次登录后都是未选择客户状态
            localStorage.removeItem('hyinfo');
ec04c7b4   “wangming”   123 
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
 
  
            function fail(msg) {
              that.loginError = msg;
              try {
                window.alert(msg);
              } catch (e) {}
            }
  
            if (that.storeListLoading) {
              fail('门店列表正在加载，请稍候再试');
              return;
            }
  
            var account = (that.username || '').trim();
            if (!account) {
              fail('请输入用户名');
              return;
            }
  
            if (that.password === undefined || that.password === null || String(that.password).length === 0) {
              fail('请输入密码');
              return;
            }
f946e9dd   hexiaodong   hhh 
249
 
            if (!that.selectedStore) {
ec04c7b4   “wangming”   123 
250
 
              fail('请选择门店');
f946e9dd   hexiaodong   hhh 
251
252
 
              return;
            }
ec04c7b4   “wangming”   123 
253
f946e9dd   hexiaodong   hhh 
254
 
            if (typeof CryptoJS === 'undefined') {
ec04c7b4   “wangming”   123 
255
 
              fail('加密库正在加载中，请稍候再试。若持续失败请刷新页面或检查网络。');
f946e9dd   hexiaodong   hhh 
256
257
258
259
260
261
262
 
              console.error('CryptoJS未定义，请检查CDN是否加载成功');
              return;
            }
            
            // 对密码进行 MD5 加密
            const encryptedPassword = CryptoJS.MD5(that.password).toString();
            const formData = new URLSearchParams();
ec04c7b4   “wangming”   123 
263
 
            formData.append('account', account);
f946e9dd   hexiaodong   hhh 
264
265
266
 
            formData.append('password', encryptedPassword);
  
            console.log({
ec04c7b4   “wangming”   123 
267
 
              account: account,
f946e9dd   hexiaodong   hhh 
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
 
              password: encryptedPassword
            });
  
            axios({
              url: that.baseUrl + "/api/oauth/Login",
              headers: {
                'accept': 'text/plain',
                'Content-Type': 'application/x-www-form-urlencoded',
              },
              method: 'POST',
              data: formData.toString()
            }).then((res) => {
              if(res.data.code === 200){
                console.log('登录成功，获取到的 token 为:', res.data.data.token);
                axios({
                  url: this.baseUrl + "/api/oauth/CurrentUser",
                  method: 'GET',
                  headers: {
                    Authorization: res.data.data.token
                  },
                }).then((res1) => {
                  console.error(res1)
                  if (res1.data.code === 200) {
                    localStorage.setItem('userId', res1.data.data.userInfo.userId);
                    localStorage.setItem('token', res.data.data.token);
                    localStorage.setItem('username', res1.data.data.userInfo.userName);
                    
                    // 存储选中的门店信息
ec04c7b4   “wangming”   123 
296
297
298
 
                    const selectedStoreInfo = that.storeList.find(function (store) {
                      return that.storeIdStr(store.id) === that.storeIdStr(that.selectedStore);
                    });
f946e9dd   hexiaodong   hhh 
299
 
                    if (selectedStoreInfo) {
27fb1711   “wangming”   feat(erp): WtAcco... 
300
301
302
303
 
                      var toSave = Object.assign({}, selectedStoreInfo);
                      if (toSave.id != null && toSave.id !== '') toSave.id = String(toSave.id);
                      localStorage.setItem('selectedStore', JSON.stringify(toSave));
                      console.log('门店信息已存储:', toSave);
f946e9dd   hexiaodong   hhh 
304
305
306
307
308
309
310
311
312
313
314
315
316
 
                    }
                    // window.alert('登录成功')
                    axios({
                      url: this.baseUrl + "/api/permission/Users/"+res1.data.data.userInfo.userId,
                      method: 'GET',
                      headers: {
                        Authorization: res.data.data.token
                      },
                    }).then((res2) => {
                      console.error(res2)
                      if (res2.data.code === 200) {
                        // 使用用户选择的门店ID，而不是用户信息中的默认门店
                        // 这样收银员可以选择任意门店进行收银
27fb1711   “wangming”   feat(erp): WtAcco... 
317
 
                        const storeIdToUse = String(that.selectedStore || res2.data.data.mdxx || '').trim();
f946e9dd   hexiaodong   hhh 
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
 
                        localStorage.setItem('mdId', storeIdToUse); 
                        axios({
                          url: this.baseUrl + "/api/Extend/WtCk?pageSize=1&ssmd=" + storeIdToUse,
                          method: 'GET',
                          headers: {
                            Authorization: res.data.data.token
                          },
                        }).then((res3) => {
                          console.error(res3)
                          if (res3.data.code === 200 && res3.data.data.list.length > 0) {
                            localStorage.setItem('ckinfo', JSON.stringify(res3.data.data.list[0])); 
                          }else {
                            localStorage.setItem('ckinfo', null); 
                          }
                          // ✅ 再次确保清除客户选择（防止其他地方设置）
                          localStorage.removeItem('hyinfo');
                          // 使用相对路径，部署在 /sy/ 下时跳转到 /sy/home.html
                          window.location.href = 'home.html?fromLogin=true';
                        }) 
                      }
                    }) 
                    
                  }
                })
  
             
                // 将 token 存储到本地存储
                
              } else {
ec04c7b4   “wangming”   123 
347
348
349
350
 
                that.loginError = '登录失败，请检查用户名或密码是否正确。';
                try {
                  window.alert(that.loginError);
                } catch (e) {}
f946e9dd   hexiaodong   hhh 
351
352
 
                console.log('登录失败，错误码:', res.data.code);
              }
ec04c7b4   “wangming”   123 
353
354
355
356
357
358
359
 
            }).catch(function (err) {
              console.error('登录请求异常:', err);
              that.loginError = '网络异常，请检查网络后重试。';
              try {
                window.alert(that.loginError);
              } catch (e) {}
            });
f946e9dd   hexiaodong   hhh 
360
361
362
363
364
365
366
367
 
          }
          // 可添加登录相关方法
        }
      });
    </script>
  </body>
  
  </html>