bjhedasx/webcode/uni-app/pages/supplierCenter/goodsManage.vue

<template>
	<view class="page">
		<view class="pageMain">
			<view class="topBox">
				<view class="searchBox flex align-center">
					<view class="searchMain flex align-center margin-right-20 padding-left-20">
						<text class="tyIcon-sousuo text-26 text-98 margin-right-20"></text>
						<input class="flex-one text-28 line-height-60" v-model="keyword" placeholder="请输入商品关键词"
							placeholder-class="text-b3" @confirm="search()" />
						<text v-if="keyword"
							class="tyIcon-no padding-right-20 text-right text-32 line-height-60 text-cc"
							@tap="clear"></text>
					</view>
					<view class="text-32 text-fe text-bold line-60" @click="go('/pages/supplierCenter/editGoods')">
						添加商品
					</view>
				</view>
				<view class="tabBox bg-ff flex height-90 padding-lr-40 justify-between">
					<view class=" line-height-90 position-relative text-center"
						:class="index == tabIndex ? 'text-28 text-2f9 text-bold' : 'text-26 txt-33'"
						v-for="(item,index) in tabs" :key="tabIndex" @click="changeTab(index)">
						{{item}}
						<view class="tabLine" v-if="tabIndex == index"></view>
					</view>
				</view>
			</view>
			<view class="listBox">
				<ty-list-list :status="load_status">
					<view class="padding-tb-25 border-bottom-ed" v-for="(item,index) in list" :key="index">
						<view class="flex align-center justify-between">
							<view class="text-24 text-77">创建时间：{{item.show_create_time}}</view>
							<view class="text-26 text-208 text-bold">
								<text>{{item.status_text}}</text>
							</view>
						</view>
						<view class="flex margin-top-15">
							<view class="goodsImg margin-right-15">
								<image :src="item.cover_img" class="width-100p height-100p block" mode="aspectFill">
								</image>
							</view>
							<view style="height: 220rpx;" class="flex flex-direction justify-between flex-one">
								<view class="text-cut-one text-32 text-33 line-50">{{item.name}}</view>
								<view class="flex justify-end">
									<view class="btn" @click="tapDel(item.id)">删除</view>
									<view class="btn margin-left-15" v-if="item.status == 4"
										@click="changeStatus(item.id,1)">下架
									</view>
									<view class="btn margin-left-15" v-if="item.status == 3"
										@click="changeStatus(item.id,2)">上架
									</view>
									<view class="btn margin-left-15"
										@click="go('/pages/supplierCenter/editGoods?id=' + item.id)">编辑</view>
								</view>
							</view>
						</view>
					</view>
				</ty-list-list>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				tabs: ['全部', '展示中', '未上架', '暂存', '待审核', '审核拒绝'],
				tabIndex: 0,
				load_status: '',
				list: [],
			}
		},

		onLoad(options) {

		},
		onShow() {
			this.loadList(1)
		},
		onReachBottom() {
			this.loadList(2)
		},
		methods: {
			clear() {
				this.keyword = '';
				this.search()
			},
			search() {
				this.loadList(1)
			},
			changeTab(i) {
				if (this.tabIndex == i) {
					return;
				} else {
					this.tabIndex = i;
					this.loadList(1)
				}
			},
			loadList(first_page) {
				this.rq.getList('fire/api/Supply/supplyProductList', {
					index: this.tabIndex,
					keyword: this.keyword
				}, {
					that: this,
					first_page
				})
			},
			// 删除
			tapDel(id) {
				this.cn.confirm('确认删除吗?').then(r => {
					if (r.confirm) {
						this.rq.getData('fire/api/Supply/supplyDeleteProduct', {
							product_id: id
						}).then(res => {
							if (res.code == 0) {
								this.loadList(1)
							}
						})
					}
				})
			},
			// 上下架
			changeStatus(id, type) {
				//type  1-下架 2-上架
				var url = ''
				if (type == 1) {
					url = 'fire/api/Supply/supplyOutProduct'
				} else {
					url = 'fire/api/Supply/supplyPutProduct'
				}
				this.rq.getData(url, {
					product_id: id
				}).then(res => {
					if (res.code == 0) {
						this.cn.alert(res.msg).then(()=>{
							this.loadList(1)
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.width-32 {
		width: 32rpx;
	}

	.pageMain {
		padding-top: 193rpx;
	}

	.topBox {
		width: 100vw;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 10;
	}

	.searchBox {
		width: 100vw;
		height: 88rpx;
		background: #2F97FF;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.searchMain {
		flex: 1;
		height: 60rpx;
		background: #F5F5F5;
		border-radius: 33rpx;
	}

	.tabLine {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 20rpx;
		width: 40rpx;
		height: 4rpx;
		background: #2F97FF;
		margin: 0 auto;
	}

	.listBox {
		width: 100vw;
		background: #fff;
		min-height: calc(100vh - 193rpx);
		padding: 0 30rpx calc(30rpx + env(safe-area-inset-bottom));
		box-sizing: border-box;
	}

	.goodsImg {
		width: 220rpx;
		height: 220rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}

	.btn {
		padding: 10rpx 30rpx;
		font-size: 24rpx;
		color: #333;
		background: #fff;
		border-radius: 8rpx;
		border: 2rpx solid #CCCCCC;
	}
</style>