日程列表接口对接，点击日程弹窗信息

src/api/ssbg/api.js

@@ -8,4 +8,18 @@ import {get,post} from './http';
  */
 export const researcherList = params=>{
 	return get('/roadshow/researcher/list',params)
+}
+
+/**
+ * 研究员日历日程 StartDate  EndDate ResearcherId
+ */
+export const researchEvents = params => {
+	return get('/roadshow/researcher/calendar/detail', params)
+}
+
+/**
+ * 我的日历日程 StartDate  EndDate
+ */
+export const myEvents = params => {
+	return get('/roadshow/my/calendar/detail', params)
 }

src/api/ssbg/http.js

@@ -21,15 +21,6 @@ const _axios = axios.create(config);
 _axios.interceptors.request.use(
   function (config) {
     // Do something before request is sent
-    // 设置loading
-    if (LOADINGCOUNT === 0) {
-      LOADING = Toast.loading({
-        message: "loading...",
-        duration: 0,
-        forbidClick: true,
-      });
-    }
-    LOADINGCOUNT++;
     config.headers.Authorization = localStorage.getItem('ssbg-token') || '';
     
     return config;
@@ -44,17 +35,10 @@ _axios.interceptors.request.use(
 _axios.interceptors.response.use(
   function (response) {
     // Do something with response data
-
-    //关闭loading
-    LOADINGCOUNT--;
-    if (LOADINGCOUNT === 0) {
-      LOADING.clear();
-    }
     
     return response.data;
   },
   function (error) {
-    LOADING.clear();
     // Do something with response error
     return Promise.reject(error);
   }

src/views/ssbg/components/calendar.vue

@@ -1,27 +1,52 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, onMounted,watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { Sticky,Popup } from 'vant';
+
 import '@fullcalendar/core/vdom'; // solve problem with Vite
 import FullCalendar from '@fullcalendar/vue3';
 import timeGridPlugin from '@fullcalendar/timegrid';
 import interactionPlugin from '@fullcalendar/interaction';
 
 import moment from 'moment';
-
+import 'moment/dist/locale/zh-cn';
+moment.locale('zh-cn');
 import swiperCalendar from './swiperCalendar.vue';
-// import swiperCalendar from './swiper.vue';
 
-const emits = defineEmits(['dateChange','cellClick'])
+/* props */
+const props = defineProps({
+  eventList: {
+    type: Array,
+    required: true
+  }
+})
+
+const emits = defineEmits(['dateChange','cellClick']);
 
+const route = useRoute();
 const swiperCalendarRef = ref(null);
 
+
+let isShowPopup = ref(false);//日程弹窗
+const selectEventInfo = ref(null)//日程信息
+
 /* 点击表格日期 */
 const handleDateClick = ({date}) => {
   emits('cellClick',date)
 };
 
 /* 点击日程 */
-const handleEventClick = () => {};
+const handleEventClick = (_) => {
+  let id = _.event.id; // 获取当前点击日程的ID
+
+  let event_item = props.eventList.find(item => item.id === Number(id));
 
+  //标题拼接
+  let title = setDynamicTitle(event_item);
+
+  selectEventInfo.value = {...event_item,title};
+  isShowPopup.value = true;
+};
 
 let calendarOptions = ref({
   height: 'auto',
@@ -41,17 +66,7 @@ let calendarOptions = ref({
   weekends: true,
   dateClick: handleDateClick,
   eventClick: handleEventClick,
-  // eventsSet: handleEvents,
-  // select: handleDateSelect,
-  events: [
-    {
-      start: '2022-03-07T09:30:00',
-      end: '2022-03-07T10:30:00',
-      event_id: '10',
-      id: '12',
-      title: '454545',
-    }
-  ], //日程表
+  events: [], //日程表
   eventTimeFormat: {
     // 格式化日程显示时间,如'14:30'
     hour: '2-digit',
@@ -97,19 +112,63 @@ const toogeCurrentWeek = () => {
   swiperCalendarRef.value.selectDateHandle(moment().format('YYYY-MM-DD'),1)
 }
 
+// 处理数据结构
+const getReservationList = () => {
+  const arr = props.eventList.map((item) => {
+    // let title = (this.isSeller && item.ActivityType==='路演')
+    // ? `${item.CompanyName}${item.CompanyStatus ? '('+ item.CompanyStatus + ')' : ''}` : (this.isSeller && item.ActivityType==='公开会议')
+    // ? item.Theme : setDynamicTitle(item);
+    let title = item.ActivityType==='路演'
+    ? `${item.CompanyName}${item.CompanyStatus ? '('+ item.CompanyStatus + ')' : ''}` : item.ActivityType==='公开会议'
+    ? item.Theme : setDynamicTitle(item);
+
+    return {
+      start: item.StartDate+'T'+item.StartTime ,
+      end: item.EndDate+'T'+item.EndTime,
+      event_id: item.RsCalendarId || item.RsMattersId,
+      id: item.id,
+      title,
+    };
+  });
+  calendarOptions.value.events = arr
+}
+
+// 拼接标题 type 内部会议 公开会议 路演 报告电话会 事项
+const setDynamicTitle = ({ActivityType,RsMattersId,MatterContent,RoadshowType,RoadshowPlatform,Province,City,ActivityCategory,Source,Title}) => {
+
+  //第三方添加的日历活动
+  if(Source === 1) return Title;
+
+  switch(ActivityType || RsMattersId) {
+    case '内部会议': return ActivityType;
+    case '公开会议': return `${RoadshowType}${ActivityType}(${RoadshowType==='线上' ? RoadshowPlatform : Province+City})`;
+    case '路演': return `${RoadshowType}${ActivityType}(${RoadshowType==='线上' ? RoadshowPlatform : Province+City})`;
+    case '报告电话会': return `${ActivityCategory}电话会`;
+    case RsMattersId: return MatterContent;
+  }
+}
+
+watch(
+  () => props.eventList,
+  (newval) => {
+    getReservationList();
+  }
+)
+
 onMounted(() => {
   calendarApi.value = FullCalendarRef.value.getApi();
-
+  datechangeHandle(moment().format('YYYY-MM-DD'))
 });
 
-defineExpose({ toogeCurrentWeek });
+defineExpose({ toogeCurrentWeek,calendarApi });
 </script>
 
 <template>
-  <div class="header">
-    <swiperCalendar @dateChange="datechangeHandle" ref="swiperCalendarRef"/>
-
-  </div>
+  <Sticky>
+    <div class="header">
+      <swiperCalendar @dateChange="datechangeHandle" ref="swiperCalendarRef"/>
+    </div>
+  </Sticky>
   <FullCalendar :options="calendarOptions" ref="FullCalendarRef">
     <template #eventContent="arg">
       <div class="popper-content">
@@ -118,25 +177,64 @@ defineExpose({ toogeCurrentWeek });
       </div>
     </template>
   </FullCalendar>
+
+<!-- 弹窗层 -->
+  <Popup
+    v-model:show="isShowPopup"
+    closeable
+  >
+    <div class="dialog-cont">
+      <p>
+          {{
+            `${moment(selectEventInfo.StartDate).format("MM.DD")}
+            (${moment(selectEventInfo.StartDate).format('ddd')}) 
+            ${selectEventInfo.StartTime&&selectEventInfo.StartTime.substr(0,5)} - 
+            ${selectEventInfo.EndTime&&selectEventInfo.EndTime.substr(0,5)}`
+          }}
+        </p>
+        <p v-if="isSeller">{{ selectEventInfo.ResearcherName }}</p>
+        <p>{{ selectEventInfo.title }}</p>
+        <p v-if="selectEventInfo.CompanyName" >{{ `${selectEventInfo.CompanyName}${selectEventInfo.CompanyStatus ? '('+ selectEventInfo.CompanyStatus + ')' : ''}` }}</p>
+        <p v-if="selectEventInfo.Theme">{{ selectEventInfo.Theme }}</p>
+        <p v-if="selectEventInfo.CooperationName">{{ selectEventInfo.CooperationName }}</p>
+        <p v-if="['公开会议','内部会议','路演'].includes(selectEventInfo.ActivityType)">发起人:{{selectEventInfo.SysUserRealName}}</p>
+    </div>
+  </Popup>
 </template>
 
 <style lang="scss" scoped>
 
 .header {
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 99;
   background: #fff;
-  padding-top: 20px;
-  padding: 10px 0 20px;
+  padding-bottom: 20px;
   box-shadow: 0px 3px 6px rgba(172, 172, 172, 0.16);
+  .tab-cont {
+		padding: 30px;
+		background: #fff;
+		box-shadow: 0px 3px 12px rgba(175, 175, 175, 0.16);
+		border-bottom: 6px solid #f6f6f6;
+    margin-bottom: 20px;
+		.tab-ul {
+			display: flex;
+			align-items: center;
+			li {
+				margin-right: 50px;
+				color: #666;
+				text-align: center;
+				.item-img {
+					width: 78px;
+					height: 78px;
+					display:block;
+					margin: 0 auto 10px;
+				}
+			}
+		}
+  }  
 }
 .fc {
   margin: 0 0 160px;
   ::v-deep(.fc-timegrid-slot) {
-    height: 80px;
+    height: 120px;
   }
 
   ::v-deep(.fc-timegrid-slot-label) {
@@ -147,16 +245,16 @@ defineExpose({ toogeCurrentWeek });
   }
   ::v-deep(.fc-timegrid-event ) {
     border-left: 8px solid #3385FF !important;
-    /* border-left-color:#3385FF !important; */
-    /* &::after {
-      height: 100%;
-      width: 6px;
-      position: absolute;
-      top: 0;
-      content: '';
-      background-color: #3385FF;
-    } */
 
   }
 }
+
+.dialog-cont {
+  /* min-width: 400px; */
+  width: 500px;
+  padding: 40px;
+  p {
+    color: #333;
+  }
+}
 </style>

src/views/ssbg/components/swiperCalendar.vue

@@ -1,6 +1,8 @@
 <script setup>
 import { reactive, toRefs, ref, watch, onMounted } from 'vue';
 import moment from 'moment';
+import 'moment/dist/locale/zh-cn';
+moment.locale('zh-cn');
 import _ from 'lodash';
 
 const emit = defineEmits(['dateChange']);

src/views/ssbg/roadshow/common-calendar.js

@@ -11,12 +11,11 @@ export const findParentByid = (id,arr) => {
 export const RESEARCHLIST = ['ficc_researcher', 'researcher', 'rai_researcher','ficc_admin', 'rai_admin',];
 
 // 销售/组长
-const SELLERLIST = ['ficc_seller', 'rai_seller', 'ficc_group', 'rai_group'];
+const SELLERLIST = ['ficc_seller', 'rai_seller', 'ficc_group', 'rai_group','seller'];
 
 // admin
 const ADMINLIST = ['admin'];
 
-
 /* 获取我的日历顶部tab */
 export const getTabsByRole = (role) => {
 	return RESEARCHLIST.includes(role) 

src/views/ssbg/roadshow/myCalendar.vue

@@ -3,71 +3,103 @@
 import { ref } from 'vue';
 import { Icon } from 'vant';
 import { useRoute } from 'vue-router';
-import { isWxprogram } from '../utils';
+import moment from 'moment';
+import 'moment/dist/locale/zh-cn';
+moment.locale('zh-cn');
+
 import { getTabsByRole } from './common-calendar';
+import { isWxprogram } from '../utils';
 import Calendar from '../components/calendar.vue';
+import { myEvents } from '@/api/ssbg/api';
 
 const route = useRoute();
 localStorage.setItem('ssbg-token',route.query.token ||  '5e532bc5fa7281aebaa6d89960b54c4ab22f1ab18e969258c634a7940fdb0922');
-localStorage.setItem('ssbg-role',route.query.role ||  'researcher');
+localStorage.setItem('ssbg-role',route.query.role ||  'seller');
 
 const calendarRef = ref(null);//日历ref
 const actionsList = ref([
   {
-    label: '本周',
+    label: '今天',
     key: 'weeknow',
+    show: true,
   },
   {
     label: '添加事项',
     key: 'add_matter',
-		icon: 'add-o'
+		icon: 'add-o',
+    show:  ['ficc_researcher', 'researcher', 'rai_researcher','ficc_admin', 'rai_admin'].includes(localStorage.getItem('ssbg-role'))
   },
 ]);//底部固定数据
-
+const eventList = ref([]);//日程信息
 const Tabs = ref(getTabsByRole(localStorage.getItem('ssbg-role')));//顶部tab
 
 /* 获取日历日程列表 */
-const getEventList = (date) => {
-  console.log(date, '日程');
+const getEventList = async () => {
+  if(localStorage.getItem('ssbg-role') === 'admin') return;
+
+  const { currentStart } = calendarRef.value.calendarApi.view;
+
+  const { code,data } = await myEvents({
+    StartDate: moment(currentStart).format('YYYY-MM-DD'),
+    EndDate: moment(currentStart).format('YYYY-MM-DD')
+  })
+
+  if(code !== 200) return
+
+  eventList.value = [
+    ...(data.CalendarList || []),
+    ...(data.RsMattersList || []),
+  ].map((item, index) => ( { ...item, id: index }));
 };
 
 /* 底部操作 */
 const dealActionHandler = (type) => {
   const deal_methods_handles = {
     weeknow: toogeCurrentWeek,
-    add_matter: () => {
-			uni.navigateTo({
-				url: '/pages-roadshow/addActivity/addMatter',
-			});
-		},
+    add_matter: addMatterHandle
   };
   deal_methods_handles[type]();
 }
 
-/* 切换为本周 */
+const addMatterHandle = () => {
+  uni.navigateTo({
+    url: '/pages-roadshow/addMatter/index',
+  });
+}
+
+/* 切换为今天 */
 const toogeCurrentWeek = () => {
   calendarRef.value.toogeCurrentWeek();
 };
 
+/* 进入活动列表 */
+const switchTabHandle = (key) => {
+  uni.navigateTo({
+    url: `/pages-approve/activity/list?type=${key}`,
+  });
+}
+
 </script>
 <!--  -->
 <template>
 	<div class="mycalendar-container">
+    <div class="tab-cont" v-if="route.path === '/ssbg/roadshow/mine'">
+      <ul class="tab-ul">
+        <li v-for="tab in Tabs" :key="tab.key" @click="switchTabHandle(tab.label)">
+          <img class="item-img" src="@/assets/ssbg/tab_icon1.png" v-if="[1,2].includes(tab.key)"/>
+          <img class="item-img" src="@/assets/ssbg/tab_icon2.png" v-if="tab.key === 3"/>
+          <img class="item-img" src="@/assets/ssbg/tab_icon3.png" v-if="tab.key === 5"/>
+          <img class="item-img" src="@/assets/ssbg/tab_icon4.png" v-if="tab.key === 4"/>
+          {{ tab.label }}
+        </li>
+      </ul>
+    </div>
 
-		<div class="tab-cont">
-			<ul class="tab-ul">
-				<li v-for="tab in Tabs" :key="tab.key" @click="switchTabHandle(tab.key)">
-					<!-- <img class="item-img" src="@/assets/ssbg/calendar_ico.png"/>
-					<img class="item-img" src="@/assets/ssbg/calendar_ico.png"/>
-					<img class="item-img" src="@/assets/ssbg/calendar_ico.png"/>
-					<img class="item-img" src="@/assets/ssbg/calendar_ico.png"/>
-					<img class="item-img" src="@/assets/ssbg/calendar_ico.png"/> -->
-					{{ tab.label }}
-				</li>
-			</ul>
-		</div>
-
-		<Calendar @dateChange="getEventList" ref="calendarRef"/>
+		<Calendar
+    ref="calendarRef"
+    :eventList="eventList"
+    @dateChange="getEventList" 
+    />
 <!-- v-if="isWxprogram()" -->
     <div class="fix-action">
       <ul class="action-ul">
@@ -75,6 +107,7 @@ const toogeCurrentWeek = () => {
           v-for="item in actionsList"
           key="item.key"
           @click="dealActionHandler(item.key)"
+          v-show="item.show"
         >
           <Icon :name="item.icon" class="item-icon" v-if="item.icon" />
           <img
@@ -91,29 +124,28 @@ const toogeCurrentWeek = () => {
 </template>
 <style scoped lang="scss">
 .mycalendar-container {
-
-	.tab-cont {
+  .tab-cont {
 		padding: 30px;
 		background: #fff;
 		box-shadow: 0px 3px 12px rgba(175, 175, 175, 0.16);
 		border-bottom: 6px solid #f6f6f6;
+    margin-bottom: 20px;
 		.tab-ul {
 			display: flex;
 			align-items: center;
 			li {
 				margin-right: 50px;
-				font-size: 32px;
 				color: #666;
 				text-align: center;
 				.item-img {
-					width: 80px;
-					height: 80px;
+					width: 78px;
+					height: 78px;
 					display:block;
 					margin: 0 auto 10px;
 				}
 			}
 		}
-	}
+  } 
 	.fix-action {
     height: 160px;
     position: fixed;

src/views/ssbg/roadshow/rsCalendar.vue

@@ -1,8 +1,12 @@
 <script setup>
-import { ref, reactive } from 'vue';
+import { ref, reactive,toRefs } from 'vue';
 import { useRoute } from 'vue-router';
-import { researcherList } from '@/api/ssbg/api';
 import { Icon, Toast,TreeSelect,Popup } from 'vant';
+import moment from 'moment';
+import 'moment/dist/locale/zh-cn';
+moment.locale('zh-cn');
+
+import { researcherList,researchEvents } from '@/api/ssbg/api';
 import { isWxprogram } from '../utils';
 import { findParentByid } from './common-calendar';
 import Calendar from '../components/calendar.vue';
@@ -14,7 +18,7 @@ localStorage.setItem('ssbg-token',route.query.token ||  '5e532bc5fa7281aebaa6d89
 const actionsList = ref([
   { label: '添加活动', key: 'add', icon: 'add-o' },
   {
-    label: '本周',
+    label: '今天',
     key: 'weeknow',
     img: '../../../assets/ssbg/calendar_ico.png',
   },
@@ -29,11 +33,27 @@ const calendarRef = ref(null);
 
 const state = reactive({
   selectResearcher: '', // 选中的研究员
+  eventList: [],//日程信息
 });
 
 /* 获取日历日程列表 */
-const getEventList = (date) => {
-  console.log(date, '日程');
+const getEventList = async () => {
+  if(!state.selectResearcher) return
+
+  const { currentStart } = calendarRef.value.calendarApi.view;
+
+  const { code,data } = await researchEvents({
+    StartDate: moment(currentStart).format('YYYY-MM-DD'),
+    EndDate: moment(currentStart).format('YYYY-MM-DD'),
+    ResearcherId: Number(state.selectResearcher)
+  })
+
+  if(code !== 200) return
+
+  state.eventList = [
+    ...(data.CalendarList || []),
+    ...(data.RsMattersList || []),
+  ].map((item, index) => ( { ...item, id: index }));
 };
 
 /* 点击日历表格添加活动 */
@@ -55,7 +75,7 @@ const cellClickHandle = (date) => {
   ] 
 
   uni.navigateTo({
-    url: `/pages-roadshow/addActivity/cellAdd?defaultOpt=${JSON.stringify(selectResearchers)}`,
+    url: `/pages-roadshow/addActivity/byCell?defaultOpt=${JSON.stringify(selectResearchers)}`,
   });
 };
 
@@ -76,7 +96,7 @@ const addActivityHandleByBtn = () => {
   });
 };
 
-/* 切换为本周 */
+/* 切换为今天 */
 const toogeCurrentWeek = () => {
   calendarRef.value.toogeCurrentWeek();
 };
@@ -136,8 +156,10 @@ const confirmResearcher = () => {
   state.selectResearcher = rs_picker.value.id;
 			
 	isResearcherPicker.value = false;
+  getEventList();
 }
 
+const { eventList } = toRefs(state);
 
 document.title = '研究员日历';
 </script>
@@ -145,7 +167,12 @@ document.title = '研究员日历';
 <!--  -->
 <template>
   <div class="rs-container">
-    <Calendar @dateChange="getEventList" @cellClick="cellClickHandle" ref="calendarRef"/>
+    <Calendar 
+      ref="calendarRef"
+      :eventList="eventList"
+      @dateChange="getEventList" 
+      @cellClick="cellClickHandle" 
+    />
 <!-- v-if="isWxprogram()" -->
     <div class="fix-action">
       <ul class="action-ul">