1

pagesMy/dough/index.vue

@@ -5,56 +5,65 @@
 				<input type="text" v-model="searchInfo.name" @blur="toInput" placeholder="搜索商品名称">
 			</view>
 			<view class="two">
-				<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
-					<view class="list-scroll-view">
-						<view class="list" v-for="(item, index) in list" :key="index" @click="toShare(item)">
-							<view class="image">
-								<image class="file" v-for="(tag, indexs) in item.persons.slice(0,9)" :key="indexs"
-									v-if="tag.status==0" :src="tag.icon&&tag.icon.length>0?tag.icon[0].url:''" mode="">
-								</image>
-							</view>
-							<view class="list_1">
-								<view class="name">
-									{{item.person_limit||0}}人即可开团成功
-								</view>
-								<view class="some">
-									<text>团长</text>
-									<text>{{item.leader.name||'暂无'}}</text>
-								</view>
-								<view class="some">
-									<text>参团人数</text>
-									<text>{{item.persons.length||0}}人</text>
-								</view>
-								<view class="some">
-									<text>开团时间</text>
-									<text>{{item.time||'暂无'}}</text>
-								</view>
-							</view>
-							<view class="other">
-								<view v-if="item.status=='0'" class="btn">
-									<text>{{item.zhStatus||'暂无状态'}}</text>
-								</view>
-								<view v-else-if="item.status=='-1'" class="button">
-									{{item.zhStatus||'暂无状态'}}
-								</view>
-								<view v-else-if="item.status=='2'" class="button">
-									已退团
-								</view>
-								<view v-else class="button">
-									{{item.zhStatus||'暂无状态'}}
+				<tabs :tabs="tabs" @tabsChange="tabsChange">
+					<view class="tabsList">
+						<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
+							<view class="list-scroll-view">
+								<view class="list" v-for="(item, index) in list" :key="index" @click="toShare(item)">
+									<view class="image">
+										<image class="file" v-for="(tag, indexs) in item.persons.slice(0,9)"
+											:key="indexs" v-if="tag.status==0"
+											:src="tag.icon&&tag.icon.length>0?tag.icon[0].url:''" mode="">
+										</image>
+									</view>
+									<view class="list_1">
+										<view class="name">
+											{{item.person_limit||0}}人即可开团成功
+										</view>
+										<view class="some">
+											<text>团长</text>
+											<text>{{item.leader.name||'暂无'}}</text>
+										</view>
+										<view class="some">
+											<text>参团人数</text>
+											<text>{{item.persons.length||0}}人</text>
+										</view>
+										<view class="some">
+											<text>开团时间</text>
+											<text>{{item.time||'暂无'}}</text>
+										</view>
+									</view>
+									<view class="other">
+										<view v-if="item.status=='0'" class="btn">
+											<text>{{item.zhStatus||'暂无状态'}}</text>
+										</view>
+										<view v-else-if="item.status=='-1'" class="button">
+											{{item.zhStatus||'暂无状态'}}
+										</view>
+										<view v-else-if="item.status=='2'" class="button">
+											已退团
+										</view>
+										<view v-else class="button">
+											{{item.zhStatus||'暂无状态'}}
+										</view>
+									</view>
 								</view>
 							</view>
-						</view>
+						</scroll-view>
 					</view>
-				</scroll-view>
+				</tabs>
 			</view>
 		</view>
 	</mobile-frame>
 </template>
 
 <script>
-	import moment from 'moment'
+	import moment from 'moment';
+	import tabs from '@/components/tabs/index.vue';
 	export default {
+		components: {
+			tabs
+		},
 		data() {
 			return {
 				user: {},
@@ -65,6 +74,27 @@
 				limit: 6,
 				page: 0,
 				statusList: [],
+				tabs: {
+					active: '0',
+					menu: [{
+							title: '开团中',
+							active: '0'
+						},
+						{
+							title: '散团中',
+							active: '-1'
+						},
+						// {
+						// 	title: '已退团',
+						// 	active: '2'
+						// },
+						{
+							title: '已结束',
+							active: '1'
+						}
+					]
+				},
+				status: '0',
 			};
 		},
 		onShow: function() {
@@ -72,6 +102,14 @@
 			that.watchLogin()
 		},
 		methods: {
+			// 选择选项卡
+			tabsChange(e) {
+				const that = this;
+				that.$set(that.tabs, `active`, e.active)
+				that.$set(that, `status`, e.active);
+				that.clearPage();
+				that.search()
+			},
 			// 分享
 			toShare(e) {
 				const that = this;
@@ -107,11 +145,13 @@
 			async search() {
 				const that = this;
 				let user = that.user;
+				let status = that.status;
 				if (user._id) {
 					let info = {
 						skip: that.skip,
 						limit: that.limit,
-						person: user._id
+						person: user._id,
+						status: that.status,
 					}
 					let res = await that.$api(`/group`, 'GET', {
 						...info,
@@ -152,7 +192,7 @@
 					uni.hideLoading();
 				} else uni.showToast({
 					title: '没有更多数据了',
-					icon:'none'
+					icon: 'none'
 				});
 			},
 			// 清空列表
@@ -175,7 +215,6 @@
 		height: 100vh;
 
 		.one {
-			border-bottom: 1px solid var(--f85Color);
 			padding: 2vw;
 
 			input {
@@ -191,81 +230,87 @@
 			flex-grow: 1;
 			padding: 2vw 0 0 0;
 
-			.list {
-				display: flex;
-				flex-direction: row;
-				justify-content: space-between;
-				align-items: center;
-				width: 91vw;
-				border: 1px solid var(--f1Color);
-				margin: 2vw 2vw 0 2vw;
-				padding: 0 2vw;
-				border-radius: 5px;
+			.tabsList {
+				position: relative;
+				width: 100vw;
+				height: 82vh;
 
-				.image {
+				.list {
 					display: flex;
-					flex-wrap: wrap;
-					justify-content: center;
+					flex-direction: row;
+					justify-content: space-between;
 					align-items: center;
-					width: 27vw;
-					height: 27vw;
+					width: 91vw;
+					border: 1px solid var(--f1Color);
+					margin: 2vw 2vw 0 2vw;
+					padding: 0 2vw;
 					border-radius: 5px;
-					margin: 0 2vw 0 0;
 
-					.file {
-						width: 9vw;
-						height: 9vw;
+					.image {
+						display: flex;
+						flex-wrap: wrap;
+						justify-content: center;
+						align-items: center;
+						width: 27vw;
+						height: 27vw;
+						border-radius: 5px;
+						margin: 0 2vw 0 0;
+
+						.file {
+							width: 9vw;
+							height: 9vw;
+						}
 					}
-				}
 
-				.list_1 {
-					display: flex;
-					flex-direction: column;
-					flex-grow: 1;
-					padding: 2vw 0;
-					width: 35vw;
+					.list_1 {
+						display: flex;
+						flex-direction: column;
+						flex-grow: 1;
+						padding: 2vw 0;
+						width: 35vw;
 
-					.name {
-						font-size: var(--font16Size);
-						margin: 0 0 1vw 0;
-					}
+						.name {
+							font-size: var(--font16Size);
+							margin: 0 0 1vw 0;
+						}
 
-					.some {
-						color: var(--f85Color);
-						font-size: var(--font14Size);
-						margin: 0 0 1vw 0;
+						.some {
+							color: var(--f85Color);
+							font-size: var(--font14Size);
+							margin: 0 0 1vw 0;
 
-						text:last-child {
-							margin: 0 0 0 1vw;
-							color: var(--f00Color);
+							text:last-child {
+								margin: 0 0 0 1vw;
+								color: var(--f00Color);
+							}
 						}
 					}
-				}
 
-				.other {
-					.btn {
-						display: flex;
-						flex-direction: column;
-						align-items: center;
-						margin: 0 2vw;
-						padding: 2vw 3vw;
-						background-color: var(--ff0Color);
-						color: var(--fffColor);
-						border-radius: 2vw;
-						font-size: var(--font14Size);
+					.other {
+						.btn {
+							display: flex;
+							flex-direction: column;
+							align-items: center;
+							margin: 0 2vw;
+							padding: 2vw 3vw;
+							background-color: var(--ff0Color);
+							color: var(--fffColor);
+							border-radius: 2vw;
+							font-size: var(--font14Size);
 
-						text {
-							font-size: var(--font12Size);
+							text {
+								font-size: var(--font12Size);
+							}
 						}
-					}
 
-					.button {
-						margin: 0 2vw;
-						padding: 2vw 3vw;
-						background-color: var(--fcColor);
-						color: var(--f00Color);
-						border-radius: 2vw;
-						font-size: var(--font14Size);
+						.button {
+							margin: 0 2vw;
+							padding: 2vw 3vw;
+							background-color: var(--fcColor);
+							color: var(--f00Color);
+							border-radius: 2vw;
+							font-size: var(--font14Size);
+						}
 					}
 				}
 			}