yunshengtai-uniapp/pages/user/goodsManage/index.vue

<template>
	<view class="goodsManage-page">
		<view class="nav acea-row row-around">
		  <view class="item" :class="{ on: type === 1 }" @click="changeType(1)">
		    <view>出售中</view>
		  </view>
		  <view class="item" :class="{ on: type === 0 }" @click="changeType(0)">
		    <view>待上架</view>
		  </view>
		</view>
		<view class="goods-list-box">
			<view class="no-order" v-if="goodsList.length == 0"><image src="https://download.cyjyyjy.com/no-goods.png"></image></view>
			<view class="goods-item" v-else v-for="item in goodsList" :key="item" @click="goGoodsCon(item)">
				<view class="item-top acea-row">
					<image class="goods-img" :src="item.image" mode="aspectFill"></image>
					<view class="info-box">
						<view class="title line1">{{item.storeName}}</view>
						<view class="colG">规格 {{item.unitName}}</view>
						<view class="price-box acea-row row-between-wrapper">
							<view class="money">￥{{item.price}}</view>
							<view class="colG">库存：{{item.stock}}</view>
						</view>
					</view>
				</view>
				<view class="btn-box acea-row row-right">
					<view class="edit-btn acea-row row-middle" @click="toAddGoods(item)" v-if="type == 0">
						<image src="../../../static/images/edit-goods.png"></image>
						<text>编辑商品</text>
					</view>
					<view class="off-shelf-btn acea-row row-middle" @tap.stop="showProduct(item)">
						<image src="../../../static/images/off-shelf.png" :class="type == 0 ? 'flip' : ''"></image>
						<text>{{type == 1 ? '下架' : '上架' }}商品</text>
					</view>
					<view class="del-btn acea-row row-middle" v-if="type == 0" @click="delProduct(item)">
						<image src="../../../static/images/del-goods.png"></image>
						<text>删除商品</text>
					</view>
				</view>
			</view>
		</view>
		<view class="add-btn" @click="toAddGoods('')">新增商品</view>
	</view>
</template>

<script>
	import { getProducts, prodcutShow ,prodcutDel } from '@/api/store.js'
	export default{
		data(){
			return {
				type: 1,
				goodsList: [],
				page: 1,
				loading: true
			}
		},
		onShow() {
			this.getProducts()
		},
		onReachBottom() {
		  this.getProducts()
		},
		onPullDownRefresh() {
			this.goodsList = []
			this.page = 1
			this.loading = true
			this.getProducts()
		},
		methods:{
			goGoodsCon(item) {
				if(this.type == 1){
					this.$yrouter.push({
					  path: "/pages/shop/GoodsCon/index",
					  query: {
					    id: item.id
					  }
					});
				}
			},
			getProducts(){
				let data = {
					orderType: 'SELL',
					limit: 200,
					page: 1,
					isShow: this.type
				}
				if(this.loading){
					getProducts(data).then((res)=>{
						if(res.success){
							if(this.page > 1){
								this.goodsList = this.goodsList.concat(res.data) 
							} else{
								this.goodsList = res.data
							}
							this.loading = res.data.length >= this.limit
							uni.stopPullDownRefresh()
						}
					})
				}
			},
			// 商品上下架
			showProduct(item){
				let data = {
					id: item.id,
					status: this.type
				}
				prodcutShow(data).then((res)=>{
					if(res.success){
						uni.showToast({
							title: res.msg
						})
						this.changeType(this.type)
					}
				})
			},
			//删除商品
			delProduct(item){
				prodcutDel({id: item.id}).then((res)=>{
					if(res.success){
						uni.showToast({
							title: res.msg
						})
						this.changeType(this.type)
					}
				})
			},
			changeType(idx){
				this.type = idx
				this.goodsList = []
				this.page = 1
				this.loading = true
				this.getProducts();
			},
			//编辑商品，新增或商品
			toAddGoods(item){
				let id = item.id || ''
				this.$yrouter.push({
				  path: '/pages/life/addGoods/index',
					query:{
						id: id
					}
				})
			},
		},
		
	}
</script>

<style lang="less">
	.goodsManage-page{
		width: 100%;
		min-height: 100vh;
		background: #EEEEEE;
		position: relative;
	}
	.no-order{
		padding: 90rpx 0;
		width: 100%;
		text-align: center;
			image{
				width: 422rpx;
				height: 508rpx;
			}
	}
	.nav{
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		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: 90rpx 40rpx 126rpx;
		.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;
				}
				.flip{
					transform: rotate(180deg);
				}
				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;
				}
			}
		}
	}
	.add-btn{
		width: 670rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		background: linear-gradient(134deg, #FFA782 0%, #FF6D31 100%);
		border-radius: 40rpx;
		position: absolute;
		bottom: 50rpx;
		left: 50%;
		margin-left: -335rpx;
	}
</style>