添加支付和登录授权

api/card.js

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

api/login.js

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

api/vxPay.js

@@ -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
+  })
+}

config.js

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

pages/index.vue

@@ -1,75 +1,39 @@
+<!-- 微信公众号的登录回调页 -->
 <template>
-  <view class="content">
-    <image class="logo" src="@/static/logo.png"></image>
-    <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>
+  <!-- 空登陆页 -->
+  <view />
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
-
-const chartData = ref({});
-
-onMounted(() => { getServerData() });
-
-function getServerData() {
-  // 模拟从服务器获取数据时的延时
-  setTimeout(() => {
-    let res = {
-      categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
-      series: [
-        {
-          name: '目标值',
-          data: [35, 36, 31, 33, 13, 34],
-        },
-        {
-          name: '完成量',
-          data: [18, 27, 21, 24, 6, 28],
-        },
-      ],
-    };
-    chartData.value = JSON.parse(JSON.stringify(res));
-  }, 500);
-}
+  import { onLoad } from '@dcloudio/uni-app';
+  import { getUserInfo} from '@/api/card'
+
+  onLoad(async (options) => {
+    // #ifdef H5
+    // 将 search 参数赋值到 options 中，方便下面解析
+    new URLSearchParams(location.search).forEach((value, key) => {
+      options[key] = value;
+    });
+    const event = options.event;
+    const code = options.code;
+    const state = options.state;
+    if (code) { 
+      getUserInfo(code).then(res => {
+        console.log(res,9)
+        uni.setStorageSync('openid', res.data.openid);
+      })
+    } 
+
+    // // 检测 H5 登录回调
+    // let returnUrl = uni.getStorageSync('returnUrl');
+    // if (returnUrl) {
+    //   uni.removeStorage({key:'returnUrl'});
+    //   location.replace(returnUrl);
+    // } else {
+    //   uni.switchTab({
+    //     url: '/',
+    //   });
+    // }
+    // #endif
+  });
 </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>

pages/mine.vue

@@ -62,16 +62,16 @@
           <view class="iconfont icon-friendfill text-pink icon"></view>
           <text class="text">绑定充值卡</text>
         </view>
-        <view class="action-item" @click="handleGetCardInfo">
+<!--        <view class="action-item" @click="handleGetCardInfo">
           <view class="iconfont icon-community text-blue icon"></view>
           <text class="text">获取充值卡信息</text>
-        </view>
+        </view> -->
         <view class="action-item" @click="handleGetRealNameUrl">
           <view class="iconfont icon-service text-mauve icon"></view>
           <text class="text">点击实名</text>
         </view>
 		<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>
 		</view>
       </view>
@@ -79,7 +79,7 @@
     </view>
   </view>
   <view>
-	  <uni-popup ref="popup" type="dialog">
+	  <uni-popup ref="rechargePopup" type="dialog">
 	    <uni-popup-dialog 
 		  type="info" 
 		  cancelText="关闭" 
@@ -97,6 +97,28 @@
 			/>
 	    </uni-popup-dialog>
 	  </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>
 </template>
 
@@ -105,15 +127,21 @@ import { ref, reactive,onMounted } from 'vue';
 import modal from "@/plugins/modal";
 import { getToken, setToken, removeToken } from "@/utils/auth";
 import { userBindRechargeNum,getRechargeNum ,getRealNameUrl, getGroupPackage, recharge, getPackageSort} from '@/api/card'
+import { vxPay } from '@/api/vxPay'
+
 import config from '@/config.js'
 import useUserStore from '@/store/modules/user'
+import pay from "@/pages/wechat/wxpayUtils";
+
 const userStore = useUserStore()
 const name = userStore.name;
 const version = config.appInfo.version;
 
 const avatar = ref(userStore.avatar);
 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 token = ref('');
 const iccid = ref('')
@@ -121,6 +149,8 @@ const endTime = ref('')
 const packageName = ref('')
 const thaliGroupId = ref('')
 const packageList = ref([])
+const selectedPackage = ref(null);
+const orderNumber = ref('')
 
 const leftTab = ref({
 	name: undefined,
@@ -212,12 +242,11 @@ function handleAbout() {
 
 // 绑定充值卡
 function handleBind() {
-	popup.value.open()
+	rechargePopup.value.open()
 	// rechargeNum.value = ''
 };
 
 
-
 // 获取充值卡信息
 function handleGetCardInfo() {
 	// const data = rechargeNum.value
@@ -245,8 +274,10 @@ function handleGetRealNameUrl() {
 
 
 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'
-	location.href = URL
+	const appid = 'wx6aeb90e7fd5d434e'
+	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 => {
             return {
                 thaliGroupName: item.thaliGroupName,
-                thaliPayPrice: item.thaliPayPrice
+                thaliPayPrice: item.thaliPayPrice,
+				thaliId:item.id,
             };
         });
     }).catch(error => {
@@ -300,7 +332,8 @@ function handleRightTab() {
 	    packageList.value = res.data.map(item => {
 	        return {
 	            thaliGroupName: item.thaliGroupName,
-	            thaliPayPrice: item.thaliPayPrice
+	            thaliPayPrice: item.thaliPayPrice,
+				thaliId:item.id,
 	        };
 	    });
 	}).catch(error => {
@@ -311,30 +344,57 @@ function handleRightTab() {
 
 function selectPackage(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);
 	  
-// 获取套餐种类
-// function getPackageSortList() {
-//   // const data = rechargeNum.value	
-//   const data = '89861591292320027863'
-// 	getPackageSort(data).then(res => {
-// 		console.log(res,911)
-
-// 	})
-// }
+	  const data = {
+		  rechargeNum: rechargeNum.value,
+		  thaliId: selectedPackage.value.thaliId,
+	  }
+	console.log(formData,901)
+    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(() => {
-  const userToken = getToken();
-  if (userToken) {
-	token.value = userToken;
-  } 
+ //  const userToken = getToken();
+ //  if (userToken) {
+	// token.value = userToken;
+ //  } 
   
-  console.log(token,1)
+ //  console.log(token,1)
   
   handleGetCardInfo()
   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>

pages/wechat/wxpayUtils.js

@@ -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();
+            }
+        });
+}