From 68c5ef7d9fea3f911e250fb5f8b300bc76099e49 Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期四, 26 十月 2023 13:55:49 +0800
Subject: [PATCH] 小程序

---
 minipro_standard/uni_modules/uview-ui/components/u-picker/u-picker.vue |  283 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 283 insertions(+), 0 deletions(-)

diff --git a/minipro_standard/uni_modules/uview-ui/components/u-picker/u-picker.vue b/minipro_standard/uni_modules/uview-ui/components/u-picker/u-picker.vue
new file mode 100644
index 0000000..8885917
--- /dev/null
+++ b/minipro_standard/uni_modules/uview-ui/components/u-picker/u-picker.vue
@@ -0,0 +1,283 @@
+<template>
+	<u-popup
+		:show="show"
+		@close="closeHandler"
+	>
+		<view class="u-picker">
+			<u-toolbar
+				v-if="showToolbar"
+				:cancelColor="cancelColor"
+				:confirmColor="confirmColor"
+				:cancelText="cancelText"
+				:confirmText="confirmText"
+				:title="title"
+				@cancel="cancel"
+				@confirm="confirm"
+			></u-toolbar>
+			<picker-view
+				class="u-picker__view"
+				:indicatorStyle="`height: ${$u.addUnit(itemHeight)}`"
+				:value="innerIndex"
+				:immediateChange="immediateChange"
+				:style="{
+					height: `${$u.addUnit(visibleItemCount * itemHeight)}`
+				}"
+				@change="changeHandler"
+			>
+				<picker-view-column
+					v-for="(item, index) in innerColumns"
+					:key="index"
+					class="u-picker__view__column"
+				>
+					<text
+						v-if="$u.test.array(item)"
+						class="u-picker__view__column__item u-line-1"
+						v-for="(item1, index1) in item"
+						:key="index1"
+						:style="{
+							height: $u.addUnit(itemHeight),
+							lineHeight: $u.addUnit(itemHeight),
+							fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal'
+						}"
+					>{{ getItemText(item1) }}</text>
+				</picker-view-column>
+			</picker-view>
+			<view
+				v-if="loading"
+				class="u-picker--loading"
+			>
+				<u-loading-icon mode="circle"></u-loading-icon>
+			</view>
+		</view>
+	</u-popup>
+</template>
+
+<script>
+/**
+ * u-picker
+ * @description 閫夋嫨鍣�
+ * @property {Boolean}			show				鏄惁鏄剧ずpicker寮圭獥锛堥粯璁� false 锛�
+ * @property {Boolean}			showToolbar			鏄惁鏄剧ず椤堕儴鐨勬搷浣滄爮锛堥粯璁� true 锛�
+ * @property {String}			title				椤堕儴鏍囬
+ * @property {Array}			columns				瀵硅薄鏁扮粍锛岃缃瘡涓�鍒楃殑鏁版嵁
+ * @property {Boolean}			loading				鏄惁鏄剧ず鍔犺浇涓姸鎬侊紙榛樿 false 锛�
+ * @property {String | Number}	itemHeight			鍚勫垪涓紝鍗曚釜閫夐」鐨勯珮搴︼紙榛樿 44 锛�
+ * @property {String}			cancelText			鍙栨秷鎸夐挳鐨勬枃瀛楋紙榛樿 '鍙栨秷' 锛�
+ * @property {String}			confirmText			纭鎸夐挳鐨勬枃瀛楋紙榛樿 '纭畾' 锛�
+ * @property {String}			cancelColor			鍙栨秷鎸夐挳鐨勯鑹诧紙榛樿 '#909193' 锛�
+ * @property {String}			confirmColor		纭鎸夐挳鐨勯鑹诧紙榛樿 '#3c9cff' 锛�
+ * @property {String | Number}	visibleItemCount	姣忓垪涓彲瑙侀�夐」鐨勬暟閲忥紙榛樿 5 锛�
+ * @property {String}			keyName				閫夐」瀵硅薄涓紝闇�瑕佸睍绀虹殑灞炴�ч敭鍚嶏紙榛樿 'text' 锛�
+ * @property {Boolean}			closeOnClickOverlay	鏄惁鍏佽鐐瑰嚮閬僵鍏抽棴閫夋嫨鍣紙榛樿 false 锛�
+ * @property {Array}			defaultIndex		鍚勫垪鐨勯粯璁ょ储寮�
+ * @property {Boolean}			immediateChange		鏄惁鍦ㄦ墜鎸囨澗寮�鏃剁珛鍗宠Е鍙慶hange浜嬩欢锛堥粯璁� false 锛�
+ * @event {Function} close		鍏抽棴閫夋嫨鍣ㄦ椂瑙﹀彂
+ * @event {Function} cancel		鐐瑰嚮鍙栨秷鎸夐挳瑙﹀彂
+ * @event {Function} change		褰撻�夋嫨鍊煎彉鍖栨椂瑙﹀彂
+ * @event {Function} confirm	鐐瑰嚮纭畾鎸夐挳锛岃繑鍥炲綋鍓嶉�夋嫨鐨勫��
+ */
+import props from './props.js';
+export default {
+	name: 'u-picker',
+	mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+	data() {
+		return {
+			// 涓婁竴娆￠�夋嫨鐨勫垪绱㈠紩
+			lastIndex: [],
+			// 绱㈠紩鍊� 锛屽搴攑icker-view鐨剉alue
+			innerIndex: [],
+			// 鍚勫垪鐨勫��
+			innerColumns: [],
+			// 涓婁竴娆＄殑鍙樺寲鍒楃储寮�
+			columnIndex: 0,
+		}
+	},
+	watch: {
+		// 鐩戝惉榛樿绱㈠紩鐨勫彉鍖栵紝閲嶆柊璁剧疆瀵瑰簲鐨勫��
+		defaultIndex: {
+			immediate: true,
+			handler(n) {
+				this.setIndexs(n, true)
+			}
+		},
+		// 鐩戝惉columns鍙傛暟鐨勫彉鍖�
+		columns: {
+			immediate: true,
+			handler(n) {
+				this.setColumns(n)
+			}
+		},
+	},
+	methods: {
+		// 鑾峰彇item闇�瑕佹樉绀虹殑鏂囧瓧锛屽垽鍒负瀵硅薄杩樻槸鏂囨湰
+		getItemText(item) {
+			if (uni.$u.test.object(item)) {
+				return item[this.keyName]
+			} else {
+				return item
+			}
+		},
+		// 鍏抽棴閫夋嫨鍣�
+		closeHandler() {
+			if (this.closeOnClickOverlay) {
+				this.$emit('close')
+			}
+		},
+		// 鐐瑰嚮宸ュ叿鏍忕殑鍙栨秷鎸夐挳
+		cancel() {
+			this.$emit('cancel')
+		},
+		// 鐐瑰嚮宸ュ叿鏍忕殑纭畾鎸夐挳
+		confirm() {
+			this.$emit('confirm', {
+				indexs: this.innerIndex,
+				value: this.innerColumns.map((item, index) => item[this.innerIndex[index]]),
+				values: this.innerColumns
+			})
+		},
+		// 閫夋嫨鍣ㄦ煇涓�鍒楃殑鏁版嵁鍙戠敓鍙樺寲鏃惰Е鍙�
+		changeHandler(e) {
+			const {
+				value
+			} = e.detail
+			let index = 0,
+				columnIndex = 0
+			// 閫氳繃瀵规瘮鍓嶅悗涓ゆ鐨勫垪绱㈠紩锛屽緱鍑哄綋鍓嶅彉鍖栫殑鏄摢涓�鍒�
+			for (let i = 0; i < value.length; i++) {
+				let item = value[i]
+				if (item !== (this.lastIndex[i] || 0)) { // 鎶妘ndefined杞负鍚堟硶鍋囧��0
+					// 璁剧疆columnIndex涓哄綋鍓嶅彉鍖栧垪鐨勭储寮�
+					columnIndex = i
+					// index鍒欎负鍙樺寲鍒椾腑鐨勫彉鍖栭」鐨勭储寮�
+					index = item
+					break // 缁堟寰幆锛屽嵆浣垮皯涓�娆″惊鐜紝涔熸槸鎬ц兘鐨勬彁鍗�
+				}
+			}
+			this.columnIndex = columnIndex
+			const values = this.innerColumns
+			// 灏嗗綋鍓嶇殑鍚勯」鍙樺寲绱㈠紩锛岃缃负"涓婁竴娆�"鐨勭储寮曞彉鍖栧��
+			this.setLastIndex(value)
+			this.setIndexs(value)
+
+			this.$emit('change', {
+				// #ifndef MP-WEIXIN || MP-LARK
+				// 寰俊灏忕▼搴忎笉鑳戒紶閫抰his锛屼細鍥犱负寰幆寮曠敤鑰屾姤閿�
+				picker: this,
+				// #endif
+				value: this.innerColumns.map((item, index) => item[value[index]]),
+				index,
+				indexs: value,
+				// values涓哄綋鍓嶅彉鍖栧垪鐨勬暟缁勫唴瀹�
+				values,
+				columnIndex
+			})
+		},
+		// 璁剧疆index绱㈠紩锛屾鏂规硶鍙澶栭儴璋冪敤璁剧疆
+		setIndexs(index, setLastIndex) {
+			this.innerIndex = uni.$u.deepClone(index)
+			if (setLastIndex) {
+				this.setLastIndex(index)
+			}
+		},
+		// 璁板綍涓婁竴娆＄殑鍚勫垪绱㈠紩浣嶇疆
+		setLastIndex(index) {
+			// 褰撹兘杩涘叆姝ゆ柟娉曪紝鎰忓懗鐫�褰撳墠璁剧疆鐨勫悇鍒楅粯璁ょ储寮曪紝鍗充负鈥滀笂涓�娆♀�濈殑閫変腑鍊硷紝闇�瑕佽褰曪紝鏄洜涓篶hangeHandler涓�
+			// 闇�瑕佹嬁鍓嶅悗鐨勫彉鍖栧�艰繘琛屽姣旓紝寰楀嚭褰撳墠鍙戠敓鏀瑰彉鐨勬槸鍝竴鍒�
+			this.lastIndex = uni.$u.deepClone(index)
+		},
+		// 璁剧疆瀵瑰簲鍒楅�夐」鐨勬墍鏈夊��
+		setColumnValues(columnIndex, values) {
+			// 鏇挎崲innerColumns鏁扮粍涓璫olumnIndex绱㈠紩鐨勫�间负values锛屼娇鐢ㄧ殑鏄暟缁勭殑splice鏂规硶
+			this.innerColumns.splice(columnIndex, 1, values)
+			// 鎷疯礉涓�浠藉師鏈夌殑innerIndex鍋氫复鏃跺彉閲忥紝灏嗗ぇ浜庡綋鍓嶅彉鍖栧垪鐨勬墍鏈夌殑鍒楃殑榛樿绱㈠紩璁剧疆涓�0
+			let tmpIndex = uni.$u.deepClone(this.innerIndex)
+			for (let i = 0; i < this.innerColumns.length; i++) {
+				if (i > this.columnIndex) {
+					tmpIndex[i] = 0
+				}
+			}
+			// 涓�娆℃�ц祴鍊硷紝涓嶈兘鍗曚釜淇敼锛屽惁鍒欐棤鏁�
+			this.setIndexs(tmpIndex)
+		},
+		// 鑾峰彇瀵瑰簲鍒楃殑鎵�鏈夐�夐」
+		getColumnValues(columnIndex) {
+			// 杩涜鍚屾闃诲锛屽洜涓哄閮ㄥ緱鍒癱hange浜嬩欢涔嬪悗锛屽彲鑳介渶瑕佹墽琛宻etColumnValues鏇存柊鍒楃殑鍊�
+			// 绱㈠紩濡傛灉鍦ㄥ閮╟hange鐨勫洖璋冧腑璋冪敤getColumnValues鐨勮瘽锛屽彲鑳芥棤娉曞緱鍒板彉鏇村悗鐨勫垪鍊硷紝杩欓噷杩涜涓�瀹氬欢鏃讹紝淇濊瘉鍊肩殑鍑嗙‘鎬�
+			(async () => {
+				await uni.$u.sleep()
+			})()
+			return this.innerColumns[columnIndex]
+		},
+		// 璁剧疆鏁翠綋鍚勫垪鐨刢olumns鐨勫��
+		setColumns(columns) {
+			this.innerColumns = uni.$u.deepClone(columns)
+			// 濡傛灉鍦ㄨ缃悇鍒楁暟鎹椂锛屾病鏈夎璁剧疆榛樿鐨勫悇鍒楃储寮昫efaultIndex锛岄偅涔堢敤0鍘诲～鍏呭畠锛屾暟缁勯暱搴︿负鍒楃殑鏁伴噺
+			if (this.innerIndex.length === 0) {
+				this.innerIndex = new Array(columns.length).fill(0)
+			}
+		},
+		// 鑾峰彇鍚勫垪閫変腑鍊煎搴旂殑绱㈠紩
+		getIndexs() {
+			return this.innerIndex
+		},
+		// 鑾峰彇鍚勫垪閫変腑鐨勫��
+		getValues() {
+			// 杩涜鍚屾闃诲锛屽洜涓哄閮ㄥ緱鍒癱hange浜嬩欢涔嬪悗锛屽彲鑳介渶瑕佹墽琛宻etColumnValues鏇存柊鍒楃殑鍊�
+			// 绱㈠紩濡傛灉鍦ㄥ閮╟hange鐨勫洖璋冧腑璋冪敤getValues鐨勮瘽锛屽彲鑳芥棤娉曞緱鍒板彉鏇村悗鐨勫垪鍊硷紝杩欓噷杩涜涓�瀹氬欢鏃讹紝淇濊瘉鍊肩殑鍑嗙‘鎬�
+			(async () => {
+				await uni.$u.sleep()
+			})()
+			return this.innerColumns.map((item, index) => item[this.innerIndex[index]])
+		}
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.u-picker {
+		position: relative;
+
+		&__view {
+
+			&__column {
+				@include flex;
+				flex: 1;
+				justify-content: center;
+
+				&__item {
+					@include flex;
+					justify-content: center;
+					align-items: center;
+					font-size: 16px;
+					text-align: center;
+					/* #ifndef APP-NVUE */
+					display: block;
+					/* #endif */
+					color: $u-main-color;
+
+					&--disabled {
+						/* #ifndef APP-NVUE */
+						cursor: not-allowed;
+						/* #endif */
+						opacity: 0.35;
+					}
+				}
+			}
+		}
+
+		&--loading {
+			position: absolute;
+			top: 0;
+			right: 0;
+			left: 0;
+			bottom: 0;
+			@include flex;
+			justify-content: center;
+			align-items: center;
+			background-color: rgba(255, 255, 255, 0.87);
+			z-index: 1000;
+		}
+	}
+</style>

--
Gitblit v1.9.3