blog/src/views/plink/right.vue

<template>
  <div>
    <div id="plink" class="lianxi w-[80%] ml-[10%] mt-4 mb-4  p-2">
      <div class="t">
        <n-divider title-placement="center">
          <div class="flex items-center" @click="isAdd = !isAdd">
            我的友链
            <n-icon size="20" class="tiao mx-2">
              <more />
            </n-icon>
          </div>
        </n-divider>
      </div>
      <template v-if="isAdd">
        <div @click="getInfo" class="get text-[12px] text-right text-pp-300 pr-2 italic mb-2 underline">
          一键获取
        </div>
        <div class="px-2">
          <n-form :model="plinkData" size="tiny" label-placement="left" label-width="60">
            <n-form-item-row label="用户名">
              <n-input required v-model:value="plinkData.name" placeholder="用户名" />
            </n-form-item-row>
            <n-form-item-row label="头像url">
              <n-input v-model:value="plinkData.avater" placeholder="头像url" />
            </n-form-item-row>
            <n-form-item-row label="链接地址">
              <n-input v-model:value="plinkData.url" placeholder="链接地址" />
            </n-form-item-row>
            <n-form-item-row label="类型">
              <n-select v-model:value="plinkData.tagno" :options="tagList" />
            </n-form-item-row>
            <n-form-item-row label="标题">
              <n-input required v-model:value="plinkData.title" placeholder="标题" />
            </n-form-item-row>
            <n-form-item-row label="描述">
              <n-input type="textarea" v-model:value="plinkData.desc" placeholder="描述" />
            </n-form-item-row>
            <n-form-item-row>
              <n-button type="primary" @click="addPlink">提交</n-button>
            </n-form-item-row>
          </n-form>
        </div>
      </template>
    </div>

    <div class="lianxi w-[80%] ml-[10%] mt-4 mb-4  p-2">
      <div class="t">
        <n-divider title-placement="center">
          <div class="flex items-center" @click="isLink = !isLink">
            联系作者
            <n-icon size="20" class="tiao mx-2">
              <more />
            </n-icon>
          </div>
        </n-divider>
      </div>
      <template v-if="isLink">
        <div class="row">
          <n-icon size="20" class="orange mx-2">
            <user />
          </n-icon>
          <div class="cont">
            @ 黑心柚子
          </div>
        </div>
        <div class="row">
          <n-icon size="20" class="orange mx-2">
            <group />
          </n-icon>
          <div class="cont">
            qq群 698612437
          </div>
        </div>
        <div class="row">
          <n-icon size="20" class="orange mx-2">
            <qq />
          </n-icon>
          <div class="cont">
            2410633923
          </div>
        </div>
        <div class="row">
          <n-icon size="20" class="orange mx-2">
            <mail />
          </n-icon>
          <div class="cont">
            heixinyouzi@hxyouzi.com
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
//mark import
import group from "@/icon/group.svg";
import mail from "@/icon/mail.svg";
import more from "@/icon/more.svg";
import qq from "@/icon/qq.svg";
import user from "@/icon/user.svg";
import cookie from 'vue-cookies';

//mark data
const isLink = ref(true);
const isAdd = ref(true);
const plinkData = reactive({
  title: "",
  url: "",
  name: "",
  avater: "",
  desc: "",
  tagno: "1",
  tagname: "",
});
const tagList = ref([]);
const route = useRoute()

const { fullPath } = route;

const router = useRouter()
const { push } = router;
//mark method
async function addPlink() {
  if (!plinkData.name) {
    $msg.error("请输入用户名")
    return
  }
  if (!plinkData.avater) {
    $msg.error("请输入链接")
    return
  }
  if (!plinkData.url) {
    $msg.error("链接")
    return
  }
  if (!plinkData.title) {
    $msg.error("请输入标题")
    return
  }

  if (!plinkData.desc) {
    $msg.error("请输入描述")
    return
  }
  plinkData.tagname = tagList.value.find(i => i.key == plinkData.tagno).label
  const res = await $http.plink.addPlink(plinkData)
  if (res.code == 1) {
    $msg.success("添加成功")
    plinkData.title = ""
    plinkData.url = ""
    plinkData.name = ""
    plinkData.avater = ""
    plinkData.desc = ""
    plinkData.tagno = "1"
    plinkData.tagname = ""
  }
}
function getInfo() {
  const ui = cookie.get("userinfo")
  console.log(ui);
  if (!ui) {
    $dialog.warning({
      title: '未登录',
      content: '需要登录吗？',
      positiveText: '去登录',
      negativeText: '就不去',
      onPositiveClick: () => {
        push({
          path: "/login",
          query: {
            redirect: fullPath,
          },
        });
      },
      onNegativeClick: () => {
        return Promise.resolve()
      }
    })
    return
  }
  plinkData.name = ui.nickname
  plinkData.avater = ui.avaUrl
}


//mark 周期、内置函数等
onMounted(async () => {
  const res = await $http.plink.tagList()
  tagList.value = res.data.map(i => {
    return {
      key: i.value,
      value: i.value,
      label: i.label
    }
  })
  console.log(22222, tagList.value);
});
</script>

<style scoped lang="less">
.lianxi {
  box-shadow: @ps;
  border-radius: 4px;

  .row {
    display: flex;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
  }

  .cont:hover {
    color: @blue;
    text-decoration: underline;
    cursor: pointer;
  }
}

@keyframes bounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-3px);
  }

  60% {
    transform: translateY(-1px);
  }
}

.tiao {
  animation: bounce 1s infinite;
  /* 播放名为bounce的动画，循环无限次，每次动画时长1秒 */
}

:deep(.n-divider) {
  margin: 0px;
}

:deep(.v-binder-follower-content) {
  width: 20vw;
}



:deep(.n-button) {
  width: 80%;
  margin: 10px 10% 0;
  border-radius: 20px;
}
:deep(.n-form-item-label__text) {
  font-size: 12px;
}
:deep(.n-row){
  margin-bottom: 10px !important;
}
:deep(.n-form-item){
  align-items: center;
}
:deep(.n-card) {
  background: unset !important;
}
</style>