<template>
  <view class="creation-page" :style="{ paddingTop: navBarHeight + 'px' }">
    <view
      class="custom-nav"
      :style="{
        height: navBarHeight + 'px',
        paddingTop: statusBarHeight + 'px',
      }"
    >
      <text class="nav-title">创作中心</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { getBavBarHeight, getStatusBarHeight } from "@/utils/system";
import {
  onShareAppMessage,
  onShareTimeline,
  onLoad,
} from "@dcloudio/uni-app";

const navBarHeight = ref(getBavBarHeight());
const statusBarHeight = ref(getStatusBarHeight());

onLoad((options) => {
  uni.$trackRecord({
    eventName: "creation_page_visit",
    eventType: `visit`,
  })
});

onShareAppMessage(async () => {
  const shareToken = await getShareToken("creation");
  getShareReward();
  return {
    title: "分享",
    path: "/pages/creation/index?shareToken=" + shareToken,
  };
});

onShareTimeline(async () => {
  const shareToken = await getShareToken("creation");
  getShareReward();
  return {
    title: "分享",
    query: `shareToken=${shareToken}`,
  };
});

</script>

<style lang="scss" scoped>
.creation-page {
  min-height: 100vh;
  background-color: #fbfbfb;
  padding-bottom: 40rpx;
}

.custom-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #fbfbfb;
  display: flex;
  align-items: center;
  padding: 0 32rpx;
  justify-content: space-between;

  .nav-title {
    font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }

  .search-icon {
    width: 64rpx;
    height: 64rpx;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  }
}
</style>
