Merge branch 'test'

src/api/content.js

@@ -0,0 +1,10 @@
+import request from "../utils/request";
+
+// 详情
+export function detail(data) {
+  return request({
+    url: `/contentShare/detail`,
+    method: 'get',
+    data
+  })
+}

src/components/my-audio/my-audio.vue

@@ -0,0 +1,84 @@
+<template>
+  <!-- 播放器 -->
+  <view class="audio" :style="{ 'background': (bg ? `url(${bg}) no-repeat 100% / 100%` : '#EEE') }">
+    <image class="pic" :src="pic" />
+    <view class="info">
+      <view class="song">{{ name }}</view>
+      <view class="singer">{{ singer ? singer : '暂无歌手名' }}</view>
+    </view>
+    <image v-if="newStatus === 1" class="btn" src="../../static/stop.png" @click="getPlay" />
+    <image v-else class="btn" src="../../static/play.png" @click="getPlay" />
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    bg: String,
+    pic: String,
+    name: String,
+    status: Number,
+    singer: String
+  },
+  data() {
+    return {
+      newStatus: this.status
+    }
+  },
+  watch: {
+    status(val) {
+      this.newStatus = val
+    }
+  },
+  methods: {
+    getPlay() {
+      this.$emit('click', this.newStatus)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.audio {
+  width: 100%;
+  height: 104px;
+  padding: 8px 16px 8px 8px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+
+  .pic {
+    width: 88px;
+    height: 88px;
+    border-radius: 8px;
+    margin-right: 16px;
+  }
+
+  .info {
+    width: calc(100% - 144px);
+    color: #000;
+
+    .song {
+      font-size: 16px;
+      margin-bottom: 16px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+
+    .singer {
+      font-size: 12px;
+      opacity: 0.6;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .btn {
+    width: 40px;
+    height: 40px;
+  }
+}
+</style>

src/components/my-list/my-list.vue

@@ -0,0 +1,107 @@
+<template>
+  <view class="box">
+    <view class="info">
+      <view class="name">{{ name }}</view>
+      <button @click="getPlay">收听{{ audioOption[type] }}</button>
+    </view>
+    <view class="list">
+      <ol v-if="data.childList.length > 0">
+        <li v-for="(item, index) in data.childList" :key="item.id">{{ index + 1 }}、{{ item.audioName }}</li>
+      </ol>
+      <view v-else>{{ audioOption[type] }}暂无内容</view>
+    </view>
+    <img class="pic" :src="pic" />
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    pic: String,
+    name: String,
+    type: Number,
+    data: Object
+  },
+  data() {
+    return {
+      audioOption: {
+        8: '播客专辑',
+        10: '歌单',
+        15: '音乐专辑'
+      }
+    }
+  },
+  methods: {
+    getPlay() {
+      this.$emit('click')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.box {
+  width: 100%;
+  height: 203px;
+  padding: 18px 16px 24px;
+  background: #EEE;
+  border-radius: 8px;
+  color: #000;
+  position: relative;
+
+  .info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .name {
+      flex: 1;
+      font-weight: bold;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis
+    }
+
+    button {
+      height: auto;
+      line-height: 1;
+      padding: 14px 28px;
+      font-size: 16px;
+      font-weight: bold;
+      color: #FFF;
+      border-radius: 25px;
+      background: linear-gradient(146deg, #000000 0%, #333333 100%);
+    }
+  }
+
+  .list {
+    display: flex;
+    justify-content: space-between;
+    position: relative;
+    font-size: 14px;
+    font-weight: bold;
+
+    ol {
+      padding-inline-start: 18px;
+      padding: 0;
+
+      li {
+        width: 140px;
+        margin-bottom: 12px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
+  .pic {
+    position: absolute;
+    right: 16px;
+    bottom: 24px;
+    width: 100px;
+    height: 100px;
+    border-radius: 8px;
+  }
+}
+</style>

src/pages.json

@@ -132,11 +132,19 @@
 				"navigationStyle": "custom"
 			}
 		},
-		{ // 协议页面
+		{
+			// 协议页面
 			"path": "pages/agreement/index",
 			"style": {
 				"navigationStyle": "custom"
 			}
+		},
+		{
+			// 文章页面
+			"path": "pages/content/index",
+			"style": {
+				"navigationStyle": "custom"
+			}
 		}
 	]
 }

src/pages/content/index.vue

@@ -0,0 +1,211 @@
+<template>
+  <view class='app-container' :style="{ backgroundImage: `url(${form.backgroundImage})` }">
+    <view class="content" :style="{ 'padding-bottom': form.buttonFixType === 0 ? '94px' : 0 }">
+      <!-- 打开app -->
+      <open-app v-if="!inside" @open="getOpenApp" />
+      <!-- 页面布局 -->
+      <view v-if="form.contentShareLayoutList">
+        <view class="item" v-for="item in form.contentShareLayoutList" :key="item.id">
+          <!-- 图片 -->
+          <img v-if="item.layoutType === 0" mode="aspectFit" :src="item.contentPic" />
+          <!-- 音频 -->
+          <my-audio v-if="item.layoutType === 1" :ref="`video${item.sort}`" :bg="form.audioBackgroundImage"
+            :pic="item.contentPic" :name="item.contentName" :singer="item.contentInfo.singerName" :status="item.playStatus" @click="getPlay($event, item)" />
+          <!-- 歌单 、专辑 -->
+          <my-list v-if="item.layoutType === 2" :pic="item.contentPic" :name="item.contentName" :data="item.contentInfo"
+            :type="item.contentType" @click="getOpen(item)" />
+        </view>
+      </view>
+    </view>
+    <!-- 按钮 -->
+    <view :class="['footer', form.buttonFixType === 0 ? 'fixed' : '']"
+      v-if="inside ? form.isButton == 1 ? true : false : false">
+      <button class="left" @click="getClick(form.leftButtonForwardType, form, 'leftButton')"
+        :style="{ background: form.leftButtonImg ? `url(${form.leftButtonImg}) no-repeat 100% / 100%` : '' }">
+        <text>{{ form.leftButtonText }}</text>
+      </button>
+      <button class="right" @click="getClick(form.rightButtonForwardType, form, 'rightButton')"
+        :style="{ background: form.rightButtonImg ? `url(${form.rightButtonImg}) no-repeat 100% / 100%` : '' }">
+        <text>{{ form.rightButtonText }}</text>
+      </button>
+    </view>
+  </view>
+</template>
+
+<script>
+import { detail } from '@/api/content'
+export default {
+  data() {
+    return {
+      // 判断是否为APP内部H5
+      inside: JSON.stringify(getApp().globalData.userInfo) == "{}" ? false : true,
+      // 表单
+      form: {},
+      // 跳转地址
+      audioOption: {
+        8: '/mobile/playAlbumPage',
+        10: '/mobile/playSongsPage',
+        15: '/mobile/playSongsPage'
+      },
+      activeAudio: {}
+    }
+  },
+  onLoad(e) {
+    if (e.articleId) {
+      this.getDetail(e.articleId)
+    }
+  },
+  methods: {
+    getDetail(articleId) {
+      detail({
+        articleId: articleId
+      }).then(res => {
+        if (res.data.code === 0) {
+          if (res.data.data.templateType == 1) {
+            // 按sort从小到大排序
+            res.data.data.contentShareLayoutList.sort(function (x, y) {
+              return x.sort > y.sort ? 1 : -1
+            })
+            // 给单音频添加播放状态
+            res.data.data.contentShareLayoutList.map(i => {
+              if ([2, 6, 11].includes(i.contentType)) {
+                i.playStatus = 2
+              }
+            })
+          }
+
+          this.form = res.data.data
+
+          // 检测当前是否有正在播放的音频
+          if (this.inside) {
+            this.getStatus()
+          }
+        } else {
+          uni.showToast({
+            icon: 'error',
+            title: res.data.message
+          })
+        }
+      })
+    },
+
+    // 获取播放状态
+    getStatus() {
+      playStatus.postMessage(`获取当前播放状态`)
+      window['setOpenPage'] = res => {
+        let e = JSON.parse(res)
+        this.form.contentShareLayoutList.find(i => {
+          if (i.contentId == e.audioId) {
+            i.playStatus = e.status
+          }
+        })
+      }
+    },
+
+    // 单个音频
+    getPlay(e, item) {
+      if (this.inside) {
+        let status = e === 2 ? 1 : 2
+        openPage.postMessage(`?page=/mobile/audioPage&audioId=${item.contentInfo.audioId}&audioType=${item.contentInfo.audioType}&platformId=${item.platformId}&playStatus=${status}&openAudioPage=0&cmd=openPage`)
+        window['setOpenPage'] = res => {
+          item.playStatus = JSON.parse(res).status
+        }
+      } else {
+        this.getOpenApp()
+      }
+    },
+
+    // 歌单 、专辑
+    getOpen(item) {
+      if (this.inside) {
+        openPage.postMessage(`?page=${this.audioOption[item.contentType]}&audioId=${item.contentInfo.audioId}&audioType=${item.contentInfo.audioType}&platformId=${item.platformId}&openAudioPage=1&cmd=openPage`)
+      } else {
+        this.getOpenApp()
+      }
+    },
+
+    // 浏览器H5打开App内部H5
+    getOpenApp() {
+      this.openApp(`?page=/mobile/webViewPage&url=pages/content/index?articleId=${this.form.id}&cmd=openPage&isNeedLogin=1&title=${this.form.title}`)
+    },
+
+    // 底部按钮
+    getClick(type, form, key) {
+      if (type === 0) {
+        // H5内链
+        window.location.href = form[`${key}ForwardUrl`]
+      } else if (type === 1) {
+        // App跳转音频合集
+        openPage.postMessage(`?page=${this.audioOption[form[`${key}ContentType`]]}&audioId=${form[`${key}ContentId`]}&audioType=${form[`${key}ContentType`]}&playformId=${form[`${key}PlatformId`]}&openAudioPage=1&cmd=openPage`)
+      } else {
+        // 分享
+        openShare.postMessage(`?contentId=${form.id}&shareType=-4`)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.app-container {
+  display: flex;
+  flex-flow: column nowrap;
+  word-break: break-all;
+  padding: 0;
+  font-weight: 100;
+  min-height: 100%;
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+
+  .content {
+    flex: 1;
+    padding: 24px 16px;
+
+    .title {
+      margin-bottom: 24px;
+      color: #FFF;
+      font-weight: bold;
+    }
+
+    .item {
+      margin-bottom: 24px;
+
+      img {
+        width: 100%;
+      }
+    }
+  }
+
+  .footer {
+    width: 100%;
+    height: 94px;
+    background: #414141;
+    display: flex;
+    justify-content: space-around;
+    padding-top: 24px;
+
+    button {
+      background: linear-gradient(180deg, #A4D099 0%, #78B06A 100%);
+      height: 46px;
+      line-height: 46px;
+      font-size: 16px;
+      border-radius: 25px;
+      color: #FFF;
+      font-weight: bold;
+    }
+
+    .left {
+      width: 220px;
+    }
+
+    .right {
+      width: 107px;
+    }
+  }
+}
+
+.fixed {
+  position: fixed;
+  bottom: 0;
+}
+</style>

src/utils/openApp.js

@@ -9,10 +9,8 @@ const openApp = function (url) {
     })
   } else {
     if (res.platform === 'ios') {
-      // window.location.href = `airsmart://?page=${page}&channel=${channel}&audioType=${audioType}&audioId=${audioId}`
       window.location.href = `airsmart://${url}&cmd=openPage`
     } else {
-      // window.location.href = `airsmart://com.muzen.radioplayer:8888/main?page=${page}&channel=${channel}&audioType=${audioType}&audioId=${audioId}`
       window.location.href = `airsmart://muzen${url}&cmd=openPage`
     }