|
|
@@ -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>
|
