|
|
@@ -0,0 +1,375 @@
|
|
|
+<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>
|
