邃芒慧影、口播(PC) https://neuver.metavatar.cc/
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 
 

205 строки
5.2 KiB

  1. <template>
  2. <div class="page justify-around">
  3. <el-alert :title="`当前币值:${currentValue}`" type="success" :closable="false" />
  4. <el-table :data="tableData" style="width: 100%; height: 90%" size="large" align="center" border>
  5. <el-table-column
  6. prop="title"
  7. label="名称"
  8. align="center"
  9. />
  10. <el-table-column
  11. prop="videoPlayUrl"
  12. label="视频地址"
  13. align="center"
  14. />
  15. <el-table-column
  16. prop="videoTime"
  17. label="视频时长"
  18. align="center"
  19. />
  20. <el-table-column
  21. prop="costPoints"
  22. label="扣币数量"
  23. align="center"
  24. />
  25. <el-table-column
  26. prop="createTime"
  27. label="创建时间"
  28. align="center"
  29. >
  30. <template #default="scope">
  31. {{ getDate(scope.row.createTime) }}
  32. </template>
  33. </el-table-column>
  34. <el-table-column
  35. fixed="right"
  36. label="操作"
  37. align="center"
  38. >
  39. <template #default="scope">
  40. <el-button link type="primary" size="small" @click="detailView(scope.row)">查看</el-button>
  41. </template>
  42. </el-table-column>
  43. </el-table>
  44. <div class="pagination">
  45. <el-pagination
  46. v-model:current-page="pageNum"
  47. v-model:page-size="pageSize"
  48. :page-sizes="[10, 50, 100]"
  49. :small="false"
  50. :disabled="false"
  51. :background="true"
  52. layout="total, sizes, prev, pager, next, jumper"
  53. :total="total"
  54. @size-change="handleSizeChange"
  55. @current-change="handleCurrentChange"
  56. />
  57. </div>
  58. <el-dialog v-model="dialogVisible" title="扣币详情:" width="40%" :before-close="handleClose" >
  59. <el-form :model="form" label-width="120px">
  60. <el-form-item label="名称">
  61. <el-input v-model="form.title" />
  62. </el-form-item>
  63. <el-form-item label="视频类型">
  64. <el-radio-group v-model="form.videoType">
  65. <el-radio :label="1">竖版</el-radio>
  66. <el-radio :label="2">横版</el-radio>
  67. </el-radio-group>
  68. </el-form-item>
  69. <el-form-item label="文案">
  70. <el-input v-model="form.paperwork" type="textarea" />
  71. </el-form-item>
  72. <el-form-item label="封面图">
  73. <img :src="form.coverImg" alt="" style="width:100%;max-height: 200px;">
  74. </el-form-item>
  75. <el-form-item label="视频地址">
  76. <el-input v-model="form.videoPlayUrl" />
  77. <!-- <video :src="form.videoPlayUrl" style="width:100%;max-height: 300px;"></video> -->
  78. </el-form-item>
  79. <el-form-item label="视频时长">
  80. <el-input v-model="form.videoTime" />
  81. </el-form-item>
  82. <el-form-item label="创建时间">
  83. <el-input v-model="form.createDate" />
  84. </el-form-item>
  85. <el-form-item label="消耗金币">
  86. <el-input v-model="form.costPoints" />
  87. </el-form-item>
  88. <el-form-item label="消耗金币明细">
  89. <el-input v-model="form.costPointsDetail" />
  90. </el-form-item>
  91. <el-form-item>
  92. <el-button @click="dialogVisible = false">关闭</el-button>
  93. </el-form-item>
  94. </el-form>
  95. </el-dialog>
  96. </div>
  97. </template>
  98. <!-- videoType==1为竖,==2为横 -->
  99. <script setup>
  100. //#region 导入
  101. import { coindedApi, getDetailApi, getUserPoinsApi, findByIdApi } from '@/apis/my.js'
  102. import dayjs from "dayjs";
  103. const tableData = ref([]);
  104. const pageNum = ref(1);
  105. const pageSize = ref(10);
  106. const total = ref(0);
  107. const getDate = (val) => {
  108. return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
  109. };
  110. const handleSizeChange = (val) => {
  111. pageSize.value = val;
  112. getListData(pageNum.value, pageSize.value);
  113. };
  114. const handleCurrentChange = (val) => {
  115. pageNum.value = val;
  116. getListData(pageNum.value, pageSize.value);
  117. };
  118. const getListData = async (PageNum, PageSize) => {
  119. try {
  120. let data = {
  121. projectType: 2,
  122. pageNum: 1,
  123. pageSize: 10
  124. }
  125. const res = await coindedApi(data);
  126. tableData.value = res.data.list;
  127. total.value = res.data.total * 1;
  128. } catch (error) {
  129. console.log(error, "err");
  130. }
  131. };
  132. // 当前币值
  133. const currentValue = ref('')
  134. function currentValFn() {
  135. getUserPoinsApi().then(res => {
  136. currentValue.value = res.data
  137. })
  138. }
  139. // 查看详情
  140. const dialogVisible = ref(false)
  141. const form = ref({
  142. title: '',
  143. videoPlayUrl: ''
  144. })
  145. function detailView(item) {
  146. findByIdApi(item.id).then(res => {
  147. res.data.createDate = getDate(res.data.createDate)
  148. res.data.videoTime = res.data.videoTime + '(秒)'
  149. form.value = res.data
  150. dialogVisible.value = true
  151. })
  152. }
  153. onMounted(() => {
  154. getListData(1, 10);
  155. currentValFn()
  156. });
  157. </script>
  158. <style lang="scss" scoped>
  159. .page {
  160. height: calc(100vh - 80px);
  161. // height: calc(100vh - 80px);
  162. background-color: #ffffff;
  163. border-radius: 30px 0 0 0;
  164. overflow: hidden;
  165. padding: 10vh;
  166. .addbtn {
  167. margin-bottom: 2vh;
  168. }
  169. .formData {
  170. padding: 5vh 3vh;
  171. }
  172. .pagination {
  173. position: fixed;
  174. left: 55%;
  175. bottom: 8vh;
  176. transform: translateX(-50%);
  177. border-radius: 5px;
  178. padding: 10px 20px;
  179. z-index: 99;
  180. transition: all 0.3s;
  181. cursor: pointer;
  182. &:hover {
  183. background-color: #b8b8b873;
  184. }
  185. }
  186. }
  187. </style>