index.html 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>朗读小咖秀</title>
  7. <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
  8. <script src="https://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
  9. </head>
  10. <style>
  11. * {
  12. margin: 0;
  13. padding: 0;
  14. }
  15. #container {
  16. overflow: hidden;
  17. width: 100%;
  18. height: 51.1733rem;
  19. margin-bottom: 1.8667rem;
  20. background: url('http://reader-wx.ai160.com/images/reader/v3/bg.jpg') no-repeat;
  21. background-size: 100% 100%;
  22. }
  23. .commoditys {
  24. display: flex;
  25. align-items: center;
  26. justify-content: space-between;
  27. margin: 5.2267rem auto;
  28. width: 9.0133rem;
  29. height: 3.4667rem;
  30. padding: 0.3733rem 0.2667rem;
  31. box-sizing: border-box;
  32. border-radius: 20px;
  33. }
  34. .commodity {
  35. position: relative;
  36. width: 2.5867rem;
  37. height: 2.5867rem;
  38. border-radius: 6px;
  39. padding: 0.0533rem;
  40. background-clip: content-box !important;
  41. border: 2px solid white;
  42. }
  43. .active {
  44. position: absolute;
  45. width: 0.72rem;
  46. height: 0.48rem;
  47. right: 0;
  48. bottom: 0;
  49. }
  50. .aborder {
  51. border-color: #ff935e;
  52. }
  53. .c-1 {
  54. background: url('http://reader-wx.ai160.com/images/reader/v3/299.png') no-repeat;
  55. background-size: contain;
  56. }
  57. .c-2 {
  58. background: url('http://reader-wx.ai160.com/images/reader/v3/99.png') no-repeat;
  59. background-size: contain;
  60. }
  61. .c-3 {
  62. background: url('http://reader-wx.ai160.com/images/reader/v3/15.png') no-repeat;
  63. background-size: contain;
  64. }
  65. .payBox {
  66. position: fixed;
  67. display: flex;
  68. align-items: center;
  69. justify-content: space-between;
  70. box-sizing: border-box;
  71. left: 0;
  72. bottom: 0;
  73. width: 100%;
  74. padding: 0.4rem 0.48rem;
  75. background: white;
  76. }
  77. .payBox .left {
  78. font-size: 0.48rem;
  79. }
  80. .price {
  81. color: #ff9108;
  82. font-size: 0.64rem;
  83. font-weight: bold;
  84. }
  85. .pay {
  86. padding: 0.1867rem 0.6933rem;
  87. background: #ff9108;
  88. color: white;
  89. font-weight: 500;
  90. border-radius: 0.6133rem;
  91. font-size: 0.48rem;
  92. }
  93. .mask {
  94. position: fixed;
  95. display: flex;
  96. align-items: center;
  97. justify-content: center;
  98. width: 100vw;
  99. height: 100vh;
  100. left: 0;
  101. top: 0;
  102. background-color: rgba(0, 0, 0, 0.568);
  103. }
  104. .payTips {
  105. display: flex;
  106. flex-direction: column;
  107. align-items: center;
  108. width: 6.4533rem;
  109. height: 6.96rem;
  110. padding: 1.0133rem;
  111. box-sizing: border-box;
  112. border-radius: 11px;
  113. background: white;
  114. }
  115. .simg {
  116. width: 1.6rem;
  117. height: 1.7867rem;
  118. }
  119. .t1 {
  120. margin: 0.8rem 0;
  121. font-size: 0.48rem;
  122. }
  123. .goXkx {
  124. padding: 0.1rem 1.3333rem;
  125. font-size: 0.4267rem;
  126. color: white;
  127. background: linear-gradient(180deg, #66d751 0%, #65d952 100%);
  128. border-radius: 0.4rem;
  129. }
  130. </style>
  131. <body>
  132. <div id="container">
  133. <div class="commoditys" v-if="products.length>0">
  134. <div :class="['commodity c-1', active==products[0].id?'aborder':'']" @click="selected(products[0])">
  135. <img src="http://reader-wx.ai160.com/images/reader/v3/active.png" class="active" v-show="active==products[0].id" />
  136. </div>
  137. <div :class="['commodity c-2', active==products[2].id?'aborder':'']" @click="selected(products[2])">
  138. <img src="http://reader-wx.ai160.com/images/reader/v3/active.png" class="active" v-show="active==products[2].id" />
  139. </div>
  140. <div :class="['commodity c-3', active==products[1].id?'aborder':'']" @click="selected(products[1])">
  141. <img src="http://reader-wx.ai160.com/images/reader/v3/active.png" class="active" v-show="active==products[1].id" />
  142. </div>
  143. </div>
  144. <div class="payBox" v-if="active!=''">
  145. <div class="left">
  146. {{product.title}}
  147. <span class="price">{{product.price/100}}</span>
  148. </div>
  149. <div class="pay" @click="pay">立即支付</div>
  150. </div>
  151. <div class="mask" v-if="mask">
  152. <div class="payTips">
  153. <img src="https://reader-wx.ai160.com/images/reader/v3/right.webp" class="simg" />
  154. <div class="t1">支付成功</div>
  155. <div class="goXkx" @click="closeMask">确认</div>
  156. </div>
  157. </div>
  158. </div>
  159. </body>
  160. <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.min.js"></script>
  161. <script>
  162. let app = new Vue({
  163. el: '#container',
  164. data: {
  165. products: [],
  166. product: {},
  167. active: '',
  168. uid: '',
  169. code: '',
  170. mask: false
  171. },
  172. mounted() {
  173. // 原始URL
  174. var url = location.search
  175. // 创建URLSearchParams对象
  176. var searchParams = new URLSearchParams(url)
  177. // 获取code参数的值
  178. var code = searchParams.get('code')
  179. var uid = searchParams.get('uid')
  180. if (uid) {
  181. this.uid = uid
  182. }
  183. if (code) {
  184. this.code = code
  185. axios({
  186. method: 'get',
  187. url: 'https://reader-api.ai160.com/wx/v3/product/learn',
  188. headers: {
  189. uid: this.uid,
  190. // uid: 'd83d947655f6455a96f4197d31afa6d4',
  191. channelCode: '3001'
  192. }
  193. }).then(res => {
  194. this.products = res.data.data.productList
  195. this.active = res.data.data.productList[0].id
  196. this.product = res.data.data.productList[0]
  197. })
  198. } else {
  199. this.getWxCode()
  200. }
  201. },
  202. methods: {
  203. selected(e) {
  204. this.active = e.id
  205. this.product = e
  206. },
  207. pay() {
  208. axios({
  209. method: 'post',
  210. url: 'https://reader-api.ai160.com/order/create',
  211. headers: {
  212. uid: this.uid,
  213. // uid: 'd83d947655f6455a96f4197d31afa6d4',
  214. channelCode: '3001'
  215. },
  216. data: {
  217. productId: this.active
  218. }
  219. }).then(res => {
  220. axios({
  221. method: 'post',
  222. url: 'https://reader-api.ai160.com/wx/pay/efun',
  223. headers: {
  224. uid: this.uid,
  225. channelCode: '3001'
  226. },
  227. data: {
  228. payType: 'WXPAY',
  229. code: this.code,
  230. orderId: res.data.data
  231. }
  232. }).then(res => {
  233. let options = res.data.data
  234. WeixinJSBridge.invoke(
  235. 'getBrandWCPayRequest',
  236. {
  237. appId: options.appId, //公众号ID,由商户传入2
  238. timeStamp: options.timeStamp, //时间戳,自1970年以来的秒数
  239. nonceStr: options.nonceStr, //随机串
  240. package: options.package,
  241. signType: options.signType, //微信签名方式:
  242. paySign: options.sign //微信签名
  243. },
  244. async res => {
  245. if (res.err_msg == 'get_brand_wcpay_request:ok') {
  246. this.mask = true
  247. } else {
  248. this.getWxCode()
  249. }
  250. }
  251. )
  252. })
  253. })
  254. },
  255. closeMask() {
  256. this.mask = false
  257. this.getWxCode()
  258. },
  259. getWxCode() {
  260. const appId = 'wxf05800eea975a68b'
  261. const redirect_uri = encodeURIComponent('https://h5-pay.ai160.com/reader-ios/index.html?uid=' + this.uid)
  262. // const redirect_uri = encodeURIComponent('https://h5-pay.ai160.com/reader-ios?uid=d83d947655f6455a96f4197d31afa6d4')
  263. const url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appId + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_base#wechat_redirect'
  264. location.href = url
  265. }
  266. }
  267. })
  268. </script>
  269. </html>