pages/minePage/index 个人中心页面完成

components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AuthInputItem: typeof import('./src/components/auth/AuthInputItem.vue')['default']
+    WdActionSheet: typeof import('wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue')['default']
     WdButton: typeof import('wot-design-uni/components/wd-button/wd-button.vue')['default']
     WdCheckbox: typeof import('wot-design-uni/components/wd-checkbox/wd-checkbox.vue')['default']
     WdConfigProvider: typeof import('wot-design-uni/components/wd-config-provider/wd-config-provider.vue')['default']

src/pages.json

@@ -22,7 +22,7 @@
       }
     },
     {
-      "path": "pages/profile/index",
+      "path": "pages/minePage/index",
       "style": {
         "navigationStyle": "custom"
       }
@@ -79,7 +79,7 @@
         "text": "资讯"
       },
       {
-        "pagePath": "pages/profile/index",
+        "pagePath": "pages/minePage/index",
         "iconPath": "static/images/tabbar/mine.png",
         "selectedIconPath": "static/images/tabbar/mineAct.png",
         "text": "我的"

src/pages/index/index.vue

@@ -7,7 +7,7 @@
         </template>
       </wd-navbar>
       <WorkbenchCard
-        :is-login="isLogin"
+        :is-login="isLoggedIn"
         :on-the-way="onTheWay"
         :wait-approve="waitApprove"
         @go-task="goTask"
@@ -49,7 +49,8 @@ import WorkbenchTaskSection from './components/WorkbenchTaskSection.vue'
 
 const userStore = useUserStore()
 
-const isLogin = computed(() => userStore.isLoggedIn)
+const isLoggedIn = computed(() => userStore.isLoggedIn)
+
 const waitApprove = computed(() => userStore.currentUserInfo?.waitApprove ?? 0)
 const onTheWay = computed(() => userStore.currentUserInfo?.onTheWay ?? 0)
 

src/pages/login/index.vue

@@ -104,7 +104,7 @@ const { title } = projectConfig
 const form = reactive({
   username: '15093284672',
   password: '284672',
-  code: '5657',
+  code: '1001',
 })
 
 const { errors, validate, validateField, clearFieldError } = useFormValidator(

src/pages/minePage/index.vue

@@ -0,0 +1,495 @@
+<template>
+  <view class="mine-page-page">
+    <view class="mine-page-header">
+      <wd-navbar placeholder :bordered="false" safeAreaInsetTop customClass="navbar">
+        <template #title>
+          <view class="navbar-title">我的</view>
+        </template>
+      </wd-navbar>
+
+      <view class="user-card">
+        <template v-if="!isLoggedIn">
+          <view class="user-card-guest" @click="navigateToLogin">
+            <image
+              class="user-card-avatar"
+              src="https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/default_avatar.png"
+            />
+            <view class="user-card-guest-text">点击登录</view>
+          </view>
+        </template>
+
+        <template v-else>
+          <view class="user-card-header" @click="handleCompanySelect">
+            <view class="user-card-company">
+              <text class="user-card-company-name">
+                {{ currentUserInfo?.deptName || '' }}
+              </text>
+              <image
+                class="user-card-company-arrow"
+                src="https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/qiehuan.png"
+              />
+            </view>
+          </view>
+
+          <view class="user-card-body">
+            <image
+              class="user-card-avatar"
+              :src="
+                currentUserInfo?.avatar ||
+                'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/default_avatar.png'
+              "
+            />
+
+            <view class="user-card-info">
+              <view class="user-card-name">
+                <text>
+                  {{ currentUserInfo?.realname }}({{
+                    currentUserInfo?.phone || currentUserInfo?.deptName
+                  }})
+                </text>
+              </view>
+
+              <view class="user-card-meta">
+                <text>{{ getRolesName(currentUserInfo?.roles) }}</text>
+              </view>
+            </view>
+          </view>
+        </template>
+      </view>
+    </view>
+    <view class="mine-page-content">
+      <view class="auth card">
+        <view class="auth-item">
+          <view class="auth-item-content">
+            <image
+              class="auth-item-icon"
+              src="https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/renzheng.png"
+              mode="aspectFit"
+            />
+            <view class="auth-item-text">
+              <view class="auth-item-title">认证服务</view>
+              <view class="auth-item-desc">签约前请先完成平台认证</view>
+            </view>
+          </view>
+          <view class="auth-item-action">
+            <text class="auth-item-action-text">去认证</text>
+            <wd-icon name="arrow-right" color="#3FA3F1" size="36rpx" />
+          </view>
+        </view>
+
+        <view class="auth-item auth-item-last">
+          <view class="auth-item-content">
+            <image class="auth-item-icon" mode="aspectFit" />
+            <view class="auth-item-text">
+              <view class="auth-item-title">签约结算渠道</view>
+              <view class="auth-item-desc">结算前请先完成渠道签约</view>
+            </view>
+          </view>
+
+          <view class="auth-item-action">
+            <text class="auth-item-action-text">去签约</text>
+            <wd-icon name="arrow-right" color="#3FA3F1" size="36rpx" />
+          </view>
+        </view>
+      </view>
+      <view class="card menu-list">
+        <view class="menu-item" v-for="item in menuList" :key="item.path">
+          <view class="menu-item-content">
+            <image class="menu-item-icon" :src="item.icon" mode="aspectFit" />
+            <view class="menu-item-text">{{ item.txt }}</view>
+          </view>
+
+          <view class="menu-item-arrow">
+            <wd-icon name="arrow-right" color="#333333" size="32rpx" />
+          </view>
+        </view>
+      </view>
+      <view class="card common-panel">
+        <view class="common-panel-title">常用功能</view>
+        <view class="common-grid">
+          <view class="common-grid-item" v-for="item in functionList" :key="item.key">
+            <image class="common-grid-icon" :src="item.icon" mode="aspectFit" />
+            <view class="common-grid-text">{{ item.txt }}</view>
+          </view>
+          <view class="common-grid-item common-grid-item-message">
+            <view class="common-grid-icon-wrap">
+              <image
+                class="common-grid-icon"
+                src="https://yy-cloud-oss-public.oss-cn-beijing.aliyuncs.com/image/message-icon.png"
+                mode="aspectFit"
+              />
+              <view class="common-grid-badge"></view>
+            </view>
+            <view class="common-grid-text">消息通知</view>
+          </view>
+          <view class="common-grid-item common-grid-item-osais">
+            <image
+              class="common-grid-icon"
+              src="https://yy-cloud-oss-public.oss-cn-beijing.aliyuncs.com/image/osais-logo.png"
+              mode="aspectFit"
+            />
+            <view class="common-grid-text">奥塞斯</view>
+          </view>
+        </view>
+      </view>
+      <view class="login-out" v-if="isLoggedIn" @click="handleLogoutClick">退出登录</view>
+    </view>
+    <!-- 切换企业 -->
+    <wd-action-sheet
+      title="选择企业"
+      v-model="handleCompanyShow"
+      :actions="companyList"
+      @close="handleCompanyShow = false"
+      @select="handleCompanyConfirm"
+      cancel-text="取消"
+    />
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { useUserStore } from '@/stores/modules/user'
+
+import { functionList, menuList, rolesList } from './mine.config.ts'
+
+const userStore = useUserStore()
+
+const isLoggedIn = computed(() => userStore.isLoggedIn)
+const currentUserInfo = computed(() => userStore.currentUserInfo)
+
+const isBlacklisted = computed(() => userStore.isBlacklisted)
+
+const navigateToLogin = () => {
+  uni.navigateTo({
+    url: '/pages/login/index',
+  })
+}
+
+const getRolesName = (roles: number[]) => {
+  const rile = roles?.[0] || 0
+  const roleList = rolesList.find((role) => role.value === rile)
+  return roleList?.name || ''
+}
+// 切换企业
+const companyList = ref<{ name: string; color: string }[]>([])
+const handleCompanyShow = ref(false)
+const handleCompanySelect = () => {
+  if (isBlacklisted.value) return
+  const userInfoList = userStore.userInfoList
+  const currentUserInfoIndex = userStore.currentUserInfoIndex || 0
+  const arr = userInfoList.map((info) => ({
+    name: info?.deptName,
+    color: '#333333',
+  }))
+
+  arr[currentUserInfoIndex].color = '#3FA3F1'
+  companyList.value = arr
+  handleCompanyShow.value = true
+}
+const handleCompanyConfirm = (curr: { item: { name: string; color: string }; index: number }) => {
+  const index = curr.index
+  if (index === userStore.currentUserInfoIndex) return
+  userStore.setCurrentUserInfoIndex(index)
+}
+
+const handleLogoutClick = () => {
+  uni.showModal({
+    title: '提示',
+    content: '是否退出登录',
+    success: function (res) {
+      if (res.confirm) {
+        userStore.logout()
+        uni.reLaunch({
+          url: '/pages/login/index',
+        })
+      }
+    },
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.mine-page-page {
+  display: flex;
+  flex-direction: column;
+  background: #f5f5f5;
+  min-height: 100vh;
+
+  .mine-page-header {
+    position: relative;
+    background-image: var(--workbench-bg);
+    background-size: 100% 100%;
+    height: 33vh;
+    width: 750rpx;
+
+    :deep(.navbar) {
+      background-color: transparent;
+    }
+    .navbar-title {
+      color: #fff;
+      font-weight: bold;
+    }
+
+    .user-card {
+      position: relative;
+
+      .user-card-guest {
+        display: flex;
+        align-items: center;
+        margin-top: 60rpx;
+        padding: 0 30rpx;
+        color: #fff;
+        font-size: 28rpx;
+      }
+
+      .user-card-guest-text {
+        line-height: 40rpx;
+      }
+
+      .user-card-header {
+        display: flex;
+        justify-content: center;
+      }
+
+      .user-card-company {
+        display: flex;
+        align-items: center;
+        color: #fff;
+      }
+
+      .user-card-company-name {
+        font-size: 22rpx;
+        line-height: 32rpx;
+      }
+
+      .user-card-company-arrow {
+        width: 24rpx;
+        height: 17rpx;
+        margin-left: 12rpx;
+        flex-shrink: 0;
+      }
+
+      .user-card-body {
+        display: flex;
+        align-items: center;
+        margin-top: 36rpx;
+        padding: 0 30rpx;
+      }
+
+      .user-card-avatar {
+        width: 120rpx;
+        height: 120rpx;
+        margin-right: 30rpx;
+        flex-shrink: 0;
+      }
+
+      .user-card-info {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        min-width: 0;
+      }
+
+      .user-card-name {
+        color: #fff;
+        font-size: 36rpx;
+        font-weight: 600;
+        line-height: 50rpx;
+      }
+
+      .user-card-meta {
+        color: #fff;
+        font-size: 22rpx;
+        font-weight: 500;
+        line-height: 36rpx;
+      }
+    }
+  }
+
+  .mine-page-content {
+    position: relative;
+    top: -100rpx;
+    .card {
+      width: 690rpx;
+      margin: 0 30rpx 16rpx;
+      padding: 24rpx 20rpx;
+      box-sizing: border-box;
+      border-radius: 16rpx;
+      background: #fff;
+    }
+
+    .auth {
+      min-height: 200rpx;
+
+      .auth-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 24rpx;
+      }
+
+      .auth-item-last {
+        margin-bottom: 0;
+      }
+
+      .auth-item-content {
+        display: flex;
+        align-items: center;
+      }
+
+      .auth-item-icon {
+        width: 72rpx;
+        height: 72rpx;
+        margin-right: 15rpx;
+        flex-shrink: 0;
+      }
+
+      .auth-item-text {
+        color: var(--font-color-333);
+      }
+
+      .auth-item-title {
+        color: var(--font-color-333);
+        font-size: 30rpx;
+        font-weight: 700;
+        line-height: 42rpx;
+      }
+
+      .auth-item-desc {
+        color: var(--font-color-333);
+        font-size: 20rpx;
+        font-weight: 400;
+        line-height: 28rpx;
+      }
+
+      .auth-item-action {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+      }
+
+      .auth-item-action-text {
+        margin-right: 6rpx;
+        color: var(--main-color);
+        font-size: 26rpx;
+        font-weight: 600;
+      }
+    }
+    .menu-list {
+      .menu-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 48rpx;
+        padding: 8rpx 0;
+        margin-bottom: 36rpx;
+      }
+
+      .menu-item:last-child {
+        margin-bottom: 0;
+      }
+
+      .menu-item-content {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        min-width: 0;
+      }
+
+      .menu-item-icon {
+        width: 40rpx;
+        height: 40rpx;
+        margin-right: 16rpx;
+        flex-shrink: 0;
+      }
+
+      .menu-item-text {
+        color: #000;
+        font-size: 30rpx;
+        line-height: 42rpx;
+        word-break: break-all;
+      }
+
+      .menu-item-arrow {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-left: 24rpx;
+        flex-shrink: 0;
+      }
+    }
+    .common-panel {
+      min-height: 240rpx;
+
+      .common-panel-title {
+        color: var(--font-color-333);
+        font-size: 28rpx;
+        font-weight: 500;
+        line-height: 40rpx;
+      }
+
+      .common-grid {
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 36rpx;
+      }
+
+      .common-grid-item {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 25%;
+        margin-bottom: 36rpx;
+      }
+
+      .common-grid-icon-wrap {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 56rpx;
+        height: 56rpx;
+      }
+
+      .common-grid-icon {
+        width: 56rpx;
+        height: 56rpx;
+        display: block;
+      }
+
+      .common-grid-text {
+        margin-top: 20rpx;
+        color: var(--font-color-333);
+        font-size: 24rpx;
+        font-weight: 400;
+        line-height: 34rpx;
+        text-align: center;
+      }
+
+      .common-grid-badge {
+        position: absolute;
+        top: -4rpx;
+        right: -8rpx;
+        width: 12rpx;
+        height: 12rpx;
+        border-radius: 50%;
+        background: #ff4d4f;
+      }
+    }
+
+    .login-out {
+      margin: 0 auto;
+      width: 690rpx;
+      margin-top: 16rpx;
+      background: #ffffff;
+      border-radius: 16rpx;
+      text-align: center;
+      line-height: 90rpx;
+      color: var(--font-color-333);
+      font-size: 32rpx;
+    }
+  }
+}
+</style>

src/pages/minePage/mine.config.ts.ts

@@ -0,0 +1,82 @@
+export const menuList = [
+  {
+    txt: '个人名片',
+    icon: 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/grmp.png',
+    path: 'id-card',
+  },
+  {
+    txt: '积分规则',
+    icon: 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/jfgz.png',
+    path: 'integral-rules',
+  },
+  {
+    txt: '积分包领取记录',
+    icon: 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/jfblqkl.png',
+    path: 'integral-history',
+  },
+  {
+    txt: '任务完成记录',
+    icon: 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/rwwcjl.png',
+    path: 'task-history',
+  },
+]
+
+export const functionList = [
+  {
+    key: 'policy',
+    txt: '政策协议',
+    icon: 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/zcxy.png',
+  },
+  {
+    key: 'feedback',
+    txt: '意见反馈',
+    icon: 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/yjfk.png',
+  },
+  {
+    key: 'service',
+    txt: '专属客服',
+    icon: 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/zskf.png',
+    action: 'service',
+  },
+  {
+    key: 'education',
+    txt: '合规教育',
+    icon: 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/hgjy1.png',
+    action: 'detail',
+  },
+  {
+    key: 'exam',
+    txt: '合规测评',
+    icon: 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/hgcp.jpg',
+    action: 'detail',
+  },
+  {
+    key: 'password',
+    txt: '修改密码',
+    icon: 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/xgmm.png',
+    action: 'detail',
+  },
+]
+
+export const rolesList = [
+  {
+    name: '全职学术信息沟通专员',
+    value: 5,
+  },
+  {
+    name: '兼职学术信息沟通专员',
+    value: 6,
+  },
+  {
+    name: '兼职CRC',
+    value: 10,
+  },
+  {
+    name: 'HCP',
+    value: 13,
+  },
+  {
+    name: '招商经理',
+    value: 31,
+  },
+]

src/pages/profile/index.vue

@@ -1,7 +0,0 @@
-<template>
-  <view>个人中心</view>
-</template>
-
-<script setup lang="ts"></script>
-
-<style lang="scss" scoped></style>

src/services/modules/common/index.ts

@@ -7,3 +7,6 @@ export const signAgreementApi = (data: SignAgreementRequest) => {
     loadingText: '签署中...',
   })
 }
+
+
+

src/services/modules/minePage/index.ts

@@ -0,0 +1,2 @@
+import http from '../../index'
+

src/stores/modules/user.ts

@@ -100,6 +100,10 @@ export const useUserStore = defineStore('user', {
         this.isBlacklisted = idCardNumberStatus || phoneNumberStatus
       }
     },
+    setCurrentUserInfoIndex(index: number) {
+      this.currentUserInfoIndex = index
+    },
+
     logout() {
       this.$reset()
     },