first

components/JeepayBizsPopupView/JeepayBizsPopupView.vue

@@ -0,0 +1,144 @@
+<!--
+   通用的选择某项业务，  一般用作修改页。 
+   目前支持：  门店 和  应用 
+  @author terrfly
+  @site https://www.jeepay.vip
+  @date 2022/12/08 14:18
+-->
+<template>
+	<view class="details-wrapper" style="align-items: flex-start; padding-top: 40rpx">
+		<view v-if="props.hasTitle" class="details-title">
+			<slot name="title">{{ bizTypeMap[props.bizType].title }}</slot>
+		</view>
+		<view @tap="show">
+			<view class="sub-title">
+				<view class="details-info single-text-beyond">
+					<text :class="{ 'text-gray': vdata.selectedRow[bizTypeMap[props.bizType].nameKey] ? false : true }">
+						{{ vdata.selectedRow[bizTypeMap[props.bizType].nameKey] || bizTypeMap[props.bizType].nameDef }}
+					</text>
+				</view>
+				<image src="/static/iconImg/icon-arrow-small.svg" mode="scaleToFill" v-if="isIcon" />
+			</view>
+			<view class="sub-info details-info single-text-beyond">{{ vdata.selectedRow[bizTypeMap[props.bizType].id] }}</view>
+		</view>
+	</view>
+	<view>
+		<JeepayBizinfoSelect ref="jeepayBizinfoSelectRef" :bizType="props.bizType" :isCheckbox="false" :range="props.range" :ifCode="props.ifCode" :addUse="props.addUse" />
+		<JeepayIncomingBizinfoSelect ref="jeepayIncomingBizinfoSelectRef" :bizType="props.bizType" :range="props.range" :ifCode="props.ifCode" />
+	</view>
+</template>
+
+<script setup>
+import { ref, reactive, nextTick, watch, onMounted } from 'vue';
+
+const jeepayBizinfoSelectRef = ref();
+const jeepayIncomingBizinfoSelectRef = ref();
+
+const bizTypeMap = {
+	store: { title: '选择门店', nameKey: 'storeName', nameDef: '请选择门店', id: 'storeId' },
+	mchApp: { title: '选择应用', nameKey: 'appName', nameDef: '请选择应用', id: 'appId' },
+	isvApp: { title: '选择渠道', nameKey: 'isvName', nameDef: '请选择渠道', id: 'isvNo' },
+	incomingApp: { title: '发起进件', nameKey: 'name', nameDef: '请选择场景', id: 'range' }
+};
+
+// emit 父组件使用： v-model:value="val" 进行双向绑定。
+const emits = defineEmits(['update:value', 'update:showName', 'change']);
+
+const props = defineProps({
+	// 是否包含 标题部分
+	hasTitle: { type: Boolean, default: true },
+
+	//绑定的值， 双向绑定
+	value: { type: [String, Number] },
+
+	// 仅仅用作修改的回显
+	showName: { type: [String, Number] },
+
+	// 业务类型： 默认门店
+	bizType: { type: String, default: 'store' },
+	range: { type: String, default: 0 },
+	ifCode: { type: String, default: '' },
+	isIcon: { type: Boolean, default: true },
+	addUse: { type: Boolean, default: false }
+});
+
+onMounted(() => {
+	if (props.value) {
+		vdata.selectedRow[bizTypeMap[props.bizType].id] = props.value;
+	}
+	if (props.showName) {
+		vdata.selectedRow[bizTypeMap[props.bizType].nameKey] = props.showName;
+	}
+});
+
+// 切换时
+watch(
+	() => props.value,
+	(newVal, oldVal) => {
+		vdata.selectedRow[bizTypeMap[props.bizType].id] = newVal;
+	}
+);
+
+// 切换时
+watch(
+	() => props.showName,
+	(newVal, oldVal) => {
+		vdata.selectedRow[bizTypeMap[props.bizType].nameKey] = newVal;
+	}
+);
+
+const vdata = reactive({
+	// 当前选择行
+	selectedRow: {}
+});
+
+function show() {
+	jeepayBizinfoSelectRef.value.open().then((selectedRow) => {
+		vdata.selectedRow = selectedRow || {};
+
+		emits('update:value', vdata.selectedRow[bizTypeMap[props.bizType].id]);
+		emits('update:showName', vdata.selectedRow[bizTypeMap[props.bizType].nameKey]);
+		emits('change', vdata.selectedRow[bizTypeMap[props.bizType].id]);
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.details-wrapper {
+	display: flex;
+	align-items: center;
+	font-size: 32rpx;
+	background-color: #fff;
+	.details-title {
+		width: 180rpx;
+		color: #4c4c4c;
+	}
+	.details-info {
+		flex-grow: 1;
+		width: 405rpx;
+	}
+	image {
+		width: 108rpx;
+		height: 100rpx;
+	}
+
+	.sub-title {
+		flex: 1;
+		display: flex;
+		image {
+			width: 108rpx;
+			height: 40rpx;
+		}
+	}
+	.sub-info {
+		margin-top: 20rpx;
+		font-size: 30rpx;
+		color: #a1a1a1;
+		padding-bottom: 20rpx;
+	}
+
+	.text-gray {
+		color: #b3b3b3;
+	}
+}
+</style>