liveOption.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286
  1. <template>
  2. <view class="container">
  3. <u-cell-group class="form-info" :border="false">
  4. <u-field label="直播名称" placeholder="请输入直播名称" label-width="180" v-model="videoInfo.liveName"></u-field>
  5. <u-cell-item title="请上传直播海报" :arrow="false">
  6. <view slot="label">
  7. <u-upload :action="uploadUrl" :file-list="defaultList" :form-data="uploadData" @on-success="uploadSuccess"
  8. @on-error="uploadError" @on-remove="uploadRemove" max-count="1"></u-upload>
  9. </view>
  10. </u-cell-item>
  11. <u-cell-item title="直播起始时间" :value="videoInfo.liveStartTime" @click="dateShow1 = true"></u-cell-item>
  12. <u-cell-item title="直播结束时间" :value="videoInfo.liveEndTime" @click="dateShow2 = true"></u-cell-item>
  13. <u-cell-item title="日期选择(可多选)" :arrow="false">
  14. <view slot="label">
  15. <u-checkbox-group>
  16. <u-checkbox v-model="item.checked" v-for="(item, index) in checkList" :key="index" :name="item.value" shape="circle"
  17. active-color="#51A539">{{item.name}}</u-checkbox>
  18. </u-checkbox-group>
  19. </view>
  20. </u-cell-item>
  21. </u-cell-group>
  22. <view class="form-handle">
  23. <u-button type="success" shape="circle" :ripple="true" @click="submitData" :disabled="getPermit()" class="handle-custom">提交</u-button>
  24. </view>
  25. <u-picker mode="time" v-model="dateShow1" :start-year="startYear" :params="params" @confirm="setDate1"></u-picker>
  26. <u-picker mode="time" v-model="dateShow2" :start-year="startYear" :params="params" @confirm="setDate2"></u-picker>
  27. <u-top-tips ref="uTips"></u-top-tips>
  28. </view>
  29. </template>
  30. <script>
  31. const NET = require('@/utils/request')
  32. const API = require('@/config/api')
  33. export default {
  34. data() {
  35. return {
  36. type: 'add',
  37. videoInfo: {
  38. liveName: '',
  39. liveStartTime: '',
  40. liveEndTime: '',
  41. },
  42. checkList: [{
  43. name: '星期一',
  44. value: '1',
  45. checked: false,
  46. disabled: false
  47. },
  48. {
  49. name: '星期二',
  50. value: '2',
  51. checked: false,
  52. disabled: false
  53. },
  54. {
  55. name: '星期三',
  56. value: '3',
  57. checked: false,
  58. disabled: false
  59. },
  60. {
  61. name: '星期四',
  62. value: '4',
  63. checked: false,
  64. disabled: false
  65. },
  66. {
  67. name: '星期五',
  68. value: '5',
  69. checked: false,
  70. disabled: false
  71. },
  72. {
  73. name: '星期六',
  74. value: '6',
  75. checked: false,
  76. disabled: false
  77. },
  78. {
  79. name: '星期天',
  80. value: '7',
  81. checked: false,
  82. disabled: false
  83. }
  84. ],
  85. dateShow1: false,
  86. dateShow2: false,
  87. params: {
  88. year: true,
  89. month: true,
  90. day: true,
  91. hour: true,
  92. minute: true,
  93. second: true
  94. },
  95. startYear: '',
  96. uploadData: {
  97. folderId: 0,
  98. },
  99. uploadUrl: '',
  100. fileList: [],
  101. defaultList: [],
  102. }
  103. },
  104. onLoad(options) {
  105. this.uploadUrl = API.uploadFile
  106. this.startYear = new Date().getFullYear()
  107. NET.request(API.getLiveId, {}, 'GET').then(res => {
  108. if (res.data && res.data != 0) {
  109. this.type = 'edit'
  110. this.videoInfo.liveId = res.data
  111. this.getLiveDetail()
  112. }
  113. }).catch(res => {
  114. this.$refs.uTips.show({
  115. title: '获取直播ID失败',
  116. type: 'warning',
  117. })
  118. })
  119. },
  120. methods: {
  121. // 直播详情
  122. getLiveDetail() {
  123. NET.request(API.getLiveData + this.videoInfo.liveId, {}, 'POST').then(res => {
  124. this.videoInfo = {
  125. liveId: res.data.liveId,
  126. liveName: res.data.liveName,
  127. liveStartTime: res.data.liveStartTime,
  128. liveEndTime: res.data.liveEndTime,
  129. }
  130. this.fileList = [res.data.imgUrl]
  131. this.defaultList = [{
  132. url: res.data.imgUrl
  133. }]
  134. res.data.liveWeek.split(',').forEach(site => {
  135. this.checkList[parseInt(site) - 1].checked = true
  136. })
  137. }).catch(res => {
  138. this.$refs.uTips.show({
  139. title: '获取直播设置参数失败',
  140. type: 'warning',
  141. })
  142. })
  143. },
  144. // 文件上传成功回调
  145. uploadSuccess(res, index, lists, name) {
  146. this.fileList.push(res.data.url)
  147. this.$refs.uTips.show({
  148. title: '文件上传成功',
  149. type: 'success',
  150. })
  151. return true
  152. },
  153. // 文件上传失败回调
  154. uploadError(res, index, lists, name) {
  155. this.$refs.uTips.show({
  156. title: '文件上传失败',
  157. type: 'warning',
  158. })
  159. },
  160. // 移除文件回调
  161. uploadRemove(index, lists, name) {
  162. this.fileList.splice(index, 1)
  163. },
  164. // 设置时间
  165. setDate1(data) {
  166. this.videoInfo.liveStartTime = data.year + '-' + data.month + '-' + data.day + ' ' + data.hour + ':' + data.minute +
  167. ':' + data.second
  168. },
  169. // 设置时间
  170. setDate2(data) {
  171. this.videoInfo.liveEndTime = data.year + '-' + data.month + '-' + data.day + ' ' + data.hour + ':' + data.minute +
  172. ':' + data.second
  173. },
  174. // 检查必填项
  175. getPermit() {
  176. if (!this.videoInfo.liveName || !this.videoInfo.liveStartTime || !this.videoInfo.liveEndTime || !this.fileList.length ||
  177. !this.checkList.filter(site => site.checked).length) {
  178. return true
  179. }
  180. return false
  181. },
  182. // 提交
  183. submitData() {
  184. if (this.type == 'add') {
  185. NET.request(API.setLiveData, {
  186. ...this.videoInfo,
  187. imgUrl: this.fileList[0],
  188. liveWeek: this.checkList.filter(site => site.checked).map(site => {
  189. return site.value
  190. }).join(',')
  191. }, 'POST').then(res => {
  192. this.$refs.uTips.show({
  193. title: '新增直播设置成功',
  194. type: 'success',
  195. })
  196. setTimeout(() => {
  197. uni.navigateBack()
  198. }, 1000)
  199. }).catch(res => {
  200. this.$refs.uTips.show({
  201. title: res.data.msg,
  202. type: 'warning',
  203. })
  204. })
  205. } else {
  206. NET.request(API.editLiveData, {
  207. ...this.videoInfo,
  208. imgUrl: this.fileList[0],
  209. liveWeek: this.checkList.filter(site => site.checked).map(site => {
  210. return site.value
  211. }).join(',')
  212. }, 'POST').then(res => {
  213. this.$refs.uTips.show({
  214. title: '编辑直播设置成功',
  215. type: 'success',
  216. })
  217. setTimeout(() => {
  218. uni.navigateBack()
  219. }, 1000)
  220. }).catch(res => {
  221. this.$refs.uTips.show({
  222. title: res.data.msg,
  223. type: 'warning',
  224. })
  225. })
  226. }
  227. },
  228. },
  229. }
  230. </script>
  231. <style lang="less" scoped>
  232. page {
  233. width: 100%;
  234. height: 100%;
  235. }
  236. .container {
  237. width: 100%;
  238. height: 100%;
  239. float: left;
  240. box-sizing: border-box;
  241. padding-bottom: 70px;
  242. overflow-y: auto;
  243. .form-info {
  244. width: 100%;
  245. float: left;
  246. /deep/.u-label-text {
  247. color: #333333;
  248. }
  249. /deep/.u-cell_title {
  250. color: #333333;
  251. }
  252. .good-img {
  253. float: left;
  254. margin: 5px;
  255. }
  256. }
  257. .form-handle {
  258. width: calc(100% - 30px);
  259. height: 40px;
  260. position: fixed;
  261. bottom: 20px;
  262. left: 15px;
  263. background-color: #FFFFFF;
  264. .handle-custom {
  265. background-color: #51A539;
  266. /deep/button {
  267. background-color: #56a83a;
  268. }
  269. /deep/.u-btn--success--disabled {
  270. background-color: #74bd60 !important;
  271. }
  272. }
  273. }
  274. }
  275. </style>