jiuyiUniapp/jiuyi2/pages/shop/store/commodities.vue

<script setup>
	// 商品管理
	import {
		ref,
		reactive,
	} from 'vue'
	import {
		onLoad,
		onUnload,
		onReachBottom,
		onPullDownRefresh
	} from "@dcloudio/uni-app"

	// 顶部导航
	import apex from "@/components/header/apex.vue"
	// api
	import api from '@/api/index.js'
	// 工具库
	import util from '@/common/js/util.js'
	// 产品列表
	const product = reactive({
		list: [],
		pageNum: 1,
		pageSize: 10,
	})

	onLoad(() => {
		// 获取列表
		getList()
		// 开启监听
		addListener()
	})
	
	onUnload(() => {
		// 关闭监听
		removeListener()
	})
	
	onReachBottom(() => {
		// 获取更多商品
		getMoreList()
	})

	onPullDownRefresh(() => {
		// 重载商品列表
		refeshList()
	})

	// 开启监听
	function addListener() {
		uni.$on('updateUserProduct', () => {
			// 重载商品列表
			refeshList()
		})
	}

	// 关闭监听
	function removeListener() {
		uni.$off('updateUserProduct')
	}

	// 重载商品列表
	function refeshList() {
		if (product.list.length >= product.total) return
		product.pageNum++
		getList()
	}

	// 获取更多商品
	function getMoreList() {
		if (product.list.length >= product.total) return
		product.pageNum++
		getList()
	}

	// 请求列表
	function getList() {
		// 
		api.shop.getProductionListByUserId({
			data: {
				pageSize: product.pageSize,
				pageNum: product.pageNum,
			}
		}).then(rs => {
			if (rs.code === 200) {
				if (product.pageNum == 1) product.list.length = 0
				product.list.push(...rs.rows)
				product.total = rs.total
				return
			}
			util.alert({
				content: rs.msg,
				showCancel: false,
			})
		})
	}

	/**
	 * 编辑
	 * @param {Object} item 商品对象
	 */
	function handleEdit(item) {
		uni.navigateTo({
			url: util.setUrl('/pages/release/commodity', {
				id: item.id
			})
		})
	}

	/**
	 * 跳转
	 * @param {String} url 路径
	 */
	function link(url) {
		uni.navigateTo({
			url
		})
	}

	/**
	 * 删除发布的商品
	 * @param {Object} item 商品对象
	 * @param {Object} index 操作的下标
	 */
	function handleRemove(item, index) {
		util.alert({
			content: '确定删除该商品吗？',
		}).then(res => {
			if (!res.confirm) return
			// 删除商品
			api.shop.removeProduct({
				path: [item.id]
			}).then(rs => {
				if (rs.code === 200) {
					product.list.splice(index, 1)
					return
				}
				util.alert({
					content: rs.msg,
					showCancel: false,
				})
			})
		})
	}
</script>

<template>
	<view class="app">
		<apex title="商品管理">
			<template #right>
				<view class="f24" @click="link('/pages/release/commodity')">添加</view>
			</template>
		</apex>

		<view class="listBox oh">
			<view class="item oh mtb20 mlr20 plr20 bfff br20" v-for="(item,index) in product.list" :key="index">
				<!-- 商品信息 -->
				<view class="product line df ptb20">
					<view class="poster wh160">
						<image class="wh160 br10" :src="item.sliderImage.split(',')[0]" mode="aspectFill" />
					</view>

					<view class="info df fdc jcsb f1 ml20">
						<view class="name t2hd c333 f28">{{item.name}}</view>

						<view class="count fs0 c999 f24">销量：{{item.sales}}</view>

						<view class="other df aic">
							<view class="price f1 cFF9B27">
								<text class="f30">价格：</text>
								<text class="f20">￥</text>
								<text class="f30">{{item.price}}</text>
							</view>
							<!-- <view class="f1 c999 f24">库存：×1</view> -->
						</view>
					</view>
				</view>

				<view class="menu ptb20 df jcr">
					<!-- <view class="btn sm bar closeHollow plr30">上架</view> -->
					<!-- <view class="btn sm bar closeHollow plr30">下架</view> -->
					<!-- <view class="btn sm bar closeHollow plr30">改价</view> -->
					<!-- 在没有进行中的订单才能删除 -->
					<view class="btn sm bar closeHollow plr30" @click="handleRemove(item,index)">删除</view>
					<view class="btn sm bar warmHollow plr30" @click="handleEdit(item)">编辑</view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	// 
</style>