feat(merchant): 渠道商我的页面

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

@@ -104,23 +104,150 @@ onPageScroll(({ scrollTop }: { scrollTop: number }) => {
       safeAreaInsetTop
       custom-class="bg-transparent!"
       :bordered="false"
+      placeholder
       v-bind="navBarProps"
-    >
-      <template #left>
-        <wd-button type="text" size="small" custom-class="p-0!" :round="false">
-          <wd-img width="25" height="25" :src="scan" custom-class="vertical-bottom"></wd-img>
-        </wd-button>
-      </template>
-    </wd-navbar>
+    ></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 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>
       <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"
+            >
+              <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>
+              <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="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>
+          </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/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>
+            </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/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>
+            </div>
+          </template>
+        </div>
       </Card>
     </div>
   </view>