邃芒慧影、口播(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.
 
 
 
 

1672 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. 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. * 获取页面标题
  786. */
  787. const title = ref(route.query.p || '')
  788. if (title) {
  789. localStorage.setItem("title", title.value)
  790. document.title = 'Metavatar-' + title.value
  791. }
  792. /**
  793. * 按钮loading
  794. */
  795. const loading = ref(false);
  796. /**
  797. * 密码是否可见
  798. */
  799. const passwordVisible = ref(false);
  800. /**
  801. * 验证码图片Base64字符串
  802. */
  803. const verifyCodeUrl = ref();
  804. /**
  805. * 登录/注册 显示哪个表单
  806. */
  807. const isLogin = ref(1);
  808. const showCodeImg = ref(true);
  809. /**
  810. * 登录表单引用
  811. */
  812. const loginFormRef = ref(ElForm);
  813. const isLogining = ref(false);
  814. const isRegistering = ref(false);
  815. const loginData = ref({
  816. email: "",
  817. password: "",
  818. verifyCode: "",
  819. });
  820. const loginData2 = ref({
  821. email: "",
  822. password: "",
  823. confirmPassword: "",
  824. });
  825. const loginData3 = ref({
  826. email: "",
  827. code: "",
  828. });
  829. const loginData4 = ref({
  830. verifyCode: "",
  831. password: "",
  832. confirmPassword4: "",
  833. });
  834. const loginData5 = ref({
  835. newPwd: "",
  836. confirmNewPwd: "",
  837. });
  838. const loginData6 = ref({
  839. SMSCode: "",
  840. });
  841. const loginData7 = ref({
  842. email: "",
  843. verifyCode: "",
  844. });
  845. const loginData8 = ref({
  846. invitatioCode: "",
  847. });
  848. const loginRules = ref({
  849. email: [
  850. {
  851. required: true,
  852. trigger: "blur",
  853. validator: emailValidator,
  854. },
  855. ],
  856. password: [{ required: true, trigger: "blur", validator: passwordValidator }],
  857. confirmPassword: [
  858. { required: true, trigger: "blur", validator: confirmPasswordValidator },
  859. ],
  860. verifyCode: [
  861. {
  862. required: true,
  863. trigger: "blur",
  864. message:
  865. currentLan.value == "zh-cn"
  866. ? "请输入验证码"
  867. : "Please input verifyCode",
  868. },
  869. ],
  870. invitatioCode: [
  871. {
  872. required: true,
  873. trigger: "blur",
  874. message:
  875. currentLan.value == "zh-cn"
  876. ? "请输入邀请码"
  877. : "Please input invitation code",
  878. },
  879. ],
  880. oldPassword: [
  881. { required: true, trigger: "blur", validator: passwordValidator },
  882. ],
  883. confirmPassword4: [
  884. { required: true, trigger: "blur", validator: confirmPasswordValidator4 },
  885. ],
  886. newPwd: [{ required: true, trigger: "blur", validator: passwordValidator }],
  887. confirmNewPwd: [
  888. { required: true, trigger: "blur", validator: confirmPasswordValidator5 },
  889. ],
  890. });
  891. watch(currentLan, (newValue, oldValue) => {
  892. const loginRule = loginRules.value;
  893. loginRule.verifyCode[0].message =
  894. newValue == "zh-cn" ? "请输入验证码" : "Please input verifyCode";
  895. setTimeout(() => {
  896. loginFormRef.value.resetFields();
  897. getInfo();
  898. }, 100);
  899. // 切换语言刷新验证码
  900. getCode();
  901. });
  902. /**
  903. * @description: 切换登录/注册状态
  904. */
  905. function loginFlag(type: number) {
  906. isLogin.value = type;
  907. // 切换登录/注册状态刷新验证码
  908. getCode();
  909. setTimeout(() => {
  910. loginFormRef.value.resetFields();
  911. }, 100);
  912. }
  913. /**
  914. * @description: 将账户/密码存储在本地
  915. * @param:email,password
  916. */
  917. function saveInfo(data: any) {
  918. const userInfo = JSON.stringify({
  919. email: data.phone,
  920. password: data.password,
  921. });
  922. // 将用户信息加密
  923. const enCodeUserInfo = encodeURI(userInfo);
  924. localStorage.setItem("userInfo", enCodeUserInfo);
  925. }
  926. /**
  927. * @description: 将存储在本地的账户/密码恢复至登录表单
  928. */
  929. function getInfo() {
  930. const data = localStorage.getItem("userInfo");
  931. // 将用户信息解密
  932. const deCodeUserInfo = decodeURI(data as any);
  933. const userInfo = JSON.parse(deCodeUserInfo);
  934. if (userInfo) {
  935. loginData.value.email = userInfo.email ? userInfo.email : "";
  936. loginData.value.password = userInfo.password ? userInfo.password : "";
  937. }
  938. }
  939. //#region 密码校验部分
  940. /**
  941. * 邮箱校验器
  942. */
  943. function emailValidator(rule: any, value: any, callback: any) {
  944. const msg =
  945. currentLan.value == "zh-cn"
  946. ? "手机号不能为空!"
  947. : "The E-amil can not be empty";
  948. const msg2 =
  949. currentLan.value == "zh-cn"
  950. ? "手机号格式不正确!"
  951. : "Incorrect email format";
  952. const phoneReg = /^[1][3-9]\d{9}$/;
  953. const emailReg =
  954. /^(([^<>()[\]\\.,;:\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,}))$/;
  955. if (!value) {
  956. callback(new Error(msg));
  957. } else if (!phoneReg.test(value)) {
  958. callback(new Error(msg2));
  959. } else {
  960. callback();
  961. }
  962. }
  963. /**
  964. * 密码校验器
  965. */
  966. function passwordValidator(rule: any, value: any, callback: any) {
  967. const msg =
  968. currentLan.value == "zh-cn"
  969. ? "密码不能为空!"
  970. : "The password can not be empty";
  971. const msg2 =
  972. currentLan.value == "zh-cn"
  973. ? "密码至少为6位!"
  974. : "The password can not be less than 6 digits";
  975. if (!value) {
  976. callback(new Error(msg));
  977. } else if (value.length < 6) {
  978. callback(new Error(msg2));
  979. } else {
  980. callback();
  981. }
  982. }
  983. /**
  984. * 确认密码校验器
  985. */
  986. function confirmPasswordValidator(rule: any, value: any, callback: any) {
  987. const msg =
  988. currentLan.value == "zh-cn"
  989. ? "确认密码不能为空!"
  990. : "The Confirm password can not be empty";
  991. const msg2 =
  992. currentLan.value == "zh-cn"
  993. ? "两次输入密码不一致!"
  994. : "Confirm Passward entered should match";
  995. if (!value) {
  996. callback(new Error(msg));
  997. } else if (value !== loginData2.value.password) {
  998. callback(new Error(msg2));
  999. } else {
  1000. callback();
  1001. }
  1002. }
  1003. /**
  1004. * 确认密码校验器
  1005. */
  1006. function confirmPasswordValidator4(rule: any, value: any, callback: any) {
  1007. const msg =
  1008. currentLan.value == "zh-cn"
  1009. ? "确认密码不能为空!"
  1010. : "The Confirm password can not be empty";
  1011. const msg2 =
  1012. currentLan.value == "zh-cn"
  1013. ? "两次输入密码不一致!"
  1014. : "Confirm Passward entered should match";
  1015. if (!value) {
  1016. callback(new Error(msg));
  1017. } else if (value !== loginData4.value.password) {
  1018. callback(new Error(msg2));
  1019. } else {
  1020. callback();
  1021. }
  1022. }
  1023. function confirmPasswordValidator5(rule: any, value: any, callback: any) {
  1024. const msg =
  1025. currentLan.value == "zh-cn"
  1026. ? "确认密码不能为空!"
  1027. : "The Confirm password can not be empty";
  1028. const msg2 =
  1029. currentLan.value == "zh-cn"
  1030. ? "两次输入密码不一致!"
  1031. : "Confirm Passward entered should match";
  1032. if (!value) {
  1033. callback(new Error(msg));
  1034. } else if (value !== loginData5.value.newPwd) {
  1035. callback(new Error(msg2));
  1036. } else {
  1037. callback();
  1038. }
  1039. }
  1040. //#endregion ----------------------------
  1041. // 登录行为
  1042. function handleLogin() {
  1043. loginFormRef.value.validate((val: any) => {
  1044. if (val) {
  1045. const data = {
  1046. phone: loginData.value.email,
  1047. password: loginData.value.password,
  1048. code: loginData.value.verifyCode,
  1049. };
  1050. isLogining.value = true;
  1051. doLogin(data);
  1052. } else {
  1053. const msg =
  1054. currentLan.value == "zh-cn"
  1055. ? "请检查信息格式!"
  1056. : "Please check the format !";
  1057. ElMessage.error(msg);
  1058. return;
  1059. }
  1060. });
  1061. }
  1062. // 注册行为
  1063. function handleRegister() {
  1064. loginFormRef.value.validate((val: any) => {
  1065. if (val) {
  1066. const data = {
  1067. phone: loginData2.value.email,
  1068. password: loginData2.value.password,
  1069. };
  1070. isRegistering.value = true;
  1071. doRegister(data);
  1072. } else {
  1073. const msg =
  1074. currentLan.value == "zh-cn"
  1075. ? "请检查信息格式!"
  1076. : "Please check the format !";
  1077. ElMessage.error(msg);
  1078. return;
  1079. }
  1080. });
  1081. }
  1082. //#region 忘记密码 表单3
  1083. function sendEmailforgetPwd() {
  1084. const msg =
  1085. currentLan.value == "zh-cn"
  1086. ? "短信验证码已发送至您的手机,请注意查收"
  1087. : "The SMS verification code has been sent to your mobile phone, please check it";
  1088. loginFormRef.value.validate(async (val: any) => {
  1089. if (val) {
  1090. const data = {
  1091. phone: loginData3.value.email,
  1092. code: loginData3.value.code,
  1093. };
  1094. await sendUpdPwdEmailApi(data)
  1095. .then((res) => {
  1096. console.log(res, "res");
  1097. ElMessage.success(msg);
  1098. isLogin.value = 4;
  1099. })
  1100. .catch((err) => {
  1101. console.log(err, "err");
  1102. ElMessage.error(err.message);
  1103. });
  1104. } else {
  1105. const msg =
  1106. currentLan.value == "zh-cn"
  1107. ? "请检查信息格式!"
  1108. : "Please check the format !";
  1109. ElMessage.error(msg);
  1110. return;
  1111. }
  1112. });
  1113. }
  1114. //#endregion --------------------------
  1115. //#region 忘记密码 表单5
  1116. function resetPwdEmail() {
  1117. loginFormRef.value.validate(async (val: any) => {
  1118. if (val) {
  1119. try {
  1120. const res = await resetPwdEmailApi({
  1121. pwd: loginData5.value.newPwd,
  1122. ticket: route.query.ticket,
  1123. });
  1124. localStorage.removeItem("AccessToken");
  1125. loginData.value.email = route.query.email + "";
  1126. loginData.value.password = "";
  1127. isLogin.value = 1;
  1128. router.push({ path: "login", query: {} });
  1129. } catch (error: any) {
  1130. ElMessage.error(error);
  1131. console.log(error);
  1132. }
  1133. } else {
  1134. const msg =
  1135. currentLan.value == "zh-cn"
  1136. ? "请检查信息格式!"
  1137. : "Please check the format !";
  1138. ElMessage.error(msg);
  1139. return;
  1140. }
  1141. });
  1142. }
  1143. //#endregion --------------------------
  1144. //#region 重置密码 表单4
  1145. function resetPwdForm() {
  1146. loginFormRef.value.validate(async (val: any) => {
  1147. if (val) {
  1148. try {
  1149. const res = await doUpdPassApi({
  1150. phone: loginData3.value.email,
  1151. code: loginData4.value.verifyCode,
  1152. pwd: loginData4.value.password,
  1153. });
  1154. localStorage.removeItem("AccessToken");
  1155. loginData.value.password = "";
  1156. isLogin.value = 1;
  1157. ElMessage.success(
  1158. currentLan.value == "zh-cn"
  1159. ? "重置密码成功!"
  1160. : "Reset password successfully"
  1161. );
  1162. // router.push({ path: "login", query: {} });
  1163. } catch (error: any) {
  1164. ElMessage.error(error.message);
  1165. console.log(error);
  1166. }
  1167. } else {
  1168. const msg =
  1169. currentLan.value == "zh-cn"
  1170. ? "请检查信息格式!"
  1171. : "Please check the format !";
  1172. ElMessage.error(msg);
  1173. return;
  1174. }
  1175. });
  1176. }
  1177. //#endregion --------------------------
  1178. //#region 短信登录 表单7
  1179. // 获取验证码
  1180. const SMSTimeOut = ref(0);
  1181. async function getSMSToLogin() {
  1182. let phoneReg = /^[1][3-9]\d{9}$/;
  1183. let phoneValide = phoneReg.test(loginData7.value.email);
  1184. if (!phoneValide) {
  1185. ElMessage.error(
  1186. currentLan.value == "zh-cn"
  1187. ? "请输入正确的手机号!"
  1188. : "Please enter the correct phone number!"
  1189. );
  1190. return;
  1191. }
  1192. try {
  1193. await getSMSToLoginApi(Number(loginData7.value.email)).then((res) => {
  1194. ElMessage.success(
  1195. currentLan.value == "zh-cn"
  1196. ? "短信验证码发送成功!"
  1197. : "SMS verification code sent successfully!"
  1198. );
  1199. SMSTimeOut.value = 60;
  1200. const timer = setInterval(() => {
  1201. if (SMSTimeOut.value != 0) {
  1202. SMSTimeOut.value--;
  1203. } else {
  1204. clearInterval(timer);
  1205. }
  1206. }, 1000);
  1207. });
  1208. } catch (error: any) {
  1209. ElMessage.error(error.message);
  1210. }
  1211. }
  1212. // 登录行为
  1213. function handleLoginBySMS() {
  1214. loginFormRef.value.validate((val: any) => {
  1215. if (val) {
  1216. const data = {
  1217. phone: loginData7.value.email,
  1218. code: loginData7.value.verifyCode,
  1219. };
  1220. isLogining.value = true;
  1221. doLoginByMSM(data);
  1222. } else {
  1223. const msg =
  1224. currentLan.value == "zh-cn"
  1225. ? "请检查信息格式!"
  1226. : "Please check the format !";
  1227. ElMessage.error(msg);
  1228. return;
  1229. }
  1230. });
  1231. }
  1232. async function doLoginByMSM(data: any) {
  1233. const msg =
  1234. currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!";
  1235. await loginByMSMApi(data)
  1236. .then(async (res: any) => {
  1237. console.log(res, "res");
  1238. localStorage.setItem("AccessToken", res.data.token);
  1239. saveInfo(data);
  1240. isLogining.value = false;
  1241. // await checkInviteCode();
  1242. ElMessage.success(msg);
  1243. router.push("/createVideo");
  1244. // 注册成功将账号密码保存到本地
  1245. })
  1246. .catch((err) => {
  1247. console.log(err, "err");
  1248. // 登录失败刷新验证码
  1249. getCode();
  1250. ElMessage.error(err.message);
  1251. isLogining.value = false;
  1252. if (err.code == 2112) {
  1253. reSendEmail(data.email);
  1254. }
  1255. });
  1256. }
  1257. //#endregion --------------------------
  1258. //#region 查询邀请码 表单8
  1259. /**
  1260. * @description:查询用户邀请码状态
  1261. */
  1262. async function checkInviteCode() {
  1263. try {
  1264. const res = await doFindInviteCode();
  1265. // console.log(res, '查询用户邀请码数据')
  1266. const status = res.data.status;
  1267. // 当没有邀请码时,切换输入验证码页面
  1268. if (status == 0) {
  1269. isLogin.value = 8;
  1270. // 有邀请码直接前往我的页面
  1271. } else if (status == 1) {
  1272. userInfoPinia.getUserInfo(); //保存邮箱到pinia
  1273. ElMessage.success(
  1274. 'currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"'
  1275. );
  1276. router.push({
  1277. path: "/createVideo",
  1278. });
  1279. } else {
  1280. router.push("/createVideo");
  1281. }
  1282. } catch (error: any) {
  1283. console.log(error, "error");
  1284. ElMessage.error(error.message);
  1285. }
  1286. }
  1287. // 填写邀请码
  1288. async function handleInvitatioCode() {
  1289. const data = {
  1290. inviteCode: loginData8.value.invitatioCode,
  1291. };
  1292. try {
  1293. const res = await doUpdateInviteCode(data);
  1294. userInfoPinia.getUserInfo(); //保存邮箱到pinia
  1295. ElMessage.success(
  1296. 'currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!"'
  1297. );
  1298. router.push({
  1299. path: "/createVideo",
  1300. });
  1301. } catch (error: any) {
  1302. console.log(error, "error");
  1303. ElMessage.error(error.message);
  1304. }
  1305. }
  1306. //#endregion -----------------------
  1307. function getCode() {
  1308. showCodeImg.value = false;
  1309. axios({
  1310. url: getCodeImgUrl,
  1311. method: "get",
  1312. }).then(() => {
  1313. verifyCodeUrl.value = getCodeImgUrl;
  1314. showCodeImg.value = true;
  1315. });
  1316. }
  1317. /**
  1318. * @description:注册
  1319. * @param {Object} data
  1320. * @return: data
  1321. */
  1322. async function doRegister(data: object) {
  1323. const msg =
  1324. currentLan.value == "zh-cn" ? "注册成功!" : "Registered successfully";
  1325. await register(data)
  1326. .then((res) => {
  1327. console.log(res, "res");
  1328. isRegistering.value = false;
  1329. ElMessage.success(msg);
  1330. isLogin.value = 1;
  1331. // 注册成功将账号密码保存到本地
  1332. saveInfo(data);
  1333. router.go(0);
  1334. })
  1335. .catch((err) => {
  1336. // 注册失败刷新验证码
  1337. getCode();
  1338. isRegistering.value = false;
  1339. console.log(err, "err");
  1340. ElMessage.error(err.message);
  1341. });
  1342. }
  1343. /**
  1344. * @description:登录
  1345. * @param {Object} data
  1346. * @return: data
  1347. */
  1348. async function doLogin(data: any) {
  1349. const msg =
  1350. currentLan.value == "zh-cn" ? "登录成功!" : "Welcome to Metavatar!";
  1351. await login(data)
  1352. .then(async (res) => {
  1353. console.log(res, "res");
  1354. localStorage.setItem("AccessToken", res.data.token);
  1355. // 注册成功将账号密码保存到本地
  1356. saveInfo(data);
  1357. isLogining.value = false;
  1358. // await checkInviteCode();
  1359. userInfoPinia.getUserInfo(); //保存邮箱到pinia
  1360. ElMessage.success(msg);
  1361. router.push("/createVideo");
  1362. })
  1363. .catch((err) => {
  1364. console.log(err, "err");
  1365. // 登录失败刷新验证码
  1366. getCode();
  1367. ElMessage.error(err.message);
  1368. isLogining.value = false;
  1369. if (err.code == 2112) {
  1370. reSendEmail(data.email);
  1371. }
  1372. });
  1373. }
  1374. /**
  1375. * @description:重新发送邮件
  1376. * @param {string} email
  1377. * @return: data
  1378. */
  1379. async function reSendEmail(email: string) {
  1380. const msg =
  1381. currentLan.value == "zh-cn"
  1382. ? "确认信息已发送至您的邮箱,请注意查收!"
  1383. : "An email has been send to you, Please pay attention to confirm !";
  1384. await sendRegisterEmail(email)
  1385. .then((res) => {
  1386. console.log(res, "res");
  1387. ElMessage.success(msg);
  1388. })
  1389. .catch((err) => {
  1390. console.log(err, "err");
  1391. ElMessage.error(err.message);
  1392. });
  1393. }
  1394. onMounted(() => {
  1395. getCode();
  1396. getInfo();
  1397. // 重置密码
  1398. // if (router.currentRoute.value.params.type) {
  1399. // // isLogin.value = Number(router.currentRoute.value.params.type);
  1400. // isLogin.value = 4;
  1401. // }
  1402. // if (router.currentRoute.value.params.type) {
  1403. // // isLogin.value = Number(router.currentRoute.value.params.type);
  1404. // isLogin.value = 4;
  1405. // }
  1406. if (route.query.type) {
  1407. isLogin.value = 4;
  1408. }
  1409. //有resetPwd则说明是重置密码邮件来的
  1410. if (route.query.resetPwd) {
  1411. isLogin.value = 5;
  1412. // route.query.ticket
  1413. }
  1414. });
  1415. </script>
  1416. <style lang="scss" scoped>
  1417. .login-container {
  1418. position: relative;
  1419. width: 100%;
  1420. // width: 1920px;
  1421. // height: 1080px;
  1422. min-height: 100%;
  1423. overflow: hidden;
  1424. // background-color: #2d3a4b;
  1425. .Version {
  1426. position: absolute;
  1427. bottom: 20px;
  1428. right: 20px;
  1429. color: #ffffff;
  1430. }
  1431. .login-form {
  1432. position: absolute;
  1433. top: 46%;
  1434. left: 10%;
  1435. width: 520px;
  1436. max-width: 100%;
  1437. padding: 20px;
  1438. overflow: hidden;
  1439. backdrop-filter: blur(3px);
  1440. background: linear-gradient(
  1441. 123.64deg,
  1442. rgba(188, 193, 196, 0.1) -22.71%,
  1443. rgba(255, 255, 255, 0.039) 70.04%
  1444. );
  1445. border-radius: 20px;
  1446. transform: translateY(-50%);
  1447. border: 1px solid #cacaca;
  1448. transition: all 0.15s;
  1449. .captcha {
  1450. position: absolute;
  1451. top: 0;
  1452. right: 0;
  1453. img {
  1454. width: 120px;
  1455. height: 48px;
  1456. cursor: pointer;
  1457. }
  1458. .sendSMSBtn {
  1459. width: 120px;
  1460. height: 48px;
  1461. line-height: 48px;
  1462. color: #fff;
  1463. text-align: center;
  1464. background: linear-gradient(270deg, #4b61dc, #15d1b8);
  1465. }
  1466. }
  1467. &:hover {
  1468. backdrop-filter: blur(7px);
  1469. }
  1470. .items-center {
  1471. padding: 20px;
  1472. font-size: 30px;
  1473. }
  1474. .el-form-item {
  1475. .text-white {
  1476. padding: 8px;
  1477. }
  1478. }
  1479. }
  1480. }
  1481. .loginBtn {
  1482. width: 100%;
  1483. height: 40px;
  1484. background: linear-gradient(270deg, #4b61dc, #15d1b8);
  1485. transition: all 0.3s;
  1486. &:hover {
  1487. transform: scale(1.02);
  1488. }
  1489. cursor: pointer;
  1490. }
  1491. .bottomBtnCN {
  1492. display: flex;
  1493. justify-content: space-between;
  1494. align-items: center;
  1495. padding: 0 10px;
  1496. color: #fff;
  1497. text-align: center;
  1498. margin-top: 20px;
  1499. .join {
  1500. cursor: pointer;
  1501. border-bottom: 2px solid #ffffff00;
  1502. padding: 0 3px;
  1503. padding-bottom: 2px;
  1504. transition: all 0.3s;
  1505. &:hover {
  1506. border-bottom: 2px solid #ffffff;
  1507. }
  1508. }
  1509. }
  1510. .bottomBtnEN {
  1511. padding: 0 10px;
  1512. color: #fff;
  1513. text-align: center;
  1514. margin-top: 20px;
  1515. .join {
  1516. cursor: pointer;
  1517. border-bottom: 2px solid #ffffff00;
  1518. padding: 0 3px;
  1519. padding-bottom: 2px;
  1520. transition: all 0.3s;
  1521. &:hover {
  1522. border-bottom: 2px solid #ffffff;
  1523. }
  1524. }
  1525. }
  1526. .videoBox {
  1527. position: absolute;
  1528. top: 0;
  1529. left: 0;
  1530. width: 100%;
  1531. height: 100%;
  1532. z-index: -1;
  1533. video {
  1534. width: 100%;
  1535. height: 100%;
  1536. object-fit: fill;
  1537. }
  1538. }
  1539. .el-form-item {
  1540. background: rgb(0 0 0 / 10%);
  1541. border: 1px solid #ffffff2d;
  1542. border-radius: 5px;
  1543. }
  1544. .el-input {
  1545. background: transparent;
  1546. // 子组件 scoped 无效,使用 :deep
  1547. :deep(.el-input__wrapper) {
  1548. padding: 0;
  1549. background: transparent;
  1550. box-shadow: none;
  1551. .el-input__inner {
  1552. color: #fff;
  1553. background: transparent;
  1554. border: 0;
  1555. border-radius: 0;
  1556. caret-color: #fff;
  1557. &:-webkit-autofill {
  1558. box-shadow: 0 0 0 1000px transparent inset !important;
  1559. -webkit-text-fill-color: #fff !important;
  1560. }
  1561. // 设置输入框自动填充的延迟属性
  1562. &:-webkit-autofill,
  1563. &:-webkit-autofill:hover,
  1564. &:-webkit-autofill:focus,
  1565. &:-webkit-autofill:active {
  1566. transition: color 99999s ease-out, background-color 99999s ease-out;
  1567. transition-delay: 99999s;
  1568. }
  1569. }
  1570. }
  1571. }
  1572. @keyframes rotate {
  1573. from {
  1574. transform: rotate(0deg);
  1575. }
  1576. to {
  1577. transform: rotate(360deg);
  1578. }
  1579. }
  1580. </style>