detail_join.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
  7. <meta name="renderer" content="webkit">
  8. <meta name="keywords" content="{:__lm($navCur,'keywords')}"/>
  9. <meta name="description" content="{:__lm($navCur,'description')}"/>
  10. <title>{:__lm($navCur,'seotitle')} - {$site.site_name}</title>
  11. <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/wwh/css/swiper.min.css">
  12. <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/wwh/css/animate.min.css">
  13. <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/wwh/css/style.css">
  14. <link rel="stylesheet" type="text/css" href="__CDN__/assets/addons/wwh/css/media.css">
  15. <script type="text/javascript" src="__CDN__/assets/addons/wwh/js/jquery.min.js"></script>
  16. <script type="text/javascript" src="__CDN__/assets/addons/wwh/js/swiper.min.js"></script>
  17. <script type="text/javascript" src="__CDN__/assets/addons/wwh/js/swiper.animate1.0.3.min.js"></script>
  18. <script type="text/javascript" src="__CDN__/assets/addons/wwh/js/wow.js"></script>
  19. <script type="text/javascript" src="__CDN__/assets/addons/wwh/js/menu.js"></script>
  20. <script type="text/javascript" src="__CDN__/assets/addons/wwh/js/javascript.js"></script>
  21. <link rel="shortcut icon" href="__CDN__/assets/addons/wwh/images/favicon.ico">
  22. </head>
  23. <style>
  24. .upload .input input[type="file"]{
  25. position: absolute;
  26. top: 0;
  27. left: 0;
  28. width: 100%;
  29. height: 100%;
  30. opacity: 0;
  31. }
  32. </style>
  33. <body>
  34. <!--头部-->
  35. {include file="header" /}
  36. <!-- 栏目Banner -->
  37. <div class="col-banner">
  38. <div class="text">
  39. <div class="title wow fadeInUp" data-wow-delay="0.3s">
  40. <h3>{$site.ban5_t1}</h3><i></i>
  41. </div>
  42. </div>
  43. <div class="img">
  44. <div class="pic" style="background-image: url('{$site.banner5|cdnurl}');">
  45. <img src="__CDN__/assets/addons/wwh/images/col_size.png" class="img-block" alt="">
  46. </div>
  47. </div>
  48. <div class="banner-path wow fadeInLeft" data-wow-delay="0.4s">
  49. <div class="container-outer">
  50. <div class="icon"><img src="__CDN__/assets/addons/wwh/images/home.svg" class="img-center"></div>
  51. <div class="link">
  52. <a href="{:addon_url('wwh/index/index')}">{:__lang('Home')}</a>
  53. <span>/</span>
  54. <a href="{:addon_url('wwh/column/index', [':diyname'=>$top.diyname])}">{if condition="($navCur.parent_id == '0')"} {:__lm($navCur,'name')} {else /} {:__lm($top,'name')} {/if}</a>
  55. <span>/</span>
  56. <a href="{:addon_url('wwh/column/index', [':diyname'=>$navCur.diyname])}" class="cur">{:__lm($navCur,'name')}</a>
  57. </div>
  58. </div>
  59. </div>
  60. </div>
  61. <!-- 内容 -->
  62. <div class="join-detail">
  63. <div class="container-outer">
  64. <div class="join-box">
  65. <div class="top">
  66. <form method="get" action="" class="clearfix">
  67. <div class="join-option">
  68. <div class="dept wow fadeInUp" data-wow-delay="0.5s">
  69. <select name="branch" id="branch">
  70. <option value="" selected>{:__lang('All Sectors')}</option>
  71. {volist name="deptList" id="v"}
  72. <option value="{$v.dept}">{$v.dept}</option>
  73. {/volist}
  74. </select>
  75. </div>
  76. <div class="add wow fadeInUp" data-wow-delay="0.6s">
  77. <select name="address" id="address">
  78. <option value="" selected>{:__lang('Work Location')}</option>
  79. {volist name="addrList" id="v"}
  80. <option value="{$v.addr}">{$v.addr}</option>
  81. {/volist}
  82. </select>
  83. </div>
  84. </div>
  85. <div class="join-search wow fadeInUp" data-wow-delay="0.7s">
  86. <div class="so-inp">
  87. <input type="text" value="" name="jonKeywords" id="jonKeywords" placeholder="{:__lang('Search for job positions')}" />
  88. </div>
  89. <input type="submit" value="" class="join-button" />
  90. </div>
  91. </form>
  92. </div>
  93. <div class="bottom">
  94. {volist name="join" id="v"}
  95. <div class="join-item wow fadeInUp" data-wow-delay="0.8s">
  96. <div class="recruit-top">
  97. <div class="recruit-top-box clearfix">
  98. <div class="recruit-top-left">
  99. <div class="psn">
  100. <p>{$v.name}</p>
  101. </div>
  102. </div>
  103. <div class="recruit-top-right clearfix">
  104. <div class="req">
  105. <p>{$v.dept}</p>
  106. </div>
  107. <div class="req">
  108. <p>{$v.addr}</p>
  109. </div>
  110. <div class="req">
  111. <p>{$v.num}</p>
  112. </div>
  113. <div class="req">
  114. <p>{$v.xueli}</p>
  115. </div>
  116. <div class="req">
  117. <p>{$v.time}</p>
  118. </div>
  119. </div>
  120. <div class="drop-box">
  121. <div class="drop-img">
  122. <img src="__CDN__/assets/addons/wwh/images/down_arrow1.svg" alt="" class="drop-ico1">
  123. <img src="__CDN__/assets/addons/wwh/images/down_arrow2.svg" alt="" class="drop-ico2">
  124. </div>
  125. </div>
  126. </div>
  127. </div>
  128. <div class="recruit-content">
  129. <p>{$v.content}</p>
  130. <a href="javascript:;" class="join-more" onclick="showForm(this.name)" name="{$v.name}">{:__lang('Apply Now')}</a>
  131. </div>
  132. </div>
  133. {/volist}
  134. </div>
  135. </div>
  136. </div>
  137. </div>
  138. <div class="fenye wow fadeInUp" data-wow-delay="0.8s">{$joinPage}</div>
  139. <!--底部-->
  140. {include file="footer" /}
  141. <script>
  142. function showForm(e) {
  143. // 安全转义输入值
  144. var escapedE = $('<div/>').text(e).html();
  145. // 使用数组join方式构建HTML字符串
  146. var htmlParts = [
  147. '<form id="resume" method="post" class="join-form">',
  148. ' <div class="title">{:__lang("Welcome to join us")}</div>',
  149. ' <div class="message-text"><input type="text" placeholder="{:__lang("Full Name")}" name="realname2" id="realname2" autocomplete="name" maxlength="50"></div>',
  150. ' <div class="message-text"><input type="tel" placeholder="{:__lang("Contact Number")}" name="tel2" id="tel2" autocomplete="tel" maxlength="20"></div>',
  151. ' <div class="message-text"><input type="text" placeholder="{:__lang("Post")}" name="gangwei2" id="gangwei2" value="' + escapedE + '" readonly style="background-color: #eeeeee;cursor: not-allowed;"></div>',
  152. ' <div class="upload">',
  153. ' <div class="text"><strong>{:__lang("Upload Resume")}*</strong><span>{:__lang("Support")} word、excel、pdf、ppt</span></div>',
  154. ' <div class="input">',
  155. ' <span id="file_name"></span>',
  156. ' <div class="right">',
  157. ' <span>{:__lang("Upload")}</span>',
  158. ' <input type="file" name="url" id="url" onchange="changeFile(this)" accept=".doc,.docx,.xls,.xlsx,.ppt,.pptx,.pdf">',
  159. ' </div>',
  160. ' </div>',
  161. ' </div>',
  162. ' <div class="validate">',
  163. ' <div class="message-text"><input type="text" placeholder="{:__lang("Verification code")}" name="verify2" id="verify2" autocomplete="off"></div>',
  164. ' <img id="verifyImgs2" class="verify-img" src="{:addon_url("wwh/index/verify")}" onclick="this.src=\'{:addon_url("wwh/index/verify")}?seed=\'+Math.random()">',
  165. ' </div>',
  166. ' <div class="resume-subbox"><button type="submit" class="resume-submit">{:__lang("Submit")}</button></div>',
  167. ' {:token()}',
  168. '</form>'
  169. ];
  170. var html = htmlParts.join('');
  171. var formLayer = layer.open({
  172. type: 1,
  173. title: false,
  174. closeBtn: 1,
  175. shadeClose: false,
  176. anim: 1,
  177. area: ['auto', 'auto'],
  178. content: html,
  179. });
  180. // 表单submit事件
  181. $(document).on('submit', '#resume', function(event) {
  182. event.preventDefault();
  183. var form = this;
  184. var formdata = new FormData(form);
  185. var realname2 = $.trim($("#realname2").val());
  186. var tel2 = $.trim($("#tel2").val());
  187. var gangwei2 = $.trim($("#gangwei2").val());
  188. var url = $.trim($("#url").val());
  189. var verify2 = $.trim($("#verify2").val());
  190. // 验证逻辑
  191. if (!realname2) {
  192. layer.alert('{:__lang(\'Please fill in your name\')}', {skin: 'layui-layer-lan', closeBtn: 0, title: "{:__lang(\'Tips\')}:", icon: 2, anim: 2});
  193. return false;
  194. }
  195. if (!tel2) {
  196. layer.alert('{:__lang(\'Please provide your phone number\')}', {skin: 'layui-layer-lan', closeBtn: 0, title: "{:__lang(\'Tips\')}:", icon: 2, anim: 2});
  197. return false;
  198. }
  199. if (!/^1[3-9]\d{9}$/.test(tel2)) {
  200. layer.alert('{:__lang(\'Please provide a valid phone number\')}', {skin: 'layui-layer-lan', closeBtn: 0, title: "{:__lang(\'Tips\')}:", icon: 2, anim: 2});
  201. return false;
  202. }
  203. if (!gangwei2) {
  204. layer.alert('{:__lang(\'Please select the position to apply for\')}', {skin: 'layui-layer-lan', closeBtn: 0, title: "{:__lang(\'Tips\')}:", icon: 2, anim: 2});
  205. return false;
  206. }
  207. if (!url) {
  208. layer.alert('{:__lang(\'Please upload your resume\')}', {skin: 'layui-layer-lan', closeBtn: 0, title: "{:__lang(\'Tips\')}:", icon: 2, anim: 2});
  209. return false;
  210. }
  211. if (!verify2) {
  212. layer.alert('{:__lang(\'Please fill in the verification code\')}', {skin: 'layui-layer-lan', closeBtn: 0, title: "{:__lang(\'Tips\')}:", icon: 2, anim: 2});
  213. return false;
  214. }
  215. // 显示加载状态
  216. var submitBtn = $(form).find('.resume-submit');
  217. submitBtn.prop('disabled', true).text('{:__lang("Submitting...")}');
  218. $.ajax({
  219. url: "{:addon_url('wwh/index/injoin')}",
  220. type: "POST",
  221. data: formdata,
  222. cache: false,
  223. contentType: false,
  224. processData: false,
  225. dataType: "json",
  226. complete: function() {
  227. submitBtn.prop('disabled', false).text('{:__lang("Submit")}');
  228. },
  229. success: function(mes) {
  230. if (mes.code === 1) {
  231. layer.alert(mes.msg || "{:__lang(\'Submitted Successfully\')}", {
  232. skin: 'layui-layer-lan',
  233. closeBtn: 0,
  234. icon: 1,
  235. end: function() {
  236. layer.close(formLayer);
  237. window.location.reload();
  238. }
  239. });
  240. } else {
  241. layer.alert(mes.msg || '{:__lang(\'Operation failed, please try again\')}', {
  242. skin: 'layui-layer-lan',
  243. closeBtn: 0,
  244. title: "{:__lang(\'Tips\')}:",
  245. icon: 2,
  246. anim: 2
  247. });
  248. $('#verifyImgs2').attr('src', '{:addon_url("wwh/index/verify")}?seed=' + Math.random());
  249. }
  250. },
  251. error: function() {
  252. layer.alert('{:__lang(\'Network error, please try again\')}', {
  253. skin: 'layui-layer-lan',
  254. closeBtn: 0,
  255. title: "{:__lang(\'Tips\')}:",
  256. icon: 2,
  257. anim: 2
  258. });
  259. $('#verifyImgs2').attr('src', '{:addon_url("wwh/index/verify")}?seed=' + Math.random());
  260. }
  261. });
  262. });
  263. }
  264. function changeFile(obj) {
  265. var fileName = $(obj).val().split('\\').pop();
  266. if (fileName.length > 50) {
  267. fileName = fileName.substring(0, 50) + '...';
  268. }
  269. $("#file_name").text(fileName);
  270. }
  271. </script>
  272. <script type="text/javascript">
  273. $(function () {
  274. $(".join-item .recruit-top").click(function(){
  275. $(this).siblings(".recruit-content").slideToggle();
  276. $(this).parents().siblings().find(".recruit-content").slideUp();
  277. $(this).parent().toggleClass("on");
  278. $(this).parent().siblings().removeClass("on");
  279. })
  280. });
  281. </script>
  282. </body>
  283. </html>