岳鹏龙 1 year ago
parent
commit
fafed9176b
  1. 7
      src/api/login.ts
  2. 46
      src/api/user.ts
  3. 16
      src/pages.json
  4. 6
      src/pages/login/login.vue
  5. 71
      src/pages/mine/add.vue
  6. 186
      src/pages/mine/index.vue
  7. 31
      src/store/user.ts

7
src/api/login.ts

@ -14,10 +14,9 @@ export function getMobile(data: { code: string; openid: string }) {
}) })
} }
export function getUserInfo(data: { mobile: string }) { export function getAdminPhone() {
return request.http({ return request.http({
url: '/api/member_mobile', url: '/api/admin_mobile',
method: 'GET', method: 'GET'
data
}) })
} }

46
src/api/user.ts

@ -1,9 +1,51 @@
import { request } from '@/utils/http' import { request } from '@/utils/http'
export function getUserList(data: { name: string }) { export interface listType {
name: string
age: number
sex: number
nation: string
mobile: string
position: string
work_unit: string
}
export interface dateListtype extends listType {
id: number
}
export function infoForOpenid(data: { openid: string }) {
return request.http({
url: '/api/member',
method: 'GET',
data
})
}
export function list(data: { name: string }) {
return request.http({ return request.http({
url: '/api/openid', url: '/api/member_name',
method: 'GET', method: 'GET',
data data
}) })
} }
export function update(data: { [n: string]: string }, openid: string) {
return request.http({
url: '/api/member_update',
data: Object.assign(data, { openid })
})
}
export function bind(data: { id: number; openid: string }) {
return request.http({
url: '/api/name_sub',
data
})
}
export function add(data: listType) {
return request.http({
url: '/api/member_add',
data
})
}

16
src/pages.json

@ -7,14 +7,6 @@
} }
}, },
"pages": [ "pages": [
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登录",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{ {
"path": "pages/votingElection/index", "path": "pages/votingElection/index",
"style": { "style": {
@ -75,6 +67,14 @@
"navigationBarTitleText": "个人信息", "navigationBarTitleText": "个人信息",
"enablePullDownRefresh": false "enablePullDownRefresh": false
} }
},
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登录",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
} }
], ],
"globalStyle": { "globalStyle": {

6
src/pages/login/login.vue

@ -40,9 +40,9 @@ const onGetPhoneNumber = debounce(async (e: phoneEvent) => {
} }
const { data: phone } = (await getMobile({ openid: userStore.openId, code: e.detail.code })) as { data: string } const { data: phone } = (await getMobile({ openid: userStore.openId, code: e.detail.code })) as { data: string }
userStore.userInfo.mobile = phone userStore.mobile = phone
userStore.getUserInfo({ mobile: phone }) userStore.getUserInfo()
onLoginSuccess() onLoginSuccess()
} catch (error) { } catch (error) {
@ -63,7 +63,7 @@ const onLoginSuccess = () => {
} }
onShow(() => { onShow(() => {
if (userStore.userInfo.mobile) { if (userStore.mobile) {
onLoginSuccess() onLoginSuccess()
} }
}) })

71
src/pages/mine/add.vue

@ -1,54 +1,88 @@
<script setup lang="ts"> <script setup lang="ts">
// import useUserStore from "@/store/user"; import useUserStore from '@/store/user'
// const userStore = useUserStore(); import { add as addAPi, type listType } from '@/api/user'
const userStore = useUserStore()
interface formListType extends listType {
openid: string
}
const formData = reactive<formListType>({
openid: userStore.openId,
name: '',
age: 0,
sex: 0,
nation: '',
mobile: userStore.mobile,
position: '',
work_unit: ''
})
const onSubmit = uni.$util.debounce(() => {
if (formData.name === '') {
uni.showToast({ title: '请输入姓名', icon: 'none' })
} else if (formData.mobile === '') {
uni.showToast({ title: '请输入手机号', icon: 'none' })
} else if (formData.work_unit === '') {
uni.showToast({ title: '请输入工作单位', icon: 'none' })
} else {
uni.showLoading({ title: '提交中...', mask: true })
addAPi(formData).then(() => {
uni.hideLoading()
uni.switchTab({ url: '/pages/mine/index' })
})
}
})
</script> </script>
<template> <template>
<view class="userview"> <view class="userview">
<view class="userview-info box"> <view class="userview-info box">
<view class="flex-center-between userview-info-item"> <view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">姓名</view> <view class="userview-info-item-label required">姓名</view>
<view class="userview-info-item-content flex"> <view class="userview-info-item-content flex">
<input placeholder="请输入" style="text-align: right" /> <input placeholder="请输入" v-model="formData.name" style="text-align: right" />
</view> </view>
</view> </view>
<view class="flex-center-between userview-info-item"> <view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">电话</view> <view class="userview-info-item-label required">电话</view>
<view class="userview-info-item-content flex"> <view class="userview-info-item-content flex">
<input placeholder="请输入" style="text-align: right" /> <input placeholder="请输入" v-model="formData.mobile" style="text-align: right" />
</view> </view>
</view> </view>
<view class="flex-center-between userview-info-item"> <view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">性别</view> <view class="userview-info-item-label">性别</view>
<view class="userview-info-item-content flex"> <view class="userview-info-item-content flex">
<input placeholder="请输入" style="text-align: right" /> <input placeholder="请输入" v-model="formData.sex" style="text-align: right" />
</view> </view>
</view> </view>
<view class="flex-center-between userview-info-item"> <view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">民族</view> <view class="userview-info-item-label">民族</view>
<view class="userview-info-item-content flex"> <view class="userview-info-item-content flex">
<input placeholder="请输入" style="text-align: right" /> <input placeholder="请输入" v-model="formData.nation" style="text-align: right" />
</view> </view>
</view> </view>
<view class="flex-center-between userview-info-item"> <view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">年龄</view> <view class="userview-info-item-label">年龄</view>
<view class="userview-info-item-content flex"> <view class="userview-info-item-content flex">
<input placeholder="请输入" style="text-align: right" /> <input placeholder="请输入" v-model="formData.age" style="text-align: right" />
</view> </view>
</view> </view>
<view class="flex-center-between userview-info-item"> <view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">工作单位</view> <view class="userview-info-item-label required">工作单位</view>
<view class="userview-info-item-content flex"> <view class="userview-info-item-content flex">
<input placeholder="请输入" style="text-align: right" /> <input placeholder="请输入" v-model="formData.work_unit" style="text-align: right" />
</view> </view>
</view> </view>
<view class="flex-center-between userview-info-item"> <view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">职位</view> <view class="userview-info-item-label">职位</view>
<view class="userview-info-item-content flex"> <view class="userview-info-item-content flex">
<input placeholder="请输入" style="text-align: right" /> <input placeholder="请输入" v-model="formData.position" style="text-align: right" />
</view> </view>
</view> </view>
</view> </view>
<view class="bts">确认信息</view> <view class="bts" @click="onSubmit">确认信息</view>
</view> </view>
</template> </template>
@ -84,6 +118,17 @@
&-label { &-label {
color: #4b5563; color: #4b5563;
position: relative;
&.required::before {
content: '*';
color: #f56c6c;
margin-right: 4px;
position: absolute;
top: 0;
bottom: 0;
left: -16rpx;
}
} }
&-content { &-content {

186
src/pages/mine/index.vue

@ -1,55 +1,126 @@
<script setup lang="ts"> <script setup lang="ts">
import useUserStore from '@/store/user' 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 userStore = useUserStore()
const isHandleUserInfo = computed(() => userStore.userInfo.name === '') const isHandleUserInfo = computed(() => Object.keys(userStore.userInfo).length === 0)
const keyword = ref('') const keyword = ref('')
const list = ref<any[]>([])
const getList = () => { const list = ref<dateListtype[]>([])
getUserList({ name: keyword.value }).then((res) => {
const { data } = res as { data: any[] } const activeKey = ref(0)
list.value = data || []
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> </script>
<template> <template>
<view class="userview"> <view class="userview">
<!-- 搜索信息 --> <!-- 搜索信息 -->
<block v-if="!isHandleUserInfo"> <block v-if="isHandleUserInfo">
<view class="userview-search box flex"> <view class="userview-search box flex">
<view class="userview-search-label">姓名</view> <view class="userview-search-label">姓名</view>
<input class="flex1" type="text" placeholder="请输入您的姓名" v-model="keyword" placeholder-class="placeholder" /> <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>
<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="flex-center-between userview-info-item"> <view
<view class="userview-info-item-label">姓名</view> class="userview-info box"
<view class="userview-info-item-content flex"> :class="{ active: activeKey === index }"
<text>陈思远</text> 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">{{ row.name }}</view>
</view> </view>
</view> <view class="flex-center-between userview-info-item">
<view class="flex-center-between userview-info-item"> <view class="userview-info-item-label">电话</view>
<view class="userview-info-item-label">电话</view> <view class="userview-info-item-content flex">{{ row.mobile }}</view>
<view class="userview-info-item-content flex">
<text>138 8888 8888</text>
</view> </view>
</view> <view class="flex-center-between userview-info-item">
<view class="flex-center-between userview-info-item"> <view class="userview-info-item-label">工作单位</view>
<view class="userview-info-item-label">工作单位</view> <view class="userview-info-item-content flex">{{ row.work_unit }}</view>
<view class="userview-info-item-content flex">
<text>未来科技有限公司</text>
</view> </view>
</view> </view>
</view> </block>
<ex-empty v-show="list.length <= 0" />
<view class="flex-center-evenly"> <view class="flex-center-evenly">
<view class="bts plain">确认信息</view> <view class="bts plain" v-if="list.length > 0" @click.stop="updateUserInfo">确认信息</view>
<view class="bts">新建信息</view> <view class="bts" @click="navto('pages/mine/add')">新建信息</view>
</view> </view>
</block> </block>
@ -59,48 +130,48 @@ const getList = () => {
<view class="flex-center-between userview-info-item"> <view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">姓名</view> <view class="userview-info-item-label">姓名</view>
<view class="userview-info-item-content flex"> <view class="userview-info-item-content flex">
<text>陈思远</text> <text>{{ userStore.userInfo.name }}</text>
</view> </view>
</view> </view>
<view class="flex-center-between userview-info-item"> <view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">电话</view> <view class="userview-info-item-label">电话</view>
<view class="userview-info-item-content flex"> <view class="userview-info-item-content flex">
<text>138 8888 8888</text> <text>{{ userStore.userInfo.mobile }}</text>
</view> </view>
</view> </view>
<view class="flex-center-between userview-info-item"> <view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">性别</view> <view class="userview-info-item-label">性别</view>
<view class="userview-info-item-content flex"> <view class="userview-info-item-content flex">
<text></text> <text>{{ userStore.userInfo.sex === 1 ? '' : '女' }}</text>
<u-icon name="edit-pen-fill" color="#2563EB" size="38rpx" /> <u-icon @click.stop="openPopup('sex', '性别')" name="edit-pen-fill" color="#2563EB" size="38rpx" />
</view> </view>
</view> </view>
<view class="flex-center-between userview-info-item"> <view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">民族</view> <view class="userview-info-item-label">民族</view>
<view class="userview-info-item-content flex"> <view class="userview-info-item-content flex">
<text>汉族</text> <text>{{ userStore.userInfo.nation }}</text>
<u-icon name="edit-pen-fill" color="#2563EB" size="38rpx" /> <u-icon @click.stop="openPopup('nation', '民族')" name="edit-pen-fill" color="#2563EB" size="38rpx" />
</view> </view>
</view> </view>
<view class="flex-center-between userview-info-item"> <view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">年龄</view> <view class="userview-info-item-label">年龄</view>
<view class="userview-info-item-content flex"> <view class="userview-info-item-content flex">
<text>28</text> <text>{{ userStore.userInfo.age }}</text>
<u-icon name="edit-pen-fill" color="#2563EB" size="38rpx" /> <u-icon @click.stop="openPopup('age', '年龄')" name="edit-pen-fill" color="#2563EB" size="38rpx" />
</view> </view>
</view> </view>
<view class="flex-center-between userview-info-item"> <view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">工作单位</view> <view class="userview-info-item-label">工作单位</view>
<view class="userview-info-item-content flex"> <view class="userview-info-item-content flex">
<text>未来科技有限公司</text> <text>{{ userStore.userInfo.work_unit }}</text>
<u-icon name="edit-pen-fill" color="#2563EB" size="38rpx" /> <u-icon @click.stop="openPopup('work_unit', '工作单位')" name="edit-pen-fill" color="#2563EB" size="38rpx" />
</view> </view>
</view> </view>
<view class="flex-center-between userview-info-item"> <view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">职位</view> <view class="userview-info-item-label">职位</view>
<view class="userview-info-item-content flex"> <view class="userview-info-item-content flex">
<text>高级产品经理</text> <text>{{ userStore.userInfo.position }}</text>
<u-icon name="edit-pen-fill" color="#2563EB" size="38rpx" /> <u-icon @click.stop="openPopup('position', '职位')" name="edit-pen-fill" color="#2563EB" size="38rpx" />
</view> </view>
</view> </view>
</view> </view>
@ -108,11 +179,23 @@ const getList = () => {
<view>* 姓名和电话信息需要管理员修改</view> <view>* 姓名和电话信息需要管理员修改</view>
<view> <view>
<text>管理员电话</text> <text>管理员电话</text>
<text class="phone">400-123-4567</text> <text class="phone">{{ amdinPhone }}</text>
</view> </view>
</view> </view>
<view class="bts">确认信息</view>
</block> </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> </view>
</template> </template>
@ -120,10 +203,25 @@ const getList = () => {
.userview { .userview {
width: 100%; width: 100%;
padding: 32rpx; padding: 32rpx;
min-height: calc(100vh - 94px); min-height: 100vh;
box-sizing: border-box; box-sizing: border-box;
background-color: #f9fafb; 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 { .box {
margin-bottom: 32rpx; margin-bottom: 32rpx;
border-radius: 24rpx; border-radius: 24rpx;
@ -153,7 +251,7 @@ const getList = () => {
padding: 0 32rpx 32rpx; padding: 0 32rpx 32rpx;
border: 1rpx solid #fff; border: 1rpx solid #fff;
&.border { &.active {
border-color: #2563eb; border-color: #2563eb;
} }

31
src/store/user.ts

@ -1,7 +1,8 @@
// 定义组合式API仓库 // 定义组合式API仓库
import { defineStore } from 'pinia' import { defineStore } from 'pinia'
import { getPrefixName } from '@/config' import { getPrefixName } from '@/config'
import { getOpenid, getUserInfo as getUserInfoApi } from '@/api/login' import { getOpenid } from '@/api/login'
import { infoForOpenid, bind as bindApi } from '@/api/user'
interface userInfoStoreInt { interface userInfoStoreInt {
[n: string]: any [n: string]: any
@ -10,11 +11,8 @@ export default defineStore(
getPrefixName('user'), getPrefixName('user'),
() => { () => {
const openId = ref('') const openId = ref('')
const userInfo = ref<userInfoStoreInt>({ const mobile = ref('')
mobile: '' const userInfo = ref<userInfoStoreInt>({})
})
const checkLogin = computed(() => openId.value !== '')
function getopenid(params: { code: string }) { function getopenid(params: { code: string }) {
return new Promise<any>((resolve, reject) => { return new Promise<any>((resolve, reject) => {
@ -32,13 +30,13 @@ export default defineStore(
}) })
} }
function getUserInfo(params: { mobile: string }) { function getUserInfo() {
return new Promise<any>((resolve, reject) => { return new Promise<any>((resolve, reject) => {
getUserInfoApi(params) infoForOpenid({ openid: openId.value })
.then((res) => { .then((res) => {
const { data } = res as { data: userInfoStoreInt } const { data } = res as { data: userInfoStoreInt }
userInfo.value = Object.assign(userInfo.value, data) userInfo.value = data
resolve({ code: 1, data, message: 'SUCCESS' }) resolve({ code: 1, data, message: 'SUCCESS' })
}) })
@ -48,6 +46,18 @@ export default defineStore(
}) })
} }
function bindUser(id: number) {
return new Promise<any>((resolve, reject) => {
bindApi({ id, openid: openId.value })
.then(() => {
resolve({ code: 1, message: 'SUCCESS' })
})
.catch((err) => {
reject(err)
})
})
}
function logOut() { function logOut() {
userInfo.value = {} userInfo.value = {}
uni.clearStorageSync() uni.clearStorageSync()
@ -64,9 +74,10 @@ export default defineStore(
return { return {
openId, openId,
mobile,
userInfo, userInfo,
checkLogin,
getopenid, getopenid,
bindUser,
getUserInfo, getUserInfo,
logOut logOut
} }

Loading…
Cancel
Save