Procházet zdrojové kódy

首页未登录状态ui 完成

yuanmingze před 8 měsíci
rodič
revize
93fa93ea75

+ 1 - 0
.env.development

@@ -1,4 +1,5 @@
 VITE_MODE=development
 VITE_APP_TYPE=dev
+VITE_PROJECT_TITLE=要易小助手
 VITE_BASE_API=https://preapi.yaoyi.net
 VITE_WX_APPID=wxd03398e1bff2b241

+ 1 - 0
.env.pre

@@ -1,4 +1,5 @@
 VITE_MODE=production_pre
 VITE_APP_TYPE=prod
+VITE_PROJECT_TITLE=要易小助手
 VITE_BASE_API=https://preapi.yaoyi.net
 VITE_WX_APPID=wxd03398e1bff2b241

+ 1 - 0
.env.production_LUOXIN

@@ -1,4 +1,5 @@
 VITE_MODE=production_luoxin
 VITE_APP_TYPE=prod
+VITE_PROJECT_TITLE=要易小助手
 VITE_BASE_API=https://luoxin.yaoyi.net
 VITE_WX_APPID=wx2a5a7f417981f250

+ 1 - 0
.env.text_DEMO

@@ -1,4 +1,5 @@
 VITE_MODE=production_demo
 VITE_APP_TYPE=prod
+VITE_PROJECT_TITLE=要易体验小助手
 VITE_BASE_API=https://demoapi.yaoyi.net
 VITE_WX_APPID=wx956bb32e73073426

+ 2 - 0
components.d.ts

@@ -11,5 +11,7 @@ declare module 'vue' {
     WdConfigProvider: typeof import('wot-design-uni/components/wd-config-provider/wd-config-provider.vue')['default']
     WdIcon: typeof import('wot-design-uni/components/wd-icon/wd-icon.vue')['default']
     WdNavbar: typeof import('wot-design-uni/components/wd-navbar/wd-navbar.vue')['default']
+    WdNoticeBar: typeof import('wot-design-uni/components/wd-notice-bar/wd-notice-bar.vue')['default']
+    WdSearch: typeof import('wot-design-uni/components/wd-search/wd-search.vue')['default']
   }
 }

+ 1 - 1
src/components/auth/AuthInputItem.vue

@@ -135,7 +135,7 @@ const togglePassword = () => {
   display: flex;
   flex-direction: column;
   padding: 20rpx 0;
-  box-sizing: border-box;
+
   border-bottom: 1rpx solid #e4e7ed;
   position: relative;
 

+ 40 - 1
src/pages.json

@@ -11,7 +11,20 @@
     {
       "path": "pages/index/index",
       "style": {
-        "navigationBarTitleText": "uni-app"
+        "navigationStyle": "custom"
+      }
+    },
+
+    {
+      "path": "pages/news/index",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/profile/index",
+      "style": {
+        "navigationStyle": "custom"
       }
     },
     {
@@ -32,5 +45,31 @@
     "navigationBarTitleText": "uni-app",
     "navigationBarBackgroundColor": "#F8F8F8",
     "backgroundColor": "#F8F8F8"
+  },
+  "tabBar": {
+    "color": "#B5B5B5",
+    "selectedColor": "#3fa3f1",
+    "borderStyle": "black",
+    "backgroundColor": "#ffffff",
+    "list": [
+      {
+        "pagePath": "pages/index/index",
+        "iconPath": "static/images/tabbar/work.png",
+        "selectedIconPath": "static/images/tabbar/workAct.png",
+        "text": "工作台"
+      },
+      {
+        "pagePath": "pages/news/index",
+        "iconPath": "static/images/tabbar/news.png",
+        "selectedIconPath": "static/images/tabbar/newsAct.png",
+        "text": "资讯"
+      },
+      {
+        "pagePath": "pages/profile/index",
+        "iconPath": "static/images/tabbar/mine.png",
+        "selectedIconPath": "static/images/tabbar/mineAct.png",
+        "text": "我的"
+      }
+    ]
   }
 }

+ 205 - 0
src/pages/index/components/WorkbenchCard.vue

@@ -0,0 +1,205 @@
+<template>
+  <view class="workbench-card">
+    <view class="workbench-card-header">
+      <view class="workbench-card-title">
+        <view class="workbench-card-title-main">众包广场</view>
+        <view class="workbench-card-title-desc">在众包广场领取任务包</view>
+      </view>
+
+      <view class="workbench-card-action">
+        <view class="workbench-card-action-button" @click="handleGoTask"> 去领包 </view>
+      </view>
+    </view>
+
+    <view class="workbench-card-summary">
+      <view class="workbench-card-summary-group" @click="handleOpenHistory">
+        <view class="workbench-card-summary-value">我的任务包</view>
+        <view class="workbench-card-summary-link">领包记录</view>
+      </view>
+
+      <view class="workbench-card-summary-stat" @click="handleOpenOnTheWay">
+        <view
+          class="workbench-card-summary-value"
+          :class="{ 'workbench-card-summary-value-active': isLogin }"
+        >
+          {{ isLogin ? onTheWay : '-' }}
+        </view>
+        <view class="workbench-card-summary-label">进行中</view>
+      </view>
+
+      <view class="workbench-card-summary-stat" @click="handleOpenWaitApprove">
+        <view
+          class="workbench-card-summary-value"
+          :class="{ 'workbench-card-summary-value-active': isLogin }"
+        >
+          {{ isLogin ? waitApprove : '-' }}
+        </view>
+        <view class="workbench-card-summary-label">待审批</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+/**
+ * WorkbenchCard
+ * - 只负责 UI 展示与抛出语义事件
+ * - 不负责路由、不负责业务判断
+ */
+
+type StatusType = 'on-the-way' | 'wait-approve'
+
+const props = defineProps<{
+  /** 是否登录(必填) */
+  isLogin: boolean
+  /** 进行中数量(展示值) */
+  onTheWay: number | string
+  /** 待审批数量(展示值) */
+  waitApprove: number | string
+}>()
+
+const emit = defineEmits<{
+  /** 去领包 */
+  (e: 'go-task'): void
+  /** 领包记录 */
+  (e: 'open-history'): void
+  /** 同一页面不同参数:状态入口 */
+  (e: 'open-status', type: StatusType): void
+}>()
+
+function handleGoTask(): void {
+  emit('go-task')
+}
+
+function handleOpenHistory(): void {
+  emit('open-history')
+}
+
+function handleOpenOnTheWay(): void {
+  emit('open-status', 'on-the-way')
+}
+
+function handleOpenWaitApprove(): void {
+  emit('open-status', 'wait-approve')
+}
+
+const { isLogin, onTheWay, waitApprove } = props
+</script>
+
+<style lang="scss" scoped>
+.workbench-card {
+  width: 700rpx;
+  margin: 36rpx auto 0;
+  min-height: 280rpx;
+  background-image: url(https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/home_header_bg.png);
+  border-radius: 16rpx;
+  background-size: 100% 100%;
+  box-shadow: 0 8rpx 16rpx rgba(95, 163, 230, 0.19);
+  padding: 30rpx;
+  .workbench-card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .workbench-card-title {
+      .workbench-card-title-main {
+        font-size: 36rpx;
+        font-weight: 600;
+        line-height: 50rpx;
+        color: #000;
+      }
+      .workbench-card-title-desc {
+        font-weight: 400;
+        line-height: 34rpx;
+        color: var(--font-color-999);
+        font-size: 24rpx;
+      }
+    }
+    .workbench-card-action {
+      display: flex;
+      align-items: center;
+      .workbench-card-action-button {
+        height: 60rpx;
+        line-height: 60rpx;
+        text-align: center;
+        background-color: var(--main-color);
+        box-shadow: 0px 4rpx 4rpx rgba(0, 0, 0, 0.05);
+        width: 160rpx;
+        border-radius: 200rpx;
+        color: #fff;
+        font-size: 30rpx;
+      }
+      .workbench-card-action-button::after {
+        content: '>';
+        margin-left: 8rpx;
+        font-weight: 600;
+      }
+    }
+  }
+
+  .workbench-card-summary {
+    margin: 20rpx 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    width: 100%;
+    height: 128rpx;
+    padding: 20rpx 30rpx;
+
+    background-color: #ffffff;
+    border-radius: 24rpx;
+    border: 2rpx solid #e7f2ff;
+
+    /* 左侧:任务包入口 */
+    .workbench-card-summary-group {
+      min-width: 160rpx;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      .workbench-card-summary-value {
+        font-size: 32rpx;
+        font-weight: 600;
+        line-height: 45rpx;
+        color: var(--font-color-333);
+      }
+
+      .workbench-card-summary-link {
+        margin-top: 6rpx;
+        font-size: 24rpx;
+        line-height: 34rpx;
+        color: var(--font-color-999);
+      }
+    }
+
+    /* 中 / 右:状态项 */
+    .workbench-card-summary-stat {
+      width: 100rpx;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+
+      .workbench-card-summary-value {
+        font-size: 32rpx;
+        line-height: 45rpx;
+        color: var(--font-color-999);
+      }
+
+      .workbench-card-summary-value-active {
+        font-size: 40rpx;
+        font-weight: 600;
+        color: var(--main-color);
+      }
+
+      .workbench-card-summary-label {
+        margin-top: 6rpx;
+        font-size: 24rpx;
+        line-height: 34rpx;
+        color: var(--font-color-666);
+      }
+    }
+  }
+}
+</style>

+ 87 - 0
src/pages/index/components/WorkbenchTaskSection.vue

@@ -0,0 +1,87 @@
+<template>
+  <view class="workbench-task-section">
+    <view class="workbench-task-section-header">
+      <view class="workbench-task-section-title">任务实施</view>
+      <view class="workbench-task-section-action">
+        <wd-icon name="photo" color="#fff" size="40rpx"></wd-icon>
+        <text>拍照留存</text>
+      </view>
+    </view>
+    <view class="workbench-task-list">
+      <view
+        class="workbench-task-item"
+        v-for="item in currentTaskList"
+        :key="item.backgroundImage"
+        :style="{
+          backgroundImage: 'url(' + item.backgroundImage + ')',
+          color: item.color,
+        }"
+      >
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { DEFAULT_WORKBENCH_TASKS, INVESTMENT_MANAGER_TASKS } from '../taskList/index.ts'
+
+const userRole = computed(() => {
+  // return store.user.role
+  return 'default' // or 'investment-manager'
+})
+
+const currentTaskList = computed(() => {
+  if (userRole.value === 'investment-manager') {
+    return INVESTMENT_MANAGER_TASKS
+  }
+  return DEFAULT_WORKBENCH_TASKS
+})
+</script>
+
+<style lang="scss" scoped>
+.workbench-task-section {
+  padding: 0 30rpx;
+  margin-top: 30rpx;
+
+  .workbench-task-section-header {
+    height: 80rpx;
+    margin-bottom: 30rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .workbench-task-section-title {
+      font-size: 36rpx;
+      font-weight: 600;
+      color: var(--font-color-333);
+    }
+    .workbench-task-section-action {
+      width: 185rpx;
+      height: 60rpx;
+
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background-color: var(--main-color);
+      border-radius: 30rpx;
+      padding: 10rpx 20rpx;
+      font-size: 24rpx;
+      text {
+        color: #fff;
+      }
+    }
+  }
+  .workbench-task-list {
+    display: flex;
+    justify-content: space-between;
+    flex-flow: row wrap;
+    .workbench-task-item {
+      width: 328rpx;
+      height: 224rpx;
+      background-size: 100% 100%;
+      margin-bottom: 30rpx;
+    }
+  }
+}
+</style>

+ 66 - 20
src/pages/index/index.vue

@@ -1,29 +1,75 @@
 <template>
-  <view class="content"></view>
+  <view class="page-workbench">
+    <view class="workbench-header">
+      <wd-navbar fixed placeholder :bordered="false" safeAreaInsetTop customClass="navbar">
+        <template #title>
+          <view class="navbar-title"> 要易小助手</view>
+        </template>
+      </wd-navbar>
+      <WorkbenchCard
+        :is-login="isLogin"
+        :on-the-way="onTheWay"
+        :wait-approve="waitApprove"
+        @go-task="goTask"
+        @open-history="taskHistory"
+        @open-status="handleOpenStatus"
+      />
+    </view>
+    <view class="workbench-notice">
+      <wd-notice-bar
+        text="任务包即将完成时,请不要做积分较高的任务,避免浪费积分哦~"
+        prefix="warn-bold"
+        type="info "
+        color="#f90"
+        background-color="#fdf6ec "
+      />
+    </view>
+    <WorkbenchTaskSection />
+  </view>
 </template>
 
 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { storeToRefs } from 'pinia'
+import { computed, ref } from 'vue'
 
-import { useUserStore } from '@/stores/modules/user'
+import WorkbenchCard from './components/WorkbenchCard.vue'
+import WorkbenchTaskSection from './components/WorkbenchTaskSection.vue'
 
-const userStore = useUserStore()
-const { currentUserInfo } = storeToRefs(userStore)
+const isLogin = ref(false)
+const onTheWay = ref(5)
+const waitApprove = ref(2)
 
-onMounted(() => {
-  if (currentUserInfo.value) {
-    // 已登录 → 进入首页
-    uni.reLaunch({
-      url: '/pages/index/index',
-    })
-  } else {
-    // 未登录 → 去登录页
-    uni.reLaunch({
-      url: '/pages/login/index',
-    })
-  }
-})
+const goTask = () => {
+  console.log('去领包')
+}
+const taskHistory = () => {
+  // 领包记录
+  console.log('去领包')
+}
+const handleOpenStatus = (type: 'on-the-way' | 'wait-approve') => {
+  // 领包记录
+}
 </script>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped>
+.page-workbench {
+  .workbench-header {
+    position: relative;
+    background-image: var(--workbench-bg);
+    background-size: 100% 100%;
+    height: 400rpx;
+    width: 750rpx;
+
+    :deep(.navbar) {
+      background-color: transparent;
+    }
+    .navbar-title {
+      color: #fff;
+      font-weight: bold;
+    }
+  }
+  .workbench-notice {
+    padding: 0 30rpx;
+    margin: 150rpx auto 0;
+  }
+}
+</style>

+ 59 - 0
src/pages/index/taskList/index.ts

@@ -0,0 +1,59 @@
+export const DEFAULT_WORKBENCH_TASKS = [
+  {
+    id: 64,
+    value: 2,
+    typedIds: [5],
+    title: '客户拜访',
+    backgroundImage: 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/khbf.svg',
+    url: '/pages/task/customer-call/index',
+  },
+  {
+    id: 65,
+    value: 3,
+    typedIds: [12, 13, 14, 15, 16, 17, 18, 45, 54, 801],
+    title: '市场信息收集',
+    backgroundImage: 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/scxxsj.svg',
+    url: '/pages/task/market-research/index',
+  },
+  {
+    id: 67,
+    value: 5,
+    typedIds: [45, 51, 52, 53, 55, 56],
+    title: '商业公司客户管理',
+    backgroundImage: 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/sygskhgl.svg',
+    url: '/pages/task/customer-manage/index',
+  },
+  {
+    id: 66,
+    value: 4,
+    title: '信息转发',
+    backgroundImage: 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/xxzf.svg',
+  },
+  {
+    id: 63,
+    value: 1,
+    typedIds: [1, 9, 34],
+    title: '会议培训与专访',
+    backgroundImage: 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/hypxyzf.svg',
+    url: '/pages/task/conference-organizers/index',
+  },
+  {
+    id: 71,
+    value: 7,
+    typedIds: [47, 38, 39, 46, 42],
+    title: '专项服务',
+    backgroundImage: 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/zxfw.svg',
+    url: '/pages/task/cso-task/index',
+  },
+]
+
+export const INVESTMENT_MANAGER_TASKS = [
+  {
+    id: 72,
+    value: 8,
+    typedIds: [58, 59, 60],
+    title: '代理商客户管理',
+    backgroundImage: 'https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/dlskhgl.svg',
+    url: '/pages/task/agent-customer-manage/index',
+  },
+]

+ 7 - 0
src/pages/news/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <view>新闻仔细</view>
+</template>
+
+<script setup lang="ts"></script>
+
+<style lang="scss" scoped></style>

+ 7 - 0
src/pages/profile/index.vue

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

binární
src/static/images/tabbar/mine.png


binární
src/static/images/tabbar/mineAct.png


binární
src/static/images/tabbar/news.png


binární
src/static/images/tabbar/newsAct.png


binární
src/static/images/tabbar/work.png


binární
src/static/images/tabbar/workAct.png


+ 4 - 0
src/styles/base.scss

@@ -1,3 +1,7 @@
 button::after {
   border: none;
 }
+
+view {
+  box-sizing: border-box;
+}

+ 0 - 1
src/styles/modules/auth-page.scss

@@ -4,7 +4,6 @@
   position: relative;
   min-height: 100vh;
   padding: 0 50rpx;
-  box-sizing: border-box;
 
   /* navbar 背景 */
   :deep(.navbar) {

+ 1 - 0
src/styles/variables/vars-base.scss

@@ -3,6 +3,7 @@ page {
   --main-color: #3fa3f1;
   --main-color-rgb: 63, 163, 241;
   --form-error-font-color: #ff4d4f;
+  --workbench-bg: url('https://yy-cloud-oss.oss-cn-beijing.aliyuncs.com/img/home-top-bg-new.png');
   --font-color-fff: #ffffff;
   --font-color-333: #333333;
   --font-color-666: #666666;