tanghonghn
/
tradeCardApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

添加支付和登录授权

master
tanghong 1 year ago
parent
0769c6e722
commit
2feb39869a
7 changed files with 219 additions and 103 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 13
      api/card.js
  2. 4
      api/login.js
  3. 16
      api/vxPay.js
  4. 2
      config.js
  5. 104
      pages/index.vue
  6. 151
      pages/mine.vue
  7. 30
      pages/wechat/wxpayUtils.js

13
api/card.js
View File

@ -49,10 +49,11 @@ export function getGroupPackage(thaliGroupId) {
// 套餐充值 // 套餐充值
export function recharge() { export function recharge(data) {
return request({ return request({
url: '/app/card/recharge', url: '/app/card/recharge',
method: 'get' method: 'post',
data:data,
}) })
} }
@ -63,3 +64,11 @@ export function getPackageSort() {
method: 'get' method: 'get'
}) })
} }
// 获取微信用户基本信息
export function getUserInfo() {
return request({
url: '/app/card/getUserInfo',
method: 'get'
})
}

4
api/login.js
View File

@ -15,8 +15,6 @@ export function login(username, password, code, uuid, tenantId, grantType, clien
url: '/app/login', url: '/app/login',
headers: { headers: {
isToken: false, isToken: false,
isEncrypt: true,
repeatSubmit: false
}, },
method: 'post', method: 'post',
data: data data: data
@ -29,8 +27,6 @@ export function register(data) {
url: '/app/register', url: '/app/register',
headers: { headers: {
isToken: false, isToken: false,
isEncrypt: true,
repeatSubmit: false
}, },
method: 'post', method: 'post',
data: data data: data

16
api/vxPay.js
View File

@ -0,0 +1,16 @@
import request from '@/utils/request'
export function vxPay(totalPrice,goodsName,openId,orderNumber) {
const data = {
totalPrice,
goodsName,
openId,
orderNumber
}
return request({
url: '/app/vxPay/vxv3pay',
method: 'post',
data:data
})
}

2
config.js
View File

@ -2,7 +2,7 @@
const config = { const config = {
// baseUrl: 'https://vue.ruoyi.vip/prod-api', // baseUrl: 'https://vue.ruoyi.vip/prod-api',
// baseUrl: 'http://localhost/prod-api', // baseUrl: 'http://localhost/prod-api',
// baseUrl: 'http://localhost:8080', // baseUrl: 'https://trade.youpin5g.com/dev-api',
//cloud后台网关地址 //cloud后台网关地址
baseUrl: 'http://114.55.234.214:8080', baseUrl: 'http://114.55.234.214:8080',
// 应用信息 // 应用信息

104
pages/index.vue
View File

@ -1,75 +1,39 @@
<!-- 微信公众号的登录回调页 -->
<template> <template>
<view class="content"> <!-- 空登陆页 -->
<image class="logo" src="@/static/logo.png"></image> <view />
<view class="text-area">
<text class="title">Hello RuoYi-Vue</text>
</view>
<view class="text-area">
<up-text type="primary" text="uview-plus"></up-text>
</view>
<view class="charts-box">
<qiun-data-charts type="column" :chartData="chartData" />
</view>
</view>
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from 'vue'; import { onLoad } from '@dcloudio/uni-app';
import { getUserInfo} from '@/api/card'
const chartData = ref({});
onLoad(async (options) => {
onMounted(() => { getServerData() }); // #ifdef H5
// 将 search 参数赋值到 options 中，方便下面解析
function getServerData() { new URLSearchParams(location.search).forEach((value, key) => {
// 模拟从服务器获取数据时的延时 options[key] = value;
setTimeout(() => { });
let res = { const event = options.event;
categories: ['2016', '2017', '2018', '2019', '2020', '2021'], const code = options.code;
series: [ const state = options.state;
{ if (code) {
name: '目标值', getUserInfo(code).then(res => {
data: [35, 36, 31, 33, 13, 34], console.log(res,9)
}, uni.setStorageSync('openid', res.data.openid);
{ })
name: '完成量', }
data: [18, 27, 21, 24, 6, 28],
}, // // 检测 H5 登录回调
], // let returnUrl = uni.getStorageSync('returnUrl');
}; // if (returnUrl) {
chartData.value = JSON.parse(JSON.stringify(res)); // uni.removeStorage({key:'returnUrl'});
}, 500); // location.replace(returnUrl);
} // } else {
// uni.switchTab({
// url: '/',
// });
// }
// #endif
});
</script> </script>
<style scoped>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
.charts-box {
width: 100%;
height: 300px;
}
</style>

151
pages/mine.vue
View File

@ -62,16 +62,16 @@
<view class="iconfont icon-friendfill text-pink icon"></view> <view class="iconfont icon-friendfill text-pink icon"></view>
<text class="text">绑定充值卡</text> <text class="text">绑定充值卡</text>
</view> </view>
<view class="action-item" @click="handleGetCardInfo"> <!-- <view class="action-item" @click="handleGetCardInfo">
<view class="iconfont icon-community text-blue icon"></view> <view class="iconfont icon-community text-blue icon"></view>
<text class="text">获取充值卡信息</text> <text class="text">获取充值卡信息</text>
</view> </view> -->
<view class="action-item" @click="handleGetRealNameUrl"> <view class="action-item" @click="handleGetRealNameUrl">
<view class="iconfont icon-service text-mauve icon"></view> <view class="iconfont icon-service text-mauve icon"></view>
<text class="text">点击实名</text> <text class="text">点击实名</text>
</view> </view>
<view class="action-item" @click="handleJump"> <view class="action-item" @click="handleJump">
<view class="iconfont icon-service text-mauve icon"></view> <view class="iconfont icon-community text-mauve icon"></view>
<text class="text">一键授权</text> <text class="text">一键授权</text>
</view> </view>
</view> </view>
@ -79,7 +79,7 @@
</view> </view>
</view> </view>
<view> <view>
<uni-popup ref="popup" type="dialog"> <uni-popup ref="rechargePopup" type="dialog">
<uni-popup-dialog <uni-popup-dialog
type="info" type="info"
cancelText="关闭" cancelText="关闭"
@ -97,6 +97,28 @@
/> />
</uni-popup-dialog> </uni-popup-dialog>
</uni-popup> </uni-popup>
<uni-popup ref="confirmPopup" type="center" background-color="#fff" class="confirmPopup-box">
<uni-popup-dialog
type="info"
cancelText="关闭"
confirmText="确认"
title=""
content=""
@confirm="confirmPurchase"
@close="cancelPurchase">
<text>确认购买 {{ selectedPackage.thaliGroupName }} 吗？</text>
</uni-popup-dialog>
</uni-popup>
<uni-popup ref="selectPopup" type="bottom" background-color="#fff" class="selectPopup-box">
<view class="popup-content">
<text>套餐名称: {{ selectedPackage.thaliGroupName }}</text>
<text>价格: {{ selectedPackage.thaliPayPrice }}</text>
<button @click="purchasePackage" class="buy-button">立即购买</button>
</view>
</uni-popup>
</view> </view>
</template> </template>
@ -105,15 +127,21 @@ import { ref, reactive,onMounted } from 'vue';
import modal from "@/plugins/modal"; import modal from "@/plugins/modal";
import { getToken, setToken, removeToken } from "@/utils/auth"; import { getToken, setToken, removeToken } from "@/utils/auth";
import { userBindRechargeNum,getRechargeNum ,getRealNameUrl, getGroupPackage, recharge, getPackageSort} from '@/api/card' import { userBindRechargeNum,getRechargeNum ,getRealNameUrl, getGroupPackage, recharge, getPackageSort} from '@/api/card'
import { vxPay } from '@/api/vxPay'
import config from '@/config.js' import config from '@/config.js'
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
import pay from "@/pages/wechat/wxpayUtils";
const userStore = useUserStore() const userStore = useUserStore()
const name = userStore.name; const name = userStore.name;
const version = config.appInfo.version; const version = config.appInfo.version;
const avatar = ref(userStore.avatar); const avatar = ref(userStore.avatar);
const windowHeight = ref(uni.getSystemInfoSync().windowHeight - 50); const windowHeight = ref(uni.getSystemInfoSync().windowHeight - 50);
const popup = ref(null); const rechargePopup = ref(null);
const selectPopup = ref(null);
const confirmPopup = ref(null);
const rechargeNum = ref('') const rechargeNum = ref('')
const token = ref(''); const token = ref('');
const iccid = ref('') const iccid = ref('')
@ -121,6 +149,8 @@ const endTime = ref('')
const packageName = ref('') const packageName = ref('')
const thaliGroupId = ref('') const thaliGroupId = ref('')
const packageList = ref([]) const packageList = ref([])
const selectedPackage = ref(null);
const orderNumber = ref('')
const leftTab = ref({ const leftTab = ref({
name: undefined, name: undefined,
@ -212,12 +242,11 @@ function handleAbout() {
// 绑定充值卡 // 绑定充值卡
function handleBind() { function handleBind() {
popup.value.open() rechargePopup.value.open()
// rechargeNum.value = '' // rechargeNum.value = ''
}; };
// 获取充值卡信息 // 获取充值卡信息
function handleGetCardInfo() { function handleGetCardInfo() {
// const data = rechargeNum.value // const data = rechargeNum.value
@ -245,8 +274,10 @@ function handleGetRealNameUrl() {
function handleJump() { function handleJump() {
const URL = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx6aeb90e7fd5d434e&redirect_uri=https%3A%2F%2Fwxgzh.youpin5g.net&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect' const appid = 'wx6aeb90e7fd5d434e'
location.href = URL const redirect_uri = encodeURIComponent("https://trade.youpin5g.com/#/")
location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
} }
@ -283,7 +314,8 @@ function handleLeftTab() {
packageList.value = res.data.map(item => { packageList.value = res.data.map(item => {
return { return {
thaliGroupName: item.thaliGroupName, thaliGroupName: item.thaliGroupName,
thaliPayPrice: item.thaliPayPrice thaliPayPrice: item.thaliPayPrice,
thaliId:item.id,
}; };
}); });
}).catch(error => { }).catch(error => {
@ -300,7 +332,8 @@ function handleRightTab() {
packageList.value = res.data.map(item => { packageList.value = res.data.map(item => {
return { return {
thaliGroupName: item.thaliGroupName, thaliGroupName: item.thaliGroupName,
thaliPayPrice: item.thaliPayPrice thaliPayPrice: item.thaliPayPrice,
thaliId:item.id,
}; };
}); });
}).catch(error => { }).catch(error => {
@ -311,30 +344,57 @@ function handleRightTab() {
function selectPackage(index) { function selectPackage(index) {
console.log("选中的套餐:", packageList.value[index]); console.log("选中的套餐:", packageList.value[index]);
selectedPackage.value = packageList.value[index];
selectPopup.value.open();
} }
// 创建订单,预支付
function purchasePackage() {
const formData = new FormData();
formData.append('rechargeNum', rechargeNum.value);
formData.append('thaliId', selectedPackage.value.thaliId);
// 获取套餐种类 const data = {
// function getPackageSortList() { rechargeNum: rechargeNum.value,
// // const data = rechargeNum.value thaliId: selectedPackage.value.thaliId,
// const data = '89861591292320027863' }
// getPackageSort(data).then(res => { console.log(formData,901)
// console.log(res,911) recharge(data).then(res =>{
orderNumber.value = res.data
// }) console.log('创建订单成功:', res);
// } confirmPopup.value.open();
})
}
function confirmPurchase() {
const openId = uni.getStorageSync('openid');
const paymentData = {
"totalPrice": selectedPackage.value.thaliPayPrice, // 假设价格是字符串类型
"goodsName": selectedPackage.value.thaliGroupName,
"openId": openId,
"orderNumber": orderNumber.value,
};
vxPay(paymentData).then(res => {
pay(response.data,()=>{
alert("支付成功！")
})
// 处理支付成功后的逻辑，如关闭弹窗、提示支付成功等
selectPopup.value.close();
confirmPopup.value.close();
})
}
onMounted(() => { onMounted(() => {
const userToken = getToken(); // const userToken = getToken();
if (userToken) { // if (userToken) {
token.value = userToken; // token.value = userToken;
} // }
console.log(token,1) // console.log(token,1)
handleGetCardInfo() handleGetCardInfo()
getPackageSortList() getPackageSortList()
@ -481,4 +541,45 @@ page {
} }
.popup-content {
padding: 20px;
height: 400rpx;
text-align: center;
.buy-button {
background-color: #e57335;
color: white;
padding: 10px;
margin-top: 20px;
}
}
.popup-box {
padding: 20px;
height: 400rpx;
text-align: center;
}
.confirm-button {
background-color: #4CAF50;
color: white;
margin-right: 10px;
}
.cancel-button {
background-color: #f44336;
color: white;
}
.selectPopup-box {
z-index: 1;
}
.confirmPopup-box {
z-index: 1000;
}
</style> </style>

30
pages/wechat/wxpayUtils.js
View File

@ -0,0 +1,30 @@
let pay;
export default pay=(data,back,error)=> {
//获取后台传入的数据
let appId = data.appId;
let timestamp = data.timestamp;
let nonceStr = data.nonce_str;
let paySign = data.sign;
let signType = data.signType;
let prepay_id = data.prepay_id;
// console.log("开始进行微信支付！")
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":appId, //公众号名称，由商户传入
"timeStamp":timestamp, //时间戳，自1970年以来的秒数
"nonceStr":nonceStr, //随机串
"package":prepay_id,
"signType":signType, //微信签名方式：
"paySign":paySign //微信签名
},
function(res){
if(res.err_msg == "get_brand_wcpay_request:ok" ){
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
back();
}else{
error();
}
});
}
Write Preview
Loading…
Cancel
Save