|
|
@@ -0,0 +1,249 @@
|
|
|
+<template>
|
|
|
+ <view class="app-content">
|
|
|
+ <view class="content-wrapper">
|
|
|
+ <template v-for="(item, index) in bookList">
|
|
|
+ <!-- 主标题 -->
|
|
|
+ <block v-if="item.style == 'title'">
|
|
|
+ <view :key="index" class="page-title">{{item.value}}</view>
|
|
|
+ </block>
|
|
|
+
|
|
|
+ <!-- 信息文本 -->
|
|
|
+ <block v-if="item.style == 'info'">
|
|
|
+ <view :key="index" class="text-content">{{item.value}}</view>
|
|
|
+ </block>
|
|
|
+
|
|
|
+ <block v-if="item.style == 'blankLine'">
|
|
|
+ <view :key="index" class="blank-line-content">{{item.value}}</view>
|
|
|
+ </block>
|
|
|
+
|
|
|
+ <!-- 小标题 -->
|
|
|
+ <block v-if="item.style == 'smallTitle'">
|
|
|
+ <view :key="index" class="section-title">{{item.value}}</view>
|
|
|
+ </block>
|
|
|
+
|
|
|
+ <!-- 小标题 -->
|
|
|
+ <block v-if="item.style == 'miniTitle'">
|
|
|
+ <view :key="index" class="mini-title">{{item.value}}</view>
|
|
|
+ </block>
|
|
|
+
|
|
|
+ <!-- 视频 -->
|
|
|
+ <block v-if="item.style == 'video'">
|
|
|
+ <view :key="index" class="video-block">
|
|
|
+ <video
|
|
|
+ :id="`myVideo${index}`"
|
|
|
+ :src="item.value"
|
|
|
+ show-mute-btn="true"
|
|
|
+ object-fit="contain"
|
|
|
+ class="video-content">
|
|
|
+ </video>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+
|
|
|
+ <!-- 图片 -->
|
|
|
+ <block v-if="item.style == 'image'">
|
|
|
+ <view :key="index" class="image-block">
|
|
|
+ <image
|
|
|
+ :src="`${constant.imgUrl}${item.value}`"
|
|
|
+ mode="widthFix"
|
|
|
+ @click="previewImage(`${constant.imgUrl}${item.value}`)"
|
|
|
+ class="image-content">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <block v-if="item.style == 'button'">
|
|
|
+ <view :key="index" class="button-block">
|
|
|
+ <button @click="goTo(item)" class="link-button">{{item.value}}</button>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <!-- 底部返回按钮 -->
|
|
|
+ <view class="back-block">
|
|
|
+ <button class="admin-button-com big blue" @click="goBack()">返回列表</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { getLsBookDetail} from "@/api/book";
|
|
|
+import { mapGetters } from "vuex"
|
|
|
+export default {
|
|
|
+ name: "book-what",
|
|
|
+ components: {
|
|
|
+ },
|
|
|
+ mixins: [],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ bookList:[],
|
|
|
+ pageTitle:''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ let that = this
|
|
|
+ getLsBookDetail({id:this.option.id}).then(res => {
|
|
|
+ that.bookList = res.data.list
|
|
|
+ that.bookList.forEach((item) => {
|
|
|
+ if(item.style == 'title'){
|
|
|
+ this.pageTitle = item.value
|
|
|
+ uni.setNavigationBarTitle({title: item.value})
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onShareAppMessage(res) {
|
|
|
+ return {
|
|
|
+ title: this.pageTitle,
|
|
|
+ desc: "",
|
|
|
+ imageUrl: "",
|
|
|
+ path: "admin/book/detail?id="+this.option.id,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init(){
|
|
|
+
|
|
|
+ },
|
|
|
+ goBack(){
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ uni.navigateBack()
|
|
|
+ // #endif
|
|
|
+ // #ifdef APP-PLUS
|
|
|
+ uni.navigateBack()
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ goTo(item){
|
|
|
+ this.$util.pageTo({ url: item.page})
|
|
|
+ },
|
|
|
+ playVide(index){
|
|
|
+ this.videoContext = uni.createVideoContext('myVideo'+index,this)
|
|
|
+ this.videoContext.play()
|
|
|
+ },
|
|
|
+ previewImage(url) {
|
|
|
+ uni.previewImage({
|
|
|
+ urls: [url],
|
|
|
+ current: url
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-content {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #fff;
|
|
|
+ padding-bottom: 140upx;
|
|
|
+
|
|
|
+ .content-wrapper {
|
|
|
+ padding: 0 30upx;
|
|
|
+
|
|
|
+ // 主标题
|
|
|
+ .page-title {
|
|
|
+ font-size: 44upx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ padding: 40upx 0 20upx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ display: block;
|
|
|
+ width: 60upx;
|
|
|
+ height: 6upx;
|
|
|
+ background: #3498db;
|
|
|
+ margin-top: 16upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 文本内容
|
|
|
+ .text-content {
|
|
|
+ font-size: 32upx;
|
|
|
+ color: #666;
|
|
|
+ line-height: 1.8;
|
|
|
+ margin: 20upx 0 30upx;
|
|
|
+ text-align: justify;
|
|
|
+ }
|
|
|
+ .blank-line-content{
|
|
|
+ height: 20upx;
|
|
|
+ background: white;
|
|
|
+ }
|
|
|
+ // 小标题
|
|
|
+ .section-title {
|
|
|
+ font-size: 36upx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin: 40upx 0 20upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .mini-title {
|
|
|
+ font-size: 32upx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333;
|
|
|
+ margin: 20upx 0 30upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 视频区块
|
|
|
+ .video-block {
|
|
|
+ margin: 20upx 0;
|
|
|
+ background: #000;
|
|
|
+
|
|
|
+ .video-content {
|
|
|
+ width: 700upx;
|
|
|
+ height: 1100upx;
|
|
|
+ margin: 0 auto;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 图片区块
|
|
|
+ .image-block {
|
|
|
+ margin: 20upx 0;
|
|
|
+
|
|
|
+ .image-content {
|
|
|
+ width: 100%;
|
|
|
+ display: block;
|
|
|
+ transition: opacity 0.3s;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 按钮区块
|
|
|
+ .button-block {
|
|
|
+ margin: 30upx 0;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ .link-button {
|
|
|
+ display: inline-block;
|
|
|
+ background: #3498db;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 32upx;
|
|
|
+ padding: 20upx 40upx;
|
|
|
+ border-radius: 4upx;
|
|
|
+ border: none;
|
|
|
+ transition: background-color 0.3s;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ background: #2980b9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 返回按钮区块
|
|
|
+ .back-block {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ padding: 30upx;
|
|
|
+ background: rgba(255,255,255,0.98);
|
|
|
+ text-align: center;
|
|
|
+ border-top: 1upx solid #eee;
|
|
|
+ z-index: 99;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
