uni_mattress/sleep/pages/index/index.vue

<template>
	<view class="recommend-container page-background">
		<view class="bg-black">
			<cu-custom bgColor="#000000"><view slot="content" style="color: #ffffff">UU睡眠</view></cu-custom>
		</view>
<!--		<scroll-view :style="{ height: height }" class="main-container" scroll-y>-->

<!--			<view class="bg-black">-->
<!--				<view class="banner-wrapper">-->
<!--					<swiper class="screen-swiper square-dot" style="min-height: 317upx;" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000" duration="500">-->
<!--						<swiper-item v-for="item in swiperList" :key="item.bannerId">-->
<!--							<image :src="item.pic || item.imageUrl" mode="scaleToFill" class="banner-img"></image>-->
<!--						</swiper-item>-->
<!--					</swiper>-->
<!--				</view>-->
<!--			</view>-->

<!--			<view class="music-wrapper" v-if="recommendList.length > 0">-->
<!--				<box-title title="UU推荐" buttonName="更多" iconName="right" @handlePlay="handleNative('../songList/index')"></box-title>-->
<!--				<song-list :currentList="recommendList"></song-list>-->
<!--			</view>-->


<!--			<view class="music-wrapper" v-if="dayRecommendList.length > 0">-->
<!--				<box-title title="睡眠音乐" buttonName="更多" iconName="kaishi2" @handlePlay="handlePlay('dayRecommendList')"></box-title>-->
<!--				<music-list :currentList="dayRecommendList"></music-list>-->
<!--			</view>-->


<!--		</scroll-view>-->

<!--		<music-control />-->

    <view class="main-container">
      <view class="music-wrapper" v-if="healthAdvertList.length > 0">
<!--        <box-title title="睡眠小知识" buttonName="更多" iconName="kaishi2" @handlePlay="handlePlay('dayRecommendList')"></box-title>-->
        <box-title title="睡眠小知识"></box-title>

        <view class="flex-col justify-start knowledge-list">
          <view v-for="(item, index) in healthAdvertList" :key="index" class="flex-row items-center space-x-14 knowledge-item" @click="goToDetails(item.id,item.html_url)">
            <view class="flex-col flex-auto space-y-8">
              <text class="self-start font_4 knowledge-item-title">{{item.title}}</text>
              <text v-if="item.summary.length>25" class="knowledge-item-desc">
                {{item.summary.substring(0,22)}}...
              </text>
              <text v-else class="knowledge-item-desc">
                {{item.summary.substring(0,22)}}...
              </text>
            </view>
            <image
                class="shrink-0 image_12"
                src="http://wdklmall.oss-cn-shenzhen.aliyuncs.com/mallgoods/goods/D592E277FFA7474E965A721AF93132D7.png"
            />
          </view>

        </view>
      </view>
    </view>


		<!-- <tab-bar currentPage="index" /> -->
	</view>
</template>

<script>
// import songList from './components/songList.vue';
// import musicList from './components/musicList.vue';
// import { getImage, getName } from '@/utils/index.js';
import * as API_doctorAdvert from '@/api/doctor_advert'
import {getDoctorAdvertList} from "../../api/doctor_advert";
export default {
  // components: {
  //   songList,
  //   musicList
  // },
	data() {
		return {
      healthAdvertList: [],
		};
	},
	onLoad() {
		this.getCareHealthAdvert()
	},
	onPullDownRefresh() {
		// this.getData();
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
    // 获取健康宣讲
    getCareHealthAdvert() {
      const data = {
        groupId: 12
      }
      API_doctorAdvert.listByGroupId(data).then(res => {
        this.healthAdvertList = res
      })
    },
    // 去往健康宣讲详情页
    goToDetails(id, url) {
      console.log('url====', url)
      if (url === null || url === '') {
        uni.navigateTo({
          url: '/pages/healthAdvert/careHealthAdvertLook?id=' + id
        })
      } else {
        uni.navigateTo({
          url: '/pages/healthAdvert/webview?url=' + url
        })
      }

    },
		//播放全部 猜你喜欢
		// handlePlay(key) {
		// 	const list = this[key].map(item => {
		// 		return {
		// 			src: '',
		// 			title: item.name,
		// 			singer: getName(item),
		// 			coverImgUrl: getImage(item),
		// 			id: item.id
		// 		};
		// 	});
		// 	this.$store.dispatch('playAllMUsic', list);
		// },
    //
		// handleNative(val) {
		// 	uni.navigateTo({
		// 		url: val
		// 	});
		// },


		toSearch() {
			uni.navigateTo({
				url: '../search/index'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.bg-black {
	background-color: #000000;
}
.recommend-container {
	position: relative;
	background-color: #000000;
	height: 100%;
	padding-bottom: 100px;

	.main-container {
		position: relative;
		.banner-wrapper {
			box-sizing: border-box;
			padding: 10px;
			.banner-img {
				height: 158px;
				border-radius: 6px;
			}
		}
		.list-wrapper {
			margin-top: 8px;
			padding-bottom: 12px;
			.list-item {
				text-align: center;
				font-size: 24rpx;
			}
			.list-ico {
				font-size: 72rpx;
				margin-bottom: 6px;
			}
			.list-title {
				font-size: 28rpx;
			}
		}

		.music-wrapper {
			margin-top: 5px;
			// background: #000000;
			box-sizing: border-box;
			padding: 15px;
			background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #4d9efa 100%);

			&:last-of-type {
				margin-bottom: 0;
			}
		}
	}

	.knowledge-list {
		margin-top: 1rem;

	  .space-x-14 {
	    & > view:not(:first-child),
	    & > text:not(:first-child),
	    & > image:not(:first-child) {
	      margin-left: 0.88rem;
	    }
	    .space-y-8 {
	      & > view:not(:first-child),
	      & > text:not(:first-child),
	      & > image:not(:first-child) {
	        margin-top: 0.5rem;
	      }
	      .font_4 {
	        font-size: 0.88rem;
	        font-family: PingFangSC;
	        line-height: 0.81rem;
	        color: #ffffff;
	      }
	      .knowledge-item-title {
	        opacity: 0.8;
			line-height: 1.2rem;
	      }
	      .knowledge-item-desc {
	        // color: #4d4b5e;
			color: #ffffff;
	        font-size: 0.63rem;
	        font-family: PingFangSC;
	        line-height: 0.88rem;
	      }
	    }
	    .image_12 {
	      margin-right: 1.25rem;
	      width: 3.75rem;
	      height: 3.75rem;
	    }
	  }

	  .knowledge-item {
		  margin-left: 3px;
		  margin-bottom: 20px;
		  padding-bottom: 20px;
		  border-bottom: 1px solid #ededed;
	  }
	}
}
</style>