beelink/src/components/VideoCont.vue

  <template>
  <div class="cont">
    <div class="title">视频数据</div>
    <div class="info">
      <div class="item">
        <img src="@/static/images/livewatch.png" alt="" />
        <span> 上传时间： </span>
        <span>{{date}}</span>
        
      </div>
      <div class="item">
        <img src="@/static/images/watch.png" alt="" />
        <span>播放量</span>
        <span> {{watch}}</span>
       
      </div>
      <div class="item">
        <img src="@/static/images/share.png" alt="" />
        <span>转发量</span>
        <span>{{share}}</span>
      </div>
      <div class="item item1" v-if="status==0">
        <span>状态</span>
            <span class="status">正在审核中，情耐心等待</span>
        </div>
        <div class="item item1" v-if="status==2">
            <span>状态</span>
            <span class="status1">审核未通过</span>
        </div>
        <div class="item item1" v-if="status==1">
            <span style="flex-shrink:0">原因</span>
            <span class="status">您的视频中含有大量敏感词汇，请修改后再次上传，感谢您对Beelink的技术支持 </span>
      </div>
    </div>
    <div class="button">
      <div class="modify" @click="update(videoid)">修改该视频</div>
      <div class="del" @click="drop(videoid)">删除该视频</div>
      <a-modal
        title="确认删除"
        v-model:visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        okText="确定"
        cancelText="取消"
      >
        <p>您确认删除该视频吗？</p>
      </a-modal>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.cont {
  width: 316px;
  height: 563px;
  background-color: #fff;
  border-radius: 17px;
  padding: 0 28px;
  position: relative;
  .title {
    padding: 23px 0 11px 0;
    font-size: 13px;
    color: #111;
    line-height: 1;
    border-bottom: 1px solid #eee;
  }
  .info {
      .item1{
          position: relative;
          left:-12px
      }
      .status{
          color: #07AD97!important;
        //   font-weight: bold;
      }
      .status1{
          color: #D12C2D!important;
      }
    .item {
      display: flex;
      align-content: center;
      margin-top: 23px;
      > img {
        width: 24px;
        height: 24px;
        // background-color: #0f0;
      }
      > span {
        font-size: 11px;
        color: #666;
        margin-left: 10px;
      }
    }
  }
  .button {
    position: absolute;
    width: 260px;
    bottom: 28px;
    display: flex;
    justify-content: space-between;
    > div {
      width: 114px;
      height: 23px;
      border-radius: 3px;
      font-size: 10px;
      color: #fff;
      line-height: 23px;
      text-align: center;
    }
    .modify {
      background-color: #08ae98;
    }
    .del {
      background-color: #d12c2e;
    }
  }
}
</style>
<script lang="ts">
import { videodel } from '@/api';
import router from '@/router';
import { defineComponent, ref } from "vue";
import { useRoute } from 'vue-router';

export default defineComponent({
    props:{
        date:{
            type:String
        },
        watch:{
            type:Number
        },
        share:{
            type:Number
        },
        status:{
            type:Number
        },
        videoid:{
            type:Number
        }
    },
    setup(){
        console.log(1)
        const visible = ref(false);
        const confirmLoading = ref(false);
        let id = 0;
        function drop(e: number){
            console.log(e);
            id = e;
            visible.value = true;
        }
        function update(e: number) {
             router.push("/mine/video?id="+e)
        }
        function handleOk() {
         
          confirmLoading.value = true;
            videodel(id).then(()=>{
              visible.value = false;
              confirmLoading.value = false;
              router.back()
            })
        }
        return{
            drop,
            update,
            confirmLoading,
            visible,
            handleOk
        }
    }
});
</script>