up

components/tabbar/tabbar.vue

@@ -49,6 +49,16 @@
 					{
 						id: 2,
 						centerItem: false,
+						width: 52,
+						height: 61,
+						"text": "书籍",
+						"pagePath": "/pages/book/index",
+						"iconPath": require("@/static/icon4.png"),
+						"selectedIconPath": require("@/static/icon4-cur.png")
+					},
+					{
+						id: 3,
+						centerItem: false,
 						width: 54,
 						height: 60,
 						"text": "我的",

pages.json

@@ -17,6 +17,11 @@
 		"style": {
 			"navigationStyle": "custom"
 		}
+	}, {
+		"path": "pages/book/index",
+		"style": {
+			"navigationStyle": "custom"
+		}
 	}, {
 		"path": "pages/me/me",
 		"style": {
@@ -85,6 +90,12 @@
 				"iconPath": "/static/icon2.png",
 				"selectedIconPath": "/static/icon2-cur.png"
 			},
+			{
+				"text": "书籍",
+				"pagePath": "pages/book/index",
+				"iconPath": "/static/icon4.png",
+				"selectedIconPath": "/static/icon4-cur.png"
+			},
 			{
 				"text": "我的",
 				"pagePath": "pages/me/me",

pages/book/index.vue

@@ -0,0 +1,188 @@
+<template>
+	<view class="wrap">
+		<image class="bg" :src="require('@/static/qus-bg.jpg')" mode=""></image>
+		<view class="book">
+			<!-- <swiper class="swiper" @change="changeBook" :current="bookIndex" circular previous-margin="80rpx"
+				next-margin="110rpx">
+				<swiper-item  class="book-item" v-for="(item,index) in bookList">
+					<view class="book-img">
+						<image
+							:src="item.url?item.url:''" alt="" mode="heightFix">
+					</view>
+					<view class="book-title">
+						{{item.title}}
+					</view>
+				</swiper-item>
+			</swiper> -->
+			<u-swiper :list="bookList" :effect3d="true" :title="true" :circular="true" :indicator="true"
+			 img-mode="widthFix" :autoplay="false"></u-swiper>
+
+		</view>
+
+
+
+		<tabbar :currentPage="2"></tabbar>
+	</view>
+</template>
+
+<script>
+	import tabbar from '@/components/tabbar/tabbar.vue'
+	import {
+		shareInfo
+	} from "@/common/util.js"
+	export default {
+		components: {
+			tabbar
+		},
+		data() {
+			return {
+				navBarTop: 0,
+				bookList: [],
+				bookIndex: 0,
+				swiperHeight: 0
+
+			}
+		},
+		onShareAppMessage() {
+			return shareInfo
+		},
+		onShareTimeline() {
+			return shareInfo
+		},
+		onLoad() {
+
+			const MenuButton = uni.getMenuButtonBoundingClientRect()
+			this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
+
+			this.getBooks()
+		},
+		onShow() {
+			let that = this
+			uni.getSystemInfo({
+				success: function(info) {
+					console.log('屏幕的高度：' + info.windowHeight);
+					that.swiperHeight = info.windowHeight * .7 * 2
+					console.log(that.swiperHeight)
+					console.log('屏幕的宽度：' + info.windowWidth);
+				}
+			});
+		},
+		methods: {
+			changeBook(e) {
+				console.log(e)
+				this.bookIndex = e.detail.current
+			},
+			getBooks() {
+				console.log("123")
+				var that = this;
+				var host = "https://gb-test.ali251.langye.net"
+				uni.request({
+					url: host + '/api/mobile/book/index',
+					data: {
+						page: 1,
+						page_size: 99,
+					},
+					success: function(res) {
+						console.log("res", res)
+						let arr = []
+						res.data.data.map(item => {
+							arr.push({
+								image: item.image.url,
+								id: item.id,
+								title: item.name
+							})
+						})
+						that.bookList = arr
+						console.log(that.bookList)
+					},
+					fail: function(res) {
+
+					}
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.wrap {
+		width: 100vw;
+		height: 100vh;
+
+		// overflow: scroll;
+		.bg {
+			height: 100vh;
+			width: 100vw;
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
+
+		.book {
+			padding: 175rpx 0;
+			height: 100vh;
+
+			swiper {
+				height: calc(100vh - 450rpx) !important;
+				background-color: transparent!important;
+				image {
+					height: 80%;
+
+				}
+			}
+			::v-deep .u-swiper-wrap{
+				height:100%;
+			}
+			::v-deep .u-swiper-indicator{
+				bottom:30rpx;
+			}
+			::v-deep .u-list-image-wrap{
+				background-color: #fff;
+			}
+			::v-deep .u-swiper-title {
+				height: 20%;
+				display: flex;
+				align-items: center;
+				justify-content: space-around;
+				color: #333;
+				font-size: 40rpx;
+				background-color: #fff;
+				overflow: auto;
+				white-space: break-spaces;
+				text-overflow: clip;
+				text-align: center;
+
+			}
+			::v-deep .u-indicator-item-round-active{
+				background-color: #9f4946;
+			}
+			&-item {
+				padding: 0 30rpx;
+				// transform: scale(.7);
+
+				// margin:0 80rpx;
+			}
+
+			&-img {
+				background-color: #fff;
+				height: 70%;
+
+				image {
+					width: calc(100vw - 160rpx);
+					height: 70%;
+				}
+			}
+
+			&-title {
+				text-align: center;
+				padding: 75rpx 30rpx;
+				background-color: #ffffff;
+				display: flex;
+				align-items: center;
+				justify-content: space-around;
+				font-size: 42rpx;
+				color: #000;
+			}
+		}
+	}
+</style>

pages/me/me.vue

@@ -91,7 +91,7 @@
 				<view class="login-btn-btn" @click="submit">提 交</view>
 			</view>
 		</u-popup>
-		<tabbar :currentPage="2"></tabbar>
+		<tabbar :currentPage="3"></tabbar>
 	</view>
 </template>