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

208 рядки
5.5 KiB

  1. <template>
  2. <div class="page justify-around">
  3. <el-alert :title="`${$t('coindeduc.currencyValue')}:${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="$t('coindeduc.titleList')"
  8. align="center"
  9. />
  10. <el-table-column
  11. prop="videoPlayUrl"
  12. :label="$t('coindeduc.videoPlayUrl')"
  13. align="center"
  14. />
  15. <el-table-column
  16. prop="videoTime"
  17. :label="$t('coindeduc.videoTime')"
  18. align="center"
  19. />
  20. <el-table-column
  21. prop="costPoints"
  22. :label="$t('coindeduc.costPoints')"
  23. align="center"
  24. />
  25. <el-table-column
  26. prop="createTime"
  27. :label="$t('coindeduc.createTime')"
  28. align="center"
  29. >
  30. <template #default="scope">
  31. {{ getDate(scope.row.createDate) }}
  32. </template>
  33. </el-table-column>
  34. <el-table-column
  35. fixed="right"
  36. :label="$t('coindeduc.operate')"
  37. align="center"
  38. >
  39. <template #default="scope">
  40. <el-button link type="primary" size="small" @click="detailView(scope.row)">{{ $t('coindeduc.view') }}</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="`${$t('coindeduc.detailTitle')}:`" 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: form.videoType === 1 ? '50%' : '100%'}">
  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. import { useI18n } from "vue-i18n";
  104. const { locale } = useI18n();
  105. const lanChange = ref(locale);
  106. const tableData = ref([]);
  107. const pageNum = ref(1);
  108. const pageSize = ref(10);
  109. const total = ref(0);
  110. const getDate = (val) => {
  111. return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
  112. };
  113. const handleSizeChange = (val) => {
  114. pageSize.value = val;
  115. getListData(pageNum.value, pageSize.value);
  116. };
  117. const handleCurrentChange = (val) => {
  118. pageNum.value = val;
  119. getListData(pageNum.value, pageSize.value);
  120. };
  121. const getListData = async (PageNum, PageSize) => {
  122. try {
  123. let data = {
  124. projectType: 2,
  125. pageNum: 1,
  126. pageSize: 10
  127. }
  128. const res = await coindedApi(data);
  129. tableData.value = res.data.list;
  130. total.value = res.data.total * 1;
  131. } catch (error) {
  132. console.log(error, "err");
  133. }
  134. };
  135. // 当前币值
  136. const currentValue = ref('')
  137. function currentValFn() {
  138. getUserPoinsApi().then(res => {
  139. currentValue.value = res.data
  140. })
  141. }
  142. // 查看详情
  143. const dialogVisible = ref(false)
  144. const form = ref({
  145. title: '',
  146. videoPlayUrl: ''
  147. })
  148. function detailView(item) {
  149. findByIdApi(item.id).then(res => {
  150. res.data.createDate = getDate(res.data.createDate)
  151. res.data.videoTime = res.data.videoTime + (lanChange.value == "zh-cn" ? '(秒)' : '(S)')
  152. form.value = res.data
  153. dialogVisible.value = true
  154. })
  155. }
  156. onMounted(() => {
  157. getListData(1, 10);
  158. currentValFn()
  159. });
  160. </script>
  161. <style lang="scss" scoped>
  162. .page {
  163. height: calc(100vh - 80px);
  164. // height: calc(100vh - 80px);
  165. background-color: #ffffff;
  166. border-radius: 30px 0 0 0;
  167. overflow: hidden;
  168. padding: 10vh;
  169. .addbtn {
  170. margin-bottom: 2vh;
  171. }
  172. .formData {
  173. padding: 5vh 3vh;
  174. }
  175. .pagination {
  176. position: fixed;
  177. left: 55%;
  178. bottom: 8vh;
  179. transform: translateX(-50%);
  180. border-radius: 5px;
  181. padding: 10px 20px;
  182. z-index: 99;
  183. transition: all 0.3s;
  184. cursor: pointer;
  185. &:hover {
  186. background-color: #b8b8b873;
  187. }
  188. }
  189. }
  190. </style>