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

修改套餐显示

master
tanghong 1 year ago
parent
d8629f96fa
commit
0769c6e722
6 changed files with 355 additions and 178 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. 35
      api/card.js
  2. 2
      manifest.json
  3. 86
      package.json
  4. 392
      pages/mine.vue
  5. 7
      utils/request.ts
  6. 7
      utils/upload.ts

35
api/card.js
View File

@ -2,36 +2,48 @@ import request from '@/utils/request'
// 用户绑定充值卡 // 用户绑定充值卡
export function userBindRechargeNum() { export function userBindRechargeNum(rechargeNum) {
return request({ return request({
url: '/app/card/userBindRechargeNum', url: '/app/card/userBindRechargeNum',
method: 'get' method: 'get',
params:{
rechargeNum,
}
}) })
} }
// 获取充值卡信息 // 获取充值卡信息
export function getRechargeNum() { export function getRechargeNum(rechargeNum) {
return request({ return request({
url: '/app/card/getRechargeNum', url: '/app/card/getRechargeNum',
method: 'get' method: 'get',
params:{
rechargeNum,
}
}) })
} }
// 获取实名信息 // 获取实名信息
export function getRealNameUrl() { export function getRealNameUrl(rechargeNum) {
return request({ return request({
url: '/app/card/getRealNameUrl', url: '/app/card/getRealNameUrl',
method: 'get' method: 'get',
params:{
rechargeNum,
}
}) })
} }
// 获取分组套餐 // 获取分组套餐
export function getGroupPackage() { export function getGroupPackage(thaliGroupId) {
return request({ return request({
url: '/app/card/getGroupPackage', 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'
})
}

2
manifest.json
View File

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

86
package.json
View File

@ -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"
}
}

392
pages/mine.vue
View File

@ -9,85 +9,102 @@
</view> </view>
<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix"> <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
</image> </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"> <view class="u_title">
用户名：{{ name }} iccid号：{{ iccid }}
</view> </view>
<view class="u_title">
到期时间：{{ endTime }}
</view>
<view class="u_title">
当前套餐：{{ packageName }}
</view>
</view> </view>
</view> </view>
<view @click="handleToInfo" class="flex align-center">
<text>个人信息</text>
<view class="iconfont icon-right"></view>
</view>
</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="content-section">
<view class="mine-actions grid col-4 text-center"> <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> <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>
<view class="action-item" @click="handleBuilding"> <view class="action-item" @click="handleGetCardInfo">
<view class="iconfont icon-community text-mauve 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="handleBuilding"> <view class="action-item" @click="handleGetRealNameUrl">
<view class="iconfont icon-dianzan text-green icon"></view> <view class="iconfont icon-service text-mauve icon"></view>
<text class="text">点赞我们</text> <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="menu-item-box">
<view class="iconfont icon-help menu-icon"></view>
<view>常见问题</view>
</view>
</view>
<view class="list-cell list-cell-arrow" @click="handleAbout">
<view class="menu-item-box">
<view class="iconfont icon-aixin menu-icon"></view>
<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>
<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> </view>
<!-- <view> <view>
<uni-popup ref="popup" type="dialog"> <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-dialog>
</uni-popup> </uni-popup>
</view> --> </view>
</template> </template>
<script setup> <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 config from '@/config.js'
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
const userStore = useUserStore() const userStore = useUserStore()
@ -97,7 +114,25 @@ 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 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', () => { uni.$on('refresh', () => {
avatar.value = userStore.avatar; avatar.value = userStore.avatar;
}) })
@ -130,19 +165,37 @@ function handleToAvatar() {
}); });
}; };
function handleLogout() { function handleLogout() {
popup.value.open();
}; };
function dialogConfirm() { 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() { function dialogClose() {
//console.log('点击关闭')
}; };
function handleHelp() { function handleHelp() {
uni.navigateTo({ uni.navigateTo({
@ -156,25 +209,141 @@ function handleAbout() {
console.log(res,9) console.log(res,9)
}) })
}; };
function handleJiaoLiuQun() {
const data = {rechargeNum : '1442212701559'}
const formData = new FormData();
// 添加键值对到 formData // 绑定充值卡
formData.append('rechargeNum', data.rechargeNum); function handleBind() {
userBindRechargeNum(data).then(res => { popup.value.open()
console.log(res,9) // rechargeNum.value = ''
};
// 获取充值卡信息
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 handleBuilding() {
const data = {rechargeNum : '1442212701559'}
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.value
getRechargeNum(data).then(res => { getRechargeNum(data).then(res => {
console.log(res,91) 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> </script>
<style lang="scss"> <style lang="scss">
@ -209,15 +378,86 @@ page {
margin-left: 15px; margin-left: 15px;
.u_title { .u_title {
font-size: 18px; font-size: 14px;
line-height: 30px; 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 { .content-section {
position: relative; position: relative;
top: -50px; // top: -50px;
.mine-actions { .mine-actions {
margin: 15px 15px; margin: 15px 15px;
@ -239,4 +479,6 @@ page {
} }
} }
} }
</style> </style>

7
utils/request.ts
View File

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

7
utils/upload.ts
View File

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

Write Preview
Loading…
Cancel
Save