integral.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  8. <meta name='apple-touch-fullscreen' content='yes'>
  9. <meta name="apple-mobile-web-app-capable" content="yes"/>
  10. <meta content="fullscreen=yes,preventMove=no" name="ML-Config">
  11. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  12. <meta name="renderer" content="webkit">
  13. <meta name="apple-mobile-web-app-capable" content="yes"/>
  14. <meta name="keywords" content="电子烟,关键字"/>
  15. <meta name="Description" content="网站描述"/>
  16. <title>我的积分</title>
  17. <link rel="stylesheet" href="/assets/index/css/common.css?t=21">
  18. <link rel="stylesheet" href="/assets/index/css/integral.css">
  19. </head>
  20. <body>
  21. <!-- 头部导航栏 -->
  22. <header class="headerContainer" id="headerContainer">
  23. <!-- 顶部提示 -->
  24. <div class="warnContainer">
  25. <h4 class="warnText">WARNING: This product contains nicotine. Nicotine is an addictive chemical.</h4>
  26. </div>
  27. <!-- pc端头部 -->
  28. <div id="computerEndHeader">
  29. <a href="/index/index/index.html">
  30. <h1 class="computerLogo">
  31. <img src="/assets/index/asstes/icon/logo.png" alt="Free Shipping Vapes" title="Free Shipping Vapes">
  32. </h1>
  33. </a>
  34. <div class="headIconContainer">
  35. <!-- 购物车 -->
  36. <a href="/index/index/index.html">
  37. <div class="headIconItem shoppingCartIcon">
  38. <img src="/assets/index/asstes/icon/shoppingCart.png" alt="shoppingCart" tabindex="shoppingCart">
  39. </div>
  40. </a>
  41. <!-- 收藏 -->
  42. <!-- <div class="headIconItem collectIcon">-->
  43. <!-- <img src="/assets/index/asstes/icon/collect.png" alt="collect" tabindex="collect">-->
  44. <!-- </div>-->
  45. <!-- 个人中心 -->
  46. <a href="/index/user/personal.html">
  47. <div class="headIconItem userIcon">
  48. <img src="/assets/index/asstes/icon/user.png" alt="user" tabindex="user">
  49. </div>
  50. </a>
  51. </div>
  52. </div>
  53. <!-- 移动端头部 -->
  54. <div id="mobileEndHeader">
  55. <div class="mobileEndHeaderConten">
  56. <a href="/index/index/index.html">
  57. <h1 class="mobileLogo">
  58. <img src="/assets/index/asstes/icon/logo.png" alt="Free Shipping Vapes" title="Free Shipping Vapes">
  59. </h1>
  60. </a>
  61. <div class="mobileUserIconList">
  62. <div class="mobileUserIcon userIcon">
  63. <img src="/assets/index/asstes/icon/user.png" alt="user" tabindex="user">
  64. </div>
  65. </div>
  66. <div class="mobileMenu">
  67. <p id="mobileMenuBot">
  68. <span id="mobileMenuLink"></span>
  69. </p>
  70. </div>
  71. </div>
  72. <!-- 移动端菜单 -->
  73. <section class="mobileMenuFixed">
  74. <div class="mobileMenuItem">
  75. <a href="/index/index/index.html">
  76. <h2 class="menuItemTitle">NEW VAPES</h2>
  77. </a>
  78. </div>
  79. <!-- <div class="mobileMenuItem">
  80. <h2 class="menuItemTitle">DISPOSABLES</h2>
  81. </div>-->
  82. <div class="mobileMenuItem">
  83. <a href="/index/cart/shoppingCart.html">
  84. <h2 class="menuItemTitle shoppingCartIcon">Shopping Cart</h2>
  85. </a>
  86. </div>
  87. <!-- <div class="mobileMenuItem">
  88. <h2 class="menuItemTitle collectIcon">Collect</h2>
  89. </div>-->
  90. <div class="mobileMenuItem active">
  91. <a href="/index/user/order.html">
  92. <h2 class="menuItemTitle userIcon">Personal</h2>
  93. </a>
  94. </div>
  95. </section>
  96. </div>
  97. </header>
  98. <main id="main">
  99. <section class="pageContainer">
  100. <div class="pageMain">
  101. <!-- 页面菜单 -->
  102. <div class="navContainer" id="userNavContainer">
  103. <a href="/index/index/index.html">
  104. <nav class="navItem">
  105. <div class="navItemFlex">
  106. <img src="/assets/index/asstes/icon/hm.png" alt="">
  107. <h2 class="navTitle">Home</h2>
  108. </div>
  109. </nav>
  110. </a>
  111. <nav class="navItem">
  112. <div class="navItemFlex">
  113. <img src="/assets/index/asstes/icon/order.png" alt="">
  114. <h2 class="navTitle">My orders</h2>
  115. </div>
  116. <div class="sunNavBox">
  117. <a href="#">
  118. <nav class="sunNavItem orderNavItem" id="treat" data-type="treat">
  119. <h3 class="sunNavTitle">To be shipped</h3>
  120. </nav>
  121. </a>
  122. <a href="#">
  123. <nav class="sunNavItem orderNavItem" data-type="shipped">
  124. <h3 class="sunNavTitle">Shipped</h3>
  125. </nav>
  126. </a>
  127. <a href="#">
  128. <nav class="sunNavItem orderNavItem" data-type="take">
  129. <h3 class="sunNavTitle">Received</h3>
  130. </nav>
  131. </a>
  132. </div>
  133. </nav>
  134. <nav class="navItem">
  135. <div class="navItemFlex active">
  136. <img src="/assets/index/asstes/icon/jf.png" alt="">
  137. <h2 class="navTitle">My points</h2>
  138. </div>
  139. </nav>
  140. </div>
  141. <div class="pageConten">
  142. <div class="totalIntBox">
  143. <p class="tiTile">My Points:</p>
  144. <p class="tiNumber">{$user['points']}</p>
  145. </div>
  146. <div class="intContainer" id="intContainer">
  147. </div>
  148. <div id="loadingIndicator">loading...</div>
  149. </div>
  150. </div>
  151. </section>
  152. </main>
  153. <!-- 底部 -->
  154. <footer class="footerContainer" id="footerContainer">
  155. <section class="sectionContainer">
  156. <div class="elementorContainer">
  157. <div class="footerConter">
  158. <div class="leftText">
  159. <p class="ltK">NEWALETTER</p>
  160. <p class="ltV">Sign up for the Free Shipping Vapes</p>
  161. </div>
  162. <div class="footerInuptBox">
  163. <img class="mailIcon" src="/assets/index/asstes/icon/mailIcon.png" alt="">
  164. <input class="footerInupt" type="text">
  165. <img class="arrowIcon" src="/assets/index/asstes/icon/arrowIcon.png" alt="">
  166. </div>
  167. <div class="footerIconContainer">
  168. <div class="footerIconList">
  169. <a href="#">
  170. <div class="footerIconItem">
  171. <img src="/assets/index/asstes/icon/whatsapp.png" alt="">
  172. </div>
  173. </a>
  174. <a href="#">
  175. <div class="footerIconItem">
  176. <img src="/assets/index/asstes/icon/facebook.png" alt="">
  177. </div>
  178. </a>
  179. <a href="#">
  180. <div class="footerIconItem">
  181. <img src="/assets/index/asstes/icon/instagram.png" alt="">
  182. </div>
  183. </a>
  184. </div>
  185. <div class="footerVlsaImg">
  186. <a href="#">
  187. <div class="footerVlsaItem">
  188. <img src="https://img2.baidu.com/it/u=1367821108,121397947&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500"
  189. alt="">
  190. </div>
  191. </a>
  192. <a href="#">
  193. <div class="footerVlsaItem">
  194. <img src="https://img2.baidu.com/it/u=1367821108,121397947&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500"
  195. alt="">
  196. </div>
  197. </a>
  198. <a href="#">
  199. <div class="footerVlsaItem">
  200. <img src="https://img2.baidu.com/it/u=1367821108,121397947&fm=253&fmt=auto&app=138&f=JPEG?w=1200&h=500"
  201. alt="">
  202. </div>
  203. </a>
  204. </div>
  205. </div>
  206. </div>
  207. </div>
  208. </section>
  209. <section class="sectionContainer warningContainer">
  210. <div class="elementorContainer">
  211. <div class="warningBox">
  212. <p class="warningText">WARNING: Our products contain nicotine, a poisonous and addictive substance.
  213. Our products are only intended for committed smokers of legal smoking age and not by
  214. non-smokers, children, women who are pregnant or may become pregnant or any person with an
  215. elevated risk of, or preexisting condition of, any medical condition which includes, but is not
  216. limited to, heart disease, diabetes, high blood pressure or asthma. If you experience any side
  217. effects or possible side effects, stop using the product immediately and consult a physician.
  218. Product may be poisonous if orally ingested. Our products are not smoking cessation products and
  219. have not been tested or guaranteed as such. Our products have not been evaluated by the Food and
  220. Drug Administration nor is it intended to treat, prevent or cure any disease or condition. For
  221. their protection, please keep out of reach of children and pets. Read our terms of use page
  222. before purchasing our products.</p>
  223. </div>
  224. </div>
  225. </section>
  226. </footer>
  227. <!-- 年龄提示层 -->
  228. <section class="maskContainer">
  229. <div class="ageReminderBox">
  230. <img class="ageReminderBack"
  231. src="https://img1.baidu.com/it/u=3449617615,1431463931&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1709485200&t=489bafcac7c5bebed91cf50c14356269"
  232. alt="">
  233. <div class="ageReminderInfo">
  234. <h3>ARE YOU OF LEAAL SMOKIND AGE?</h3>
  235. <div class="ageReminderButBox">
  236. <div class="ageRBut ageReminderNo"><span>NO</span></div>
  237. <div class="ageRBut ageReminderYes"><span>Yes, I am 21+</span></div>
  238. </div>
  239. </div>
  240. </div>
  241. </section>
  242. </body>
  243. <script src="/assets/index/js/jquery-1.12.0.js"></script>
  244. <script src="/assets/index/js/flexible.js"></script>
  245. <script src="/assets/index/js/public.js?t=11"></script>
  246. <script>
  247. $(document).ready(function () {
  248. //触屏事件 || 点击事件
  249. const tap = "ontouchstart" in window ? "touchstart" : "click";
  250. //页码
  251. let page = 1;
  252. //页数
  253. let itemsPerPage = 20;
  254. //加载中
  255. let isLoading = false;
  256. // 加载数据函数
  257. function loadData() {
  258. if (isLoading) {
  259. return;
  260. }
  261. isLoading = true;
  262. // 显示加载指示器
  263. $('#loadingIndicator').show();
  264. //调试后记得去除这段代码
  265. /* setTimeout(() => {
  266. // 在页面中添加数据
  267. const container = $('#intContainer');
  268. [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].forEach(function (item) {
  269. container.append(`
  270. <div class="intItem">
  271. <div class="intValItem">
  272. <div class="valKey">
  273. <p class="vTitle">变动数量</p>
  274. <p class="symbol">:</p>
  275. </div>
  276. <p class="valVal">999</p>
  277. </div>
  278. <div class="intValItem">
  279. <div class="valKey">
  280. <p class="vTitle">变动时间</p>
  281. <p class="symbol">:</p>
  282. </div>
  283. <p class="valVal">2023:12:12 12-12-12</p>
  284. </div>
  285. <div class="intValItem">
  286. <div class="valKey">
  287. <p class="vTitle">描述/说明</p>
  288. <p class="symbol">:</p>
  289. </div>
  290. <p class="valVal">
  291. --
  292. </p>
  293. </div>
  294. </div>`);
  295. });
  296. // 更新当前页数
  297. page++;
  298. // 隐藏加载指示器
  299. $('#loadingIndicator').hide();
  300. isLoading = false;
  301. }, 1000)
  302. return*/
  303. $.ajax({
  304. url: '/index/user/pointsLogs',
  305. type: 'GET',
  306. data: {
  307. page: page,
  308. per_page: itemsPerPage
  309. },
  310. success: function (response) {
  311. // 处理成功响应
  312. const data = response.data.list.data;
  313. // 在页面中添加数据
  314. const container = $('#intContainer');
  315. data.forEach(function (item) {
  316. container.append(`
  317. <div class="intItem">
  318. <div class="intValItem">
  319. <div class="valKey">
  320. <p class="vTitle">Score</p>
  321. <p class="symbol">:</p>
  322. </div>
  323. <p class="valVal">${item.value}</p>
  324. </div>
  325. <div class="intValItem">
  326. <div class="valKey">
  327. <p class="vTitle">Created At</p>
  328. <p class="symbol">:</p>
  329. </div>
  330. <p class="valVal">${item.create_time}</p>
  331. </div>
  332. <div class="intValItem">
  333. <div class="valKey">
  334. <p class="vTitle">Description</p>
  335. <p class="symbol">:</p>
  336. </div>
  337. <p class="valVal">
  338. ${item.describe}
  339. </p>
  340. </div>
  341. </div>`);
  342. });
  343. // 更新当前页数
  344. page++;
  345. // 隐藏加载指示器
  346. $('#loadingIndicator').hide();
  347. isLoading = false;
  348. },
  349. error: function () {
  350. // 处理错误情况
  351. console.log('请求数据失败');
  352. // 隐藏加载指示器
  353. $('#loadingIndicator').hide();
  354. isLoading = false;
  355. }
  356. });
  357. }
  358. //菜单切换
  359. $(".orderNavItem").on(tap, function () {
  360. const type = $(this).attr('data-type');
  361. window.location.replace(`/index/user/order.html?dataType=${type}`)
  362. });
  363. // 监听页面滚动事件
  364. $(window).on('scroll', function () {
  365. const scrollBottom = $(window).height() + $(window).scrollTop();
  366. if (scrollBottom + 20 >= $(document).height()) {
  367. loadData();
  368. }
  369. });
  370. loadData();
  371. })
  372. </script>
  373. </html>