邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
 
 
 
 

609 rader
15 KiB

  1. <template>
  2. <div :class="inPage ? 'page active' : 'page'">
  3. <div id="top"></div>
  4. <HeadTop />
  5. <!-- 顶部图 -->
  6. <img class="showIMG" src="../../assets/img/BG-Page.png" alt="" />
  7. <!-- 展示列表 -->
  8. <div class="item">
  9. <div class="title">
  10. <img src="../../assets/img/myVideo.png" alt="">
  11. 我的视频作品
  12. <span class="floatRight" style="float: right;">草稿箱</span>
  13. </div>
  14. <!-- 具体内容 -->
  15. <van-swipe-cell v-for="(item, index) in videoList" :key="item.id?item.id:index">
  16. <div class="itemList">
  17. <!-- 每一项 -->
  18. <div
  19. v-if="videoList.length > 0"
  20. class="videoModel"
  21. :key="index"
  22. >
  23. <!-- 左侧图片 -->
  24. <div class="videoPrv" @click="goDetail(item)">
  25. <img src="../../assets/img/BG@2x.png" />
  26. <div v-if="item.videoStatus == 0" class="cover">草稿</div>
  27. <div v-if="item.videoStatus == 1" class="cover">视频生成中</div>
  28. <div v-if="item.videoStatus == 3" class="cover">视频生成失败</div>
  29. <!-- <div v-if="item.videoStatus == ?" class="cover">排队中</div> -->
  30. </div>
  31. <!-- 中间文字 -->
  32. <div class="videoInfo" @click="goDetail(item)">
  33. <div class="videoName">
  34. {{ item.title || "暂无" }}
  35. </div>
  36. <div class="createTime">
  37. 视频时长:{{ formatSeconds(item.videoTime) }}
  38. </div>
  39. <div class="createTime">
  40. 视频容量:{{ bytesToSize(item.videoSize) }}
  41. </div>
  42. <div class="createTime">
  43. 创建时间:{{
  44. changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss")
  45. }}
  46. </div>
  47. </div>
  48. <!-- 右侧更多 -->
  49. <div class="showMore" @click.stop="showDialog(item.id)">
  50. <div></div>
  51. <div></div>
  52. <div></div>
  53. </div>
  54. <!-- 弹出层 -->
  55. <van-popup v-if="clickItem==item.id" v-model="showPopup">
  56. <div @click="closeDialog"><i class="el-icon-edit" />&nbsp;&nbsp;&nbsp;编辑</div>
  57. <div @click="goDelete(item.id)"><i class="el-icon-delete" />&nbsp;&nbsp;&nbsp; 删除</div>
  58. </van-popup>
  59. <!-- <van-dialog class="dialog"
  60. v-model="clickItem==item?showTrue:showFalse">
  61. <div @click="closeDialog"><i class="el-icon-edit" />&nbsp;&nbsp;&nbsp;编辑</div>
  62. <div><i class="el-icon-delete" />&nbsp;&nbsp;&nbsp; 删除</div>
  63. </van-dialog> -->
  64. </div>
  65. <!-- 无数据处理 -->
  66. <div v-if="videoList.length <= 0" class="noWork">
  67. 您还没有视频作品
  68. </div>
  69. </div>
  70. <!-- 右滑 -->
  71. <!-- <template #right>
  72. <van-button
  73. square
  74. text="删除"
  75. type="danger"
  76. class="delete-button"
  77. @click="goDelete(item.id)"
  78. />
  79. </template> -->
  80. </van-swipe-cell>
  81. </div>
  82. <!-- 分页 -->
  83. <van-pagination
  84. v-model="currentPage"
  85. :total-items="total"
  86. :items-per-page="4"
  87. @change="pageChange"
  88. />
  89. <!-- 创建新作品 -->
  90. <!-- <div class="goAdd" @click="checkInviteCode">+ 创作新作品</div> -->
  91. <div class="goNewAdd" @click="checkInviteCode">
  92. <i class="el-icon-plus"></i>
  93. </div>
  94. <div
  95. class="messageCover"
  96. :class="isShowMessageCover ? 'active' : ''"
  97. @click="exitCover"
  98. >
  99. <div class="message" id="message">
  100. <div class="connect" id="message">请添加微信与我们联系</div>
  101. <div class="qrCode" id="message">
  102. <img src="../../assets/img/SuiMangQRCode.png" alt="" />
  103. </div>
  104. <div class="phoneNum" id="message">或致电13260039498</div>
  105. <div class="clickToClose">点击空白处关闭</div>
  106. </div>
  107. </div>
  108. </div>
  109. </template>
  110. <script>
  111. // 组件
  112. import Vue from "vue";
  113. import { Toast, Dialog } from "vant";
  114. import { mapState, mapActions } from "vuex";
  115. import HeadTop from "@/components/common/head.vue";
  116. // 工具
  117. import {
  118. bytesToSize,
  119. timestampToTime,
  120. scrollToID,
  121. formatSeconds,
  122. } from "../../utils";
  123. // 接口
  124. import {
  125. getVideoList,
  126. doGetVideoDetialById,
  127. doFindInviteCode,
  128. deleteVideoById,
  129. } from "../../api/myPage";
  130. Vue.use(Toast);
  131. export default {
  132. components: {
  133. HeadTop,
  134. },
  135. data() {
  136. return {
  137. showPopup:false,// 编辑和删除显示隐藏
  138. clickItem: -1,// 弹出层显示隐藏
  139. showTrue: true,// 弹出层显示隐藏
  140. showFalse: false,// 弹出层显示隐藏
  141. inPage: false,
  142. isShowMessageCover: false,
  143. videoList: [],
  144. currentPage: 1,
  145. pageSize: 4,
  146. prePage: "",
  147. total: "",
  148. };
  149. },
  150. computed: {
  151. ...mapState({
  152. characters: (state) => state.publicObj.characters,
  153. }),
  154. },
  155. methods: {
  156. ...mapActions(["setCharacters"]),
  157. closeDialog() {
  158. Dialog.close
  159. },
  160. // 点击显示编辑删除
  161. showDialog(id) {
  162. this.showPopup=true
  163. this.clickItem=id
  164. },
  165. go(url) {
  166. this.$router.push(url);
  167. },
  168. changeTime(timestamp, form) {
  169. return timestampToTime(timestamp, form);
  170. },
  171. pageChange() {
  172. this.loadVideoList(this.currentPage, this.pageSize);
  173. },
  174. // 点击空白区域退出提示
  175. exitCover(e) {
  176. if (e.srcElement.id != "message") {
  177. this.isShowMessageCover = false;
  178. }
  179. },
  180. // 秒转化时分秒
  181. formatSeconds(seconds) {
  182. if (seconds) {
  183. return formatSeconds(seconds);
  184. } else {
  185. return "无";
  186. }
  187. },
  188. // 将bytes转化
  189. bytesToSize(bytes) {
  190. if (bytes) {
  191. return bytesToSize(bytes);
  192. } else {
  193. return "无";
  194. }
  195. },
  196. // 查看详情
  197. goDetail(item) {
  198. const status = item.videoStatus;
  199. if (status == 0) {
  200. this.$router.push({
  201. path: "/getPaper",
  202. query: {
  203. id: item.id,
  204. },
  205. });
  206. } else if (status == 1) {
  207. Toast.fail("视频生成中");
  208. return;
  209. } else if (status == 2) {
  210. const url = item.videoPathUri + item.videoPath;
  211. this.$router.push({
  212. path: "/downloadVideo",
  213. query: {
  214. videoId: item.videoId,
  215. videoUrl: url,
  216. },
  217. });
  218. } else if (status == 3) {
  219. this.$router.push({
  220. path: "/getPaper",
  221. query: {
  222. id: item.id,
  223. },
  224. });
  225. }
  226. },
  227. // 删除作品
  228. goDelete(id) {
  229. Dialog.confirm({
  230. title: "删除作品",
  231. message: "您确定要删除该作品吗?",
  232. })
  233. .then(async() => {
  234. await this.deleteVideoById(id);
  235. this.loadVideoList(this.currentPage, this.pageSize);
  236. })
  237. .catch(() => {
  238. return;
  239. });
  240. },
  241. /**
  242. * @description:获取作品列表
  243. */
  244. async loadVideoList(pageNum, pageSize) {
  245. try {
  246. const res = await getVideoList(pageNum, pageSize);
  247. console.log(res, "获取作品列表");
  248. this.videoList = res.data.list;
  249. this.total = res.data.total;
  250. } catch (error) {
  251. console.log(error, "error");
  252. Toast.fail(error.message);
  253. }
  254. },
  255. /**
  256. * @description 通过视频id获取视频详情
  257. */
  258. async getVideoDetialById(id) {
  259. try {
  260. const res = await doGetVideoDetialById(id);
  261. console.log(res, "通过视频id获取视频详情");
  262. return res.data;
  263. } catch (error) {
  264. console.log(error, "error");
  265. Toast.fail(error.message);
  266. }
  267. },
  268. /**
  269. * @description 根据id删除作品
  270. */
  271. async deleteVideoById(id) {
  272. try {
  273. const res = await deleteVideoById(id);
  274. console.log(res, "根据id删除作品");
  275. } catch (error) {
  276. console.log(error, "error");
  277. Toast.fail(error.message);
  278. }
  279. },
  280. /**
  281. * @description:查询用户邀请码状态
  282. */
  283. async checkInviteCode() {
  284. try {
  285. const res = await doFindInviteCode();
  286. console.log(res, "查询用户邀请码数据");
  287. const status = res.data.status;
  288. // 当没有邀请码时
  289. if (status == 0) {
  290. scrollToID("top");
  291. this.isShowMessageCover = true;
  292. } else if (status == 1) {
  293. this.goCreateNew();
  294. }
  295. } catch (error) {
  296. console.log(error, "error");
  297. Toast.fail(error.message);
  298. }
  299. },
  300. goCreateNew() {
  301. this.$router.push("/chooseModel");
  302. },
  303. },
  304. mounted() {
  305. this.inPage = true;
  306. scrollToID("top");
  307. },
  308. created() {
  309. this.loadVideoList(1, this.pageSize);
  310. },
  311. };
  312. </script>
  313. <style lang="scss" scoped>
  314. .page {
  315. transform: translateX(30%);
  316. opacity: 0;
  317. transition: all 0.5s; // global-transition
  318. padding-bottom: 25px;
  319. &.active {
  320. opacity: 1;
  321. transform: translateX(0);
  322. }
  323. .logoBox {
  324. display: flex;
  325. justify-content: space-between;
  326. align-items: center;
  327. overflow: hidden;
  328. cursor: pointer;
  329. background-color: #606060;
  330. .logo {
  331. float: left;
  332. width: 140px;
  333. height: 40px;
  334. }
  335. .userInfo {
  336. display: flex;
  337. justify-content: space-between;
  338. align-items: center;
  339. color: #fff;
  340. .userImg {
  341. float: right;
  342. width: 30px;
  343. height: 30px;
  344. margin-top: 3px;
  345. margin-right: 10px;
  346. margin-left: 15px;
  347. }
  348. }
  349. }
  350. .showIMG {
  351. padding: 10px;
  352. width: 100%;
  353. height: 140px;
  354. border-radius: 16px;
  355. }
  356. .item {
  357. padding: 15px 10px;
  358. .title {
  359. font-size: 16px;
  360. font-weight: 500;
  361. // margin-left: 15px;
  362. margin-bottom: 20px;
  363. img {
  364. margin-top: -5px;
  365. vertical-align: middle;
  366. width: 24px;
  367. height: 18px;
  368. background-size: 100% 100%;
  369. }
  370. }
  371. .itemList {
  372. .videoModel {
  373. position: relative;
  374. display: flex;
  375. justify-content: space-between;
  376. margin-bottom: 20px;
  377. .videoPrv {
  378. width: 150px;
  379. height: 100px;
  380. // background-color: #979797;
  381. img {
  382. position: absolute;
  383. width: 150px;
  384. height: 100px;
  385. border-radius: 6px;
  386. }
  387. .cover {
  388. position: absolute;
  389. width: 150px;
  390. height: 100px;
  391. line-height: 100px;
  392. background-color: #00000034;
  393. text-align: center;
  394. border-radius: 6px;
  395. color: #fff;
  396. }
  397. }
  398. .videoInfo {
  399. flex: 1;
  400. margin-left: 12px;
  401. .videoName {
  402. font-size: 16px;
  403. font-weight: 600;
  404. }
  405. .createTime {
  406. font-size: 11px;
  407. color: #999999;
  408. margin-top: 5px;
  409. }
  410. }
  411. .showMore {
  412. width: 20px;
  413. display: flex;
  414. justify-content: space-between;
  415. align-items: center;
  416. // margin-left: 10px;
  417. div {
  418. width: 4px;
  419. height: 4px;
  420. background-color: #51D9CA;
  421. }
  422. }
  423. .dialog {
  424. i {
  425. margin-left: -10px;
  426. }
  427. }
  428. // 弹出层样式
  429. ::v-deep .van-popup {
  430. display: flex;
  431. flex-wrap: wrap;
  432. align-items: center;
  433. justify-content: center;
  434. top: 70%;
  435. left: 290px;
  436. padding-left: 10px;
  437. width: 80px;
  438. height: 60px;
  439. border-radius: 12px;
  440. font-size: 14px;
  441. line-height: 28px;
  442. text-align: center;
  443. box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
  444. }
  445. ::v-deep .van-overlay {
  446. background-color: rgba(0,0,0,0);
  447. }
  448. ::v-deep .van-button {
  449. display: none;
  450. }
  451. .tag {
  452. position: absolute;
  453. right: 10px;
  454. top: 10px;
  455. padding: 1px 5px;
  456. border-radius: 5px;
  457. &.text {
  458. color: #fff;
  459. background-color: #a2a2a290;
  460. }
  461. &.generating {
  462. background-color: #ffa600c2;
  463. }
  464. &.finish {
  465. color: #ffffff;
  466. background-color: #00ff88;
  467. }
  468. &.fail {
  469. color: #ffffff;
  470. background-color: #ff0000c3;
  471. }
  472. }
  473. }
  474. .noWork {
  475. width: 100%;
  476. height: 450px;
  477. line-height: 450px;
  478. font-size: 14px;
  479. font-weight: 600;
  480. text-align: center;
  481. }
  482. }
  483. }
  484. .goAdd {
  485. position: sticky;
  486. bottom: 25px;
  487. left: 10px;
  488. width: 300px;
  489. height: 42px;
  490. line-height: 42px;
  491. font-size: 15px;
  492. color: #fff;
  493. text-align: center;
  494. transform: translateX(-50%);
  495. background-color: #0068b7;
  496. border-radius: 5px;
  497. box-shadow: #60606082 1px 1px 1px 1px;
  498. margin-top: 25px;
  499. margin-left: 190px;
  500. }
  501. .goNewAdd {
  502. position: sticky;
  503. left: 300px;
  504. bottom: 25px;
  505. width: 60px;
  506. height: 60px;
  507. border-radius: 50%;
  508. font-size: 40px;
  509. line-height: 60px;
  510. text-align: center;
  511. color: #ffffff;
  512. background: linear-gradient(316deg, #6EE4D7 0%, #37C4F1 32%, #A49AFC 100%);
  513. box-shadow: 0px 2px 6px 0px rgba(114,100,245,0.25);
  514. }
  515. .messageCover {
  516. position: fixed;
  517. top: 0;
  518. width: 100%;
  519. height: 100%;
  520. background-color: #00000091;
  521. transition: all 0.3s;
  522. opacity: 0;
  523. z-index: -1;
  524. .message {
  525. position: sticky;
  526. top: 48%;
  527. transform: translate(-50%, -50%);
  528. width: 272px;
  529. height: 290px;
  530. border-radius: 5px;
  531. background-color: #fff;
  532. text-align: center;
  533. transition: all 0.3s;
  534. margin-left: 50%;
  535. padding: 10px;
  536. .connect {
  537. font-size: 12px;
  538. margin: 19px 0 10px 0;
  539. }
  540. .qrCode {
  541. width: 203px;
  542. height: 213px;
  543. background-color: #ffffff;
  544. border-radius: 5px;
  545. border: solid 1px #595959;
  546. margin: auto;
  547. img {
  548. width: 100%;
  549. height: 100%;
  550. }
  551. }
  552. .phoneNum {
  553. float: left;
  554. font-size: 11px;
  555. margin-top: 8px;
  556. margin-left: 34px;
  557. }
  558. .close {
  559. position: absolute;
  560. top: 8px;
  561. right: 15px;
  562. font-size: 18px;
  563. color: #000;
  564. }
  565. .clickToClose {
  566. position: absolute;
  567. font-size: 14px;
  568. color: #fff;
  569. left: 50%;
  570. bottom: -20%;
  571. transform: translateX(-50%);
  572. }
  573. }
  574. &.active {
  575. z-index: 100;
  576. opacity: 1;
  577. }
  578. }
  579. .delete-button {
  580. position: relative;
  581. left: 1%;
  582. height: 100%;
  583. }
  584. }
  585. </style>