邃芒慧影、口播(PC) https://neuver.metavatar.cc/
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 
 

1662 Zeilen
48 KiB

  1. <template>
  2. <div class="login-container">
  3. <div class="Version">Version 1.0.8 test</div>
  4. <div class="videoBox">
  5. <video
  6. src="https://video.metavatar.cc/sv/4aaaaa5e-18832dbb5e6/4aaaaa5e-18832dbb5e6.mp4"
  7. muted
  8. autoplay
  9. loop
  10. ></video>
  11. </div>
  12. <!-- 正常登录 isLogin == 1-->
  13. <el-form
  14. v-if="isLogin == 1"
  15. ref="loginFormRef"
  16. :model="loginData"
  17. :rules="loginRules"
  18. class="login-form"
  19. >
  20. <div class="flex text-white items-center">
  21. <span class="flex-1 text-center">{{
  22. $t("login.title") + " " + $t("login.login")
  23. }}</span>
  24. <el-tooltip
  25. class="box-item"
  26. effect="dark"
  27. :content="$t('navbar.LanguageChange')"
  28. placement="top-start"
  29. >
  30. <lang-select class="navItem" style="color: #ffffff" />
  31. </el-tooltip>
  32. </div>
  33. <el-form-item prop="email">
  34. <div class="text-white">
  35. <svg-icon icon-class="user" />
  36. </div>
  37. <el-input
  38. class="flex-1"
  39. ref="email"
  40. size="large"
  41. v-model="loginData.email"
  42. :placeholder="$t('login.email')"
  43. name="email"
  44. />
  45. </el-form-item>
  46. <el-form-item prop="password">
  47. <span class="text-white">
  48. <svg-icon icon-class="password" />
  49. </span>
  50. <el-input
  51. class="flex-1"
  52. v-model="loginData.password"
  53. :placeholder="$t('login.password')"
  54. :type="passwordVisible === false ? 'password' : 'input'"
  55. size="large"
  56. name="password"
  57. @keyup.enter="handleLogin"
  58. />
  59. <span class="mr-2" @click="passwordVisible = !passwordVisible">
  60. <svg-icon
  61. :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
  62. class="text-white cursor-pointer"
  63. />
  64. </span>
  65. </el-form-item>
  66. <!-- 验证码 -->
  67. <el-form-item prop="verifyCode">
  68. <span class="text-white">
  69. <svg-icon icon-class="verify_code" />
  70. </span>
  71. <el-input
  72. v-model="loginData.verifyCode"
  73. auto-complete="off"
  74. :placeholder="$t('login.verifyCode')"
  75. class="flex-1"
  76. @keyup.enter="handleLogin"
  77. />
  78. <span class="captcha">
  79. <img v-if="showCodeImg" :src="verifyCodeUrl" @click="getCode" />
  80. </span>
  81. </el-form-item>
  82. <el-button
  83. size="default"
  84. :loading="loading"
  85. type="primary"
  86. class="loginBtn"
  87. @click.prevent="handleLogin"
  88. >
  89. <el-icon
  90. v-if="isLogining"
  91. style="margin-right: 10px"
  92. class="is-loading"
  93. >
  94. <svg
  95. viewBox="0 0 1024 1024"
  96. xmlns="http://www.w3.org/2000/svg"
  97. data-v-ea893728=""
  98. >
  99. <path
  100. fill="currentColor"
  101. d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
  102. ></path>
  103. </svg>
  104. </el-icon>
  105. {{ $t("login.loginBtn") }}
  106. </el-button>
  107. <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
  108. <div style="margin-bottom: 5px" @click="loginFlag(2)">
  109. <span class="join">{{ $t("login.signUp") }}</span>
  110. </div>
  111. <div style="margin-bottom: 5px">
  112. <span class="join" @click="loginFlag(7)">{{
  113. $t("login.SMSLogin")
  114. }}</span>
  115. </div>
  116. <div>
  117. <span class="join" @click="loginFlag(3)">{{
  118. $t("login.forgetPwd")
  119. }}</span>
  120. </div>
  121. </div>
  122. </el-form>
  123. <!-- 注册账户 isLogin == 2-->
  124. <el-form
  125. v-if="isLogin == 2"
  126. ref="loginFormRef"
  127. :model="loginData2"
  128. :rules="loginRules"
  129. class="login-form"
  130. >
  131. <div class="flex text-white items-center">
  132. <span class="flex-1 text-center">{{
  133. $t("login.title") + " " + $t("login.register")
  134. }}</span>
  135. <el-tooltip
  136. class="box-item"
  137. effect="dark"
  138. :content="$t('navbar.LanguageChange')"
  139. placement="top-start"
  140. >
  141. <lang-select class="navItem" style="color: #ffffff" />
  142. </el-tooltip>
  143. </div>
  144. <el-form-item prop="email">
  145. <div class="text-white">
  146. <svg-icon icon-class="user" />
  147. </div>
  148. <el-input
  149. class="flex-1"
  150. ref="email"
  151. size="large"
  152. v-model="loginData2.email"
  153. :placeholder="$t('login.email')"
  154. name="email"
  155. />
  156. </el-form-item>
  157. <el-form-item prop="password">
  158. <span class="text-white">
  159. <svg-icon icon-class="password" />
  160. </span>
  161. <el-input
  162. class="flex-1"
  163. v-model="loginData2.password"
  164. :placeholder="$t('login.password')"
  165. :type="passwordVisible === false ? 'password' : 'input'"
  166. size="large"
  167. name="password"
  168. />
  169. <span class="mr-2" @click="passwordVisible = !passwordVisible">
  170. <svg-icon
  171. :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
  172. class="text-white cursor-pointer"
  173. />
  174. </span>
  175. </el-form-item>
  176. <el-form-item prop="confirmPassword">
  177. <span class="text-white">
  178. <svg-icon icon-class="password" />
  179. </span>
  180. <el-input
  181. class="flex-1"
  182. v-model="loginData2.confirmPassword"
  183. :placeholder="$t('login.confirmPassword')"
  184. :type="passwordVisible === false ? 'password' : 'input'"
  185. size="large"
  186. name="confirmPassword"
  187. @keyup.enter="handleRegister"
  188. />
  189. <span class="mr-2" @click="passwordVisible = !passwordVisible">
  190. <svg-icon
  191. :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
  192. class="text-white cursor-pointer"
  193. />
  194. </span>
  195. </el-form-item>
  196. <el-button
  197. size="default"
  198. :loading="loading"
  199. type="primary"
  200. class="loginBtn"
  201. @click.prevent="handleRegister"
  202. >
  203. <el-icon
  204. v-if="isRegistering"
  205. style="margin-right: 10px"
  206. class="is-loading"
  207. >
  208. <svg
  209. viewBox="0 0 1024 1024"
  210. xmlns="http://www.w3.org/2000/svg"
  211. data-v-ea893728=""
  212. >
  213. <path
  214. fill="currentColor"
  215. d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
  216. ></path>
  217. </svg>
  218. </el-icon>
  219. {{ $t("login.registerBtn") }}
  220. </el-button>
  221. <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
  222. <div style="margin-bottom: 5px" @click="loginFlag(1)">
  223. <span class="join">{{ $t("login.signIn") }}</span>
  224. </div>
  225. <div>
  226. <span class="join" @click="loginFlag(3)">{{
  227. $t("login.forgetPwd")
  228. }}</span>
  229. </div>
  230. </div>
  231. </el-form>
  232. <!-- 注册账户之后输入短信验证码 isLogin == 6-->
  233. <el-form
  234. v-if="isLogin == 6"
  235. ref="loginFormRef"
  236. :model="loginData6"
  237. :rules="loginRules"
  238. class="login-form"
  239. >
  240. <div class="flex text-white items-center">
  241. <span class="flex-1 text-center">{{
  242. $t("login.title") + " " + $t("login.register")
  243. }}</span>
  244. <el-tooltip
  245. class="box-item"
  246. effect="dark"
  247. :content="$t('navbar.LanguageChange')"
  248. placement="top-start"
  249. >
  250. <lang-select class="navItem" style="color: #ffffff" />
  251. </el-tooltip>
  252. </div>
  253. <el-form-item prop="SMSCode">
  254. <div class="text-white">
  255. <svg-icon icon-class="user" />
  256. </div>
  257. <el-input
  258. class="flex-1"
  259. ref="email"
  260. size="large"
  261. v-model="loginData6.SMSCode"
  262. :placeholder="$t('login.SMSCode')"
  263. name="email"
  264. />
  265. </el-form-item>
  266. <el-button
  267. size="default"
  268. :loading="loading"
  269. type="primary"
  270. class="loginBtn"
  271. @click.prevent="handleRegister"
  272. >
  273. <el-icon
  274. v-if="isRegistering"
  275. style="margin-right: 10px"
  276. class="is-loading"
  277. >
  278. <svg
  279. viewBox="0 0 1024 1024"
  280. xmlns="http://www.w3.org/2000/svg"
  281. data-v-ea893728=""
  282. >
  283. <path
  284. fill="currentColor"
  285. d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
  286. ></path>
  287. </svg>
  288. </el-icon>
  289. {{ $t("login.registerBtn") }}
  290. </el-button>
  291. <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
  292. <div style="margin-bottom: 5px" @click="loginFlag(1)">
  293. <span class="join">{{ $t("login.signIn") }}</span>
  294. </div>
  295. </div>
  296. </el-form>
  297. <!-- 忘记密码 isLogin == 3-->
  298. <el-form
  299. v-if="isLogin == 3"
  300. ref="loginFormRef"
  301. :model="loginData3"
  302. :rules="loginRules"
  303. class="login-form"
  304. >
  305. <div class="flex text-white items-center">
  306. <span class="flex-1 text-center">{{
  307. $t("login.title") + " " + $t("login.forgetPwdTitle")
  308. }}</span>
  309. <el-tooltip
  310. class="box-item"
  311. effect="dark"
  312. :content="$t('navbar.LanguageChange')"
  313. placement="top-start"
  314. >
  315. <lang-select class="navItem" style="color: #ffffff" />
  316. </el-tooltip>
  317. </div>
  318. <el-form-item prop="email">
  319. <div class="text-white">
  320. <svg-icon icon-class="user" />
  321. </div>
  322. <el-input
  323. class="flex-1"
  324. ref="email"
  325. size="large"
  326. v-model="loginData3.email"
  327. :placeholder="$t('login.email')"
  328. name="email"
  329. />
  330. </el-form-item>
  331. <!-- 验证码 -->
  332. <el-form-item prop="code">
  333. <span class="text-white">
  334. <svg-icon icon-class="verify_code" />
  335. </span>
  336. <el-input
  337. v-model="loginData3.code"
  338. auto-complete="off"
  339. :placeholder="$t('login.verifyCode')"
  340. class="flex-1"
  341. @keyup.enter="handleLogin"
  342. />
  343. <span class="captcha">
  344. <img v-if="showCodeImg" :src="verifyCodeUrl" @click="getCode" />
  345. </span>
  346. </el-form-item>
  347. <el-button
  348. size="default"
  349. :loading="loading"
  350. type="primary"
  351. class="loginBtn"
  352. @click.prevent="sendEmailforgetPwd"
  353. >
  354. <el-icon
  355. v-if="isRegistering"
  356. style="margin-right: 10px"
  357. class="is-loading"
  358. >
  359. <svg
  360. viewBox="0 0 1024 1024"
  361. xmlns="http://www.w3.org/2000/svg"
  362. data-v-ea893728=""
  363. >
  364. <path
  365. fill="currentColor"
  366. d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
  367. ></path>
  368. </svg>
  369. </el-icon>
  370. {{ $t("login.SendEmail") }}
  371. </el-button>
  372. <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
  373. <div style="margin-bottom: 5px" @click="loginFlag(1)">
  374. <span class="join">{{ $t("login.signIn") }}</span>
  375. </div>
  376. </div>
  377. </el-form>
  378. <!-- 重置密码 isLogin == 4-->
  379. <el-form
  380. v-if="isLogin == 4"
  381. ref="loginFormRef"
  382. :model="loginData4"
  383. :rules="loginRules"
  384. class="login-form"
  385. >
  386. <div class="flex text-white items-center">
  387. <span class="flex-1 text-center">{{
  388. $t("login.title") + " " + $t("login.resetPassword")
  389. }}</span>
  390. <el-tooltip
  391. class="box-item"
  392. effect="dark"
  393. :content="$t('navbar.LanguageChange')"
  394. placement="top-start"
  395. >
  396. <lang-select class="navItem" style="color: #ffffff" />
  397. </el-tooltip>
  398. </div>
  399. <el-form-item prop="verifyCode">
  400. <span class="text-white">
  401. <svg-icon icon-class="password" />
  402. </span>
  403. <el-input
  404. class="flex-1"
  405. v-model="loginData4.verifyCode"
  406. :placeholder="$t('login.SMSCode')"
  407. :type="'input'"
  408. size="large"
  409. name="password"
  410. />
  411. <span class="mr-2" @click="passwordVisible = !passwordVisible">
  412. <svg-icon
  413. :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
  414. class="text-white cursor-pointer"
  415. />
  416. </span>
  417. </el-form-item>
  418. <el-form-item prop="password">
  419. <span class="text-white">
  420. <svg-icon icon-class="password" />
  421. </span>
  422. <el-input
  423. class="flex-1"
  424. v-model="loginData4.password"
  425. :placeholder="$t('login.newPwd')"
  426. :type="passwordVisible === false ? 'password' : 'input'"
  427. size="large"
  428. name="password"
  429. />
  430. <span class="mr-2" @click="passwordVisible = !passwordVisible">
  431. <svg-icon
  432. :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
  433. class="text-white cursor-pointer"
  434. />
  435. </span>
  436. </el-form-item>
  437. <el-form-item prop="confirmPassword4">
  438. <span class="text-white">
  439. <svg-icon icon-class="password" />
  440. </span>
  441. <el-input
  442. class="flex-1"
  443. v-model="loginData4.confirmPassword4"
  444. :placeholder="$t('login.confirmNewPwd')"
  445. :type="passwordVisible === false ? 'password' : 'input'"
  446. size="large"
  447. name="confirmPassword4"
  448. />
  449. <span class="mr-2" @click="passwordVisible = !passwordVisible">
  450. <svg-icon
  451. :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
  452. class="text-white cursor-pointer"
  453. />
  454. </span>
  455. </el-form-item>
  456. <el-button
  457. size="default"
  458. :loading="loading"
  459. type="primary"
  460. class="loginBtn"
  461. @click.prevent="resetPwdForm"
  462. >
  463. <el-icon
  464. v-if="isRegistering"
  465. style="margin-right: 10px"
  466. class="is-loading"
  467. >
  468. <svg
  469. viewBox="0 0 1024 1024"
  470. xmlns="http://www.w3.org/2000/svg"
  471. data-v-ea893728=""
  472. >
  473. <path
  474. fill="currentColor"
  475. d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
  476. ></path>
  477. </svg>
  478. </el-icon>
  479. {{ $t("login.confirm") }}
  480. </el-button>
  481. <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
  482. <div style="margin-bottom: 5px" @click="loginFlag(1)">
  483. <span class="join">{{ $t("login.signIn") }}</span>
  484. </div>
  485. <!-- <div>
  486. <span
  487. class="join"
  488. @click="router.push({ path: 'createVideo', params: {} })"
  489. >{{ $t("login.gohome") }}</span
  490. >
  491. </div> -->
  492. </div>
  493. </el-form>
  494. <!-- 忘记密码邮件返回 isLogin == 5-->
  495. <el-form
  496. v-if="isLogin == 5"
  497. ref="loginFormRef"
  498. :model="loginData5"
  499. :rules="loginRules"
  500. class="login-form"
  501. >
  502. <div class="flex text-white items-center">
  503. <span class="flex-1 text-center">{{
  504. $t("login.title") + " " + $t("login.setNewPwd")
  505. }}</span>
  506. <el-tooltip
  507. class="box-item"
  508. effect="dark"
  509. :content="$t('navbar.LanguageChange')"
  510. placement="top-start"
  511. >
  512. <lang-select class="navItem" style="color: #ffffff" />
  513. </el-tooltip>
  514. </div>
  515. <el-form-item prop="newPwd">
  516. <div class="text-white">
  517. <svg-icon icon-class="password" />
  518. </div>
  519. <el-input
  520. class="flex-1"
  521. ref="email"
  522. size="large"
  523. v-model="loginData5.newPwd"
  524. :placeholder="$t('login.newPwd')"
  525. :type="passwordVisible === false ? 'password' : 'input'"
  526. name="password"
  527. />
  528. <span class="mr-2" @click="passwordVisible = !passwordVisible">
  529. <svg-icon
  530. :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
  531. class="text-white cursor-pointer"
  532. />
  533. </span>
  534. </el-form-item>
  535. <el-form-item prop="confirmNewPwd">
  536. <div class="text-white">
  537. <svg-icon icon-class="password" />
  538. </div>
  539. <el-input
  540. class="flex-1"
  541. ref="email"
  542. size="large"
  543. v-model="loginData5.confirmNewPwd"
  544. :placeholder="$t('login.confirmNewPwd')"
  545. name="password"
  546. :type="passwordVisible === false ? 'password' : 'input'"
  547. />
  548. <span class="mr-2" @click="passwordVisible = !passwordVisible">
  549. <svg-icon
  550. :icon-class="passwordVisible === false ? 'eye' : 'eye-open'"
  551. class="text-white cursor-pointer"
  552. />
  553. </span>
  554. </el-form-item>
  555. <el-button
  556. size="default"
  557. :loading="loading"
  558. type="primary"
  559. class="loginBtn"
  560. @click.prevent="resetPwdEmail"
  561. >
  562. <el-icon
  563. v-if="isRegistering"
  564. style="margin-right: 10px"
  565. class="is-loading"
  566. >
  567. <svg
  568. viewBox="0 0 1024 1024"
  569. xmlns="http://www.w3.org/2000/svg"
  570. data-v-ea893728=""
  571. >
  572. <path
  573. fill="currentColor"
  574. d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
  575. ></path>
  576. </svg>
  577. </el-icon>
  578. {{ $t("login.confirm") }}
  579. </el-button>
  580. <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
  581. <div style="margin-bottom: 5px" @click="loginFlag(1)">
  582. <span class="join">{{ $t("login.signIn") }}</span>
  583. </div>
  584. </div>
  585. </el-form>
  586. <!-- 短信登录 isLogin == 7-->
  587. <el-form
  588. v-if="isLogin == 7"
  589. ref="loginFormRef"
  590. :model="loginData7"
  591. :rules="loginRules"
  592. class="login-form"
  593. >
  594. <div class="flex text-white items-center">
  595. <span class="flex-1 text-center">{{
  596. $t("login.title") + " " + $t("login.login")
  597. }}</span>
  598. <el-tooltip
  599. class="box-item"
  600. effect="dark"
  601. :content="$t('navbar.LanguageChange')"
  602. placement="top-start"
  603. >
  604. <lang-select class="navItem" style="color: #ffffff" />
  605. </el-tooltip>
  606. </div>
  607. <el-form-item prop="email">
  608. <div class="text-white">
  609. <svg-icon icon-class="user" />
  610. </div>
  611. <el-input
  612. class="flex-1"
  613. ref="email"
  614. size="large"
  615. v-model="loginData7.email"
  616. :placeholder="$t('login.email')"
  617. name="email"
  618. />
  619. </el-form-item>
  620. <!-- 验证码 -->
  621. <el-form-item prop="verifyCode">
  622. <span class="text-white">
  623. <svg-icon icon-class="verify_code" />
  624. </span>
  625. <el-input
  626. v-model="loginData7.verifyCode"
  627. auto-complete="off"
  628. :placeholder="$t('login.SMSLogin')"
  629. class="flex-1"
  630. />
  631. <span class="captcha">
  632. <div v-if="SMSTimeOut == 0" @click="getSMSToLogin" class="sendSMSBtn">
  633. {{ $t("login.sendSMS") }}
  634. </div>
  635. <div v-if="SMSTimeOut != 0" class="sendSMSBtn">{{ SMSTimeOut }}s</div>
  636. </span>
  637. </el-form-item>
  638. <el-button
  639. size="default"
  640. :loading="loading"
  641. type="primary"
  642. class="loginBtn"
  643. @click.prevent="handleLoginBySMS"
  644. >
  645. <el-icon
  646. v-if="isLogining"
  647. style="margin-right: 10px"
  648. class="is-loading"
  649. >
  650. <svg
  651. viewBox="0 0 1024 1024"
  652. xmlns="http://www.w3.org/2000/svg"
  653. data-v-ea893728=""
  654. >
  655. <path
  656. fill="currentColor"
  657. d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
  658. ></path>
  659. </svg>
  660. </el-icon>
  661. {{ $t("login.loginBtn") }}
  662. </el-button>
  663. <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
  664. <div style="margin-bottom: 5px" @click="loginFlag(2)">
  665. <span class="join">{{ $t("login.signUp") }}</span>
  666. </div>
  667. <div style="margin-bottom: 5px">
  668. <span class="join" @click="loginFlag(1)">{{
  669. $t("login.pwsLogin")
  670. }}</span>
  671. </div>
  672. <div>
  673. <span class="join" @click="loginFlag(3)">{{
  674. $t("login.forgetPwd")
  675. }}</span>
  676. </div>
  677. </div>
  678. </el-form>
  679. <!-- 邀请码填写 isLogin == 8-->
  680. <el-form
  681. v-if="isLogin == 8"
  682. ref="loginFormRef"
  683. :model="loginData7"
  684. :rules="loginRules"
  685. class="login-form"
  686. >
  687. <div class="flex text-white items-center">
  688. <span class="flex-1 text-center">{{
  689. $t("login.title") + " " + $t("login.setInvitatioCode")
  690. }}</span>
  691. <el-tooltip
  692. class="box-item"
  693. effect="dark"
  694. :content="$t('navbar.LanguageChange')"
  695. placement="top-start"
  696. >
  697. <lang-select class="navItem" style="color: #ffffff" />
  698. </el-tooltip>
  699. </div>
  700. <el-form-item prop="verifyCode">
  701. <div class="text-white">
  702. <svg-icon icon-class="user" />
  703. </div>
  704. <el-input
  705. class="flex-1"
  706. ref="invitatioCode"
  707. size="large"
  708. v-model="loginData8.invitatioCode"
  709. :placeholder="$t('login.invitatioCode')"
  710. name="invitatioCode"
  711. />
  712. </el-form-item>
  713. <el-button
  714. size="default"
  715. :loading="loading"
  716. type="primary"
  717. class="loginBtn"
  718. @click.prevent="handleInvitatioCode"
  719. >
  720. <el-icon
  721. v-if="isLogining"
  722. style="margin-right: 10px"
  723. class="is-loading"
  724. >
  725. <svg
  726. viewBox="0 0 1024 1024"
  727. xmlns="http://www.w3.org/2000/svg"
  728. data-v-ea893728=""
  729. >
  730. <path
  731. fill="currentColor"
  732. d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32zm0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32zm448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32zm-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32zM195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0zm-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"
  733. ></path>
  734. </svg>
  735. </el-icon>
  736. {{ $t("login.confirm") }}
  737. </el-button>
  738. <div :class="currentLan == 'zh-cn' ? 'bottomBtnCN' : 'bottomBtnEN'">
  739. <div style="margin-bottom: 5px" @click="loginFlag(1)">
  740. <span class="join">{{ $t("login.signIn") }}</span>
  741. </div>
  742. <div style="margin-bottom: 5px">
  743. <span class="join" @click="router.push('/createVideo')">{{
  744. $t("login.gohome")
  745. }}</span>
  746. </div>
  747. </div>
  748. </el-form>
  749. </div>
  750. </template>
  751. <script setup lang="ts">
  752. import LangSelect from "@/components/LangSelect/index.vue";
  753. import SvgIcon from "@/components/SvgIcon/index.vue";
  754. import {
  755. register,
  756. login,
  757. sendRegisterEmail,
  758. getCodeImgUrl,
  759. sendUpdPwdEmailApi,
  760. doUpdPassApi,
  761. resetPwdEmailApi,
  762. resetPwdFormApi,
  763. getSMSToLoginApi,
  764. loginByMSMApi,
  765. doFindInviteCode,
  766. doUpdateInviteCode,
  767. } from "@/apis/login";
  768. import axios from "axios";
  769. // 状态管理依赖
  770. import { userInfoModules } from "@/store/modules/userInfo";
  771. // API依赖
  772. import {
  773. LocationQuery,
  774. LocationQueryValue,
  775. useRoute,
  776. useRouter,
  777. } from "vue-router";
  778. import { useI18n } from "vue-i18n";
  779. const { locale } = useI18n();
  780. const currentLan = ref(locale);
  781. const userInfoPinia = userInfoModules();
  782. const route = useRoute();
  783. const router = useRouter();
  784. /**
  785. * 按钮loading
  786. */
  787. const loading = ref(false);
  788. /**
  789. * 密码是否可见
  790. */
  791. const passwordVisible = ref(false);
  792. /**
  793. * 验证码图片Base64字符串
  794. */
  795. const verifyCodeUrl = ref();
  796. /**
  797. * 登录/注册 显示哪个表单
  798. */
  799. const isLogin = ref(1);
  800. const showCodeImg = ref(true);
  801. /**
  802. * 登录表单引用
  803. */
  804. const loginFormRef = ref(ElForm);
  805. const isLogining = ref(false);
  806. const isRegistering = ref(false);
  807. const loginData = ref({
  808. email: "",
  809. password: "",
  810. verifyCode: "",
  811. });
  812. const loginData2 = ref({
  813. email: "",
  814. password: "",
  815. confirmPassword: "",
  816. });
  817. const loginData3 = ref({
  818. email: "",
  819. code: "",
  820. });
  821. const loginData4 = ref({
  822. verifyCode: "",
  823. password: "",
  824. confirmPassword4: "",
  825. });
  826. const loginData5 = ref({
  827. newPwd: "",
  828. confirmNewPwd: "",
  829. });
  830. const loginData6 = ref({
  831. SMSCode: "",
  832. });
  833. const loginData7 = ref({
  834. email: "",
  835. verifyCode: "",
  836. });
  837. const loginData8 = ref({
  838. invitatioCode: "",
  839. });
  840. const loginRules = ref({
  841. email: [
  842. {
  843. required: true,
  844. trigger: "blur",
  845. validator: emailValidator,
  846. },
  847. ],
  848. password: [{ required: true, trigger: "blur", validator: passwordValidator }],
  849. confirmPassword: [
  850. { required: true, trigger: "blur", validator: confirmPasswordValidator },
  851. ],
  852. verifyCode: [
  853. {
  854. required: true,
  855. trigger: "blur",
  856. message:
  857. currentLan.value == "zh-cn"
  858. ? "请输入验证码"
  859. : "Please input verifyCode",
  860. },
  861. ],
  862. invitatioCode: [
  863. {
  864. required: true,
  865. trigger: "blur",
  866. message:
  867. currentLan.value == "zh-cn"
  868. ? "请输入邀请码"
  869. : "Please input invitation code",
  870. },
  871. ],
  872. oldPassword: [
  873. { required: true, trigger: "blur", validator: passwordValidator },
  874. ],
  875. confirmPassword4: [
  876. { required: true, trigger: "blur", validator: confirmPasswordValidator4 },
  877. ],
  878. newPwd: [{ required: true, trigger: "blur", validator: passwordValidator }],
  879. confirmNewPwd: [
  880. { required: true, trigger: "blur", validator: confirmPasswordValidator5 },
  881. ],
  882. });
  883. watch(currentLan, (newValue, oldValue) => {
  884. const loginRule = loginRules.value;
  885. loginRule.verifyCode[0].message =
  886. newValue == "zh-cn" ? "请输入验证码" : "Please input verifyCode";
  887. setTimeout(() => {
  888. loginFormRef.value.resetFields();
  889. getInfo();
  890. }, 100);
  891. // 切换语言刷新验证码
  892. getCode();
  893. });
  894. /**
  895. * @description: 切换登录/注册状态
  896. */
  897. function loginFlag(type: number) {
  898. isLogin.value = type;
  899. // 切换登录/注册状态刷新验证码
  900. getCode();
  901. setTimeout(() => {
  902. loginFormRef.value.resetFields();
  903. }, 100);
  904. }
  905. /**
  906. * @description: 将账户/密码存储在本地
  907. * @param:email,password
  908. */
  909. function saveInfo(data: any) {
  910. const userInfo = JSON.stringify({
  911. email: data.phone,
  912. password: data.password,
  913. });
  914. // 将用户信息加密
  915. const enCodeUserInfo = encodeURI(userInfo);
  916. localStorage.setItem("userInfo", enCodeUserInfo);
  917. }
  918. /**
  919. * @description: 将存储在本地的账户/密码恢复至登录表单
  920. */
  921. function getInfo() {
  922. const data = localStorage.getItem("userInfo");
  923. // 将用户信息解密
  924. const deCodeUserInfo = decodeURI(data as any);
  925. const userInfo = JSON.parse(deCodeUserInfo);
  926. if (userInfo) {
  927. loginData.value.email = userInfo.email ? userInfo.email : "";
  928. loginData.value.password = userInfo.password ? userInfo.password : "";
  929. }
  930. }
  931. //#region 密码校验部分
  932. /**
  933. * 邮箱校验器
  934. */
  935. function emailValidator(rule: any, value: any, callback: any) {
  936. const msg =
  937. currentLan.value == "zh-cn"
  938. ? "手机号不能为空!"
  939. : "The E-amil can not be empty";
  940. const msg2 =
  941. currentLan.value == "zh-cn"
  942. ? "手机号格式不正确!"
  943. : "Incorrect email format";
  944. const phoneReg = /^[1][3-9]\d{9}$/;
  945. const emailReg =
  946. /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  947. if (!value) {
  948. callback(new Error(msg));
  949. } else if (!phoneReg.test(value)) {
  950. callback(new Error(msg2));
  951. } else {
  952. callback();
  953. }
  954. }
  955. /**
  956. * 密码校验器
  957. */
  958. function passwordValidator(rule: any, value: any, callback: any) {
  959. const msg =
  960. currentLan.value == "zh-cn"
  961. ? "密码不能为空!"
  962. : "The password can not be empty";
  963. const msg2 =
  964. currentLan.value == "zh-cn"
  965. ? "密码至少为6位!"
  966. : "The password can not be less than 6 digits";
  967. if (!value) {
  968. callback(new Error(msg));
  969. } else if (value.length < 6) {
  970. callback(new Error(msg2));
  971. } else {
  972. callback();
  973. }
  974. }
  975. /**
  976. * 确认密码校验器
  977. */
  978. function confirmPasswordValidator(rule: any, value: any, callback: any) {
  979. const msg =
  980. currentLan.value == "zh-cn"
  981. ? "确认密码不能为空!"
  982. : "The Confirm password can not be empty";
  983. const msg2 =
  984. currentLan.value == "zh-cn"
  985. ? "两次输入密码不一致!"
  986. : "Confirm Passward entered should match";
  987. if (!value) {
  988. callback(new Error(msg));
  989. } else if (value !== loginData2.value.password) {
  990. callback(new Error(msg2));
  991. } else {
  992. callback();
  993. }
  994. }
  995. /**
  996. * 确认密码校验器
  997. */
  998. function confirmPasswordValidator4(rule: any, value: any, callback: any) {
  999. const msg =
  1000. currentLan.value == "zh-cn"
  1001. ? "确认密码不能为空!"
  1002. : "The Confirm password can not be empty";
  1003. const msg2 =
  1004. currentLan.value == "zh-cn"
  1005. ? "两次输入密码不一致!"
  1006. : "Confirm Passward entered should match";
  1007. if (!value) {
  1008. callback(new Error(msg));
  1009. } else if (value !== loginData4.value.password) {
  1010. callback(new Error(msg2));
  1011. } else {
  1012. callback();
  1013. }
  1014. }
  1015. function confirmPasswordValidator5(rule: any, value: any, callback: any) {
  1016. const msg =
  1017. currentLan.value == "zh-cn"
  1018. ? "确认密码不能为空!"
  1019. : "The Confirm password can not be empty";
  1020. const msg2 =
  1021. currentLan.value == "zh-cn"
  1022. ? "两次输入密码不一致!"
  1023. : "Confirm Passward entered should match";
  1024. if (!value) {
  1025. callback(new Error(msg));
  1026. } else if (value !== loginData5.value.newPwd) {
  1027. callback(new Error(msg2));
  1028. } else {
  1029. callback();
  1030. }
  1031. }
  1032. //#endregion ----------------------------
  1033. // 登录行为
  1034. function handleLogin() {
  1035. loginFormRef.value.validate((val: any) => {
  1036. if (val) {
  1037. const data = {
  1038. phone: loginData.value.email,
  1039. password: loginData.value.password,
  1040. code: loginData.value.verifyCode,
  1041. };
  1042. isLogining.value = true;
  1043. doLogin(data);
  1044. } else {
  1045. const msg =
  1046. currentLan.value == "zh-cn"
  1047. ? "请检查信息格式!"
  1048. : "Please check the format !";
  1049. ElMessage.error(msg);
  1050. return;
  1051. }
  1052. });
  1053. }
  1054. // 注册行为
  1055. function handleRegister() {
  1056. loginFormRef.value.validate((val: any) => {
  1057. if (val) {
  1058. const data = {
  1059. phone: loginData2.value.email,
  1060. password: loginData2.value.password,
  1061. };
  1062. isRegistering.value = true;
  1063. doRegister(data);
  1064. } else {
  1065. const msg =
  1066. currentLan.value == "zh-cn"
  1067. ? "请检查信息格式!"
  1068. : "Please check the format !";
  1069. ElMessage.error(msg);
  1070. return;
  1071. }
  1072. });
  1073. }
  1074. //#region 忘记密码 表单3
  1075. function sendEmailforgetPwd() {
  1076. const msg =
  1077. currentLan.value == "zh-cn"
  1078. ? "短信验证码已发送至您的手机,请注意查收"
  1079. : "The SMS verification code has been sent to your mobile phone, please check it";
  1080. loginFormRef.value.validate(async (val: any) => {
  1081. if (val) {
  1082. const data = {
  1083. phone: loginData3.value.email,
  1084. code: loginData3.value.code,
  1085. };
  1086. await sendUpdPwdEmailApi(data)
  1087. .then((res) => {
  1088. console.log(res, "res");
  1089. ElMessage.success(msg);
  1090. isLogin.value = 4;
  1091. })
  1092. .catch((err) => {
  1093. console.log(err, "err");
  1094. ElMessage.error(err.message);
  1095. });
  1096. } else {
  1097. const msg =
  1098. currentLan.value == "zh-cn"
  1099. ? "请检查信息格式!"
  1100. : "Please check the format !";
  1101. ElMessage.error(msg);
  1102. return;
  1103. }
  1104. });
  1105. }
  1106. //#endregion --------------------------
  1107. //#region 忘记密码 表单5
  1108. function resetPwdEmail() {
  1109. loginFormRef.value.validate(async (val: any) => {
  1110. if (val) {
  1111. try {
  1112. const res = await resetPwdEmailApi({
  1113. pwd: loginData5.value.newPwd,
  1114. ticket: route.query.ticket,
  1115. });
  1116. localStorage.removeItem("AccessToken");
  1117. loginData.value.email = route.query.email + "";
  1118. loginData.value.password = "";
  1119. isLogin.value = 1;
  1120. router.push({ path: "login", query: {} });
  1121. } catch (error: any) {
  1122. ElMessage.error(error);
  1123. console.log(error);
  1124. }
  1125. } else {
  1126. const msg =
  1127. currentLan.value == "zh-cn"
  1128. ? "请检查信息格式!"
  1129. : "Please check the format !";
  1130. ElMessage.error(msg);
  1131. return;
  1132. }
  1133. });
  1134. }
  1135. //#endregion --------------------------
  1136. //#region 重置密码 表单4
  1137. function resetPwdForm() {
  1138. loginFormRef.value.validate(async (val: any) => {
  1139. if (val) {
  1140. try {
  1141. const res = await doUpdPassApi({
  1142. phone: loginData3.value.email,
  1143. code: loginData4.value.verifyCode,
  1144. pwd: loginData4.value.password,
  1145. });
  1146. localStorage.removeItem("AccessToken");
  1147. loginData.value.password = "";
  1148. isLogin.value = 1;
  1149. ElMessage.success(
  1150. currentLan.value == "zh-cn"
  1151. ? "重置密码成功!"
  1152. : "Reset password successfully"
  1153. );
  1154. // router.push({ path: "login", query: {} });
  1155. } catch (error: any) {
  1156. ElMessage.error(error.message);
  1157. console.log(error);
  1158. }
  1159. } else {
  1160. const msg =
  1161. currentLan.value == "zh-cn"
  1162. ? "请检查信息格式!"
  1163. : "Please check the format !";
  1164. ElMessage.error(msg);
  1165. return;
  1166. }
  1167. });
  1168. }
  1169. //#endregion --------------------------
  1170. //#region 短信登录 表单7
  1171. // 获取验证码
  1172. const SMSTimeOut = ref(0);
  1173. async function getSMSToLogin() {
  1174. let phoneReg = /^[1][3-9]\d{9}$/;
  1175. let phoneValide = phoneReg.test(loginData7.value.email);
  1176. if (!phoneValide) {
  1177. ElMessage.error(
  1178. currentLan.value == "zh-cn"
  1179. ? "请输入正确的手机号!"
  1180. : "Please enter the correct phone number!"
  1181. );
  1182. return;
  1183. }
  1184. try {
  1185. await getSMSToLoginApi(Number(loginData7.value.email)).then((res) => {
  1186. ElMessage.success(
  1187. currentLan.value == "zh-cn"
  1188. ? "短信验证码发送成功!"
  1189. : "SMS verification code sent successfully!"
  1190. );
  1191. SMSTimeOut.value = 60;
  1192. const timer = setInterval(() => {
  1193. if (SMSTimeOut.value != 0) {
  1194. SMSTimeOut.value--;
  1195. } else {
  1196. clearInterval(timer);
  1197. }
  1198. }, 1000);
  1199. });
  1200. } catch (error: any) {
  1201. ElMessage.error(error.message);
  1202. }
  1203. }
  1204. // 登录行为
  1205. function handleLoginBySMS() {
  1206. loginFormRef.value.validate((val: any) => {
  1207. if (val) {
  1208. const data = {
  1209. phone: loginData7.value.email,
  1210. code: loginData7.value.verifyCode,
  1211. };
  1212. isLogining.value = true;
  1213. doLoginByMSM(data);
  1214. } else {
  1215. const msg =
  1216. currentLan.value == "zh-cn"
  1217. ? "请检查信息格式!"
  1218. : "Please check the format !";
  1219. ElMessage.error(msg);
  1220. return;
  1221. }
  1222. });
  1223. }
  1224. async function doLoginByMSM(data: any) {
  1225. const msg =
  1226. currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!";
  1227. await loginByMSMApi(data)
  1228. .then(async (res: any) => {
  1229. console.log(res, "res");
  1230. localStorage.setItem("AccessToken", res.data.token);
  1231. saveInfo(data);
  1232. isLogining.value = false;
  1233. // await checkInviteCode();
  1234. ElMessage.success(msg);
  1235. router.push("/createVideo");
  1236. // 注册成功将账号密码保存到本地
  1237. })
  1238. .catch((err) => {
  1239. console.log(err, "err");
  1240. // 登录失败刷新验证码
  1241. getCode();
  1242. ElMessage.error(err.message);
  1243. isLogining.value = false;
  1244. if (err.code == 2112) {
  1245. reSendEmail(data.email);
  1246. }
  1247. });
  1248. }
  1249. //#endregion --------------------------
  1250. //#region 查询邀请码 表单8
  1251. /**
  1252. * @description:查询用户邀请码状态
  1253. */
  1254. async function checkInviteCode() {
  1255. try {
  1256. const res = await doFindInviteCode();
  1257. // console.log(res, '查询用户邀请码数据')
  1258. const status = res.data.status;
  1259. // 当没有邀请码时,切换输入验证码页面
  1260. if (status == 0) {
  1261. isLogin.value = 8;
  1262. // 有邀请码直接前往我的页面
  1263. } else if (status == 1) {
  1264. userInfoPinia.getUserInfo(); //保存邮箱到pinia
  1265. ElMessage.success(
  1266. 'currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"'
  1267. );
  1268. router.push({
  1269. path: "/createVideo",
  1270. });
  1271. } else {
  1272. router.push("/createVideo");
  1273. }
  1274. } catch (error: any) {
  1275. console.log(error, "error");
  1276. ElMessage.error(error.message);
  1277. }
  1278. }
  1279. // 填写邀请码
  1280. async function handleInvitatioCode() {
  1281. const data = {
  1282. inviteCode: loginData8.value.invitatioCode,
  1283. };
  1284. try {
  1285. const res = await doUpdateInviteCode(data);
  1286. userInfoPinia.getUserInfo(); //保存邮箱到pinia
  1287. ElMessage.success(
  1288. 'currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"'
  1289. );
  1290. router.push({
  1291. path: "/createVideo",
  1292. });
  1293. } catch (error: any) {
  1294. console.log(error, "error");
  1295. ElMessage.error(error.message);
  1296. }
  1297. }
  1298. //#endregion -----------------------
  1299. function getCode() {
  1300. showCodeImg.value = false;
  1301. axios({
  1302. url: getCodeImgUrl,
  1303. method: "get",
  1304. }).then(() => {
  1305. verifyCodeUrl.value = getCodeImgUrl;
  1306. showCodeImg.value = true;
  1307. });
  1308. }
  1309. /**
  1310. * @description:注册
  1311. * @param {Object} data
  1312. * @return: data
  1313. */
  1314. async function doRegister(data: object) {
  1315. const msg =
  1316. currentLan.value == "zh-cn" ? "注册成功!" : "Registered successfully";
  1317. await register(data)
  1318. .then((res) => {
  1319. console.log(res, "res");
  1320. isRegistering.value = false;
  1321. ElMessage.success(msg);
  1322. isLogin.value = 1;
  1323. // 注册成功将账号密码保存到本地
  1324. saveInfo(data);
  1325. router.go(0);
  1326. })
  1327. .catch((err) => {
  1328. // 注册失败刷新验证码
  1329. getCode();
  1330. isRegistering.value = false;
  1331. console.log(err, "err");
  1332. ElMessage.error(err.message);
  1333. });
  1334. }
  1335. /**
  1336. * @description:登录
  1337. * @param {Object} data
  1338. * @return: data
  1339. */
  1340. async function doLogin(data: any) {
  1341. const msg =
  1342. currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!";
  1343. await login(data)
  1344. .then(async (res) => {
  1345. console.log(res, "res");
  1346. localStorage.setItem("AccessToken", res.data.token);
  1347. // 注册成功将账号密码保存到本地
  1348. saveInfo(data);
  1349. isLogining.value = false;
  1350. // await checkInviteCode();
  1351. userInfoPinia.getUserInfo(); //保存邮箱到pinia
  1352. ElMessage.success(msg);
  1353. router.push("/createVideo");
  1354. })
  1355. .catch((err) => {
  1356. console.log(err, "err");
  1357. // 登录失败刷新验证码
  1358. getCode();
  1359. ElMessage.error(err.message);
  1360. isLogining.value = false;
  1361. if (err.code == 2112) {
  1362. reSendEmail(data.email);
  1363. }
  1364. });
  1365. }
  1366. /**
  1367. * @description:重新发送邮件
  1368. * @param {string} email
  1369. * @return: data
  1370. */
  1371. async function reSendEmail(email: string) {
  1372. const msg =
  1373. currentLan.value == "zh-cn"
  1374. ? "确认信息已发送至您的邮箱,请注意查收!"
  1375. : "An email has been send to you, Please pay attention to confirm !";
  1376. await sendRegisterEmail(email)
  1377. .then((res) => {
  1378. console.log(res, "res");
  1379. ElMessage.success(msg);
  1380. })
  1381. .catch((err) => {
  1382. console.log(err, "err");
  1383. ElMessage.error(err.message);
  1384. });
  1385. }
  1386. onMounted(() => {
  1387. getCode();
  1388. getInfo();
  1389. // 重置密码
  1390. // if (router.currentRoute.value.params.type) {
  1391. // // isLogin.value = Number(router.currentRoute.value.params.type);
  1392. // isLogin.value = 4;
  1393. // }
  1394. // if (router.currentRoute.value.params.type) {
  1395. // // isLogin.value = Number(router.currentRoute.value.params.type);
  1396. // isLogin.value = 4;
  1397. // }
  1398. if (route.query.type) {
  1399. isLogin.value = 4;
  1400. }
  1401. //有resetPwd则说明是重置密码邮件来的
  1402. if (route.query.resetPwd) {
  1403. isLogin.value = 5;
  1404. // route.query.ticket
  1405. }
  1406. });
  1407. </script>
  1408. <style lang="scss" scoped>
  1409. .login-container {
  1410. position: relative;
  1411. width: 100%;
  1412. // width: 1920px;
  1413. // height: 1080px;
  1414. min-height: 100%;
  1415. overflow: hidden;
  1416. // background-color: #2d3a4b;
  1417. .Version {
  1418. position: absolute;
  1419. bottom: 20px;
  1420. right: 20px;
  1421. color: #ffffff;
  1422. }
  1423. .login-form {
  1424. position: absolute;
  1425. top: 46%;
  1426. left: 10%;
  1427. width: 520px;
  1428. max-width: 100%;
  1429. padding: 20px;
  1430. overflow: hidden;
  1431. backdrop-filter: blur(3px);
  1432. background: linear-gradient(
  1433. 123.64deg,
  1434. rgba(188, 193, 196, 0.1) -22.71%,
  1435. rgba(255, 255, 255, 0.039) 70.04%
  1436. );
  1437. border-radius: 20px;
  1438. transform: translateY(-50%);
  1439. border: 1px solid #cacaca;
  1440. transition: all 0.15s;
  1441. .captcha {
  1442. position: absolute;
  1443. top: 0;
  1444. right: 0;
  1445. img {
  1446. width: 120px;
  1447. height: 48px;
  1448. cursor: pointer;
  1449. }
  1450. .sendSMSBtn {
  1451. width: 120px;
  1452. height: 48px;
  1453. line-height: 48px;
  1454. color: #fff;
  1455. text-align: center;
  1456. background: linear-gradient(270deg, #4b61dc, #15d1b8);
  1457. }
  1458. }
  1459. &:hover {
  1460. backdrop-filter: blur(7px);
  1461. }
  1462. .items-center {
  1463. padding: 20px;
  1464. font-size: 30px;
  1465. }
  1466. .el-form-item {
  1467. .text-white {
  1468. padding: 8px;
  1469. }
  1470. }
  1471. }
  1472. }
  1473. .loginBtn {
  1474. width: 100%;
  1475. height: 40px;
  1476. background: linear-gradient(270deg, #4b61dc, #15d1b8);
  1477. transition: all 0.3s;
  1478. &:hover {
  1479. transform: scale(1.02);
  1480. }
  1481. }
  1482. .bottomBtnCN {
  1483. display: flex;
  1484. justify-content: space-between;
  1485. align-items: center;
  1486. padding: 0 10px;
  1487. color: #fff;
  1488. text-align: center;
  1489. margin-top: 20px;
  1490. .join {
  1491. cursor: pointer;
  1492. border-bottom: 2px solid #ffffff00;
  1493. padding: 0 3px;
  1494. padding-bottom: 2px;
  1495. transition: all 0.3s;
  1496. &:hover {
  1497. border-bottom: 2px solid #ffffff;
  1498. }
  1499. }
  1500. }
  1501. .bottomBtnEN {
  1502. padding: 0 10px;
  1503. color: #fff;
  1504. text-align: center;
  1505. margin-top: 20px;
  1506. .join {
  1507. cursor: pointer;
  1508. border-bottom: 2px solid #ffffff00;
  1509. padding: 0 3px;
  1510. padding-bottom: 2px;
  1511. transition: all 0.3s;
  1512. &:hover {
  1513. border-bottom: 2px solid #ffffff;
  1514. }
  1515. }
  1516. }
  1517. .videoBox {
  1518. position: absolute;
  1519. top: 0;
  1520. left: 0;
  1521. width: 100%;
  1522. height: 100%;
  1523. z-index: -1;
  1524. video {
  1525. width: 100%;
  1526. height: 100%;
  1527. object-fit: fill;
  1528. }
  1529. }
  1530. .el-form-item {
  1531. background: rgb(0 0 0 / 10%);
  1532. border: 1px solid #ffffff2d;
  1533. border-radius: 5px;
  1534. }
  1535. .el-input {
  1536. background: transparent;
  1537. // 子组件 scoped 无效,使用 :deep
  1538. :deep(.el-input__wrapper) {
  1539. padding: 0;
  1540. background: transparent;
  1541. box-shadow: none;
  1542. .el-input__inner {
  1543. color: #fff;
  1544. background: transparent;
  1545. border: 0;
  1546. border-radius: 0;
  1547. caret-color: #fff;
  1548. &:-webkit-autofill {
  1549. box-shadow: 0 0 0 1000px transparent inset !important;
  1550. -webkit-text-fill-color: #fff !important;
  1551. }
  1552. // 设置输入框自动填充的延迟属性
  1553. &:-webkit-autofill,
  1554. &:-webkit-autofill:hover,
  1555. &:-webkit-autofill:focus,
  1556. &:-webkit-autofill:active {
  1557. transition: color 99999s ease-out, background-color 99999s ease-out;
  1558. transition-delay: 99999s;
  1559. }
  1560. }
  1561. }
  1562. }
  1563. @keyframes rotate {
  1564. from {
  1565. transform: rotate(0deg);
  1566. }
  1567. to {
  1568. transform: rotate(360deg);
  1569. }
  1570. }
  1571. </style>