我的奖品库修改

packagePrize/prize/index.vue

@@ -13,33 +13,53 @@
 
 		<!-- 奖品选择 -->
 		<view class="prize-state">
-			<u-tabs @change="changeTab" :scrollable="false" :list="stateArr" lineWidth="60" lineHeight="1"
-				:current='currentIndex' lineColor="#D70909" :activeStyle="{
-									color: '#D70909',
-									transform: 'scale(1)'
-								}" :inactiveStyle="{
-									color: '#333',
-									transform: 'scale(1)'
-								}" itemStyle="padding-left: 25px; padding-right: 25px; height: 44px;">
-			</u-tabs>
+			<!-- 类型 -->
+			<view class="prize-state-tabs">
+				<u-tabs @change="changeTab" :scrollable="false" :list="stateArr" lineWidth="30" lineHeight="3"
+					:current='currentIndex' lineColor="#F9822C " :activeStyle="{
+										color: '#333 ',
+										transform: 'scale(1.1)',
+										width: '120px'
+									}" :inactiveStyle="{
+										color: '#999',
+										transform: 'scale(1)',
+										width: '120px'
+									}" itemStyle="padding-left: 20px; padding-right: 15px; height: 44px; text-align: center;">
+				</u-tabs>
+			</view>
+			<!-- 商品状态 -->
+			<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>
+			</view>
 		</view>
 		<!-- 实物商品 -->
 		<view class="prize-goods" v-if="state == 0">
 			<view class="prize-goods-list">
-				<view class="flex prize-goods-list-item" v-for="(item, index) in list" :key="index">
-					<view class="flex checkbox">
-						<u-checkbox-group>
-							<u-checkbox size="24" :value="item.checked" shape="circle" :checked="item.checked"
-								activeColor="#E96737" @change="changeChecked($event, item)"></u-checkbox>
-						</u-checkbox-group>
-					</view>
-					<view class="flex info" @click="toPrizeGoods(item)">
-						<image :src="item.picUrl" mode="aspectFill"></image>
-						<view class="flex desc">
-							<view class="ells content">{{ item.title }}</view>
-							<view class="sku" v-if="item.properties">规格：{{ item.properties }}</view>
-							<view class="">数量：{{ item.goodsNum }}</view>
+				<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">
+							<u-checkbox-group>
+								<u-checkbox size="24" :value="item.checked" shape="circle" :checked="item.checked"
+									activeColor="#F9822C" @change="changeChecked($event, item)"></u-checkbox>
+							</u-checkbox-group>
 						</view>
+						<view class="info flex" @click="toPrizeGoods(item)">
+							<image :src="item.picUrl" mode="aspectFill"></image>
+							<view class="desc flex">
+								<view class="ells title">{{ item.title }}</view>
+								<view class="num flex">
+									<view class="sku ells-one">规格：{{ item.properties || '-' }}</view>
+									<view class="">数量：{{ item.goodsNum }}</view>
+								</view>
+							</view>
+						</view>
+					</view>
+					<!-- 来源 -->
+					<view class="prize-goods-list-item__btn flex">
+						<view class="type">来自：{{ item.inType && item.inType.desc }}</view>
+						<view class="btn">兑换盲豆</view>
 					</view>
 				</view>
 			</view>
@@ -102,7 +122,7 @@
 					<view class="all">全选</view>
 					<u-checkbox-group>
 						<u-checkbox v-model="checkedAll" shape="circle" size="24" :checked="checkedAll"
-							activeColor="#E96737" @change="changeCheckedAll($event)"></u-checkbox>
+							activeColor="#F9822C" @change="changeCheckedAll($event)"></u-checkbox>
 					</u-checkbox-group>
 				</view>
 				<view class="btn" @click="toSettlement">立即提货</view>
@@ -128,6 +148,12 @@
 				}, {
 					name: ' 优惠券',
 				}],
+				typeList: [{
+					name: '待兑换'
+				}, {
+					name: '已兑换'
+				}],
+				typeIndex: 0,
 				state: 0,
 				checkedAll: false,
 
@@ -177,6 +203,7 @@
 							item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/170'
 							if (_this.state == 0) {
 								item.checked = false
+								item.inType = JSON.parse(item.inType)
 							}
 						})
 						_this.total = res.total
@@ -338,24 +365,6 @@
 	}
 </script>
 
-
-<style lang="scss" scoped>
-	.info-now {
-		margin-top: 10rpx;
-		color: #848484;
-		font-size: 30rpx;
-		height: 100rpx;
-		line-height: 90rpx;
-		text-align: center;
-	}
-
-	.info-now view {
-		height: 2rpx;
-		margin: 0 10rpx;
-		background-image: linear-gradient(to right, #cfcfcf 0%, #cfcfcf 50%, transparent 1%);
-		background-size: 25rpx 10rpx;
-	}
-</style>
 <style lang="scss" scoped>
 	.empty {
 		height: 60vh;
@@ -365,59 +374,111 @@
 		position: fixed;
 		background-color: #FFFFFF;
 		width: 100%;
-		padding-bottom: 16rpx;
 		z-index: 10;
-		box-shadow: 0 5rpx 5rpx #ececec;
+		box-shadow: 0 2rpx 2rpx #ececec;
+
+		// 类型
+		&-tabs {
+			display: flex;
+			box-shadow: 0 5rpx 5rpx #ececec;
+		}
+
+		// 商品状态
+		&-type {
+			justify-content: flex-start;
+			padding: 24rpx 34rpx;
+
+			&-item {
+				margin-right: 34rpx;
+				padding: 12rpx 36rpx;
+				border-radius: 24rpx;
+				color: #FFAB4D;
+			}
+
+			&-item__action {
+				background: #FFAB4D;
+				color: #fff;
+			}
+		}
 	}
 
+	// 实物商品
 	.prize-goods {
-		margin-top: 90rpx;
-		padding: 40rpx 20rpx 200rpx;
+		margin-top: 180rpx;
+		padding: 34rpx 34rpx 200rpx;
 
 		&-list {
 
 			&-item {
-				justify-content: space-between;
-				padding: 36rpx 16rpx;
+				padding: 34rpx 22rpx 34rpx;
 				background-color: #fff;
-				border-radius: 10rpx;
+				border-radius: 18rpx;
 				margin-bottom: 30rpx;
-
-				.checkbox {}
-
-				.info {
-					flex: 1;
-					justify-content: flex-start;
-				}
-
-				image {
-					width: 200rpx;
-					height: 200rpx;
-				}
-
-				.desc {
-					height: 200rpx;
-					padding-left: 22rpx;
-					flex: 1;
-					font-size: 30rpx;
-					flex-direction: column;
-					align-items: flex-start;
+				
+				&__content {
 					justify-content: space-between;
+					padding-bottom: 22rpx;
+					border-bottom: 1px solid #E5E5E5;
+					
+					.info {
+						padding-left: 16rpx;
+						flex: 1;
+						justify-content: flex-start;
+						
+						image {
+							width: 200rpx;
+							height: 200rpx;
+							border-radius: 12rpx;
+						}
+						
+						.desc {
+							height: 200rpx;
+							padding-left: 22rpx;
+							flex: 1;
+							font-size: 30rpx;
+							flex-direction: column;
+							align-items: flex-start;
+							justify-content: space-between;
+							
+							.title {
+								line-height: 40rpx;
+								font-weight: bold;
+							}
+							
+							.num {
+								width: 100%;
+								color: #666666;
+								font-size: 26rpx;
+								justify-content: space-between;
+								
+								.sku {
+									flex: 1;
+								}
+							}
+						}
+					}
 				}
-
-				.content {
-					line-height: 40rpx;
-					font-weight: bold;
-				}
-
-				.sku {
-					color: #848484;
-				}
-
-				.num {
-					width: 100%;
-					color: #8C8C8C;
+				
+				&__btn {
 					justify-content: space-between;
+					padding-top: 22rpx;
+					
+					.type {
+						font-size: 30rpx;
+						color: #999999;
+						line-height: 30rpx;
+						padding-left: 70rpx;
+					}
+					
+					.btn {
+						width: 200rpx;
+						height: 66rpx;
+						line-height: 66rpx;
+						text-align: center;
+						color: #fff;
+						background: #F9822C;
+						border-radius: 34rpx;
+					}
 				}
 			}
 
@@ -428,7 +489,7 @@
 	}
 
 	.prize-coupon {
-		margin-top: 90rpx;
+		margin-top: 85rpx;
 		padding: 40rpx 20rpx 150rpx;
 
 		&-list {
@@ -456,6 +517,22 @@
 					}
 				}
 
+				.info-now {
+					margin-top: 10rpx;
+					color: #848484;
+					font-size: 30rpx;
+					height: 100rpx;
+					line-height: 90rpx;
+					text-align: center;
+				}
+
+				.info-now view {
+					height: 2rpx;
+					margin: 0 10rpx;
+					background-image: linear-gradient(to right, #cfcfcf 0%, #cfcfcf 50%, transparent 1%);
+					background-size: 25rpx 10rpx;
+				}
+
 				.price-title {
 					justify-content: flex-start;
 					position: absolute;