You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
151 lines
3.1 KiB
151 lines
3.1 KiB
<template> |
|
<view class="goodsManage-page"> |
|
<view class="nav acea-row row-around"> |
|
<view class="item" :class="{ on: type === 0 }" @click="changeType(0)"> |
|
<view>出售中</view> |
|
</view> |
|
<view class="item" :class="{ on: type === 1 }" @click="changeType(1)"> |
|
<view>待上架</view> |
|
</view> |
|
</view> |
|
<view class="goods-list-box"> |
|
<view class="goods-item" v-for="i in 3" :key="i"> |
|
<view class="item-top acea-row"> |
|
<image class="goods-img" src="../../../static/images/shareImg.png" mode="aspectFill"></image> |
|
<view class="info-box"> |
|
<view class="title line1">【单品套装】SKII大眼眼霜15g霜15g霜15g霜15g</view> |
|
<view class="colG">规格1</view> |
|
<view class="price-box acea-row row-between-wrapper"> |
|
<view class="money">￥499</view> |
|
<view class="colG">库存：99</view> |
|
</view> |
|
</view> |
|
</view> |
|
<view class="btn-box acea-row row-right"> |
|
<view class="edit-btn acea-row row-middle"> |
|
<image src="../../../static/images/edit-goods.png"></image> |
|
<text>编辑商品</text> |
|
</view> |
|
<view class="off-shelf-btn acea-row row-middle"> |
|
<image src="../../../static/images/off-shelf.png"></image> |
|
<text>下架商品</text> |
|
</view> |
|
<view class="del-btn acea-row row-middle"> |
|
<image src="../../../static/images/del-goods.png"></image> |
|
<text>删除商品</text> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
export default{ |
|
data(){ |
|
return { |
|
type: 0, |
|
goodsList: [], |
|
page: 0, |
|
loading: false |
|
} |
|
}, |
|
mounted() { |
|
|
|
}, |
|
methods:{ |
|
changeType(idx){ |
|
this.type = type |
|
this.goodsList = [] |
|
this.page = 1 |
|
this.loading = false |
|
} |
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less"> |
|
.goodsManage-page{ |
|
width: 100%; |
|
min-height: 100vh; |
|
background: #EEEEEE; |
|
} |
|
.nav{ |
|
background-color: #fff; |
|
// padding: 12rpx 0; |
|
color: #707070; |
|
font-size: 28rpx; |
|
.item{ |
|
padding-bottom: 12rpx; |
|
} |
|
.on{ |
|
font-weight: 500; |
|
color: #000; |
|
border-bottom: 6rpx solid #FF6D31; |
|
} |
|
} |
|
.goods-list-box{ |
|
width: 100%; |
|
padding: 32rpx 40rpx; |
|
.goods-item{ |
|
width: 100%; |
|
padding: 32rpx 22rpx 16rpx; |
|
border-radius: 12rpx; |
|
background: #fff; |
|
font-size: 28rpx; |
|
margin-bottom: 32rpx; |
|
.goods-img{ |
|
width: 116rpx; |
|
height: 116rpx; |
|
border-radius: 12rpx; |
|
margin-right: 24rpx; |
|
} |
|
.info-box{ |
|
width: calc(100% - 140rpx); |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-around; |
|
} |
|
.title{ |
|
line-height: 40rpx; |
|
color: #333333; |
|
} |
|
.colG{ |
|
font-size: 22rpx; |
|
color: #b7b7b7; |
|
} |
|
.money{ |
|
color: #FF6D31; |
|
font-weight: 500; |
|
line-height: 40rpx; |
|
} |
|
.btn-box{ |
|
border-top: 2rpx solid #ECECEC; |
|
width: 100%; |
|
padding: 16rpx 0 0; |
|
margin-top: 28rpx; |
|
font-size: 28rpx; |
|
image{ |
|
width: 28rpx; |
|
height: 28rpx; |
|
margin-right: 6rpx; |
|
} |
|
view{ |
|
margin-left: 28rpx; |
|
} |
|
.off-shelf-btn{ |
|
color: #FF6D31; |
|
font-weight: 500; |
|
} |
|
.edit-btn{ |
|
color: #5C96E8; |
|
font-weight: 500; |
|
} |
|
.del-btn{ |
|
color: #B7B7B7; |
|
font-weight: 500; |
|
} |
|
} |
|
} |
|
} |
|
</style>
|
|
|