minnan/src/pages/parts/LikeFooter.vue

<template>
  <FlexCol position="fixed" :bottom="0" :left="0" :right="0" backgroundColor="#f5ebe0" :padding="[20,20,0,20]">
    <FlexRow justify="space-between">
      <FlexRow align="center">
      
      </FlexRow>
      <FlexRow align="center">
        <Touchable direction="row" :gap="10" :padding="[0,10]" @click="doLike">
          <Icon icon="good" :color="content.isLike ? 'primary' : 'text.content'" />
          <Text :text="likes" :color="content.isLike ? 'primary' : 'text.content'" />
        </Touchable>
        <Touchable direction="row" :gap="10" :padding="[0,10]" @click="doCollect">
          <Icon icon="favorite" :color="content.isCollect ? 'warning' : 'text.content'" />
          <Text text="收藏" :color="content.isCollect ? 'warning' : 'text.content'" />
        </Touchable>
        <button class="remove-button-style" direction="row" open-type="share">
          <FlexRow :gap="10" align="center" :padding="[0,10]" >
            <Icon icon="share" color="text.content" />
            <Text text="分享" />
          </FlexRow>
        </button>
      </FlexRow>
    </FlexRow>
    <XBarSpace />
  </FlexCol>
</template>

<script setup lang="ts">
import type { GetContentDetailItem } from '@/api/CommonContent';
import { computed, type PropType } from 'vue';
import { toast } from "@/components/utils/DialogAction";
import UserApi from "@/api/user/UserApi";
import Icon from "@/components/basic/Icon.vue";
import FlexRow from "@/components/layout/FlexRow.vue";
import XBarSpace from "@/components/layout/space/XBarSpace.vue";
import FlexCol from "@/components/layout/FlexCol.vue";
import Touchable from "@/components/feedback/Touchable.vue";
import Text from '@/components/basic/Text.vue';

const props = defineProps({
  content: {
    type: Object as PropType<GetContentDetailItem>,
    default: () => ({
      isLike: false,
      likes: 0,
    }),
  }
})

const likes = computed(() => formatNumber(props.content.likes));

async function doLike() {
  const content = props.content;
  if (!content)
    return;
  try {
    if (content.isLike) {
      await UserApi.unlike(content.id);
      toast('取消点赞');
      content.isLike = false;
      content.likes--;
    } else {
      await UserApi.like(content.id);
      content.isLike = true;
      content.likes++;
      toast('感谢点赞');
    }
  } catch (error) {
    toast('操作失败' + error);
  }
}
async function doCollect() {
  const content = props.content;
  if (!content)
    return;
  console.log(content);
  
  try {
    if (content.isCollect) {
      await UserApi.uncollect(content.id);
      toast('取消收藏');
      content.isCollect = false;
    } else {
      await UserApi.collect(content.id);
      content.isCollect = true;
      toast('收藏成功');
    }
  } catch (error) {
    toast('操作失败' + error);
  }
}
function formatNumber(num: number) {
  num = Math.max(num, 0);
  if (num >= 10000) 
    return (num / 10000).toFixed(2) + '万';
  return num.toString();
}
</script>