瀏覽代碼

我的巡店

chenrui 4 年之前
父節點
當前提交
ca88405ffb
共有 2 個文件被更改,包括 136 次插入21 次删除
  1. 134 19
      pages/myShopTour/myShopTour.vue
  2. 2 2
      pages/shopTourCompleted/shopTourCompleted.vue

+ 134 - 19
pages/myShopTour/myShopTour.vue

@@ -6,38 +6,153 @@
 				<view class="back-icon" @click="goBack">
 					<u-icon name="arrow-left" color="#fff" size="32"></u-icon>
 				</view>
-				<view class="left-icon">132213</view>
+				<view class="left-icon">我的巡店</view>
+				<view class="right-icon">
+					<u-icon name="more-dot-fill" color="#fff" size="28"></u-icon>
+				</view>
 			</view>
 		</u-navbar>
+		<!-- 内容 -->
+		<view class="myShopTour-con">
+			<u-tabs-swiper ref="uTabs" :list="tabList" name="dispName" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
+			<swiper class="data-list" :current="swiperCurrent" @transition="transition" @change="swiperChange" @animationfinish="animationfinish">
+				<swiper-item class="swiper-item" v-for="(tabs, index) in tabList" :key="index">
+					<scroll-view scroll-y class="scroll-con" @scrolltolower="onreachBottom">
+						<view class="record-con">
+							<view class="record-item">
+								<view class="item-head"></view>
+							</view>
+						</view>
+						<u-empty text="暂无数据" img-width="120" v-if="list.length == 0 && status != 'loading'" mode="list"></u-empty>
+						<u-loadmore bg-color="#f8f8f8" v-if="list.length < total || status == 'loading'" :status="status" class="loadmore" />
+					</scroll-view>
+				</swiper-item>
+			</swiper>
+		</view>
 	</view>
 </template>
 
 <script>
-	export default{
-		data(){
-			return{
-				background: {
-					// 渐变色
-					backgroundImage: 'linear-gradient(45deg, rgb(85, 170, 255), rgb(21, 102, 223))'
-				},
-			}
+export default {
+	data() {
+		return {
+			background: {
+				// 渐变色
+				backgroundImage: 'linear-gradient(45deg, rgb(85, 170, 255), rgb(21, 102, 223))'
+			},
+			tabList: [  //  tab切换  类型
+				{ dispName: '全部', code:'' },
+				{ dispName: '进行中', code:'1' },
+				{ dispName: '已完成', code:'2' },
+				{ dispName: '已过期', code:'3' }
+			],
+			current: 0,  //  tabs组件的current值,表示当前活动的tab选项
+			swiperCurrent: 0,  //  swiper组件的current值,表示当前那个swiper-item是活动的
+			pageNo: 1,  //  当前页码
+			pageSize: 15,  //  一页多少条
+			total: 0,  //  总条数
+			// status: 'loading',  //  加载状态
+			status: 'loadmore',  //  加载状态
+			noDataText: '暂无数据',  //  列表数据为空时提示文字
+			list: [],  //  数据列表
 		}
+	},
+	onLoad() {
+		this.pageInit()
+	},
+	methods: {
+		//  返回
+		goBack() {
+			uni.navigateBack({
+				delta: 1
+			});
+		},
+		pageInit(){
+			this.total = 0
+			this.pageNo = 1
+		},
+		// tabs通知swiper切换
+		tabsChange(index) {
+			this.swiperCurrent = index
+			this.list = []
+			this.status = "loading"
+		},
+		swiperChange(event){
+			this.list = []
+			this.status = "loading"
+		},
+		// swiper-item左右移动,通知tabs的滑块跟随移动
+		transition(e) {
+			let dx = e.detail.dx;
+			this.$refs.uTabs.setDx(dx);
+		},
+		// 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
+		// swiper滑动结束,分别设置tabs和swiper的状态
+		animationfinish(e) {
+			let current = e.detail.current
+			if(current != this.current){
+				this.$refs.uTabs.setFinishCurrent(current)
+				this.swiperCurrent = current
+				this.current = current
+				this.pageInit()
+			}
+		},
+		// scroll-view到底部加载更多
+		onreachBottom() {
+			if(this.list.length < this.total){
+				this.pageNo += 1
+				this.pageInit()
+			}else{
+				this.status = "nomore"
+			}
+		},
 	}
+};
 </script>
 
 <style lang="scss" scoped>
-	page{
-		background-color: #f8f8f8;
-		height: calc(100vh - 44px);
+page {
+	background-color: #f8f8f8;
+	height: calc(100vh - 44px);
+}
+.myShopTour-wrap {
+	height: 100%;
+	/* 自定义导航栏样式 */
+	.slot-wrap {
+		display: flex;
+		align-items: center;
+		/* 如果您想让slot内容占满整个导航栏的宽度 */
+		flex: 1;
+		/* 如果您想让slot内容与导航栏左右有空隙 */
+		padding: 0 30rpx;
+		color: #fff;
+		font-size: 28upx;
+		.left-icon {
+			flex-grow: 1;
+			font-size: 32upx;
+			margin-right: 10upx;
+			text-align: center;
+		}
+		.right-icon {
+			padding-left: 50upx;
+		}
+		.uni-icons {
+			margin-right: 10upx;
+		}
 	}
-	.myShopTour-wrap{
-		height: 100%;
-		.slot-wrap {
-			width: 100%;
-			color: #fff;
-			.left-icon{
-				text-align: center;
+	// 内容
+	.myShopTour-con{
+		.data-list{
+			height: calc(100vh - 84px);
+			.swiper-item{
+				.scroll-con{
+					height: 100%;
+					.loadmore{
+						padding: 30upx;
+					}
+				}
 			}
 		}
 	}
+}
 </style>

+ 2 - 2
pages/shopTourCompleted/shopTourCompleted.vue

@@ -75,12 +75,12 @@
 	}
 	.shopTourCompleted-wrap{
 		height: 100%;
-		padding: 0 30upx;
+		padding: 20upx 30upx 0;
+		box-sizing: border-box;
 		.info-con{
 			.inspection-info{
 				background-color: #fff;
 				padding: 20upx 30upx;
-				margin-top: 20upx;
 				.info-main{
 					font-size: 28upx;
 					line-height: 48upx;