|  | @@ -0,0 +1,251 @@
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +	<view class="pages" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
 | 
	
		
			
				|  |  | +		<c-nav-bar title="商品管理"></c-nav-bar>
 | 
	
		
			
				|  |  | +		<view class="tb">
 | 
	
		
			
				|  |  | +			<view class="tabs">
 | 
	
		
			
				|  |  | +				<view v-for="(item,index) in tabList" :key="index" @tap="changeTab1(index)">
 | 
	
		
			
				|  |  | +					<text :class="index==current?'active':''">{{item.name}}</text>
 | 
	
		
			
				|  |  | +				</view>
 | 
	
		
			
				|  |  | +			</view>
 | 
	
		
			
				|  |  | +		</view>
 | 
	
		
			
				|  |  | +		<view class="mainContain">
 | 
	
		
			
				|  |  | +			<view class="nodata" v-if='dataList.length==0'>
 | 
	
		
			
				|  |  | +				<NoData></NoData>
 | 
	
		
			
				|  |  | +			</view>
 | 
	
		
			
				|  |  | +		</view>
 | 
	
		
			
				|  |  | +	</view>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +	import TopTabs from '@/components/TopTabs/topTabs.vue';
 | 
	
		
			
				|  |  | +	// import NoData from '../../components/NoData/index.vue';
 | 
	
		
			
				|  |  | +	export default {
 | 
	
		
			
				|  |  | +		components: {
 | 
	
		
			
				|  |  | +			TopTabs,
 | 
	
		
			
				|  |  | +			// NoData
 | 
	
		
			
				|  |  | +		},
 | 
	
		
			
				|  |  | +		data() {
 | 
	
		
			
				|  |  | +			return {
 | 
	
		
			
				|  |  | +				h: uni.getSystemInfoSync().windowHeight,
 | 
	
		
			
				|  |  | +				mt: uni.getSystemInfoSync().statusBarHeight + 44,
 | 
	
		
			
				|  |  | +				current: 0,
 | 
	
		
			
				|  |  | +				tabList: [{
 | 
	
		
			
				|  |  | +						name: '出售中'
 | 
	
		
			
				|  |  | +					},
 | 
	
		
			
				|  |  | +					{
 | 
	
		
			
				|  |  | +						name: '待上架'
 | 
	
		
			
				|  |  | +					},
 | 
	
		
			
				|  |  | +				],
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +		},
 | 
	
		
			
				|  |  | +		onLoad(option) {
 | 
	
		
			
				|  |  | +			console.log(option);
 | 
	
		
			
				|  |  | +		},
 | 
	
		
			
				|  |  | +		methods: {
 | 
	
		
			
				|  |  | +			changeTab1(item, index) {
 | 
	
		
			
				|  |  | +				console.log(item, index);
 | 
	
		
			
				|  |  | +				this.current = index;
 | 
	
		
			
				|  |  | +			},
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +</script>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<style lang="scss" scoped>
 | 
	
		
			
				|  |  | +	.pages {
 | 
	
		
			
				|  |  | +		background: #F9FAFC;
 | 
	
		
			
				|  |  | +		box-sizing: border-box;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		.tb {
 | 
	
		
			
				|  |  | +			width: 100%;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			top: 0;
 | 
	
		
			
				|  |  | +			left: 0;
 | 
	
		
			
				|  |  | +			z-index: 999;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			.searchBoxParent {
 | 
	
		
			
				|  |  | +				width: 100%;
 | 
	
		
			
				|  |  | +				background: #fff;
 | 
	
		
			
				|  |  | +				padding: 20rpx 24rpx 6rpx;
 | 
	
		
			
				|  |  | +				box-sizing: border-box;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				.searchBox {
 | 
	
		
			
				|  |  | +					width: 100%;
 | 
	
		
			
				|  |  | +					background-color: #fff;
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			.tabs {
 | 
	
		
			
				|  |  | +				background: #fff;
 | 
	
		
			
				|  |  | +				padding: 26rpx 0;
 | 
	
		
			
				|  |  | +				display: flex;
 | 
	
		
			
				|  |  | +				align-items: center;
 | 
	
		
			
				|  |  | +				width: 100%;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				&>view {
 | 
	
		
			
				|  |  | +					width: 25%;
 | 
	
		
			
				|  |  | +					font-size: 28rpx;
 | 
	
		
			
				|  |  | +					font-family: PingFangSC-Regular, PingFang SC;
 | 
	
		
			
				|  |  | +					font-weight: 400;
 | 
	
		
			
				|  |  | +					color: black;
 | 
	
		
			
				|  |  | +					line-height: 40rpx;
 | 
	
		
			
				|  |  | +					position: relative;
 | 
	
		
			
				|  |  | +					text-align: center;
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				.active {
 | 
	
		
			
				|  |  | +					font-size: 32rpx;
 | 
	
		
			
				|  |  | +					font-family: PingFang-SC-Bold, PingFang-SC;
 | 
	
		
			
				|  |  | +					font-weight: bold;
 | 
	
		
			
				|  |  | +					color: black;
 | 
	
		
			
				|  |  | +					line-height: 45rpx;
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				.active::after {
 | 
	
		
			
				|  |  | +					position: absolute;
 | 
	
		
			
				|  |  | +					content: '';
 | 
	
		
			
				|  |  | +					width: 50rpx;
 | 
	
		
			
				|  |  | +					height: 8rpx;
 | 
	
		
			
				|  |  | +					background: #007A69;
 | 
	
		
			
				|  |  | +					bottom: -26rpx;
 | 
	
		
			
				|  |  | +					left: 60%;
 | 
	
		
			
				|  |  | +					margin-left: -42rpx;
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		.green {}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +		.mainContain {
 | 
	
		
			
				|  |  | +			display: flex;
 | 
	
		
			
				|  |  | +			flex-direction: column;
 | 
	
		
			
				|  |  | +			padding: 0 20rpx;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			.nodata {
 | 
	
		
			
				|  |  | +				background: white;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			.card {
 | 
	
		
			
				|  |  | +				background: #fff;
 | 
	
		
			
				|  |  | +				border-radius: 16rpx;
 | 
	
		
			
				|  |  | +				margin: 20rpx 0;
 | 
	
		
			
				|  |  | +				padding: 20rpx;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				.header {
 | 
	
		
			
				|  |  | +					display: flex;
 | 
	
		
			
				|  |  | +					justify-content: space-between;
 | 
	
		
			
				|  |  | +					border-bottom: 1px #f3f3f3 solid;
 | 
	
		
			
				|  |  | +					padding: 20rpx;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					.red {
 | 
	
		
			
				|  |  | +						color: indianred;
 | 
	
		
			
				|  |  | +					}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					.green {
 | 
	
		
			
				|  |  | +						color: #999999;
 | 
	
		
			
				|  |  | +					}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					.blue {
 | 
	
		
			
				|  |  | +						color: #1372FF;
 | 
	
		
			
				|  |  | +					}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					.grey {
 | 
	
		
			
				|  |  | +						color: #4C5F76;
 | 
	
		
			
				|  |  | +					}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					.orange {
 | 
	
		
			
				|  |  | +						color: #FF9100;
 | 
	
		
			
				|  |  | +					}
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				.mainContent {
 | 
	
		
			
				|  |  | +					// border-bottom: 1px #f3f3f3 solid;
 | 
	
		
			
				|  |  | +					display: flex;
 | 
	
		
			
				|  |  | +					padding: 20rpx 0;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					// justify-content: space-evenly;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					.image {
 | 
	
		
			
				|  |  | +						background-repeat: no-repeat;
 | 
	
		
			
				|  |  | +						background-size: cover;
 | 
	
		
			
				|  |  | +						width: 198rpx;
 | 
	
		
			
				|  |  | +						height: 180rpx;
 | 
	
		
			
				|  |  | +						border-radius: 16rpx;
 | 
	
		
			
				|  |  | +					}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					.middle {
 | 
	
		
			
				|  |  | +						padding-top: 16rpx;
 | 
	
		
			
				|  |  | +						color: #777777;
 | 
	
		
			
				|  |  | +						// display: flex;
 | 
	
		
			
				|  |  | +						// flex-direction: column;
 | 
	
		
			
				|  |  | +						// justify-content: space-between;
 | 
	
		
			
				|  |  | +						margin-left: 25rpx;
 | 
	
		
			
				|  |  | +						width: 100%;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +						.title {
 | 
	
		
			
				|  |  | +							font-weight: 700;
 | 
	
		
			
				|  |  | +							font-size: 32rpx;
 | 
	
		
			
				|  |  | +							color: black;
 | 
	
		
			
				|  |  | +						}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +						.info {
 | 
	
		
			
				|  |  | +							padding-top: 30rpx;
 | 
	
		
			
				|  |  | +							color: #777777;
 | 
	
		
			
				|  |  | +							// display: flex;
 | 
	
		
			
				|  |  | +							// flex-direction: column;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +							&>span {
 | 
	
		
			
				|  |  | +								margin-top: 10rpx;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +							}
 | 
	
		
			
				|  |  | +						}
 | 
	
		
			
				|  |  | +					}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					.price {
 | 
	
		
			
				|  |  | +						color: red;
 | 
	
		
			
				|  |  | +						text-align: center;
 | 
	
		
			
				|  |  | +						height: 100%;
 | 
	
		
			
				|  |  | +						align-items: center;
 | 
	
		
			
				|  |  | +						align-self: center;
 | 
	
		
			
				|  |  | +						font-size: 29rpx;
 | 
	
		
			
				|  |  | +						font-weight: 700;
 | 
	
		
			
				|  |  | +					}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +				.bottom {
 | 
	
		
			
				|  |  | +					// padding: 30rpx 20rpx;
 | 
	
		
			
				|  |  | +					display: flex;
 | 
	
		
			
				|  |  | +					justify-content: flex-end;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					.detail {
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +						// border: 1rpx solid darkgrey;
 | 
	
		
			
				|  |  | +						border-radius: 16rpx;
 | 
	
		
			
				|  |  | +						color: darkgrey;
 | 
	
		
			
				|  |  | +						padding: 13rpx 34rpx;
 | 
	
		
			
				|  |  | +						background-color: #F6F6F6;
 | 
	
		
			
				|  |  | +						font-size: 26rpx;
 | 
	
		
			
				|  |  | +						color: #333333;
 | 
	
		
			
				|  |  | +						font-weight: Regular;
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +					.del {
 | 
	
		
			
				|  |  | +						border-radius: 16rpx;
 | 
	
		
			
				|  |  | +						color: darkgrey;
 | 
	
		
			
				|  |  | +						padding: 13rpx 34rpx;
 | 
	
		
			
				|  |  | +						background-color: #007A69;
 | 
	
		
			
				|  |  | +						font-size: 26rpx;
 | 
	
		
			
				|  |  | +						color: #fff;
 | 
	
		
			
				|  |  | +						font-weight: Regular;
 | 
	
		
			
				|  |  | +					}
 | 
	
		
			
				|  |  | +				}
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +			}
 | 
	
		
			
				|  |  | +		}
 | 
	
		
			
				|  |  | +	}
 | 
	
		
			
				|  |  | +</style>
 |