邃芒官网、邃芒慧影、口播(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.
 
 
 
 

274 lines
6.4 KiB

  1. <template>
  2. <div class="page">
  3. <div id="top"></div>
  4. <HeadTop />
  5. <img class="showIMG" src="../../assets/img/BG-Page.png" alt="" />
  6. <div class="item">
  7. <div class="title">我的视频作品</div>
  8. <div class="itemList">
  9. <div
  10. v-if="videoList.length > 0"
  11. class="videoModel"
  12. v-for="(item, index) in videoList"
  13. :key="index"
  14. @click="goDetail(item)"
  15. >
  16. <div class="videoPrv">
  17. <video
  18. :src="
  19. 'https://smapitest.malls.iformall.com/myVideo/' + item.videoPath
  20. "
  21. />
  22. <div v-if="item.videoStatus == 0" class="cover">草稿</div>
  23. <div v-if="item.videoStatus == 1" class="cover">视频生成中</div>
  24. <div v-if="item.videoStatus == 3" class="cover">视频生成失败</div>
  25. <!-- <div v-if="item.videoStatus == ?" class="cover">排队中</div> -->
  26. </div>
  27. <div class="videoInfo">
  28. <div class="videoName">
  29. {{ item.title || "暂无" }}
  30. </div>
  31. <div class="createTime">视频时长:{{ item.videoTime }}</div>
  32. <div class="createTime">视频容量{{ "46.5Mb" }}</div>
  33. <div class="createTime">
  34. 创建时间:{{ changeTime(item.createDate, "YYYY-MM-DD hh:mm:ss") }}
  35. </div>
  36. </div>
  37. </div>
  38. <div v-if="videoList.length <= 0" class="noWork">您还没有视频作品</div>
  39. </div>
  40. </div>
  41. <van-pagination
  42. v-model="currentPage"
  43. :total-items="total"
  44. :items-per-page="3"
  45. @change="pageChange"
  46. />
  47. <div class="goAdd" @click="goCreateNew">+ 创作新作品</div>
  48. </div>
  49. </template>
  50. <script>
  51. import Vue from "vue";
  52. import HeadTop from "./../../components/common/head.vue";
  53. import { mapState, mapActions } from "vuex";
  54. import { Toast } from "vant";
  55. import timestampToTime from "../../utils/timestampToTime";
  56. import scrollToID from "../../utils/scrollToID";
  57. import { getVideoList } from "../../api/myPage";
  58. Vue.use(Toast);
  59. export default {
  60. components: {
  61. HeadTop,
  62. },
  63. data() {
  64. return {
  65. videoList: [],
  66. currentPage: 1,
  67. pageSize: 5,
  68. total: "",
  69. };
  70. },
  71. computed: {
  72. ...mapState({
  73. characters: (state) => state.publicObj.characters,
  74. }),
  75. },
  76. methods: {
  77. ...mapActions(["setCharacters"]),
  78. go(url) {
  79. this.$router.push(url);
  80. },
  81. changeTime(timestamp, form) {
  82. return timestampToTime(timestamp, form);
  83. },
  84. pageChange() {
  85. this.loadVideoList(this.currentPage, this.pageSize);
  86. },
  87. goDetail(item) {
  88. const status = item.videoStatus;
  89. if (status == 0) {
  90. this.$router.push({
  91. path: "/getPaper",
  92. query: {
  93. id: item.id,
  94. },
  95. });
  96. } else if (status == 1) {
  97. Toast.fail("视频生成中");
  98. return;
  99. } else if (status == 2) {
  100. this.$router.push({
  101. path: "/downloadVideo",
  102. query: {
  103. videoDetail: item,
  104. },
  105. });
  106. } else if (status == 3) {
  107. }
  108. },
  109. async loadVideoList(pageNum, pageSize) {
  110. try {
  111. const res = await getVideoList(pageNum, pageSize);
  112. console.log(res, "获取作品列表");
  113. this.videoList = res.data.list;
  114. this.total = res.data.total;
  115. } catch (error) {
  116. console.log(error);
  117. Toast.fail(error.message);
  118. }
  119. },
  120. goCreateNew() {
  121. this.$router.push("/chooseModel");
  122. },
  123. },
  124. mounted() {
  125. scrollToID("top");
  126. },
  127. created() {
  128. this.loadVideoList(1, this.pageSize);
  129. },
  130. };
  131. </script>
  132. <style lang="scss" scoped>
  133. .page {
  134. .logoBox {
  135. display: flex;
  136. justify-content: space-between;
  137. align-items: center;
  138. overflow: hidden;
  139. cursor: pointer;
  140. background-color: #606060;
  141. .logo {
  142. float: left;
  143. width: 140px;
  144. height: 40px;
  145. }
  146. .userInfo {
  147. display: flex;
  148. justify-content: space-between;
  149. align-items: center;
  150. color: #fff;
  151. .userImg {
  152. float: right;
  153. width: 30px;
  154. height: 30px;
  155. margin-top: 3px;
  156. margin-right: 10px;
  157. margin-left: 15px;
  158. }
  159. }
  160. }
  161. .showIMG {
  162. width: 100%;
  163. height: 130px;
  164. }
  165. .item {
  166. padding-top: 15px;
  167. padding-bottom: 15px;
  168. .title {
  169. font-size: 15px;
  170. font-weight: 600;
  171. margin-left: 15px;
  172. margin-bottom: 20px;
  173. }
  174. .itemList {
  175. .videoModel {
  176. position: relative;
  177. display: flex;
  178. justify-content: space-between;
  179. margin-bottom: 25px;
  180. border-bottom: 1px solid #00000010;
  181. padding: 0 20px 25px 25px;
  182. .videoPrv {
  183. width: 150px;
  184. height: 100px;
  185. // background-color: #979797;
  186. video {
  187. position: absolute;
  188. width: 150px;
  189. height: 100px;
  190. }
  191. .cover {
  192. position: absolute;
  193. width: 150px;
  194. height: 100px;
  195. line-height: 100px;
  196. background-color: #00000034;
  197. text-align: center;
  198. color: #fff;
  199. }
  200. }
  201. .videoInfo {
  202. display: flex;
  203. flex-direction: column;
  204. justify-content: space-between;
  205. margin-left: 10px;
  206. .videoName {
  207. font-size: 16px;
  208. font-weight: 600;
  209. }
  210. .createTime {
  211. font-size: 11px;
  212. }
  213. }
  214. .tag {
  215. position: absolute;
  216. right: 10px;
  217. top: 10px;
  218. padding: 1px 5px;
  219. border-radius: 5px;
  220. &.text {
  221. color: #fff;
  222. background-color: #a2a2a290;
  223. }
  224. &.generating {
  225. background-color: #ffa600c2;
  226. }
  227. &.finish {
  228. color: #ffffff;
  229. background-color: #00ff88;
  230. }
  231. &.fail {
  232. color: #ffffff;
  233. background-color: #ff0000c3;
  234. }
  235. }
  236. }
  237. .noWork {
  238. width: 100%;
  239. height: 450px;
  240. line-height: 450px;
  241. font-size: 14px;
  242. font-weight: 600;
  243. text-align: center;
  244. }
  245. }
  246. }
  247. .goAdd {
  248. position: fixed;
  249. bottom: 15px;
  250. left: 50%;
  251. width: 300px;
  252. height: 42px;
  253. line-height: 42px;
  254. font-size: 15px;
  255. color: #fff;
  256. text-align: center;
  257. transform: translateX(-50%);
  258. background-color: #0068b7;
  259. border-radius: 5px;
  260. box-shadow: #60606082 1px 1px 1px 1px;
  261. }
  262. }
  263. </style>