detail.vue 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. <template>
  2. <view class="content">
  3. <view class="headerGetbg"></view>
  4. <view class="bgf mar-24 home-content">
  5. <!-- <view class="box-pack-between list flex-y-center br">
  6. <text class="ft32 list-title">基本信息</text>
  7. <view class="flex-y-center">
  8. <view @click="del" class="flex-y-center" style="margin-right: 20rpx;">
  9. <image src="../../static/images/del2.png" class="list-icon" mode=""></image> 删除
  10. </view>
  11. <view @click="enit" class="flex-y-center" style="margin-right: 0rpx;">
  12. <image src="../../static/images/enit2.png" class="list-icon" mode=""></image> 重命名
  13. </view>
  14. </view>
  15. </view> -->
  16. <view class="flex-y-center home-content-item" style="padding-top: 24rpx;">
  17. <text class="home-left-name">文件名称:</text>
  18. <view style="word-break:break-all;" >{{info.name}}</view>
  19. <!-- <view v-else class="home-left-input">
  20. <textarea @blur='enits' style="width: 100%;" :value="info.name" auto-height />
  21. </view> -->
  22. </view>
  23. <!-- <view class="flex-y-center home-content-item">
  24. <text class="home-left-name">文件大小:</text>
  25. <text>{{info.file_size}}</text>
  26. </view>
  27. <view class="flex-y-center home-content-item">
  28. <text class="home-left-name">文件后缀:</text>
  29. <text>{{info.file_ext}}</text>
  30. </view>
  31. -->
  32. <!-- <view class="flex-y-center home-content-item">
  33. <text class="home-left-name">创建时间:</text>
  34. <text>{{info.create_time}}</text>
  35. </view> -->
  36. </view>
  37. <view class="bgf home-content br">
  38. <view @click="addlabel" class="box-pack-between list flex-y-center br">
  39. <text class="ft32">文件预览</text>
  40. <!-- <view class="flex-y-center">
  41. <view class="text-1" style="width: 200rpx;text-align: right;">
  42. </view>
  43. <text class="iconfont icongengduo"></text>
  44. </view> -->
  45. </view>
  46. <view class="code-img">
  47. <image @click="play" v-if="!is_play" src="../../static/images/play.png" mode="aspectFit">
  48. </image>
  49. <image @click="Pause" v-else src="../../static/images/puash.png" mode="aspectFit" ></image>
  50. <view class="">
  51. {{is_play?'暂停':'播放'}}
  52. </view>
  53. </view>
  54. </view>
  55. </view>
  56. </template>
  57. <script>
  58. const innerAudioContext = uni.createInnerAudioContext();
  59. export default {
  60. data() {
  61. return {
  62. info: {},
  63. is_enit: false,
  64. URL: getApp().globalData.URL,
  65. is_play: false
  66. }
  67. },
  68. onLoad(e) {
  69. this.info = uni.getStorageSync("audio-info");
  70. console.log("this.info", this.info.src)
  71. innerAudioContext.src = this.URL + this.info.src;
  72. },
  73. onHide() {
  74. innerAudioContext.stop();
  75. },
  76. onUnload() {
  77. innerAudioContext.stop();
  78. },
  79. onShow(e) {
  80. innerAudioContext.onPlay(() => {
  81. console.log('开始播放');
  82. this.is_play = true
  83. });
  84. innerAudioContext.onError((res) => {
  85. console.log('错误事件');
  86. console.log(res.errCode);
  87. this.is_play = false
  88. });
  89. innerAudioContext.onEnded(() => {
  90. console.log('自然结束');
  91. this.is_play = false
  92. });
  93. innerAudioContext.onPause(() => {
  94. console.log('暂停播放');
  95. this.is_play = false
  96. });
  97. },
  98. methods: {
  99. play() {
  100. innerAudioContext.play();
  101. },
  102. Pause(e) {
  103. innerAudioContext.pause();
  104. },
  105. enit(e) {
  106. this.is_enit = !this.is_enit;
  107. },
  108. del(e) {
  109. uni.showModal({
  110. title: '删除提示',
  111. content: '确定要删除吗?',
  112. cancelText: '取消',
  113. confirmText: '删除',
  114. success: res => {
  115. if (res.confirm) {
  116. var url = "material/delete";
  117. this.request({
  118. url,
  119. data: {
  120. token: uni.getStorageSync("token"),
  121. id: this.info.id,
  122. },
  123. }).then(res => {
  124. console.log(res, "res")
  125. if (res.code === '200') {
  126. uni.showToast({
  127. title: '删除成功',
  128. icon: 'none',
  129. duration: 1000,
  130. success: (res) => {
  131. setTimeout(() => {
  132. var pages = getCurrentPages();
  133. var prevPage = pages[pages.length -2]; //上一个页面
  134. prevPage.setData({
  135. is_video: 2,
  136. })
  137. uni.navigateBack();
  138. }, 2e3)
  139. },
  140. })
  141. }
  142. }).catch((res) => {
  143. uni.showToast({
  144. title: res.message,
  145. icon: 'none',
  146. duration: 2000,
  147. success: (res) => {},
  148. })
  149. });
  150. }
  151. },
  152. fail: () => {},
  153. complete: () => {}
  154. });
  155. },
  156. },
  157. }
  158. </script>
  159. <style lang="scss">
  160. page {
  161. background: #F5F7FA;
  162. }
  163. .home-content {
  164. width: 690rpx;
  165. opacity: 1;
  166. background: #ffffff;
  167. border-radius: 14rpx;
  168. box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(204, 215, 230, 0.08);
  169. margin: 0 auto;
  170. position: relative;
  171. font-size: 28rpx;
  172. padding: 0 24rpx;
  173. margin-top: 30rpx;
  174. .list {
  175. height: 100rpx;
  176. color: #999999;
  177. .list-title {
  178. color: #000000;
  179. font-size: 30rpx;
  180. }
  181. .list-icon {
  182. width: 29rpx;
  183. height: 29rpx;
  184. margin-right: 6rpx;
  185. }
  186. }
  187. .home-content-item {
  188. padding-bottom: 24rpx;
  189. .home-left-name {
  190. opacity: 1;
  191. font-size: 28rpx;
  192. font-family: PingFang SC, PingFang SC-Regular;
  193. font-weight: 400;
  194. text-align: left;
  195. color: #99a0ad;
  196. min-width: 200rpx;
  197. }
  198. .home-left-input {
  199. border: 1rpx solid #ccc;
  200. padding: 10rpx;
  201. word-break: break-all;
  202. flex: 1;
  203. }
  204. }
  205. }
  206. .info-group {
  207. color: #999999;
  208. display: inline-block;
  209. border: 1rpx solid #F1F1F1;
  210. padding: 10rpx 20rpx;
  211. margin: 20rpx 20rpx;
  212. font-size: 30rpx;
  213. border-radius: 4rpx;
  214. }
  215. .video_path {
  216. width: 98%;
  217. display: block;
  218. margin: 0 auto;
  219. }
  220. .code-img {
  221. display: block;
  222. width: 200rpx;
  223. height: 200rpx;
  224. margin: 60rpx auto;
  225. text-align: center;
  226. }
  227. .code-img image{
  228. width: 100rpx;
  229. height: 100rpx;
  230. margin-bottom: 20rpx;
  231. }
  232. .logo {
  233. width: 100rpx;
  234. height: 100rpx;
  235. }
  236. </style>