sooka_consult_uniapp/pages/demo/delis.vue

<template>
	<view class="gg-container">
		<view class="gg-tit">
			<view class="gg-title">
				我的吉农宝<text>上个页面传过来的参数{{id}}</text>
			</view>
			<view>
			<uni-section title="基本用法" type="line">
						<view class="example">
							<!-- 基础用法，不包含校验规则 -->
							<uni-forms ref="baseForm" :modelValue="baseFormData">
								<uni-forms-item label="姓名" required>
									<uni-easyinput v-model="baseFormData.name" placeholder="请输入姓名" />
								</uni-forms-item>
								<uni-forms-item label="年龄" required>
									<uni-easyinput v-model="baseFormData.age" placeholder="请输入年龄" />
								</uni-forms-item>
								<uni-forms-item label="性别" required>
									<uni-data-checkbox v-model="baseFormData.sex" :localdata="sexs" />
								</uni-forms-item>
								<uni-forms-item label="兴趣爱好" required>
									<uni-data-checkbox v-model="baseFormData.hobby" multiple :localdata="hobbys" />
								</uni-forms-item>
								<uni-forms-item label="自我介绍">
									<uni-easyinput type="textarea" v-model="baseFormData.introduction" placeholder="请输入自我介绍" />
								</uni-forms-item>
								<uni-forms-item label="日期时间">
									<uni-datetime-picker type="datetime" return-type="timestamp" v-model="baseFormData.datetimesingle"/>
								</uni-forms-item>
							</uni-forms>
						</view>
					</uni-section>
					<uni-section title="多行文本" subTitle="指定属性 type=textarea 使用多行文本框" type="line" padding>
						<uni-easyinput type="textarea" v-model="value" placeholder="请输入内容"></uni-easyinput>
					</uni-section>
					<view class="content">
						<editor
							class="myEdit"
							placeholder="写点什么吧~~"
							show-img-resize
							show-img-toolbar
							show-img-size
							@ready="onEditReady"
							@focus="OnFocus"
							@statuschange="statuschange"
						></editor>
					</view>
					<view class="btnGroup">
						<u-button type="primary" text="确认发表" @click="onSubmit" :disabled="!artData.title"></u-button>
					</view>
					<view class="tools" v-show="toolsShow">
						<!-- 标题 -->
						<view class="item" @click="headChange">
							<text class="iconfont icon-zitibiaoti" :class="headShow ? 'active' : ''"></text>
						</view>
						<!-- 加粗 -->
						<view class="item" @click="boldChange">
							<text class="iconfont icon-zitijiacu" :class="boldShow ? 'active' : ''"></text>
						</view>
						<!-- 斜体 -->
						<view class="item" @click="italicChange">
							<text class="iconfont icon-zitixieti" :class="italicShow ? 'active' : ''"></text>
						</view>
						<!-- 分割线 -->
						<view class="item" @click="insertDivider"><text class="iconfont icon-fengexian"></text></view>
						<view class="item" @click="insertImage"><text class="iconfont icon-charutupian"></text></view>
						<!-- 完成 -->
						<view class="item" @click="editOk"><text class="iconfont icon-duigou_kuai"></text></view>
					</view>
							    <!-- 这张图片就是自定义的图片，地址填写自己本地的就行 -->
					<image src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png" 
					mode="widthFix" style="width: 112rpx;height: 110rpx;" @click="uploadImagePhoto()"></image>
					
				</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				toolsShow: false,
				editorContent: null,
				headShow: false,
				boldShow: false,
				italicShow: false,
				artData: {
					title: '',
					content: ''
				},
				
				
				baseFormData: {
					name: '',
					age: '',
					introduction: '',
					sex: 2,
					hobby: [5],
					datetimesingle: 1627529992399
				},
				// 单选数据源
				sexs: [{
					text: '男',
					value: 0
				}, {
					text: '女',
					value: 1
				}, {
					text: '保密',
					value: 2
				}],
				// 多选数据源
				hobbys: [{
					text: '跑步',
					value: 0
				}, {
					text: '游泳',
					value: 1
				}, {
					text: '绘画',
					value: 2
				}, {
					text: '足球',
					value: 3
				}, {
					text: '篮球',
					value: 4
				}, {
					text: '其他',
					value: 5
				}],
				value: '',
				password: '',
				placeholderStyle: "color:#2979FF;font-size:14px",
				styles: {
					color: '#2979FF',
					borderColor: '#2979FF'
				},
				id:'',
				fileList1: []
			}

		},
		onLoad(options) {
			this.id = options.id;
		},
		onReady() {},
		methods: {
			input(e) {
				console.log('输入内容：', e);
			},
			iconClick(type) {
				uni.showToast({
					title: `点击了${type==='prefix'?'左侧':'右侧'}的图标`,
					icon: 'none'
				})
			},
			//*****************************************富文本编辑器方法**********************************************//
			// 初始化
			onEditReady() {
				// 查询节点信息的对象
				// 将选择器的选取范围更改为自定义组件 component 内，返回一个 SelectorQuery 对象实例。（初始时，选择器仅选取页面范围的节点，不会选取任何自定义组件中的节点）。
				// 在当前页面下选择第一个匹配选择器 selector 的节点，返回一个 NodesRef 对象实例，可以用于获取节点信息。
				// 获取节点的相关信息。第一个参数是节点相关信息配置（必选）；第二参数是方法的回调函数，参数是指定的相关节点信息。
				// 执行所有的请求。请求结果按请求次序构成数组，在 callback 的第一个参数中返回。
				uni.createSelectorQuery()
					.in(this)
					.select('.myEdit')
					.fields(
						{
							size: true, //是否返回节点尺寸（width height）
							context: true //是否返回节点尺寸（width height）
						},
						(res) => {
							console.log(res);
							this.editorContent = res.context;
						}
					)
					.exec();
			},
			// 离开焦点
			OnFocus() {
				this.toolsShow = true;
			},
			// 添加分割线
			insertDivider() {
				this.editorContent.insertDivider();
			},
			// 添加大标题
			headChange() {
				this.headShow = !this.headShow;
				this.editorContent.format('header', this.headShow ? 'H2' : false);
			},
			// 加粗
			boldChange() {
				this.boldShow = !this.boldShow;
				this.editorContent.format('bold');
			},
			// 斜体
			italicChange() {
				this.italicShow = !this.italicShow;
				this.editorContent.format('italic');
			},
			// 用于检查对象detail是否包含名为name的属性
			checkStatus(name, detail, key) {
				if (detail.hasOwnProperty(name)) {
					this[key] = true;
				} else {
					this[key] = false;
				}
			},
			// 通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式（解决标题标签回弹问题）
			statuschange(e) {
				let detail = e.detail;
				console.log(detail);
				this.checkStatus('header', detail, 'headShow');
				this.checkStatus('bold', detail, 'boldShow');
				this.checkStatus('italic', detail, 'italicShow');
			},
			// 添加图像
			insertImage() {
				// 打开相机
				uni.chooseImage({
					count: 3, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: async (res) => {
						let tempFiles = res.tempFiles;
						for (let item of tempFiles) {
							uni.showLoading({
								mask: true,
								title: '上传中...'
							});
							try {
								let res = await uniCloud.uploadFile({
									filePath: item.path, //要上传的文件对象
									cloudPath: item.name //cloudPath为云端文件名，
								});
								// 设置图片地址 图片地址，仅支持 http(s)、base64、本地图片
								this.editorContent.insertImage({
									src: res.fileID
								});
								uni.hideLoading();
							} catch (e) {
								uni.hideLoading();
								uni.showModal({
									content: '上传失败',
									title: '提示'
								});
							}
						}
					}
				});
			},
			// 确认
			editOk() {
				this.toolsShow = false;
			},
			onSubmit() {
				console.log(11);
				this.editorContent.getContents({
					success: (res) => {
						console.log(res);
						this.artData.content = res.html;
					}
				});
			},
			//*****************************************富文本编辑器方法**********************************************//
			uploadImagePhoto() {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
					}
				});
			},
			// 新增图片
			async afterRead(event) {
				console.log(event)
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			//上传图片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						//url: this.$common.domain+'/api/common/upload', // 仅为示例，非真实的接口地址
						// url:'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							let data=JSON.parse(res.data) //最终传给的是字符串，这里需要转换格式
							resolve(data.data.url)
						}
					});
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.uni-mt-5 {
		margin-top: 5px;
	}
	
	/deep/ .ql-blank::before {
		font-style: normal;
		color: #e0e0e0;
	}
	 
	.edit {
		padding: 30rpx;
		.title {
			input {
				height: 120rpx;
				font-size: 46rpx;
				border-bottom: 1px solid #e4e4e4;
				margin-bottom: 30rpx;
				color: #000;
			}
			.placeholderClass {
				color: #e0e0e0;
			}
		}
		.content {
			.myEdit {
				height: calc(100vh - 500rpx);
				margin-bottom: 30rpx;
			}
		}
		.tools {
			width: 100%;
			height: 80rpx;
			background: #fff;
			border-top: 1rpx solid #f4f4f4;
			position: fixed;
			left: 0;
			bottom: 0;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.iconfont {
				font-size: 36rpx;
				color: #333;
				// 选择按钮的高亮
				&.active {
					color: #0199fe;
				}
			}
		}
	}
</style>