YY_MP_REFACTOR/src/pages/index/components/WorkbenchTaskSection.vue

<template>
  <view class="workbench-task-section">
    <view class="workbench-task-section-header" @click="onTakePhoto">
      <view class="workbench-task-section-title">任务实施</view>
      <view class="workbench-task-section-action">
        <wd-icon name="camera-fill" color="#fff" size="40rpx"></wd-icon>
        <text class="workbench-task-section-action-text">拍照留存</text>
      </view>
    </view>

    <view class="workbench-task-list">
      <view
        v-for="item in currentTaskList"
        :key="item.key"
        class="workbench-task-item"
        :style="{
          backgroundImage: 'url(' + item.backgroundImage + ')',
        }"
        @click="onSelectTask(item)"
      />
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

import { useUserStore } from '@/stores/modules/user'

import { DEFAULT_WORKBENCH_TASKS, INVESTMENT_MANAGER_TASKS } from '../workbench/workbench.config'

const emit = defineEmits<{
  (e: 'select-task', item: (typeof currentTaskList.value)[number]): void
}>()

const userStore = useUserStore()

const isInvestmentManager = computed(() => {
  const user = userStore.currentUserInfo
  return Boolean(user?.roles?.includes(31))
})

const currentTaskList = computed(() => {
  return isInvestmentManager.value ? INVESTMENT_MANAGER_TASKS : DEFAULT_WORKBENCH_TASKS
})

const onSelectTask = (item: (typeof currentTaskList.value)[number]) => {
  emit('select-task', item)
}

const navigatingToPhoto = ref(false)
const onTakePhoto = () => {
  if (navigatingToPhoto.value) return
  navigatingToPhoto.value = true
  uni.navigateTo({
    url: '/pages/index/photo/index',
    complete: () => {
      navigatingToPhoto.value = false
    },
  })
}
</script>
<style lang="scss" scoped>
.workbench-task-section {
  padding: 0 30rpx;
  margin-top: 30rpx;

  .workbench-task-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80rpx;
    margin-bottom: 30rpx;

    .workbench-task-section-title {
      color: var(--font-color-333);
      font-size: 36rpx;
      font-weight: 600;
    }

    .workbench-task-section-action {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 185rpx;
      height: 60rpx;
      padding: 10rpx 20rpx;
      border-radius: 30rpx;
      background-color: var(--main-color);
      font-size: 24rpx;
    }

    .workbench-task-section-action-text {
      color: #fff;
    }
  }

  .workbench-task-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;

    .workbench-task-item {
      width: 328rpx;
      height: 224rpx;
      margin-bottom: 30rpx;
      background-size: 100% 100%;
    }
  }
}
</style>