106 lines
1.9 KiB
Vue
106 lines
1.9 KiB
Vue
<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> |