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-squircle">

          <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="phone-line">{{ phone }}</text>

          <text v-if="storeName" class="store-line">{{ storeName }}</text>

        </view>

      </view>



      <view class="setting-panel">

        <view class="setting-item">

          <text class="item-label">所属诊所</text>

          <text class="item-value">{{ storeName || '-' }}</text>

        </view>

      </view>



      <view class="setting-panel">

        <account-switch-entry />

        <view

          class="setting-item action-item"

          hover-class="item-hover"

          :hover-stay-time="100"

          @click="logout"

        >

          <text class="danger-text">退出登录</text>

          <u-icon name="arrow-right" color="#C9CDD4" size="28" />

        </view>

      </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 { getClinicSalespersonMyInfo } from '@/api/clinicSalesperson.js'

import { clearLoginStorage } from '@/utils/loginSession.js'



export default {

  components: { ClinicSalespersonPageLayout, AccountSwitchEntry },

  data() {

    return {

      displayName: '',

      phone: '',

      storeName: '',

      loading: false,

    }

  },

  computed: {

    avatarText() {

      return (this.displayName || '推').slice(0, 1)

    },

  },

  onShow() {

    this.loadProfile()

  },

  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: '#f53f3f',

        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;

$color-border: #f2f3f5;

$color-danger: #f53f3f;



.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-squircle {

  width: 128rpx;

  height: 128rpx;

  border-radius: 40rpx;

  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: 12rpx;

}



.role-text {

  font-size: 22rpx;

  color: $theme-dark;

  font-weight: 600;

}



.phone-line,

.store-line {

  font-size: 26rpx;

  color: $color-text-muted;

  margin-top: 8rpx;

}



.setting-panel {

  background-color: #fff;

  margin-bottom: 24rpx;

  padding: 0 40rpx;

}



.setting-item {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 36rpx 0;

  border-bottom: 1rpx solid $color-border;

}



.setting-panel .setting-item:last-child {

  border-bottom: none;

}



.item-label {

  font-size: 30rpx;

  color: $color-text-title;

  font-weight: 500;

}



.item-value {

  font-size: 30rpx;

  color: $color-text-muted;

}



.action-item {

  margin: 0 -40rpx;

  padding: 36rpx 40rpx;

}



.item-hover {

  background-color: #f7f8fa;

}



.danger-text {

  font-size: 30rpx;

  color: $color-danger;

  font-weight: 500;

}

</style>