邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
Não pode escolher mais do que 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 
 

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