商城订单

pages/knapsack/knapsack.vue

@@ -12,61 +12,145 @@
 				商城订单
 			</view>
 		</view>
-		<view class="list">
-			<uni-swipe-action  :autoClose="false">
-				<uni-swipe-action-item v-for="(item, index) in list" :key="index" :show="showCheck ? 'left':'none'" :disabled="true">
-					<template v-slot:left>
-						<view class="swipeLeft">
-							<radio class="radio" :checked="item.check == true" @click="checkClick($event, item)" />
-						</view>
-					</template>
-					<view class="card" >
-						<view class="row" style="margin-top: 10px;">
-							<view class="left">
-								<image class="img" src="@/static/img/ka.jpeg" mode="aspectFill"></image>
+
+		<view class="content" v-if="activeIndex == 1">
+			<view class="tabs2">
+				<image class="tabs2_bk" src="@/static/img/knapsack/tabBk2.png" mode="widthFix"></image>
+				<view class="tabs2_info">
+					<span class="text">选择排序方式：</span>
+					<uni-data-select class="select" v-model="params.sort" :localdata="sortList"></uni-data-select>
+				</view>
+			</view>
+			<view class="list">
+				<uni-swipe-action :autoClose="false">
+					<uni-swipe-action-item v-for="(item, index) in list" :key="index" :show="showCheck ? 'left':'none'"
+						:disabled="true">
+						<template v-slot:left>
+							<view class="swipeLeft">
+								<radio class="radio" :checked="item.check == true" @click="checkClick($event, item)" />
 							</view>
-							<view class="right" style="font-size: 14px;">
-								<view class="row title">
-									{{item.prizeName}}
+						</template>
+						<view class="card">
+							<view class="row" style="margin-top: 10px;">
+								<view class="left">
+									<image class="img" src="@/static/img/ka.jpeg" mode="aspectFill"></image>
 								</view>
-								<view class="row text">
-									获得时间：{{ item.creatTime }}
-								</view>
-								<view class="row" style="color: #FF2C43;">
-									回收积分：{{ item.integral }}
-									<span class="status">{{ item.prizeStatus }}</span>
-								</view>
-								<view class="row button">
-									<span></span>
-									<span>
-										<image style="width: 44px;" src="@/static/img/knapsack/button5.png" mode="widthFix"></image>
-									</span>
+								<view class="right" style="font-size: 14px;">
+									<view class="row title">
+										{{item.prizeName}}
+									</view>
+									<view class="row text">
+										获得时间：{{ item.creatTime }}
+									</view>
+									<view class="row" style="color: #FF2C43;">
+										回收积分：{{ item.integral }}
+										<span class="status">{{ item.prizeStatus }}</span>
+									</view>
+									<view class="row button">
+										<span></span>
+										<span>
+											<image style="width: 44px;" src="@/static/img/knapsack/button5.png"
+												mode="widthFix"></image>
+										</span>
+									</view>
 								</view>
 							</view>
 						</view>
+					</uni-swipe-action-item>
+				</uni-swipe-action>
+			</view>
+
+			<view class="buttons" v-if="!showCheck">
+				<image class="button" src="@/static/img/knapsack/button3.png" mode="heightFix"></image>
+				<image class="button" @click="showCheck = true" src="@/static/img/knapsack/button4.png"
+					mode="heightFix">
+				</image>
+			</view>
+			<view class="bottom" v-if="showCheck">
+				<view class="left">
+					<image class="radio1" @click="clickCheckAll(true)" v-if="!allCheck"
+						src="@/static/img/knapsack/check.png" mode="widthFix"></image>
+					<image class="radio2" @click="clickCheckAll(false)" v-else
+						src="@/static/img/knapsack/checkActive.png" mode="widthFix"></image>
+					<view class="text" style="color: #000;">
+						全选
+					</view>
+					<view class="text">
+						已选 (<span style="color: #000;">{{selectIndex.length}}</span>)
 					</view>
-				</uni-swipe-action-item>
-			</uni-swipe-action>
-		</view>
-		
-		<view class="buttons" v-if="!showCheck">
-			<image class="button" src="@/static/img/knapsack/button3.png" mode="heightFix"></image>
-			<image class="button" @click="showCheck = true" src="@/static/img/knapsack/button4.png" mode="heightFix"></image>
-		</view>
-		<view class="bottom" v-if="showCheck">
-			<view class="left">
-				<image class="radio1" @click="clickCheckAll(true)" v-if="!allCheck" src="@/static/img/knapsack/check.png" mode="widthFix"></image>
-				<image class="radio2" @click="clickCheckAll(false)" v-else src="@/static/img/knapsack/checkActive.png" mode="widthFix"></image>
-				<view class="text" style="color: #000;">
-					全选
 				</view>
-				<view class="text">
-					已选 (<span style="color: #000;">{{selectIndex.length}}</span>)
+				<view class="right">
+					<image class="button" @click="cancelOrder" style="margin-right: 5px;"
+						src="@/static/img/knapsack/button2.png" mode="heightFix"></image>
+					<image class="button" @click="toConfirmConfirm" src="@/static/img/knapsack/button1.png"
+						mode="heightFix"></image>
 				</view>
 			</view>
-			<view class="right">
-				<image class="button" @click="cancelOrder" style="margin-right: 5px;" src="@/static/img/knapsack/button2.png" mode="heightFix"></image>
-				<image class="button" @click="toConfirmConfirm" src="@/static/img/knapsack/button1.png" mode="heightFix"></image>
+		</view>
+		<view class="content " v-if="activeIndex == 2">
+			<view class="tabs2 tabw">
+				<image class="tabs2_bk" style="width: 100%; height: 30px;" src="@/static/img/knapsack/tabBk2.png"
+					mode=""></image>
+				<view class="tabs2_info">
+					<view :class="['tabItem', tab2Active == 1 ? 'active': '']" @click="tabs2Click(1)">
+						代付款
+					</view>
+					<view :class="['tabItem', tab2Active == 2 ? 'active': '']" @click="tabs2Click(2)">
+						待发货
+					</view>
+					<view :class="['tabItem', tab2Active == 3 ? 'active': '']" @click="tabs2Click(3)">
+						待收货
+					</view>
+					<view :class="['tabItem', tab2Active == 4 ? 'active': '']" @click="tabs2Click(4)">
+						全部
+					</view>
+				</view>
+			</view>
+
+			<view class="list">
+				<view class="card" style="position: relative;" v-for="(item, index) in list2">
+					<view class="row text" style="font-weight: 600;">
+						{{ item.order.addTime }}
+						<view class="status2 type1" v-if="item.order.orderStatus == 101">
+							待付款
+						</view>
+						<view class="status2 type2" v-if="item.order.orderStatus == 201">
+							待发货
+						</view>
+						<view class="status2 type3" v-if="item.order.orderStatus == 301">
+							待收货
+						</view>
+						<view class="status2 type4" v-if="item.order.orderStatus == 401">
+							已完成
+						</view>
+					</view>
+					<view class="row text" style="font-size: 12px;">
+						订单ID：{{item.order.orderSn}}
+					</view>
+					<view class="row" style="margin-top: 10px;" v-for="(item2, index2) in item.prizeList">
+						<view class="left">
+							<image class="img2" :src="item2.prizeIcon" mode="aspectFill"></image>
+						</view>
+						<view class="right" style="font-size: 14px;">
+							<view class="row" style="font-size: 12px;">
+								{{item2.prizeName}}
+							</view>
+							<view class="row" style="font-weight: 600;color: #FF2C43;">
+								￥：9.9
+								<span style="color: #000;"> × {{item2.prizeNum}}</span>
+							</view>
+						</view>
+					</view>
+					<view class="row button" style="font-size: 14px;">
+						<span></span>
+						<span>
+							实付金额:
+							<span style="font-weight: 600;color: #FF2C43;">
+								￥<span style="font-size: 18px;">{{item.order.actualPrice}}</span>
+							</span>
+						</span>
+					</view>
+				</view>
 			</view>
 		</view>
 	</view>
@@ -74,7 +158,8 @@
 
 <script>
 	import {
-		packagePrizeListApi
+		packagePrizeListApi,
+		packageOrderListApi
 	} from "@/api/knapsack.js"
 	export default {
 		data() {
@@ -87,8 +172,24 @@
 					limit: 999,
 					page: 1,
 					status: 0,
+					sort: null,
+				},
+				list2: [],
+				params2: {
+					limit: 999,
+					page: 1,
 				},
 				selectIndex: [],
+				sortList: [{
+						value: 0,
+						text: "按时间排序"
+					},
+					{
+						value: 1,
+						text: "按价格排序"
+					},
+				],
+				tab2Active: 4,
 			}
 		},
 		onShow() {
@@ -105,13 +206,16 @@
 			this.$refs.ani.run(() => {
 				console.log('动画支持完毕')
 			})
+			// 获取背包数据
 			this.getList()
+			// 获取商城订单数据（全部）
+			this.getList2()
 		},
 		onReady() {
-			
+
 		},
 		onLoad() {
-			
+
 		},
 		watch: {
 			list: {
@@ -120,16 +224,35 @@
 					// console.log(newValue, 'newValue')
 					let bool = true
 					for (var i = 0; i < newValue.length; i++) {
-						if(!newValue[i].check) {
+						if (!newValue[i].check) {
 							bool = false
 						}
-						
+
 					}
 					this.allCheck = bool
 				}
 			}
 		},
 		methods: {
+			tabs2Click(index) {
+				this.tab2Active = index
+				let type = null
+				switch (index){
+					case 1:
+						type = 101
+						break;
+					case 2:
+						type = 201
+						break;
+					case 3:
+						type = 301
+						break;
+					case 4:
+						type = null
+						break;
+				}
+				this.getList2(type)
+			},
 			toConfirmConfirm() {
 				if (this.selectIndex.length == 0) {
 					wx.showToast({
@@ -162,7 +285,7 @@
 			checkClick(e, item) {
 				console.log(item, 'item')
 				item.check = !item.check
-				
+
 				let index = this.selectIndex.indexOf(item.id)
 				if (item.check && index == -1) {
 					this.selectIndex.push(item.id)
@@ -172,6 +295,7 @@
 				console.log(this.selectIndex, 'this.selectIndex')
 			},
 			getList() {
+				// 获取背包列表
 				packagePrizeListApi(this.params).then(res => {
 					console.log(res, '奖品背包')
 					let list = res.data.list
@@ -181,6 +305,16 @@
 					this.list = list
 				})
 			},
+			getList2(type) {
+				// 获取商城订单列表
+				if(type) {
+					this.params2.status = type
+				}
+				packageOrderListApi(this.params2).then(res => {
+					console.log(res, '商城订单列表')
+					this.list2 = res.data.list
+				})
+			},
 			tabClick(index) {
 				this.activeIndex = index
 				if (index == 1) {
@@ -214,7 +348,7 @@
 			height: 44px;
 			border-radius: 22px;
 			background: rgba(255, 255, 255, 0.8);
-			margin: 20px auto;
+			margin: 20px auto 10px auto;
 			color: #005ECC;
 			font-size: 14px;
 			display: flex;
@@ -243,62 +377,151 @@
 				color: #fff;
 			}
 		}
+
+		.tabs2 {
+			width: 240px;
+			margin: 0 auto;
+			position: relative;
+
+			.tabs2_bk {
+				width: 100%;
+			}
+
+			.tabs2_info {
+				position: absolute;
+				top: 0;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 100%;
+				height: 100%;
+				font-size: 12px;
+
+				.text {
+					color: #fff;
+				}
+
+				.select {
+					width: 80px;
+				}
+			}
+
+		}
+
+		.tabw {
+			width: calc(100% - 20px);
+			margin: 0 auto;
+
+			.tabs2_info {
+				justify-content: space-around;
+
+				.tabItem {
+					color: #fff;
+					padding: 5px 0;
+					font-size: 13px;
+				}
+
+				.active {
+					color: #8EF1FF !important;
+					border-bottom: solid 2px #8EF1FF;
+				}
+			}
+		}
+
 		.list {
 			padding: 10px;
 			padding-bottom: 70px;
+
 			.swipeLeft {
 				display: flex;
 				align-items: center;
 				justify-content: center;
 				width: 40px;
+
 				.radio {
 					transform: scale(0.8);
 				}
 			}
+
 			.card {
 				margin-bottom: 10px;
 				border-radius: 8px;
 				background: #fff;
 				padding: 10px;
-				
+
 				.row {
 					display: flex;
 					justify-content: space-between;
-					
+					.status2 {
+						position: absolute;
+						right: 10px;
+						width: 44px;
+						height: 16px;
+						font-size: 12px;
+						border-radius: 2px;
+						text-align: center;
+						padding: 2px 5px;
+					}
+					.type1 {
+						background: #FFE4E7;
+						color: #FF2C43;
+					}
+					.type2 {
+						background: #E2EDFB;
+						color: #005ECC;
+					}
+					.type3 {
+						background: #00BCC8;
+						color: #00C537;
+					}
+					.type4 {
+						background: #DEF2E4;
+						color: #00BCC8;
+					}
 					.left {
 						display: flex;
 						align-items: center;
-						
+
 						.photo {
 							margin-right: 5px;
 							width: 30px;
 							height: 30px;
 							border-radius: 50%;
 						}
-						
+
 						.name {
 							font-size: 14px;
 							font-weight: 600;
-							
+
 						}
-						
+
 						.img {
 							width: 100px;
 							height: 100px;
 							border-radius: 2px;
 							margin-right: 10px;
 						}
+						.img2 {
+							width: 75px;
+							height: 75px;
+							border-radius: 2px;
+							margin-right: 10px;
+						}
 					}
+
 					.right {
 						flex: 1;
+
 						.row {
 							margin-bottom: 5px;
 						}
+
 						.title {
 							font-size: 16px;
 							font-weight: 600;
 						}
 					}
+
 					.text1 {
 						color: #666666;
 						font-size: 12px;
@@ -306,6 +529,7 @@
 				}
 			}
 		}
+
 		.buttons {
 			position: fixed;
 			bottom: 0;
@@ -313,10 +537,12 @@
 			justify-content: space-around;
 			width: 100%;
 			padding: 10px 0;
+
 			image {
 				height: 42px;
 			}
 		}
+
 		.bottom {
 			background: #fff;
 			position: fixed;
@@ -325,33 +551,68 @@
 			justify-content: space-between;
 			width: calc(100% - 20px);
 			padding: 10px;
+
 			.left {
 				display: flex;
 				justify-content: center;
 				align-items: center;
-				
+
 				.text {
 					color: #999;
 					font-size: 14px;
 					margin-left: 10px;
 				}
+
 				.radio1 {
 					width: 20px;
 					height: 20px;
 				}
+
 				.radio2 {
 					width: 18px;
 					height: 18px;
 				}
 			}
-			
+
 			.right {
 				display: flex;
-				
+
 				.button {
 					height: 30px;
 				}
 			}
 		}
 	}
+</style>
+
+<style scoped>
+	.tabs2_info>>>.uni-stat__select {
+		background: none;
+	}
+
+	.tabs2_info>>>.uni-select {
+		border: none !important;
+		font-size: 12px;
+
+	}
+
+	.tabs2_info>>>.uni-icons {
+		font-size: 20px !important;
+	}
+
+	.tabs2_info>>>.uni-select__input-text {
+		color: #8EF1FF !important;
+	}
+
+	.tabs2_info>>>.uni-icons {
+		color: #8EF1FF !important;
+	}
+
+	.tabs2_info>>>.uni-select__selector {
+		width: 100px;
+	}
+
+	.tabs2_info>>>.uni-select__selector-item {
+		font-size: 12px;
+	}
 </style>