first

2024-09-10 10:49:08 +08:00
parent b5fd06b800
commit dd4f5938da
6391 changed files with 722800 additions and 0 deletions
--- a/components/JeepayStateSwitch/JeepayStateSwitch.vue
+++ b/components/JeepayStateSwitch/JeepayStateSwitch.vue
@@ -0,0 +1,119 @@
+<!--
+  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>