Files
huangjingfen/pro_v3.5.1/view/uniapp/pages/user/components/member/template1.vue
apple 8592243d36 feat(hjf): H5路由修复、分销等级显示优化、个人中心等级徽章
H5 部署与路由:
- manifest.json: router.base 改为 "/" 适配 public/ 根目录部署
- nginx-crmeb.conf: 恢复与 feature/fsgx 一致的原始配置
- App.vue: PC端重定向路径改为动态推导,修复死循环加载问题
- static/html/pc.html: 动态推导 H5 根路径,适配本地/云端两种部署

H5登录:
- pages/users/login/index.vue: H5端获取验证码跳过安全验证(条件编译)

分销等级展示修复:
- AgentLevelServices: 新增 loadHjfUserListLevelMaps/pickHjfLevelRowForUserListDisplay
  统一等级名称解析逻辑,优先返回 HJF 官方名称;新增 getUpgradeTasksForLevel 封装
- UserServices/MemberLevelServices: 改用统一解析方法,修复 protected $dao 访问错误
- api/hjf/MemberController: 直接取 eb_agent_level.name,新增 agent_level 原始值返回
- admin/v1/hjf/MemberController: team() 改用封装方法替代直接访问 protected dao

个人中心等级徽章:
- pages/user/index.vue + member/index.vue: memberInfo 沿链路透传
- member/template1.vue: UID右侧显示HjfMemberBadge,直接读 userInfo.agent_level_name
  无需等待异步 memberInfo,agentLevelGrade 计算属性从名称推导颜色等级

商品列表修复:
- BaseController.php/Common.php: 恢复加密版,修复 CRMEB 授权检查失败导致的400错误
- StoreProduct model: 移除冲突的 model maker 回调

数据库:
- hjf_migration.sql: 完善会员等级体系迁移脚本
- eb_agent_level.sql: 新增等级初始数据脚本

Made-with: Cursor
2026-03-22 01:43:36 +08:00

339 lines
8.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<script>
import { toLogin } from '@/libs/login.js';
export default {
props: {
userInfo: {
type: Object,
default: () => {}
},
property: {
type: Array,
default: () => []
},
// perShowType 0 手机号 1 ID
perShowType: {
type: Number,
default: 0
},
// HJF 分销等级信息(由 member/index.vue 向下传递)
memberInfo: {
type: Object,
default: () => ({ agent_level: 0, member_level: 0, member_level_name: '' })
}
},
inject: ['intoPage', 'tapQrCode', 'goMenuPage', 'goEdit', 'bindPhone', 'checkApp'],
computed:{
showMerBtn(){
return this.$store.state.app.channel_func_status
},
/** 从 userInfo.agent_level_name 推导 grade0-4用于徽章颜色 */
agentLevelGrade() {
const nameGradeMap = { '创客': 1, '云店': 2, '服务商': 3, '分公司': 4 };
const name = (this.userInfo && this.userInfo.agent_level_name) || '';
return nameGradeMap[name] || 0;
}
},
methods: {
openAuto(){
toLogin();
}
}
};
</script>
<template>
<view class="header">
<!-- 用户信息设置 -->
<view class="acea-row row-middle user px-30">
<view class="avatar relative" :class="userInfo.pay_vip_status ? 'svip-border' : 'white-border'"
@tap="goEdit">
<image class="avatar-img" :src="userInfo.avatar" mode="aspectFill" v-if="userInfo.avatar"></image>
<image class="avatar-img" src="@/static/images/f.png" mode="aspectFill" v-else></image>
<image class="vip-badge" src="@/static/img/svip_badge.png" v-show="userInfo.pay_vip_status"></image>
</view>
<view class="name-wrap flex-1 text--w111-fff pl-28">
<view class="name display-add" v-if="!userInfo.uid" @tap="openAuto">请点击授权</view>
<view class="acea-row row-middle" v-if="userInfo.uid">
<view class="name">{{ userInfo.nickname }}</view><strong></strong>
</view>
<view class="flex-y-center mt-10">
<view class="h-42 flex-center fs-22 text--w111-fff pl-16 pr-14 rd-30rpx b-f mr-12"
v-show="userInfo.is_channel && showMerBtn" @tap="checkApp(1)">采购商
<text class="iconfont icon-ic_rightarrow fs-22"></text>
</view>
<view class="h-42 flex-center fs-22 text--w111-fff pl-16 pr-14 rd-30rpx b-f"
v-show="userInfo.is_service" @tap="checkApp(2)">商家管理
<text class="iconfont icon-ic_rightarrow fs-22"></text>
</view>
</view>
<template v-if="!userInfo.is_channel && !userInfo.is_service">
<view class="bind-phone" v-if="!userInfo.phone && userInfo.uid" @tap="bindPhone">绑定手机号</view>
<view class="acea-row row-middle" v-else>
<view class="phone">{{ perShowType ? 'ID' + userInfo.uid : userInfo.phone }}</view>
<!--
<view class="vip flex-center" v-if="userInfo.level">
<text class="iconfont icon-huiyuandengji"></text>
{{ userInfo.vip_name || ('V' + userInfo.level) }}
</view>
-->
<!-- HJF 分销等级徽章直接用 userInfo.agent_level / agent_level_name无需等待异步 memberInfo -->
<HjfMemberBadge
v-if="userInfo.agent_level > 0"
:level="agentLevelGrade"
:levelName="userInfo.agent_level_name"
size="small"
class="ml-10"
/>
</view>
</template>
</view>
<view class="text--w111-fff">
<text class="iconfont icon-a-ic_QRcode fs-40" @tap="tapQrCode"><text class="tips">会员码</text></text>
<text class="iconfont icon-a-ic_setup1 fs-40 mx-32" @tap="intoPage('/pages/users/user_set/index')"></text>
<text class="iconfont icon-ic_message3 fs-40 relative" @tap="intoPage('/pages/users/message_center/index')">
<text v-if="userInfo.service_num" class="number">{{ userInfo.service_num >= 100 ? '99+' : userInfo.service_num }}</text>
</text>
</view>
</view>
<!-- 余额优惠券 -->
<view class="acea-row balance-coupon">
<view class="item" v-for="(item, index) in property" @tap="goMenuPage(item.url)" :key="index">
<view class="value num-fa-semi">{{ item.value || 0 }}</view>
<view>{{ item.label }}</view>
</view>
</view>
<!-- 会员中心积分商城 -->
<view class="acea-row member-points">
<view class="acea-row row-middle row-center item" @tap="intoPage(userInfo.level_status == 1 ? '/pages/users/user_vip/index' : '/pages/annex/vip_grade_active/index')">
<view>
<view>会员中心</view>
<view class="arrow">
查看新权益
<text class="iconfont icon-ic_rightarrow"></text>
</view>
</view>
<image src="@/static/images/user-member.png" class="image"></image>
</view>
<view class="acea-row row-middle row-center item" @tap="intoPage('/pages/activity/points_mall/index')">
<view>
<view>积分商城</view>
<view class="arrow">
限量兑神券
<text class="iconfont icon-ic_rightarrow"></text>
</view>
</view>
<image src="@/static/images/user-points.png" class="image"></image>
</view>
</view>
</view>
</template>
<style lang="scss" scoped>
.header {
padding: 18rpx 0 0rpx;
border-bottom-right-radius: 50% 40rpx;
border-bottom-left-radius: 50% 40rpx;
margin-bottom: 18rpx;
background-color: var(--view-theme);
// .user {
// padding: 0 40rpx 0 30rpx;
// .iconfont {
// position: relative;
// color: #ffffff;
// font-size: 40rpx;
// }
// }
.bind-phone {
margin-top: 12rpx;
background: rgba(255, 255, 255, 0.3);
border-radius: 30px;
width: max-content;
text-align: center;
font-size: 20rpx;
font-weight: 400;
color: #ffffff;
line-height: 28rpx;
padding: 6rpx 16rpx;
}
.tips::before {
content: '';
position: absolute;
bottom: -6rpx;
left: calc(50% - 6rpx);
width: 0;
height: 0;
border-left: 6rpx solid transparent;
border-right: 6rpx solid transparent;
border-top: 6rpx solid #ffd89c;
/* 修改颜色以改变三角形颜色 */
}
.avatar {
width: 112rpx;
height: 112rpx;
border-radius: 50%;
.avatar-img{
width: 100%;
height:100%;
border-radius: 50%;
display: block;
}
}
.vip-badge{
position: absolute;
top: -20rpx;
right: -10rpx;
width: 48rpx;
height: 46rpx;
}
.svip-border{
border: 2rpx solid #F1BB0D;
}
.white-border{
border: 2rpx solid #FFFFFF;
}
.name {
font-weight: 500;
font-size: 32rpx;
line-height: 44rpx;
}
.phone {
margin-top: 10rpx;
font-size: 24rpx;
line-height: 34rpx;
}
.tips {
position: absolute;
bottom: 100%;
left: 50%;
height: 28rpx;
padding: 0 14rpx;
border-radius: 14rpx;
margin-bottom: 4rpx;
background-color: #ffd89c;
transform: translateX(-50%);
white-space: nowrap;
font-size: 16rpx;
line-height: 28rpx;
color: #9e5e1a;
}
.number {
position: absolute;
top: -8rpx;
right: 0;
min-width: 10rpx;
height: 24rpx;
padding: 0 6rpx;
border: 2rpx solid var(--view-theme);
border-radius: 12rpx;
background-color: #ffffff;
transform: translateX(50%);
font-weight: 500;
font-size: 18rpx;
line-height: 24rpx;
color: var(--view-theme);
}
}
.vip{
height: 40rpx;
background: #FEF0D9;
border: 1px solid #FACC7D;
border-radius: 50rpx;
font-size: 26rpx;
font-weight: 600;
color: #DFA541;
margin-left: 10rpx;
padding: 0 12rpx;
.iconfont {
font-size: 28rpx !important;
margin-right: 4rpx;
color: #DFA541 !important;
}
}
.balance-coupon {
margin-top: 44rpx;
.item {
flex: 1;
text-align: center;
font-weight: 500;
font-size: 22rpx;
line-height: 22rpx;
color: rgba(255, 255, 255, 0.6);
}
.value {
margin-bottom: 12rpx;
font-weight: 400;
font-size: 32rpx;
line-height: 32rpx;
color: rgba(255, 255, 255, 0.85);
}
}
.member-points {
border-radius: 20rpx;
margin: 20rpx;
background-color: #ffffff;
.item {
position: relative;
flex: 1;
height: 134rpx;
padding-left: 40rpx;
font-weight: 500;
font-size: 28rpx;
line-height: 34rpx;
color: #333333;
&::before {
content: '';
position: absolute;
top: 50%;
left: 0;
height: 48rpx;
border-left: 1rpx solid #eeeeee;
transform: translateY(-50%);
}
&:first-child::before {
display: none;
}
.iconfont {
position: relative;
font-size: 20rpx;
}
}
.arrow {
margin-top: 12rpx;
font-weight: 400;
font-size: 22rpx;
line-height: 24rpx;
color: #ff7d00;
}
.image {
width: 88rpx;
height: 88rpx;
margin-left: 40rpx;
}
.iconfont {
margin-left: 2rpx;
font-size: 24rpx;
}
}
.b-f{
border: 1rpx solid #fff;
}
</style>