mirror of
https://gitee.com/liuxioabin/fengketrade.git
synced 2026-04-17 21:03:17 +08:00
266 lines
7.7 KiB
Vue
266 lines
7.7 KiB
Vue
<template>
|
||
<view class="mock-login-page">
|
||
<view class="header">
|
||
<text class="title">建行生活测试登录</text>
|
||
<text class="subtitle">请选择测试用户</text>
|
||
</view>
|
||
|
||
<view class="user-list">
|
||
<!-- 用户1 -->
|
||
<view class="user-card" @click="selectUser(1)">
|
||
<view class="user-avatar">
|
||
<text class="avatar-text">1</text>
|
||
</view>
|
||
<view class="user-info">
|
||
<text class="user-name">测试用户1</text>
|
||
<text class="user-mobile">138****0001</text>
|
||
<text class="user-id">ID: user_test_001</text>
|
||
</view>
|
||
<view class="arrow">
|
||
<text class="arrow-icon">→</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 用户2 -->
|
||
<view class="user-card" @click="selectUser(2)">
|
||
<view class="user-avatar user-avatar-2">
|
||
<text class="avatar-text">2</text>
|
||
</view>
|
||
<view class="user-info">
|
||
<text class="user-name">测试用户2</text>
|
||
<text class="user-mobile">138****0002</text>
|
||
<text class="user-id">ID: user_test_002</text>
|
||
</view>
|
||
<view class="arrow">
|
||
<text class="arrow-icon">→</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="tips">
|
||
<text class="tips-text">💡 提示：点击用户卡片后将模拟建行生活跳转</text>
|
||
<text class="tips-detail">URL格式：url?platform=ccblife&channel=mbs&ccbParamSJ=xxx&CITYID=xxx&USERCITYID=xxx</text>
|
||
<text class="tips-detail">App.vue 将自动检测参数并完成登录</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref } from 'vue';
|
||
import sheep from '@/sheep';
|
||
|
||
// 两个测试用户的参数 (完全按照建行生活跳转URL格式)
|
||
const users = {
|
||
1: {
|
||
name: '测试用户1',
|
||
mobile: '138****0001',
|
||
params: {
|
||
platform: 'ccblife', // 建行生活平台标识
|
||
channel: 'mbs', // 渠道标识（可选）
|
||
ccbParamSJ: "ZWVlRURYQndmYlpJOGpMRWRPRWEwRjVCZk82NjQxam1sL0l0d0NWMm9lUDdURld3MDRXamlNSGcva29COXBoZkVHKytHbHpSeUM3VkNESkUvTXYrOHFGYkhZWXo4d1NmanZuN0kvODF6TEo1OU9UbTZhS29MSUw3NjQzTGRKQWtrUHhyQi92TEVscWZzVWhlbVBpMVhHbHV2Z2RheXczK0VDL0J5N0g5aWNNR1ZPbFpWN0w4RHlNMGcrY09ZdWF2RUwzN2xheUNqUXdNV1dkR0F6RmlKL1V4b0NyMUhQM2R0Ui9ld0Vicll4eFdFeTFvUEthQ3Z5Vy9MajZxNFhQZTlrSjdTQVh1UjFyOWZGYjdMa003LzZpNnVSd2hWSnBCZ1h0WnRwU1VQb3UxSmh1UG00ejdleW9SUVMrOUJ2bW5VcVJBZnM0dy9RWEIwRlhwOGtLZW5rQ3RPK2xjdHlmTzE2cnU5UXJleHhmT2Y1ZXZwNjh3Qy9aTWVCTnoxZng4OXI2YWd5NUFWbmE2bzUwOVJES2tCZElhaG5JZll2eURPa2lyeTBqS0pBdGptSkRIRWFhcjUvaTlTVXkrbVdIbklmdDNsZE4rbWRnMWE0R0tzZmpqNUpDcll2VkFvQ0tBWklIc3FRL21admtrSDBqWEhYZ0ZrMjk2MWJ3eExSNGI=",
|
||
CITYID: '330100', // 用户选择城市代码
|
||
USERCITYID: '440100' // 用户定位城市代码
|
||
}
|
||
},
|
||
2: {
|
||
name: '测试用户2',
|
||
mobile: '138****0002',
|
||
params: {
|
||
platform: 'ccblife',
|
||
channel: 'mbs',
|
||
ccbParamSJ: "SWQ5aGhCT2xReWZNOVZ3Vk51SVVQSFRIZXpuZkxVZU5MbTR1d0tWdzRzcXFKRGFJUE9TdzZwUE1LVkY4eWhRYXhoWmwvVFJEcXV0TitqS2NHOGlUcU1VWWxLc1E4TTBkcXh5aFMvNFZvUzdrOTEzcm9oTVNZeG1Ta2ZNOURJblRUSExTTWt1UXZIbGpKZktlVkRVb0V0Nk5xQVh4a2wxd3lYb2toWWhUSVd3Y0xZcmhJZnVDNVFVQTdQWDB3RVlWek55azRKV1dFWDJVN0h3OTNOTTFjaTZ4NmpramRsQXVPMVl0bURqN2lsbUovVWdSWG8ydVpldDMzTnlKWE9xUEJyWG41aVVTK3Q5WlFCbnFSRnVEbVE2OTFjdHZZbWVoTElaclpraE5nb0R4ME1QbVpJc0FDcVE4YWpqSkxBdWF2RTh4RDZ5eTIvOXN1dGtZR3dQTCtJZ1VvcVE3WlVmdGlZTVRaNWhEYlFLUDIyMjVtTjVrSUZreE9JUzFKdXBxQ3pQS1B5UTFNYnk5NE5QdExqMEdxOC85bW1XQ1RleGZBQmJleG82UnNoV3RDUlRhTjZDTFVFOHZ0THppdWhzNEtyMjhnalRzVndkbUdudHFXdVp4RDgxRUhieEhydmxocklIUUZNb0tlMmtaeEI4OXhGbkxoNHZHUFJNMFVKMGc=",
|
||
CITYID: '330100',
|
||
USERCITYID: '440100'
|
||
}
|
||
}
|
||
};
|
||
|
||
// 选择用户并跳转到首页(携带参数) - 模拟建行生活跳转
|
||
const selectUser = (userId) => {
|
||
console.log(`[MockLogin] 选择用户${userId}`);
|
||
|
||
const user = users[userId];
|
||
|
||
if (!user) {
|
||
uni.showToast({
|
||
title: '用户数据错误',
|
||
icon: 'none'
|
||
});
|
||
return;
|
||
}
|
||
|
||
console.log(`[MockLogin] 模拟建行生活跳转，携带用户${userId}的参数`);
|
||
console.log(`[MockLogin] 用户信息:`, user);
|
||
|
||
// 构造完整的URL参数串（按照建行文档格式）
|
||
// 格式：url?platform=ccblife&channel=mbs&ccbParamSJ=xxxxxx&CITYID=330100&USERCITYID=440100
|
||
const params = new URLSearchParams(user.params);
|
||
|
||
// #ifdef H5
|
||
// H5环境：直接修改URL并刷新整个应用（模拟建行App跳转）
|
||
const baseUrl = window.location.origin + window.location.pathname;
|
||
const newUrl = `${baseUrl}?${params.toString()}#/pages/index/index`;
|
||
|
||
console.log('[MockLogin] 完整跳转URL:', newUrl);
|
||
console.log('[MockLogin] 参数详情:', {
|
||
platform: user.params.platform,
|
||
channel: user.params.channel,
|
||
ccbParamSJ: user.params.ccbParamSJ.substring(0, 50) + '...',
|
||
CITYID: user.params.CITYID,
|
||
USERCITYID: user.params.USERCITYID
|
||
});
|
||
|
||
// 显示提示
|
||
uni.showToast({
|
||
title: '正在跳转...',
|
||
icon: 'loading',
|
||
duration: 500
|
||
});
|
||
|
||
// 延迟跳转，让用户看到提示
|
||
setTimeout(() => {
|
||
window.location.href = newUrl;
|
||
}, 500);
|
||
// #endif
|
||
|
||
// #ifndef H5
|
||
// 非H5环境：使用uni.reLaunch
|
||
uni.reLaunch({
|
||
url: `/pages/index/index?${params.toString()}`
|
||
});
|
||
// #endif
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.mock-login-page {
|
||
min-height: 100vh;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
padding: 40rpx 30rpx;
|
||
}
|
||
|
||
.header {
|
||
text-align: center;
|
||
margin-bottom: 80rpx;
|
||
margin-top: 80rpx;
|
||
|
||
.title {
|
||
display: block;
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.subtitle {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
}
|
||
}
|
||
|
||
.user-list {
|
||
.user-card {
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.user-avatar {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
margin-right: 30rpx;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.avatar-text {
|
||
font-size: 44rpx;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.user-avatar-2 {
|
||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||
}
|
||
|
||
.user-info {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.user-name {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333333;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.user-mobile {
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.user-id {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
}
|
||
}
|
||
|
||
.arrow {
|
||
width: 40rpx;
|
||
text-align: center;
|
||
|
||
.arrow-icon {
|
||
font-size: 40rpx;
|
||
color: #999999;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tips {
|
||
margin-top: 60rpx;
|
||
padding: 30rpx;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-radius: 16rpx;
|
||
backdrop-filter: blur(10px);
|
||
|
||
.tips-text {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: #ffffff;
|
||
text-align: center;
|
||
line-height: 1.6;
|
||
margin-bottom: 16rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tips-detail {
|
||
display: block;
|
||
font-size: 22rpx;
|
||
color: rgba(255, 255, 255, 0.85);
|
||
text-align: center;
|
||
line-height: 1.5;
|
||
margin-bottom: 8rpx;
|
||
font-family: monospace;
|
||
}
|
||
}
|
||
</style>
|
||
|