|
|
@@ -1,44 +1,413 @@
|
|
|
<template>
|
|
|
- <view class="container">
|
|
|
- <uni-list>
|
|
|
- <uni-list-item showExtraIcon="true" :extraIcon="{type: 'person-filled'}" title="昵称" :rightText="user.nickName" />
|
|
|
- <uni-list-item showExtraIcon="true" :extraIcon="{type: 'phone-filled'}" title="手机号码" :rightText="user.phonenumber" />
|
|
|
- <uni-list-item showExtraIcon="true" :extraIcon="{type: 'email-filled'}" title="邮箱" :rightText="user.email" />
|
|
|
- <uni-list-item showExtraIcon="true" :extraIcon="{type: 'auth-filled'}" title="岗位" :rightText="postGroup" />
|
|
|
- <uni-list-item showExtraIcon="true" :extraIcon="{type: 'staff-filled'}" title="角色" :rightText="roleGroup" />
|
|
|
- <uni-list-item showExtraIcon="true" :extraIcon="{type: 'calendar-filled'}" title="创建日期" :rightText="user.createTime" />
|
|
|
- </uni-list>
|
|
|
+ <view class="container" :style="{paddingTop: navbarHeight + 'rpx'}">
|
|
|
+ <!-- 顶部渐变背景 -->
|
|
|
+ <view class="top-gradient"></view>
|
|
|
+
|
|
|
+ <!-- 自定义导航栏 -->
|
|
|
+ <view class="custom-navbar" :style="{paddingTop: statusBarHeight + 'px'}">
|
|
|
+ <view class="navbar-content">
|
|
|
+ <view class="navbar-back" @click="handleBack">
|
|
|
+ <view class="iconfont icon-right back-icon"></view>
|
|
|
+ </view>
|
|
|
+ <text class="navbar-title">账号信息</text>
|
|
|
+ <view class="navbar-placeholder"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 第一个卡片：基本信息 -->
|
|
|
+ <view class="info-card">
|
|
|
+ <view class="info-item" @click="handleAvatar">
|
|
|
+ <view class="item-label">头像</view>
|
|
|
+ <view class="item-value">
|
|
|
+ <image v-if="user.avatar" :src="user.avatar" class="avatar-img" mode="aspectFill"></image>
|
|
|
+ <view v-else class="avatar-placeholder">
|
|
|
+ <view class="iconfont icon-people"></view>
|
|
|
+ </view>
|
|
|
+ <view class="iconfont icon-right arrow-icon"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-divider"></view>
|
|
|
+ <view class="info-item" @click="handleEdit('name')">
|
|
|
+ <view class="item-label">姓名</view>
|
|
|
+ <view class="item-value">
|
|
|
+ <text class="value-text">{{ user.nickName || user.userName || '未设置' }}</text>
|
|
|
+ <view class="iconfont icon-right arrow-icon"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-divider"></view>
|
|
|
+ <view class="info-item" @click="handleEdit('intro')">
|
|
|
+ <view class="item-label">简介</view>
|
|
|
+ <view class="item-value">
|
|
|
+ <text class="value-text placeholder">{{ user.intro || '添加一条简介' }}</text>
|
|
|
+ <view class="iconfont icon-right arrow-icon"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-divider"></view>
|
|
|
+ <view class="info-item" @click="handleEdit('phone')">
|
|
|
+ <view class="item-label">手机号码</view>
|
|
|
+ <view class="item-value">
|
|
|
+ <text class="value-text">{{ user.phonenumber || '未设置' }}</text>
|
|
|
+ <view class="iconfont icon-right arrow-icon"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-divider"></view>
|
|
|
+ <view class="info-item">
|
|
|
+ <view class="item-label">接单状态</view>
|
|
|
+ <view class="item-value">
|
|
|
+ <text class="status-text" :class="{ active: orderStatus }">{{ orderStatus ? '接单中' : '暂停接单' }}</text>
|
|
|
+ <switch :checked="orderStatus" @change="handleOrderStatusChange" color="#007AFF" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 第二个卡片：专业和财务信息 -->
|
|
|
+ <view class="info-card">
|
|
|
+ <view class="info-item" @click="handleEdit('practiceTime')">
|
|
|
+ <view class="item-label">从业时间</view>
|
|
|
+ <view class="item-value">
|
|
|
+ <text class="value-text">{{ user.practiceTime || '未设置' }}</text>
|
|
|
+ <view class="iconfont icon-right arrow-icon"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-divider"></view>
|
|
|
+ <view class="info-item" @click="handleEdit('professionalField')">
|
|
|
+ <view class="item-label">专业领域</view>
|
|
|
+ <view class="item-value">
|
|
|
+ <text class="value-text">{{ user.professionalField || '未设置' }}</text>
|
|
|
+ <view class="iconfont icon-right arrow-icon"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-divider"></view>
|
|
|
+ <view class="info-item" @click="handleEdit('legalScenarios')">
|
|
|
+ <view class="item-label">法律场景</view>
|
|
|
+ <view class="item-value">
|
|
|
+ <text class="value-text">{{ user.legalScenarios || '未设置' }}</text>
|
|
|
+ <view class="iconfont icon-right arrow-icon"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-divider"></view>
|
|
|
+ <view class="info-item" @click="handleEdit('lawFirm')">
|
|
|
+ <view class="item-label">所属律所</view>
|
|
|
+ <view class="item-value">
|
|
|
+ <text class="value-text">{{ user.lawFirm || '未设置' }}</text>
|
|
|
+ <view class="iconfont icon-right arrow-icon"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-divider"></view>
|
|
|
+ <view class="info-item" @click="handleEdit('receivingAccount')">
|
|
|
+ <view class="item-label">收款账户</view>
|
|
|
+ <view class="item-value">
|
|
|
+ <text class="value-text">{{ user.receivingAccount || '未设置' }}</text>
|
|
|
+ <view class="iconfont icon-right arrow-icon"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="info-divider"></view>
|
|
|
+ <view class="info-item" @click="handleEdit('address')">
|
|
|
+ <view class="item-label">联系地址</view>
|
|
|
+ <view class="item-value">
|
|
|
+ <text class="value-text">{{ user.address || '未设置' }}</text>
|
|
|
+ <view class="iconfont icon-right arrow-icon"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 第三个卡片：账号管理 -->
|
|
|
+ <view class="info-card">
|
|
|
+ <view class="info-item" @click="handleDeregister">
|
|
|
+ <view class="item-label">注销账号</view>
|
|
|
+ <view class="item-value">
|
|
|
+ <view class="iconfont icon-right arrow-icon"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { getUserProfile } from "@/api/system/user"
|
|
|
+ import { getLawyerInfo, editLawyerUser } from "@/api/api"
|
|
|
+ import upload from '@/utils/upload'
|
|
|
+ import config from '@/config'
|
|
|
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
user: {},
|
|
|
- roleGroup: "",
|
|
|
- postGroup: ""
|
|
|
+ orderStatus: true,
|
|
|
+ statusBarHeight: 0
|
|
|
}
|
|
|
},
|
|
|
onLoad() {
|
|
|
- this.getUser()
|
|
|
+ // 获取状态栏高度
|
|
|
+ const systemInfo = uni.getSystemInfoSync()
|
|
|
+ this.statusBarHeight = systemInfo.statusBarHeight || 0
|
|
|
+ this.getLawyerInfoData()
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ navbarHeight() {
|
|
|
+ // 状态栏高度(px转rpx) + 导航栏高度(88rpx) + 间距(20rpx)
|
|
|
+ return (this.statusBarHeight * 2) + 88 + 20
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
- getUser() {
|
|
|
- getUserProfile().then(response => {
|
|
|
- this.user = response.data
|
|
|
- this.roleGroup = response.roleGroup
|
|
|
- this.postGroup = response.postGroup
|
|
|
+ getLawyerInfoData() {
|
|
|
+ getLawyerInfo({ lawyerId: 1 }).then(response => {
|
|
|
+ // 处理返回的律师信息
|
|
|
+ if (response.data) {
|
|
|
+ // 合并律师信息到 user 对象
|
|
|
+ this.user = { ...this.user, ...response.data }
|
|
|
+ // 如果有接单状态字段，使用它
|
|
|
+ if (response.data.orderStatus !== undefined) {
|
|
|
+ this.orderStatus = response.data.orderStatus
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }).catch(error => {
|
|
|
+ console.error('获取律师信息失败:', error)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleAvatar() {
|
|
|
+ const _this = this
|
|
|
+ uni.chooseImage({
|
|
|
+ count: 1,
|
|
|
+ sizeType: ['compressed'],
|
|
|
+ sourceType: ['album'],
|
|
|
+ success: function(res) {
|
|
|
+ const tempFilePath = res.tempFilePaths[0]
|
|
|
+ // 显示上传中提示
|
|
|
+ uni.showLoading({
|
|
|
+ title: '上传中...',
|
|
|
+ mask: true
|
|
|
+ })
|
|
|
+
|
|
|
+ // 使用原本的上传方法
|
|
|
+ // upload({
|
|
|
+ // url: '/file/upload',
|
|
|
+ // name: 'avatarfile',
|
|
|
+ // filePath: tempFilePath
|
|
|
+ // }).then(uploadRes => {
|
|
|
+ // // 上传成功后，获取图片URL
|
|
|
+ // let headImg = ''
|
|
|
+ // if (uploadRes.url) {
|
|
|
+ // headImg = uploadRes.url
|
|
|
+ // } else if (uploadRes.fileName) {
|
|
|
+ // headImg = config.baseUrl + uploadRes.fileName
|
|
|
+ // } else if (uploadRes.data && uploadRes.data.url) {
|
|
|
+ // headImg = uploadRes.data.url.startsWith('http') ? uploadRes.data.url : config.baseUrl + uploadRes.data.url
|
|
|
+ // } else if (uploadRes.data) {
|
|
|
+ // headImg = typeof uploadRes.data === 'string' ? uploadRes.data : uploadRes.data.url || uploadRes.data.imgUrl || ''
|
|
|
+ // }
|
|
|
+
|
|
|
+ // if (!headImg) {
|
|
|
+ // throw new Error('获取图片URL失败')
|
|
|
+ // }
|
|
|
+
|
|
|
+ // // 调用保存接口
|
|
|
+ // return editLawyerUser({
|
|
|
+ // id: 1,
|
|
|
+ // headImg: headImg
|
|
|
+ // }).then(saveRes => {
|
|
|
+ // // 更新本地头像显示
|
|
|
+ // if (saveRes.data && saveRes.data.headImg) {
|
|
|
+ // _this.user.avatar = saveRes.data.headImg
|
|
|
+ // _this.user.headImg = saveRes.data.headImg
|
|
|
+ // } else {
|
|
|
+ // // 如果返回数据中没有headImg，使用上传返回的URL
|
|
|
+ // _this.user.avatar = headImg
|
|
|
+ // _this.user.headImg = headImg
|
|
|
+ // }
|
|
|
+ // return saveRes
|
|
|
+ // })
|
|
|
+ // }).then(saveRes => {
|
|
|
+ // uni.hideLoading()
|
|
|
+ // _this.$modal.msgSuccess('头像上传成功')
|
|
|
+ // // 刷新数据
|
|
|
+ // _this.getLawyerInfoData()
|
|
|
+ // }).catch(error => {
|
|
|
+ // uni.hideLoading()
|
|
|
+ // console.error('上传失败:', error)
|
|
|
+ // _this.$modal.msgError('头像上传失败，请重试')
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ fail: function(err) {
|
|
|
+ console.error('选择图片失败:', err)
|
|
|
+ _this.$modal.msgError('选择图片失败')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleEdit(field) {
|
|
|
+ // 跳转到编辑页面或显示编辑弹窗
|
|
|
+ this.$tab.navigateTo('/pages/mine/info/edit')
|
|
|
+ },
|
|
|
+ handleOrderStatusChange(e) {
|
|
|
+ this.orderStatus = e.detail.value
|
|
|
+ // 这里可以调用API更新接单状态
|
|
|
+ // updateOrderStatus(this.orderStatus)
|
|
|
+ },
|
|
|
+ handleDeregister() {
|
|
|
+ this.$modal.confirm('确定要注销账号吗？注销后将无法恢复。').then(() => {
|
|
|
+ // 调用注销账号API
|
|
|
+ this.$modal.showToast('注销账号功能开发中')
|
|
|
})
|
|
|
+ },
|
|
|
+ handleBack() {
|
|
|
+ uni.navigateBack()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss">
|
|
|
+<style lang="scss" scoped>
|
|
|
page {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container {
|
|
|
+ min-height: 100vh;
|
|
|
+ padding: 0 30rpx 20rpx 30rpx;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ // 顶部渐变背景
|
|
|
+ .top-gradient {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ height: 800rpx;
|
|
|
+ background: linear-gradient(180deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 197, 253, 0.05) 50%, transparent 100%);
|
|
|
+ z-index: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 自定义导航栏
|
|
|
+ .custom-navbar {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ z-index: 999;
|
|
|
+ background-color: transparent;
|
|
|
+ pointer-events: none;
|
|
|
+
|
|
|
+ .navbar-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ height: 88rpx;
|
|
|
+ pointer-events: auto;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .navbar-back {
|
|
|
+ position: absolute;
|
|
|
+ left: 30rpx;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .back-icon {
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #000000;
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #000000;
|
|
|
+ }
|
|
|
+
|
|
|
+ .navbar-placeholder {
|
|
|
+ position: absolute;
|
|
|
+ right: 30rpx;
|
|
|
+ width: 60rpx;
|
|
|
+ height: 60rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-card {
|
|
|
background-color: #ffffff;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
|
|
|
+
|
|
|
+ .info-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 32rpx 30rpx;
|
|
|
+ min-height: 100rpx;
|
|
|
+
|
|
|
+ .item-label {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #000000;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-value {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex: 1;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ .avatar-img {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .avatar-placeholder {
|
|
|
+ width: 80rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #e0e0e0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 20rpx;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: 40rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .value-text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #000000;
|
|
|
+ margin-right: 20rpx;
|
|
|
+
|
|
|
+ &.placeholder {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-text {
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #999999;
|
|
|
+ margin-right: 20rpx;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ color: #007AFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .arrow-icon {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #cccccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-divider {
|
|
|
+ height: 1rpx;
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ margin: 0 30rpx;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
sunshibo