first
This commit is contained in:
sexygoat
221
pages/auth/auth.vue
Normal file
221
pages/auth/auth.vue
Normal file
@@ -0,0 +1,221 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="card" v-for="item in list">
|
||||
<view class="flex-row-g20">
|
||||
<view class="logo">
|
||||
<image :src="getLogo(item.category).logo" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="flex-col-g20">
|
||||
<view class="iccid">
|
||||
ICCID: {{item.iccidMark}}
|
||||
</view>
|
||||
<view class="operator">
|
||||
运营商: {{getLogo(item.category).name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="btn mt-30 flex-col-g20">
|
||||
<up-button class="btn-apple btn-primary" v-if="item.isRealName" type="primary">
|
||||
已实名
|
||||
</up-button>
|
||||
<up-button class="btn-apple btn-success" v-else type="success" @tap="toReal(item.iccidMark)">
|
||||
去实名
|
||||
</up-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
ref,
|
||||
computed
|
||||
} from 'vue';
|
||||
|
||||
import {
|
||||
userStore
|
||||
} from '@/store/index.js';
|
||||
|
||||
let mchList = reactive([])
|
||||
|
||||
let list = reactive([])
|
||||
|
||||
let currentIccid = ref("")
|
||||
let phone = ref("")
|
||||
|
||||
const device_id = uni.getStorageSync("device_id")
|
||||
|
||||
let opratorList = reactive([{
|
||||
category: "124", // 中国电信
|
||||
logo: "https://img2.baidu.com/it/u=139558247,3893370039&fm=253&fmt=auto?w=529&h=500",
|
||||
esim: 1,
|
||||
name: "中国电信"
|
||||
},
|
||||
{
|
||||
category: "125", // 中国联通
|
||||
logo: "https://img1.baidu.com/it/u=2816777816,1756344384&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
|
||||
esim: 2,
|
||||
name: "中国联通"
|
||||
},
|
||||
{
|
||||
category: "126", // 中国移动
|
||||
logo: "https://img2.baidu.com/it/u=915783975,1594870591&fm=253&fmt=auto&app=120&f=PNG?w=182&h=182",
|
||||
esim: 3,
|
||||
name: "中国移动"
|
||||
}
|
||||
])
|
||||
|
||||
const getLogo = computed(() => {
|
||||
return (category) => {
|
||||
const operator = opratorList.find(item => item.category == category);
|
||||
return operator ? operator : ''; // 返回logo路径
|
||||
};
|
||||
});
|
||||
|
||||
// 是否显示主号 (导入的设备号)
|
||||
const showMainNumber = async () => {
|
||||
if (!device_id) {
|
||||
uni.showToast({
|
||||
title: 'ICCID不能为空',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
const result = await userStore.actions.getIsOnlyMainCard(device_id)
|
||||
if (result.data.exists && mchList.length > 0) {
|
||||
// 使用 filter() 筛选符合条件的项
|
||||
let matchedItems = mchList.filter(item => item.iccidMark === currentIccid.value);
|
||||
// 将筛选后的数组重新赋值给 mchList
|
||||
Object.assign(list, matchedItems)
|
||||
} else {
|
||||
Object.assign(list, mchList)
|
||||
}
|
||||
};
|
||||
|
||||
const toReal = async (iccid) => {
|
||||
const result = await userStore.actions.getRealNameAddress(iccid)
|
||||
let url = result.accountEntity.realNameUrl
|
||||
if (url) {
|
||||
// 替换url里面的 ${iccid} 替换为iccid， ${phone}替换为 phone.value
|
||||
url = url.replace("${iccid}", iccid).replace("${phone}", phone.value)
|
||||
uni.showToast({
|
||||
title: "正在跳转实名",
|
||||
icon: "none"
|
||||
})
|
||||
window.location.href = url
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '未获取到实名地址',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = async () => {
|
||||
const mainInfo = await userStore.actions.getSwitchCardList()
|
||||
if (mainInfo?.cardEntity) {
|
||||
currentIccid.value = mainInfo.cardEntity.iccidMark
|
||||
phone.value = mainInfo.cardEntity.phone
|
||||
}
|
||||
if (mainInfo?.mchList.length > 0) {
|
||||
Object.assign(mchList, mainInfo.mchList)
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
await getList()
|
||||
await showMainNumber()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
.card {
|
||||
.logo {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 120rpx;
|
||||
border: 1rpx solid var(--apple-blue);
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-apple {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
border-radius: 12rpx;
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
padding: 20rpx;
|
||||
background: var(--system-gray-6);
|
||||
color: var(--text-primary);
|
||||
|
||||
/* 按钮变体 */
|
||||
&.btn-primary {
|
||||
background: var(--apple-blue);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.btn-success {
|
||||
background: var(--apple-green);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.btn-warning {
|
||||
background: var(--apple-orange);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.btn-danger {
|
||||
background: var(--apple-red);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.btn-secondary {
|
||||
background: var(--system-gray-4);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 小号按钮 */
|
||||
&.btn-mini {
|
||||
min-height: 40rpx;
|
||||
padding: 0 16rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
/* 大号按钮 */
|
||||
&.btn-large {
|
||||
min-height: 64rpx;
|
||||
padding: 0 32rpx;
|
||||
font-size: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
/* 禁用状态 */
|
||||
&.btn-disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
148
pages/bind/bind.vue
Normal file
148
pages/bind/bind.vue
Normal file
@@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view v-if="isBind" class="card flex-col-g20">
|
||||
<view class="flex-row-g20">
|
||||
<label for="">手机号:</label>
|
||||
<up-input placeholder="请输入绑定的手机号" border="surround" v-model="bind.mobile" />
|
||||
</view>
|
||||
|
||||
<view class="flex-row-g20">
|
||||
<label for="">验证码:</label>
|
||||
<up-input placeholder="验证码" v-model="bind.code">
|
||||
<template #suffix>
|
||||
<up-button @tap="getCode" text="获取验证码" type="success"></up-button>
|
||||
</template>
|
||||
</up-input>
|
||||
</view>
|
||||
|
||||
<view class="btn">
|
||||
<up-button type="primary" @tap="bindPhone">绑定手机号</up-button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card" v-else>
|
||||
<up-cell-group>
|
||||
<up-cell title="绑定手机号" :value="bindInfo.phone"></up-cell>
|
||||
<up-cell title="绑定时间" :value="bindInfo.bindTime"></up-cell>
|
||||
<up-cell title="ICCID" :value="bindInfo.iccid"></up-cell>
|
||||
<up-cell title="状态" :value="bindInfo.status"></up-cell>
|
||||
</up-cell-group>
|
||||
|
||||
<view class="btn mt-30 flex-col-g20">
|
||||
<up-button type="primary" @tap="changeBind">更换绑定</up-button>
|
||||
<up-button type="success" @tap="logout">退出</up-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
onMounted,
|
||||
reactive
|
||||
} from 'vue'
|
||||
|
||||
import {
|
||||
userStore
|
||||
} from '@/store/index.js';
|
||||
|
||||
let isBind = ref(false)
|
||||
|
||||
let bind = reactive({
|
||||
mobile: "",
|
||||
code: ""
|
||||
})
|
||||
|
||||
let bindInfo = reactive({
|
||||
phone: "",
|
||||
iccid: "",
|
||||
bindTime: "",
|
||||
status: 0
|
||||
})
|
||||
|
||||
const changeBind = () => {
|
||||
isBind.value = true
|
||||
}
|
||||
|
||||
// 获取绑定信息
|
||||
const getBindInfo = async () => {
|
||||
const result = await userStore.actions.getDeviceBindPhone()
|
||||
if (result.myBindRecord.bindPhone) {
|
||||
isBind.value = false
|
||||
bindInfo.phone = result.myBindRecord.bindPhone
|
||||
bindInfo.iccid = result.myBindRecord.iccidMark
|
||||
bindInfo.bindTime = result.myBindRecord.createDateStr
|
||||
bindInfo.status = result.myBindRecord.status === 1 ? "已绑定" : "未绑定"
|
||||
} else {
|
||||
isBind.value = true
|
||||
}
|
||||
}
|
||||
|
||||
// 获取验证码
|
||||
const getCode = async () => {
|
||||
if (!bind.mobile) {
|
||||
uni.showToast({
|
||||
title: "请输入手机号",
|
||||
icon: "none"
|
||||
})
|
||||
return
|
||||
}
|
||||
const data = await userStore.actions.getSmsNumber(bind.mobile)
|
||||
if (data.isSuccess && data?.errorMsg) {
|
||||
uni.showToast({
|
||||
title: data.errorMsg,
|
||||
icon: "none"
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "验证码已发送",
|
||||
icon: "none"
|
||||
})
|
||||
}
|
||||
}
|
||||
// 绑定手机号
|
||||
const bindPhone = async () => {
|
||||
if (!bind.mobile && !bind.code) {
|
||||
uni.showToast({
|
||||
title: "手机号和验证码都不能为空",
|
||||
icon: "none"
|
||||
})
|
||||
return
|
||||
}
|
||||
const data = await userStore.actions.bindCardPhone(bind.mobile, bind.code)
|
||||
if (data.isSuccess && data?.errorMsg) {
|
||||
uni.showToast({
|
||||
title: data.errorMsg,
|
||||
icon: "none"
|
||||
})
|
||||
return
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "绑定成功",
|
||||
icon: "none"
|
||||
})
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
isBind.value = false
|
||||
getBindInfo()
|
||||
})
|
||||
}
|
||||
// 退出
|
||||
const logout = async() => {
|
||||
await userStore.actions.logout()
|
||||
uni.navigateTo({
|
||||
url: "/pages/login/login"
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
getBindInfo()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
21
pages/error/error.vue
Normal file
21
pages/error/error.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<view class="error">
|
||||
请在微信中打开...
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.error{
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 30rpx;
|
||||
color: #999;
|
||||
}
|
||||
</style>
|
||||
1102
pages/index/index.vue
Normal file
1102
pages/index/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
109
pages/login/login.vue
Normal file
109
pages/login/login.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="card">
|
||||
<view class="title-login">
|
||||
物联网卡登录
|
||||
</view>
|
||||
<view class="input">
|
||||
<up-input class="mt-30" v-model="device_id" placeholder="请输入ICCID"></up-input>
|
||||
</view>
|
||||
<view class="button">
|
||||
<up-button class="mt-30 btn-apple btn-primary" type=" primary" @click="login">立即登录</up-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted,
|
||||
computed
|
||||
} from 'vue';
|
||||
|
||||
import {
|
||||
userStore
|
||||
} from '@/store/index.js';
|
||||
|
||||
const device_id = ref('');
|
||||
|
||||
const login = async () => {
|
||||
if (!device_id.value) {
|
||||
uni.showToast({
|
||||
title: '请输入ICCID',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const result = await userStore.actions.login(device_id.value);
|
||||
|
||||
if (result.system_result_message_key) {
|
||||
uni.showToast({
|
||||
title: result.system_result_message_key,
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
title: '登录成功',
|
||||
icon: 'none'
|
||||
})
|
||||
|
||||
// 登录成功后跳转到首页（登录状态已在store中设置）
|
||||
uni.redirectTo({
|
||||
url: "/pages/index/index"
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('登录过程中发生错误:', error);
|
||||
uni.showToast({
|
||||
title: '登录失败，请稍后重试',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 获取扫码后路由中带的device_id
|
||||
const getPathDeviceId = () => {
|
||||
const path = window.location.href.split("=")
|
||||
if (path.length > 1) {
|
||||
device_id.value = path[1]
|
||||
login()
|
||||
}
|
||||
}
|
||||
|
||||
// 进入页面后自动获取Cookie
|
||||
const getCookieAndWxUrl = async () => {
|
||||
await userStore.actions.getWxUrl();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getCookieAndWxUrl()
|
||||
getPathDeviceId()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
padding-top: 30vh;
|
||||
|
||||
.title-login {
|
||||
color: #333;
|
||||
font-size: 24px;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.input {
|
||||
margin: 70rpx 0 50rpx 0;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
301
pages/package-order/package-order.vue
Normal file
301
pages/package-order/package-order.vue
Normal file
@@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view v-if="packageList.length > 0" class="card flex-col-g20" v-for="item in packageList">
|
||||
<view class="title">
|
||||
{{item.name}}
|
||||
</view>
|
||||
<view class="price">
|
||||
￥{{item.accountMoney}}
|
||||
</view>
|
||||
<view class="desc">
|
||||
请在套餐有效期内使用,有效期内流量用完可充值加餐包即可继续使用
|
||||
</view>
|
||||
<view class="btn">
|
||||
<up-button type="primary" @tap="showBuy=true">立即订购</up-button>
|
||||
</view>
|
||||
<up-modal :title="`您确定要订购${item.name}套餐吗？`" :show="showBuy" showCancelButton @confirm="SubscribeNow(item)"
|
||||
@cancel="showBuy=false" />
|
||||
</view>
|
||||
|
||||
<view v-else class="card">
|
||||
<view class="title" style="text-align: center;">
|
||||
该设备暂无套餐, 请联系客服购买
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
|
||||
import {
|
||||
userStore
|
||||
} from '@/store/index.js';
|
||||
|
||||
let showBuy = ref(false)
|
||||
|
||||
// 套餐列表
|
||||
let packageList = reactive([]);
|
||||
|
||||
// 支付列表
|
||||
let payList = reactive([]);
|
||||
|
||||
// 获取套餐列表
|
||||
const getPackageList = async () => {
|
||||
const result = await userStore.actions.getPackageList()
|
||||
if (result.smList.length > 0) {
|
||||
packageList.push(...result.smList)
|
||||
}
|
||||
}
|
||||
|
||||
// 立即订购
|
||||
const SubscribeNow = async (item) => {
|
||||
// 1. 判断当前用户是否已经绑定了微信公众号的 OpenId
|
||||
await checkHasGzhOpenId()
|
||||
|
||||
// 2. checkYgosWxInfo 检查当前用户是否具有与微信支付相关的特定信息
|
||||
await userStore.actions.checkYgosWxInfo()
|
||||
|
||||
// 3. checkXwzfWxInfo 检查当前用户是否具有与微信支付相关的特定信息
|
||||
await userStore.actions.checkXwzfWxInfo()
|
||||
|
||||
// 4. 获取支付列表
|
||||
await getPayList(item.id)
|
||||
|
||||
let id = "";
|
||||
|
||||
if (payList.length === 2) {
|
||||
id = payList[1].id
|
||||
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: "未找到微信支付",
|
||||
icon: "none"
|
||||
})
|
||||
}
|
||||
|
||||
const params = {
|
||||
mealId: item.id,
|
||||
cardID: "",
|
||||
money: item.money,
|
||||
mealType: item.type,
|
||||
cardCount: item.cardCount,
|
||||
mealName: item.name,
|
||||
strEffectType: "-1",
|
||||
__pay_method: "1",
|
||||
__merchant_cfg_id: id,
|
||||
payPwd: ""
|
||||
}
|
||||
|
||||
// 5. 创建订单, 获取支付参数
|
||||
await createOrder(params)
|
||||
}
|
||||
|
||||
// 1. 判断当前用户是否已经绑定了微信公众号的 OpenId
|
||||
const checkHasGzhOpenId = async () => {
|
||||
const result = await userStore.actions.checkHasGzhOpenId()
|
||||
if (result.wxAuthUrl) {
|
||||
// 再次进行授权
|
||||
uni.showToast({
|
||||
title: "该用户需要再次授权",
|
||||
icon: "none"
|
||||
})
|
||||
toAuth()
|
||||
}
|
||||
}
|
||||
|
||||
// 4. 获取支付列表
|
||||
const getPayList = async (mealId) => {
|
||||
const result = await userStore.actions.getPayList(mealId)
|
||||
if (result.payMethodList.length > 0) {
|
||||
Object.assign(payList, result.payMethodList)
|
||||
} else {
|
||||
toAuth()
|
||||
}
|
||||
}
|
||||
|
||||
// 5. 创建订单, 获取支付参数, 并拉起微信支付
|
||||
const createOrder = async (params) => {
|
||||
showBuy.value = false;
|
||||
|
||||
try {
|
||||
// 调用后端接口，获取支付参数
|
||||
const data = await userStore.actions.createOrder(params);
|
||||
|
||||
// 如果有错误信息，显示错误提示
|
||||
if (data?.errorMsg) {
|
||||
uni.showToast({
|
||||
title: data?.errorMsg,
|
||||
icon: "none"
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 调起微信支付
|
||||
if (data?.wp) {
|
||||
await invokeWechatPay(data?.wp);
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '获取支付参数失败',
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: "拉起微信支付失败",
|
||||
icon: "none"
|
||||
})
|
||||
}
|
||||
};
|
||||
|
||||
// 调起微信支付
|
||||
const invokeWechatPay = (payParam) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
console.log('[PackageOrder] 调起微信支付...', payParam)
|
||||
|
||||
const onBridgeReady = () => {
|
||||
window.WeixinJSBridge.invoke(
|
||||
'getBrandWCPayRequest', {
|
||||
appId: payParam.appId,
|
||||
timeStamp: payParam.timeStamp,
|
||||
nonceStr: payParam.nonceStr,
|
||||
package: payParam.prepayId,
|
||||
signType: payParam.signType || 'MD5',
|
||||
paySign: payParam.paySign
|
||||
},
|
||||
(res) => {
|
||||
console.log('[PackageOrder] 微信支付结果:', res)
|
||||
if (res.err_msg === 'get_brand_wcpay_request:ok') {
|
||||
resolve(res)
|
||||
} else if (res.err_msg === 'get_brand_wcpay_request:cancel') {
|
||||
reject(new Error('用户取消支付'))
|
||||
} else {
|
||||
reject(new Error('支付失败: ' + res.err_msg))
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
if (typeof window.WeixinJSBridge === 'undefined') {
|
||||
if (document.addEventListener) {
|
||||
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
|
||||
} else if (document.attachEvent) {
|
||||
document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
|
||||
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
|
||||
}
|
||||
} else {
|
||||
onBridgeReady()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 跳转到微信授权页面
|
||||
const toAuth = async () => {
|
||||
try {
|
||||
const result = await userStore.actions.getWxUrl();
|
||||
|
||||
if (result.wxAuthUrl) {
|
||||
// 获取当前页面的URL
|
||||
const currentUrl = window.location.href;
|
||||
|
||||
// 检查当前URL是否已经包含 code 参数
|
||||
if (!currentUrl.includes("code=")) {
|
||||
// 如果没有code参数，跳转到微信授权页面
|
||||
let originalUrl = result.wxAuthUrl;
|
||||
|
||||
// 目标替换的 redirect_uri
|
||||
const newRedirectUri = "https://m1.whjhft.com/pages/index/index";
|
||||
|
||||
// 替换 "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxea8c599fe100ce8a&redirect_uri=https://m1.whjhft.com/my/my&response_type=code&scope=snsapi_userinfo&state=cardlogin#wechat_redirect"
|
||||
// 使用正则表达式替换 redirect_uri 的值
|
||||
const updatedUrl = originalUrl.replace(/(redirect_uri=)[^&]*/,
|
||||
`$1${encodeURIComponent(newRedirectUri)}`);
|
||||
|
||||
if (updatedUrl) {
|
||||
window.location.href = updatedUrl;
|
||||
}
|
||||
} else {
|
||||
// 如果已经包含code参数, 就进行授权
|
||||
authoration()
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '该用户已授权',
|
||||
icon: 'none'
|
||||
})
|
||||
|
||||
}
|
||||
} catch (e) {
|
||||
uni.showToast({
|
||||
title: e,
|
||||
icon: 'none'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// 授权
|
||||
const authoration = async () => {
|
||||
try {
|
||||
// 获取当前页面的完整 URL https://m1.whjhft.com/pages/index/index?code=081KSnml23G2Ug4XViml2VFHyJ0KSnmF&state=cardlogin
|
||||
// const url = window.location.href;
|
||||
|
||||
const code = (location.search.match(/[?&]code=([^&]*)/) || [])[1];
|
||||
|
||||
if (code) {
|
||||
// 如果 code 存在，则调用获取授权的动作
|
||||
await userStore.actions.getAuthorize(code);
|
||||
removeCodeFromUrl()
|
||||
} else {
|
||||
// 如果 code 不存在
|
||||
uni.showToast({
|
||||
title: "微信授权失败!",
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
// 错误处理
|
||||
console.error('授权失败:', error);
|
||||
uni.showToast({
|
||||
title: "授权失败，请重试",
|
||||
icon: "none"
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
getPackageList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
.card {
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #aa5500;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
.pay-title {
|
||||
font-size: 35rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
234
pages/switch/switch.vue
Normal file
234
pages/switch/switch.vue
Normal file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="card" v-for="item in mchList">
|
||||
<view class="flex-row-sb mt-30">
|
||||
<view class="flex-row-g20">
|
||||
<view class="logo">
|
||||
<image :src="getLogo(item.category).logo" mode="aspectFit"></image>
|
||||
</view>
|
||||
<view class="flex-col-g20">
|
||||
<view class="flex-row-g20">
|
||||
<view class="iccid">
|
||||
ICCID: {{item.iccidMark}}
|
||||
</view>
|
||||
<view class="operator">
|
||||
<up-tag type="success"
|
||||
size="mini">{{getLogo(item.category).name}}</up-tag>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex-row-g20">
|
||||
<view class="operator" v-if="item.iccidMark===currentIccid">
|
||||
<up-tag type="success"
|
||||
size="mini">{{item.iccidMark===currentIccid ? "当前使用" : ""}}</up-tag>
|
||||
</view>
|
||||
<view class="operator" v-if="item.iccidMark===currentIccidMain">
|
||||
<up-tag type="success"
|
||||
size="mini">{{item.iccidMark===currentIccidMain ? "当前主卡" : ""}}</up-tag>
|
||||
</view>
|
||||
|
||||
<view class="operator">
|
||||
<up-tag :type="item.isRealName ? 'primary': 'success'"
|
||||
size="mini">{{item.isRealName ? "已实名" : "未实名"}}</up-tag>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="btn flex-col-g20 mt-30">
|
||||
<up-button class="btn-apple btn-success" v-if="item.iccidMark!==currentIccid" type="success"
|
||||
@tap="switchShow=true">
|
||||
切换此运营商
|
||||
</up-button>
|
||||
<up-button class="btn-apple btn-success" v-if="!item.isRealName" type="success" @tap="goToReal">
|
||||
跳转实名页面
|
||||
</up-button>
|
||||
</view>
|
||||
<!-- 切换运营商 -->
|
||||
<up-modal title="您确定要切换运营商吗？" :show="switchShow" showCancelButton @confirm="changeOpera(item)"
|
||||
@cancel="switchShow=false" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
onMounted,
|
||||
reactive,
|
||||
ref,
|
||||
computed
|
||||
} from 'vue';
|
||||
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app'
|
||||
|
||||
import {
|
||||
userStore
|
||||
} from '@/store/index.js';
|
||||
|
||||
let mchList = reactive([])
|
||||
|
||||
// 当前主卡
|
||||
let currentIccidMain = ref("")
|
||||
|
||||
// 当前卡
|
||||
let currentIccid = ref("")
|
||||
|
||||
// 是否显示
|
||||
let switchShow = ref(false)
|
||||
|
||||
let opratorList = reactive([{
|
||||
category: "124", // 中国电信
|
||||
logo: "https://img2.baidu.com/it/u=139558247,3893370039&fm=253&fmt=auto?w=529&h=500",
|
||||
esim: 1,
|
||||
name: "中国电信"
|
||||
},
|
||||
{
|
||||
category: "125", // 中国联通
|
||||
logo: "https://img1.baidu.com/it/u=2816777816,1756344384&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500",
|
||||
esim: 2,
|
||||
name: "中国联通"
|
||||
},
|
||||
{
|
||||
category: "126", // 中国移动
|
||||
logo: "https://img2.baidu.com/it/u=915783975,1594870591&fm=253&fmt=auto&app=120&f=PNG?w=182&h=182",
|
||||
esim: 3,
|
||||
name: "中国移动"
|
||||
}
|
||||
])
|
||||
|
||||
const getLogo = computed(() => {
|
||||
return (category) => {
|
||||
const operator = opratorList.find(item => item.category == category);
|
||||
return operator ? operator : ''; // 返回logo路径
|
||||
};
|
||||
});
|
||||
|
||||
const changeOpera = async (data) => {
|
||||
let matchedItem = opratorList.find(item => item.category === data.category);
|
||||
await userStore.actions.changeOperator(matchedItem.esim, data.iccidMark)
|
||||
uni.showToast({
|
||||
title: "切换成功, 3-5分钟后生效!",
|
||||
icon: "none"
|
||||
})
|
||||
switchShow.value = false
|
||||
}
|
||||
|
||||
const goToReal = () => {
|
||||
uni.navigateTo({
|
||||
url: "/pages/auth/auth"
|
||||
})
|
||||
}
|
||||
|
||||
// 获取列表
|
||||
const getList = async () => {
|
||||
const mainInfo = await userStore.actions.getSwitchCardList()
|
||||
if (mainInfo?.cardEntity) {
|
||||
// 当前主卡
|
||||
currentIccidMain.value = mainInfo.cardEntity.iccidMark
|
||||
// 当前使用卡
|
||||
currentIccid.value = mainInfo.gswlinfo.iccid
|
||||
}
|
||||
if (mainInfo?.mchList.length > 0) {
|
||||
Object.assign(mchList, mainInfo.mchList)
|
||||
}
|
||||
}
|
||||
|
||||
const YesSwitch = async () => {
|
||||
switchShow.value = true
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
.card {
|
||||
.logo {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 120rpx;
|
||||
border: 1rpx solid var(--apple-blue);
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
font-size: 30rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-apple {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
border-radius: 12rpx;
|
||||
font-weight: 500;
|
||||
font-size: 26rpx;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
padding: 20rpx;
|
||||
background: var(--system-gray-6);
|
||||
color: var(--text-primary);
|
||||
|
||||
/* 按钮变体 */
|
||||
&.btn-primary {
|
||||
background: var(--apple-blue);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.btn-success {
|
||||
background: var(--apple-green);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.btn-warning {
|
||||
background: var(--apple-orange);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.btn-danger {
|
||||
background: var(--apple-red);
|
||||
color: white;
|
||||
}
|
||||
|
||||
&.btn-secondary {
|
||||
background: var(--system-gray-4);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* 小号按钮 */
|
||||
&.btn-mini {
|
||||
min-height: 40rpx;
|
||||
padding: 0 16rpx;
|
||||
font-size: 24rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
/* 大号按钮 */
|
||||
&.btn-large {
|
||||
min-height: 64rpx;
|
||||
padding: 0 32rpx;
|
||||
font-size: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
/* 禁用状态 */
|
||||
&.btn-disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user