xiangyuan-app/src/common/components/parts/Box2LineLargeImageUserShadow.vue

<template>
  <Touchable 
    :padding="20"
    :flexShrink="fixSize ? 0 : undefined"
    :flexGrow="fixSize ? undefined : 1"
    :gap="10"
    radius="radius.md"
    overflow="hidden"
    position="relative"
    backgroundColor="white"
    :innerClass="[
      'grid4-item',
      classNames,
    ]"
    :innerStyle="{ 
      height: 'calc(100% - 20rpx)',
      width: fixSize ? undefined : 'calc(100% - 40rpx)',
    }"
    direction="column"
    @click="$emit('click')"
  >
    <Image 
      v-if="image" 
      :height="300" 
      width="100%"
      radius="radius.md"
      :src="image" 
      mode="aspectFill" 
    />
    <Image 
      v-if="videoMark" 
      :width="60" 
      :src="PlayVideo" 
      class="video-mark"
      mode="widthFix" 
    />
    <FlexRow v-if="userName" align="center" :gap="20">
      <Image width="60" :src="userHead" mode="widthFix" />
      <Text fontConfig="subText">{{ userName }}</Text>
    </FlexRow>
    <Text 
      :color="titleColor"
      :fontConfig="title1 || desc ? 'h4' : 'subText'"
      :lines="title1 || desc ? 1 : 2"
    >
      {{ title }}
    </Text>
    <FlexRow
      v-if="badge" 
      position="absolute"
      :top="0"
      :right="0"
      :margin="15"
      radius="radius.lg" 
      :padding="15"
      backgroundColor="background.primary" 
    >
      <Text 
        color="primary" 
        fontConfig="subText"
        :lines="1"
        :text="badge" 
      />
    </FlexRow>
    <Text v-if="desc" color="second" :lines="2">{{ desc }}</Text>
    <FlexRow v-if="likes !== undefined && comment !== undefined" :gap="20">
      <Image width="40" :src="IconHeart" mode="widthFix" />
      <Text fontConfig="subText">{{ likes }}</Text>
      <Image width="40" :src="IconChat" mode="widthFix" />
      <Text fontConfig="subText">{{ comment }}</Text>
    </FlexRow>
    <RoundTags v-if="tags" :tags="tags" small />
    <FlexRow v-if="bottomTime" :gap="20">
      <Image width="40" :src="IconTime" mode="widthFix" />
      <Text fontConfig="subText">{{ bottomTime }}</Text>
    </FlexRow>
    <FlexRow v-if="bottomLocate" justify="space-between" :gap="20">
      <FlexRow align="center" :gap="20">
        <Image width="40" :src="IconLocation" mode="widthFix" />
        <Text fontConfig="subText">{{ bottomLocate }}</Text>
      </FlexRow>
      <FlexRow align="center" :gap="20">
        <Image width="40" :src="IconStar" mode="widthFix" />
        <Text fontConfig="subText">{{ bottomScore }}</Text>
      </FlexRow>
    </FlexRow> 
  </Touchable>
</template>

<script setup lang="ts">
import type { PropType } from 'vue';
import RoundTags from './RoundTags.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Image from '@/components/basic/Image.vue';
import Text from '@/components/basic/Text.vue';
import Touchable from '@/components/feedback/Touchable.vue';

const IconHeart = 'https://mncdn.wenlvti.net/app_static/minnan/images/discover/IconHeart.png';
const IconChat = 'https://mncdn.wenlvti.net/app_static/minnan/images/discover/IconChat.png';
const IconLocation = 'https://mncdn.wenlvti.net/app_static/minnan/images/inhert/IconLocation.png';
const IconTime = 'https://mncdn.wenlvti.net/app_static/minnan/images/inhert/IconTime.png';
const IconStar = 'https://mncdn.wenlvti.net/app_static/minnan/images/inhert/IconStar.png';
const PlayVideo = 'https://mncdn.wenlvti.net/app_static/minnan/images/inhert/PlayVideo.png';

defineProps({
  classNames: {
    type: String,
  },
  title: {
    type: String,
  },
  titleColor: {
    type: String,
    default: 'primary',
  },
  title1: {
    type: Boolean,
    default: false,
  },
  fixSize: {
    type: Boolean,
    default: false,
  },
  badge: {
    type: String,
    default: '',
  },
  tags: {
    type: Array as PropType<string[]>,
    default: [],
  },
  videoMark: {
    type: Boolean,
    default: false,
  },
  desc: {
    type: String,
  },
  image: {
    type: String,
  },
  likes: {
    type: Number,
  },
  comment: {
    type: Number,
  },
  userHead: {
    type: String,
  },
  userName: {
    type: String,
  },
  bottomLocate: {
    type: String,
  },
  bottomScore: {
    type: String,
  },
  bottomTime: {
    type: String,
  },
})
</script>

<style scoped>
.video-mark {
  position: absolute;
  left: calc(50% - 20rpx);
  top: 145rpx
}
</style>