|
|
|
@ -1,55 +1,126 @@ |
|
|
|
<script setup lang="ts"> |
|
|
|
import useUserStore from '@/store/user' |
|
|
|
import { getUserList } from '@/api/user' |
|
|
|
import { list as listApi, type dateListtype, update as updateApi } from '@/api/user' |
|
|
|
import { getAdminPhone } from '@/api/login' |
|
|
|
|
|
|
|
const userStore = useUserStore() |
|
|
|
|
|
|
|
const isHandleUserInfo = computed(() => userStore.userInfo.name === '') |
|
|
|
const isHandleUserInfo = computed(() => Object.keys(userStore.userInfo).length === 0) |
|
|
|
|
|
|
|
const keyword = ref('') |
|
|
|
const list = ref<any[]>([]) |
|
|
|
const getList = () => { |
|
|
|
getUserList({ name: keyword.value }).then((res) => { |
|
|
|
const { data } = res as { data: any[] } |
|
|
|
|
|
|
|
const list = ref<dateListtype[]>([]) |
|
|
|
|
|
|
|
const activeKey = ref(0) |
|
|
|
|
|
|
|
const amdinPhone = ref('') |
|
|
|
|
|
|
|
const navto = (url: string, params = {}) => uni.$util.goToPage({ url, params }) |
|
|
|
|
|
|
|
const getList = uni.$util.throttle(() => { |
|
|
|
if (keyword.value === '') { |
|
|
|
uni.showToast({ title: '请输入姓名', icon: 'none' }) |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
uni.showLoading({ mask: true, title: '加载中...' }) |
|
|
|
|
|
|
|
listApi({ name: keyword.value }) |
|
|
|
.then((res) => { |
|
|
|
const { data } = res as { data: dateListtype[] } |
|
|
|
list.value = data || [] |
|
|
|
uni.hideLoading() |
|
|
|
}) |
|
|
|
.catch(() => uni.hideLoading()) |
|
|
|
}) |
|
|
|
|
|
|
|
const updateUserInfo = () => { |
|
|
|
userStore.bindUser(list.value[activeKey.value].id as number).then(() => { |
|
|
|
reset() |
|
|
|
uni.showToast({ title: '绑定成功', icon: 'none' }) |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
const reset = () => { |
|
|
|
activeKey.value = 0 |
|
|
|
keyword.value = '' |
|
|
|
list.value = [] |
|
|
|
} |
|
|
|
|
|
|
|
const showEdit = ref(false) |
|
|
|
|
|
|
|
const popFrom = reactive({ |
|
|
|
label: '', |
|
|
|
key: '', |
|
|
|
value: '' |
|
|
|
}) |
|
|
|
const openPopup = (key: string, label: string) => { |
|
|
|
popFrom.label = label |
|
|
|
popFrom.key = key |
|
|
|
popFrom.value = userStore.userInfo[key] |
|
|
|
showEdit.value = true |
|
|
|
} |
|
|
|
|
|
|
|
const save = () => { |
|
|
|
if (popFrom.value === '') { |
|
|
|
uni.showToast({ title: `请输入${popFrom.label}`, icon: 'none' }) |
|
|
|
return |
|
|
|
} |
|
|
|
|
|
|
|
uni.showLoading({ mask: true, title: '保存中...' }) |
|
|
|
|
|
|
|
updateApi({ [popFrom.key]: popFrom.value }, userStore.openId).then(() => { |
|
|
|
userStore.userInfo[popFrom.key] = popFrom.value |
|
|
|
uni.hideLoading() |
|
|
|
showEdit.value = false |
|
|
|
}) |
|
|
|
} |
|
|
|
|
|
|
|
// const navto = (url: string, params = {}) => uni.$util.goToPage({ url, params }); |
|
|
|
onShow(() => { |
|
|
|
reset() |
|
|
|
|
|
|
|
getAdminPhone().then((res) => { |
|
|
|
const { data } = res as { data: string } |
|
|
|
amdinPhone.value = data || '' |
|
|
|
}) |
|
|
|
}) |
|
|
|
</script> |
|
|
|
<template> |
|
|
|
<view class="userview"> |
|
|
|
<!-- 搜索信息 --> |
|
|
|
<block v-if="!isHandleUserInfo"> |
|
|
|
<block v-if="isHandleUserInfo"> |
|
|
|
<view class="userview-search box flex"> |
|
|
|
<view class="userview-search-label">姓名</view> |
|
|
|
<input class="flex1" type="text" placeholder="请输入您的姓名" v-model="keyword" placeholder-class="placeholder" /> |
|
|
|
<view class="userview-search-bts" @click="getList">搜索</view> |
|
|
|
<view class="userview-search-bts" @click.stop="getList">搜索</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<view class="userview-info box" :class="{ border: index === 0 }" v-for="(row, index) in 2" :key="index"> |
|
|
|
<block v-if="list.length > 0"> |
|
|
|
<view |
|
|
|
class="userview-info box" |
|
|
|
:class="{ active: activeKey === index }" |
|
|
|
v-for="(row, index) in list" |
|
|
|
:key="index" |
|
|
|
@click="activeKey = index" |
|
|
|
> |
|
|
|
<view class="flex-center-between userview-info-item"> |
|
|
|
<view class="userview-info-item-label">姓名</view> |
|
|
|
<view class="userview-info-item-content flex"> |
|
|
|
<text>陈思远</text> |
|
|
|
</view> |
|
|
|
<view class="userview-info-item-content flex">{{ row.name }}</view> |
|
|
|
</view> |
|
|
|
<view class="flex-center-between userview-info-item"> |
|
|
|
<view class="userview-info-item-label">电话</view> |
|
|
|
<view class="userview-info-item-content flex"> |
|
|
|
<text>138 8888 8888</text> |
|
|
|
</view> |
|
|
|
<view class="userview-info-item-content flex">{{ row.mobile }}</view> |
|
|
|
</view> |
|
|
|
<view class="flex-center-between userview-info-item"> |
|
|
|
<view class="userview-info-item-label">工作单位</view> |
|
|
|
<view class="userview-info-item-content flex"> |
|
|
|
<text>未来科技有限公司</text> |
|
|
|
</view> |
|
|
|
<view class="userview-info-item-content flex">{{ row.work_unit }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</block> |
|
|
|
<ex-empty v-show="list.length <= 0" /> |
|
|
|
<view class="flex-center-evenly"> |
|
|
|
<view class="bts plain">确认信息</view> |
|
|
|
<view class="bts">新建信息</view> |
|
|
|
<view class="bts plain" v-if="list.length > 0" @click.stop="updateUserInfo">确认信息</view> |
|
|
|
<view class="bts" @click="navto('pages/mine/add')">新建信息</view> |
|
|
|
</view> |
|
|
|
</block> |
|
|
|
|
|
|
|
@ -59,48 +130,48 @@ const getList = () => { |
|
|
|
<view class="flex-center-between userview-info-item"> |
|
|
|
<view class="userview-info-item-label">姓名</view> |
|
|
|
<view class="userview-info-item-content flex"> |
|
|
|
<text>陈思远</text> |
|
|
|
<text>{{ userStore.userInfo.name }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="flex-center-between userview-info-item"> |
|
|
|
<view class="userview-info-item-label">电话</view> |
|
|
|
<view class="userview-info-item-content flex"> |
|
|
|
<text>138 8888 8888</text> |
|
|
|
<text>{{ userStore.userInfo.mobile }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="flex-center-between userview-info-item"> |
|
|
|
<view class="userview-info-item-label">性别</view> |
|
|
|
<view class="userview-info-item-content flex"> |
|
|
|
<text>男</text> |
|
|
|
<u-icon name="edit-pen-fill" color="#2563EB" size="38rpx" /> |
|
|
|
<text>{{ userStore.userInfo.sex === 1 ? '男' : '女' }}</text> |
|
|
|
<u-icon @click.stop="openPopup('sex', '性别')" name="edit-pen-fill" color="#2563EB" size="38rpx" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="flex-center-between userview-info-item"> |
|
|
|
<view class="userview-info-item-label">民族</view> |
|
|
|
<view class="userview-info-item-content flex"> |
|
|
|
<text>汉族</text> |
|
|
|
<u-icon name="edit-pen-fill" color="#2563EB" size="38rpx" /> |
|
|
|
<text>{{ userStore.userInfo.nation }}</text> |
|
|
|
<u-icon @click.stop="openPopup('nation', '民族')" name="edit-pen-fill" color="#2563EB" size="38rpx" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="flex-center-between userview-info-item"> |
|
|
|
<view class="userview-info-item-label">年龄</view> |
|
|
|
<view class="userview-info-item-content flex"> |
|
|
|
<text>28</text> |
|
|
|
<u-icon name="edit-pen-fill" color="#2563EB" size="38rpx" /> |
|
|
|
<text>{{ userStore.userInfo.age }}</text> |
|
|
|
<u-icon @click.stop="openPopup('age', '年龄')" name="edit-pen-fill" color="#2563EB" size="38rpx" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="flex-center-between userview-info-item"> |
|
|
|
<view class="userview-info-item-label">工作单位</view> |
|
|
|
<view class="userview-info-item-content flex"> |
|
|
|
<text>未来科技有限公司</text> |
|
|
|
<u-icon name="edit-pen-fill" color="#2563EB" size="38rpx" /> |
|
|
|
<text>{{ userStore.userInfo.work_unit }}</text> |
|
|
|
<u-icon @click.stop="openPopup('work_unit', '工作单位')" name="edit-pen-fill" color="#2563EB" size="38rpx" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="flex-center-between userview-info-item"> |
|
|
|
<view class="userview-info-item-label">职位</view> |
|
|
|
<view class="userview-info-item-content flex"> |
|
|
|
<text>高级产品经理</text> |
|
|
|
<u-icon name="edit-pen-fill" color="#2563EB" size="38rpx" /> |
|
|
|
<text>{{ userStore.userInfo.position }}</text> |
|
|
|
<u-icon @click.stop="openPopup('position', '职位')" name="edit-pen-fill" color="#2563EB" size="38rpx" /> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -108,11 +179,23 @@ const getList = () => { |
|
|
|
<view>* 姓名和电话信息需要管理员修改</view> |
|
|
|
<view> |
|
|
|
<text>管理员电话:</text> |
|
|
|
<text class="phone">400-123-4567</text> |
|
|
|
<text class="phone">{{ amdinPhone }}</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="bts">确认信息</view> |
|
|
|
</block> |
|
|
|
|
|
|
|
<u-popup :show="showEdit" mode="center" @close="showEdit = false" :round="10"> |
|
|
|
<view class="popupView"> |
|
|
|
<view class="title">修改{{ popFrom.label }}</view> |
|
|
|
<u-input :placeholder="`请输入${popFrom.label}`" input-align="right" v-model="popFrom.value"> |
|
|
|
<template v-slot:prefix> |
|
|
|
<text style="color: #909399">{{ popFrom.label }}</text> |
|
|
|
</template> |
|
|
|
</u-input> |
|
|
|
|
|
|
|
<view class="bts" @click="save">确认信息</view> |
|
|
|
</view> |
|
|
|
</u-popup> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -120,10 +203,25 @@ const getList = () => { |
|
|
|
.userview { |
|
|
|
width: 100%; |
|
|
|
padding: 32rpx; |
|
|
|
min-height: calc(100vh - 94px); |
|
|
|
min-height: 100vh; |
|
|
|
box-sizing: border-box; |
|
|
|
background-color: #f9fafb; |
|
|
|
|
|
|
|
.popupView { |
|
|
|
width: 90vw; |
|
|
|
padding: 20rpx 40rpx 0; |
|
|
|
|
|
|
|
.title { |
|
|
|
font-size: 36rpx; |
|
|
|
font-weight: 500; |
|
|
|
margin-bottom: 40rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.bts { |
|
|
|
margin-top: 40rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.box { |
|
|
|
margin-bottom: 32rpx; |
|
|
|
border-radius: 24rpx; |
|
|
|
@ -153,7 +251,7 @@ const getList = () => { |
|
|
|
padding: 0 32rpx 32rpx; |
|
|
|
border: 1rpx solid #fff; |
|
|
|
|
|
|
|
&.border { |
|
|
|
&.active { |
|
|
|
border-color: #2563eb; |
|
|
|
} |
|
|
|
|
|
|
|
|