Files
barter-app/pages/goods/management.vue

114 lines
2.4 KiB
Vue

<template>
<view class="content">
<!-- 分类 -->
<view class="tabs">
<view class="item" :class="{'show': status == '1'}" @click="onTabs('1')">已上架</view>
<view class="item" :class="{'show': status == '3'}" @click="onTabs('3')">已下架</view>
<view class="item" :class="{'show': status == '0'}" @click="onTabs('0')">审核中</view>
<view class="item" :class="{'show': status == '2'}" @click="onTabs('2')">已驳回</view>
</view>
<!-- 优选商品 -->
<goodsList :list="goods" priceType="CNY" :status='status' toast="暂无产品权证">
<template v-slot:statistics="goods">
<view>库存{{goods.value.stock}}</view>
</template>
<template v-slot:footer="goods">
<view class="footer-btns">
<button class="button-item" size="mini">销毁</button>
<button class="button-item" size="mini">下架</button>
</view>
</template>
</goodsList>
</view>
</template>
<script>
import { managesGoodsIndex } from '@/apis/interfaces/goods'
import goodsList from '@/components/goods-list/goods-list'
export default {
components: {
goodsList
},
data() {
return {
status : 1,
goods : [],
pages : {}
};
},
onShow() {
this.getList()
},
methods: {
// tabs
onTabs(value){
if(value == this.status) return
this.status = value
this.getList()
},
// 权证列表
getList(){
managesGoodsIndex({
status: this.status
}).then(res => {
this.goods = res.data
this.pages = res.page
console.log(res)
})
}
},
onNavigationBarButtonTap() {
this.$Router.push({name: 'GoodsMagAdd'})
}
}
</script>
<style lang="scss" scoped>
.content{
padding-top: 90rpx;
}
// tabs
.tabs{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
display: flex;
justify-content: space-around;
background: white;
padding: 15rpx 0;
font-size: $title-size-lg;
color: $text-gray;
.item{
height: 60rpx;
line-height: 60rpx;
&.show{
color: $text-price;
border-bottom: solid 4rpx $text-price;
}
}
}
// 按钮组
.footer-btns{
display: flex;
justify-content: space-between;
padding-top: $padding/2;
margin-left: -10rpx;
margin-right: -10rpx;
.button-item[size='mini']{
padding: 0;
margin: 0 10rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 0;
width: calc(50% - 20rpx);
background: $border-color-lg;
color: $text-gray;
&::after{
border: none;
}
}
}
</style>