邃芒官网(PC) https://www.metavatar.cc
25개 이상의 토픽을 선택하실 수 없습니다. Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

540 lines
15 KiB

  1. <template>
  2. <div class="tailBox">
  3. <div class="taillong">
  4. <img
  5. src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/LOGO1.png"
  6. alt
  7. />
  8. </div>
  9. <div class="tiemBox">
  10. <div class="taolIconBox">
  11. <div class="taolIconText">
  12. {{ characters == 1 ? "关注我们" : "follow Us" }}
  13. </div>
  14. <div class="iconBox">
  15. <img
  16. src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/f.png"
  17. alt
  18. />
  19. <img
  20. src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/o.png"
  21. alt
  22. />
  23. <img
  24. src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/ft.png"
  25. alt
  26. />
  27. <img
  28. src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/x.png"
  29. alt
  30. />
  31. </div>
  32. </div>
  33. <div class="contentBox">
  34. <div class="taolIconText">
  35. {{ characters == 1 ? "联系我们" : "Contact us" }}
  36. </div>
  37. <!-- <div class="contentInput">
  38. <el-input v-model="userName" :placeholder="characters == 1 ? '姓名' : 'Name'"></el-input>
  39. </div>
  40. <div class="contentInput">
  41. <el-input v-model="phone" :placeholder="characters == 1 ? '手机' : 'Phone Number'"></el-input>
  42. </div>
  43. <div class="contentInput">
  44. <el-input v-model="email" :placeholder="characters == 1 ? 'E-mail' : 'Mail'"></el-input>
  45. </div>
  46. <div class="subBtn" @click="submit()">
  47. {{ characters == 1 ? '提交' : 'Submit' }}
  48. </div> -->
  49. <el-form v-if="showForm" ref="form" :rules="rules1" :model="form">
  50. <el-form-item class="width" prop="userName">
  51. <el-input
  52. v-model="form.userName"
  53. maxlength="10"
  54. :placeholder="characters == 1 ? '姓名' : 'Name'"
  55. ></el-input>
  56. </el-form-item>
  57. <el-form-item class="width" prop="phone">
  58. <el-input
  59. v-model="form.phone"
  60. :placeholder="characters == 1 ? '手机' : 'Phone'"
  61. ></el-input>
  62. </el-form-item>
  63. <el-form-item class="width" prop="email">
  64. <el-input v-model="form.email" placeholder="Email"></el-input>
  65. </el-form-item>
  66. <el-button class="subBtn1" type="primary" @click="submit()">{{
  67. characters == 1 ? "提 交" : "Submit"
  68. }}</el-button>
  69. </el-form>
  70. </div>
  71. <div class="rqCodeBox">
  72. <div class="phone">TEL:+86 152-1093-7300</div>
  73. <div class="site">
  74. {{
  75. characters == 1
  76. ? "北京市海淀区中关村南大街12号农业科学院信息楼311室"
  77. : "311, Information Building, Academy of Agricultural Sciences, No. 12 Zhongguancun South Street, Haidian District, Beijing"
  78. }}
  79. </div>
  80. <div class="phone" v-if="characters == 1">周女士 +65 9422 2858</div>
  81. <div class="phone" v-if="characters != 1">Chow +65 9422 2858</div>
  82. <div class="site">
  83. {{
  84. characters == 1
  85. ? "新加坡北桥路111号,半岛广场07-11号,邮编179098"
  86. : "111 North Bridge Road, #07-11, Penisula Plaza, Singapore 179098"
  87. }}
  88. </div>
  89. <div class="rqCodeTiemBox">
  90. <div class="rqCodeTiem">
  91. <div class="rqcode">
  92. <!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/wechat.png" alt /> -->
  93. <img
  94. src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/vx.jpg"
  95. alt
  96. />
  97. </div>
  98. <div class="rqtext">Wechat</div>
  99. </div>
  100. <div class="rqCodeTiem1">
  101. <div class="rqcode">
  102. <!-- <img src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/tiktok.png" alt /> -->
  103. <img
  104. src="https://suimang.oss-accelerate.aliyuncs.com/builtin/static/pc/assets/img/dy.png"
  105. alt
  106. />
  107. </div>
  108. <div class="rqtext">Tiktok</div>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. <div class="tailText">
  114. <!-- © 2021 Copyright 北京邃芒科技有限公司 版权所有 京ICP备2021007416号 -->
  115. © 2021 Copyright 北京邃芒科技有限公司 版权所有
  116. <a href="https://beian.miit.gov.cn">京ICP备2023005136号-1</a>
  117. </div>
  118. </div>
  119. </template>
  120. <script>
  121. import { mapState } from "vuex";
  122. export default {
  123. data() {
  124. return {
  125. userName: "",
  126. phone: "",
  127. email: "",
  128. form: {
  129. userName: "",
  130. phone: "",
  131. email: "",
  132. },
  133. rules: {
  134. userName: [
  135. {
  136. required: true,
  137. min: 1,
  138. max: 10,
  139. message: "此项必填,内容最大10个字符!",
  140. trigger: "blur",
  141. },
  142. ],
  143. phone: [
  144. {
  145. required: true,
  146. trigger: "change",
  147. message: "请先输手机号",
  148. trigger: "blur",
  149. },
  150. {
  151. validator(rule, value, callback, source, options) {
  152. var errors = [];
  153. // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
  154. let phone = /^1[35789]\d{9}$/;
  155. if (value && !phone.test(value)) {
  156. callback("抱歉,请输入正确的手机号");
  157. }
  158. callback(errors);
  159. },
  160. },
  161. ],
  162. email: [
  163. {
  164. required: true,
  165. trigger: "change",
  166. message: "请输入邮箱!",
  167. trigger: "blur",
  168. },
  169. {
  170. validator(rule, value, callback, source, options) {
  171. var errors = [];
  172. // var mobile = /^1[0|1|2|3|4|5|6|7|8|9]\d{9}$/,
  173. let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  174. if (value && !email.test(value)) {
  175. callback("抱歉,请输入正确的邮箱");
  176. }
  177. callback(errors);
  178. },
  179. },
  180. ],
  181. },
  182. rulesEnglish: {
  183. userName: [
  184. {
  185. required: true,
  186. min: 1,
  187. max: 10,
  188. message: "This item is required !",
  189. trigger: "blur",
  190. },
  191. ],
  192. phone: [
  193. {
  194. required: true,
  195. trigger: "change",
  196. message: "Please enter your cell phone number",
  197. trigger: "blur",
  198. },
  199. {
  200. validator(rule, value, callback, source, options) {
  201. var errors = [];
  202. let phone = /^1[35789]\d{9}$/;
  203. if (value && !phone.test(value)) {
  204. callback("Sorry, please enter the correct cell phone number");
  205. }
  206. callback(errors);
  207. },
  208. },
  209. ],
  210. email: [
  211. {
  212. required: true,
  213. trigger: "change",
  214. message: "Please enter email!",
  215. trigger: "blur",
  216. },
  217. {
  218. validator(rule, value, callback, source, options) {
  219. var errors = [];
  220. let email = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  221. if (value && !email.test(value)) {
  222. callback("Sorry, please enter the correct email address");
  223. }
  224. callback(errors);
  225. },
  226. },
  227. ],
  228. },
  229. rules1: null,
  230. showForm: true,
  231. };
  232. },
  233. methods: {
  234. submit() {
  235. // let phone = /^1[35789]\d{9}$/;
  236. // if (this.userName == '') {
  237. // this.$message.error(this.characters == 1 ? '请输入姓名' : 'Please enter your name');
  238. // return;
  239. // } else if (!phone.test(this.phone)) {
  240. // this.$message.error(this.characters == 1 ? '请输入手机号' : 'Please enter your mobile phone number');
  241. // return;
  242. // } else if (this.email == '') {
  243. // this.$message.error(this.characters == 1 ? '请输入邮箱' : 'Please enter email address');
  244. // return;
  245. // }
  246. // let params = {
  247. // mallName: this.email, //邮箱
  248. // applicant: this.userName, //姓名
  249. // phone: this.phone //电话
  250. // };
  251. this.$refs.form.validate((valid) => {
  252. console.log(valid);
  253. if (valid) {
  254. let params = {
  255. mallName: this.form.email, //邮箱
  256. applicant: this.form.userName, //姓名
  257. phone: this.form.phone, //电话
  258. };
  259. this.$axios({
  260. method: "post",
  261. url: "/C/api/wxMallApply/add",
  262. headers: {
  263. "Content-Type": "application/json;charset=UTF-8",
  264. },
  265. data: params,
  266. })
  267. .then((res) => {
  268. this.email = "";
  269. this.userName = "";
  270. this.phone = "";
  271. this.form.email = "";
  272. this.form.userName = "";
  273. this.form.phone = "";
  274. this.$message.success(
  275. this.characters == 1 ? "提交成功" : "submit successfully"
  276. );
  277. })
  278. .catch((err) => {
  279. this.$message.error(err.message);
  280. });
  281. }
  282. });
  283. },
  284. },
  285. created() {
  286. this.rules1 = this.rules;
  287. },
  288. computed: {
  289. ...mapState({
  290. characters: (state) => state.publicObj.characters,
  291. }),
  292. },
  293. watch: {
  294. characters: function (newValue) {
  295. this.showForm = false;
  296. if (newValue === 1) {
  297. this.rules1 = this.rules;
  298. } else {
  299. this.rules1 = this.rulesEnglish;
  300. }
  301. setTimeout(() => {
  302. this.showForm = true;
  303. }, 100);
  304. },
  305. },
  306. };
  307. </script>
  308. <style lang="scss" scoped>
  309. .tailBox {
  310. overflow: hidden;
  311. height: 508px;
  312. background: #f1f4f7;
  313. // padding-bottom: 54px;
  314. .taillong {
  315. width: 168px;
  316. height: 50px;
  317. margin-top: 20px;
  318. margin-left: 360px;
  319. img {
  320. width: 168px;
  321. height: 50px;
  322. }
  323. }
  324. .tiemBox {
  325. overflow: hidden;
  326. margin-top: 20px;
  327. }
  328. .taolIconBox {
  329. margin-left: 380px;
  330. float: left;
  331. }
  332. .taolIconText {
  333. margin-top: -20px;
  334. font-size: 14px;
  335. font-family: Inter;
  336. font-weight: 400;
  337. color: #323232;
  338. line-height: 62px;
  339. }
  340. .iconBox {
  341. display: flex;
  342. justify-content: space-between;
  343. width: 124px;
  344. img {
  345. width: 24px;
  346. height: 24px;
  347. }
  348. }
  349. .contentBox {
  350. // position: absolute;
  351. // margin-top: 120px;
  352. float: left;
  353. margin-left: 260px;
  354. .contentInput {
  355. width: 286px;
  356. height: 36px;
  357. // background: #ffffff;
  358. text-align: center;
  359. margin-bottom: 11px;
  360. input {
  361. width: 200px;
  362. height: 36px;
  363. }
  364. input::placeholder {
  365. font-weight: 400;
  366. color: #949494;
  367. }
  368. }
  369. .subBtn {
  370. width: 140px;
  371. height: 48px;
  372. background: #ffffff;
  373. border-radius: 24px;
  374. text-align: center;
  375. line-height: 48px;
  376. margin-top: 24px;
  377. cursor: pointer;
  378. font-size: 14px;
  379. transition: all 0.3s;
  380. &:hover {
  381. color: #fff;
  382. background-color: #16e9d6;
  383. }
  384. }
  385. ::v-deep .el-form-item {
  386. width: 300px;
  387. margin-bottom: 20px;
  388. }
  389. .subBtn1 {
  390. border: none;
  391. width: 140px;
  392. height: 48px;
  393. color: #191919;
  394. // margin-top: 15px;
  395. background: #ffffff;
  396. border-radius: 24px;
  397. text-align: center;
  398. line-height: 24px;
  399. cursor: pointer;
  400. font-size: 14px;
  401. transition: all 0.3s;
  402. &:hover {
  403. color: #fff;
  404. background-color: #16e9d6;
  405. }
  406. }
  407. }
  408. .rqCodeBox {
  409. padding-top: -10px;
  410. width: 360px;
  411. // position: absolute;
  412. // top: 130px;
  413. float: left;
  414. margin-left: 260px;
  415. .phone {
  416. margin-top: 10px;
  417. font-size: 14px;
  418. font-family: Inter;
  419. font-weight: 400;
  420. color: #191919;
  421. }
  422. .site {
  423. font-size: 14px;
  424. font-family: Microsoft YaHei;
  425. font-weight: 400;
  426. color: #191919;
  427. // margin-top: 10px;
  428. }
  429. .rqCodeTiemBox {
  430. display: flex;
  431. justify-content: space-between;
  432. margin-top: 30px;
  433. .rqCodeTiem {
  434. overflow: hidden;
  435. .rqcode {
  436. width: 150px;
  437. height: 150px;
  438. img {
  439. width: 100%;
  440. height: 100%;
  441. }
  442. }
  443. .rqtext {
  444. text-align: center;
  445. font-size: 12px;
  446. font-family: Inter;
  447. font-weight: 400;
  448. color: #172c34;
  449. line-height: 62px;
  450. height: 62px;
  451. }
  452. }
  453. .rqCodeTiem1 {
  454. margin-left: 30px;
  455. .rqcode {
  456. width: 150px;
  457. height: 150px;
  458. img {
  459. width: 100%;
  460. height: 100%;
  461. }
  462. }
  463. .rqtext {
  464. text-align: center;
  465. font-size: 12px;
  466. font-family: Inter;
  467. font-weight: 400;
  468. color: #172c34;
  469. line-height: 62px;
  470. height: 62px;
  471. }
  472. }
  473. }
  474. }
  475. .showBoxP {
  476. font-size: 16px !important;
  477. text-align: center !important;
  478. line-height: 20px !important;
  479. color: #696969 !important;
  480. }
  481. .tailText {
  482. // position: absolute;
  483. // width: 100%;
  484. // bottom: 6%;
  485. margin-top: 20px;
  486. // left: 0;
  487. text-align: center;
  488. font-size: 18px;
  489. font-family: Microsoft YaHei;
  490. font-weight: 400;
  491. color: #191919;
  492. line-height: 62px;
  493. opacity: 0.5;
  494. a {
  495. text-decoration: none;
  496. color: #333;
  497. }
  498. a:hover,
  499. a:visited,
  500. a:link,
  501. a:active {
  502. color: #333;
  503. // 设置使所有a标签的四种状态都和本身颜色保持一致,样式代码自己写
  504. }
  505. }
  506. }
  507. ::-webkit-input-placeholder {
  508. /* WebKit browsers,webkit内核浏览器 */
  509. color: #ccc;
  510. font-size: 16px;
  511. }
  512. :-moz-placeholder {
  513. /* Mozilla Firefox 4 to 18 */
  514. color: #ccc;
  515. font-size: 16px;
  516. }
  517. ::-moz-placeholder {
  518. /* Mozilla Firefox 19+ */
  519. color: #ccc;
  520. font-size: 16px;
  521. }
  522. :-ms-input-placeholder {
  523. /* Internet Explorer 10+ */
  524. color: #ccc;
  525. font-size: 16px;
  526. }
  527. .el-input.is-active .el-input__inner,
  528. .el-input__inner:focus {
  529. border-color: #16e9d6;
  530. outline: 0;
  531. }
  532. </style>