ptSend/view/src/page/subscribe/addSubscribe.vue

<template>
  <el-empty v-if="list.length===0" description="没有搜索到内容"/>
  <div>
    <div class="list">
      <div class="item" v-for="i in list">
        <el-card @click="getInfo(i.id,i.img)" shadow="hover" :body-style="{ padding: '0px' }">
          <img :src="i.img" class="image"/>
          <div style="padding: 14px">
            <span style="width: 100%;white-space: nowrap;text-overflow:ellipsis;">{{ i.title }}</span>
            <div class="bottom">
              <time class="time">上映时间：{{ i.year }}</time>
              <el-button text class="button">详情</el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <el-dialog v-model="dialogFormVisible" title="添加订阅">
      <div style="display: flex;align-items: center;padding: 5px">
        <el-input style="width: 100%" v-model="enName">
          <template #prepend>英文名</template>
        </el-input>

      </div>
      <div style="display: flex;align-items: center;padding: 5px">
        <el-input style="width: 100%" v-model="subtitle">
          <template #prepend>副标题</template>
        </el-input>
      </div>
      <div style="display: flex;align-items: center;padding: 5px">
        <el-input style="width: 100%" v-model="url">
          <template #prepend>播放地址</template>
        </el-input>
      </div>
      <div style="display: flex;align-items: center;padding: 5px">
        <el-time-picker v-model="time" placeholder="Arbitrary time"/>
        <el-input style="width: 20%;left:10px" v-model="year">
          <template #prepend>年份</template>
        </el-input>
        <el-input style="width:15%;left:20px" v-model="season">
          <template #prepend>季</template>
        </el-input>
        <el-input style="width: 30%;left:30px" v-model="ep">
          <template #prepend>订阅位置(集)</template>
        </el-input>
      </div>
      <el-input
          :autosize="{ minRows: 10 ,maxRows:10}"
          v-model="info"
          :rows="2"
          type="textarea"
          placeholder="Please input"
      />

      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">关闭</el-button>
                    <el-button type="primary" @click="addsubscribe">
                        订阅
                    </el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {addSubscribe, getImdbName, getVideoInfo, searchVideo} from '../../api/Video.js'
import {onBeforeRouteUpdate, useRoute} from "vue-router";
import {ElLoading, ElMessage} from "element-plus";
import dayjs from "dayjs";
import {Calendar} from "@element-plus/icons-vue";

let list = ref([])
const info = ref("")
const route = useRoute()
const year = ref("")
const ep = ref(1)
const season = ref(1)
const url = ref("")
const subtitle = ref("")
const img = ref("")
const time = ref("")
const name = ref("")
const count = ref(0)

async function onSubmit(name) {
  let res = await searchVideo(name)
  list.value = res.data.data
}


onSubmit(route.query.name)
onBeforeRouteUpdate(next => {
  onSubmit(next.query.name)
})


let vid = "";
const dialogFormVisible = ref(false)


async function getInfo(id, i) {
  const loadingInstance = ElLoading.service({fullscreen: true})
  vid = id
  img.value = i
  let res = await getVideoInfo(id)
  info.value = res.data.format
  year.value = res.data.year
  console.info(res.data.trans_title.length)
  if (res.data.trans_title.length === 0) {
    subtitle.value = res.data.this_title.join(" / ")
  } else {
    subtitle.value = res.data.this_title.join(" / ") + " / " + res.data.trans_title.join(" / ")
  }


  count.value = res.data.episodes
  name.value = res.data.chinese_title
  enName.value = ""
  if (res.data.imdb_link) {
    await subscribe(res.data.imdb_link)
  }
  dialogFormVisible.value = true
  loadingInstance.close()
}

const enName = ref("")

async function subscribe(url) {
  const res = await getImdbName(url)
  enName.value = res.data
}

async function addsubscribe() {
  let data = {
    name: name.value,
    rename: enName.value,
    desc: info.value,
    year: year.value,
    season: season.value,
    ep: ep.value,
    url: url.value,
    img: img.value,
    subtitle: subtitle.value,
    time: dayjs(time.value).format("HH:mm:ss"),
    skip: season.value,
    sid: vid,
    count: count.value
  }
  for (let i in data) {
    if (!data[i]) {
      ElMessage({
        message: '请完整填写内容！',
        type: 'error',
      })
      return
    }
  }
  let res = await addSubscribe(data)
  if (res.data == "添加成功") {
    ElMessage({
      message: res.data,
      type: 'success',
    })
  } else {
    ElMessage({
      message: res.data,
      type: 'error',
    })
  }
}

</script>

<style lang="scss" scoped>
.list {
  display: flex;
  flex-wrap: wrap;

  .item {
    width: 200px;
    margin: 20px;

    & img {
      height: 300px;
    }
  }
}

.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
  min-width: 40px;
}

.image {
  width: 100%;
  display: block;
}</style>