raiwechat_link_h5/src/views/ssbg/roadshow/myCalendar.vue

<script setup>
import { ref,onMounted } from 'vue';
import { Icon } from 'vant';
import { useRoute } from 'vue-router';
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');

const calendarRef = ref(null);//日历ref
const actionsList = ref([
  {
    label: '今天',
    key: 'weeknow',
    show: true,
  },
  {
    label: '添加事项',
    key: 'add_matter',
		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 showCalendar = ref(true);

onMounted(() => {
  showCalendar.value = localStorage.getItem('ssbg-role') === 'admin' ? false : true;
})

/* 获取日历日程列表 */
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: addMatterHandle
  };
  deal_methods_handles[type]();
}

const addMatterHandle = () => {
  wx.miniProgram.navigateTo({
    url: '/pages-roadshow/addMatter/index',
  });
}

/* 切换为今天 */
const toogeCurrentWeek = () => {
  calendarRef.value.toogeCurrentWeek();
};

/* 进入活动列表 */
const switchTabHandle = (key) => {
  wx.miniProgram.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>

		<Calendar
    ref="calendarRef"
    :eventList="eventList"
    @dateChange="getEventList"
    v-if="showCalendar"
    />

    <div class="fix-action" v-if="isWxprogram() && showCalendar">
      <ul class="action-ul">
        <li
          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
            class="item-img"
            src="@/assets/ssbg/calendar_ico.png"
            alt=""
            v-else-if="item.key === 'weeknow'"
          />
          {{ item.label }}
        </li>
      </ul>
    </div>
	</div>
</template>
<style scoped lang="scss">
.mycalendar-container {
  .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;
				}
			}
		}
  } 
	.fix-action {
    height: 160px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99;
    background-color: #fff;
    box-shadow: 0px -3px 6px rgba(172, 172, 172, 0.16);
    padding-top: 20px;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    .action-ul {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;
      color: #3385ff;
      li:hover {
        opacity: 0.8;
      }
      .item-icon {
        font-size: 52px;
        display: block;
        text-align: center;
        margin: 0 auto 10px;
      }
      .item-img {
        display: block;
        width: 46px;
        height: 46px;
        margin: 0 auto 10px;
      }
    }
  }
}
</style>