|
@@ -2,17 +2,44 @@
|
|
<div class="w-full h-full workbench">
|
|
<div class="w-full h-full workbench">
|
|
<!-- 日历 -->
|
|
<!-- 日历 -->
|
|
<div class="w-full p16 backgroundThemeColor rounded-b-lg setCaleStrle">
|
|
<div class="w-full p16 backgroundThemeColor rounded-b-lg setCaleStrle">
|
|
- <van-calendar switch-mode="year-month" :show-title="false" :show-mark="false" :poppable="false" :show-confirm="false" :row-height="'3rem'" :min-date="minDate" :style="{ borderRadius: '0.3rem' }">
|
|
|
|
|
|
+ <van-calendar switch-mode="year-month" :show-title="false" :show-mark="false" :poppable="false"
|
|
|
|
+ :show-confirm="false" :row-height="'3rem'" :min-date="minDate" :style="{ borderRadius: '0.3rem' }">
|
|
<template #month-title></template>
|
|
<template #month-title></template>
|
|
</van-calendar>
|
|
</van-calendar>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- 日程安排 -->
|
|
<!-- 日程安排 -->
|
|
- <div class="h-52 overflow-y-auto mt-5">
|
|
|
|
|
|
+ <div class="min-h-52 overflow-y-auto mt-5">
|
|
<!-- 有数据的情况 -->
|
|
<!-- 有数据的情况 -->
|
|
- <div></div>
|
|
|
|
|
|
+ <div class="w-full h-full flex flex-col items-center" v-if="visitorProgramList.length">
|
|
|
|
+ <div class="w-full overflow-y-auto max-h-72 px-5 mb-5">
|
|
|
|
+ <template v-for="item in visitorProgramList">
|
|
|
|
+ <div class="bg-[#FFA35919] ra6 p-4 mb-4">
|
|
|
|
+ <div class="w-full flex items-center justify-between">
|
|
|
|
+ <div class="text-size-in font-bold text-[#474A56]">535计划</div>
|
|
|
|
+ <div class="labelTag toBeCompleted">待完成</div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="w-full flex items-center justify-between mt-4">
|
|
|
|
+ <div class="text-[#505050]" style="width: 62%;">拜访目的: 建立客情</div>
|
|
|
|
+ <div class="w-1/3 text-[#505050] flex items-center" style="width: 38%;">
|
|
|
|
+ <van-icon name="user-circle-o" class="text-size-in mr-2" />
|
|
|
|
+ 苹果集团
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="w-full flex items-center justify-between mt-4">
|
|
|
|
+ <div class="w-2/3 text-[#505050]" style="width: 62%;">拜访时间: 2021-08-05 14:00</div>
|
|
|
|
+ <div class="w-1/3 text-[#505050] flex items-center" style="width: 38%;">
|
|
|
|
+ <van-icon name="phone-o" class="text-size-in mr-2" />
|
|
|
|
+ 13561223622
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </div>
|
|
|
|
+ <van-button type="primary" icon="add-o" class="m-auto w-3/5">新增计划</van-button>
|
|
|
|
+ </div>
|
|
<!-- 没有数据的情况下 -->
|
|
<!-- 没有数据的情况下 -->
|
|
- <div class="w-full h-full flex flex-col items-center justify-center">
|
|
|
|
|
|
+ <div class="w-full h-full flex flex-col items-center justify-center" v-if="!visitorProgramList.length">
|
|
<div class="schedulePicture mb-5">
|
|
<div class="schedulePicture mb-5">
|
|
<img class="w-full h-full" src="/src/assets/image/schedule.png">
|
|
<img class="w-full h-full" src="/src/assets/image/schedule.png">
|
|
</div>
|
|
</div>
|
|
@@ -34,7 +61,7 @@
|
|
<div class="text-white">表单{{ index }}</div>
|
|
<div class="text-white">表单{{ index }}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
-
|
|
|
|
|
|
+
|
|
<div class="w80 bg-[#357AF4] h-28 rounded-md flex flex-col items-center justify-center">
|
|
<div class="w80 bg-[#357AF4] h-28 rounded-md flex flex-col items-center justify-center">
|
|
<div class="formImage">
|
|
<div class="formImage">
|
|
<img class="w-full h-full" src="/src/assets/image/more.png">
|
|
<img class="w-full h-full" src="/src/assets/image/more.png">
|
|
@@ -71,6 +98,7 @@ import { useLifecycle } from '@hooks/useCommon.js';
|
|
import dayjs from 'dayjs';
|
|
import dayjs from 'dayjs';
|
|
|
|
|
|
const minDate = ref(new Date('2024-01-01'))
|
|
const minDate = ref(new Date('2024-01-01'))
|
|
|
|
+const visitorProgramList = ref([{}, {}, {}, {}, {}])
|
|
|
|
|
|
useLifecycle({
|
|
useLifecycle({
|
|
load: () => {
|
|
load: () => {
|
|
@@ -88,11 +116,34 @@ useLifecycle({
|
|
padding-left: 16px;
|
|
padding-left: 16px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+.ra6 {
|
|
|
|
+ border-radius: 6px;
|
|
|
|
+}
|
|
|
|
+
|
|
.w80 {
|
|
.w80 {
|
|
width: 80px;
|
|
width: 80px;
|
|
margin-right: 12px;
|
|
margin-right: 12px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
+.toBeCompleted {
|
|
|
|
+ background: rgba($color: #F38B3C, $alpha: .1);
|
|
|
|
+ border-color: #F38B3C;
|
|
|
|
+ color: #F38B3C;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.completed {
|
|
|
|
+ background: rgba($color: #07C160, $alpha: .1);
|
|
|
|
+ border-color: #07C160;
|
|
|
|
+ color: #07C160;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.labelTag {
|
|
|
|
+ font-size: 10px;
|
|
|
|
+ padding: 3px 8px;
|
|
|
|
+ border-radius: 4px;
|
|
|
|
+ border: 1px solid;
|
|
|
|
+}
|
|
|
|
+
|
|
.formImage {
|
|
.formImage {
|
|
width: 24px;
|
|
width: 24px;
|
|
height: 24px;
|
|
height: 24px;
|
|
@@ -114,9 +165,11 @@ useLifecycle({
|
|
width: 48px;
|
|
width: 48px;
|
|
height: 51px;
|
|
height: 51px;
|
|
}
|
|
}
|
|
|
|
+
|
|
.setCaleStrle :deep(.van-calendar__month-title) {
|
|
.setCaleStrle :deep(.van-calendar__month-title) {
|
|
display: none;
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
+
|
|
.setCaleStrle :deep(.van-calendar__month) {
|
|
.setCaleStrle :deep(.van-calendar__month) {
|
|
padding: 0.8rem 0 0.5rem 0;
|
|
padding: 0.8rem 0 0.5rem 0;
|
|
}
|
|
}
|