邃芒官网、邃芒慧影、口播(H5) https://m.metavatar.cc
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

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