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