@kaiyinchem/ky-uniui 1.0.3

package/components/ky-upload.vue

@@ -0,0 +1,191 @@
+<!--批量上传，采用递归的方式-->
+<template>
+	<view
+    :class="{ start: align === 'left', noMargin }"
+    class="batch-pic">
+		<view v-for="(img, i) in imageUrls" :key="i" :style="{ width: width + 'rpx', height: width + 'rpx' }" class="batch-items" >
+			<image
+				:src="img"
+				class="batch-img"
+				mode="aspectFill"
+			 @click.stop="viewImg(img, imageUrls)"
+			>
+			</image>
+			<text v-if="!disabled" class="iconfont batch-remove" @click="removeImage(i)">&#xe631;</text>
+		</view>
+		<text
+			v-if="count !== imageUrls.length && !disabled && !$slots.default"
+			:style="{'font-size': width + 'rpx', width: width + 'rpx', height: width + 'rpx'}"
+			class="batch-items batch-btns iconfont"
+			@click="addImage"
+		>&#xe8be;</text>
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+
+	export default {
+		emits: ['update:value', 'change'],
+		props: {
+			width: {
+				type: String,
+				default: '120',
+			},
+			value: {
+				type: [Array, String],
+				default: () => [],
+			},
+			count: {
+				type: Number,
+				default: 6,
+			},
+			disabled: {
+				type: Boolean,
+				default: false,
+			},
+			// 对其方式
+			align: {
+				type: String,
+				default: 'right',
+			},
+			noMargin: {
+				type: Boolean,
+				default: false,
+			},
+			tableId: {
+				type: String,
+				default: '',
+			}
+		},
+		data() {
+			return {
+				imageUrls: [],
+			}
+		},
+		mounted() {
+			this.imageUrls = this.setUrls(this.value)
+		},
+		watch: {
+			value(v) {
+				this.imageUrls = this.setUrls(v)
+			}
+		},
+		methods: {
+			setUrls(v) {
+				if (!v) {
+					return []
+				}
+				if (typeof v === 'string') {
+					return [v]
+				}
+				return v
+			},
+			removeImage(i) {
+				this.imageUrls.splice(i, 1)
+				this.$emit('update:value', this.count === 1 ? '' : this.imageUrls)
+				console.log(this.imageUrls)
+			},
+			addImage() {
+				uni.chooseImage({
+					count: this.count, // 默认 9
+					sizeType: ['original', 'compressed'],
+					sourceType: ['album', 'camera'],
+					success: async (res) => {
+           console.log(res)
+           const filePath = res.tempFilePaths
+           const length = filePath.length
+           if (length + this.imageUrls.length > this.count) {
+           	return this.$toast(`最多可上传${this.count}张图片`)
+           }
+           // this.imageUrls = filePath
+           const data = await this.loopUpload(filePath, 0)
+           this.$emit('update:value', this.count > 1 ? this.imageUrls : this.imageUrls[0])
+					},
+          fail: (res) => {
+            console.log(res)
+          }
+				})
+			},
+
+			/**
+			 * 递归上传多张图片
+			 * @param { Array } filePath 文件路径
+			 * @param { Number } counter 计数
+			 */
+			async loopUpload(filePath, counter) {
+				console.log(filePath[counter])
+				if (counter === filePath.length) {
+					return
+				}
+				try {
+					const url = await this.$api.common.upload(filePath[counter], this.tableId)
+					console.log(url)
+					if (!url) throw { msg: 'upload fail' }
+					counter++
+					this.loopUpload(filePath, counter)
+					let lastUrl = url
+					this.imageUrls.push(lastUrl)
+					return lastUrl
+				} catch (e) {
+					console.log(e)
+					return Promise.reject(e)
+				}
+			},
+			viewImg(current, urls) {
+				uni.previewImage({ current, urls })
+			}
+		},
+	}
+</script>
+
+<style scoped lang="scss">
+	.batch-pic {
+		display: flex;
+		flex-wrap: wrap;
+		margin-right: -15rpx;
+		justify-content: flex-end;
+		&.end {
+			justify-content: flex-end;
+		}
+		&.start {
+			justify-content: flex-start;
+		}
+		.batch-items {
+			display: flex;
+			margin-right: 15rpx;
+			margin-bottom: 15rpx;
+			width: 120rpx;
+			height: 120rpx;
+			border-radius: 6rpx;
+			position: relative;
+      justify-content: center;
+      align-items: center;
+			.batch-img {
+				width: 100%;
+				height: 100%;
+				border-radius: 6rpx;
+			}
+      &:last-child {
+        margin: 0;
+      }
+			.batch-remove {
+				color: red;
+				font-size: 36rpx;
+				position: absolute;
+				top: -15rpx;
+				right: -15rpx;
+				display: block;
+				width: 36rpx;
+				height: 36rpx;
+				border-radius: 50%;
+				background: var(--bg-white);
+			}
+		}
+		.batch-btns {
+			font-size: 120rpx;
+			color: var(--border-1);
+			line-height: 120rpx;
+		}
+	}
+</style>

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@kaiyinchem/ky-uniui",
+  "author": "kaiyin team",
+	"private": false,
+  "files": [
+    "components",
+    "style"
+  ],
+  "description": "an uniapp ui",
+  "version": "1.0.3",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yezipi/ky-uniui.git"
+  },
+	"publishConfig": {
+	  "access": "public"
+	},
+  "keywords": [
+    "uniapp"
+  ],
+  "bugs": {
+    "url": "https://github.com/yezipi/ky-uniui/issues"
+  },
+  "homepage": "https://github.com/yezipi/ky-uniui#readme",
+  "scripts": {
+  },
+  "license": "ISC"
+}

package/style/var.css

@@ -0,0 +1,85 @@
+page, body {
+
+  --rgb-primary: 0, 178, 169;
+  --rgb-light-primary: 0, 217, 212;
+  --rgb-white: 255, 255, 255;
+  --rgb-dark: 51, 51, 51;
+  --rgb-sub: 51, 163, 255;
+  --rgb-gray: 242,242,242;
+  --rgb-light-gray: 200, 200, 200;
+
+  --space-5: 5rpx;
+  --space-10: 10rpx;
+  --space-15: 15rpx;
+  --space-20: 20rpx;
+  --space-25: 25rpx;
+  --space-30: 30rpx;
+
+  --color-dark: rgb(var(--rgb-dark));
+  --color-white: rgb(var(--rgb-white));
+  --color-primary: rgb(var(--rgb-primary));
+  --color-light-primary: rgb(var(--rgb-light-primary));
+  --color-primary-05: rgba(var(--rgb-primary), 0.5);
+  --color-primary-01: rgba(var(--rgb-primary), 0.1);
+  --color-gray: rgba(var(--rgb-dark), 0.6);
+  --color-link: rgb(var(--rgb-sub));
+  --color-light-gray: rgb(var(--rgb-light-gray));
+	--color-price: #E02020;
+
+  --bg-white: rgb(var(--rgb-white));
+  --bg-gray: rgba(var(--rgb-gray));
+
+  --border-1: rgba(var(--rgb-dark), 0.1);
+  --border-2: rgba(var(--rgb-dark), 0.2);
+
+  --font-20: 20rpx;
+  --font-22: 22rpx;
+  --font-24: 24rpx;
+  --font-26: 26rpx;
+  --font-28: 28rpx;
+  --font-30: 30rpx;
+  --font-32: 32rpx;
+	--font-34: 34rpx;
+	--font-36: 36rpx;
+	--font-38: 38rpx;
+	--font-40: 40rpx;
+  --border-radius: 5rpx;
+
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  body, uni-page-head .uni-page-head, uni-page-body, .w-picker-header, .uni-picker-view-content {
+    background: #222222!important;
+  }
+  page, body {
+    --rgb-white: 55, 55, 55;
+    --rgb-dark: 180, 180, 180;
+    --rgb-gray: 30, 30, 30;
+		--rgb-light-gray: 80, 80, 80;
+    --rgb-primary: 0, 150, 150;
+    --rgb-light-primary: 0, 120, 120;
+  }
+  uni-page-head .uni-page-head__title,
+  uni-page-head .uni-btn-icon {
+    color: var(--color-dark)!important;
+  }
+	.ky-tag-orange, .product-notice {
+		background: #3a271e!important;
+		color: #e28d63!important;
+	}
+	.uni-picker-container .uni-picker-item {
+		color: #f5f5f5!important;
+	}
+	.uni-picker-view-mask {
+		background-image: linear-gradient(
+        180deg,
+        rgba(35, 35, 35, 0.95),
+        rgb(0 0 0 / 60%)
+      ),
+      linear-gradient(0deg, rgb(0 0 0 / 100%), rgb(0 0 0 / 60%))!important;
+	}
+	.w-picker-header {
+		border-bottom: var(--border-1)!important;
+	}
+}