From f32a5307573c99dc386dd42ce1bba60782531f73 Mon Sep 17 00:00:00 2001
From: Hx <2294602187@qq.com>
Date: Fri, 28 Mar 2025 17:55:19 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E4=BF=A1=E6=81=AF+=E7=99=BB?=
 =?UTF-8?q?=E5=BD=95=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/login.ts          |   7 +-
 src/api/user.ts           |  46 +++++++++-
 src/pages.json            |  16 ++--
 src/pages/login/login.vue |   6 +-
 src/pages/mine/add.vue    |  71 ++++++++++++---
 src/pages/mine/index.vue  | 186 +++++++++++++++++++++++++++++---------
 src/store/user.ts         |  31 +++++--
 7 files changed, 279 insertions(+), 84 deletions(-)

diff --git a/src/api/login.ts b/src/api/login.ts
index e1294d9..92c221b 100644
--- a/src/api/login.ts
+++ b/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'
     })
 }
diff --git a/src/api/user.ts b/src/api/user.ts
index d153bf4..d348453 100644
--- a/src/api/user.ts
+++ b/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
+    })
+}
diff --git a/src/pages.json b/src/pages.json
index 8ba162d..8156b95 100644
--- a/src/pages.json
+++ b/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": {
diff --git a/src/pages/login/login.vue b/src/pages/login/login.vue
index e19b06b..2577394 100644
--- a/src/pages/login/login.vue
+++ b/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()
     }
 })
diff --git a/src/pages/mine/add.vue b/src/pages/mine/add.vue
index 6d9e220..fc58bd7 100644
--- a/src/pages/mine/add.vue
+++ b/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 {
diff --git a/src/pages/mine/index.vue b/src/pages/mine/index.vue
index e6870f6..aa55fb2 100644
--- a/src/pages/mine/index.vue
+++ b/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[] }
-        list.value = data || []
+
+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">
-                <view class="flex-center-between userview-info-item">
-                    <view class="userview-info-item-label">姓名</view>
-                    <view class="userview-info-item-content flex">
-                        <text>陈思远</text>
+            <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">{{ row.name }}</view>
                     </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 class="flex-center-between userview-info-item">
+                        <view class="userview-info-item-label">电话</view>
+                        <view class="userview-info-item-content flex">{{ row.mobile }}</view>
                     </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 class="flex-center-between userview-info-item">
+                        <view class="userview-info-item-label">工作单位</view>
+                        <view class="userview-info-item-content flex">{{ row.work_unit }}</view>
                     </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;
         }
 
diff --git a/src/store/user.ts b/src/store/user.ts
index 26c2c86..7aa721a 100644
--- a/src/store/user.ts
+++ b/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
         }