cashier_app/pageCategory/index/index.vue

<template>
	<view class="safe-page min-page">
		<view class="goods-list u-p-30">
			<view class="u-m-b-32" v-for="(item,index) in pageData.list" :key="index">
				<my-category 
				@del="categoryDel"
				@changeClick="goodsChangeClick"  
				@statusChange="statusChange"
				:index="index" :data="item" 
				:showDetail="pageData.showGoodsDetail"></my-category>
			</view>
			<view class="u-m-t-44" v-if="pageData.list.length>0">
				<my-pagination :page="pageData.query.page"  :size="pageData.query.size" :totalElements="pageData.totalElements"   @change="pageChange"></my-pagination>
				<view style="height: 200rpx;"></view>
			</view>
		</view>	
		
		<!-- 删除弹窗 -->
		<my-model desc="请确保此分类下没有任何商品确认删除?"  ref="delModel" @confirm="delModelConfirm"></my-model>
		
		<!-- 分类修改排序弹窗 -->
		<my-model  ref="goodsSortModel" title="修改排序" >
			<template #desc>
				<view class="u-p-40 u-text-left">
					<view>
						<view class="">排序:</view>
						<view class="u-m-t-24">
							<uni-easyinput type="number"  v-model="sort"  placeholder="请输入排序"></uni-easyinput>
						</view>
					</view>
				</view>
			
			</template>
			<template #btn>
				<view class="stock-btns u-p-b-40">
					<my-button shape="circle"  @tap="goodsSortModelSave">确认修改</my-button>
					<my-button shape="circle" bgColor="#fff" type="default" @tap="goodsSortModelCancel">取消</my-button>
				</view>
			</template>
		</my-model>
		
		<view class="fixed-b">
			<my-button :height="80" shape="circle" showShadow @tap="toAddCategory">新建分类</my-button>
		</view>
	</view>

</template>

<script setup>
	import {
		reactive, ref, watch
	} from 'vue';
	import {onShow,onLoad} from '@dcloudio/uni-app'
	import go from '@/commons/utils/go.js';
	import myCategory from './components/category.vue'
	import infoBox from "@/commons/utils/infoBox.js"
	import { categoryPage,putCategory,delCategory } from '@/http/api/cateGory.js'
	const control=ref(null)
	const delModel=ref(null)
	const goodsSortModel=ref(null)
	let sort=ref(0)
	
	const pageData = reactive({
		showGoodsDetail:false,
		query:{
			page: 1,
			size: 10
		},
		totalElements:0,
		list:[],
		selCategory:''
	})
	

	onLoad(()=>{
		init()
	})
	
	onShow(()=>{
		watchEvent()
	})
	
	function watchEvent(){
		uni.$off('update:pageCategoryIndex')
		uni.$on('update:pageCategoryIndex',(data)=>{
			init()
		})
	}
	
	/**
	 * 获取分类列表
	 */
	async function init() {
		const res= await categoryPage(pageData.query)
		pageData.list=res.records.map(v=>{
			return { ...v }
		})
		pageData.totalElements=res.totalRow
	}
	
	/**
	 * 新建分类
	 */
	function toAddCategory(){
		go.to('PAGES_CATEGORY_EDIT',{type:'add'})
	}
	
	/**
	 * 编辑
	 * @param {Object} index
	 */
	function goodsChangeClick(index){
		const goods = pageData.list[index]
		sort.value = goods.sort
		pageData.selCategory = goods
		goodsSortModel.value.open()
	}
	
	/**
	 * 编辑返回
	 */
	function goodsSortModelCancel(){
		goodsSortModel.value.close()
	}
	
	/**
	 * 分类删除
	 * @param {Object} index
	 */
	let nowCateIndex = null
	function categoryDel(index){
		uni.showModal({
			title: '提示',
			content: '请确保此分类下没有任何商品确认删除?',
			success: res => {
				if(res.confirm){
					const islast=pageData.list.length===1
					delCategory(pageData.list[index].id).then(res=>{
						infoBox.showToast('删除成功')
						if(islast&&pageData.query.page>=1){
							pageData.query.page-=1
						}
						
						init()
					})
				}
			},
			fail: () => {},
			complete: () => {}
		});
	}
	/**
	 * 确认删除
	 */
	function delModelConfirm(){
		console.log('confirm');
		pageData.list.splice(nowCateIndex,1)
		delModel.value.close()
	}
	
	/**
	 * 排序确认修改
	 */
	async function goodsSortModelSave(){
		const res=await putCategory({...pageData.selCategory,sort:sort.value})
		infoBox.showToast('修改成功')
		goodsSortModelCancel()
		init()
	}
	
	/**
	 * 是否启用修改
	 * @param {Object} datas
	 */
	async function statusChange(data){
		const res = await putCategory({...data})
		infoBox.showToast('修改成功')
	}

	/**
	 * 页数改变事件
	 * @param {Object} page
	 */ 
	function pageChange(page) {
		pageData.query.page = page
		init()
	}
	


</script>
<style scoped>
	page{
		background: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.stock-btns{
		padding: 0 100rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	.safe-page{
		background: #F9F9F9;
	}
	.icon-guige{
		width: 42rpx;
		height: 42rpx;
	}
	.bg-fff{
		background-color:#fff;
	}
	.myTabs {
		margin: 0 auto;
		width: 434rpx;
		height: 64rpx;
	}

	.input-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 26rpx;
		background-color: $J-bg-ff;

		.input-main {
			flex: 1;
			display: flex;
			align-items: center;
			height: 64rpx;

			image {
				padding: 22rpx;
				width: 26rpx;
				height: 26rpx;
			}

			input {
				flex: 1;
				font-size: 27rpx;
			}

			::v-deep uni-button {
				font-size: 28rpx;
				color: $my-main-color;
				background: rgba(255, 255, 255, 1);
			}

			::v-deep.uni-easyinput {
				.uni-easyinput__content {
					background-color: $J-bg-f5 !important;
					border-radius: $J-b-r12;

					.uni-easyinput__content-input {
						padding-left: 0 !important;

						.uni-input-input {
							border-radius: $J-b-r12 !important;
							overflow: hidden !important;
						}
					}

					.uni-input-placeholder {
						font-size: 27rpx;
					}

					.uni-icons {
						color: rgba(230, 230, 230, 1) !important;
					}
				}
			}
		}
	}

	.input-icon {
		position: relative;
		z-index: 10;
	}

	.search-button {
		position: absolute;
		right: 0;
		background-color: transparent !important;
		color: transparent !important;
	}
	.states1{
		margin-top: 78rpx;
		.item{
			font-size: 24rpx;
			color: #666;
			margin-right: 70rpx;
			background: #F4F4F4;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
		.item.active{
			background: #E6F0FF;
			color: $my-main-color;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}
	}
	.fixed-b{
		position: fixed;
		left: 110rpx;
		right: 110rpx;
		bottom: 110rpx;
	}
</style>