|
@@ -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>
|