1

pagesMy/order/after.vue

@@ -5,54 +5,63 @@
 				<input type="text" v-model="searchInfo.name" @input="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" @tap="toInfo(item)">
-							<view class="list_1">
-								<view class="shopname">
-									<text class="iconfont icon-shangdian"></text>
-									<text>{{item.shop.name}}</text>
-								</view>
-								<view class="type">
-									{{item.zhType||'暂无'}}
-								</view>
-							</view>
-							<view class="list_2">
-								<image class="image" :src="item.url&&item.url.length>0?item.url[0].url:''" mode="">
-								</image>
-								<view class="other">
-									<view class="name">
-										{{item.goods.goods.name||'暂无'}}
-									</view>
-									<view class="other_1">
-										商品规格：<text>{{item.goods.name||'暂无'}}</text>
+				<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" @tap="toInfo(item)">
+									<view class="list_1">
+										<view class="shopname">
+											<text class="iconfont icon-shangdian"></text>
+											<text>{{item.shop.name}}</text>
+										</view>
+										<view class="type">
+											{{item.zhType||'暂无'}}
+										</view>
 									</view>
-									<view class="other_1" v-if="item.type!='2'">
-										退款：<text>¥{{item.money||0}}</text>
+									<view class="list_2">
+										<image class="image" :src="item.url&&item.url.length>0?item.url[0].url:''"
+											mode="">
+										</image>
+										<view class="other">
+											<view class="name">
+												{{item.goods.goods.name||'暂无'}}
+											</view>
+											<view class="other_1">
+												商品规格：<text>{{item.goods.name||'暂无'}}</text>
+											</view>
+											<view class="other_1" v-if="item.type!='2'">
+												退款：<text>¥{{item.money||0}}</text>
+											</view>
+											<view class="other_1">
+												申请时间：<text>{{item.apply_time||'暂无'}}</text>
+											</view>
+											<view class="other_1">
+												售后描述：<text>{{item.desc||'暂无'}}</text>
+											</view>
+										</view>
 									</view>
-									<view class="other_1">
-										申请时间：<text>{{item.apply_time||'暂无'}}</text>
-									</view>
-									<view class="other_1">
-										售后描述：<text>{{item.desc||'暂无'}}</text>
+									<view class="btn">
+										<button type="default" size="mini" @tap.stop="toCancel(item)">取消售后</button>
+										<button v-if="item.type!='0'" type="default" size="mini"
+											@tap.stop="toRevise(item)">维护信息</button>
 									</view>
 								</view>
 							</view>
-							<view class="btn">
-								<button type="default" size="mini" @tap.stop="toCancel(item)">取消售后</button>
-								<button v-if="item.type!='0'" type="default" size="mini"	
-									@tap.stop="toRevise(item)">维护信息</button>
-							</view>
-						</view>
+						</scroll-view>
 					</view>
-				</scroll-view>
+				</tabs>
 			</view>
 		</view>
 	</mobile-frame>
 </template>
 
 <script>
+	import tabs from '@/components/tabs/index.vue';
 	export default {
+		components: {
+			tabs
+		},
 		data() {
 			return {
 				user: {},
@@ -61,7 +70,36 @@
 				total: 0,
 				skip: 0,
 				limit: 5,
-				page: 0
+				page: 0,
+				tabs: {
+					active: '0',
+					menu: [{
+							title: '申请售后',
+							active: '0'
+						},
+						{
+							title: '正在处理退款',
+							active: '1'
+						},
+						{
+							title: '已退款',
+							active: '-1'
+						},
+						{
+							title: '已退货',
+							active: '-2'
+						},
+						{
+							title: '正在处理换货',
+							active: '3'
+						},
+						{
+							title: '已换货',
+							active: '-3'
+						}
+					]
+				},
+				status: '0',
 			};
 		},
 		onShow: async function() {
@@ -73,6 +111,14 @@
 			await 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()
+			},
 			// 订单详细
 			toInfo(item) {
 				uni.navigateTo({
@@ -132,8 +178,10 @@
 			async search() {
 				const that = this;
 				let user = that.user;
+				let status = that.status;
 				const arr = await that.$api(`/afterSale`, 'GET', {
-					customer: user._id
+					customer: user._id,
+					status: that.status,
 				});
 				if (arr.errcode == '0') {
 					let list = [...that.list, ...arr.data];
@@ -201,7 +249,7 @@
 		height: 100vh;
 
 		.one {
-			border-bottom: 1px solid var(--f85Color);
+			// border-bottom: 1px solid var(--f85Color);
 			padding: 2vw;
 
 			input {
@@ -217,69 +265,75 @@
 			flex-grow: 1;
 			background-color: var(--f9Color);
 
-			.list {
-				margin: 2vw;
-				background-color: var(--fffColor);
-				padding: 2vw;
-				width: 92vw;
-				border-radius: 5px;
+			.tabsList {
+				position: relative;
+				width: 100vw;
+				height: 82vh;
 
-				.list_1 {
-					display: flex;
-					justify-content: space-between;
-					font-size: var(--font16Size);
-					margin: 0 0 2vw 0;
+				.list {
+					margin: 2vw;
+					background-color: var(--fffColor);
+					padding: 2vw;
+					width: 92vw;
+					border-radius: 5px;
+
+					.list_1 {
+						display: flex;
+						justify-content: space-between;
+						font-size: var(--font16Size);
+						margin: 0 0 2vw 0;
 
-					.shopname {
-						text {
-							margin: 0 0 0 1vw;
+						.shopname {
+							text {
+								margin: 0 0 0 1vw;
+							}
 						}
-					}
 
-					.type {
-						color: var(--ff0Color);
+						.type {
+							color: var(--ff0Color);
+						}
 					}
-				}
 
-				.list_2 {
-					display: flex;
-					justify-content: space-between;
-					align-items: center;
+					.list_2 {
+						display: flex;
+						justify-content: space-between;
+						align-items: center;
 
-					.image {
-						width: 25vw;
-						height: 25vw;
-						margin: 0 2vw 1vw 0;
-					}
+						.image {
+							width: 25vw;
+							height: 25vw;
+							margin: 0 2vw 1vw 0;
+						}
 
-					.other {
-						flex-grow: 1;
+						.other {
+							flex-grow: 1;
 
-						.name {
-							font-size: var(--font16Size);
-						}
+							.name {
+								font-size: var(--font16Size);
+							}
 
-						.other_1 {
-							font-size: var(--font14Size);
+							.other_1 {
+								font-size: var(--font14Size);
 
-							text {
-								color: var(--f85Color);
+								text {
+									color: var(--f85Color);
+								}
 							}
 						}
 					}
-				}
 
-				.btn {
-					text-align: right;
+					.btn {
+						text-align: right;
 
-					button {
-						margin: 2vw 0 0 2vw;
+						button {
+							margin: 2vw 0 0 2vw;
+						}
 					}
 				}
-			}
 
-			.list:nth-child(2n) {
-				margin: 0 0 2vw 0;
+				.list:nth-child(2n) {
+					margin: 0 0 2vw 0;
+				}
 			}
 		}
 	}

pagesMy/order/index.vue

@@ -170,6 +170,10 @@
 						{
 							title: '已收货',
 							active: '3'
+						},
+						{
+							title: '取消订单',
+							active: '-1'
 						}
 					]
 				},