lilei 3 years ago
parent
commit
dc92089095
3 changed files with 277 additions and 14 deletions
  1. 9 0
      pages.json
  2. 221 0
      pages/bundelDetail/index.vue
  3. 47 14
      pages/index/index.vue

+ 9 - 0
pages.json

@@ -40,6 +40,15 @@
 				"navigationBarTitleText": "h5"
 			}
 		}
+        ,{
+            "path" : "pages/bundelDetail/index",
+            "style" :                                                                                    
+            {
+                "navigationBarTitleText": "套餐详细",
+                "enablePullDownRefresh": false
+            }
+            
+        }
     ],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

+ 221 - 0
pages/bundelDetail/index.vue

@@ -0,0 +1,221 @@
+<template>
+	<view class="pagesCons">
+		    <view class="utabs">
+				<u-tabs-swiper ref="uTabs" :list="tabList" name="dispName" :current="current" bar-width="150" active-color="#58c4c4" @change="tabsChange" :is-scroll="false"
+				 swiperWidth="750"></u-tabs-swiper>
+			</view>
+			<swiper class="check-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-view" @scrolltolower="onreachBottom">
+						<view  
+						class="check-order-list" 
+						v-if="index==current"
+						v-for="(item,sindex) in 35" 
+						:key="item.id+'-'+sindex"
+						> 
+							<view v-if="current==0" class="flex align_center justify_between">
+								<view class="l_box">钜惠礼(首单满2000元减300)</view>
+								<view class="r_box">剩余1次</view>
+							</view>
+							<view v-if="current==1">
+								<view class="l_box">钜惠礼(首单满2000元减300)</view>
+								<view class="flex align_center justify_between" style="padding-top: 0.2em;">
+									<view class="r_box">剩余1次</view>
+									<view class="r_box">2022-15-25</view>
+								</view>
+							</view>
+						 </view>
+						  
+						 <view style="padding: 20upx;">
+						 	<u-empty :src="`/static/nodata.png`" icon-size="180" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty>
+						 	<u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
+						 </view>
+					</scroll-view>
+				</swiper-item>
+			</swiper>
+	</view>
+</template>
+
+<script>
+	export default {
+		components: {
+		},
+		data() {
+			return {
+				status: 'loadmore',
+				noDataText: '暂无数据',
+				tabList: [
+					  {
+						  dispName: '品项明细',
+						  typeId: 1,
+						  queryLabel: 'WAIT_REFORM' // tab参数
+					   },
+					  {
+					    dispName: '使用记录',
+					  	typeId: 2,
+						queryLabel: 'FINISH_REFORM' // tab参数
+					  }
+				  ],
+				current: 0,
+				swiperCurrent: 0,
+				pageNo: 1,
+				pageSize: 6,
+				list: [],
+				total: 0,
+				action:'swiperChange', // 操作类型,上划分页,或左右滑动
+				statusList: [], // 问题状态数据字典
+				sourceTypeList: [] // 问题来源数据字典
+			}
+		},
+		onLoad() {
+			// 监听整改完成后刷新事件
+			uni.$on('refreshBL',this.getRow)
+			this.statusList = this.$store.state.vuex_backLogStatusList
+			this.sourceTypeList = this.$store.state.vuex_backLogSourceTypeList
+			this.getRow(1)
+		},
+		onUnload() {
+			uni.$off('refreshBL',this.getRow)
+		},
+		methods:{
+			getsourceType(value) {
+				let type = this.sourceTypeList.find(a=>a.code==value)
+				return type ? type.dispName : '--'
+			},
+			getstatus(value) {
+				let status = this.statusList.find(a=>a.code==value)
+				return status ? status.dispName : '--'
+			},
+			// tabs通知swiper切换
+			tabsChange(index) {
+				this.swiperCurrent = index;
+			},
+			swiperChange(event){
+				this.action = 'swiperChange'
+				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;
+				let isCurtab = this.current == current
+				if(this.status!="nomore"){
+					let loadData = this.action == 'swiperChange' ? !isCurtab : isCurtab;
+					if(loadData){
+						this.$refs.uTabs.setFinishCurrent(current);
+						this.swiperCurrent = current;
+						this.current = current;
+						this.resetPage();
+					}
+				}
+			},
+			// scroll-view到底部加载更多
+			onreachBottom() {
+				this.action = 'onreachBottom'
+				if(this.list.length < this.total){
+					this.resetPage()
+				}else{
+					this.status = "nomore"
+				}
+			},
+			// 查询列表
+			getRow (pageNo) {
+			  if (pageNo) {
+			    this.pageNo = pageNo
+			  }
+			  let params = {
+			    pageNo: this.pageNo,
+			    pageSize: this.pageSize,
+			    reformState: this.tabList[this.current].queryLabel, // tab分类
+			  }
+			  this.status = "loading"
+			  getBackLogList(params).then(res => {
+				console.log(params,res.data.list,'+++++++++++')
+				if (res.status == 200) {
+				  if(this.pageNo>1){
+					  this.list = this.list.concat(res.data.list || [])
+				  }else{
+					  this.list = res.data.list || []
+				  }
+				  this.total = res.data.count || 0
+				} else {
+				  this.list = []
+				  this.total = 0
+				  this.noDataText = res.message
+				}
+				this.status = "loadmore"
+			  })
+			},
+			resetPage(){
+				this.status = 'loading';
+				// 上划分页
+				if(this.action == 'onreachBottom'){
+					this.pageNo += 1
+					this.getRow()
+				}
+				// 左右切换tab
+				if(this.action == 'swiperChange'){
+					this.list = [];
+					this.getRow(1);
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		height: 100%;
+	}
+	.pagesCons{
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		.text-right {
+			text-align: right;
+		}
+		.utabs{
+			border-bottom: 1px solid #eee;
+		}
+		.check-list{
+			flex: 1;
+			.swiper-item{
+				width: 100%;
+				height: 100%;
+				overflow: hidden;
+				.scroll-view {
+					width: 100%;
+					height: 100%;
+					overflow: auto;
+				}
+			}
+		}
+		 
+		// 列表样式
+		.check-order-list{
+			background: #ffffff;
+			border-bottom: 1px solid #eee;
+			padding: 1em;
+			&:active{
+				background: #f8f8f8;
+			}
+			.l_box{
+				font-size: 1em;
+				flex-grow: 1;
+			}
+			.r_box{
+				color: #999;
+				> view{
+					padding: 0 0.1em;
+				}
+			}
+		}
+	}
+   
+	
+</style>

+ 47 - 14
pages/index/index.vue

@@ -23,16 +23,25 @@
 		</view>
 		<!-- 套餐记录 -->
 		<view class="list-box">
-			<u-cell-group :border="false" v-if="hasLogin">
-				<u-cell-item v-for="item in vinList" @click="toChoosePart(item)" :key="item.id" :title="item.vinCode" :title-style="{fontSize:'1em'}" :label="item.brandName +' '+item.modelName">
-					<text slot="icon"></text>
-				</u-cell-item>
-				<view style="padding: 20upx;">
+			<view class="scroll-box">
+				<view class="flex align_center justify_between item-box" v-for="item in 26" @click="toDetail(item)">
+					<view class="l_box">99会员礼包</view>
+					<view class="flex align_center r_box">
+						<view>
+							<view>2022-05-28</view>
+							<view>高新天佑店</view>
+						</view>
+						<view>
+							<u-icon name="arrow-right"></u-icon>
+						</view>
+					</view>
+				</view>
+				<!-- <view style="padding: 20upx;">
 					<u-empty :src="`/static/nodata.png`" icon-size="180" :text="noDataText" img-width="120" v-if="vinList.length==0 && status!='loading'" mode="list"></u-empty>
 					<u-loadmore v-if="status=='loading'" :status="status" />
-				</view>
-			</u-cell-group>
-			<view class="des" v-if="!hasLogin">请登录后查看套餐记录</view>
+				</view> -->
+				<view class="des">请登录后查看套餐记录</view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -120,6 +129,11 @@
 					this.status = 'nomore'
 				})
 			},
+			toDetail(item){
+				uni.navigateTo({
+					url:"/pages/bundelDetail/index"
+				})
+			}
 		}
 	}
 </script>
@@ -157,13 +171,32 @@
 		}
 		.list-box{
 			flex-grow: 1;
-			padding: 0 1em;
 			overflow: auto;
-			.des{
-				text-align: center;
-				padding: 3em 0;
-				color: #999;
-				font-size: 0.9em;
+			.scroll-box{
+				height: 100%;
+				.item-box{
+					border-bottom: 1px solid #eee;
+					padding: 1em;
+					&:active{
+						background: #f8f8f8;
+					}
+					.l_box{
+						font-size: 1.1em;
+						flex-grow: 1;
+					}
+					.r_box{
+						color: #999;
+						> view{
+							padding: 0 0.1em;
+						}
+					}
+				}
+				.des{
+					text-align: center;
+					padding: 3em 0;
+					color: #999;
+					font-size: 0.9em;
+				}
 			}
 		}
 	}