@zscreate/zhxy-app-component 1.0.0

package/components/jin-edit/jin-edit.vue

@@ -0,0 +1,327 @@
+<template>
+	<view class="container">
+		<editor class="ql-container" :show-img-size="true" :show-img-toolbar="true" :show-img-resize="true" id="editor"
+		 @statuschange="statuschange" @blur="editBlur" @ready="onEditorReady" ref="editot" :read-only="disabled"></editor>
+		<!-- 操作工具 -->
+		<view class="tool-view">
+			<view class="tool">
+				<!-- <jinIcon class="single" type="&#xe6f3;" font-size="44rpx" title="插入图片" @click="insertImage"></jinIcon> -->
+				<jinIcon class="single" type="&#xe6f9;" font-size="44rpx" title="修改文字样式" @click="showMore" :color="showMoreTool ? activeColor : '#666666'"></jinIcon>
+				<jinIcon class="single" type="&#xe6eb;" font-size="44rpx" title="分割线" @click="insertDivider"></jinIcon>
+				<jinIcon class="single" type="&#xe6e8;" font-size="44rpx" title="撤销" @click="undo"></jinIcon>
+				<jinIcon class="single" type="&#xe705;" font-size="44rpx" title="重做" @click="redo"></jinIcon>
+				<jinIcon class="single" type="&#xeb8a;" font-size="44rpx" title="设置" @click="release(true)"></jinIcon>
+			</view>
+
+			<view class="font-more" :style="{ height: showMoreTool ? '100rpx' : 0 }">
+				<jinIcon class="single" type="&#xe6e7;" font-size="44rpx" title="加粗" @click="setBold" :color="showBold ? activeColor : '#666666'"></jinIcon>
+				<jinIcon class="single" type="&#xe6fe;" font-size="44rpx" title="斜体" @click="setItalic" :color="showItalic ? activeColor : '#666666'"></jinIcon>
+				<jinIcon class="single" type="&#xe6f8;" font-size="44rpx" title="分割线" @click="setIns" :color="showIns ? activeColor : '#666666'"></jinIcon>
+				<jinIcon class="single" type="&#xe6e3;" font-size="44rpx" title="标题" @click="setHeader" :color="showHeader ? activeColor : '#666666'"></jinIcon>
+				<jinIcon class="single" type="&#xe6f1;" font-size="44rpx" title="居中" @click="setCenter" :color="showCenter ? activeColor : '#666666'"></jinIcon>
+				<jinIcon class="single" type="&#xe6ed;" font-size="44rpx" title="居右" @click="setRight" :color="showRight ? activeColor : '#666666'"></jinIcon>
+			</view>
+			<!-- 	<view class="setting-layer-mask" v-if="showSettingLayer" @click="showSetting"></view>
+			<view class="setting-layer" v-if="showSettingLayer">
+				<view class="single" @click="release(true)">
+					<jinIcon class="icon" type="&#xe639;" ></jinIcon>
+					<view>公开发布</view>
+				</view>
+				<view class="single" @click="release(false)">
+					<jinIcon class="icon" type="&#xe655;" ></jinIcon>
+					<view>私密保存</view>
+				</view>
+			</view> -->
+		</view>
+	</view>
+</template>
+
+<script>
+	import jinIcon from './jin-icons.vue';
+	export default {
+		props: {
+			// 点击图片时显示图片大小控件
+			showImgSize: {
+				type: Boolean,
+				default: false
+			},
+			// 点击图片时显示工具栏控件
+			showImgToolbar: {
+				type: Boolean,
+				default: false
+			},
+			// 点击图片时显示修改尺寸控件
+			showImgResize: {
+				type: Boolean,
+				default: false
+			},
+			// 占位符
+			placeholder: {
+				type: String,
+				default: '开始输入...'
+			},
+			// 图片上传的地址
+			uploadFileUrl: {
+				type: String,
+				default: '#'
+			},
+			// 上传文件时的name
+			fileKeyName: {
+				type: String,
+				default: 'file'
+			},
+			//是否只读
+		  disabled:{
+				type:Boolean,
+				default:false
+			},
+			// 上传图片时，http请求的header
+			header: {
+				type: Object
+			},
+			// 初始化html
+			html: {
+				type: String
+			}
+		},
+		computed: {
+
+		},
+		data() {
+			return {
+				showMoreTool: true,
+				showBold: false,
+				showItalic: false,
+				showIns: false,
+				showHeader: false,
+				showCenter: false,
+				showRight: false,
+				showSettingLayer: false,
+				activeColor: '#F56C6C'
+			};
+		},
+		components: {
+			jinIcon
+		},
+		watch: {
+			html: {
+				handler(val) {
+					console.log(val)
+				},
+				deep: true
+			}
+		},
+		created() {
+
+		},
+		methods: {
+			onEditorReady() {
+				uni.createSelectorQuery().in(this).select('#editor').context((res) => {
+					this.editorCtx = res.context
+					this.editorCtx.setContents({
+						html: this.html
+					})
+				}).exec()
+				// uni.createSelectorQuery()
+				// 	.in(this)
+				// 	.select('.ql-container')
+				// 	.fields({
+				// 		size: false,
+				// 		context: true
+				// 	},res => {
+				// 		this.editorCtx = res.context;
+				// 		this.editorCtx.setContents({
+				// 			html: this.html
+				// 		})
+				// 	})
+				// 	.exec();
+			},
+			undo() {
+				this.editorCtx.undo();
+			},
+			// 插入图片
+			insertImage() {
+				uni.chooseImage({
+					count: 9, //默认9
+					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+					sourceType: ['album', 'camera'], //从相册选择
+					success: async (res) => {
+						var tempFilePaths = res.tempFilePaths;
+						uni.showLoading({
+							title: '正在上传中...'
+						})
+						for (let temp of tempFilePaths) {
+							// 图片上传服务器
+							await uni.uploadFile({
+								url: this.uploadFileUrl,
+								filePath: temp,
+								name: this.fileKeyName,
+								header: this.header,
+								success: res => {
+									// 上传完成后处理
+									this.editorCtx.insertImage({
+										src: temp, // 此处需要将图片地址切换成服务器返回的真实图片地址
+										alt: '图片',
+										success: function(e) {}
+									});
+									uni.hideLoading()
+								},
+
+							});
+						}
+					}
+				});
+			},
+			insertDivider() {
+				this.editorCtx.insertDivider();
+			},
+			redo() {
+				this.editorCtx.redo();
+			},
+			showMore() {
+				this.showMoreTool = !this.showMoreTool;
+				this.editorCtx.setContents()
+			},
+			setBold() {
+				this.showBold = !this.showBold;
+				this.editorCtx.format('bold');
+			},
+			setItalic() {
+				this.showItalic = !this.showItalic;
+				this.editorCtx.format('italic');
+			},
+			checkStatus(name, detail, obj) {
+				if (detail.hasOwnProperty(name)) {
+					this[obj] = true;
+				} else {
+					this[obj] = false;
+				}
+			},
+			statuschange(e) {
+				var detail = e.detail;
+				this.checkStatus('bold', detail, 'showBold');
+				this.checkStatus('italic', detail, 'showItalic');
+				this.checkStatus('ins', detail, 'showIns');
+				this.checkStatus('header', detail, 'showHeader');
+				if (detail.hasOwnProperty('align')) {
+					if (detail.align == 'center') {
+						this.showCenter = true;
+						this.showRight = false;
+					} else if (detail.align == 'right') {
+						this.showCenter = false;
+						this.showRight = true;
+					} else {
+						this.showCenter = false;
+						this.showRight = false;
+					}
+				} else {
+					this.showCenter = false;
+					this.showRight = false;
+				}
+			},
+			setIns() {
+				this.showIns = !this.showIns;
+				this.editorCtx.format('ins');
+			},
+			setHeader() {
+				this.showHeader = !this.showHeader;
+				this.editorCtx.format('header', this.showHeader ? 'H2' : false);
+			},
+			setCenter() {
+				this.showCenter = !this.showCenter;
+				this.editorCtx.format('align', this.showCenter ? 'center' : false);
+			},
+			setRight() {
+				this.showRight = !this.showRight;
+				this.editorCtx.format('align', this.showRight ? 'right' : false);
+			},
+			showSetting() {
+				this.showSettingLayer = !this.showSettingLayer;
+			},
+			async editFocus() {
+
+			},
+			editBlur() {
+       this.release(true)
+			},
+			release(isPublic) {
+				this.showSettingLayer = false;
+				this.editorCtx.getContents({
+					success: res => {
+						Object.assign(res, {
+							isPublic: isPublic
+						})
+						this.$emit('editOk', res);
+					}
+				})
+			},
+		}
+	};
+</script>
+
+<style scoped>
+	.container {
+		padding: 30rpx 0;
+		box-sizing: border-box;
+		margin-left: 30upx;
+		/* padding-bottom: 120rpx; */
+	}
+
+	.ql-container {
+		font-size: 22px;
+		width: 65vw;
+		padding-left: 60upx;
+	}
+
+	.tool-view {
+		/* width: 100vw; */
+
+
+	}
+
+	.tool {
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		width: 100%;
+		background: #eee;
+		margin-left: 30upx;
+	}
+
+	.font-more {
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		width: 100%;
+		background: rgb(235, 235, 235);
+		overflow: hidden;
+		transition: all 0.15s;
+		margin-left: 30upx;
+	}
+
+	.setting-layer {
+		background: #fff;
+		width: 250rpx;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+		border-radius: 8rpx;
+	}
+
+	.setting-layer .single {
+		height: 80rpx;
+		font-size: 32rpx;
+		padding: 0 30rpx;
+		display: flex;
+		align-items: center;
+		line-height: 80rpx;
+		flex-direction: row;
+		color: #666;
+	}
+
+	.setting-layer .single .icon {
+		margin-right: 20rpx;
+	}
+
+	.setting-layer-mask {
+		background: transparent;
+	}
+</style>

package/components/jin-edit/jin-icons.vue

@@ -0,0 +1,48 @@
+<template>
+	<view class="content">
+		<view class="icon" :style="{color: color, fontSize: fontSize}" v-html="type" @click="toclick"></view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			type: {
+				type: String,
+				default: '&#xe644;'
+			},
+			color: {
+				type: String,
+				default: '#666666'
+			},
+			fontSize: {
+				type: String,
+				default: '34rpx'
+			}
+		},
+		methods: {
+			toclick() {
+				this.$emit('click');
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.content{
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	@font-face {
+		font-family: 'jin';
+		/** 阿里巴巴矢量图标库的字体库地址，可以替换自己的字体库地址 **/
+		src: url('https://at.alicdn.com/t/font_1491431_6m7ltjo8wi.ttf') format('truetype');
+	}
+
+	.icon {
+		font-family: jin !important;
+		font-size: 34rpx;
+	}
+
+</style>

package/components/jin-edit/readme.md

@@ -0,0 +1,65 @@
+## jin-edit 基于editor的富文本编辑器
+
+### 兼容性
+
+这是一个uni-app的通用组件，兼容微信小程序端、安卓端、ios端（未测试）、H5端。作者因没有ios设备无法对ios端进行测试，其他端测试无问题。
+
+微信小程序 | APP | H5
+:--: | :--: | :--:
+√ | √ | √
+
+我的HbuilderX版本2.6.7，不同的版本可能会造成不兼容的问题。
+
+### 使用方式
+
+1. 将此组件进入你的项目中的 /components/ 目录中
+2. 在某个页面中使用该插件
+- 在 `script` 中引用组件
+```javascript
+import jinEdit from '../../components/jin-edit/jin-edit.vue';
+export default {
+	data() {
+		return {
+			
+		}
+	},
+	components: {
+		jinEdit
+	},
+	methods: {
+		// 点击发布
+		editOk(res) {
+			console.log(res);
+		}
+	}
+}
+```
+- 在 `template` 中使用组件
+```html
+<jinEdit placeholder="请输入内容" @editOk="editOk" uploadFileUrl="/#"></jinEdit> 
+```
+
+### Demo
+
+[uni-jin（一个uni-app组件集合）](https://github.com/wangjinxin613/uni-jin)
+
+### 参数
+
+属性 | 类型 | 默认值 | 说明
+:--: | :--: | :--: | :--:
+showImgSize | Boolean | false | 点击图片时显示图片大小控件
+showImgToolbar | Boolean | false | 点击图片时显示工具栏控件
+showImgResize | Boolean | false | 点击图片时显示修改尺寸控件
+placeholder | String | '' | 编辑器占位符
+uploadFileUrl | String | '#' | 图片上传的服务器地址
+fileKeyName | String | 'file' | 图片上传时的name
+header | Object | - | 图片上传http请求的header
+html | String | - | 初始化的html 
+
+### 方法
+
+方法名 | 参数 | 说明
+:--: | :--: | :--:
+editOk | e={html,text,delta,isPublic} | 点击发布按钮触发	
+
+以上

package/components/l-file/l-file.vue

@@ -0,0 +1,260 @@
+<template>
+	<view>
+		<view class="file_conten">
+			<view class="file_upload option-font-size" @click="chooseMessageFile"
+				v-if="isShow">
+				点击上传
+			</view>
+			<view>
+				<view class="file_item" v-for="(item,idx) in defaultFile" :key="idx">
+					<view @click="downLoadFile(item.url,item.name)">{{item.name}}</view>
+					<icon type="clear" size="16" @click="handleDelete(idx)" v-if="!disabled" />
+				</view>
+			</view>
+		</view>
+		<!-- <view class="name" v-show="!show">{{name}}</view>
+			<view class="name SXcolor" v-if="fileName" @click="downLoadFile(defaultFile[0]['url'])">{{fileName}}</view>
+		</view>
+		<view v-if="fileName" class="tips option-font-size">更多文件详情请于电脑端查看</view> -->
+		<view v-if="!disabled">
+			<progress :percent="percent" stroke-width="5" activeColor="#007AFF" backgroundColor="#FFFFFF"
+				style="width: 200upx;" v-show="show"></progress>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			widget: {
+				type: Object,
+				default: {}
+			},
+			url: {
+				type: String,
+				default: ''
+			},
+			disabled: {
+				type: Boolean,
+				default: false
+			},
+			defaultFile: {
+				type: Array,
+				default: () => []
+			}
+		},
+		data() {
+			return {
+				name: "",
+				percent: 0,
+				show: true,
+				imgViewUrl: this.LFileBaseUrl,
+		    isShow:true,//是否展示点击上传
+			}
+		},
+		watch:{
+		//当上传的数量超过了设置的数量 就不让上传
+			defaultFile(val){
+				this.getShow(val)
+			}
+		},
+		mounted() {
+			if(this.disabled){
+				this.isShow =!this.disabled
+			}
+			else{
+				this.getShow(this.defaultFile)
+			}
+		},
+		methods: {
+			getShow(val){
+				if(val && val.length>=this.widget.length){
+					this.isShow = false
+				}
+				else{
+					this.isShow = true
+				}
+			},
+			//删除文件
+			handleDelete(idx) {
+				this.$emit('fileDelete', idx)
+			},
+			downLoadFile(path, name) {
+				// if (path.includes('.pdf')) {
+				// 	uni.navigateTo({
+				// 		url: '/pages/home/Singlepoint?url=' + this.downLoadUrl + path + "&download=true"
+				// 	})
+				// 	return false;
+				// }
+				let type = '';
+				let fileType = '';
+				let fileTypesIndex = -1;
+				const fileTypes = ['doc', 'docx', 'pdf', 'xls', 'xlsx', 'ppt', 'pptx'];
+				if (path) {
+					let str = path.split('.');
+					type = str[str.length - 1]
+				}
+
+				if (type) {
+					fileTypesIndex = fileTypes.indexOf(type);
+					console.log(fileTypesIndex)
+				}
+
+				if (fileTypesIndex != -1) {
+					fileType = fileTypes[fileTypesIndex]
+				}
+        // #ifdef H5
+        window.open(this.uniEnv.imgUrl + path)
+        return
+        // #endif
+				uni.downloadFile({
+					url: this.uniEnv.imgUrl + path, //下载地址接口返回
+					filePath: wx.env.USER_DATA_PATH + "/" + name,
+					success: (data) => {
+						console.log(data)
+						if (data.statusCode === 200) {
+							uni.openDocument({
+								filePath: data.filePath,
+								showMenu: true,
+								fileType: fileType,
+								success: function(res) {
+									// console.log('打开文档成功');
+								},
+								fail(res) {
+									console.log(res)
+									uni.showToast({
+										icon: 'none',
+										mask: true,
+										title: '下载失败',
+										duration: 3000,
+									});
+								},
+							});
+						}
+					},
+				})
+				// uni.downloadFile({
+				// 	url: this.downLoadUrl + path, //下载地址接口返回
+				// 	success: (data) => {
+				// 		if (data.statusCode === 200) {
+				// 			//文件保存到本地
+				// 			uni.saveFile({
+				// 				tempFilePath: data.tempFilePath, //临时路径
+				// 				success: function(res) {
+				// 					uni.showToast({
+				// 						icon: 'none',
+				// 						mask: true,
+				// 						title: '文件已保存：' + res.savedFilePath, //保存路径
+				// 						duration: 3000,
+				// 					});
+				// 					setTimeout(() => {
+				// 						// escape(res.savedFilePath)
+				// 						//打开文档查看
+				// 						uni.openDocument({
+				// 							filePath: res.savedFilePath,
+				// 							fileType: fileType,
+				// 							success: function(res) {
+				// 								// console.log('打开文档成功');
+				// 							},
+				// 							fail(res) {
+				// 								console.log(res)
+				// 								uni.showToast({
+				// 									icon: 'none',
+				// 									mask: true,
+				// 									title: '文件打开失败！', //保存路径
+				// 									duration: 3000,
+				// 								});
+				// 							},
+				// 						});
+				// 					}, 3000)
+				// 				}
+				// 			});
+				// 		}
+				// 	}
+				// })
+			},
+			chooseMessageFile: function(e) {
+				console.log(this.widget, )
+				if (this.disabled || (this.defaultFile.length && this.defaultFile.length >= this.widget.length)) return false;
+				var that = this;
+				wx.chooseMessageFile({
+					count: 1,
+					type: 'all',
+					success(res) {
+						console.log(res.tempFiles)
+						const path = res.tempFiles
+						that.name = res.tempFiles[0].name
+						const uploadTask = uni.uploadFile({
+							url: that.url,
+							filePath: path[0].path,
+							name: 'file',
+							formData: {},
+							success: function(res) {
+								let imgObj = {
+									key: String(Math.random()).substr(2) - 0,
+									name: that.name,
+									status: "success",
+									url: JSON.parse(res.data).message
+								}
+								that.$emit('filePost', imgObj)
+							}
+						});
+
+						uploadTask.onProgressUpdate(function(res) {
+							that.percent = res.progress;
+							if (Number(res.progress) == 100) {
+								that.show = false
+							}
+						});
+					},
+					error: function(e) {
+						console.log(e);
+					}
+				});
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.file_conten {
+		// display: flex;
+		// flex-direction: row;
+		// align-items: center;
+		// justify-content: flex-start;
+	}
+
+	.file_upload {
+		color: #666;
+		margin-right: 20rpx;
+
+	}
+
+	.option-font-size {
+		font-size: $uni-form-content-font-size;
+	}
+
+	.name {
+		padding-top: 4upx;
+		font-size: 22upx;
+	}
+
+	.SXcolor {
+		color: #539DFA;
+	}
+
+	.tips {
+		color: #999;
+		font-size: 22upx;
+	}
+
+	.file_item {
+		width: 700upx;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		view{
+			margin-top: 10upx;
+		}
+	}
+</style>