shuibei_share/components/followBtn/index.vue

<template>
  <view class="follow-container" v-show="!isOwner">
    <!-- 关注按钮 -->
    <view
      @click="handleFollow"
      :class="['follow-box', isFollowed ? 'follow' : '', currentStyle]"
      :style="currentStyle"
    >
      <text>
        <template v-if="textType === 'default'">{{
          isFollowed ? "已关注" : "关注"
        }}</template>
        <!-- 粉丝列表展示文案不一样 -->
        <template v-else>
          <template v-if="isFollowed">互相关注</template>
          <template v-else>回关</template>
        </template>
      </text>
    </view>

    <!-- 取关确认弹窗 -->
    <up-modal
      :showCancelButton="true"
      confirmText="不再关注"
      cancelText="取消"
      @confirm="confirmFollowModal"
      @cancel="cancelFollowModal"
      :show="showFollowModal"
      title="不再关注该作者?"
    >
    </up-modal>
  </view>
</template>

<script setup>
import { ref, watch, computed, onMounted } from "vue";
// import { setUserState } from "@/api/book";
import { useToast } from "@/hooks/useToast";
// import { useAppStore } from "@/stores/app";

const defaultActiveStyle = {
  border: "1px solid #999",
  color: "#333",
};

const defaultInactiveStyle = {
  border: "1px solid #ff2442",
  color: "#ff2442",
};

const { Toast } = useToast();

// const appStore = useAppStore();

// 定义props
const props = defineProps({
  // 是否已关注
  followed: {
    type: Boolean,
    default: false,
  },
  // 被关注用户ID
  followedId: {
    type: [String, Number],
    required: true,
  },
  textType: {
    type: String,
    default: "default", // 可选值 fans
  },
  showBtn: {
    type: Boolean,
    default: true,
  },
  activeStyle: {
    type: Object,
    default: () => ({}),
  },
  inactiveStyle: {
    type: Object,
    default: () => ({}),
  },
});
const isOwner = computed(() => {
  // return Number(props.followedId) === Number(appStore.uid);
});

const currentStyle = computed(() => {
  if (isFollowed.value) {
    return { ...defaultActiveStyle, ...(props.activeStyle || {}) };
  } else {
    return { ...defaultInactiveStyle, ...(props.inactiveStyle || {}) };
  }
});

// 定义事件
const emit = defineEmits(["update:followed", "follow-change"]);

// 响应式数据
const isFollowed = ref(props.followed);
const showFollowModal = ref(false);
const followLoading = ref(false);

// 监听props变化
watch(
  () => props.followed,
  (newVal) => {
    isFollowed.value = newVal;
  }
);

// 点击关注按钮事件
async function handleFollow() {
  console.log("点击关注按钮");
  if (isFollowed.value) {
    showFollowModal.value = true;
  } else {
    // setFollowState();
  }
}

// 确认取关事件
function confirmFollowModal() {
  showFollowModal.value = false;
  // setFollowState();
}

// 取消事件
function cancelFollowModal() {
  showFollowModal.value = false;
}

// 关注/取关请求
// async function setFollowState() {
//   try {
//     if (followLoading.value) return;
//     followLoading.value = true;
//     if (!props.followed && isOwner.value) {
//       return Toast({ title: "无法关注自己!" });
//     }

//     const res = await setUserState({
//       type: 2,
//       followedId: props.followedId,
//     });

//     isFollowed.value = !isFollowed.value;
//     // 触发父组件更新
//     emit("update:followed", isFollowed.value);
//     emit("follow-change", isFollowed.value);

//     // 触发全局事件，通知其他页面更新关注状态
//     uni.$emit('followStateChanged', {
//       userId: props.followedId,
//       followMark: isFollowed.value
//     });

//     followLoading.value = false;
//   } catch (error) {
//     console.error("follow error", error);
//     followLoading.value = false;
//     Toast({ title: "操作失败", icon: "none" });
//   }
// }
</script>

<style lang="scss" scoped>
.follow-container {
  .follow-box {
    padding: 4rpx 25rpx;
    border: 1px solid #ff2442;
    border-radius: 50rpx;
    color: #ff2442;
    margin-right: 10rpx;
    cursor: pointer;
    transition: all 0.3s ease;

    &.follow {
      border-color: #999;
      color: #333;
    }

    text {
      font-size: 14px;
    }
  }
}

::v-deep
  .u-modal__button-group__wrapper--confirm
  .u-modal__button-group__wrapper__text {
  color: #ff2442 !important;
}
</style>