Merge branch 'develop/3.1.4' into 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,68 @@
+<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">暂无歌手名</view>
+    </view>
+    <image class="btn" src="../../static/play.png" />
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    bg: String,
+    pic: String,
+    name: String
+  },
+  data() {
+    return {
+
+    }
+  },
+  mounted() {
+
+  }
+}
+</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;
+    }
+
+    .singer {
+      font-size: 12px;
+      opacity: 0.6;
+    }
+  }
+
+  .btn {
+    width: 40px;
+    height: 40px;
+  }
+}
+</style>

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

@@ -0,0 +1,106 @@
+<template>
+  <view class="box">
+    <view class="info">
+      <view class="name">{{ name }}</view>
+      <button>收听{{ audioOption[type] }}</button>
+    </view>
+    <view class="list">
+      <ol>
+        <li v-for="(item, index) in data.childList" :key="item.id">{{ index + 1 }}、{{ item.audioName }}</li>
+      </ol>
+      <img class="pic" :src="pic" />
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    pic: String,
+    name: String,
+    type: Number,
+    data: Object
+  },
+  data() {
+    return {
+      audioOption: {
+        8: '播客专辑',
+        10: '歌单',
+        15: '音乐专辑'
+      }
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.box {
+  width: 100%;
+  height: 203px;
+  padding: 18px 16px 24px;
+  background: #EEE;
+  border-radius: 8px;
+  color: #000;
+
+  .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;
+
+    ol {
+      padding-inline-start: 18px;
+      font-size: 14px;
+      font-weight: bold;
+      padding: 0;
+
+      li {
+        width: 140px;
+        margin-bottom: 12px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .pic {
+      position: absolute;
+      right: 0;
+      bottom: 8px;
+      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,138 @@
+<template>
+  <view class='app-container' :style="{ background: `url(${form.backgroundImage}) no-repeat 100% / cover` }">
+    <view class="content" :style="{ 'padding-bottom': form.buttonFixType === 0 ? '94px' : 0 }">
+      <!-- 标题 -->
+      <view class="title">{{ form.title }}</view>
+      <!-- 页面布局 -->
+      <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" :bg="form.audioBackgroundImage" :pic="item.contentPic"
+            :name="item.contentName" />
+          <!-- 歌单 / 广播 -->
+          <my-list v-if="item.layoutType === 2" :pic="item.contentPic" :name="item.contentName" :data="item.contentInfo"
+            :type="item.contentType" />
+        </view>
+      </view>
+    </view>
+    <!-- 按钮 -->
+    <view :class="['footer', form.buttonFixType === 0 ? 'fixed' : '']" v-if="form.isButton === 1">
+      <button class="left" @click="getClick('left', form.leftButtonForwardType)"
+        :style="{ background: form.leftButtonImg ? `url(${form.leftButtonImg}) no-repeat 100% / 100%` : '' }">
+        <text>{{ form.leftButtonText }}</text>
+      </button>
+      <button class="right" @click="getClick('right', form.rightButtonForwardType)"
+        :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 {
+      form: {}
+    }
+  },
+  mounted() {
+    this.getDetail()
+    // let ua = 
+    console.log(window.navigator.userAgent.toLowerCase());
+  },
+  methods: {
+    getDetail() {
+      detail({
+        articleId: '1711677595252297728'
+      }).then(res => {
+        console.log(res.data.data);
+        if (res.data.code === 0) {
+          this.form = res.data.data
+        }
+      })
+    },
+
+    // 底部按钮
+    getClick(key, type){
+      if(key === 'left') {
+        if(type === 0) {
+
+        }else if(type === 1) {
+
+        }else{
+          this.openApp('page=/mobile/channelSinglePage&channel=12&channelId=1641275896369385483')
+        }
+      }else{
+        
+      }
+    }
+  }
+}
+</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%;
+
+  .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`
     }