同步代码

pageGoodsGroup/edit-group-goods/components/category.vue

@@ -0,0 +1,106 @@
+<template>
+	<up-picker :show="show" keyName="name" @confirm="confirm" :columns="category.list" @close="close" @cancel="close" :closeOnClickOverlay="true"></up-picker>
+</template>
+
+<script setup>
+	import {
+		ref, warn, watch, watchEffect,
+		onMounted,reactive
+	} from 'vue';
+	import {$tbShopCategory} from '@/http/yskApi/goods.js'
+	const emite=defineEmits(['change','update:isShow','confirm'])
+	const props = defineProps({
+		showAllText:{
+			type:Boolean,
+			default:true
+		},
+		width: {
+			type: [Number, String],
+			default: 264
+		},
+		height: {
+			type: [Number, String],
+			default: 420
+		},
+		right: {
+			type: [Number, String],
+			default: 30
+		},
+		bottom: {
+			type: [Number, String],
+			default: 0
+		},
+		isShow:{
+			type:Boolean,
+			default:false
+		}
+	})
+	
+	let show = ref(props.isShow)
+	
+	watch(()=>show.value,(newval)=>{
+		emite('change',newval)
+		emite('update:isShow',newval)
+	})
+	watch(()=>props.isShow,(newval)=>{
+		console.log(newval);
+		show.value=newval
+	})
+	
+	function confirm(e){
+		console.log(e.value[0]);
+		show.value = false
+		emite('confirm',e.value[0])
+	}
+	function close() {
+		console.log('close');
+		show.value = false
+	}
+	
+	
+	const category=reactive({
+		list:[],
+	})
+	onMounted(()=>{
+		$tbShopCategory({
+			page:0,size:200
+		}).then(res=>{
+			res.content.unshift({
+				name:'全部',
+				id:'',
+				childrenList:[]
+			})
+			category.list=[res.content.reduce((prve, cur) => {
+				prve.push(...[{
+					...cur,
+					name: '' + cur.name,
+					childrenList:undefined
+				}, ...cur.childrenList.map(v => {
+					return {
+						...v,
+						name: '' + v.name
+					}
+				})])
+				return prve
+			}, [])]
+			console.log(category.list);
+		})
+	})
+</script>
+
+<style lang="scss" scoped>
+	.category {
+		background: #FFFFFF;
+		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
+		border-radius: 14rpx 14rpx 14rpx 14rpx;
+		position: fixed;
+		font-size: 24rpx;
+		color: #333;
+		.list{
+			box-sizing: border-box;
+			.item{
+				padding: 24rpx 24rpx 24rpx 48rpx;
+			}
+		}
+	}
+</style>