名片富文本编辑器

card/components/jin-edit/jin-edit.vue

@@ -0,0 +1,350 @@
+<template>
+	<view class="container" :style="{
+		paddingBottom: showMoreTool ? '220rpx' : '120rpx'
+	}"> 
+		<editor
+			class="ql-container"
+			:placeholder="placeholder"
+			:show-img-size="true"
+			:show-img-toolbar="true"
+			:show-img-resize="true"
+			@ready="onEditorReady"
+			id="editor"
+			@statuschange="statuschange"
+			@focus="editFocus" 
+			@input="editBlur"
+			ref="editot"
+		></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="confirmContent"></jinIcon><!-- @click="showSetting" -->
+			</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>
+const req = require('../../../utils/request.js');
+import jinIcon from './jin-icons.vue';
+export default {
+	data() {
+		return {
+			showMoreTool: false,
+			showBold: false,
+			showItalic: false,
+			showIns: false,
+			showHeader: false,
+			showCenter: false,
+			showRight: false,
+			showSettingLayer: false,
+			activeColor: '#F56C6C',
+		};
+	},
+	components: {
+		jinIcon
+	},
+	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'
+		},
+		// 上传图片时，http请求的header
+		header: {
+			type: Object
+		},
+		// 初始化html
+		html: {
+			type: String,
+		}
+		
+	},
+	watch: {
+	},
+	computed:{
+		
+	},
+	mounted() {
+	},
+	methods: {
+		onEditorReady(e) {
+			uni.createSelectorQuery()
+				.in(this)
+				.select('.ql-container')
+				.fields({
+					size: true,
+					context: true
+				},res => {
+					this.editorCtx = res.context;
+					this.editorCtx.setContents({
+						html: this.html
+					})
+				})
+				.exec();
+		},
+		undo() {
+			this.editorCtx.undo();
+		},
+		// 插入图片
+		insertImage() {
+			let that = this;
+			uni.chooseImage({
+				count: 8,
+				sizeType: ['original', 'compressed'],
+				sourceType: ['album', 'camera'],
+				success: function({
+					tempFilePaths
+				}) {
+					var promise = Promise.all(tempFilePaths.map(tempFilePath => {
+						return new Promise(function(resolve, reject) {
+							uni.showLoading({
+								title: "正在上传中"
+							})
+							req.uploadFile('/api/nocheck/upload', tempFilePath, res => {
+								that.editorCtx.insertImage({
+									src: res.src,  // 此处需要将图片地址切换成服务器返回的真实图片地址
+									alt: '图片',
+									success: function(e) {}
+								});
+								uni.hideLoading()
+							});
+						});
+					}));
+					promise.then(function(results) {
+						console.log(results);
+					}).catch(function(err) {
+						console.log(err);
+					});
+				}
+			});
+		},
+		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(res) {
+			this.$emit('editBlur', res);
+		},
+		release(isPublic) {
+			this.showSettingLayer = false;
+			this.editorCtx.getContents({
+				success: res => {
+					Object.assign(res, {
+						isPublic: isPublic
+					})
+					this.$emit('editOk', res);
+				} 
+			})
+		},
+		confirmContent(){
+			this.editorCtx.getContents({
+				success: res => {
+					this.$emit('editOk', res);
+				} 
+			})
+		}
+	}
+};
+</script>
+
+<style scoped>
+.ql-editor.ql-blank:before {
+	/* 此处设置 placeholder 样式 */
+	color: rgba(204, 204, 204, 1);
+	font-style: normal;
+}
+
+.container {
+	padding: 30rpx 0;
+	box-sizing: border-box;
+	padding-bottom: 120rpx;
+}
+
+.ql-container {
+	line-height: 160%;
+	font-size: 34rpx;
+	width: calc(100% - 60rpx); 
+	height: auto;
+	margin: 0 auto;
+	font-style: normal !important;
+} 
+#editor{
+	font-style: normal !important;
+}
+.tool-view{
+	width: 100vw;
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	
+}
+.tool {
+	height: 100rpx;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	width: 100%;
+	background: #eee;
+}
+
+.font-more {
+	position: absolute;
+	left: 0;
+	bottom: 100rpx;
+	display: flex;
+	align-items: center;
+	justify-content: space-around;
+	width: 100%;
+	background: rgb(235, 235, 235);
+	overflow: hidden;
+	transition: all 0.15s;
+}
+
+.setting-layer {
+	position: absolute;
+	bottom: 100rpx;
+	background: #fff;
+	width: 250rpx;
+	right: 20rpx;
+	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{
+	position: fixed;
+	left: 0;
+	top: 0;
+	width: 100vw;
+	height: 100vh;
+	background: transparent; 
+}
+
+</style>

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

@@ -0,0 +1,47 @@
+<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'); */
+	src:url('https://at.alicdn.com/t/font_1491431_6m7ltjo8wi.ttf') format('truetype');
+	/* src: url('./font_1491431_6m7ltjo8wi.ttf') format('truetype'); */
+}
+
+.icon {
+	font-family: jin !important;
+	font-size: 34rpx;
+}
+</style>

card/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} | 点击发布按钮触发	
+
+以上

card/editDesc/editDesc.vue

@@ -1,23 +1,17 @@
 <template>
 	<view class="content">
-		<editor
-			@ready="onEditorReady"
-			id="editor"
-			:placeholder="isCompanyIntroduction?'输入公司简介内容':'输入个人简介内容'"
-			placeholder-class="placeholder"
-			class="textarea"
-			@input="descInput"
-			:read-only="isReadOnly"
-		></editor>
-
-		<view class="btn" @click="save()">保存</view>
+		<view><jinEdit :placeholder="isCompanyIntroduction?'输入公司简介内容':'输入个人简介内容'" @editBlur="editBlur" @editOk="editOk" :html="brief" uploadFileUrl="/#"></jinEdit></view>
 	</view>
 </template>
 
 <script>
 const app = getApp();
 const req = require('../../utils/request.js');
+import jinEdit from '../components/jin-edit/jin-edit.vue';
 export default {
+	components: {
+		jinEdit
+	},
 	data() {
 		return {
 			id: '',
@@ -38,45 +32,31 @@ export default {
 			this.brief = prevPage.$vm.brief;
 		}
 	},
-
+	onUnload: function() {
+		// 页面销毁时执行保存
+		this.saveContent(this.brief, false);
+	},
 	methods: {
-		descInput(event) {
-			this.brief = event.detail.html;
-			// if (this.brief) {
-			// 	this.descLength = event.detail.text.length - 1;
-			// } else {
-			// 	this.descLength = 0;
-			// }
+		editBlur(res) {
+			this.brief = res.detail.html;
 		},
-		onEditorReady() {
-			if (this.isEndit) {
-				return;
-			}
-			const that = this;
-			uni.createSelectorQuery()
-				.select('#editor')
-				.context(function(res) {
-					that.editorCtx = res.context;
-					that.editorCtx.setContents({
-						html: that.brief //这里就是设置默认值的地方（html 后面给什么就显示什么）
-					});
-					that.isReadOnly = false;
-				})
-				.exec();
-		},
-
-		save() {
+		saveContent(content, isBack) {
 			let pages = getCurrentPages(); //获取所有页面栈实例列表
 			let prevPage = pages[pages.length - 2]; //上一页页面实例
 			if(this.isCompanyIntroduction){
-				prevPage.$vm.companyIntroduction = this.brief;
+				prevPage.$vm.companyIntroduction = content;
 			}else{
-				prevPage.$vm.brief = this.brief;
+				prevPage.$vm.brief = content;
 			}
-			uni.navigateBack({
-				//uni.navigateTo跳转的返回，默认1为返回上一级
-				delta: 1
-			});
+			if (isBack) {
+				uni.navigateBack({
+					delta: 1
+				});
+			}
+		},
+		// 点击发布
+		editOk(res) {
+			this.saveContent(res.html, true);
 		}
 	}
 };

card/index/index.vue

@@ -459,16 +459,17 @@
 		methods: {
 			
 			getConfig() {
+				console.log('getConfig')
 				var _this = this;
 				return new Promise((res, rej) => {
-					req.g(
-						'/api/other/config',
+					req.getRequest(
+						'/api/other/config',{},
 						data => {
 							req.setStorage('configRes', JSON.stringify(data));
 							this.config = data;
+							console.log(this.config.CONFIG_ABOUT_COMPANY)
 							res(data);
-						},
-						true
+						}
 					);
 				});
 			},