我的奖品库兑换盲豆

packagePrize/prize/index.vue

@@ -30,16 +30,17 @@
 			<!-- 商品状态 -->
 			<view class="prize-state-type flex" v-if="state == 0">
 				<view class="prize-state-type-item" :class="{ 'prize-state-type-item__action': index == typeIndex }"
-					v-for="(item, index) in typeList" :key="index" @click="typeIndex = index">{{ item.name }}</view>
+					v-for="(item, index) in typeList" :key="index" @click="typeState(index)">{{ item.name }}</view>
 			</view>
 		</view>
 		<!-- 实物商品 -->
 		<view class="prize-goods" v-if="state == 0">
 			<view class="prize-goods-list">
 				<view class="prize-goods-list-item" v-for="(item, index) in list" :key="index">
+				<!-- <view class="prize-goods-list-item" v-for="(item, index) in list" :key="index" > -->
 					<!-- 商品 -->
 					<view class="prize-goods-list-item__content flex">
-						<view class="flex">
+						<view class="flex" v-if="item.status == 1">
 							<u-checkbox-group>
 								<u-checkbox size="24" :value="item.checked" shape="circle" :checked="item.checked"
 									activeColor="#F9822C" @change="changeChecked($event, item)"></u-checkbox>
@@ -57,14 +58,21 @@
 						</view>
 					</view>
 					<!-- 来源 -->
-					<view class="prize-goods-list-item__btn flex">
+					<view class="prize-goods-list-item__btn flex" v-if="item.status == 1">
 						<view class="type">来自：{{ item.inType && item.inType.desc }}</view>
 						<view class="btn" @click="toRecovery(item)" v-if="item.inType.value == '1' || item.inType.value == '2'">兑换盲豆</view>
 					</view>
+					<view class="prize-goods-list-item__btn flex" v-else>
+						<view class="type"></view>
+						<view class="btnTwo">已兑换</view>
+					</view>
 				</view>
 			</view>
 			<view class="flex empty" v-if="!list.length && !loading">
-				<u-empty text="数据为空" mode="order" />
+				<view class="center">
+					<image class="center-img" src="../../static/activity/null.png" mode=""></image>
+					<view class="center-font">还没有商品</view>
+				</view>
 			</view>
 		</view>
 		<!-- 优惠券 -->
@@ -111,11 +119,14 @@
 
 			</view>
 			<view class="flex empty" v-if="!list.length && !loading">
-				<u-empty text="数据为空" mode="order" />
+				<view class="center">
+					<image class="center-img" src="../../static/activity/null.png" mode=""></image>
+					<view class="center-font">还没有商品</view>
+				</view>
 			</view>
 		</view>
 
-		<view class="prize-action">
+		<view class="prize-action" v-if="statusIndex == 1">
 			<!-- 实物商品提货 -->
 			<view class="flex prize-action-goods" v-if="state == 0">
 				<view class="flex checkbox">
@@ -149,7 +160,7 @@
 					name: ' 优惠券',
 				}],
 				typeList: [{
-					name: '待兑换'
+					name: '待提货'
 				}, {
 					name: '已兑换'
 				}],
@@ -163,6 +174,8 @@
 
 				currentIndex: 0,
 				pagesNum: "",
+				
+				statusIndex: 1,
 			};
 		},
 		onShow() {
@@ -186,7 +199,7 @@
 			getList() {
 				let _this = this
 				let url = _this.state == 0 ? '/api/v1/mp/user/mine/prize/list' : '/api/v1/mp/user/mine/coupon/list'
-				let data = _this.state == 0 ? {} : {
+				let data = _this.state == 0 ? { status:this.statusIndex } : {
 					status: 1
 				}
 				uni.showLoading({
@@ -199,6 +212,7 @@
 					this.loading = false
 					if (res.code == 0) {
 						res.rows.forEach(item => {
+							item.status = JSON.parse(item.status).value
 							let picUrlArr = item.picUrl.split(',')
 							item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/170'
 							if (_this.state == 0) {
@@ -214,6 +228,19 @@
 					this.loading = false
 				})
 			},
+			
+			typeState(index){
+				this.typeIndex = index//样式改变
+				// this.statusIndex = index
+				if(index == 0 ){
+					this.statusIndex = 1 //待提货
+				}
+				if(index == 1 ){
+					this.statusIndex = 3 //已兑换
+				}
+				this.list = []
+				this.getList()
+			},
 
 			toIndex() {
 				uni.switchTab({
@@ -485,6 +512,15 @@
 						background: #F9822C;
 						border-radius: 34rpx;
 					}
+					.btnTwo {
+						width: 200rpx;
+						height: 66rpx;
+						line-height: 66rpx;
+						text-align: center;
+						border-radius: 34rpx;
+						background-color: #f1f1f1; color: #999;
+						border: 2rpx solid #999;
+					}
 				}
 			}
 
@@ -592,13 +628,13 @@
 			}
 
 			.btn {
-				width: 280rpx;
-				height: 90rpx;
-				font-size: 36rpx;
-				line-height: 90rpx;
-				border-radius: 10rpx;
-				background-color: rgba(235, 112, 9, 100);
-				color: rgba(255, 255, 255, 100);
+				width: 225rpx;
+				height: 82rpx;
+				font-size: 28rpx;
+				line-height: 82rpx;
+				border-radius: 40rpx;
+				background-color: #F9822C;
+				color: #fff;
 				text-align: center;
 			}
 		}
@@ -612,4 +648,21 @@
 			}
 		}
 	}
+	.empty {
+		height: 60vh;
+	
+		.center {
+			text-align: center;
+	
+			&-img {
+				width: 228rpx;
+				height: 350rpx;
+			}
+	
+			&-font {
+				font-size: 30rpx;
+				font-weight: 400;
+			}
+		}
+	}
 </style>