120 lines
3.2 KiB
Vue
120 lines
3.2 KiB
Vue
<!--
|
||
Jeepay 通用状态切换按钮， 支持switch和badge两个格式， 根据权限进行判断
|
||
参考 jeepay-ui组件 。
|
||
@author terrfly
|
||
@site https://www.jeepay.vip
|
||
@date 2021/5/8 07:18
|
||
-->
|
||
<template>
|
||
<view>
|
||
<template v-if="props.showSwitchType" >
|
||
<switch v-if="vdata.isShowSwitchFlag" :checked="vdata.switchChecked" color="#238FFC" :style="{ transform: 'scale(' + scale + ')', margin: margin }" @change="changeFunc" />
|
||
</template>
|
||
<template v-else>
|
||
|
||
<image v-if="vdata.switchChecked == 1" class="default-image" src="/pageDevice/static/devIconImg/icon-default.svg" mode="scaleToFill" />
|
||
<image v-if="vdata.switchChecked == 0" class="default-image" src="/pageDevice/static/devIconImg/icon-noDefault.svg" mode="scaleToFill" />
|
||
</template>
|
||
</view>
|
||
<JeepayPopupConfirm ref="jeepayPopupConfirmRef" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, reactive, nextTick, watch, onMounted } from "vue"
|
||
const props = defineProps({
|
||
|
||
// 样式参数
|
||
scale: { type: Number, default: 0.8 }, //控制开关大小 倍数 默认.8
|
||
margin: { type: String, default: "0" }, // 控制开关外边距默认0
|
||
|
||
showSwitchType: { type: Boolean, default: false }, // 默认 badge
|
||
|
||
//开关状态, 0-关闭， 1-开启
|
||
state: { type: [Number,String], default: 1 },
|
||
|
||
// 是否显示二次确认
|
||
confirm: { type: Boolean, default: true },
|
||
|
||
confirmTitle: { type: String, default: '确定修改状态？' }, // 二次确认提示信息
|
||
|
||
// updateStateFunc回调事件. 需返回promise
|
||
updateStateFunc: { type: Function },
|
||
|
||
})
|
||
|
||
const jeepayPopupConfirmRef = ref() //提示弹窗
|
||
const emits = defineEmits(["update:state"])
|
||
|
||
onMounted(()=>{
|
||
vdata.switchChecked = props.state == 1
|
||
})
|
||
|
||
const vdata = reactive({
|
||
|
||
isShowSwitchFlag: true , // 用于重新加载组件
|
||
|
||
switchChecked: true, // 是否选中
|
||
})
|
||
|
||
// 监听 props属性
|
||
watch(() => props.state, function(o, n){
|
||
vdata.switchChecked = props.state == 1
|
||
}
|
||
)
|
||
|
||
function changeFunc(e){
|
||
|
||
let changeVal = e.detail.value
|
||
|
||
// 显示弹层
|
||
if(props.confirm){
|
||
jeepayPopupConfirmRef.value.open(props.confirmTitle).then(() => {
|
||
return propsUpdateStateFunc(changeVal ? 1 : 0)
|
||
}).then(() => {
|
||
emits("update:state", changeVal ? 1 : 0)
|
||
reloadSwitch(changeVal)
|
||
}).catch(() => {
|
||
reloadSwitch(!changeVal)
|
||
})
|
||
|
||
}else{ // 调起更新函数
|
||
|
||
propsUpdateStateFunc(changeVal ? 1 : 0).then(() => {
|
||
emits("update:state", changeVal ? 1 : 0)
|
||
reloadSwitch(changeVal)
|
||
}).catch(() => {
|
||
reloadSwitch(!changeVal)
|
||
})
|
||
}
|
||
}
|
||
|
||
// uniapp-switch 组件存在问题， 当用户出发了切换， 那么v-model:checked 绑定的元素不在生效了。
|
||
function reloadSwitch(changeVal){
|
||
|
||
vdata.switchChecked = changeVal
|
||
vdata.isShowSwitchFlag = false
|
||
nextTick(() => vdata.isShowSwitchFlag = true)
|
||
}
|
||
|
||
// props. default app 和小程序有出入，此函数用作兼容。
|
||
// APP default : () => { return (state) => {Promie.resole()} } (小层序认为 default即函数， )
|
||
function propsUpdateStateFunc(state){
|
||
|
||
if(props.updateStateFunc){
|
||
return props.updateStateFunc(state)
|
||
}
|
||
|
||
return Promise.resolve()
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
|
||
.default-image {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
|
||
</style>
|