xiangyuan-app/src/pages/dig/components/TaskList.vue

<script setup lang="ts">
import Button from '@/components/basic/Button.vue';
import Icon from '@/components/basic/Icon.vue';
import ImageButton from '@/components/basic/ImageButton.vue';
import Text from '@/components/basic/Text.vue';
import BackgroundBox from '@/components/display/block/BackgroundBox.vue';
import Touchable from '@/components/feedback/Touchable.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Height from '@/components/layout/space/Height.vue';
import Width from '@/components/layout/space/Width.vue';

defineEmits(['click'])
defineProps({
  icon: {
    type: String,
    default: 'task-summary',
  },
  title: {
    type: String,
    default: '村社概况',
  },
  desc: {
    type: String,
    default: '探索村社的历史渊源与发生轨迹',
  },
  button: {
    type: Boolean,
    default: true,
  },
  enable: {
    type: Boolean,
    default: true,
  },
  extra: {
    type: String,
    default: '',
  },
  goButtonText: {
    type: String,
    default: '去完成',
  },
})
</script>

<template>
  <BackgroundBox
    backgroundImage="https://xy.wenlvti.net/app_static/images/village/BoxMid.png"
    :backgroundCutBorder="[10,10,10,10]"
    :backgroundCutBorderSize="[10,10,10,10]"
  >
    <Touchable 
      :padding="25" 
      :touchable="button && enable"
      direction="row"
      justify="space-between" 
      align="center"
      @click="$emit('click')"
    >
      <FlexRow align="center">
        <FlexCol center radius="50%" backgroundColor="#efefef" :padding="20">
          <Icon :icon="icon || 'help-filling'" color="primary" type="material" :size="50" />
        </FlexCol>
        <Width :width="20" />
        <FlexCol class="info">
          <Text class="title" :fontSize="36" color="text.title" :text="title" />
          <Height :height="10" />
          <Text class="desc" :fontSize="24" color="text.second" :text="desc" />
        </FlexCol>
      </FlexRow>
      <FlexRow align="center" :flexShrink="0" :gap="15">
        <Text v-if="extra" class="extra" :fontSize="24" color="text.second" :text="extra" />
        <ImageButton 
          v-if="button" 
          src="https://xy.wenlvti.net/app_static/images/village/BoxButton.png"
          :touchable="enable"
          :width="140"
          :height="75"
          @click="$emit('click')"
        >  
          <FlexCol position="absolute" inset="0" center>
            <Text :text="enable ? goButtonText : '未开放'" fontConfig="contentText" color="white" />
          </FlexCol>
        </ImageButton>
      </FlexRow>
    </Touchable>
  </BackgroundBox>
</template>