|
@@ -10,7 +10,7 @@ import { storeToRefs } from 'pinia'
|
|
|
import { isEmpty } from 'radash'
|
|
|
import Card from '@designer-hub/app/src/components/card.vue'
|
|
|
import SectionHeading from '@designer-hub/app/src/components/section-heading.vue'
|
|
|
-import { merchantPageHeaderBg } from '@designer-hub/assets/src/svgs'
|
|
|
+import { merchantPageHeaderBg, desinTopBg, rightArrowIcon } from '@designer-hub/assets/src/svgs'
|
|
|
|
|
|
const userStore = useUserStore()
|
|
|
const { isLogined, userInfo } = storeToRefs(userStore)
|
|
@@ -23,13 +23,16 @@ const nickNameClickHandle = async () => {
|
|
|
if (isLogined.value) return
|
|
|
uni.navigateTo({ url: '/pages/login/index' })
|
|
|
}
|
|
|
+const toInfoSeting = () => {
|
|
|
+ uni.navigateTo({ url: '/pages/mine/merchant/merchant_settings' })
|
|
|
+}
|
|
|
onShow(async () => {
|
|
|
if (isLogined.value) {
|
|
|
- await run()
|
|
|
- setUserInfo({
|
|
|
- ...userInfo.value,
|
|
|
- ...data.value,
|
|
|
- })
|
|
|
+ // await run()
|
|
|
+ // setUserInfo({
|
|
|
+ // ...userInfo.value,
|
|
|
+ // ...data.value,
|
|
|
+ // })
|
|
|
}
|
|
|
})
|
|
|
const handleToAuthentication = () => {
|
|
@@ -39,6 +42,9 @@ const handleToAuthentication = () => {
|
|
|
const handleToHomepage = () => {
|
|
|
uni.navigateTo({ url: '/pages/mine/homepage/index' })
|
|
|
}
|
|
|
+const toorderDetail = async () => {
|
|
|
+ uni.navigateTo({ url: '/pages/mine/merchant/order_detail' })
|
|
|
+}
|
|
|
onMounted(async () => {
|
|
|
// await run()
|
|
|
// console.log(data.value)
|
|
@@ -53,165 +59,228 @@ onPageScroll(({ scrollTop }: { scrollTop: number }) => {
|
|
|
|
|
|
<template>
|
|
|
<view>
|
|
|
- <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>
|
|
|
- <wd-navbar
|
|
|
- fixed
|
|
|
- safeAreaInsetTop
|
|
|
- custom-class="bg-transparent!"
|
|
|
- :bordered="false"
|
|
|
- placeholder
|
|
|
- v-bind="navBarProps"
|
|
|
- ></wd-navbar>
|
|
|
- <div class="p-4 flex flex-col gap-4 relative">
|
|
|
- <div class="flex items-center px-4 mb-4">
|
|
|
- <img
|
|
|
- class="w-14 h-14 rounded-full border border-white"
|
|
|
- src="https://via.placeholder.com/56x56"
|
|
|
- />
|
|
|
- <div class="mx-4 flex-1">
|
|
|
- <div class="text-white text-lg font-normal font-['PingFang SC'] leading-normal">
|
|
|
- 李晓东
|
|
|
- </div>
|
|
|
- <div class="text-white text-xs font-normal font-['PingFang SC'] leading-relaxed">
|
|
|
- ID:1023621
|
|
|
+ <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>
|
|
|
+ <wd-navbar
|
|
|
+ fixed
|
|
|
+ safeAreaInsetTop
|
|
|
+ custom-class="bg-transparent!"
|
|
|
+ :bordered="false"
|
|
|
+ placeholder
|
|
|
+ v-bind="navBarProps"
|
|
|
+ ></wd-navbar>
|
|
|
+ <div class="p-4 flex flex-col gap-4 relative">
|
|
|
+ <div class="flex items-center px-4 mb-4">
|
|
|
+ <img
|
|
|
+ class="w-14 h-14 rounded-full border border-white"
|
|
|
+ src="https://via.placeholder.com/56x56"
|
|
|
+ />
|
|
|
+ <div class="mx-4 flex-1">
|
|
|
+ <div class="text-white text-lg font-normal font-['PingFang SC'] leading-normal">
|
|
|
+ 李晓东
|
|
|
+ </div>
|
|
|
+ <div class="text-white text-xs font-normal font-['PingFang SC'] leading-relaxed">
|
|
|
+ ID:1023621
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div class="w-[29px] h-[29px] relative bg-[#ff523f]"></div>
|
|
|
- <div class="text-white text-[10px] font-normal font-['PingFang SC'] leading-relaxed">
|
|
|
- 邀请码
|
|
|
+ <div>
|
|
|
+ <div class="w-[29px] h-[29px] relative bg-[#ff523f]"></div>
|
|
|
+ <div class="text-white text-[10px] font-normal font-['PingFang SC'] leading-relaxed">
|
|
|
+ 邀请码
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <Card>
|
|
|
- <SectionHeading title="本年目标" size="base"></SectionHeading>
|
|
|
- <div class="flex flex-col gap-2.5 mt-3">
|
|
|
- <template
|
|
|
- v-for="{ name } of [
|
|
|
- { name: 'Imola订单金额目标' },
|
|
|
- { name: '平台订单金额目标' },
|
|
|
- { name: '拜访次数' },
|
|
|
- { name: '到店次数' },
|
|
|
- ]"
|
|
|
- :key="name"
|
|
|
- >
|
|
|
- <div
|
|
|
- class="bg-gradient-to-r from-[#fef3ee] to-[#f0f4f9] rounded-lg flex items-center p-4 gap-6"
|
|
|
+ <Card>
|
|
|
+ <SectionHeading title="本年目标" size="base"></SectionHeading>
|
|
|
+ <div class="flex flex-col gap-2.5 mt-3">
|
|
|
+ <template
|
|
|
+ v-for="{ name } of [
|
|
|
+ { name: 'Imola订单金额目标' },
|
|
|
+ { name: '平台订单金额目标' },
|
|
|
+ { name: '拜访次数' },
|
|
|
+ { name: '到店次数' },
|
|
|
+ ]"
|
|
|
+ :key="name"
|
|
|
>
|
|
|
- <div>
|
|
|
- <div class="w-[45px] h-[45px] rounded-full border-4 border-[#ffe2d0] bg-red"></div>
|
|
|
- </div>
|
|
|
- <div class="flex-1">
|
|
|
- <div class="text-black/60 text-xs font-normal font-['PingFang SC']">{{ name }}</div>
|
|
|
- <div class="flex items-center gap-1">
|
|
|
- <div class="text-black/90 text-lg font-medium font-['DIN'] leading-normal">
|
|
|
- 6000
|
|
|
+ <div
|
|
|
+ class="bg-gradient-to-r from-[#fef3ee] to-[#f0f4f9] rounded-lg flex items-center p-4 gap-6"
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <div
|
|
|
+ class="w-[45px] h-[45px] rounded-full border-4 border-[#ffe2d0] bg-red"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <div class="flex-1">
|
|
|
+ <div class="text-black/60 text-xs font-normal font-['PingFang SC']">
|
|
|
+ {{ name }}
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center gap-1">
|
|
|
+ <div class="text-black/90 text-lg font-medium font-['DIN'] leading-normal">
|
|
|
+ 6000
|
|
|
+ </div>
|
|
|
+ <div class="text-black text-xs font-normal font-['PingFang SC']">万</div>
|
|
|
+ </div>
|
|
|
+ <div class="flex items-center gap-1">
|
|
|
+ <div class="text-black/60 text-xs font-normal font-['PingFang SC']">差值</div>
|
|
|
+ <div class="text-[#ff2d2d] text-xs font-medium font-['DIN'] leading-normal">
|
|
|
+ 3000
|
|
|
+ </div>
|
|
|
+ <div class="text-[#ff2d2d] text-[10px] font-medium font-['DIN'] leading-normal">
|
|
|
+ 万
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="text-black text-xs font-normal font-['PingFang SC']">万</div>
|
|
|
</div>
|
|
|
- <div class="flex items-center gap-1">
|
|
|
- <div class="text-black/60 text-xs font-normal font-['PingFang SC']">差值</div>
|
|
|
- <div class="text-[#ff2d2d] text-xs font-medium font-['DIN'] leading-normal">
|
|
|
- 3000
|
|
|
+ <div class="">
|
|
|
+ <div class="text-black/60 text-xs font-normal font-['PingFang SC']">当年完成</div>
|
|
|
+ <div class="flex items-center gap-1">
|
|
|
+ <div class="text-black/90 text-lg font-medium font-['DIN'] leading-normal">
|
|
|
+ 6000
|
|
|
+ </div>
|
|
|
+ <div class="text-black text-xs font-normal font-['PingFang SC']">万</div>
|
|
|
</div>
|
|
|
- <div class="text-[#ff2d2d] text-[10px] font-medium font-['DIN'] leading-normal">
|
|
|
- 万
|
|
|
+ <div class="flex items-center gap-1">
|
|
|
+ <div class="text-black/60 text-xs font-normal font-['PingFang SC']">本月</div>
|
|
|
+ <div class="text-[#0FC187] text-xs font-medium font-['DIN'] leading-normal">
|
|
|
+ 3000
|
|
|
+ </div>
|
|
|
+ <div class="text-[#0FC187] text-[10px] font-medium font-['DIN'] leading-normal">
|
|
|
+ 万
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="">
|
|
|
- <div class="text-black/60 text-xs font-normal font-['PingFang SC']">当年完成</div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ <Card>
|
|
|
+ <SectionHeading title="设计师数据" size="base"></SectionHeading>
|
|
|
+ <div class="mt-3 grid grid-cols-3 gap-2.5">
|
|
|
+ <template
|
|
|
+ v-for="{ name, value } of [
|
|
|
+ { name: '设计师总数', value: 220 },
|
|
|
+ { name: '成交过', value: 220 },
|
|
|
+ { name: '未成交过', value: 220 },
|
|
|
+ { name: '消耗积分', value: 220 },
|
|
|
+ { name: '参加游学', value: 220 },
|
|
|
+ { name: '参与活动', value: 220 },
|
|
|
+ ]"
|
|
|
+ :key="name"
|
|
|
+ >
|
|
|
+ <div class="bg-[#f6f7ff] rounded-lg aspect-[1/1] flex flex-col justify-around p-2.5">
|
|
|
+ <div class="text-black/60 text-xs font-normal font-['PingFang SC'] leading-none">
|
|
|
+ {{ name }}
|
|
|
+ </div>
|
|
|
+ <div class="text-black/90 text-lg font-bold font-['D-DIN Exp'] leading-normal">
|
|
|
+ {{ value }}
|
|
|
+ </div>
|
|
|
<div class="flex items-center gap-1">
|
|
|
- <div class="text-black/90 text-lg font-medium font-['DIN'] leading-normal">
|
|
|
- 6000
|
|
|
+ <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-none">
|
|
|
+ 年新增
|
|
|
+ </div>
|
|
|
+ <div class="text-[#ff2d2d] text-xs font-normal font-['D-DIN Exp'] leading-normal">
|
|
|
+ 20
|
|
|
</div>
|
|
|
- <div class="text-black text-xs font-normal font-['PingFang SC']">万</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ <Card>
|
|
|
+ <SectionHeading title="跟进数据" size="base"></SectionHeading>
|
|
|
+ <div class="mt-3 grid grid-cols-3 gap-2.5">
|
|
|
+ <template
|
|
|
+ v-for="{ name, value } of [
|
|
|
+ { name: '累计跟进', value: 220 },
|
|
|
+ { name: '线下拜访', value: 220 },
|
|
|
+ { name: '线上跟进', value: 220 },
|
|
|
+ ]"
|
|
|
+ :key="name"
|
|
|
+ >
|
|
|
+ <div class="bg-[#f6f7ff] rounded-lg aspect-[1/1] flex flex-col justify-around p-2.5">
|
|
|
+ <div class="text-black/60 text-xs font-normal font-['PingFang SC'] leading-none">
|
|
|
+ {{ name }}
|
|
|
+ </div>
|
|
|
+ <div class="text-black/90 text-lg font-bold font-['D-DIN Exp'] leading-normal">
|
|
|
+ {{ value }}
|
|
|
</div>
|
|
|
<div class="flex items-center gap-1">
|
|
|
- <div class="text-black/60 text-xs font-normal font-['PingFang SC']">本月</div>
|
|
|
- <div class="text-[#0FC187] text-xs font-medium font-['DIN'] leading-normal">
|
|
|
- 3000
|
|
|
+ <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-none">
|
|
|
+ 年新增
|
|
|
</div>
|
|
|
- <div class="text-[#0FC187] text-[10px] font-medium font-['DIN'] leading-normal">
|
|
|
- 万
|
|
|
+ <div class="text-[#ff2d2d] text-xs font-normal font-['D-DIN Exp'] leading-normal">
|
|
|
+ 20
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </Card>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="userInfo.appLoginType === 2">
|
|
|
+ <view class="p-[16px]">
|
|
|
+ <div class="aspect-[1.575/1] absolute left-0 right-0 top-0">
|
|
|
+ <wd-img width="100%" height="100%" :src="desinTopBg" custom-class="vertical-top"></wd-img>
|
|
|
</div>
|
|
|
- </Card>
|
|
|
- <Card>
|
|
|
- <SectionHeading title="设计师数据" size="base"></SectionHeading>
|
|
|
- <div class="mt-3 grid grid-cols-3 gap-2.5">
|
|
|
- <template
|
|
|
- v-for="{ name, value } of [
|
|
|
- { name: '设计师总数', value: 220 },
|
|
|
- { name: '成交过', value: 220 },
|
|
|
- { name: '未成交过', value: 220 },
|
|
|
- { name: '消耗积分', value: 220 },
|
|
|
- { name: '参加游学', value: 220 },
|
|
|
- { name: '参与活动', value: 220 },
|
|
|
- ]"
|
|
|
- :key="name"
|
|
|
- >
|
|
|
- <div class="bg-[#f6f7ff] rounded-lg aspect-[1/1] flex flex-col justify-around p-2.5">
|
|
|
- <div class="text-black/60 text-xs font-normal font-['PingFang SC'] leading-none">
|
|
|
- {{ name }}
|
|
|
- </div>
|
|
|
- <div class="text-black/90 text-lg font-bold font-['D-DIN Exp'] leading-normal">
|
|
|
- {{ value }}
|
|
|
- </div>
|
|
|
- <div class="flex items-center gap-1">
|
|
|
- <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-none">
|
|
|
- 年新增
|
|
|
- </div>
|
|
|
- <div class="text-[#ff2d2d] text-xs font-normal font-['D-DIN Exp'] leading-normal">
|
|
|
- 20
|
|
|
- </div>
|
|
|
+ <div
|
|
|
+ @click="toInfoSeting"
|
|
|
+ class="bg-white rounded-2xl shadow relative mt-[28px] py-[29px] px-[14px] flex items-center"
|
|
|
+ >
|
|
|
+ <div><img class="w-16 h-16 rounded-full" src="https://via.placeholder.com/64x64" /></div>
|
|
|
+ <div class="ml-[10px]">
|
|
|
+ <div class="text-black/90 text-lg font-normal font-['PingFang SC'] leading-[10.18px]">
|
|
|
+ 商家:GELATO
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="h-6 px-1.5 py-1 bg-[#f5f6fa] rounded justify-center items-center gap-2.5 inline-flex mt-[17px]"
|
|
|
+ >
|
|
|
+ <div class="text-[#8b8b8b] text-xs font-normal font-['PingFang SC'] leading-none">
|
|
|
+ ID:1201451200
|
|
|
</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </Card>
|
|
|
- <Card>
|
|
|
- <SectionHeading title="跟进数据" size="base"></SectionHeading>
|
|
|
- <div class="mt-3 grid grid-cols-3 gap-2.5">
|
|
|
- <template
|
|
|
- v-for="{ name, value } of [
|
|
|
- { name: '累计跟进', value: 220 },
|
|
|
- { name: '线下拜访', value: 220 },
|
|
|
- { name: '线上跟进', value: 220 },
|
|
|
- ]"
|
|
|
- :key="name"
|
|
|
- >
|
|
|
- <div class="bg-[#f6f7ff] rounded-lg aspect-[1/1] flex flex-col justify-around p-2.5">
|
|
|
- <div class="text-black/60 text-xs font-normal font-['PingFang SC'] leading-none">
|
|
|
- {{ name }}
|
|
|
- </div>
|
|
|
- <div class="text-black/90 text-lg font-bold font-['D-DIN Exp'] leading-normal">
|
|
|
- {{ value }}
|
|
|
- </div>
|
|
|
- <div class="flex items-center gap-1">
|
|
|
- <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-none">
|
|
|
- 年新增
|
|
|
+ <div class="flex items-center mt-[20px]">
|
|
|
+ <div class="w-1 h-[19px] bg-[#2357e9] rounded-md"></div>
|
|
|
+ <div class="text-black text-lg font-normal font-['PingFang SC'] leading-normal ml-[8px]">
|
|
|
+ 记录
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="mt-[16px]">
|
|
|
+ <div class="bg-white rounded-2xl p-[16px] flex flex-col" @click="toorderDetail">
|
|
|
+ <div class="text-black/90 text-sm font-normal font-['PingFang SC'] leading-normal">
|
|
|
+ 完成时间:2024-10-20 10:00
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="flex mt-[19px] items-center">
|
|
|
+ <div class="w-[86px] h-[86px] bg-[#f6f6f6] rounded-[10px]"></div>
|
|
|
+ <div class="ml-[16px]">
|
|
|
+ <div class="text-black text-base font-normal font-['PingFang SC'] leading-normal">
|
|
|
+ 阿芙佳朵
|
|
|
</div>
|
|
|
- <div class="text-[#ff2d2d] text-xs font-normal font-['D-DIN Exp'] leading-normal">
|
|
|
- 20
|
|
|
+ <div
|
|
|
+ class="text-left text-black/30 text-sm font-normal font-['PingFang SC'] leading-normal"
|
|
|
+ >
|
|
|
+ 数量x2
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="text-left text-black/30 text-sm font-normal font-['PingFang SC'] leading-normal"
|
|
|
+ >
|
|
|
+ 600积分
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </template>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </Card>
|
|
|
- </div>
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
</view>
|
|
|
</template>
|
|
|
|