修改套餐显示

api/card.js

@@ -2,36 +2,48 @@ import request from '@/utils/request'
 
 
 // 用户绑定充值卡
-export function userBindRechargeNum() {
+export function userBindRechargeNum(rechargeNum) {
   return request({
     url: '/app/card/userBindRechargeNum',
-    method: 'get'
+    method: 'get',
+	params:{
+	  rechargeNum,
+	}
   })
 }
 
 
 // 获取充值卡信息
-export function getRechargeNum() {
+export function getRechargeNum(rechargeNum) {
   return request({
     url: '/app/card/getRechargeNum',
-    method: 'get'
+    method: 'get',
+	params:{
+	  rechargeNum,
+	}
   })
 }
 
 
 // 获取实名信息
-export function getRealNameUrl() {
+export function getRealNameUrl(rechargeNum) {
   return request({
     url: '/app/card/getRealNameUrl',
-    method: 'get'
+    method: 'get',
+	params:{
+	  rechargeNum,
+	}
   })
 }
 
 // 获取分组套餐
-export function getGroupPackage() {
+export function getGroupPackage(thaliGroupId) {
   return request({
     url: '/app/card/getGroupPackage',
-    method: 'get'
+    method: 'get',
+	params:{
+	  thaliGroupId,
+	}
   })
 }
 
@@ -44,3 +56,10 @@ export function recharge() {
   })
 }
 
+// 获取套餐种类
+export function getPackageSort() {
+  return request({
+    url: '/app/card/thaliGrouplist',
+    method: 'get'
+  })
+}

manifest.json

@@ -1,6 +1,6 @@
 {
     "name" : "ruoyi-vue3",
-    "appid" : "__UNI__3DD118D",
+    "appid" : "__UNI__9B780B1",
     "description" : "",
     "versionName" : "1.0.0",
     "versionCode" : "100",

package.json

@@ -1,86 +0,0 @@
-{
-  "name": "uni-preset-vue",
-  "version": "0.0.0",
-  "scripts": {
-    "dev:app": "uni -p app",
-    "dev:app-android": "uni -p app-android",
-    "dev:app-ios": "uni -p app-ios",
-    "dev:custom": "uni -p",
-    "dev:h5": "uni",
-    "dev:h5:ssr": "uni --ssr",
-    "dev:mp-alipay": "uni -p mp-alipay",
-    "dev:mp-baidu": "uni -p mp-baidu",
-    "dev:mp-jd": "uni -p mp-jd",
-    "dev:mp-kuaishou": "uni -p mp-kuaishou",
-    "dev:mp-lark": "uni -p mp-lark",
-    "dev:mp-qq": "uni -p mp-qq",
-    "dev:mp-toutiao": "uni -p mp-toutiao",
-    "dev:mp-weixin": "uni -p mp-weixin",
-    "dev:quickapp-webview": "uni -p quickapp-webview",
-    "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
-    "dev:quickapp-webview-union": "uni -p quickapp-webview-union",
-    "build:app": "uni build -p app",
-    "build:app-android": "uni build -p app-android",
-    "build:app-ios": "uni build -p app-ios",
-    "build:custom": "uni build -p",
-    "build:h5": "uni build",
-    "build:h5:ssr": "uni build --ssr",
-    "build:mp-alipay": "uni build -p mp-alipay",
-    "build:mp-baidu": "uni build -p mp-baidu",
-    "build:mp-jd": "uni build -p mp-jd",
-    "build:mp-kuaishou": "uni build -p mp-kuaishou",
-    "build:mp-lark": "uni build -p mp-lark",
-    "build:mp-qq": "uni build -p mp-qq",
-    "build:mp-toutiao": "uni build -p mp-toutiao",
-    "build:mp-weixin": "uni build -p mp-weixin",
-    "build:quickapp-webview": "uni build -p quickapp-webview",
-    "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
-    "build:quickapp-webview-union": "uni build -p quickapp-webview-union",
-    "type-check": "vue-tsc --noEmit",
-    "clean:linux": "rm -rf dist || rm -rf node_modules",
-    "clean:windows": "rd /s /q dist || rd /s /q node_modules"
-  },
-  "dependencies": {
-    "@dcloudio/uni-app": "3.0.0-4020420240722002",
-    "@dcloudio/uni-app-harmony": "3.0.0-4020420240722002",
-    "@dcloudio/uni-app-plus": "3.0.0-4020420240722002",
-    "@dcloudio/uni-components": "3.0.0-4020420240722002",
-    "@dcloudio/uni-h5": "3.0.0-4020420240722002",
-    "@dcloudio/uni-mp-alipay": "3.0.0-4020420240722002",
-    "@dcloudio/uni-mp-baidu": "3.0.0-4020420240722002",
-    "@dcloudio/uni-mp-jd": "3.0.0-4020420240722002",
-    "@dcloudio/uni-mp-kuaishou": "3.0.0-4020420240722002",
-    "@dcloudio/uni-mp-lark": "3.0.0-4020420240722002",
-    "@dcloudio/uni-mp-qq": "3.0.0-4020420240722002",
-    "@dcloudio/uni-mp-toutiao": "3.0.0-4020420240722002",
-    "@dcloudio/uni-mp-weixin": "3.0.0-4020420240722002",
-    "@dcloudio/uni-mp-xhs": "3.0.0-4020420240722002",
-    "@dcloudio/uni-quickapp-webview": "3.0.0-4020420240722002",
-    "@jridgewell/sourcemap-codec": "^1.5.0",
-    "@qiun/wx-ucharts": "2.5.0-20230101",
-    "@uview-plus/types": "^3.2.5",
-    "clipboard": "^2.0.11",
-    "dayjs": "^1.11.13",
-    "mqtt": "4.1.0",
-    "pinia": "2.2.2",
-    "tslib": "^2.7.0",
-    "uview-plus": "^3.3.32",
-    "vue": "3.4.21",
-    "vue-i18n": "^10.0.1"
-  },
-  "devDependencies": {
-    "@dcloudio/types": "^3.4.14",
-    "@dcloudio/uni-automator": "3.0.0-4020420240722002",
-    "@dcloudio/uni-cli-shared": "3.0.0-4020420240722002",
-    "@dcloudio/uni-stacktracey": "3.0.0-4020420240722002",
-    "@dcloudio/vite-plugin-uni": "3.0.0-4020420240722002",
-    "@vue/runtime-core": "^3.5.5",
-    "@vue/tsconfig": "^0.5.1",
-    "less": "^4.2.0",
-    "sass": "^1.78.0",
-    "sass-loader": "^16.0.1",
-    "typescript": "^5.6.2",
-    "vite": "5.4.5",
-    "vue-tsc": "2.1.6"
-  }
-}

pages/mine.vue

@@ -9,85 +9,102 @@
           </view>
           <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
           </image>
-          <view v-if="!name" @click="handleToLogin" class="login-tip">
+<!--          <view v-if="token" @click="handleToLogin" class="login-tip">
             点击登录
-          </view>
+          </view> -->
-          <view v-if="name" @click="handleToInfo" class="user-info">
+          <view  class="user-info">
             <view class="u_title">
-              用户名：{{ name }}
+              iccid号：{{ iccid }}
             </view>
+			<view class="u_title">
+			  到期时间：{{ endTime }}
+			</view>
+			<view class="u_title">
+			  当前套餐：{{ packageName }}
+			</view>
           </view>
         </view>
-        <view @click="handleToInfo" class="flex align-center">
-          <text>个人信息</text>
-          <view class="iconfont icon-right"></view>
-        </view>
       </view>
     </view>
+	
+	  <view class="package-box">
+		  <view class="package-top">
+		  	<view 
+			  @click="handleLeftTab" 
+		      :class="{ 'left-tab': true, active: leftTab.isActive }"
+			>
+		  		   {{leftTab.name}}
+		  	</view>
+		  	<view 
+			  @click="handleRightTab" 
+			  :class="{ 'right-tab': true, active: rightTab.isActive }"
+			>
+		  		   {{rightTab.name}}
+		  	</view>
+		  </view>
+		   <view class="package-bottom">
+                 <view v-for="(item, index) in packageList" :key="index" 
+                       class="package-item" @click="selectPackage(index)">
+					   <view class="package-title">
+					   	  <text>{{ item.thaliGroupName }}</text>
+					   </view>
+					   <view class="package-price">
+					   	  <text>{{ item.thaliPayPrice }}元</text>
+					   </view>
+                 </view>
+		   </view>
+	  </view>
+
 
     <view class="content-section">
       <view class="mine-actions grid col-4 text-center">
-        <view class="action-item" @click="handleJiaoLiuQun">
+        <view class="action-item" @click="handleBind">
           <view class="iconfont icon-friendfill text-pink icon"></view>
-          <text class="text">交流群</text>
+          <text class="text">绑定充值卡</text>
-        </view>
-        <view class="action-item" @click="handleBuilding">
-          <view class="iconfont icon-service text-blue icon"></view>
-          <text class="text">在线客服</text>
-        </view>
-        <view class="action-item" @click="handleBuilding">
-          <view class="iconfont icon-community text-mauve icon"></view>
-          <text class="text">反馈社区</text>
-        </view>
-        <view class="action-item" @click="handleBuilding">
-          <view class="iconfont icon-dianzan text-green icon"></view>
-          <text class="text">点赞我们</text>
-        </view>
-      </view>
-
-      <view class="menu-list">
-        <view class="list-cell list-cell-arrow" @click="handleToEditInfo">
-          <view class="menu-item-box">
-            <view class="iconfont icon-user menu-icon"></view>
-            <view>编辑资料</view>
-          </view>
         </view>
-        <view class="list-cell list-cell-arrow" @click="handleHelp">
+        <view class="action-item" @click="handleGetCardInfo">
-          <view class="menu-item-box">
+          <view class="iconfont icon-community text-blue icon"></view>
-            <view class="iconfont icon-help menu-icon"></view>
+          <text class="text">获取充值卡信息</text>
-            <view>常见问题</view>
-          </view>
         </view>
-        <view class="list-cell list-cell-arrow" @click="handleAbout">
+        <view class="action-item" @click="handleGetRealNameUrl">
-          <view class="menu-item-box">
+          <view class="iconfont icon-service text-mauve icon"></view>
-            <view class="iconfont icon-aixin menu-icon"></view>
+          <text class="text">点击实名</text>
-            <view>关于我们</view>
-          </view>
-        </view>
-        <view class="list-cell list-cell-arrow" @click="handleToSetting">
-          <view class="menu-item-box">
-            <view class="iconfont icon-setting menu-icon"></view>
-            <view>应用设置</view>
-          </view>
         </view>
+		<view class="action-item" @click="handleJump">
+		  <view class="iconfont icon-service text-mauve icon"></view>
+		  <text class="text">一键授权</text>
+		</view>
       </view>
 
     </view>
   </view>
-  <!-- <view>
+  <view>
 	  <uni-popup ref="popup" type="dialog">
-	    <uni-popup-dialog type="info" cancelText="关闭" confirmText="退出"
+	    <uni-popup-dialog 
-	                      title="通知" content="确定注销并退出系统吗" 
+		  type="info" 
-	    				  @confirm="dialogConfirm"
+		  cancelText="关闭" 
-	                      @close="dialogClose">
+		  confirmText="绑定"
+	      title="" 
+		  content="" 
+	      @confirm="dialogConfirm"
+	      @close="dialogClose">
+			<input 
+			  v-model="rechargeNum" 
+			  class="input" 
+			  type="text" 
+			  placeholder="请输入充值号" 
+			  maxlength="30" 
+			/>
 	    </uni-popup-dialog>
 	  </uni-popup>
-  </view> -->
+  </view>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, reactive,onMounted } from 'vue';
-import { userBindRechargeNum,getRechargeNum ,getRealNameUrl, getGroupPackage, recharge} from '@/api/card'
+import modal from "@/plugins/modal";
+import { getToken, setToken, removeToken } from "@/utils/auth";
+import { userBindRechargeNum,getRechargeNum ,getRealNameUrl, getGroupPackage, recharge, getPackageSort} from '@/api/card'
 import config from '@/config.js'
 import useUserStore from '@/store/modules/user'
 const userStore = useUserStore()
@@ -97,7 +114,25 @@ const version = config.appInfo.version;
 const avatar = ref(userStore.avatar);
 const windowHeight = ref(uni.getSystemInfoSync().windowHeight - 50);
 const popup = ref(null);
+const rechargeNum = ref('')
+const token = ref('');
+const iccid = ref('')
+const endTime = ref('')
+const packageName = ref('')
+const thaliGroupId = ref('')
+const packageList = ref([])
+
+const leftTab = ref({
+	name: undefined,
+	thaliGroupId: undefined,
+    isActive: true,
+})
 
+const rightTab = ref({
+	name: undefined,
+	thaliGroupId: undefined,
+	isActive: false,
+})
 uni.$on('refresh', () => {
   avatar.value = userStore.avatar;
 })
@@ -130,19 +165,37 @@ function handleToAvatar() {
   });
 };
 function handleLogout() {
-  popup.value.open();
 };
 function dialogConfirm() {
-  //console.log('----------------点击确认------------')
+  const data = rechargeNum.value
-
+  if (rechargeNum.value) {
-  userStore.logOut().then(() => {
+  	userBindRechargeNum(data).then(res => {
-    uni.reLaunch({
+  		if(res.code === 200) {
-      url: '/pages/login'
+			modal.showToast({
-    });
+			  title: '绑定成功',
-  })
+			  icon:'sucess',
+			  duration: 1000
+			});
+		} else {
+		   // 如果绑定失败，显示错误提示
+			modal.showToast({
+			  title: '绑定失败：' + res.msg, // 假设 res.msg 包含错误信息
+			  icon: 'error',
+			  duration: 1000
+			});
+		}
+  	})
+  } else {
+  	    // 如果没有值，提示用户输入充值号
+  	    modal.showToast({
+  	      title: '请输入充值号',
+  	      icon: 'none', // 或者使用其他适当的图标
+  	      duration: 1000
+  	    });
+  }
 };
 function dialogClose() {
-  //console.log('点击关闭')
+    
 };
 function handleHelp() {
   uni.navigateTo({
@@ -156,25 +209,141 @@ function handleAbout() {
 		console.log(res,9)
 	})
 };
-function handleJiaoLiuQun() {
+
-	const data = {rechargeNum : '1442212701559'}
+// 绑定充值卡
-	const formData = new FormData();
+function handleBind() {
-	  
+	popup.value.open()
-	  // 添加键值对到 formData
+	// rechargeNum.value = ''
-	formData.append('rechargeNum', data.rechargeNum);
+};
-	userBindRechargeNum(data).then(res => {
+
-		console.log(res,9)
+
+
+// 获取充值卡信息
+function handleGetCardInfo() {
+	// const data = rechargeNum.value
+	const data = '89861591292320027863'
+	getRechargeNum(data).then(res => {
+		console.log(res,19)
+		iccid.value = res.data.card.iccId
+		endTime.value = res.data.card.createTime
+		packageName.value = res.data.card.thaliName
+		
+	})
+};
+
+// 获取实名链接
+function handleGetRealNameUrl() {
+	const data = rechargeNum.value
+		// const data = '89861591292320027863'
+	getRealNameUrl(data).then(res => {
+		if(res.code === 200) {
+			const URL = res.data
+			location.href = URL
+		}
 	})
-  
 };
+
+
+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
+}
+
+
 function handleBuilding() {
-	const data = {rechargeNum : '1442212701559'}
+  const data = rechargeNum.value	
-	
 	getRechargeNum(data).then(res => {
 		console.log(res,91)
 	})
 }
 
+
+
+// 获取套餐种类
+function getPackageSortList() {
+  // const data = rechargeNum.value	
+  const data = '89861591292320027863'
+	getPackageSort(data).then(res => {
+		console.log(res,911)
+		leftTab.value.name = res.rows[0].groupName;
+		leftTab.value.thaliGroupId = res.rows[0].id;
+
+		rightTab.value.name = res.rows[1].groupName;
+		rightTab.value.thaliGroupId = res.rows[1].id;
+		
+	})
+}
+
+function handleLeftTab() {
+	leftTab.value.isActive = true;
+	rightTab.value.isActive = false;
+	
+    const data = leftTab.value.thaliGroupId;
+    getGroupPackage(data).then(res => {
+        packageList.value = res.data.map(item => {
+            return {
+                thaliGroupName: item.thaliGroupName,
+                thaliPayPrice: item.thaliPayPrice
+            };
+        });
+    }).catch(error => {
+        console.error("API请求失败:", error);
+    });
+}
+
+function handleRightTab() {
+	leftTab.value.isActive = false;
+    rightTab.value.isActive = true;
+	
+	const data = rightTab.value.thaliGroupId
+	getGroupPackage(data).then(res => {
+	    packageList.value = res.data.map(item => {
+	        return {
+	            thaliGroupName: item.thaliGroupName,
+	            thaliPayPrice: item.thaliPayPrice
+	        };
+	    });
+	}).catch(error => {
+	    console.error("API请求失败:", error);
+	});
+}
+
+
+function selectPackage(index) {
+  console.log("选中的套餐:", packageList.value[index]);
+}
+
+
+
+// 获取套餐种类
+// function getPackageSortList() {
+//   // const data = rechargeNum.value	
+//   const data = '89861591292320027863'
+// 	getPackageSort(data).then(res => {
+// 		console.log(res,911)
+
+// 	})
+// }
+
+
+
+
+onMounted(() => {
+  const userToken = getToken();
+  if (userToken) {
+	token.value = userToken;
+  } 
+  
+  console.log(token,1)
+  
+  handleGetCardInfo()
+  getPackageSortList()
+  
+  setTimeout(() => {
+    handleLeftTab();
+  }, 1000);
+
+});
 </script>
 
 <style lang="scss">
@@ -209,15 +378,86 @@ page {
       margin-left: 15px;
 
       .u_title {
-        font-size: 18px;
+        font-size: 14px;
         line-height: 30px;
       }
     }
   }
+  
+  .package-box {
+	  margin: 15px 15px;
+	  padding: 20px 20px;
+	  border-radius: 8px;
+	  background-color: white;
+	  display: flex;
+	  flex-direction: column;
+	  
+	  
+	  .package-top {
+		  display: flex;
+		  flex-direction: row;
+		  justify-content: space-around;
+		  
+		  .left-tab,
+		  .right-tab {
+		    display: flex;
+		    align-items: center;
+		    justify-content: center;
+		    height: 30px;
+		    width: 140px;
+		    border-radius: 3px;
+		    color: #fff;
+		    cursor: pointer;
+		    transition: background-color 0.3s;
+		  }
+		  
+		  .left-tab.active,
+		  .right-tab.active {
+		    background-color: #e57335; /* 激活时的颜色 */
+		  }
+		  
+		  .left-tab:not(.active),
+		  .right-tab:not(.active) {
+		    background-color: #d0d0d0; /* 非激活时的颜色 */
+		  }
+	  }
+
+	  
+	  .package-bottom {
+	      display: flex;
+		  flex-direction: row;
+		  justify-content: space-around;
+	      flex-wrap: wrap;
+	      gap: 10px;
+		  padding-top: 30rpx;
+		  
+		  .package-title {
+			  display: flex;
+			  justify-content: center;
+		  }
+		  .package-price {
+			  display: flex;
+			  justify-content: center;
+			  color: gray;
+		  }
+	  }
+	  
+	  .package-item {
+	      border: 1px solid orange;
+		  width: 130px;
+	      padding: 15px;
+	      cursor: pointer;
+		  border-radius: 8px;
+	  }
+	  
+	  .package-item:hover {
+	      border-color: darkorange;
+	  }
+  }
 
   .content-section {
     position: relative;
-    top: -50px;
+    // top: -50px;
 
     .mine-actions {
       margin: 15px 15px;
@@ -239,4 +479,6 @@ page {
     }
   }
 }
+
+
 </style>

utils/request.ts

@@ -15,6 +15,9 @@ const request = <T>(config: RequestConfig): Promise<ResponseData<T>> => {
   if (getToken() && !isToken) {
     config.header['Authorization'] = 'Bearer ' + getToken()
   }
+  // 设置 clientid
+  config.header['clientid'] = "428a8310cd442757ae699df5d894f051";
+  
   // get请求映射params参数
   if (config.params) {
     let url = config.url + '?' + tansParams(config.params)
@@ -44,9 +47,7 @@ const request = <T>(config: RequestConfig): Promise<ResponseData<T>> => {
       if (code === 401) {
         showConfirm('登录状态已过期，您可以继续留在该页面，或者重新登录?').then(res => {
           if (res.confirm) {
-            useUserStore().logOut().then(res => {
+            uni.reLaunch({ url: '/pages/login' })
-              uni.reLaunch({ url: '/pages/login' })
-            })
           }
         })
         reject('无效的会话，或者会话已过期，请重新登录。')

utils/upload.ts

@@ -40,9 +40,10 @@ const upload = <T>(config: RequestUploadConfig): Promise<ResponseData<T>> => {
         } else if (code == 401) {
           showConfirm("登录状态已过期，您可以继续留在该页面，或者重新登录?").then(res => {
             if (res.confirm) {
-              userStore.logOut().then(res => {
+				uni.reLaunch({ url: '/pages/login' })
-                uni.reLaunch({ url: '/pages/login' })
+              // userStore.logOut().then(res => {
-              })
+              //   uni.reLaunch({ url: '/pages/login' })
+              // })
             }
           })
           reject('无效的会话，或者会话已过期，请重新登录。')