xk-doctor-wx/subPackages/sub_clinic_salesperson/my/index.vue

<template>
  <clinic-salesperson-page-layout title="我的" :show-tabbar="true" :tab-index="1">
    <view class="mine-container">
      <view class="profile-panel">
        <view class="avatar-circle">
          <text>{{ avatarText }}</text>
        </view>
        <view class="user-info">
          <text class="user-name">{{ displayName }}</text>
          <view class="role-badge">
            <text class="role-text">推广员</text>
          </view>
          <text v-if="phone" class="meta-line">{{ phone }}</text>
        </view>
      </view>
      <view v-if="storeName" class="setting-panel info-panel">
        <view class="info-row">
          <text class="item-label">所属诊所</text>
          <text class="item-value">{{ storeName }}</text>
        </view>
      </view>
      <view class="setting-panel">
        <wx-bind-entry ref="wxBindEntry" />
        <account-switch-entry />
      </view>
      <view class="logout-wrap">
        <u-button
          :throttle-time="0"
          shape="circle"
          :custom-style="{ backgroundColor: '#6ACDBB', color: '#fff', height: '96rpx' }"
          @click="logout"
        >退出登录</u-button>
      </view>
    </view>
  </clinic-salesperson-page-layout>
</template>

<script>
/**
 * 推广员「我的」：对齐医生（菜单卡 + 绿色退出），保留所属诊所与绑定微信
 */
import ClinicSalespersonPageLayout from '@/subPackages/sub_clinic_salesperson/components/clinic-salesperson-page-layout.vue'
import AccountSwitchEntry from '@/components/account-switch/account-switch-entry.vue'
import WxBindEntry from '@/components/wx-bind-entry/wx-bind-entry.vue'
import { getClinicSalespersonMyInfo } from '@/api/clinicSalesperson.js'
import { clearLoginStorage } from '@/utils/loginSession.js'

export default {
  components: { ClinicSalespersonPageLayout, AccountSwitchEntry, WxBindEntry },
  data() {
    return {
      displayName: '',
      phone: '',
      storeName: '',
      loading: false,
    }
  },
  computed: {
    avatarText() {
      return (this.displayName || '推').slice(0, 1)
    },
  },
  onShow() {
    this.loadProfile()
    if (this.$refs.wxBindEntry) this.$refs.wxBindEntry.refresh()
  },
  methods: {
    async loadProfile() {
      if (this.loading) return
      this.loading = true
      try {
        const wrap = await getClinicSalespersonMyInfo()
        if (!wrap || !wrap.ok) return
        const info = wrap.data || {}
        this.displayName = info.salesperson?.nick_name || '推广员'
        this.phone = info.salesperson?.phone || ''
        this.storeName = info.store?.name || ''
        uni.setStorageSync('clinic_salesperson_user', info)
      } finally {
        this.loading = false
      }
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定退出登录？',
        confirmColor: '#6ACDBB',
        success: (res) => {
          if (!res.confirm) return
          clearLoginStorage()
          uni.reLaunch({ url: '/pages/login/index' })
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
$theme-primary: #6acdbb;
$theme-dark: #4db6a8;
$color-page-bg: #f5f7f8;
$color-text-title: #222b2a;
$color-text-muted: #86909c;

.mine-container {
  padding: 0 0 60rpx;
  background-color: $color-page-bg;
  min-height: 100vh;
  box-sizing: border-box;
}
.profile-panel {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 60rpx 40rpx 50rpx;
  margin-bottom: 24rpx;
}
.avatar-circle {
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, $theme-primary 0%, $theme-dark 100%);
  box-shadow: 0 8rpx 24rpx rgba(106, 205, 187, 0.25);
  color: #fff;
  font-size: 52rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.user-info {
  margin-left: 32rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.user-name {
  font-size: 40rpx;
  font-weight: 700;
  color: $color-text-title;
  margin-bottom: 12rpx;
}
.role-badge {
  align-self: flex-start;
  background-color: rgba(106, 205, 187, 0.1);
  border: 1rpx solid rgba(106, 205, 187, 0.2);
  padding: 4rpx 16rpx;
  border-radius: 8rpx;
  margin-bottom: 8rpx;
}
.role-text {
  font-size: 22rpx;
  color: $theme-dark;
  font-weight: 600;
}
.meta-line {
  font-size: 26rpx;
  color: $color-text-muted;
  margin-top: 4rpx;
}
.setting-panel {
  background-color: #fff;
  margin-bottom: 24rpx;
  padding: 8rpx 40rpx 16rpx;
}
.info-panel {
  padding: 28rpx 40rpx;
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item-label {
  font-size: 30rpx;
  color: $color-text-title;
  font-weight: 500;
}
.item-value {
  font-size: 30rpx;
  color: $color-text-muted;
}
.logout-wrap {
  padding: 0 40rpx 32rpx;
}
</style>