buy.blade.php 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. @include('home.soft.common.head')
  5. <link rel="stylesheet" href="/static/logo/font/iconfont.css">
  6. <style>
  7. body{
  8. color: #515a6e;
  9. font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,Arial,sans-serif;
  10. }
  11. p{
  12. margin: 0;
  13. }
  14. /* 会员中心 */
  15. .vip-model {
  16. display: flex;
  17. flex-wrap: nowrap;
  18. justify-content: flex-start;
  19. font-size: 14px;
  20. }
  21. .v-left {
  22. width: 160px;
  23. border-right: 1px solid #ddd;
  24. text-align: center;
  25. }
  26. .v-left .v-name {
  27. font-size: 16px;
  28. font-weight: 600;
  29. margin-bottom: 10px;
  30. }
  31. .v-left .v-logo {
  32. width: 100px;
  33. height: 100px;
  34. border-radius: 100px;
  35. border: 1px solid #ddd;
  36. }
  37. .v-left .vip-interest {
  38. margin: 20px 0;
  39. line-height: 2.8;
  40. }
  41. .v-left .vip-title {
  42. font-size: 24px;
  43. font-weight: 600;
  44. color: #ed4014;
  45. }
  46. .v-right {
  47. flex: 1;
  48. padding: 0 16px;
  49. }
  50. .vip-list {
  51. display: flex;
  52. flex-wrap: nowrap;
  53. justify-content: space-between;
  54. }
  55. .vip-list .vip-item {
  56. width: 130px;
  57. border: 1px solid #ddd;
  58. border-radius: 10px;
  59. text-align: center;
  60. padding-bottom: 10px;
  61. cursor: pointer;
  62. margin-bottom: 12px;
  63. position: relative;
  64. }
  65. .vip-list .vip-item.active{
  66. color: #fabf64;
  67. background-color: #4c4c50;
  68. }
  69. .vip-list .vip-item.active .vip-red{
  70. color: #fabf64;
  71. }
  72. .vip-list .vip-name {
  73. font-size: 16px;
  74. padding: 10px 0;
  75. }
  76. .vip-list .vip-price {
  77. font-size: 14px;
  78. margin-bottom: 15px;
  79. }
  80. .vip-list .vip-market-price {
  81. margin-left: 10px;
  82. text-decoration: line-through;
  83. opacity: 0.8;
  84. }
  85. .vip-list .price-value {
  86. font-size: 26px;
  87. font-weight: 600;
  88. margin-left: 3px;
  89. }
  90. .vip-list .vip-desc {
  91. color: #999;
  92. font-size: 12px;
  93. }
  94. .vip-list .vip-red {
  95. color: #e12424;
  96. font-weight: 600;
  97. }
  98. .vip-tips {
  99. color: #999;
  100. font-size: 12px;
  101. margin-bottom: 12px;
  102. }
  103. .pay-line, .pay-type {
  104. display: flex;
  105. flex-wrap: nowrap;
  106. justify-content: flex-start;
  107. line-height: 35px;
  108. }
  109. .pay-item {
  110. border: 1px solid #ddd;
  111. padding: 0 15px;
  112. border-radius: 5px;
  113. cursor: pointer;
  114. height: 35px;
  115. margin-right: 15px;
  116. }
  117. .pay-type .active {
  118. border: 1px solid #e12424;
  119. color: #e12424;
  120. }
  121. .pay-item .iconfont {
  122. margin-right: 5px;
  123. }
  124. .pay-item .icon-zhifubaozhifu {
  125. color: #027AFF;
  126. }
  127. .pay-item .icon-weixinzhifu {
  128. color: #62b900;
  129. }
  130. .pay-cont {
  131. padding: 10px 0;
  132. display: flex;
  133. flex-wrap: nowrap;
  134. justify-content: flex-start;
  135. }
  136. .pay-cont .pay-img {
  137. width: 150px;
  138. height: 150px;
  139. background-color: #eee;
  140. position: relative;
  141. }
  142. .pay-cont .pay-desc {
  143. padding: 20px;
  144. line-height: 2.2;
  145. font-size: 14px;
  146. }
  147. .pay-cont .iconfont {
  148. vertical-align: middle;
  149. font-size: 16px;
  150. margin: 0 5px 0 10px;
  151. }
  152. .iconfont {
  153. vertical-align: middle;
  154. }
  155. .dis-agreement {
  156. display: none;
  157. text-align: center;
  158. height: 140px;
  159. line-height: 140px;
  160. font-size: 18px;
  161. font-weight: 600;
  162. color: #ed4014;
  163. }
  164. .pay-agreement span {
  165. font-size: 12px;
  166. color: #999;
  167. margin: 0 !important;
  168. }
  169. .agreement-txt {
  170. cursor: pointer;
  171. }
  172. .agreement-txt:hover {
  173. color: #ed4014;
  174. }
  175. .money-color {
  176. color: #ed4014;
  177. font-size: 22px;
  178. font-weight: 600;
  179. }
  180. .vip-banner {
  181. background-color: #eee;
  182. height: 60px;
  183. width: 100%;
  184. margin-bottom: 15px;
  185. }
  186. .font-12{
  187. font-size: 12px !important;
  188. }
  189. .font-13{
  190. font-size: 13px !important;
  191. }
  192. .open-member{
  193. width: 100px;
  194. height: 24px;
  195. border-radius: 24px;
  196. vertical-align: middle;
  197. cursor: pointer;
  198. margin-right: 10px;
  199. }
  200. .vip-top{
  201. height: 80px;
  202. background: url('/static/logo/v-topbg.png') no-repeat center center;
  203. margin: 0 0 16px 0;
  204. display: flex;
  205. flex-wrap: nowrap;
  206. justify-content: flex-start;
  207. padding: 15px 40px;
  208. color: #f8f8f8;
  209. }
  210. .vip-top .vt-logo{
  211. width: 50px;
  212. height: 50px;
  213. border-radius: 50px;
  214. border: 1px solid #eee;
  215. margin-right: 15px;
  216. }
  217. .vip-top .vt-name{
  218. font-size: 16px;
  219. font-weight: 600;
  220. padding-top: 5px;
  221. margin: 0;
  222. }
  223. .il-vip{
  224. width: 95px;
  225. height: 30px;
  226. margin-top: 40px;
  227. margin-bottom: 10px;
  228. }
  229. .il-interest{
  230. margin-top: 60px;
  231. line-height: 2.5;
  232. padding-left: 50px;
  233. text-align: left;
  234. font-size: 13px;
  235. position: relative;
  236. }
  237. .il-interest:before{
  238. position: absolute;
  239. content: '';
  240. top: -45px;
  241. width: 80%;
  242. height: 1px;
  243. background-color: #dedede;
  244. left: 0;
  245. right: 0;
  246. margin: auto;
  247. }
  248. .i-cost{
  249. position: absolute;
  250. width: 60px;
  251. top: -7px;
  252. right: 0;
  253. }
  254. .member-model {
  255. line-height: 1.8;
  256. padding: 10px;
  257. display: none;
  258. position: absolute;
  259. left: 0;
  260. top: 0;
  261. z-index: 3;
  262. background-color: #fff;
  263. }
  264. .member-model .member-btn {
  265. text-align: right;
  266. margin-top: 20px;
  267. }
  268. .agreement-content{
  269. height: 557px;
  270. overflow: auto;
  271. text-indent: 2em;
  272. }
  273. .agreement-content .font-600{
  274. font-weight: 600;
  275. font-size: 18px;
  276. }
  277. .member-btn button{
  278. background-color: #fff;
  279. border: 1px solid transparent;
  280. border-color: #dcdee2;
  281. font-size: 14px;
  282. border-radius: 4px;
  283. padding: 0 15px;
  284. height: 32px;
  285. color: #515a6e;
  286. }
  287. .member-btn button:hover{
  288. border-color: #2d8cf0;
  289. color: #2d8cf0;
  290. }
  291. .i-cost{
  292. position: absolute;
  293. width: 60px;
  294. top: -7px;
  295. right: 0;
  296. }
  297. .coupon-modal{
  298. position: absolute;
  299. bottom: 0;
  300. right: 0;
  301. background: #ed4014;
  302. padding: 20px;
  303. z-index: 2;
  304. font-size: 12px;
  305. color: #999;
  306. border-radius: 10px;
  307. display: none;
  308. }
  309. .coupon-bg{
  310. background: #fff;
  311. border-radius: 10px;
  312. padding: 10px 20px;
  313. }
  314. .coupon-price{
  315. color: #ed4014;
  316. font-size: 26px;
  317. font-weight: 600;
  318. }
  319. .coupon-desc{
  320. font-size: 14px;
  321. }
  322. .coupon-tips{
  323. border-top: 1px dashed #ddd;
  324. margin-top: 10px;
  325. padding-top: 10px;
  326. font-size: 12px;
  327. }
  328. .coupon-close{
  329. position: absolute;
  330. left: 0px;
  331. top: 0;
  332. line-height: 1;
  333. color: #fff;
  334. font-size: 30px;
  335. transform: rotateZ(45deg);
  336. cursor: pointer;
  337. }
  338. </style>
  339. </head>
  340. <body>
  341. <div class="vip-top">
  342. <img src="{{ $userInfo->avatar ?: "/static/logo.png"}}" class="vt-logo" />
  343. <div class="font-12">
  344. <p class="vt-name">{{ $userInfo->username }}</p>
  345. <span>会员有效期:</span>
  346. @if($billInfo['validity_type'] == 2)
  347. <span>永久有效</span>
  348. @elseif($billInfo['validity_type'] == 1)
  349. <span>{{ $billInfo['validity_end_time'] }}</span>
  350. @else
  351. <span>非VIP会员</span>
  352. @endif
  353. </div>
  354. </div>
  355. <div class="vip-model">
  356. <div class="v-left">
  357. <img src="/static/logo/i-vip.png" class="il-vip" />
  358. <p class="v-name">会员尊享</p>
  359. <p>多项特权开通即享</p>
  360. <ul class="il-interest">
  361. <li>没有官方水印</li>
  362. <li>不限功能使用</li>
  363. <li>不限电脑设备</li>
  364. <li>永久免费升级</li>
  365. <li>专业技术支持</li>
  366. </ul>
  367. </div>
  368. <div class="v-right">
  369. @if(isset($ad) && $ad->logo)
  370. <div class="vip-banner">
  371. <img src="{{$ad->logo}}" style="width: 100%; height: 100%;"/>
  372. </div>
  373. @endif
  374. <div class="vip-list">
  375. @if($productInfo && $productInfo->price4)
  376. <div id="vip_item4" class="vip-item active" onclick="selectTerm(4,{{ $productInfo->price4 }})">
  377. <img src="/static/logo/i-cost.png" class="i-cost" />
  378. <div class="vip-name">永久</div>
  379. <div>
  380. <p class="vip-price">
  381. ¥<span class="price-value" id="permanentPrice">{{ floatval($productInfo->price4) + 10 }}</span>
  382. @if($productInfo->market_price4)
  383. <span class="vip-market-price">¥{{ floatval($productInfo->market_price4) }}</span>
  384. @endif
  385. </p>
  386. <p class="vip-desc vip-red">
  387. {{ $productInfo->desc_price4 ?: "超划算,热销中" }}
  388. </p>
  389. </div>
  390. </div>
  391. @endif
  392. @if($productInfo->price1)
  393. <div id="vip_item1" class="vip-item" onclick="selectTerm(1,{{ $productInfo->price1 }})">
  394. <img src="/static/logo/i-cost.png" class="i-cost" />
  395. <div class="vip-name">一个月</div>
  396. <div>
  397. <p class="vip-price">
  398. ¥<span class="price-value">{{ floatval($productInfo->price1) }}</span>
  399. @if($productInfo->market_price1)
  400. <span class="vip-market-price">¥{{ floatval($productInfo->market_price1) }}</span>
  401. @endif
  402. </p>
  403. <p class="vip-desc vip-red">
  404. {{ $productInfo->desc_price1 ?: "有效期一个月" }}
  405. </p>
  406. </div>
  407. </div>
  408. @endif
  409. @if($productInfo->price2)
  410. <div id="vip_item2" class="vip-item" onclick="selectTerm(2,{{ $productInfo->price2 }})">
  411. <img src="/static/logo/i-sale.png" class="i-cost" />
  412. <div class="vip-name">半年</div>
  413. <div>
  414. <p class="vip-price">
  415. ¥<span class="price-value">{{ floatval($productInfo->price2) }}</span>
  416. @if($productInfo->market_price2)
  417. <span class="vip-market-price">¥{{ floatval($productInfo->market_price2) }}</span>
  418. @endif
  419. </p>
  420. <p class="vip-desc">
  421. {{ $productInfo->desc_price2 ?: "有效期半年" }}
  422. </p>
  423. </div>
  424. </div>
  425. @endif
  426. @if($productInfo->price3)
  427. <div id="vip_item3" class="vip-item" onclick="selectTerm(3,{{ $productInfo->price3 }})">
  428. <img src="/static/logo/i-sale.png" class="i-cost" />
  429. <div class="vip-name">一年</div>
  430. <div>
  431. <p class="vip-price">
  432. ¥<span class="price-value">{{ floatval($productInfo->price3) }}</span>
  433. @if($productInfo->market_price3)
  434. <span class="vip-market-price">¥{{ floatval($productInfo->market_price3) }}</span>
  435. @endif
  436. </p>
  437. <p class="vip-desc">
  438. {{ $productInfo->desc_price3 ?: "有效期一年" }}
  439. </p>
  440. </div>
  441. </div>
  442. @endif
  443. <!-- @if($productInfo->price5)
  444. <div id="vip_item5" class="vip-item" onclick="selectTerm(5,{{ $productInfo->price5 }})">
  445. <div class="vip-name">7天会员</div>
  446. <div>
  447. <p class="vip-price">
  448. ¥<span class="price-value">{{ $productInfo->price5 }}</span>
  449. </p>
  450. <p class="vip-desc">
  451. {{ $productInfo->desc_price5 ?: "限时特价" }}
  452. </p>
  453. </div>
  454. </div>
  455. @endif -->
  456. </div>
  457. <p class="vip-tips">温馨提示:VIP会员到期后将直接转为非VIP会员</p>
  458. <p class="pay-line">
  459. 优惠券:<span id="coupon-price">10元</span> <span id="btn-coupon" style="color:#999; text-decoration: underline; font-size:12px; margin-left:15px;cursor: pointer;" onclick="showCoupon(true)">查看优惠券</span>
  460. </p>
  461. <p class="pay-line">
  462. 支付金额:<span id="payMoney" class="money-color">0</span>元
  463. </p>
  464. <div class="pay-line">
  465. <p>支付方式:</p>
  466. <div class="pay-type">
  467. <div id="payWechat" class="pay-item active" onclick="selectPaytype('wechat')">
  468. <span class="iconfont icon-weixinzhifu"></span>微信支付
  469. </div>
  470. <div id="payAlipay" class="pay-item" onclick="selectPaytype('alipay')">
  471. <span class="iconfont icon-zhifubaozhifu"></span>支付宝支付
  472. </div>
  473. </div>
  474. <div class="pay-agreement">
  475. <label>
  476. <input type="checkbox" checked id="payCheck" onclick="checkPayBox(this)"/>
  477. </label>
  478. <span>同意并接受</span>
  479. <span class="agreement-txt" onclick="agreementModel(true)">《软件会员增值服务协议》</span>
  480. </div>
  481. </div>
  482. <div id="dis-agreement1" class="pay-cont">
  483. <div class="spinner-border m-5" role="status" id="spinnerShow">
  484. <span class="visually-hidden">Loading...</span>
  485. </div>
  486. <div id="qrcode" class="pay-img" style="display: none"></div>
  487. <div class="pay-desc">
  488. <div>
  489. <span class="iconfont icon-saoma1"></span> 请打开微信/支付宝扫一扫
  490. </div>
  491. <div>
  492. <span class="iconfont icon-erweima1"></span> 扫描左侧二维码
  493. </div>
  494. <div>
  495. <span class="iconfont icon-wancheng1"></span> 请完成支付
  496. </div>
  497. </div>
  498. </div>
  499. <div id="dis-agreement2" class="dis-agreement">请同意服务协议后方可购买产品</div>
  500. </div>
  501. </div>
  502. <div class="member-model" id="member-model">
  503. <div class="agreement-content">
  504. <p>尊敬的用户您好:</p>
  505. <p>欢迎使用助友办公软件会员增值服务协议,为使用助友办公软件会员增值服务(简称为:本服务),您应当阅读《助友办公软件会员增值服务协议》(简称为:本协议)。请您务必审慎阅读、充分理解各条款内容,特别是免除或限制责任的相应条款。</p>
  506. <p>除非您已阅读并接受本协议所有条款,否则您无权使用本服务。您对本服务的任何购买使用行为即视为您已阅读并同意本协议的约束。如果您未满18周岁,请在法定监护人的陪同下阅读本协议。</p>
  507. <p>本协议是用户与苏州助友办公软件有限公司(简称为:助友办公)之间关于用户加入成为助友办公软件会员且使用助友办公相关软件以及服务所订立的协议。本协议描述助友办公与会员之间关于软件许可以及服务使用及相关方面的权利义务。助友办公软件服务涉及到的助友办公产品的所有权以及相关软件的知识产权归助友办公所有。</p>
  508. <p class="font-600">一、关于本服务</p>
  509. <p>1.会员增值服务费,指用户按照助友办公指定方式支付一定费用后,用户可以享有由助友办公软件提供的应用软件。助友办公可能会根据本服务的整体规划,对本服务的收费标准、增值服务内容进行修改和变更。</p>
  510. <p>2.本服务可通过会员账号在任意一台电脑上使用软件,但一个账号同一时间只能在一台电脑上使用。</p>
  511. <p class="font-600">二、用户禁止行为</p>
  512. <p>1.用户使用本服务的权利是个人的,不允许对账户进行出租、出售等,或其他利用账户进行牟利的行为,若有相关滥用行为,我方有权单方面暂停、禁止账户相关功能。</p>
  513. <p class="font-600">三、退款声明</p>
  514. <p>为了避免购买本产品后引起纠纷,用户可在购买本服务前,对产品进行下载试用,看软件具体的使用效果,软件已提供免费试用,购买本服务则同意了助友办公会员增值服务协议/已试用软件/认可软件,故本公司不接受用户退款申请。</p>
  515. <p class="font-600">四、争议解决</p>
  516. <p>若您和助友办公之间发生任何纠纷或争议,首先应友好协商解决;协商不成的,您同意将纠纷或争议提交助友办公所在地法院管辖。</p>
  517. <p>本《协议》的一切解释权与修改权归助友办公。</p>
  518. </div>
  519. <div class="member-btn">
  520. <Button style="margin:0 10px;" onclick="agreementModel(false);">返回购买</Button>
  521. </div>
  522. </div>
  523. <div class="coupon-modal" id="coupon-modal">
  524. <div class="coupon-bg">
  525. <span class="coupon-close" onclick="showCoupon(false)">+</span>
  526. <div>
  527. <span style="color:#ed4014;">¥</span><span class="coupon-price">10</span> <span class="coupon-desc">满{{ floatval($productInfo->price4) + 10 }}元可用</span>
  528. </div>
  529. <div class="coupon-time">有效期至<span id="coupon-time">2022-12-31 13:66:24</span></div>
  530. <div class="coupon-tips">新人有礼活动,仅适用于本软件</div>
  531. </div>
  532. </div>
  533. <script type="text/javascript" src="/static/js/qrcode.js"></script>
  534. <script>
  535. let buyContext;
  536. let target = '{{ $target }}';
  537. let agentMid = '{{$agentMid}}';
  538. let token = '{{$token}}';
  539. let pay_type = "wechat";
  540. let sku_type = 4;
  541. let pmid = "{{ $productInfo->mid }}";
  542. let permanentPrice = "{{floatval($productInfo->price4)}}";
  543. // 设置允许跨域
  544. axios.defaults.withCredentials = false;
  545. // 默认金额
  546. document.getElementById("payMoney").innerText = "{{ floatval($productInfo->price4) }}"
  547. function selectTerm(type, price) {
  548. sku_type = type;
  549. document.getElementById("payMoney").innerText = price
  550. // 其他的去除
  551. let vipItem1 = document.getElementById("vip_item1").getAttribute("class").replace("active", " ");
  552. document.getElementById("vip_item1").setAttribute("class", vipItem1);
  553. let vipItem2 = document.getElementById("vip_item2").getAttribute("class").replace("active", " ");
  554. document.getElementById("vip_item2").setAttribute("class", vipItem2);
  555. let vipItem3 = document.getElementById("vip_item3").getAttribute("class").replace("active", " ");
  556. document.getElementById("vip_item3").setAttribute("class", vipItem3);
  557. let vipItem4 = document.getElementById("vip_item4").getAttribute("class").replace("active", " ");
  558. document.getElementById("vip_item4").setAttribute("class", vipItem4);
  559. let classVal = document.getElementById("vip_item" + type).getAttribute("class");
  560. document.getElementById("vip_item" + type).setAttribute("class", classVal.concat(" active"))
  561. //创建支付二维码
  562. createPayCode();
  563. }
  564. // 创建支付二维码
  565. createPayCode();
  566. // 账户登录信息
  567. getUserInfo();
  568. function createPayCode() {
  569. document.getElementById('spinnerShow').style.display = ""
  570. document.getElementById("qrcode").innerHTML = ""
  571. document.getElementById('qrcode').style.display = "none"
  572. let data = {
  573. agent_mid: agentMid,
  574. type: sku_type,
  575. pay_type: pay_type
  576. }
  577. axios.post(target + '/api/pay/getPayCode/' + pmid, data, {headers: {Authorization: token}}).then(function (response) {
  578. if (!response.data.error) {
  579. let code = response.data.result;
  580. createQrcode(code);
  581. }
  582. }).catch(function (error) {
  583. console.log(error);
  584. });
  585. }
  586. // 设置支付类型
  587. function selectPaytype(type) {
  588. pay_type = type
  589. if (type === 'wechat') {
  590. let str = document.getElementById("payAlipay").getAttribute("class").replace("active", " ")
  591. document.getElementById("payAlipay").setAttribute("class", str);
  592. let classVal = document.getElementById("payWechat").getAttribute("class");
  593. document.getElementById("payWechat").setAttribute("class", classVal.concat(" active"))
  594. } else {
  595. let str = document.getElementById("payWechat").getAttribute("class").replace("active", " ");
  596. document.getElementById("payWechat").setAttribute("class", str);
  597. let classVal = document.getElementById("payAlipay").getAttribute("class");
  598. document.getElementById("payAlipay").setAttribute("class", classVal.concat(" active"))
  599. }
  600. //创建支付二维码
  601. createPayCode();
  602. }
  603. // 创建二维码
  604. function createQrcode(code) {
  605. var qrcode = new QRCode("qrcode", {
  606. text: "https://www.qasimblog.com/soft/pay/" + code,
  607. width: 150,
  608. height: 150
  609. });
  610. document.getElementById('qrcode').style.display = ""
  611. document.getElementById('spinnerShow').style.display = "none"
  612. // 开始检测支付扫描
  613. startScan(code);
  614. }
  615. let payScanInterval;
  616. let payEndInterval;
  617. function startScan(code) {
  618. if (payScanInterval) {
  619. clearInterval(payScanInterval);
  620. }
  621. if (payEndInterval) {
  622. clearInterval(payEndInterval);
  623. }
  624. payScanInterval = setInterval(() => {
  625. axios.post(target + '/api/pay/checkPayScan/' + code, {}, {headers: {Authorization: token}}).then((response) => {
  626. if (!response.data.error) {
  627. // 提示消息,扫描成功
  628. // 开始检测支付
  629. clearInterval(payScanInterval);
  630. startCheckPayEnd(code);
  631. }
  632. }).catch(function (error) {
  633. console.log(error);
  634. });
  635. }, 1000);
  636. }
  637. // 开始检测支付
  638. function startCheckPayEnd(code) {
  639. if (payEndInterval) {
  640. clearInterval(payEndInterval);
  641. }
  642. payEndInterval = setInterval(() => {
  643. axios.post(target + '/api/pay/checkPayEnd/' + code, {product_type: 1}, {headers: {Authorization: token}}).then((response) => {
  644. if (!response.data.code === 0 || !response.data.error) {
  645. // 关闭定时器
  646. clearInterval(payEndInterval);
  647. // 支付完成
  648. window.top.postMessage('paySuccess', '*');
  649. }
  650. }).catch(function (error) {
  651. console.log(error);
  652. });
  653. }, 1000);
  654. }
  655. // 获取用户信息
  656. function getUserInfo() {
  657. axios.post(target + '/api/login/getUserInfo', {}, {headers: {Authorization: token}}).then(function (response) {
  658. if (!response.data.error) {
  659. let userInfo = response.data.result;
  660. let nowDate = new Date().getTime() / 1000;
  661. document.getElementById('coupon-time').innerText = formatTime(Number(userInfo.created_at)+86400);
  662. document.getElementById('btn-coupon').style.display = 'block';
  663. if(Number(userInfo.created_at) + 86400 < Number(nowDate)){ // 注册时间超过1天
  664. document.getElementById('coupon-price').innerText = '暂无可用优惠券';
  665. document.getElementById('btn-coupon').style.display = 'none';
  666. document.getElementById('permanentPrice').innerHTML = permanentPrice;
  667. }else{
  668. document.getElementById('coupon-modal').style.display = "block";
  669. }
  670. }
  671. }).catch(function (error) {
  672. });
  673. }
  674. function checkPayBox(e){
  675. document.getElementById('dis-agreement1').style.display = "none";
  676. document.getElementById('dis-agreement2').style.display = "none";
  677. if(!e.checked){
  678. document.getElementById('dis-agreement2').style.display = "block"
  679. }else{
  680. document.getElementById('dis-agreement1').style.display = "flex";
  681. }
  682. }
  683. function agreementModel(e){
  684. if(e){
  685. document.getElementById('member-model').style.display = "block";
  686. }else{
  687. document.getElementById('member-model').style.display = "none";
  688. }
  689. }
  690. function showCoupon(e){
  691. if(e){
  692. document.getElementById('coupon-modal').style.display = "block";
  693. }else{
  694. document.getElementById('coupon-modal').style.display = "none";
  695. }
  696. }
  697. function formatTime(str){
  698. let date = new Date(str*1000);
  699. const year = date.getFullYear();
  700. const month = date.getMonth() + 1;
  701. const day = date.getDate();
  702. const hour = date.getHours();
  703. const minute = date.getMinutes();
  704. const second = date.getSeconds();
  705. return [year, month, day].map(formatNumber).join('-') + ' ' + [hour, minute, second].map(formatNumber).join(':');
  706. }
  707. function formatNumber(n) {
  708. n = n.toString();
  709. return n[1] ? n : '0' + n;
  710. }
  711. </script>
  712. </body>
  713. </html>