market-app-ui/pages/goodsManage/oneMarket/goodsHandle.vue

<template>
	<view>
		<navigation-bar :title="title" background-color="#fff" front-color="#000000" />

		<u-button v-if="active==1" style="width: 20%;margin-left: 6px;" type="primary" @click="addGoods()">新增商品</u-button>
		<u-list v-if="active==1" class="list" width="100%" @scrolltolower="scrolltolower1">
			<u-list-item v-for="(item, index) in goods" :key="index">
				<view class="card" ><!-- @click="toDetails(item.id)" -->
					<view class="card-body">
						<image
							src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg"
							mode="aspectFill" class="img">
						</image>
						<view class="txt">
							<view style="font-size: 30rpx;height: 140rpx;">{{item.goodsName}}</view>
							<view class="piece">{{item.price}} 元</view>
						</view>
						<u-button class="custom-style" type="primary" @click="editGoods(item.id)">编辑</u-button>
						<u-button class="custom-style" type="error" @click.stop="deleteGoods(item.id)">删除</u-button>
					</view>
				</view>
			</u-list-item>
			<u-loadmore v-if="goods" :status="loadmoreStatus" margin-top="20" @loadmore="clickLoadMore" margin-bottom="50" />
		</u-list>

		<u-list v-if="active==2" class="list" width="100%" @scrolltolower="scrolltolower2">
			<u-list-item v-for="(item, index) in orders" :key="index">
				<view class="card" ><!-- @click="toDetails(item.id)" -->
					<view class="card-body">
						<image
							src="https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg"
							mode="aspectFill" class="img">
						</image>
						<view class="txt">
							<view style="font-size: 30rpx;height: 140rpx;">{{item.goodsName}}</view>
							<view class="piece">{{item.price}} 元</view>
						</view>
						<u-button class="custom-style" type="primary" @click="orderConfirm(item.id,1)">确认</u-button>
						<u-button class="custom-style" type="warning" @click="orderConfirm(item.id,2)">拒绝</u-button>
					</view>
				</view>
			</u-list-item>
			<u-loadmore v-if="orders" :status="loadmoreStatus" margin-top="20" @loadmore="clickLoadMore" margin-bottom="50" />
		</u-list>

		<order v-if="active==3"></order>
		<view class="tab">
			<view :class="active==item.id ? 'active-btn' : 'tabBtn'" v-for="item in tabList" :key="item.id" @click="tabClick(item.id)">{{item.name}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadmoreStatus: 'loadmore',
				form: {},
				goods: [],
				orders: [],
				item: {},
				active: 1,
				title: '商品管理',
				tabList: [
					{
						id: 1,
						name: "商品列表"
					},
					{
						id: 2,
						name: "订单列表"
					}
				],

			}
		},
		onLoad() {
			this.getTransitList()
		},
		methods: {
			// 商品列表
			getTransitList() {
				this.form = {
					isOrders: 0,//是否已被下单[0=未被下单,1=已被下单]
					//enterpriseConfirm: ,//商铺确认情况[0=待确认,1=已确认,2=拒绝]
					goodsStatus: 1,//商品状态(0=下架,1=在售)
				}
				this.http.request({
					url: '/level-one-server/app/TbGoodsTransit/getTransitList',
					data: this.form,
					//method: 'POST',
					success: resp => {
						console.log('resp',resp)
						this.goods = resp.data.data;
						this.goods.forEach((item, index) => {
							if (index === this.goods.length - 1) {
								this.loadmoreStatus = 'nomore'
							} else {
								this.loadmoreStatus = 'loadmore'
							}
						})
					}
				});
			},
			// 删除商品
			deleteGoods(id) {
				console.log('id',id)
				this.http.request({
					url: '/level-one-server/app/TbGoodsTransit/deleteById',
					data: {id : id},
					method: 'POST',
					success: resp => {
						console.log('删除商品',resp)
					}
				});
			},
			// 新增商品
			addGoods() {
				this.$common.to('/pages/goodsManage/oneMarket/addGoods')
			},
			// 编辑商品
			editGoods(id) {
				this.$common.to('/pages/goodsManage/oneMarket/editGoods?id='+id)
			},
			scrolltolower1() {
				this.getTransitList()
			},

			// 订单列表
			getOrderTransitList() {
				this.form = {
					isOrders: 1,//是否已被下单[0=未被下单,1=已被下单]
					enterpriseConfirm: 0,//商铺确认情况[0=待确认,1=已确认,2=拒绝]
					goodsStatus: 1,//商品状态(0=下架,1=在售)
				}
				this.http.request({
					url: '/level-one-server/app/TbGoodsTransit/getTransitList',
					data: this.form,
					method: 'POST',
					success: resp => {
						console.log('resp',resp)
						this.orders = resp.data.data;
						/* this.orders.forEach((item, index) => {
							if (index === this.orders.length - 1) {
								this.loadmoreStatus = 'nomore'
							} else {
								this.loadmoreStatus = 'loadmore'
							}
						}) */
					}
				});
			},
			// 商家确认
			orderConfirm(id,status) {
				this.form = {
					id: id,
					//isOrders: 0,//是否已被下单[0=未被下单,1=已被下单]
					enterpriseConfirm: status,//商铺确认情况[0=待确认,1=已确认,2=拒绝]
					//goodsStatus: 1,//商品状态(0=下架,1=在售)
				}
				this.http.request({
					url: '/level-one-server/app/TbGoodsTransit/update',
					data: this.form,
					method: 'POST',
					success: resp => {
						console.log('resp',resp)
						uni.showToast({ title: '操作成功' });
					}
				});
			},
			scrolltolower2() {
				this.getTransitList()
			},



			change(index) {
				console.log(index)
				this.active = index
			},
			tabClick(id) {
				this.active = id
				if(id==1) {
					this.title='商品管理'
					this.getTransitList()
				}else if(id==2) {
					this.title='订单确认'
					this.getOrderTransitList()
				}
			}
		}
	}
</script>

<style>
	.custom-style {
		width: 20%;
		height: 100rpx;
		font-size: 20rpx;
	}
	.list {
		height: 90%;
		border-radius: 10rpx;
		background-color: #fff;
	}

	.card {
		padding: 10rpx;
	}

	.card-body {
		display: flex;
		height: 300rpx;
		width: 100%;
		/* border: #888 1rpx solid; */
		box-shadow:  1rpx 1rpx #888;
		border-radius: 10rpx;
	}

	.img {
		height: 300rpx;
		width: 300rpx;
		margin-right: 10rpx;
	}

	.txt {
		padding: 10rpx;
		width: 300rpx;
	}

	.piece {
		margin: 50rpx 10rpx;
		color: red;
		position: relative;
		top: 50rpx;
		/* left: 5rpx; */
	}
	.tab{
		position: absolute;
		bottom: 1rpx;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: #CFCFCF 1rpx solid;
	}

	.tabBtn{
		width: 35%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 30rpx;
	}
	.active-btn{
		width: 35%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		background-color: #00BFFF;
	}
</style>