@@ -3,19 +3,41 @@  
		
	
		
			
			    <!-- 搜索框 -->  
		
	
		
			
			    <div class="top">  
		
	
		
			
			      <div class="flex justify-between" style="width: 300px">  
		
	
		
			
			        <el-input v-model="title" :placeholder="$t('myCreating.typeTitle')" />  
		
	
		
			
			        <el-icon class="icon-edit"><i-ep-edit /></el-icon>  
		
	
		
			
			        <el-input  
		
	
		
			
			          v-model="title"  
		
	
		
			
			          :placeholder="$t('myCreating.search')"  
		
	
		
			
			          @keyup.enter="searchVideoList"  
		
	
		
			
			        />  
		
	
		
			
			        <el-icon class="icon-edit" @click="searchVideoList"  
		
	
		
			
			          ><i-ep-search  
		
	
		
			
			        /></el-icon>  
		
	
		
			
			      </div>  
		
	
		
			
			    </div>  
		
	
		
			
			    <!-- 作品列表 -->  
		
	
		
			
			    <div class="workList flex">  
		
	
		
			
			      <div class="workItem" v-for="item in 12" :key="item">  
		
	
		
			
			      <div class="workItem" v-for="item in videoList" :key="item.id ">  
		
	
		
			
			        <div class="workImg">  
		
	
		
			
			          <img class="inmiddle" src="" alt="" />  
		
	
		
			
			          <img  
		
	
		
			
			            v-if="item.coverImg"  
		
	
		
			
			            class="coverImg inmiddle"  
		
	
		
			
			            :src="item.coverImg"  
		
	
		
			
			            alt=""  
		
	
		
			
			          />  
		
	
		
			
			          <img  
		
	
		
			
			            v-else  
		
	
		
			
			            class="takePlace inmiddle"  
		
	
		
			
			            src="@/assets/img/left-top-logo.png"  
		
	
		
			
			            alt=""  
		
	
		
			
			          />  
		
	
		
			
			        </div>  
		
	
		
			
			 
		
	
		
			
			        <div :class="'statusName ' + item.statusName">  
		
	
		
			
			          {{ $t("myCreating." + item.statusName) }}  
		
	
		
			
			        </div>  
		
	
		
			
			 
		
	
		
			
			        <div class="workInfo flex">  
		
	
		
			
			          <span>{{ $t("myCreating.name") }}</span>  
		
	
		
			
			          <span>{{ $t("myCreating.date") }}</span>  
		
	
		
			
			          <span>{{ item.title  }}</span>  
		
	
		
			
			          <span>{{ item.createDate  }}</span>  
		
	
		
			
			        </div>  
		
	
		
			
			        <!-- 更多遮罩层 -->  
		
	
		
			
			        <div  
		
	
	
		
			
				
				
				
				
					 
			
			@@ -26,13 +48,16 @@  
		
	
		
			
			          <el-icon class="icon-videoPlay"><i-ep-videoPlay /></el-icon>  
		
	
		
			
			          <div class="showBtn" @click.stop="mouseenter(item)">...</div>  
		
	
		
			
			          <div class="btns" v-show="showPopup">  
		
	
		
			
			            <div class="btns-item">  
		
	
		
			
			            <div class="btns-item" @click.stop="handleDownload(item.id)" >  
		
	
		
			
			              <div class="btns-item-icon">  
		
	
		
			
			                <el-icon class="icon-delete"><i-ep-download /></el-icon>  
		
	
		
			
			              </div>  
		
	
		
			
			              <div class="text">{{ $t("myCreating.download") }}</div>  
		
	
		
			
			            </div>  
		
	
		
			
			            <div class="btns-item">  
		
	
		
			
			            <div  
		
	
		
			
			              class="btns-item"  
		
	
		
			
			              @click.stop="handelDelete(item.id, item.title)"  
		
	
		
			
			            >  
		
	
		
			
			              <div class="btns-item-icon">  
		
	
		
			
			                <el-icon class="icon-delete"><i-ep-delete /></el-icon>  
		
	
		
			
			              </div>  
		
	
	
		
			
				
				
				
				
					 
			
			@@ -47,24 +72,38 @@  
		
	
		
			
			      destroy-on-close  
		
	
		
			
			      class="elDialog"  
		
	
		
			
			      v-model="showDialog"  
		
	
		
			
			      :title="presentVideo "  
		
	
		
			
			      :title="presentItem.title "  
		
	
		
			
			      width="40%"  
		
	
		
			
			      center  
		
	
		
			
			    >  
		
	
		
			
			      <div class="videoBox">  
		
	
		
			
			        <video  
		
	
		
			
			          v-if="presentItem.videoPlayUrl"  
		
	
		
			
			          controls="true"  
		
	
		
			
			          class=""  
		
	
		
			
			          src="https://wenlian.wenzhou.gov.cn:8001/upload/video/%E3%80%8A%E7%93%AF%E8%B6%8A%E4%B9%8B%E5%8D%8E%E3%80%8B%E7%89%87%E8%8A%B11.mp4 "  
		
	
		
			
			          :src="presentItem.videoPlayUrl "  
		
	
		
			
			        ></video>  
		
	
		
			
			        <div v-else class="insteadVideo">  
		
	
		
			
			          {{ $t("myCreating." + presentItem.statusName + "Text") }}  
		
	
		
			
			          <span v-if="presentItem.videoStatus == 3">{{  
		
	
		
			
			            presentItem.videoMsg  
		
	
		
			
			          }}</span>  
		
	
		
			
			        </div>  
		
	
		
			
			      </div>  
		
	
		
			
			      <template #footer>  
		
	
		
			
			      <template #footer v-if="presentItem.videoPlayUrl" >  
		
	
		
			
			        <span class="dialog-footer">  
		
	
		
			
			          <button class="elBtn" type="primary" @click="showDialog = false">  
		
	
		
			
			          <button  
		
	
		
			
			            class="elBtn"  
		
	
		
			
			            type="primary"  
		
	
		
			
			            @click.stop="handleDownload(presentItem.id)"  
		
	
		
			
			          >  
		
	
		
			
			            <el-icon class="icon-delete"><i-ep-download /></el-icon  
		
	
		
			
			            >{{ $t("myCreating.download") }}  
		
	
		
			
			          </button>  
		
	
		
			
			          <button class="elBtn" @click="showDialog = false">  
		
	
		
			
			          <button  
		
	
		
			
			            class="elBtn"  
		
	
		
			
			            @click.stop="handelDelete(presentItem.id, presentItem.title)"  
		
	
		
			
			          >  
		
	
		
			
			            <el-icon class="icon-delete"><i-ep-delete /></el-icon  
		
	
		
			
			            >{{ $t("myCreating.delete") }}  
		
	
		
			
			          </button>  
		
	
	
		
			
				
				
				
				
					 
			
			@@ -74,32 +113,121 @@  
		
	
		
			
			  </div>  
		
	
		
			
			</template>  
		
	
		
			
			<script setup>  
		
	
		
			
			import { userPhotoVideoList, delUserPhotoVideoByID } from "@/apis/myCreating";  
		
	
		
			
			import { timestampToTime } from "@/utils/tools";  
		
	
		
			
			import { useI18n } from "vue-i18n";  
		
	
		
			
			import { getStatus } from "./videoStatus";  
		
	
		
			
			// 当前语言状态与国际化组件  
		
	
		
			
			const { locale } = useI18n();  
		
	
		
			
			const lanChange = ref(locale);  
		
	
		
			
			 
		
	
		
			
			let title = ref("");  
		
	
		
			
			let pageSize = ref(100);  
		
	
		
			
			let pageNum = ref(1);  
		
	
		
			
			// 弹窗显示隐藏  
		
	
		
			
			let showDialog = ref(false);  
		
	
		
			
			// 当前作品  
		
	
		
			
			let presentVideo = ref("");  
		
	
		
			
			// 点击作品事件  
		
	
		
			
			let presentItem = ref("");  
		
	
		
			
			// 作品列表  
		
	
		
			
			const videoList = ref([]);  
		
	
		
			
			 
		
	
		
			
			// 点击作品  
		
	
		
			
			function clickVideoItem(item) {  
		
	
		
			
			  showDialog.value = true;  
		
	
		
			
			  presentVideo.value = item;  
		
	
		
			
			  presentItem .value = item;  
		
	
		
			
			}  
		
	
		
			
			 
		
	
		
			
			// 删除框是否显示  
		
	
		
			
			let showPopup = ref(false);  
		
	
		
			
			function mouseleave() {  
		
	
		
			
			  showPopup.value = false;  
		
	
		
			
			}  
		
	
		
			
			 
		
	
		
			
			function mouseenter(item) {  
		
	
		
			
			  presentVideo .value = item;  
		
	
		
			
			  presentItem .value = item;  
		
	
		
			
			  showPopup.value = !showPopup.value;  
		
	
		
			
			}  
		
	
		
			
			 
		
	
		
			
			function handleDownload() {}  
		
	
		
			
			 
		
	
		
			
			function searchVideoList() {  
		
	
		
			
			  getPhotoVideoList(pageSize.value, pageNum.value, title.value, true);  
		
	
		
			
			}  
		
	
		
			
			 
		
	
		
			
			function handelDelete(id, title) {  
		
	
		
			
			  const msg =  
		
	
		
			
			    lanChange.value == "zh-cn"  
		
	
		
			
			      ? `确定要删除这个作品吗? 作品标题:${title}`  
		
	
		
			
			      : `Are you sure to delete this video ? Title:${title};`;  
		
	
		
			
			  const notice = lanChange.value == "zh-cn" ? "提示" : "Notice";  
		
	
		
			
			  const confirm = lanChange.value == "zh-cn" ? "确定" : "Confirm";  
		
	
		
			
			  const cancel = lanChange.value == "zh-cn" ? "取消" : "Cancel";  
		
	
		
			
			  ElMessageBox.confirm(msg, notice, {  
		
	
		
			
			    confirmButtonText: confirm,  
		
	
		
			
			    cancelButtonText: cancel,  
		
	
		
			
			  }).then(() => {  
		
	
		
			
			    delPhotoVideo(id);  
		
	
		
			
			  });  
		
	
		
			
			}  
		
	
		
			
			 
		
	
		
			
			/**  
		
	
		
			
			 * @description:获取我的视频作品  
		
	
		
			
			 * @return: data  
		
	
		
			
			 */  
		
	
		
			
			function getPhotoVideoList(pageSize, pageNum, title, searchFlag) {  
		
	
		
			
			  userPhotoVideoList(pageSize, pageNum, title)  
		
	
		
			
			    .then((res) => {  
		
	
		
			
			      console.log(res, "res");  
		
	
		
			
			      res.data.list.forEach((item) => {  
		
	
		
			
			        item.createDate = timestampToTime(item.createDate) || "";  
		
	
		
			
			        item.updateDate = timestampToTime(item.updateDate) || "";  
		
	
		
			
			        item.createVideoDate = timestampToTime(item.createVideoDate) || "";  
		
	
		
			
			        item.statusName = getStatus(item.videoStatus);  
		
	
		
			
			      });  
		
	
		
			
			      videoList.value = res.data.list;  
		
	
		
			
			      if (searchFlag) {  
		
	
		
			
			        const total = res.data.total;  
		
	
		
			
			        const msg1 =  
		
	
		
			
			          lanChange.value == "zh-cn"  
		
	
		
			
			            ? `查询成功!找到${total}条符合条件的视频`  
		
	
		
			
			            : `Found! Match ${total} videos`;  
		
	
		
			
			        const msg2 =  
		
	
		
			
			          lanChange.value == "zh-cn"  
		
	
		
			
			            ? `查询成功!没有符合条件的视频`  
		
	
		
			
			            : `Found! No match videos`;  
		
	
		
			
			        ElMessage.success(total > 0 ? msg1 : msg2);  
		
	
		
			
			      }  
		
	
		
			
			    })  
		
	
		
			
			    .catch((err) => {  
		
	
		
			
			      console.log(err, "err");  
		
	
		
			
			    });  
		
	
		
			
			}  
		
	
		
			
			 
		
	
		
			
			/**  
		
	
		
			
			 * @description:删除视频作品  
		
	
		
			
			 * @param: videoID  
		
	
		
			
			 * @return: data  
		
	
		
			
			 */  
		
	
		
			
			function delPhotoVideo(videoID) {  
		
	
		
			
			  delUserPhotoVideoByID(videoID)  
		
	
		
			
			    .then((res) => {  
		
	
		
			
			      console.log(res, "res");  
		
	
		
			
			    })  
		
	
		
			
			    .catch((err) => {  
		
	
		
			
			      console.log(err, "err");  
		
	
		
			
			    });  
		
	
		
			
			}  
		
	
		
			
			 
		
	
		
			
			onMounted(() => {  
		
	
		
			
			  getPhotoVideoList(pageSize.value, pageNum.value, title.value);  
		
	
		
			
			});  
		
	
		
			
			</script>  
		
	
		
			
			 
		
	
		
			
			<style lang="scss" scoped>  
		
	
		
			
			.page {  
		
	
		
			
			  // height: calc(100vh - 84px);  
		
	
		
			
			  height: 887px;  
		
	
		
			
			  padding: 20px 0 0 20px;  
		
	
		
			
			  padding: 5 0px;  
		
	
		
			
			  background-color: #fff;  
		
	
		
			
			  border-radius: 25px 0 0;  
		
	
		
			
			}  
		
	
	
		
			
				
				
				
				
					 
			
			@@ -112,11 +240,16 @@ function mouseenter(item) {  
		
	
		
			
			}  
		
	
		
			
			 
		
	
		
			
			.el-icon.icon-edit {  
		
	
		
			
			  width: 32 px;  
		
	
		
			
			  height: 32 px;  
		
	
		
			
			  font-size: 32 px;  
		
	
		
			
			  width: 30 px;  
		
	
		
			
			  height: 30 px;  
		
	
		
			
			  font-size: 30 px;  
		
	
		
			
			  color: #8c939d;  
		
	
		
			
			  text-align: center;  
		
	
		
			
			  cursor: pointer;  
		
	
		
			
			  transition: all 0.3s;  
		
	
		
			
			  &:hover {  
		
	
		
			
			    color: #292929;  
		
	
		
			
			  }  
		
	
		
			
			}  
		
	
		
			
			 
		
	
		
			
			.workList {  
		
	
	
		
			
				
				
				
				
					 
			
			@@ -125,23 +258,31 @@ function mouseenter(item) {  
		
	
		
			
			  width: 100%;  
		
	
		
			
			  height: 200px;  
		
	
		
			
			  margin-top: 20px;  
		
	
		
			
			 
		
	
		
			
			  cursor: pointer;  
		
	
		
			
			  .workItem {  
		
	
		
			
			    position: relative;  
		
	
		
			
			    width: 300px;  
		
	
		
			
			    height: 200px;  
		
	
		
			
			    margin: 0 10px 10px 0;  
		
	
		
			
			    border: 1px solid #000 ;  
		
	
		
			
			    border: 2px solid #c2c2c2 ;  
		
	
		
			
			    border-radius: 5px;  
		
	
		
			
			 
		
	
		
			
			    cursor: pointer;  
		
	
		
			
			    overflow: hidden;  
		
	
		
			
			    .workImg {  
		
	
		
			
			      position: relative;  
		
	
		
			
			      width: 100%;  
		
	
		
			
			      height: 170px;  
		
	
		
			
			      background-color: red ;  
		
	
		
			
			 
		
	
		
			
			      i mg {  
		
	
		
			
			        max-width: 10 0%;  
		
	
		
			
			      cursor: pointer ;  
		
	
		
			
			      padding: 10px;  
		
	
		
			
			      .coverI mg {  
		
	
		
			
			        max-width: 9 0%;  
		
	
		
			
			        max-height: 170px;  
		
	
		
			
			        cursor: pointer;  
		
	
		
			
			      }  
		
	
		
			
			      .takePlace {  
		
	
		
			
			        position: absolute;  
		
	
		
			
			        top: 30%;  
		
	
		
			
			        width: 80%;  
		
	
		
			
			      }  
		
	
		
			
			    }  
		
	
		
			
			 
		
	
	
		
			
				
				
				
				
					 
			
			@@ -153,7 +294,7 @@ function mouseenter(item) {  
		
	
		
			
			      width: 100%;  
		
	
		
			
			      height: 170px;  
		
	
		
			
			      background-color: rgb(0 0 0 / 30%);  
		
	
		
			
			 
		
	
		
			
			      cursor: pointer;  
		
	
		
			
			      .icon-videoPlay {  
		
	
		
			
			        position: absolute;  
		
	
		
			
			        top: 50%;  
		
	
	
		
			
				
				
				
				
					 
			
			@@ -164,24 +305,25 @@ function mouseenter(item) {  
		
	
		
			
			        color: #fff;  
		
	
		
			
			        text-align: center;  
		
	
		
			
			        transform: translate(-50%, -50%);  
		
	
		
			
			        cursor: pointer;  
		
	
		
			
			      }  
		
	
		
			
			 
		
	
		
			
			      .showBtn {  
		
	
		
			
			        position: absolute;  
		
	
		
			
			        top: 10px;  
		
	
		
			
			        right: 10px;  
		
	
		
			
			        width: 3 0px;  
		
	
		
			
			        height: 3 0px;  
		
	
		
			
			        width: 2 0px;  
		
	
		
			
			        height: 2 0px;  
		
	
		
			
			        font-size: 20px;  
		
	
		
			
			        line-height: 15 px;  
		
	
		
			
			        line-height: 10 px;  
		
	
		
			
			        color: #fff;  
		
	
		
			
			        text-align: center;  
		
	
		
			
			        transition: all 0.3s;  
		
	
		
			
			        cursor: pointer;  
		
	
		
			
			        // &:hover {  
		
	
		
			
			        //   width: 80px;  
		
	
		
			
			        //   height: 80px;  
		
	
		
			
			        //   background-color: aqua;  
		
	
		
			
			        // }  
		
	
		
			
			        border-radius: 2px;  
		
	
		
			
			        &:hover {  
		
	
		
			
			          background-color: #00000056;  
		
	
		
			
			        }  
		
	
		
			
			      }  
		
	
		
			
			 
		
	
		
			
			      .btns {  
		
	
	
		
			
				
				
				
				
					 
			
			@@ -192,6 +334,7 @@ function mouseenter(item) {  
		
	
		
			
			        // height: 60px;  
		
	
		
			
			        overflow: hidden;  
		
	
		
			
			        border-radius: 10px;  
		
	
		
			
			        cursor: pointer;  
		
	
		
			
			 
		
	
		
			
			        &-item {  
		
	
		
			
			          // width: 70px;  
		
	
	
		
			
				
				
				
				
					 
			
			@@ -199,12 +342,14 @@ function mouseenter(item) {  
		
	
		
			
			          text-align: center;  
		
	
		
			
			          background-color: #fff;  
		
	
		
			
			          padding: 0 10px;  
		
	
		
			
			          transition: all 0.3s;  
		
	
		
			
			          cursor: pointer;  
		
	
		
			
			          &-icon {  
		
	
		
			
			            position: relative;  
		
	
		
			
			            display: inline-block;  
		
	
		
			
			            width: 20px;  
		
	
		
			
			            height: 20px;  
		
	
		
			
			 
		
	
		
			
			            cursor: pointer;  
		
	
		
			
			            .icon-delete {  
		
	
		
			
			              position: absolute;  
		
	
		
			
			              top: 4px;  
		
	
	
		
			
				
				
				
				
					 
			
			@@ -214,6 +359,7 @@ function mouseenter(item) {  
		
	
		
			
			              font-size: 16px;  
		
	
		
			
			              color: #000;  
		
	
		
			
			              text-align: center;  
		
	
		
			
			              cursor: pointer;  
		
	
		
			
			            }  
		
	
		
			
			          }  
		
	
		
			
			 
		
	
	
		
			
				
				
				
				
					 
			
			@@ -223,6 +369,11 @@ function mouseenter(item) {  
		
	
		
			
			            padding-left: 5px;  
		
	
		
			
			            margin-top: -5px;  
		
	
		
			
			            line-height: 20px;  
		
	
		
			
			            cursor: pointer;  
		
	
		
			
			          }  
		
	
		
			
			          &:hover {  
		
	
		
			
			            color: #ffffff;  
		
	
		
			
			            background-color: #0000001a;  
		
	
		
			
			          }  
		
	
		
			
			        }  
		
	
		
			
			      }  
		
	
	
		
			
				
				
				
				
					 
			
			@@ -233,7 +384,34 @@ function mouseenter(item) {  
		
	
		
			
			      height: 30px;  
		
	
		
			
			      padding: 0 10px;  
		
	
		
			
			      line-height: 30px;  
		
	
		
			
			      border-top: 1px solid #000;  
		
	
		
			
			      border-top: 1px solid #afafaf;  
		
	
		
			
			    }  
		
	
		
			
			    .statusName {  
		
	
		
			
			      position: absolute;  
		
	
		
			
			      top: 10%;  
		
	
		
			
			      left: -10%;  
		
	
		
			
			      width: 120px;  
		
	
		
			
			      text-align: center;  
		
	
		
			
			      color: #ffffff;  
		
	
		
			
			      font-size: 14px;  
		
	
		
			
			      transform: rotate(-45deg);  
		
	
		
			
			 
		
	
		
			
			      &.draft {  
		
	
		
			
			        /* 草稿 */  
		
	
		
			
			        background: linear-gradient(to right, #d7d2cc 0%, #304352 100%);  
		
	
		
			
			      }  
		
	
		
			
			      &.generating {  
		
	
		
			
			        /* 生成中 */  
		
	
		
			
			        background: linear-gradient(270deg, #4b61dc, #15d1b8);  
		
	
		
			
			      }  
		
	
		
			
			      &.generationFailed {  
		
	
		
			
			        /* 生成失败 */  
		
	
		
			
			        background: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);  
		
	
		
			
			      }  
		
	
		
			
			      &.generationSucceed {  
		
	
		
			
			        /* 生成成功 */  
		
	
		
			
			        background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);  
		
	
		
			
			      }  
		
	
		
			
			    }  
		
	
		
			
			  }  
		
	
		
			
			 
		
	
	
		
			
				
				
				
				
					 
			
			@@ -247,21 +425,22 @@ function mouseenter(item) {  
		
	
		
			
			    display: flex;  
		
	
		
			
			    justify-content: space-between;  
		
	
		
			
			    width: 100%;  
		
	
		
			
			    height: 400px;  
		
	
		
			
			    padding: 0 20px;  
		
	
		
			
			    padding: 10px 40px 30px 40px;  
		
	
		
			
			 
		
	
		
			
			    video {  
		
	
		
			
			      width: 90%;  
		
	
		
			
			      height: 400px;  
		
	
		
			
			      margin-top: -10px;  
		
	
		
			
			      margin-left: 5%;  
		
	
		
			
			      width: 100%;  
		
	
		
			
			      margin: auto;  
		
	
		
			
			    }  
		
	
		
			
			    .insteadVideo {  
		
	
		
			
			      font-size: 20px;  
		
	
		
			
			      font-weight: 600;  
		
	
		
			
			      margin: 20px auto;  
		
	
		
			
			    }  
		
	
		
			
			  }  
		
	
		
			
			 
		
	
		
			
			  .dialog-footer {  
		
	
		
			
			    display: flex;  
		
	
		
			
			    justify-content: space-between;  
		
	
		
			
			 
		
	
		
			
			    .elBtn {  
		
	
		
			
			      color: #fff;  
		
	
		
			
			      border-radius: 10px;  
		
	
	
		
			
				
				
					 
			
			@@ -288,7 +467,19 @@ function mouseenter(item) {  
		
	
		
			
			// :deep(.el-dialog__header) {  
		
	
		
			
			// }  
		
	
		
			
			:deep(.el-dialog__title) {  
		
	
		
			
			  color: red;  
		
	
		
			
			  background-image: -webkit-linear-gradient(  
		
	
		
			
			    left,  
		
	
		
			
			    #4b61dc,  
		
	
		
			
			    #15d1b8 25%,  
		
	
		
			
			    #4b61dc 50%,  
		
	
		
			
			    #15d1b8 75%,  
		
	
		
			
			    #4b61dc  
		
	
		
			
			  ) !important;  
		
	
		
			
			  -webkit-text-fill-color: transparent !important;  
		
	
		
			
			  -webkit-background-clip: text !important;  
		
	
		
			
			  background-clip: text !important;  
		
	
		
			
			  -webkit-background-size: 200% 100% !important;  
		
	
		
			
			  background-size: 200% 100% !important;  
		
	
		
			
			}  
		
	
		
			
			 
		
	
		
			
			:deep(.el-dialog__body) {