57 lines
1.5 KiB
Vue
57 lines
1.5 KiB
Vue
<template>
|
|
<up-popup :round="10" :show="popShow" :closeable="true" @close="close">
|
|
<view class="u-text-center font-bold u-font-32 u-p-t-30">选择状态</view>
|
|
<view style="height: 20rpx;"></view>
|
|
<view class="u-p-30 all-list u-flex u-flex-wrap gap-20">
|
|
<view class="all-list-item" :class="{active:statusItemIndex==statusData.allListSel}" @click="changeAllListSel(statusItemIndex)" v-for="(statusItem,statusItemIndex) in statusData.allList" :key="statusItemIndex">
|
|
{{statusItem.label}}
|
|
</view>
|
|
</view>
|
|
<view class="u-flex u-p-t-30 u-p-b-30 u-p-l-20 u-p-r-20 gap-20">
|
|
<up-button @click="close">取消</up-button>
|
|
<up-button type="primary" @click="confirm">确定</up-button>
|
|
</view>
|
|
</up-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, watch } from 'vue';
|
|
const props=defineProps({
|
|
show:{
|
|
type:Boolean,
|
|
default:false
|
|
}
|
|
})
|
|
|
|
let popShow=ref(props.show)
|
|
const emits=defineEmits(['update:show','close','confirm'])
|
|
function close(){
|
|
popShow.value=false
|
|
}
|
|
function confirm(){
|
|
popShow.value=false
|
|
}
|
|
watch(()=>props.show,(newval)=>{
|
|
popShow.value=newval
|
|
})
|
|
watch(()=>popShow.value,(newval)=>{
|
|
emits('update:show',newval)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.all-list-item{
|
|
text-align: center;
|
|
width: 156rpx;
|
|
white-space: nowrap;
|
|
color: #666;
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 8rpx;
|
|
transition: all .2s ease-in-out;
|
|
border: 1px solid #eee;
|
|
&.active {
|
|
color: $my-main-color;
|
|
border-color: $my-main-color;
|
|
}
|
|
}
|
|
</style> |