xs/xs-app/pages/bookstore/bookstore.vue

<template>
	<view class="content" :style="{paddingTop: content_paddingTop + 'px'}">
		<view class="content__bg-color"></view>
		<view class="content__container" v-for="(item,index) in data_list" :key="index">			
			<templateSearch v-if="item.template_type==config.template_stype.SEARCH" ></templateSearch>
			<templateBanner v-if="item.template_type==config.template_stype.BANNER" :templateData='item' @clickBook='clickBook'></templateBanner>
			<templateBookH3 v-if="item.template_type==config.template_stype.H_3" :templateData='item' :dataList='H3_data_list' @clickBook='clickBook'></templateBookH3>
			<templateBookV3 v-if="item.template_type==config.template_stype.V_3" :templateData='item' @clickBook='clickBook'></templateBookV3>
			<templateBookList v-if="item.template_type==config.template_stype.LIST" :templateData='item' @clickBook='clickBook'></templateBookList>
		</view>
	</view>
</template>

 <script setup lang="ts">
	import templateSearch from '../bookstore/template/template-book-Search.vue'
	import templateBanner from '../bookstore/template/template-book-Banner.vue'
	import templateBookH3 from '../bookstore/template/template-book-H-3.vue'
	import templateBookV3 from '../bookstore/template/template-book-V-3.vue'
	import templateBookList from '../bookstore/template/template-book-List.vue'
	import { bookstore_template_data, book_item_data } from '../../data/data';
    import { ref } from 'vue';
    import { tools } from '../../framework/tools';
    import { http } from '../../framework/http';
    import { config } from '../../config/config';
    import { log } from '../../framework/log';
    import { util } from '../../framework/util'
	import { onPullDownRefresh } from '@dcloudio/uni-app'
	
	let data_list = ref<Array<bookstore_template_data>>([])	
	let H3_data_list = ref<Array<Array<book_item_data>>>([])
	
	let content_paddingTop = ref(0)
	if(tools.getCurPlatform() == config.Platform.WEIXIN) {
		content_paddingTop.value = uni.getSystemInfoSync().safeArea.top + 40
	}
		
	onPullDownRefresh(()=>{
		setTimeout(()=>{
			requestData(true)
		},500)
	})	
		
	requestData()
	
	function requestData(isPullDown:boolean=false) {
		util.showLoading()
		http.StaticRequest(config.url_confg.Static.book_store,(err,data)=>{
			util.hideLoading()
			if(isPullDown){ uni.stopPullDownRefresh() }
			if(!err) {
				if(data.code==config.url_confg.StatesCode.SUCCESS){
					data_list.value = data.content
					for (let i = 0; i < data_list.value.length; i++) {
						let element = data_list.value[i]
						if(element.template_type==config.template_stype.H_3) {	
							// 横-3分页数据
							for(var j=0; j<element.list.length; j+=3) {
								let pagingData = element.list.slice(j, j+3)
								H3_data_list.value.push(pagingData)
							}
							
						}
					}
				}
			} else {
				log.Error(err)
			}
		})
	}

	function clickBook(data:book_item_data) {
		tools.gotoBookdetails(data.book_id,data.wx_book_id)
	}
	
	function  shareToTimeline() {
	    wx.shareToTimeline({
	      title: '分享到朋友圈',
	      link: '你的小程序链接',
	      imgUrl: '你的图片链接',
	      success: function () {
	        console.log('分享到朋友圈成功');
	      },
	      fail: function (err) {
	        console.log('分享到朋友圈失败', err);
	      }
	    });
	  }
</script>

<style lang="scss">
	.content{
		display: flex;
		flex-direction: column;
		width: 100%;
			   
		&__bg-color {
			position: fixed; 
			width: 100%;
			height: 100%; 
			left: 0; 
			top: 0; 
			background-image: linear-gradient(to bottom, #fcd9e0, #ffffff);
			z-index: 9;
		}	   
		&__container{
			display: flex;
			flex-direction: column;
			z-index: 10;
		}
	}
</style>