From 109dc41604470ed7d6d04be4072303dcf11f5a75 Mon Sep 17 00:00:00 2001
From: aihe <961836564@qq.com>
Date: Mon, 11 Dec 2023 03:04:55 +0800
Subject: [PATCH] uu

---
 common/custom.scss                            |  11 ++
 .../buns-country-sheet/buns-country-sheet.vue |  14 +-
 .../buns-paytype-sheet/buns-paytype-sheet.vue |  15 +-
 .../buns-revtime-sheet/buns-revtime-sheet.vue |  11 --
 .../buns-stockroom-sheet.vue                  |  13 +-
 components/buns-way-sheet/buns-way-sheet.vue  |  13 +-
 components/tpx-select/content-items.vue       |  90 ++++++++++++
 .../tpx-select/default-select-input.vue       |  75 ++++++++++
 components/tpx-select/tpx-select.vue          | 131 ++++++++++++++++++
 pages/user/certification.vue                  |   9 +-
 10 files changed, 321 insertions(+), 61 deletions(-)
 create mode 100644 components/tpx-select/content-items.vue
 create mode 100644 components/tpx-select/default-select-input.vue
 create mode 100644 components/tpx-select/tpx-select.vue

diff --git a/common/custom.scss b/common/custom.scss
index 35fc7e6..65b0e5c 100644
--- a/common/custom.scss
+++ b/common/custom.scss
@@ -12,6 +12,17 @@
 	flex-direction: column;
 	align-items: center;
 }
+.com-chk-icon{
+		position: relative;
+		&::after {
+		position: absolute;
+		content: ' ';
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+	}
+}
 .com-section{
 	position: relative;
 	font-size: 32rpx;
diff --git a/components/buns-country-sheet/buns-country-sheet.vue b/components/buns-country-sheet/buns-country-sheet.vue
index 1f15836..3c4e145 100644
--- a/components/buns-country-sheet/buns-country-sheet.vue
+++ b/components/buns-country-sheet/buns-country-sheet.vue
@@ -18,7 +18,7 @@
 							<u-col span="10">
 								<u-text size="28" :text="dlCurrent.item.title"></u-text>
 							</u-col>
-							<view span="2" class="chk-icon">
+							<view span="2" class="com-chk-icon">
 								<u-checkbox-group>
 									<u-checkbox :checked="dlCurrent.checked" shape="circle" size="32" activeColor="#B12D29"></u-checkbox>
 								</u-checkbox-group>
@@ -99,15 +99,5 @@
 	.shet-cont{
 		padding: 10rpx 0 30rpx 0;
 	}
-	.chk-icon{
-		position: relative;
-		&::after {
-			position: absolute;
-			content: ' ';
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-		}
-	}
+	
 </style>
\ No newline at end of file
diff --git a/components/buns-paytype-sheet/buns-paytype-sheet.vue b/components/buns-paytype-sheet/buns-paytype-sheet.vue
index ab08443..71eed94 100644
--- a/components/buns-paytype-sheet/buns-paytype-sheet.vue
+++ b/components/buns-paytype-sheet/buns-paytype-sheet.vue
@@ -14,7 +14,7 @@
 										<u-col span="10">
 											<u-text size="30" :text="dlCurrent.item.title"></u-text>
 										</u-col>
-										<view v-if="dlCurrent.item.val != payTypeEnum.postMonth" span="2" class="chk-icon">
+										<view v-if="dlCurrent.item.val != payTypeEnum.postMonth" span="2" class="com-chk-icon">
 											<u-checkbox-group>
 												<u-checkbox :checked="dlCurrent.checked" shape="circle" size="32" activeColor="#B12D29"></u-checkbox>
 											</u-checkbox-group>
@@ -36,7 +36,7 @@
 													<u-col span="10">
 														{{caCurrent.item.title}}
 													</u-col>
-													<view span="2" class="chk-icon">
+													<view span="2" class="com-chk-icon">
 														<u-checkbox-group>
 															<u-checkbox :checked="caCurrent.checked" shape="circle" size="32" activeColor="#B12D29"></u-checkbox>
 														</u-checkbox-group>
@@ -156,17 +156,6 @@
 	.shet-cont{
 		padding: 10rpx 0 30rpx 0;
 	}
-	.chk-icon{
-		position: relative;
-		&::after {
-			position: absolute;
-			content: ' ';
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-		}
-	}
 	.pay-item {
 		margin-bottom: 30rpx;
 		padding: 20rpx 30rpx;
diff --git a/components/buns-revtime-sheet/buns-revtime-sheet.vue b/components/buns-revtime-sheet/buns-revtime-sheet.vue
index 316e29b..331a9ee 100644
--- a/components/buns-revtime-sheet/buns-revtime-sheet.vue
+++ b/components/buns-revtime-sheet/buns-revtime-sheet.vue
@@ -167,17 +167,6 @@
 		display: flex;
 		flex-direction: column;
 	}
-	.chk-icon{
-		position: relative;
-		&::after {
-			position: absolute;
-			content: ' ';
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-		}
-	}
 	.day-item{
 		height: 100rpx;
 		line-height: 100rpx;
diff --git a/components/buns-stockroom-sheet/buns-stockroom-sheet.vue b/components/buns-stockroom-sheet/buns-stockroom-sheet.vue
index 5657f92..2a40ec3 100644
--- a/components/buns-stockroom-sheet/buns-stockroom-sheet.vue
+++ b/components/buns-stockroom-sheet/buns-stockroom-sheet.vue
@@ -21,7 +21,7 @@
 										<u-col span="10">
 											<u-text size="28" :text="dlCurrent.item.title"></u-text>
 										</u-col>
-										<view span="2" class="chk-icon">
+										<view span="2" class="com-chk-icon">
 											<u-checkbox-group>
 												<u-checkbox :checked="dlCurrent.checked" shape="circle" size="32" activeColor="#B12D29"></u-checkbox>
 											</u-checkbox-group>
@@ -137,17 +137,6 @@
 	.shet-cont{
 		padding: 10rpx 0 30rpx 0;
 	}
-	.chk-icon{
-		position: relative;
-		&::after {
-			position: absolute;
-			content: ' ';
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-		}
-	}
 	.w-tem {
 		margin-top: 20rpx;
 		position: relative;
diff --git a/components/buns-way-sheet/buns-way-sheet.vue b/components/buns-way-sheet/buns-way-sheet.vue
index 27ed84f..2a4bf9c 100644
--- a/components/buns-way-sheet/buns-way-sheet.vue
+++ b/components/buns-way-sheet/buns-way-sheet.vue
@@ -18,7 +18,7 @@
 							<u-col span="10">
 								<u-text size="28" :text="dlCurrent.item.title"></u-text>
 							</u-col>
-							<view span="2" class="chk-icon">
+							<view span="2" class="com-chk-icon">
 								<u-checkbox-group>
 									<u-checkbox :checked="dlCurrent.checked" shape="circle" size="32" activeColor="#B12D29"></u-checkbox>
 								</u-checkbox-group>
@@ -100,15 +100,4 @@
 		min-height: 500rpx;
 		padding: 10rpx 0 30rpx 0;
 	}
-	.chk-icon{
-		position: relative;
-		&::after {
-			position: absolute;
-			content: ' ';
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-		}
-	}
 </style>
\ No newline at end of file
diff --git a/components/tpx-select/content-items.vue b/components/tpx-select/content-items.vue
new file mode 100644
index 0000000..7bba628
--- /dev/null
+++ b/components/tpx-select/content-items.vue
@@ -0,0 +1,90 @@
+<template>
+	
+	<view class="">
+		<view class="">
+			<tpx-checkitems :list="list" :value="value" v-slot="dlCurrent" :min-checked="minChecked" :type="type" 
+				@onChange="handleDataItemChange"
+			>
+				<view slot :class="`slt-item ${dlCurrent.checked?'active':''}`">
+					<u-row justify="between">
+						<view>
+							{{ dlCurrent.item.title }}
+						</view>
+						<view v-if="dlCurrent.checked">
+							<u-icon name="checkbox-mark" size="32" :bold="true" 
+								:custom-style="`${dlCurrent.checked?'color:#B12D29;':''}`"
+							></u-icon>
+						</view>
+					</u-row>
+				</view>
+			</tpx-checkitems>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		// computed: {
+		// 	filDataList() {
+		// 		return []
+		// 	},
+		// },
+		props: {
+			minChecked:  {
+				default () {
+					return 1
+				}
+			},
+			type:  {
+				default () {
+					return "single"
+				}
+			},
+			show: {
+				default () {
+					return false
+				}
+			},
+			value: {
+				default () {
+					return ''
+				}
+			},
+			list: {
+				default () {
+					return []
+				}
+			}
+		},
+		data() {
+			return {
+				
+			}
+		},
+		created() {
+		},
+		onHide() {
+
+		},
+		destroyed() {},
+
+		methods: {
+			handleDataItemChange(val) {
+				this.$emit('onChange', val)
+				this.$emit('update:value', val)
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.slt-item{
+		height: 80rpx;
+		line-height: 80rpx;
+		font-size: 28rpx;
+		&.active{
+			font-weight: 600;
+			color: $uni-color-primary;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/components/tpx-select/default-select-input.vue b/components/tpx-select/default-select-input.vue
new file mode 100644
index 0000000..42a2ea7
--- /dev/null
+++ b/components/tpx-select/default-select-input.vue
@@ -0,0 +1,75 @@
+<template>
+	<view :class="contClass" style="margin-top: 0;">
+		<u-row>
+			<view style="flex: 1;">
+				<u-text :text="leftText" size="28" :bold="true"></u-text>
+			</view>
+			<u-row>
+				<u-icon size="22" :name="`${show?'arrow-up':'arrow-down'}`" color="#333"></u-icon>
+			</u-row>
+		</u-row>
+	</view>
+</template>
+
+<script>
+	export default {
+		computed: {
+			leftText() {
+				let str = ''
+				if(this.value) {
+					const curItem = this.list.filter(item=> item.val == this.value)[0] || {}
+					curItem.title && (str = curItem.title)
+				} else {
+					str = this.placeholder
+				}
+				return str
+			},
+		},
+		props: {
+			contClass: {
+				default(){
+					return 'blcok-grey radius-20 '
+				}
+			},
+			placeholder: {
+				default(){
+					return ''
+				}
+			},
+			show: {
+				default(){
+					return false
+				}
+			},
+			value: {
+				default(){
+					return ''
+				}
+			},
+			list: {
+				default(){
+					return []
+				}
+			}
+		},
+		data() {
+			return {
+				
+			}
+		},
+		created() {
+
+		},
+		onHide() {
+
+		},
+		destroyed() {},
+
+		methods: {
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	
+</style>
\ No newline at end of file
diff --git a/components/tpx-select/tpx-select.vue b/components/tpx-select/tpx-select.vue
new file mode 100644
index 0000000..9bb02db
--- /dev/null
+++ b/components/tpx-select/tpx-select.vue
@@ -0,0 +1,131 @@
+<template>
+	<view class="" style="position: relative;">
+		<view @click="handleSelectSwitch">
+			<slot v-if="customInput"></slot>
+			<default-select-input v-if="!customInput" :placeholder="placeholder" :show="show" :list="list" :value="value"></default-select-input>
+		</view>
+		
+		<view v-if="mode == modeEnum.sheet">
+			<tpx-dialog :show="show" :title="title || placeholder" @onClose="handleSelectSwitch">
+				<content-items :value="value" :list="list" :minChecked="minChecked" :type="type" 
+					@onChange="handleDataItemChange"
+				></content-items>
+			</tpx-dialog>
+			
+		</view>
+		
+		<view v-if="mode == modeEnum.drop && show" class="md-drop-cont">
+			<content-items :value="value" :list="list" :minChecked="minChecked" :type="type"
+				@onChange="handleDataItemChange"
+			></content-items>
+		</view>
+	</view>
+	
+</template>
+
+<script>
+	import ContentItems from "./content-items"
+	import DefaultSelectInput from "./default-select-input"
+	const modeEnum = {
+		sheet: 'sheet',
+		drop: 'drop'
+	}
+	
+	export default {
+		// computed: {
+		// 	filDataList() {
+		// 		return []
+		// 	},
+		// },
+		components: {
+			ContentItems, DefaultSelectInput
+		},
+		props: {
+			customInput: {
+				default () {
+					return false
+				}
+			},
+			minChecked: {
+				default () {
+					return 1
+				}
+			},
+			type: {
+				default () {
+					return "single"
+				}
+			},
+			placeholder: {
+				default () {
+					return ""
+				}
+			},
+			title: {
+				default () {
+					return ""
+				}
+			},
+			mode: {
+				default () {
+					return modeEnum.sheet
+				}
+			},
+			
+			value: {
+				default () {
+					return ""
+				}
+			},
+			list: {
+				default () {
+					return []
+				}
+			}
+		},
+		data() {
+			return {
+				show: false,
+				modeEnum: Object.assign({}, modeEnum)
+			}
+		},
+		created() {
+
+		},
+		onHide() {
+
+		},
+		destroyed() {},
+
+		methods: {
+			handleSelectSwitch() {
+				// this.$emit('update:show', !this.show)
+				this.show = !this.show
+			},
+			handleDataItemChange(val) {
+				this.$emit('onChange', val)
+				this.$emit('update:value', val)
+				if(this.type == "single") {
+					this.handleSelectSwitch()
+				}
+			}
+		}
+	} 
+</script>
+
+<style scoped lang="scss">
+	.md-drop-cont{
+		position: absolute;
+		background-color: #fff;
+		border-radius: 10rpx;
+		border: 2rpx solid #ebeef5;;
+		top: calc(100% + 8px);
+		left: 0;
+		right: 0;
+		z-index: 10;
+		padding: 20rpx;
+		box-sizing: border-box;
+		border-radius: 6px;
+		box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+	}
+</style>
\ No newline at end of file
diff --git a/pages/user/certification.vue b/pages/user/certification.vue
index 9c4dc66..5b5dfd3 100644
--- a/pages/user/certification.vue
+++ b/pages/user/certification.vue
@@ -9,7 +9,9 @@
 							<tpx-input v-model:value="baseFormData.name" placeholder="真实姓名"></tpx-input>
 						</uni-forms-item>
 						<uni-forms-item :required="false">
-							
+							<tpx-select placeholder="证件类型" v-model:value="baseFormData.type" :list="typeList"
+								mode="drop"
+							></tpx-select>
 						</uni-forms-item>
 						<uni-forms-item :required="false">
 							<tpx-input v-model:value="baseFormData.number" placeholder="证件号"></tpx-input>
@@ -47,6 +49,11 @@
 		},
 		data() {
 			return {
+				typeList: [
+					{ title: '身份证', val: 1 },
+					{ title: '护照', val: 2 },
+					{ title: '港台证', val: 3 }
+				],
 				// 基础表单数据
 				baseFormData: {
 					name: '',