first

components/JeepayRadioPopupView/JeepayRadioPopupView.vue

@@ -0,0 +1,116 @@
+<!--
+  单选 view 一般用作： form表单内使用 
+  @author terrfly
+  @site https://www.jeepay.vip
+  @date 2022/12/01 16:18
+-->
+<template>
+	<view>
+		<view @tap="show">
+			<!-- 插槽自定义内容 -->
+			<slot name="view" :record="vdata.checkedData">
+				<view class="selected-radio">
+					<view v-if="hasVal()" style="color: black">{{vdata.checkedData?.label}}</view>
+					<view v-else>{{props.label}}</view>
+					<image style="width: 30rpx;height: 30rpx" src="/static/right.svg" mode="scaleToFill" />
+				</view>
+			</slot>
+		</view>
+		<!-- popup 和 tap不能放置在同一个 view下。  -->
+		<view>
+			<JSinglePopup ref="popupRef" :list="props.list"  @confirm="confirmFunc" />
+		</view>
+		
+	</view>
+</template>
+
+<script setup>
+import { ref, reactive, nextTick, watch, onMounted, inject } from "vue"
+
+const popupRef = ref()
+
+// emit 父组件使用： v-model:value="val" 进行双向绑定。
+const emits = defineEmits(['update:value', 'change'])
+
+const props = defineProps({
+ 
+  //绑定的值， 双向绑定
+  value: { type: [String, Number] },
+  
+  // 显示的名字
+  label: { type: [String, Number], default: "请选择" },
+  
+  // 数组
+  list: { type: Array, default: () => [] },
+  
+  // 是否多选框， 默认单选。
+  isCheckbox: { type: Boolean, default: false },
+})
+
+console.log(props.isCheckbox,'isCheckboxisCheckboxisCheckboxisCheckbox');
+
+onMounted(()=>{
+	changePropsVal(props.value)
+})
+
+// 切换时 
+watch(() => props.value, (newVal, oldVal) => {
+    changePropsVal(newVal)
+  }
+)
+
+
+
+function changePropsVal(newVal){
+	let list = props.list.filter(r => r.value == newVal)
+	vdata.checkedData = list.length > 0 ? list[0] : { }
+}
+
+
+const vdata = reactive({
+	
+	checkedData: { } // 当前选择的值
+	
+})
+
+function show(){
+	popupRef.value.open(vdata.checkedData.value)
+}
+
+
+// 选择用户类型完毕
+function confirmFunc(v){
+	vdata.checkedData = v
+	emits("update:value", v.value)
+	if(v.value!==1){
+		emits("change", v.value)
+	}
+}
+
+
+function hasVal(){
+	return vdata.checkedData && vdata.checkedData.label ? true : false
+}
+
+
+
+</script>
+
+<style lang="scss" scoped>
+	
+	
+	.selected-radio {
+	  display: flex;
+	  justify-content: space-between;
+	  align-items: center;
+
+	  font-size: 32rpx;
+	  color: #b3b3b3;
+	  image {
+	    width: 120rpx;
+	    height: 120rpx;
+	  }
+	}
+	
+	
+</style>