fengketrade/frontend/pages/user/mock-login.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>