index.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511
  1. <template>
  2. <view class="container">
  3. <view class="media-card">
  4. <view class="media-head">
  5. <view class="media-title">直播</view>
  6. <view class="media-handle">
  7. <view class="handle-card" @click="goToSetLive">
  8. <view class="iconfont iconshezhi"></view>
  9. <view class="handle-card-text">直播设置</view>
  10. </view>
  11. </view>
  12. </view>
  13. <view class="media-content">
  14. <image class="live-card" src="../../static/images/live-card.png" @click="goToLiveDetail"></image>
  15. </view>
  16. </view>
  17. <view class="media-card">
  18. <view class="media-head">
  19. <view class="media-title">短视频</view>
  20. <view class="media-handle">
  21. <view class="handle-text" style="color: #51A539;" @click="goManage" v-if="!manageType">管理</view>
  22. <view class="handle-text" style="color: #333333;" @click="manageType = false" v-if="manageType">取消</view>
  23. <view class="handle-text" style="color: #F95151;" @click="deleteVideo()" v-if="manageType">删除</view>
  24. <view class="handle-card" v-if="!manageType" @click="addVideo">
  25. <view class="iconfont iconshangchuan"></view>
  26. <view class="handle-card-text">上传视频</view>
  27. </view>
  28. </view>
  29. </view>
  30. <view class="media-content">
  31. <view class="video-card" v-for="(item, index) in list" :key="index" @click="!manageType&&goToVideo(item)">
  32. <image class="video-img" :src="item.coverUrl"></image>
  33. <view class="video-title-box" @click.stop="setVideoStatue(item)">
  34. <text class="iconfont" :class="item.check ? 'iconqueding' : 'iconfeigouxuan'"
  35. v-if="manageType"></text>
  36. <view class="video-title">
  37. {{item.videoName}}
  38. </view>
  39. </view>
  40. </view>
  41. <u-divider :color="isOver ? '#909399' : '#51A539'" :border-color="isOver ? '#909399' : '#51A539'" @click="handleLoadMore()">
  42. <u-loading mode="circle" v-if="loadingData"></u-loading>{{loadingData ? '加载中' : (isOver ? '没有更多了' : '点击加载更多')}}
  43. </u-divider>
  44. </view>
  45. </view>
  46. <u-top-tips ref="uTips"></u-top-tips>
  47. <view class="uni-popup-dialog" :hidden="show_qx">
  48. <view class="uni-dialog-title">
  49. <text class="uni-dialog-title-text">提示</text>
  50. </view>
  51. <view class="uni-dialog-content">
  52. <text class="uni-dialog-content-text">请在设置中开启摄像头权限和麦克风权限</text>
  53. </view>
  54. <view class="uni-dialog-button-group">
  55. <button class="uni-dialog-button uni-border-left" open-type="openSetting" @click="closeSetting">
  56. 设置权限
  57. </button>
  58. </view>
  59. </view>
  60. <view class="qx_bg" :hidden="show_qx">
  61. </view>
  62. </view>
  63. </view>
  64. </template>
  65. <script>
  66. const NET = require('@/utils/request')
  67. const API = require('@/config/api')
  68. export default {
  69. data() {
  70. return {
  71. show_qx:true,
  72. liveId: '',
  73. pageIndex: 1,
  74. isOver: false,
  75. list: [],
  76. manageType: false,
  77. loadingData: false,
  78. userData: {},
  79. }
  80. },
  81. onShow() {
  82. this.userData = uni.getStorageSync("userData")||{}
  83. this.getBaseData()
  84. },
  85. onPullDownRefresh() {
  86. this.getBaseData('refresh')
  87. },
  88. methods: {
  89. closeSetting:function(){
  90. this.show_qx=true;
  91. },
  92. goManage() {
  93. if(!this.userData.roleInfos.some(v=>v.menuInfos.some(vv=>vv.label == '短视频'))){
  94. this.$refs.uTips.show({
  95. title: '没有授权使用,请联系商户负责人',
  96. type: 'warning',
  97. })
  98. return;
  99. }
  100. this.manageType = true
  101. },
  102. // 取消选中
  103. setVideoStatue(item){
  104. item.check = !item.check
  105. },
  106. // 获取全部数据
  107. getBaseData(refresh) {
  108. this.pageIndex = 1
  109. this.list = []
  110. this.getList()
  111. NET.request(API.getLiveId, {}, 'GET').then(res => {
  112. if (refresh == 'refresh') {
  113. uni.stopPullDownRefresh();
  114. }
  115. if (res.data && res.data != 0) {
  116. this.liveId = res.data
  117. }
  118. }).catch(res => {
  119. this.$refs.uTips.show({
  120. title: '获取直播ID失败',
  121. type: 'warning',
  122. })
  123. })
  124. },
  125. // 直播设置
  126. goToSetLive() {
  127. if(!this.userData.roleInfos.some(v=>v.menuInfos.some(vv=>vv.label == '直播信息查改'))){
  128. this.$refs.uTips.show({
  129. title: '没有授权使用,请联系商户负责人',
  130. type: 'warning',
  131. })
  132. return;
  133. }
  134. uni.navigateTo({
  135. url: '/pagesMedia/liveOption'
  136. });
  137. },
  138. // 查看直播详情
  139. goToLiveDetail() {
  140. if(!this.userData.roleInfos.some(v=>v.menuInfos.some(vv=>vv.label == '开始直播并可选择商品'))){
  141. this.$refs.uTips.show({
  142. title: '没有授权使用,请联系商户负责人',
  143. type: 'warning',
  144. })
  145. return;
  146. }
  147. if (this.liveId) {
  148. var that=this;
  149. wx.getSetting({
  150. success(res) {
  151. if (!res.authSetting['scope.camera']){
  152. that.show_qx=false;
  153. }else if (!res.authSetting['scope.record']){
  154. that.show_qx=false;
  155. }else{
  156. uni.navigateTo({
  157. url: '/pagesMedia/liveDetail?liveId=' + that.liveId
  158. });
  159. }
  160. }
  161. })
  162. } else {
  163. this.$refs.uTips.show({
  164. title: '当前无可进行的直播',
  165. type: 'warning',
  166. })
  167. }
  168. },
  169. // 新增短视频
  170. addVideo() {
  171. if(!this.userData.roleInfos.some(v=>v.menuInfos.some(vv=>vv.label == '短视频'))){
  172. this.$refs.uTips.show({
  173. title: '没有授权使用,请联系商户负责人',
  174. type: 'warning',
  175. })
  176. return;
  177. }
  178. uni.navigateTo({
  179. url: '/pagesMedia/videoForm?type=add'
  180. });
  181. },
  182. // 懒加载
  183. handleLoadMore() {
  184. if (!this.isOver) {
  185. this.pageIndex++
  186. this.getList()
  187. }
  188. },
  189. // 获取列表数据
  190. getList() {
  191. this.loadingData = true
  192. NET.request(API.getVideoList + this.pageIndex + '/10', {}, 'GET').then(res => {
  193. this.loadingData = false
  194. this.isOver = res.data.list.length != 10
  195. res.data.list.forEach(site => {
  196. site.check = false
  197. })
  198. this.list = this.list.concat(res.data.list)
  199. }).catch(error => {
  200. this.loadingData = false
  201. this.$refs.uTips.show({
  202. title: error.data.msg,
  203. type: 'warning',
  204. })
  205. })
  206. },
  207. // 查看短视频详情
  208. goToVideo(item) {
  209. if(!this.userData.roleInfos.some(v=>v.menuInfos.some(vv=>vv.label == '短视频'))){
  210. this.$refs.uTips.show({
  211. title: '没有授权使用,请联系商户负责人',
  212. type: 'warning',
  213. })
  214. return;
  215. }
  216. uni.setStorage({
  217. key: 'videoUrl',
  218. data: item.mediaUrl
  219. })
  220. uni.navigateTo({
  221. url: '/pagesMedia/videoDetail?videoId=' + item.videoId
  222. });
  223. },
  224. // 删除短视频
  225. deleteVideo() {
  226. let postData = ''
  227. this.list.filter(site => site.check).forEach((site, index) => {
  228. postData += (index ? '&' : '?') + 'videoIds=' + site.videoId
  229. })
  230. NET.request(API.deleteVideo + '/' + postData, {}, 'GET').then(res => {
  231. this.$refs.uTips.show({
  232. title: '删除成功',
  233. type: 'success',
  234. })
  235. this.manageType = false
  236. this.pageIndex = 1
  237. this.list = []
  238. this.getList()
  239. }).catch(error => {
  240. this.$refs.uTips.show({
  241. title: error.data.msg,
  242. type: 'warning',
  243. })
  244. })
  245. },
  246. }
  247. }
  248. </script>
  249. <style lang="less" scoped>
  250. page {
  251. width: 100%;
  252. height: 100%;
  253. }
  254. .container {
  255. width: 100%;
  256. height: 100%;
  257. float: left;
  258. background-color: #f7f7f7;
  259. overflow-y: auto;
  260. .media-card {
  261. width: 100%;
  262. float: left;
  263. background: #FFFFFF;
  264. border-radius: 0 0 10px 10px;
  265. margin-bottom: 10px;
  266. .media-head {
  267. width: 100%;
  268. height: 45px;
  269. float: left;
  270. box-sizing: border-box;
  271. padding: 6px 0 6px 15px;
  272. border-bottom: 1px solid #EDEDED;
  273. .media-title {
  274. height: 16px;
  275. float: left;
  276. margin: 8px 0;
  277. padding-left: 6px;
  278. border-left: 2px solid #51A539;
  279. font-size: 15px;
  280. font-family: PingFang SC;
  281. color: #333333;
  282. line-height: 16px;
  283. }
  284. .media-handle {
  285. height: 32px;
  286. float: right;
  287. .handle-text {
  288. height: 32px;
  289. float: left;
  290. padding: 0 10px;
  291. margin: 0 5px;
  292. font-size: 15px;
  293. font-family: PingFang SC;
  294. line-height: 32px;
  295. }
  296. .handle-card {
  297. width: 96px;
  298. height: 32px;
  299. float: left;
  300. background: #51A539;
  301. border-radius: 16px 0px 0px 16px;
  302. font-family: PingFang SC;
  303. color: #FFFFFF;
  304. display: flex;
  305. align-items: center;
  306. justify-content: center;
  307. .iconfont {
  308. font-size: 22px;
  309. }
  310. .handle-card-text {
  311. float: left;
  312. line-height: 32px;
  313. font-size: 12px;
  314. }
  315. }
  316. }
  317. }
  318. .media-content {
  319. width: 100%;
  320. float: left;
  321. padding: 10px 15px;
  322. box-sizing: border-box;
  323. .live-card {
  324. width: 100%;
  325. height: 80px;
  326. float: left;
  327. }
  328. .video-card:nth-child(odd) {
  329. margin: 0 5px 10px 0;
  330. }
  331. .video-card:nth-child(even) {
  332. margin: 0 0 10px 5px;
  333. }
  334. .video-card {
  335. width: calc(50% - 5px);
  336. height: 206px;
  337. float: left;
  338. background: #FFFFFF;
  339. box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
  340. border-radius: 5px;
  341. overflow: hidden;
  342. .video-img {
  343. width: 100%;
  344. height: 170px;
  345. object-fit: cover;
  346. float: left;
  347. }
  348. .video-title-box {
  349. width: 100%;
  350. height: 36px;
  351. float: left;
  352. font-family: PingFang SC;
  353. line-height: 36px;
  354. display: flex;
  355. justify-content: center;
  356. .iconfont {
  357. color: #51A539;
  358. font-size: 36px;
  359. line-height: 36px;
  360. display: flex;
  361. align-items: center;
  362. }
  363. .video-title {
  364. max-width: calc(100% - 36px);
  365. height: 36px;
  366. line-height: 36px;
  367. font-size: 15px;
  368. color: #333333;
  369. overflow: hidden;
  370. text-overflow: ellipsis;
  371. white-space: nowrap;
  372. }
  373. }
  374. }
  375. }
  376. }
  377. }
  378. .uni-popup-dialog {
  379. width: 80vw;
  380. border-radius: 15px;
  381. background-color: #fff;
  382. position: fixed;
  383. margin-left: 10vw;
  384. top: 34vh;
  385. z-index: 11;
  386. }
  387. .uni-dialog-title {
  388. /* #ifndef APP-NVUE */
  389. display: flex;
  390. /* #endif */
  391. flex-direction: row;
  392. justify-content: center;
  393. padding-top: 15px;
  394. padding-bottom: 5px;
  395. }
  396. .uni-dialog-title-text {
  397. font-size: 16px;
  398. font-weight: 500;
  399. }
  400. .uni-dialog-content {
  401. /* #ifndef APP-NVUE */
  402. display: flex;
  403. /* #endif */
  404. flex-direction: row;
  405. justify-content: center;
  406. align-items: center;
  407. padding: 5px 15px 15px 15px;
  408. text-align: center;
  409. }
  410. .uni-dialog-content-text {
  411. font-size: 14px;
  412. color: #6e6e6e;
  413. }
  414. .uni-dialog-button-group {
  415. /* #ifndef APP-NVUE */
  416. display: flex;
  417. /* #endif */
  418. flex-direction: row;
  419. border-top-color: #f5f5f5;
  420. border-top-style: solid;
  421. border-top-width: 1px;
  422. }
  423. .uni-dialog-button {
  424. /* #ifndef APP-NVUE */
  425. display: flex;
  426. /* #endif */
  427. background: rgba(0, 0, 0, 0);
  428. border: none;
  429. flex: 1;
  430. flex-direction: row;
  431. justify-content: center;
  432. align-items: center;
  433. height: 45px;
  434. }
  435. .uni-border-left {
  436. border-left-color: #f0f0f0;
  437. border-left-style: solid;
  438. border-left-width: 0px;
  439. }
  440. .uni-dialog-button-text {
  441. font-size: 14px;
  442. }
  443. .uni-button-color {
  444. color: #007aff;
  445. }
  446. .uni-dialog-input {
  447. flex: 1;
  448. font-size: 14px;
  449. }
  450. .uni-popup__success {
  451. color: #4cd964;
  452. }
  453. .uni-popup__warn {
  454. color: #f0ad4e;
  455. }
  456. .uni-popup__error {
  457. color: #dd524d;
  458. }
  459. .uni-popup__info {
  460. color: #909399;
  461. }
  462. .qx_bg{
  463. width: 100vw;
  464. height: 100vh;
  465. background: rgba(0, 0, 0, 0.25);
  466. position: fixed;
  467. top: 0px;
  468. left: 0px;
  469. z-index: 10;
  470. }
  471. </style>