> 后端使用的是laravel yansongda pay庫
> https://pay.yansongda.cn/docs/v3/
> 公眾號支付
~~~
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/css/font.css">
<link rel="stylesheet" href="/css/mui.min.css">
<title>vip</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-weight: 100;
font-size: 15px;
direction: rtl;
list-style: none;
outline: none;
font-family: 'ukjTor';
}
body{
width: 100%;
max-width: 768px;
margin: auto;
overflow-y: auto;
overflow-x: hidden;
}
.page{
padding: 0 30px;
}
.top{
height: 40vh;
background: url("/images/mob_bg.png") no-repeat;
background-size: 100% 100%;
}
.top .face{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
padding-top: 50px;
}
.top .face img{
width: 90px;
height: 90px;
border-radius: 100%;
border: 3px solid #ededed;
margin-bottom: 5px;
}
.top .face div.app_name{
font-weight: bold;
color: #000000;
}
.top .face div{
margin: 5px 0;
}
.top .face div.id{
color: #444;
}
.bottom{
margin-top: -80px;
}
.vip_list .tag_title{
height: 40px;
line-height: 40px;
color: #000;
text-align: center;
}
.vip_list ul{
margin-top: 10px;
}
.vip_list ul li{
margin-bottom: 14px;
border: 1px solid var(--neutral-light-1, #D3D9EB);
align-items: center;
border-radius: 16px;
padding: 16px;
}
.vip_list ul li div{
display: flex;
justify-content: space-between;
}
.vip_list ul li.cur .value{
font-size: 26px;
}
.vip_list ul li.cur .title{
font-size: 18px;
margin-top: 10px;
}
.vip_list ul li.cur{
color: #000000;
background: url("/images/mob_bg.png") no-repeat;
background-size: 100% 120%;
}
.vip_list ul li p{
margin-top: 10px;
font-size: 13px;
}
.vip_list ul li.check .value{
font-size: 26px;
}
.vip_list ul li.check .title{
font-size: 18px;
margin-top: 10px;
}
.vip_list ul li.check{
margin-top: 22px;
position: relative;
}
.vip_list ul li.check:before{
content: '???????';
position: absolute;
top:-11px;
right: 10px;
width: 72px;
height: 25px;
border-radius: 12.5px;
border: 1px solid #000;
background: #FFF;
text-align: center;
}
.buy_btn{
position: fixed;
bottom: 30px;
left: 0;
width: 100%;
}
.buy_btn .list{
width: 100%;
height: 50px;
line-height: 50px;
}
.buy_btn .list{
display: flex;
flex-direction: row-reverse;
}
.buy_btn .list>div{
width: 50%;
text-align: center;
}
.buy_btn .list>div.text{
background-color: #8B55FF;
color: #fff;
border-radius: 0 40px 40px 0;
}
.buy_btn .list>div.dollar{
background-color: #000;
color: #fff;
border-radius: 40px 0 0 40px;
}
.permission{
border-radius: 16px;
border: 1px solid #DADEE5;
background: #FFF;
margin: 30px 30px 120px;
}
.per_title{
line-height: 30px;
height: 30px;
padding-right: 10px;
margin-top: 10px;
}
.permission ul{
display: flex;
justify-content: space-around;
color: #8691A7;
padding: 16px 0 ;
opacity: 0.5;
}
.permission ul li{
display: flex;
flex-direction: column;
align-items: center;
}
.permission ul li span{
font-size: 12px;
}
.permission ul li img{
width: 30px;
}
.loading-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.loading-spinner {
width: 40px;
height: 40px;
border-radius: 50%;
border: 4px solid #ccc;
border-top-color: #333;
animation: spin 1s infinite linear;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#loading{
display: none;
}
.mui-toast-container{
bottom: 40% !important;
}
</style>
</head>
<body>
<div class="top">
<div class="face">
<img src="/images/avatar.png" alt="">
<div class="app_name">{{ $user['nickname'] ?? '翻譯' }}</div>
<div class="id">{{ isset($user['user_id']) ? 'ID: '. $user['user_id'] : '' }}</div>
</div>
</div>
<div class="page bottom">
<div class="vip_list">
<div class="tag_title">{{ $data['vip_data']['end_time_text'] }}</div>
<ul class="vip_ul">
@foreach($data['vip_data']['vip_list'] as $item)
<li onclick="get_current(this, '{{ $item->price }}', {{ $item->id }})" @if($item->check == 1) class="cur check" @endif>
<div>
<span class="title">{{ $item->title }}</span>
<span class="value">{{ $item->price }}￥</span>
</div>
@if($item->check == 1)
<p>{{ $item->text2 }}</p>
@endif
</li>
@endforeach
</ul>
</div>
</div>
<div class="permission">
<div class="per_title">???? ?????????</div>
<ul>
@foreach($data['vip_data']['vip_permission']['list'] as $item)
<li>
<span><img src="{{ $item->thumb }}" alt=""></span>
<span>{{ $item->name }}</span>
</li>
@endforeach
</ul>
</div>
<div class="buy_btn page">
<div class="list">
<div class="dollar">{{ $default_price }}</div>
<div onclick="pay()" class="text">
@if(isset($user['info']))
@if($user['info']['is_vip'] == 0)
?????????
@else
????????
@endif
@else
?????????
@endif
</div>
</div>
</div>
<div id="loading" class="loading-container">
<div class="loading-spinner"></div>
</div>
<script src="/js/jquery3.6.4.js"></script>
<script src="/js/mui.min.js"></script>
<!--微信的JSSDK-->
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
$(function() {
<!--通過config接口注入權限驗證配置-->
wx.config(@json($config));
});
let id = {{ $default_id }};
function get_current(_that, price, item_id){
let vip_ul = document.querySelectorAll('.vip_ul li')
let dollar = document.querySelector('.dollar')
vip_ul.forEach(item =>{
item.classList.remove('cur')
})
_that.classList.add('cur')
dollar.innerText = price + ' ????'
id = item_id;
}
function pay(){
showLoading()
fetch("/trans/mp_pay", {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
id,
'_token': '{{ csrf_token() }}'
})
}).then(response => response.json()).then(data => {
hideLoading()
if(data.code == 419){
mui.alert('', data.msg,'?????? ??????? ?????', function (){
location.href = '{{ route('trans.vip', ['type'=>'login']) }}'
})
return false;
}
//彈出支付窗口
wx.chooseWXPay({
timestamp: data.timeStamp, // 支付簽名時間戳，
nonceStr: data.nonceStr, // 支付簽名隨機串，不長于 32 位
package: data.package, // 統一支付接口返回的prepay_id參數值，提交格式如：prepay_id=xxxx）
signType: data.signType, // 簽名方式，默認為'SHA1'，使用新版支付需傳入'MD5'
paySign: data.paySign, // 支付簽名
success: function (res) {
// 支付成功后的回調函數
console.log(res)
// res.errMsg === 'chooseWXPay:ok'方式判斷前端返回,微信團隊鄭重提示：
// res.errMsg將在用戶支付成功后返回ok，但并不保證它絕對可靠， 切記。
if (res.errMsg === 'chooseWXPay:ok') {
mui.toast('??? ????? ?????',{ duration:'long', type:'div' })
setTimeout(()=>{
location.reload()
},2000)
}
},
cancel: function (res) {
mui.toast('??? ????? ?????? ?????!',{ duration:'long', type:'div' })
},
// 支付失敗回調函數
fail: function (res) {
mui.toast('??? ????? ?????? ?????!',{ duration:'long', type:'div' })
}
});
}).catch(error => {
console.error('error')
})
}
// 顯示加載中效果
function showLoading() {
document.getElementById('loading').style.display = 'flex';
}
// 隱藏加載中效果
function hideLoading() {
document.getElementById('loading').style.display = 'none';
}
</script>
</body>
</html>
~~~
- 后端
- composer
- composer配置國內鏡像
- composer安裝及設置2
- PHP
- 貝塔SG11加密
- 申請KEY
- 開始加密
- php 中連接tcp服務的三種方式
- php websocket 教程
- editor內容轉換數組
- 使用正則判斷中文維吾爾文
- PHP常用函數總結
- 常用助手函數
- 通過Imagick把pdf轉換圖片
- 維吾爾語基本區轉換擴展區
- php GD庫生成一個由文字和圖片生成新的圖片
- aes加密
- php數組函數 -- array_column,array_multisort 實現二維數組排序
- PHP操作Excel
- php更新內容
- 輔助查詢（*）
- 【時間】操作
- 時間函數例子
- Date/Time 函數（不包含別名函數）
- php網絡相關
- HTTP請求的返回值含義說明
- 使用php語言開發一個類似數據庫操作的文件表類
- pinyin
- 維吾爾語基本區轉換擴展區(2)
- php獲取當前環境的信息
- laravel
- laravel 隊列的使用
- laravel 自定義助手函數
- laravel seeder的使用
- laravel項目從git下載命令
- laravel 多個數據庫配置
- laravel 填充假數據
- laravel 動態路由
- laravel 自定義 validate 響應
- laravel 創建追加字段的模擬訪問器
- laravel 線上環境的數據庫更改或添加字段
- laravel 模型查詢按照whereIn排序
- laravel 使用 workerman 通過TCP 文件傳輸功能
- laravel api Header添加Accept頭
- Laraval IDE 自動補全插件 laravel-ide-helper
- laravel 網站后臺
- laravel 設置路由
- laravel-第三方composer包
- laravel 開發技巧
- laravel 昨天，今天時間
- 使用寶塔計劃任務啟動laravel調度器
- laravel結合workerman第二節
- Laravel - 上傳多個文件
- 查詢聊天好友列表
- 事件系統 event, listener
- laravel 安裝 laravel-modules
- 自定義求看守器-toekn
- laravel限流
- 使用 Laravel api Resource 類時自定義分頁信息
- Laravel php artisan命令大全
- 驗證器
- workerman 創建wss服務
- 架構師必須知道的26項PHP安全實踐
- python
- Python讀取文件代碼塊已經備好，用的時候光拿（建議收藏）
- Python常用庫大全
- api 簽名驗證
- git
- git命令
- 十分鐘學會git基礎
- Git代碼同時上傳到GitHub和Gitee(碼云)
- Git - 多人協同開發利器，團隊協作流程規范與注意事項
- 刪除遠程倉庫的文件
- github查詢方法
- 錯誤
- 解除項目git版本控制
- linux
- sentos安裝supervisor
- PHP怎么守護進程運行php腳本
- 600條最強Linux命令總結
- centos開啟防火墻、開放指定端口
- 前端
- vue
- vue2發布之前的config簡單配置
- vue2安裝scss命令
- vue2父子組件之間雙向數據綁定
- 國際化雙語--安裝VueI18n
- vue3-setup 組件傳參（defineProps、defineEmits、defineExpose
- Vue3 新寫法速覽：十分鐘內輕松get
- 關于vue的外連接
- watch講解
- computed
- webpack 打包后生成很多小文件怎么優化？
- vue2 vue.config.js常見配置和打包部署測試
- 小程序
- 小程序長期訂閱消息
- 小程序自定義TabBar后如何實現keep-alive
- 收藏的html和css和js
- CSS 省略號（單行省略號、多行省略號）
- UyghurInput_a.js
- font.css
- 漂亮按鈕樣式
- clock.html
- css
- scroll css樣式
- CSS流動布局-頁面自適應
- css grid布局
- 禁止wap頁面調整字體大小
- CSS @media 和 min-width/max-width
- 網站變灰是怎么實現的
- 瀑布流實現方式
- javascript
- SortableJS拖動排序
- wondow scroll滾動到上邊
- 原生js插入HTML元素
- Konva.js —— 像操作DOM一樣操作canvas
- 通過canvas合并倆個圖片
- js scroll更多加載
- js 實現復制功能
- js判斷安卓和蘋果或者微信
- 瀏覽器打開控制臺禁止
- 原生js一些dom操作
- js http客戶端集合
- fetch
- axios
- canvas 點鐘
- layer dialog
- jquery 和 laravel ajax全局配置
- layui 獲取select的自定義參數
- konva.js中文開發文檔
- js 大文件分片上傳
- js監聽網絡狀態實現斷網重連后自動刷新頁面
- js生成video縮略圖
- JS獲取當前系統電量情況
- uniapp
- uni-app swiper數量過多時卡頓優化方案
- uniapp 帖子集合
- 微信wap
- wap分享朋友和朋友圈
- wap 手機頁面微信支付
- JsSdk微信公眾號支付
- 通用各種小知識
- 正則表達式
- JS正則匹配過濾字符串中的html標簽及html標簽內的內容
- 判斷維吾爾文輸入
- 正則表達式符號
- 正則表達式練習
- 百度網盤不限速下載助手
- 解決VSCode下載慢或下載失敗的問題
- 性能測試 使用Apache的ab測試工具
- nginx從入門到精通
- nginx
- Nginx 是怎么禁止訪問php的 ？
- 寶塔面板
- supervisor
- 卸載寶塔
- redis
- redis實用筆記
- redis入門到精通
- phpredis
- redis數據庫基礎
- PHP對Redis的基本操作
- ffmpeg
- 合并多個音視
- 獲取音視時長
- FFmpeg視頻處理入門教程(新手必看)
- 外連接
- 安裝
- PHP基于ffmpeg實現轉換視頻，截圖及生成縮略圖的方法
- Linux安裝ffmpeg
- docker
- 服務實現
- docker基本命令
- rewrite筆記
- 別人筆記鏈接
- 計算機常用知識
- 二進制1-10
- 斐波那契數列
- mysql
- 高性能高可用的MySQL,得從各種規范開始
- 讀寫分離配置
- 重要外連接，前端/ 后端/數據庫等等
- 關于程序必須收藏的文章鏈接集合
- markdown
- 一篇文章講清楚markdown