fix(merchant): 重构登录流程并优化首页展示内容

packages/merchant/src/core/libs/requests.ts

@@ -49,41 +49,7 @@ export const getMoment = () =>
     comments: 0,
     likes: 0,
     createdAt: dayjs('2024-07-15').toDate(),
-    commentList: [
-      {
-        id: 1,
-        author: {
-          avatar: 'https://via.placeholder.com/28x28',
-          nickname: '李一鸣设计师',
-          level: '',
-        },
-        content: '哇~你真的好厉害，棒棒棒',
-        createdAt: dayjs('2024-07-15').toDate(),
-        childrens: [
-          {
-            id: 3,
-            parentId: 1,
-            author: {
-              avatar: 'https://via.placeholder.com/28x28',
-              nickname: '李一鸣设计师',
-              level: '',
-            },
-            content: '这个是去参加了意大利游学活动',
-            createdAt: undefined,
-          },
-        ],
-      },
-      {
-        id: 2,
-        author: {
-          avatar: 'https://via.placeholder.com/28x28',
-          nickname: '王莉莎',
-          level: '',
-        },
-        content: '这个活动怎么参加呢？',
-        createdAt: undefined,
-      },
-    ],
+    commentList: [],
   })
 export const getClassmates = () =>
   httpGetMock<any[]>([
@@ -262,6 +228,14 @@ export const getTasks = (query) =>
       status: number
     }[]
   }>('/app-api/basicsetting/set-task-center/page', query)
+export const login = (data: {
+  mobile: string
+  password: string
+  socialType: number
+  socialCode: string
+  socialState: string
+  socialCodeValid: boolean
+}) => httpPost('/app-api/member/auth/login', data)
 export const refreshToken = (refreshToken: string) =>
   httpPost<any>('/app-api/member/auth/refresh-token', {}, { refreshToken })
 export const httpGetMock = <T>(data: T) =>

packages/merchant/src/pages.json

@@ -153,7 +153,7 @@
       "layout": "tabbar",
       "style": {
         "navigationBarTitleText": "我的",
-        "navigationBarBackgroundColor": "transparent"
+        "navigationBarBackgroundColor": "#fff"
       }
     },
     {

packages/merchant/src/pages/home/index.vue

@@ -10,20 +10,20 @@
 </route>
 
 <script lang="ts" setup>
-import HotActivity from '@/components/hot-activity.vue'
-import MomentItem from '@/components/moment-item.vue'
 import useRequest from '../../hooks/useRequest'
 import dayjs from 'dayjs'
-import Menus from './components/menus.vue'
-import ScheduleCard from './components/schedule-card.vue'
 import { getCircles } from '../../core/libs/requests'
 import SectionHeading from '@designer-hub/app/src/components/section-heading.vue'
 import Card from '@designer-hub/app/src/components/card.vue'
 import { merchantPageHeaderBg } from '@designer-hub/assets/src/svgs'
+import { useUserStore } from '../../store'
+import { storeToRefs } from 'pinia'
 
 defineOptions({
   name: 'Home',
 })
+const userStore = useUserStore()
+const { isLogined, userInfo } = storeToRefs(userStore)
 // 测试 uni API 自动引入
 const { data } = useRequest(async () => ({ code: 0, msg: '', data: {} }) as IResData<any>, {
   initialData: {
@@ -101,120 +101,135 @@ onShow(async () => {
   // await run()
   console.log(circlesData.value)
 })
-onLoad(() => {})
+onLoad(() => {
+  console.log(isLogined.value)
+  if (!isLogined.value) {
+    uni.navigateTo({ url: '/pages/login/index' })
+  }
+})
 onShareAppMessage(() => ({}))
 </script>
 
 <template>
   <view class="flex-grow relative">
-    <div class="aspect-[0.96/1] absolute left-0 right-0 top--1">
-      <wd-img
-        width="100%"
-        height="100%"
-        :src="merchantPageHeaderBg"
-        custom-class="vertical-bottom"
-      ></wd-img>
-    </div>
-    1
-    <wd-navbar custom-class="bg-transparent!" safe-area-inset-top :bordered="false">
-      <template #left>
-        <div
-          class="ml-1 text-center text-white text-lg font-normal font-['PingFang SC'] leading-relaxed"
-        >
-          今日待办
-        </div>
-      </template>
-    </wd-navbar>
-    <div class="flex flex-col gap-8 p-4 relative box-border">
-      <div>
-        <SectionHeading
-          title="渠道任务"
-          path="/pages/home/tasks/index"
-          end-text="查看全部"
-          custom-class="mb-5"
-        ></SectionHeading>
-        <Card><wd-status-tip image="search" tip="当前暂无未开始/进行中的任务" /></Card>
+    <template v-if="userInfo.appLoginType === 1">
+      <div class="aspect-[0.96/1] absolute left-0 right-0 top--1">
+        <wd-img
+          width="100%"
+          height="100%"
+          :src="merchantPageHeaderBg"
+          custom-class="vertical-bottom"
+        ></wd-img>
       </div>
-      <div>
-        <SectionHeading title="设计师" path="" custom-class="mb-5"></SectionHeading>
-        <div class="flex flex-col gap-4">
-          <template
-            v-for="{ label, color } of [
-              { label: '重点跟进设计师', color: '#FF523F' },
-              { label: '全部设计师', color: '#7199FF' },
-              { label: '本月新增设计师', color: '#FFE786' },
-              { label: '超过30天未跟进', color: '#89F4E3' },
-              { label: '超过60天未产生积分设计师', color: '#FFBA6A' },
-              { label: '超过60天未消耗积分设计师', color: '#C494FF' },
-              { label: '未成交过设计师', color: '#FF9EE2' },
-            ]"
-            :key="label"
+      1
+      <wd-navbar custom-class="bg-transparent!" safe-area-inset-top :bordered="false">
+        <template #left>
+          <div
+            class="ml-1 text-center text-white text-lg font-normal font-['PingFang SC'] leading-relaxed"
           >
-            <div class="h-12 bg-white rounded-lg shadow flex items-center hover:bg-[#fff6f5]">
-              <div
-                class="w-1.5 h-12 rounded-tl-lg rounded-bl-lg shadow"
-                :style="{ background: color }"
-              ></div>
-              <div class="flex-1 mx-3">
-                <SectionHeading :title="label" path="/pages/home/index" size="sm"></SectionHeading>
-              </div>
-            </div>
-          </template>
+            今日待办
+          </div>
+        </template>
+      </wd-navbar>
+      <div class="flex flex-col gap-8 p-4 relative box-border">
+        <div>
+          <SectionHeading
+            title="渠道任务"
+            path="/pages/home/tasks/index"
+            end-text="查看全部"
+            custom-class="mb-5"
+          ></SectionHeading>
+          <Card><wd-status-tip image="search" tip="当前暂无未开始/进行中的任务" /></Card>
         </div>
-      </div>
-      <div>
-        <SectionHeading title="设计师最新动态" path="" custom-class="mb-5"></SectionHeading>
-        <div class="flex flex-col gap-4">
-          <template
-            v-for="{ title, date } of [
-              { title: '苏小萌报名了日本设计游学', date: new Date() },
-              { title: '苏小萌报名了骑行活动', date: new Date() },
-              { title: '苏小萌获取imola16000积分', date: new Date() },
-            ]"
-            :key="title"
-          >
-            <Card>
-              <div class="text-black/90 text-sm font-normal font-['PingFang SC'] leading-none">
-                {{ title }}
+        <div>
+          <SectionHeading title="设计师" path="" custom-class="mb-5"></SectionHeading>
+          <div class="flex flex-col gap-4">
+            <template
+              v-for="{ label, color } of [
+                { label: '重点跟进设计师', color: '#FF523F' },
+                { label: '全部设计师', color: '#7199FF' },
+                { label: '本月新增设计师', color: '#FFE786' },
+                { label: '超过30天未跟进', color: '#89F4E3' },
+                { label: '超过60天未产生积分设计师', color: '#FFBA6A' },
+                { label: '超过60天未消耗积分设计师', color: '#C494FF' },
+                { label: '未成交过设计师', color: '#FF9EE2' },
+              ]"
+              :key="label"
+            >
+              <div class="h-12 bg-white rounded-lg shadow flex items-center hover:bg-[#fff6f5]">
+                <div
+                  class="w-1.5 h-12 rounded-tl-lg rounded-bl-lg shadow"
+                  :style="{ background: color }"
+                ></div>
+                <div class="flex-1 mx-3">
+                  <SectionHeading
+                    :title="label"
+                    path="/pages/home/index"
+                    size="sm"
+                  ></SectionHeading>
+                </div>
               </div>
-              <div class="mt-3 text-black/30 text-xs font-normal font-['PingFang SC'] leading-none">
-                {{ dayjs(date).format('YYYY-MM-DD hh:mm') }}
-              </div>
-            </Card>
-          </template>
+            </template>
+          </div>
+        </div>
+        <div>
+          <SectionHeading title="设计师最新动态" path="" custom-class="mb-5"></SectionHeading>
+          <div class="flex flex-col gap-4">
+            <template
+              v-for="{ title, date } of [
+                { title: '苏小萌报名了日本设计游学', date: new Date() },
+                { title: '苏小萌报名了骑行活动', date: new Date() },
+                { title: '苏小萌获取imola16000积分', date: new Date() },
+              ]"
+              :key="title"
+            >
+              <Card>
+                <div class="text-black/90 text-sm font-normal font-['PingFang SC'] leading-none">
+                  {{ title }}
+                </div>
+                <div
+                  class="mt-3 text-black/30 text-xs font-normal font-['PingFang SC'] leading-none"
+                >
+                  {{ dayjs(date).format('YYYY-MM-DD hh:mm') }}
+                </div>
+              </Card>
+            </template>
+          </div>
         </div>
       </div>
-    </div>
-    <!-- <view class="bg-black w-full pos-relative aspect-[1.26/1]">
-      <wd-img custom-class="w-[375px] h-[297px]" src="https://via.placeholder.com/375x297" />
-      <div
-        class="w-[375px] h-[90px] bg-gradient-to-t from-black to-black/0 absolute left-0 bottom-0 w-full flex items-center"
-      >
-        <view class="mx-7">
-          <wd-button plain custom-class="bg-transparent! border-white! text-white!">
-            02:30
-          </wd-button>
-        </view>
-      </div>
-    </view>
-    <view class="bg-[#f6f6f6] relative bottom-4 rounded-t-2xl py-1">
-      <ScheduleCard custom-class="my-6 mx-3.5"></ScheduleCard>
-      <menus></menus>
-      <view class="my-6 mx-3.5">
-        <HotActivity></HotActivity>
-      </view>
-      <view class="my-6 mx-3.5">
-        <Card>一分钟快速了解筑巢荟</Card>
-      </view>
-      <view class="mx-3.5 text-5 font-400">设计圈</view>
-      <view class="mx-3.5">
-        <template v-for="it of circlesData.list" :key="it.id">
-          <view class="my-6">
-            <MomentItem :options="it"></MomentItem>
+    </template>
+    <template v-if="userInfo.appLoginType === 2">
+      <!-- <view class="bg-black w-full pos-relative aspect-[1.26/1]">
+        <wd-img custom-class="w-[375px] h-[297px]" src="https://via.placeholder.com/375x297" />
+        <div
+          class="w-[375px] h-[90px] bg-gradient-to-t from-black to-black/0 absolute left-0 bottom-0 w-full flex items-center"
+        >
+          <view class="mx-7">
+            <wd-button plain custom-class="bg-transparent! border-white! text-white!">
+              02:30
+            </wd-button>
           </view>
-        </template>
+        </div>
       </view>
-    </view> -->
+      <view class="bg-[#f6f6f6] relative bottom-4 rounded-t-2xl py-1">
+        <ScheduleCard custom-class="my-6 mx-3.5"></ScheduleCard>
+        <menus></menus>
+        <view class="my-6 mx-3.5">
+          <HotActivity></HotActivity>
+        </view>
+        <view class="my-6 mx-3.5">
+          <Card>一分钟快速了解筑巢荟</Card>
+        </view>
+        <view class="mx-3.5 text-5 font-400">设计圈</view>
+        <view class="mx-3.5">
+          <template v-for="it of circlesData.list" :key="it.id">
+            <view class="my-6">
+              <MomentItem :options="it"></MomentItem>
+            </view>
+          </template>
+        </view>
+      </view> -->
+    </template>
   </view>
 </template>
 

packages/merchant/src/pages/login/index.vue

@@ -3,73 +3,29 @@ style:
   navigationBarTitleText: 登录
 </route>
 <script lang="ts" setup>
-import { weixinMiniAppLogin } from '@/core/libs/requests'
-import { logo } from '@/core/libs/svgs'
-import { useUserStore } from '@/store'
-import { loginAccountIcon, loginPswIcon, loginPswEye } from '@designer-hub/assets/src/svgs'
+import { login } from '../../core/libs/requests'
+import { useUserStore } from '../../store'
+import { loginAccountIcon, loginPswIcon } from '@designer-hub/assets/src/svgs'
 
 const userStore = useUserStore()
 const { setUserInfo } = userStore
-const loginCode = ref('')
-const phoneCode = ref('')
-const loginType = ref('weixin')
-const loginTypeOption = ref([
-  {
-    value: 'weixin',
-    text: '微信',
-  },
-  {
-    value: 'univerify',
-    text: '一键登录',
-  },
-  {
-    value: 'username',
-    text: '账号密码',
-  },
-  {
-    value: 'smsCode',
-    text: '手机验证码',
-  },
-])
-const toLogin = () => {
-  if (loginType.value === 'username') {
-    uni.navigateTo({
-      url: '/uni_modules/uni-id-pages/pages/login/login-withpwd',
-    })
+const formData = ref({
+  mobile: '',
+  password: '',
+  socialType: 10,
+  socialCode: '1024',
+  socialState: '9b2ffbc1-7425-4155-9894-9d5c08541d62',
+  socialCodeValid: true,
+})
+const handleLogin = async () => {
+  const { msg, code, data } = await login(formData.value)
+  if (code !== 0) {
+    uni.showToast({ title: msg })
   } else {
-    uni.navigateTo({
-      url: '/pages/login/login-withoutpwd?type=' + loginType.value,
-      animationType: 'none',
-      animationDuration: 0,
-    })
+    setUserInfo(data)
+    uni.reLaunch({ url: '/pages/home/index' })
   }
 }
-const toUserInfoPage = () => {
-  uni.navigateTo({
-    url: '/uni_modules/uni-id-pages/pages/userinfo/userinfo?showLoginManage=true',
-  })
-}
-const getPhoneNumber = async ({ detail: { code: phoneCode } }) => {
-  const { code } = await uni.login()
-  console.log(code, phoneCode)
-  const { data } = await weixinMiniAppLogin(phoneCode, code, '9b2ffbc1-7425-4155-9894-9d5c08541d62')
-  setUserInfo({
-    token: data.accessToken,
-    userId: data.userId,
-    accessToken: data.accessToken,
-    refreshToken: data.refreshToken,
-    expiresTime: data.expiresTime,
-    openid: data.openid,
-  })
-  uni.switchTab({
-    url: '/pages/mine/index',
-  })
-}
-const getTestCode = async ({ detail }) => {
-  phoneCode.value = detail.code
-  const { code } = await uni.login()
-  loginCode.value = code
-}
 </script>
 <template>
   <div class="flex-grow flex flex-col items-center justify-start px-7.5 bg-[#ffffff] pt-[100px]">
@@ -82,18 +38,20 @@ const getTestCode = async ({ detail }) => {
     <div class="w-full form">
       <div class="bg-[#F6F6F6] item mb-[10px] flex items-center">
         <wd-img :src="loginAccountIcon" mode="widthFix" width="19px" class="mr-[16px]" />
-        <wd-input type="number" placeholder="请输入手机号" />
+        <wd-input type="number" placeholder="请输入手机号" v-model="formData.mobile" />
       </div>
       <div class="bg-[#F6F6F6] item flex items-center">
         <wd-img :src="loginPswIcon" mode="widthFix" width="19px" class="mr-[16px]" />
-        <wd-input type="number" placeholder="请输入密码" />
+        <wd-input type="number" placeholder="请输入密码" v-model="formData.password" />
       </div>
     </div>
     <div class="w-full flex items-center justify-between mt-[19px]">
       <wd-checkbox :modelValue="true" shape="square">记住密码</wd-checkbox>
       <div class="text-[#2357e9] text-xs font-normal font-['PingFang SC']">忘记密码？</div>
     </div>
-    <div class="w-full mt-[50px]"><wd-button block :round="false">登录</wd-button></div>
+    <div class="w-full mt-[50px]">
+      <wd-button block :round="false" @click="handleLogin">登录</wd-button>
+    </div>
     <div class="mt-8">
       <span class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-tight">
         登录即代表您已阅读并同意筑巢荟的
@@ -111,14 +69,14 @@ const getTestCode = async ({ detail }) => {
 }
 .form {
   .item {
-    border-radius: 10px;
     // height: 50px;
     padding: 10px;
+    border-radius: 10px;
     :deep(.wd-input) {
-      background: transparent;
+      width: 100%;
       height: 100%;
+      background: transparent;
       border: none;
-      width: 100%;
     }
   }
 }

packages/merchant/src/pages/scan_code/mine.vue

@@ -2,7 +2,7 @@
 layout: tabbar
 style:
   navigationBarTitleText: 我的
-  navigationBarBackgroundColor: 'transparent'
+  navigationBarBackgroundColor: '#fff'
 </route>
 <script lang="ts" setup>
 import { desinTopBg } from '@designer-hub/assets/src/svgs'

packages/merchant/src/store/user.ts

@@ -19,7 +19,7 @@ export const useUserStore = defineStore(
     const reset = () => {
       userInfo.value = { ...initState }
     }
-    const isLogined = computed(() => !!userInfo.value.token)
+    const isLogined = computed(() => !!userInfo.value.accessToken)
 
     return {
       userInfo,

packages/merchant/src/types/auto-import.d.ts

@@ -93,7 +93,7 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
 // for vue template auto import

packages/merchant/src/typings.ts

@@ -29,8 +29,13 @@ type IUserInfo = {
   expiresTime?: any
   userStatusEnabled?: boolean
   point?: number
+  appLoginType?: AppLoginType
 }
 
+enum AppLoginType {
+  channel = 1,
+  merchant = 2,
+}
 enum TestEnum {
   A = 'a',
   B = 'b',