修改游玩攻略

App.vue

@@ -116,14 +116,13 @@
 	// 轮播图样式
 
 	wx-swiper .wx-swiper-dot {
-		width: 30rpx;
+		width: 20rpx;
 		height: 4rpx;
 		border-radius: 10rpx;
 	}
 
 	wx-swiper .wx-swiper-dot-active {
-		background-color: #ffffff;
-		width: 50rpx;
+		width: 40rpx;
 		border-radius: 10rpx;
 	}
 

components/tabs/index.vue

@@ -1,59 +1,71 @@
-<template>
-	<view class="tabs">
-		<view class="one" :style="{background:tabs.bgColor||'#f9f9f9'}">
-			<scroll-view class="scrollView" scroll-x="true">
-				<view class="list" v-for="(item,index) in tabs.menu" :key="index" :style="{background:tabs.active==item.active?tabs.acbgColor||'#ffffff':''}" @tap="tabsChange(index,item)">
-					<text :style="{color:tabs.active==item.active?tabs.actxtColor||'#000000':tabs.txtColor||'#999999'}">{{item.title}}</text>
-				</view>
-			</scroll-view>
-		</view>
-		<slot></slot>
-	</view>
-</template>
-
-<script>
-	export default {
-		props: {
-			tabs: {
-				type: Object,
-			},
-
-		},
-		data() {
-			return {};
-		},
-		methods: {
-			tabsChange(index, item) {
-				const that = this;
-				that.$emit('tabsChange', item)
-			}
-		}
-	}
-</script>
-
-<style lang="scss">
-	.tabs {
-		.one {
-			padding: 2vw;
-
-			.scrollView {
-				display: flex;
-				white-space: nowrap;
-				text-align: center;
-			}
-
-			.list {
-				display: inline-block;
-				padding: 2vw;
-				margin: 0 1.5vw;
-				text-align: center;
-				border-radius: 5px;
-
-				text {
-					font-weight: bold;
-					font-size: 14px;
-				}
-			}
-		}
-	}
-</style>
+<template>
+	<view class="tabs">
+		<view class="one" :style="{background:tabs.bgColor||'#f9f9f9'}">
+			<scroll-view class="scrollView" scroll-x="true">
+				<view class="list" v-for="(item,index) in tabs.menu" :key="index"
+					:style="{background:tabs.active==item.active?tabs.acbgColor||'#ffffff':''}"
+					@tap="tabsChange(index,item)">
+					<text :class="[tabs.active==item.active?'active_1':'active_2']">{{item.title}}</text>
+				</view>
+			</scroll-view>
+		</view>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			tabs: {
+				type: Object,
+			},
+
+		},
+		data() {
+			return {};
+		},
+		methods: {
+			tabsChange(index, item) {
+				const that = this;
+				that.$emit('tabsChange', item)
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.tabs {
+		.one {
+			padding: 2vw;
+
+			.scrollView {
+				display: flex;
+				white-space: nowrap;
+				text-align: center;
+			}
+
+			.list {
+				display: inline-block;
+				padding: 2vw;
+				margin: 0 1.5vw;
+				text-align: center;
+				border-radius: 5px;
+
+				.active_1 {
+					color: #000000;
+					border-bottom: 4px solid #87CEFA;
+					border-radius: 5px;
+				}
+
+				.active_2 {
+					color: #999999;
+				}
+
+				text {
+					font-weight: bold;
+					font-size: 14px;
+				}
+			}
+		}
+	}
+</style>

pages/home/index.vue

@@ -1,8 +1,8 @@
 <template>
 	<view class="main">
 		<view class="one">
-			<swiper class="swiper" circular :indicator-dots="true" indicator-color="#F5F5F5" :autoplay="true"
-				:interval="3000" :duration="1000">
+			<swiper class="swiper" circular :indicator-dots="true" indicator-color="#F5F5F5"
+				indicator-active-color="#ffffff" :autoplay="true" :interval="3000" :duration="1000">
 				<swiper-item class="list" v-for="(item,index) in imgList" :key="index" @tap="toBanner(item)">
 					<image class="image" :src="item.url" mode="">
 					</image>
@@ -10,7 +10,8 @@
 			</swiper>
 		</view>
 		<view class="two">
-			<swiper class="swiper" circular :indicator-dots="true" indicator-color="#F5F5F5" :autoplay="false">
+			<swiper class="swiper" circular :indicator-dots="true" indicator-color="#F5F5F5"
+				indicator-active-color="#007AFF" :autoplay="false">
 				<swiper-item class="swiper-item" v-for="(item,index) in moduleList" :key="index">
 					<view class="list" v-for="(as,index) in item" :key="indexs" @tap="toChange(as)">
 						<image class="image" :src="as.url&&as.url.length>0?as.url[0].url:''" mode="aspectFill">
@@ -20,6 +21,26 @@
 				</swiper-item>
 			</swiper>
 		</view>
+		<view class="thr">
+			<uni-notice-bar speed='50' showGetMore='true' moreText='更多' @getmore="toMore" show-icon scrollable
+				:text="content" />
+		</view>
+		<view class="four">
+			<tabs :tabs="tabs" @tabsChange="tabsChange">
+				<view class="tabsList">
+					<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage" @scroll="toScroll">
+						<view class="list-scroll-view">
+							<view class="list" v-for="(item,index) in list" :key="index" @tap="toInfo(item)">
+								1111
+								<view class="is_bottom" v-if="is_bottom">
+									<text>{{config.bottom_title}}</text>
+								</view>
+							</view>
+						</view>
+					</scroll-view>
+				</view>
+			</tabs>
+		</view>
 	</view>
 </template>
 
@@ -34,27 +55,85 @@
 				// 轮播图
 				imgList: [],
 				// 模块
-				moduleList: []
+				moduleList: [],
+				// 公告内容
+				content: '',
+				tabs: {
+					active: '0',
+					bgColor: '#ffffff',
+					menu: []
+				},
+				list: [],
+				total: 0,
+				skip: 0,
+				limit: 10,
+				page: 0,
+				// 数据是否触底
+				is_bottom: false,
+				scrollTop: 0,
 			}
 		},
 		onLoad: async function() {
 			const that = this;
-			await that.searchConfig();
+			await that.searchOther();
+			await that.search();
+		},
+		onShow: async function(e) {
+			const that = this;
+		},
+		onPullDownRefresh: async function() {
+			const that = this;
+			that.clearPage();
 			await that.search();
+			uni.stopPullDownRefresh();
 		},
 		methods: {
-			// 查询基本设置
-			async searchConfig() {
+			// 查询
+			async search() {
 				const that = this;
-				let res = await that.$api(`/config`, 'GET', {});
+				let info = {
+					skip: that.skip,
+					limit: that.limit,
+				}
+				let res;
+				res = await that.$api(`/article`, 'GET', {
+					...info,
+				});
 				if (res.errcode == '0') {
-					that.$set(that, `imgList`, res.data.file);
+					let list = [...that.list, ...res.data];
+					that.$set(that, `list`, list);
+					that.$set(that, `total`, res.total)
+				} else {
+					uni.showToast({
+						title: res.errmsg,
+						icon: 'none'
+					})
 				}
 			},
-			// 查询
-			async search() {
+
+			// 点击轮播图图片
+			toBanner(item) {
+				console.log(item)
+			},
+			// 点击模块
+			toChange(item) {
+				console.log(item)
+			},
+			// 查看更多公告
+			toMore() {
+				console.log('公告')
+			},
+			// 查询其他信息
+			async searchOther() {
 				const that = this;
-				let res = await that.$api(`/module`, 'GET', {
+				let res;
+				// 基本设置
+				res = await that.$api(`/config`, 'GET', {});
+				if (res.errcode == '0') {
+					that.$set(that, `imgList`, res.data.file);
+				}
+				//模块
+				res = await that.$api(`/module`, 'GET', {
 					is_use: '0'
 				});
 				if (res.errcode == '0') {
@@ -65,15 +144,68 @@
 					}, []);
 					that.$set(that, `moduleList`, data);
 				}
+				// 公告
+				res = await that.$api(`/notice`, 'GET', {
+					is_use: '0',
+					limit: 1
+				});
+				if (res.errcode == '0') that.$set(that, `content`, res.data[0].name);
+				// 查询状态
+				res = await that.$api(`/dictData`, 'GET', {
+					type: 'home_tabs',
+					is_use: '0',
+				})
+				if (res.errcode == '0') {
+					const menu = res.data.map((item) => {
+						return {
+							title: item.label,
+							active: item.value
+						}
+					})
+					that.$set(that.tabs, `menu`, menu)
+				}
 			},
-			// 点击轮播图图片
-			toBanner(item) {
-				console.log(item)
+			// 选择选项卡
+			tabsChange(e) {
+				const that = this;
+				that.$set(that.tabs, `active`, e.active)
+				that.clearPage();
+				that.search()
 			},
-			// 点击模块
-			toChange(item) {
-				console.log(item, )
+			// 分页
+			toPage(e) {
+				const that = this;
+				let list = that.list;
+				let limit = that.limit;
+				if (that.total > list.length) {
+					uni.showLoading({
+						title: '加载中',
+						mask: true
+					})
+					let page = that.page + 1;
+					that.$set(that, `page`, page)
+					let skip = page * limit;
+					that.$set(that, `skip`, skip)
+					that.search();
+					uni.hideLoading();
+				} else that.$set(that, `is_bottom`, true)
 			},
+			// 触底
+			toScroll(e) {
+				const that = this;
+				let up = that.scrollTop;
+				that.$set(that, `scrollTop`, e.detail.scrollTop);
+				let num = Math.sign(up - e.detail.scrollTop);
+				if (num == 1) that.$set(that, `is_bottom`, false);
+			},
+			// 清空列表
+			clearPage() {
+				const that = this;
+				that.$set(that, `list`, [])
+				that.$set(that, `skip`, 0)
+				that.$set(that, `limit`, 10)
+				that.$set(that, `page`, 0)
+			}
 		},
 	}
 </script>
@@ -98,7 +230,7 @@
 		.two {
 
 			.swiper {
-				height: 45vw;
+				height: 50vw;
 
 				.swiper-item {
 					display: flex;
@@ -129,5 +261,56 @@
 				}
 			}
 		}
+
+		.thr {
+			padding: 0 2vw;
+		}
+
+		.four {
+			background-color: var(--footColor);
+
+			.tabsList {
+				position: relative;
+				width: 100vw;
+				height: 80vh;
+
+				.list {
+					background-color: var(--mainColor);
+					border: 1px solid var(--f5Color);
+					padding: 2vw;
+					margin: 0 2vw 2vw 2vw;
+					border-radius: 5px;
+				}
+
+				.list:first-child {
+					margin: 2vw 0 0 0;
+				}
+			}
+		}
+	}
+
+	.scroll-view {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+
+		.list-scroll-view {
+			display: flex;
+			flex-direction: column;
+		}
+	}
+
+	.is_bottom {
+		width: 100%;
+		text-align: center;
+
+		text {
+			padding: 2vw 0;
+			display: inline-block;
+			color: var(--f85Color);
+			font-size: var(--font14Size);
+		}
 	}
 </style>

unpackage/dist/dev/mp-weixin/common/main.wxss

@@ -2432,13 +2432,12 @@
   box-sizing: border-box;
 }
 wx-swiper .wx-swiper-dot {
-  width: 30rpx;
+  width: 20rpx;
   height: 4rpx;
   border-radius: 10rpx;
 }
 wx-swiper .wx-swiper-dot-active {
-  background-color: #ffffff;
-  width: 50rpx;
+  width: 40rpx;
   border-radius: 10rpx;
 }
 /* 设置整个项目的公用样式*/

unpackage/dist/dev/mp-weixin/common/runtime.js

@@ -105,11 +105,11 @@
 /******/
 /******/
 /******/ 		// mini-css-extract-plugin CSS loading
-/******/ 		var cssChunks = {"components/tabs/index":1};
+/******/ 		var cssChunks = {"components/tabs/index":1,"uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar":1,"uni_modules/uni-icons/components/uni-icons/uni-icons":1};
 /******/ 		if(installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId]);
 /******/ 		else if(installedCssChunks[chunkId] !== 0 && cssChunks[chunkId]) {
 /******/ 			promises.push(installedCssChunks[chunkId] = new Promise(function(resolve, reject) {
-/******/ 				var href = "" + ({"components/tabs/index":"components/tabs/index"}[chunkId]||chunkId) + ".wxss";
+/******/ 				var href = "" + ({"components/tabs/index":"components/tabs/index","uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar":"uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar","uni_modules/uni-icons/components/uni-icons/uni-icons":"uni_modules/uni-icons/components/uni-icons/uni-icons"}[chunkId]||chunkId) + ".wxss";
 /******/ 				var fullhref = __webpack_require__.p + href;
 /******/ 				var existingLinkTags = document.getElementsByTagName("link");
 /******/ 				for(var i = 0; i < existingLinkTags.length; i++) {

unpackage/dist/dev/mp-weixin/components/tabs/index.wxss

@@ -16,6 +16,14 @@
   text-align: center;
   border-radius: 5px;
 }
+.tabs .one .list .active_1 {
+  color: #000000;
+  border-bottom: 4px solid #87CEFA;
+  border-radius: 5px;
+}
+.tabs .one .list .active_2 {
+  color: #999999;
+}
 .tabs .one .list text {
   font-weight: bold;
   font-size: 14px;

unpackage/dist/dev/mp-weixin/pages/home/index.json

@@ -2,6 +2,7 @@
   "navigationBarTitleText": "神鹿峰旅游度假区",
   "enablePullDownRefresh": true,
   "usingComponents": {
+    "uni-notice-bar": "/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar",
     "tabs": "/components/tabs/index"
   }
 }

unpackage/dist/dev/mp-weixin/pages/home/index.wxss

@@ -12,7 +12,7 @@
   height: 100%;
 }
 .main .two .swiper {
-  height: 45vw;
+  height: 50vw;
 }
 .main .two .swiper .swiper-item {
   display: flex;
@@ -38,4 +38,46 @@
   margin-top: 5px;
   color: var(--f85Color);
 }
+.main .thr {
+  padding: 0 2vw;
+}
+.main .four {
+  background-color: var(--footColor);
+}
+.main .four .tabsList {
+  position: relative;
+  width: 100vw;
+  height: 80vh;
+}
+.main .four .tabsList .list {
+  background-color: var(--mainColor);
+  border: 1px solid var(--f5Color);
+  padding: 2vw;
+  margin: 0 2vw 2vw 2vw;
+  border-radius: 5px;
+}
+.main .four .tabsList .list:first-child {
+  margin: 2vw 0 0 0;
+}
+.scroll-view {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.scroll-view .list-scroll-view {
+  display: flex;
+  flex-direction: column;
+}
+.is_bottom {
+  width: 100%;
+  text-align: center;
+}
+.is_bottom text {
+  padding: 2vw 0;
+  display: inline-block;
+  color: var(--f85Color);
+  font-size: var(--font14Size);
+}
 

unpackage/dist/dev/mp-weixin/uni_modules/uni-icons/components/uni-icons/uni-icons.json

@@ -0,0 +1,4 @@
+{
+  "usingComponents": {},
+  "component": true
+}

unpackage/dist/dev/mp-weixin/uni_modules/uni-icons/components/uni-icons/uni-icons.wxml

@@ -0,0 +1 @@
+<text data-event-opts="{{[['tap',[['_onClick',['$event']]]]]}}" class="{{['uni-icons','uniui-'+type,customPrefix,customPrefix?type:'']}}" style="{{'color:'+(color)+';'+('font-size:'+(iconSize)+';')}}" bindtap="__e"></text>

unpackage/dist/dev/mp-weixin/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.json

@@ -0,0 +1,6 @@
+{
+  "usingComponents": {
+    "uni-icons": "/uni_modules/uni-icons/components/uni-icons/uni-icons"
+  },
+  "component": true
+}

unpackage/dist/dev/mp-weixin/uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.wxss

@@ -0,0 +1,89 @@
+@charset "UTF-8";
+/* 水平间距 */
+/* 水平间距 */
+.uni-noticebar.data-v-a1596656 {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  flex-direction: row;
+  align-items: center;
+  padding: 10px 12px;
+  margin-bottom: 10px;
+}
+.uni-noticebar-close.data-v-a1596656 {
+  margin-left: 8px;
+  margin-right: 5px;
+}
+.uni-noticebar-icon.data-v-a1596656 {
+  margin-right: 5px;
+}
+.uni-noticebar__content-wrapper.data-v-a1596656 {
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+}
+.uni-noticebar__content-wrapper--single.data-v-a1596656 {
+  line-height: 18px;
+}
+.uni-noticebar__content-wrapper--single.data-v-a1596656,
+.uni-noticebar__content-wrapper--scrollable.data-v-a1596656 {
+  flex-direction: row;
+}
+.uni-noticebar__content-wrapper--scrollable.data-v-a1596656 {
+  position: relative;
+}
+.uni-noticebar__content--scrollable.data-v-a1596656 {
+  flex: 1;
+  display: block;
+  overflow: hidden;
+}
+.uni-noticebar__content--single.data-v-a1596656 {
+  display: flex;
+  flex: none;
+  width: 100%;
+  justify-content: center;
+}
+.uni-noticebar__content-text.data-v-a1596656 {
+  font-size: 14px;
+  line-height: 18px;
+  word-break: break-all;
+}
+.uni-noticebar__content-text--single.data-v-a1596656 {
+  display: block;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.uni-noticebar__content-text--scrollable.data-v-a1596656 {
+  position: absolute;
+  display: block;
+  height: 18px;
+  line-height: 18px;
+  white-space: nowrap;
+  padding-left: 100%;
+  -webkit-animation: notice-data-v-a1596656 10s 0s linear infinite both;
+          animation: notice-data-v-a1596656 10s 0s linear infinite both;
+  -webkit-animation-play-state: paused;
+          animation-play-state: paused;
+}
+.uni-noticebar__more.data-v-a1596656 {
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  align-items: center;
+  padding-left: 5px;
+}
+@-webkit-keyframes notice-data-v-a1596656 {
+100% {
+    -webkit-transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-100%, 0, 0);
+}
+}
+@keyframes notice-data-v-a1596656 {
+100% {
+    -webkit-transform: translate3d(-100%, 0, 0);
+            transform: translate3d(-100%, 0, 0);
+}
+}
+