大喇叭

src/apps/AppBroadcast1/AppResourcesManage/AppResourcesManage.vue

@@ -16,13 +16,18 @@
         <img :src="`${$cdn}video/play-icon.png`" alt="" @click="choose(item)">
         <div class="info">
           <p>{{ item.name ? item.name.split('.')[0] : '-' }}</p>
+          <div>{{ item.createUserName }}{{ item.createTime }}</div>
         </div>
+        <div class="btn">发布</div>
       </div>
     </div>
     <div class="record-text" v-else>
       <div class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item)">
-        <div>{{ item.name }}</div>
-        <p>{{ item.content }}</p>
+        <div class="info">
+          <div>{{ item.name }}</div>
+          <p>{{ item.content }}</p>
+        </div>
+        <div class="btn">发布</div>
       </div>
     </div>
     <AiEmpty v-if="!list.length"></AiEmpty>
@@ -57,8 +62,7 @@ export default {
       typeList: [{label: '全部', value: '0'}, {label: '我创建的', value: '1'},]
     }
   },
-  onLoad(query) {
-    this.isChoose = !!query.isChoose
+  onLoad() {
     this.getList()
     uni.$on('getList', () => {
       this.isMore = false
@@ -92,21 +96,8 @@ export default {
     },
 
     choose(item) {
-      if (!this.isChoose) {
-        console.log(item.url)
-        this.url = item.url
-        this.isShow = true
-
-        return false
-      }
-
-      uni.$emit('choose', {
-        mediaId: item.id,
-        mediaName: item.name
-      })
-      uni.navigateBack({
-        delta: 1
-      })
+      this.url = item.url
+      this.isShow = true
     },
 
     handerClear() {
@@ -207,7 +198,7 @@ export default {
       }
 
       .info {
-        width: calc(100% - 70px);
+        width: calc(100% - 256px);
         line-height: 44px;
         font-size: 34px;
         font-family: PingFang-SC-Medium, PingFang-SC;
@@ -220,6 +211,30 @@ export default {
           white-space: nowrap;
           word-break: break-all;
         }
+
+        div{
+          font-size: 26px;
+          font-family: PingFang-SC-Medium, PingFang-SC;
+          font-weight: 500;
+          color: #999;
+          line-height: 36px;
+        } 
+      }
+      .btn{
+        width: 154px;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        background: #3975C6;
+        border-radius: 8px;
+        font-size: 30px;
+        font-family: PingFang-SC-Medium, PingFang-SC;
+        font-weight: 500;
+        color: #FFF;
+        margin-left: 32px;
+      }
+      .bg-AFD0FC{
+        background-color: #AFD0FC;
       }
     }
   }
@@ -233,43 +248,63 @@ export default {
       padding: 32px 30px;
       box-sizing: border-box;
       font-size: 30px;
+      display: flex;
+      justify-content: space-between;
+      .info{
+        width: calc(100% - 190px);
+        div {
+          font-size: 30px;
+          font-family: PingFangSC-Medium, PingFang SC;
+          font-weight: 500;
+          color: #333;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          margin-bottom: 12px;
 
-      div {
+          .color-0063E5 {
+            color: #0063E5;
+          }
+
+          .color-FF8100 {
+            color: #FF8100;
+          }
+
+          .color-FF4466 {
+            color: #FF4466;
+          }
+        }
+
+        p {
+          font-family: PingFangSC-Regular, PingFang SC;
+          font-weight: 400;
+          color: #666;
+          line-height: 40px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          line-clamp: 2;
+          word-break: break-all;
+          -webkit-box-orient: vertical;
+        }
+      }
+       .btn{
+        width: 154px;
+        height: 60px;
+        line-height: 60px;
+        text-align: center;
+        background: #3975C6;
+        border-radius: 8px;
         font-size: 30px;
-        font-family: PingFangSC-Medium, PingFang SC;
+        font-family: PingFang-SC-Medium, PingFang-SC;
         font-weight: 500;
-        color: #333;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        margin-bottom: 12px;
-
-        .color-0063E5 {
-          color: #0063E5;
-        }
-
-        .color-FF8100 {
-          color: #FF8100;
-        }
-
-        .color-FF4466 {
-          color: #FF4466;
-        }
+        color: #FFF;
       }
-
-      p {
-        font-family: PingFangSC-Regular, PingFang SC;
-        font-weight: 400;
-        color: #666;
-        line-height: 40px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        line-clamp: 2;
-        word-break: break-all;
-        -webkit-box-orient: vertical;
+      .bg-AFD0FC{
+        background-color: #AFD0FC;
       }
+     
     }
   }
 

src/apps/AppBroadcast1/AppResourcesManage/detail.vue

@@ -3,21 +3,59 @@
     <div class="header">
       <img :src="`${$cdn}video/play-icon.png`" alt="">
       <div class="right">
-        <h2>五一活动唱红歌.mp3</h2>
-        <p>2022-06-09 09:43:45</p>
+        <h2>{{info.name}}.mp3</h2>
+        <p>{{info.createTime}}</p>
       </div>
     </div>
-    <div class="content"></div>
+    <div class="content" v-if="info.content">{{info.content}}</div>
     <div class="footer-bottom"></div>
     <div class="footer">
-      <div>删除素材</div>
-      <div class="confirm">发布广播</div>
+      <div @click="del">删除素材</div>
+      <div class="confirm" @click="toAddBroadcast()">发布广播</div>
     </div>
   </div>
 </template>
 <script>
 export default {
-  name: "detail"
+  name: "detail",
+  data() {
+    return {
+      info: {},
+      id: ''
+    }
+  },
+  onLoad(option) {
+    this.id = option.id
+    this.getDetail()
+  },
+
+  onShow() {
+    document.title = '媒资管理'
+  },
+
+  methods: {
+    getDetail() {
+      this.$http.post(`/app/appdlbresource/queryDetailById?id=${this.id}`).then(res => {
+        if (res.code == 0) {
+          this.info = res.data
+        }
+      })
+    },
+    del() {
+      this.$confirm(`是否删除该条素材？`).then(() => {
+        this.$http.post(`/app/appdlbresource/delete?id=${this.id}`).then((res) => {
+          if (res.code == 0) {
+            this.$u.toast('删除成功')
+            uni.$emit('getList')
+            uni.navigateBack()
+          }
+        })
+      })
+    },
+    toAddBroadcast() {
+      uni.navigateTo({ url: `../addPlay?mediaId=${this.info.id}&mediaName=${this.info.name}` })
+    }
+  },
 }
 </script>
 <style lang="scss" scoped>