岳鹏龙 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. 172
      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({
url: '/api/member_mobile',
method: 'GET',
data
url: '/api/admin_mobile',
method: 'GET'
})
}

46
src/api/user.ts

@ -1,9 +1,51 @@
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({
url: '/api/openid',
url: '/api/member_name',
method: 'GET',
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": [
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登录",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},
{
"path": "pages/votingElection/index",
"style": {
@ -75,6 +67,14 @@
"navigationBarTitleText": "个人信息",
"enablePullDownRefresh": false
}
},
{
"path": "pages/login/login",
"style": {
"navigationBarTitleText": "登录",
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
}
],
"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 }
userStore.userInfo.mobile = phone
userStore.mobile = phone
userStore.getUserInfo({ mobile: phone })
userStore.getUserInfo()
onLoginSuccess()
} catch (error) {
@ -63,7 +63,7 @@ const onLoginSuccess = () => {
}
onShow(() => {
if (userStore.userInfo.mobile) {
if (userStore.mobile) {
onLoginSuccess()
}
})

71
src/pages/mine/add.vue

@ -1,54 +1,88 @@
<script setup lang="ts">
// import useUserStore from "@/store/user";
// const userStore = useUserStore();
import useUserStore from '@/store/user'
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>
<template>
<view class="userview">
<view class="userview-info box">
<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">
<input placeholder="请输入" style="text-align: right" />
<input placeholder="请输入" v-model="formData.name" style="text-align: right" />
</view>
</view>
<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">
<input placeholder="请输入" style="text-align: right" />
<input placeholder="请输入" v-model="formData.mobile" style="text-align: right" />
</view>
</view>
<view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">性别</view>
<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 class="flex-center-between userview-info-item">
<view class="userview-info-item-label">民族</view>
<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 class="flex-center-between userview-info-item">
<view class="userview-info-item-label">年龄</view>
<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 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">
<input placeholder="请输入" style="text-align: right" />
<input placeholder="请输入" v-model="formData.work_unit" style="text-align: right" />
</view>
</view>
<view class="flex-center-between userview-info-item">
<view class="userview-info-item-label">职位</view>
<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 class="bts">确认信息</view>
<view class="bts" @click="onSubmit">确认信息</view>
</view>
</template>
@ -84,6 +118,17 @@
&-label {
color: #4b5563;
position: relative;
&.required::before {
content: '*';
color: #f56c6c;
margin-right: 4px;
position: absolute;
top: 0;
bottom: 0;
left: -16rpx;
}
}
&-content {

172
src/pages/mine/index.vue

@ -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;
}

31
src/store/user.ts

@ -1,7 +1,8 @@
// 定义组合式API仓库
import { defineStore } from 'pinia'
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 {
[n: string]: any
@ -10,11 +11,8 @@ export default defineStore(
getPrefixName('user'),
() => {
const openId = ref('')
const userInfo = ref<userInfoStoreInt>({
mobile: ''
})
const checkLogin = computed(() => openId.value !== '')
const mobile = ref('')
const userInfo = ref<userInfoStoreInt>({})
function getopenid(params: { code: string }) {
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) => {
getUserInfoApi(params)
infoForOpenid({ openid: openId.value })
.then((res) => {
const { data } = res as { data: userInfoStoreInt }
userInfo.value = Object.assign(userInfo.value, data)
userInfo.value = data
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() {
userInfo.value = {}
uni.clearStorageSync()
@ -64,9 +74,10 @@ export default defineStore(
return {
openId,
mobile,
userInfo,
checkLogin,
getopenid,
bindUser,
getUserInfo,
logOut
}

Loading…
Cancel
Save