upload image
parent
360825af63
commit
7cdea4108f
|
|
@ -1,3 +1,3 @@
|
||||||
ENV = 'production'
|
ENV = 'production'
|
||||||
|
|
||||||
VUE_APP_BASE_API = 'http://baozhitang.abcdefg.fun'
|
VUE_APP_BASE_API = 'http://www.xbzt.cc'
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>
|
<title>
|
||||||
<%= htmlWebpackPlugin.options.title %>
|
<%= htmlWebpackPlugin.options.title %>
|
||||||
</title>
|
</title>
|
||||||
|
|
@ -21,5 +22,4 @@
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -1,85 +0,0 @@
|
||||||
# 富文本编辑器插件
|
|
||||||
uniapp 富文本编辑器插件
|
|
||||||
|
|
||||||
## 兼容性
|
|
||||||
|微信小程序|H5|APP|
|
|
||||||
|:--:|:--:|:--:|
|
|
||||||
|√|√ |x|
|
|
||||||
|
|
||||||
## 使用方式
|
|
||||||
在 `script` 中引用组件
|
|
||||||
```js
|
|
||||||
import myeditor from "@/components/robin-editor/editor.vue"
|
|
||||||
export default {
|
|
||||||
components: {myeditor}
|
|
||||||
}
|
|
||||||
```
|
|
||||||
在 `template` 中使用组件
|
|
||||||
```html
|
|
||||||
<myeditor class="editor"
|
|
||||||
@cancel="hideEditor"
|
|
||||||
@save="saveEditor"
|
|
||||||
v-model="html"
|
|
||||||
:imageUploader="uploadImg"
|
|
||||||
:muiltImage="true">
|
|
||||||
</myeditor>
|
|
||||||
```
|
|
||||||
|
|
||||||
## Demo
|
|
||||||
https://github.com/health901/uniapp-editor-demo
|
|
||||||
|
|
||||||
## 属性说明
|
|
||||||
|属性|类型|默认值|说明|
|
|
||||||
|--|--|--|--|
|
|
||||||
|v-model|String| |富文本,双向绑定|
|
|
||||||
|imageUploader|function(img,callback)| |上传图片处理函数 接受参数 img:本地图片地址,callback:上传成功回调传入图片链接|
|
|
||||||
|muiltImage|Boolean|false|是否支持多图上传|
|
|
||||||
|compressImage|Boolean|true|图片上传是否压缩|
|
|
||||||
|previewMode|Boolean|false|预览模式,不可编辑|
|
|
||||||
|autoHideToolbar|Boolean|false|失去焦点时自动隐藏工具栏|
|
|
||||||
|tools|Array|['bold', 'italic', 'underline', 'strike', 'align-left', 'align-center', 'align-right', 'remove', 'font', 'color', 'backgroundColor','image', 'clear', 'preview']|工具栏|
|
|
||||||
|
|
||||||
### 工具栏
|
|
||||||
|名称|值|
|
|
||||||
|--|--|
|
|
||||||
|加粗|`bold`|
|
|
||||||
|斜体|`italic`|
|
|
||||||
|下划线|`underline`|
|
|
||||||
|删除线|`strike`|
|
|
||||||
|右对齐|`align-left`|
|
|
||||||
|居中|`align-center`|
|
|
||||||
|左对齐|`align-right`|
|
|
||||||
|清除格式|`remove`|
|
|
||||||
|字体大小|`font`|
|
|
||||||
|字体颜色|`color`|
|
|
||||||
|背景色|`backgroundColor`|
|
|
||||||
|插入图片|`image`|
|
|
||||||
|清空|`clear`|
|
|
||||||
|预览|`preview`|
|
|
||||||
|插入日期|`date`|
|
|
||||||
|列表|`list-check`,`list-ordered`,`list-bullet`|
|
|
||||||
|上下标|`sub`,`super`|
|
|
||||||
|撤销,恢复撤销|`undo`,`redo`|
|
|
||||||
|缩进|`indent`,`outdent`|
|
|
||||||
|分割线|`divider`|
|
|
||||||
|标题|`h1`,`h2`,`h3`,`h4`,`h5`,`h6`|
|
|
||||||
|书写方向|`rtl`|
|
|
||||||
|
|
||||||
## 事件说明
|
|
||||||
|事件|说明|参数|
|
|
||||||
|--|--|--|
|
|
||||||
|cancel|点击取消按钮|
|
|
||||||
|save|点击保存按钮|e={html,text,delta}|
|
|
||||||
|
|
||||||
## 依赖
|
|
||||||
|组件|链接|备注|
|
|
||||||
|---|--|--|
|
|
||||||
|Popup 弹出层<sup>[[1]](#注)</sup>|https://ext.dcloud.net.cn/plugin?id=329|uni-ui库|
|
|
||||||
|Transition动画|https://ext.dcloud.net.cn/plugin?id=1231|uni-ui库,Popup依赖|
|
|
||||||
|颜色选择器ColorPicker<sup>[[2]](#注)</sup>|https://ext.dcloud.net.cn/plugin?id=1237|字体颜色,背景色|
|
|
||||||
|
|
||||||
|
|
||||||
## 注
|
|
||||||
|
|
||||||
1. 修改:新增动画结束事件
|
|
||||||
2. 修改:添加按钮,支持预设颜色值
|
|
||||||
|
|
@ -1,289 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="content">
|
|
||||||
<topbar class="head" @cancel="cancel" @save="confirm"></topbar>
|
|
||||||
<view class="color-picker">
|
|
||||||
<view class="color-name">{{ colorName }}</view>
|
|
||||||
<view class="show-view" :style="{ background: colorName }"></view>
|
|
||||||
<view class="hue-view" @touchstart="pickHue" @touchmove="pickHue">
|
|
||||||
<text class="anchor" :style="{ left: hueView.anchorLeft + 'px' }"></text>
|
|
||||||
</view>
|
|
||||||
<view class="color-view" @touchstart="pickColor" @touchmove="pickColor" :style="{ backgroundColor: 'hsl(' + hueView.H + ', 100%, 50%)' }">
|
|
||||||
<text class="anchor" :style="{ top: colorView.anchorTop + 'px', left: colorView.anchorLeft + 'px' }"></text>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import topbar from '@/components/robin-editor/header.vue'
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
topbar
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
color: {
|
|
||||||
type: String,
|
|
||||||
default: ""
|
|
||||||
},
|
|
||||||
show: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
hueView: {},
|
|
||||||
colorView: {},
|
|
||||||
colorName: '',
|
|
||||||
hueLeft: 0.5, // 色相选择器初始位置 [0, 1]
|
|
||||||
anchorTop: 0.5, // 颜色选择器初始 top [0, 1]
|
|
||||||
anchorLeft: 0.5, // 颜色选择器初始 left [0, 1]
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
show: function(newval, oldvar) {
|
|
||||||
if (!oldvar && newval) {
|
|
||||||
this.init()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
if (this.show) {
|
|
||||||
this.init()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
init() {
|
|
||||||
const reg = /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})*$/
|
|
||||||
if (this.color !== '' && reg.test(this.color)) {
|
|
||||||
this.getColorOffset()
|
|
||||||
}
|
|
||||||
Promise.all([this.getHueViewOffset(), this.getColorViewOffset()]).then(() => {
|
|
||||||
this.colorName = this.getColorString() // 根据 HLS 计算 RGB 字符串
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getHueViewOffset() { // 获取色相选择区域尺寸
|
|
||||||
return new Promise(resolve => uni.createSelectorQuery().in(this).select('.hue-view').boundingClientRect(
|
|
||||||
data => {
|
|
||||||
this.hueView = {
|
|
||||||
...data,
|
|
||||||
anchorLeft: data.width * this.hueLeft,
|
|
||||||
H: this.hueLeft * 360,
|
|
||||||
}
|
|
||||||
resolve()
|
|
||||||
}).exec())
|
|
||||||
},
|
|
||||||
getColorViewOffset() { // 获取颜色选择区域尺寸
|
|
||||||
return new Promise(resolve => uni.createSelectorQuery().in(this).select('.color-view').boundingClientRect(
|
|
||||||
data => {
|
|
||||||
this.colorView = {
|
|
||||||
...data,
|
|
||||||
anchorTop: data.height * this.anchorTop,
|
|
||||||
anchorLeft: data.width * this.anchorLeft,
|
|
||||||
S: this.anchorLeft,
|
|
||||||
L: (1 - this.anchorLeft * 0.5) - this.anchorTop / (this.anchorLeft + 1)
|
|
||||||
}
|
|
||||||
resolve()
|
|
||||||
}).exec())
|
|
||||||
},
|
|
||||||
getColorString() { // 获取 RGB 颜色字符串
|
|
||||||
const arr = hslToRgb(this.hueView.anchorLeft / this.hueView.width, this.colorView.S, this.colorView.L)
|
|
||||||
const r = arr[0].toString(16).length === 1 ? `0${arr[0].toString(16)}` : arr[0].toString(16)
|
|
||||||
const g = arr[1].toString(16).length === 1 ? `0${arr[1].toString(16)}` : arr[1].toString(16)
|
|
||||||
const b = arr[2].toString(16).length === 1 ? `0${arr[2].toString(16)}` : arr[2].toString(16)
|
|
||||||
return `#${r.toUpperCase()}${g.toUpperCase()}${b.toUpperCase()}`
|
|
||||||
},
|
|
||||||
getColorOffset() {
|
|
||||||
var color = this.color.substr(1)
|
|
||||||
color = color.length == 6 ? color : color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(
|
|
||||||
1) + color.charAt(2) + color.charAt(2)
|
|
||||||
const r = parseInt("0x" + color.substr(0, 2))
|
|
||||||
const g = parseInt("0x" + color.substr(2, 2))
|
|
||||||
const b = parseInt("0x" + color.substr(4, 2))
|
|
||||||
const arr = rgbToHsl(r, g, b)
|
|
||||||
this.hueLeft = arr[0]
|
|
||||||
this.anchorLeft = arr[1]
|
|
||||||
this.anchorTop = ((1 - arr[1] * 0.5) - arr[2]) * (arr[1] + 1)
|
|
||||||
},
|
|
||||||
pickColor(e) { // 选择颜色
|
|
||||||
const top = e.touches[0].clientY - this.colorView.top
|
|
||||||
const left = e.touches[0].clientX - this.colorView.left
|
|
||||||
if (top < 0) {
|
|
||||||
this.colorView.anchorTop = 0
|
|
||||||
} else if (top > this.colorView.height) {
|
|
||||||
this.colorView.anchorTop = this.colorView.height
|
|
||||||
} else {
|
|
||||||
this.colorView.anchorTop = top
|
|
||||||
}
|
|
||||||
if (left < 0) {
|
|
||||||
this.colorView.anchorLeft = 0
|
|
||||||
} else if (left > this.colorView.width) {
|
|
||||||
this.colorView.anchorLeft = this.colorView.width
|
|
||||||
} else {
|
|
||||||
this.colorView.anchorLeft = e.touches[0].clientX - this.colorView.left
|
|
||||||
}
|
|
||||||
this.colorView.S = this.colorView.anchorLeft / this.colorView.width
|
|
||||||
this.colorView.L = this.floor((1 - this.colorView.S * 0.5) - this.colorView.anchorTop / this.colorView.height /
|
|
||||||
(this.colorView.S + 1))
|
|
||||||
this.colorName = this.getColorString() // 根据 HLS 计算 RGB 字符串
|
|
||||||
},
|
|
||||||
pickHue(e) { // 选择色相
|
|
||||||
if (e.touches[0].clientX >= this.hueView.left && e.touches[0].clientX <= this.hueView.right) {
|
|
||||||
this.hueView.anchorLeft = e.touches[0].clientX - this.hueView.left
|
|
||||||
this.hueView.H = this.hueView.anchorLeft / this.hueView.width * 360
|
|
||||||
this.colorName = this.getColorString() // 根据 HLS 计算 RGB 字符串
|
|
||||||
}
|
|
||||||
},
|
|
||||||
floor(num) {
|
|
||||||
return num < 0.09 ? 0 : num
|
|
||||||
},
|
|
||||||
confirm() {
|
|
||||||
this.$emit('confirm', {
|
|
||||||
color: this.colorName
|
|
||||||
})
|
|
||||||
},
|
|
||||||
cancel(){
|
|
||||||
this.$emit('cancel')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function hslToRgb(h, s, l) { // HSL 转 RGB 方法
|
|
||||||
var r, g, b;
|
|
||||||
if (s == 0) {
|
|
||||||
r = g = b = l; // achromatic
|
|
||||||
} else {
|
|
||||||
var hue2rgb = function hue2rgb(p, q, t) {
|
|
||||||
if (t < 0) t += 1;
|
|
||||||
if (t > 1) t -= 1;
|
|
||||||
if (t < 1 / 6) return p + (q - p) * 6 * t;
|
|
||||||
if (t < 1 / 2) return q;
|
|
||||||
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
|
|
||||||
return p;
|
|
||||||
}
|
|
||||||
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
|
||||||
var p = 2 * l - q;
|
|
||||||
r = hue2rgb(p, q, h + 1 / 3);
|
|
||||||
g = hue2rgb(p, q, h);
|
|
||||||
b = hue2rgb(p, q, h - 1 / 3);
|
|
||||||
}
|
|
||||||
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
|
|
||||||
}
|
|
||||||
|
|
||||||
function rgbToHsl(r, g, b) {
|
|
||||||
r /= 255, g /= 255, b /= 255;
|
|
||||||
var max = Math.max(r, g, b),
|
|
||||||
min = Math.min(r, g, b);
|
|
||||||
var h, s, l = (max + min) / 2;
|
|
||||||
if (max == min) {
|
|
||||||
h = s = 0; // achromatic
|
|
||||||
} else {
|
|
||||||
var d = max - min;
|
|
||||||
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
|
||||||
switch (max) {
|
|
||||||
case r:
|
|
||||||
h = (g - b) / d + (g < b ? 6 : 0);
|
|
||||||
break;
|
|
||||||
case g:
|
|
||||||
h = (b - r) / d + 2;
|
|
||||||
break;
|
|
||||||
case b:
|
|
||||||
h = (r - g) / d + 4;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
h /= 6;
|
|
||||||
}
|
|
||||||
|
|
||||||
var round = function(n, l) {
|
|
||||||
return Math.round(n * Math.pow(10, l)) / Math.pow(10, l)
|
|
||||||
}
|
|
||||||
return [round(h, 3), round(s, 3), round(l, 3)];
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.content {
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
background-color: #fff;
|
|
||||||
|
|
||||||
.head {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-picker {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.color-name {
|
|
||||||
margin: 23rpx;
|
|
||||||
font-size: 45rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
letter-spacing: 8rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.show-view {
|
|
||||||
height: 56rpx;
|
|
||||||
width: 567rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hue-view {
|
|
||||||
width: 567rpx;
|
|
||||||
height: 56rpx;
|
|
||||||
margin: 12rpx 0;
|
|
||||||
position: relative;
|
|
||||||
background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
|
|
||||||
|
|
||||||
.anchor {
|
|
||||||
width: 12rpx;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
background: #FFFFFF;
|
|
||||||
transform: translate(-50%);
|
|
||||||
box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.6);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-view {
|
|
||||||
width: 567rpx;
|
|
||||||
height: 345rpx;
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 12upx;
|
|
||||||
|
|
||||||
&::before,
|
|
||||||
&::after {
|
|
||||||
content: '';
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
background: linear-gradient(to right, white, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
background: linear-gradient(to top, black, transparent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.anchor {
|
|
||||||
z-index: 1;
|
|
||||||
width: 24rpx;
|
|
||||||
height: 24rpx;
|
|
||||||
border-radius: 50%;
|
|
||||||
position: absolute;
|
|
||||||
border: 4rpx solid #FFFFFF;
|
|
||||||
background: rgba(0, 0, 0, .3);
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,33 +1,31 @@
|
||||||
<template>
|
<template>
|
||||||
<u-popup :show="show">
|
<u-modal :show="show" showCancelButton @cancel="close" @confirm="confirm">
|
||||||
<robin-editor
|
<editor id="editor" placeholder="请输入内容" @ready="onEditorReady" />
|
||||||
v-model="value"
|
</u-modal>
|
||||||
class="editor"
|
|
||||||
@cancel="close"
|
|
||||||
@save="confirm"
|
|
||||||
:imageUploader="uploadImage"
|
|
||||||
/>
|
|
||||||
</u-popup>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import RobinEditor from '@/components/robin-editor/editor'
|
|
||||||
export default {
|
export default {
|
||||||
components: { RobinEditor },
|
|
||||||
name: 'CuEditor',
|
name: 'CuEditor',
|
||||||
props: {
|
|
||||||
placeholder: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
value: '',
|
value: '',
|
||||||
show: false,
|
show: false,
|
||||||
|
editor: ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
onEditorReady() {
|
||||||
|
uni.createSelectorQuery().select('#editor').context((res) => {
|
||||||
|
this.editor = res.context
|
||||||
|
if (this.value) {
|
||||||
|
this.editor.setContents({
|
||||||
|
html: this.value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}).exec()
|
||||||
|
},
|
||||||
open(value) {
|
open(value) {
|
||||||
this.value = value
|
this.value = value
|
||||||
this.show = true
|
this.show = true
|
||||||
|
|
@ -35,22 +33,16 @@ export default {
|
||||||
close() {
|
close() {
|
||||||
this.show = false
|
this.show = false
|
||||||
},
|
},
|
||||||
confirm(e) {
|
confirm() {
|
||||||
this.$emit('confirm', e)
|
if (this.editor) {
|
||||||
this.close()
|
this.editor.getContents({
|
||||||
|
success: (e) => {
|
||||||
|
this.$emit('confirm', e)
|
||||||
|
this.close()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
},
|
},
|
||||||
uploadImage(file, callback) {
|
|
||||||
this.$ajax.upload('/admin-api/upload_image', {
|
|
||||||
params: {'full-url': 1},
|
|
||||||
name: 'file',
|
|
||||||
filePath: file.path,
|
|
||||||
custom: { toast: false }
|
|
||||||
}).then(res => {
|
|
||||||
if (res.status == 0) {
|
|
||||||
callback(res.data.value)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
<template>
|
||||||
|
<u-upload
|
||||||
|
ref="cu-upload"
|
||||||
|
:fileList="fileList"
|
||||||
|
:maxCount="count"
|
||||||
|
:multiple="multiple"
|
||||||
|
previewFullImage
|
||||||
|
@afterRead="afterRead"
|
||||||
|
@delete="deletePic"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'CuImage',
|
||||||
|
props: {
|
||||||
|
count: {
|
||||||
|
type: Number,
|
||||||
|
default: 5
|
||||||
|
},
|
||||||
|
multiple: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
fileList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
deletePic(event) {
|
||||||
|
uni.showModal({
|
||||||
|
title: '删除图片',
|
||||||
|
content: '是否确定?',
|
||||||
|
success: (res) => {
|
||||||
|
if (res.confirm) {
|
||||||
|
this.fileList.splice(event.index, 1)
|
||||||
|
this.$emit('update', this.fileList)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
async afterRead(event) {
|
||||||
|
let lists = [].concat(event.file)
|
||||||
|
let fileListLen = this.fileList.length
|
||||||
|
lists.map((item) => {
|
||||||
|
this.fileList.push({
|
||||||
|
...item,
|
||||||
|
status: 'uploading',
|
||||||
|
message: '上传中'
|
||||||
|
})
|
||||||
|
})
|
||||||
|
for (let i = 0; i < lists.length; i++) {
|
||||||
|
const res = await this.upload(lists[i])
|
||||||
|
let item = this.fileList[fileListLen]
|
||||||
|
this.fileList.splice(fileListLen, 1, Object.assign(item, {
|
||||||
|
status: res.status == 0 ? 'success' : 'failed',
|
||||||
|
message: res.msg,
|
||||||
|
url: res.status == 0 ? res.data.value : lists[i].url
|
||||||
|
}))
|
||||||
|
fileListLen++
|
||||||
|
}
|
||||||
|
this.$emit('update', this.fileList)
|
||||||
|
},
|
||||||
|
upload(file) {
|
||||||
|
return this.$ajax.upload('/admin-api/upload_image', {
|
||||||
|
params: { 'full-url': 1 },
|
||||||
|
filePath: file.url,
|
||||||
|
custom: { toast: false, loading: false },
|
||||||
|
name: 'file'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getList() {
|
||||||
|
return this.fileList
|
||||||
|
},
|
||||||
|
setList(list) {
|
||||||
|
this.fileList = list
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -1,236 +0,0 @@
|
||||||
@font-face {
|
|
||||||
font-family: "iconfont";
|
|
||||||
src: url('~./editor-icon.ttf') format('truetype');
|
|
||||||
}
|
|
||||||
|
|
||||||
.iconfont {
|
|
||||||
font-family: "iconfont" !important;
|
|
||||||
font-size: 16px;
|
|
||||||
font-style: normal;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-redo:before {
|
|
||||||
content: "\e627";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-undo:before {
|
|
||||||
content: "\e633";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-indent:before {
|
|
||||||
content: "\eb28";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-outdent:before {
|
|
||||||
content: "\e6e8";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-fontsize:before {
|
|
||||||
content: "\e6fd";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-format-header-1:before {
|
|
||||||
content: "\e860";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-format-header-4:before {
|
|
||||||
content: "\e863";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-format-header-5:before {
|
|
||||||
content: "\e864";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-format-header-6:before {
|
|
||||||
content: "\e865";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-clearup:before {
|
|
||||||
content: "\e64d";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-preview:before {
|
|
||||||
content: "\e631";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-date:before {
|
|
||||||
content: "\e63e";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-fontbgcolor:before {
|
|
||||||
content: "\e678";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-clearedformat:before {
|
|
||||||
content: "\e67e";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-font:before {
|
|
||||||
content: "\e684";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-723bianjiqi_duanhouju:before {
|
|
||||||
content: "\e65f";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-722bianjiqi_duanqianju:before {
|
|
||||||
content: "\e660";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-text_color:before {
|
|
||||||
content: "\e72c";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-format-header-2:before {
|
|
||||||
content: "\e75c";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-format-header-3:before {
|
|
||||||
content: "\e75d";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon--checklist:before {
|
|
||||||
content: "\e664";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-baocun:before {
|
|
||||||
content: "\ec09";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-line-height:before {
|
|
||||||
content: "\e7f8";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-quanping:before {
|
|
||||||
content: "\ec13";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-direction-rtl:before {
|
|
||||||
content: "\e66e";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-direction-ltr:before {
|
|
||||||
content: "\e66d";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-selectall:before {
|
|
||||||
content: "\e62b";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-fuzhi:before {
|
|
||||||
content: "\ec7a";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-shanchu:before {
|
|
||||||
content: "\ec7b";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-bianjisekuai:before {
|
|
||||||
content: "\ec7c";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-fengexian:before {
|
|
||||||
content: "\ec7f";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-dianzan:before {
|
|
||||||
content: "\ec80";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-charulianjie:before {
|
|
||||||
content: "\ec81";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-charutupian:before {
|
|
||||||
content: "\ec82";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-wuxupailie:before {
|
|
||||||
content: "\ec83";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-juzhongduiqi:before {
|
|
||||||
content: "\ec84";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-yinyong:before {
|
|
||||||
content: "\ec85";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-youxupailie:before {
|
|
||||||
content: "\ec86";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-youduiqi:before {
|
|
||||||
content: "\ec87";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-zitidaima:before {
|
|
||||||
content: "\ec88";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-xiaolian:before {
|
|
||||||
content: "\ec89";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-zitijiacu:before {
|
|
||||||
content: "\ec8a";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-zitishanchuxian:before {
|
|
||||||
content: "\ec8b";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-zitishangbiao:before {
|
|
||||||
content: "\ec8c";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-zitibiaoti:before {
|
|
||||||
content: "\ec8d";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-zitixiahuaxian:before {
|
|
||||||
content: "\ec8e";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-zitixieti:before {
|
|
||||||
content: "\ec8f";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-zitiyanse:before {
|
|
||||||
content: "\ec90";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-zuoduiqi:before {
|
|
||||||
content: "\ec91";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-zitiyulan:before {
|
|
||||||
content: "\ec92";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-zitixiabiao:before {
|
|
||||||
content: "\ec93";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-zuoyouduiqi:before {
|
|
||||||
content: "\ec94";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-duigoux:before {
|
|
||||||
content: "\ec9e";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-guanbi:before {
|
|
||||||
content: "\eca0";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-shengyin_shiti:before {
|
|
||||||
content: "\eca5";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-Character-Spacing:before {
|
|
||||||
content: "\e964";
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
|
@ -1,488 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="wrapper">
|
|
||||||
<topbar class="header" @cancel="cancel" @save="save" :labelConfirm="labelConfirm" :labelCancel="labelCancel"></topbar>
|
|
||||||
<view :style="'height:' + editorHeight + 'px;'" class="container" v-if="!previewMode" v-show="!showPreview">
|
|
||||||
<editor
|
|
||||||
v-if="!previewMode"
|
|
||||||
v-show="!showPreview"
|
|
||||||
id="editor"
|
|
||||||
class="ql-container"
|
|
||||||
placeholder="开始输入..."
|
|
||||||
showImgSize
|
|
||||||
showImgToolbar
|
|
||||||
showImgResize
|
|
||||||
@statuschange="onStatusChange"
|
|
||||||
:read-only="readOnly"
|
|
||||||
@ready="onEditorReady"
|
|
||||||
></editor>
|
|
||||||
</view>
|
|
||||||
<view class="toolbar" @tap="format" v-if="!showPreview" v-show="keyboardHeight || !autoHideToolbar" :style="'bottom:' + (isIOS ? keyboardHeight : 0) + 'px'">
|
|
||||||
<block v-for="(t, i) in tools" :key="i">
|
|
||||||
<view v-if="t == 'bold'" :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold" data-label="加粗"></view>
|
|
||||||
<view v-if="t == 'italic'" :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic" data-label="斜体"></view>
|
|
||||||
<view v-if="t == 'underline'" :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline" data-label="下滑线"></view>
|
|
||||||
<view v-if="t == 'strike'" :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike" data-label="删除线"></view>
|
|
||||||
<view
|
|
||||||
v-if="t == 'align-left'"
|
|
||||||
:class="formats.align === 'left' || !formats.align ? 'ql-active' : ''"
|
|
||||||
class="iconfont icon-zuoduiqi"
|
|
||||||
data-name="align"
|
|
||||||
data-value="left"
|
|
||||||
data-label="居左"
|
|
||||||
></view>
|
|
||||||
<view
|
|
||||||
v-if="t == 'align-center'"
|
|
||||||
:class="formats.align === 'center' ? 'ql-active' : ''"
|
|
||||||
class="iconfont icon-juzhongduiqi"
|
|
||||||
data-name="align"
|
|
||||||
data-value="center"
|
|
||||||
data-label="居中"
|
|
||||||
></view>
|
|
||||||
<view
|
|
||||||
v-if="t == 'align-right'"
|
|
||||||
:class="formats.align === 'right' ? 'ql-active' : ''"
|
|
||||||
class="iconfont icon-youduiqi"
|
|
||||||
data-name="align"
|
|
||||||
data-value="right"
|
|
||||||
data-label="居右"
|
|
||||||
></view>
|
|
||||||
<view
|
|
||||||
v-if="t == 'align-justify'"
|
|
||||||
:class="formats.align === 'justify' ? 'ql-active' : ''"
|
|
||||||
class="iconfont icon-zuoyouduiqi"
|
|
||||||
data-name="align"
|
|
||||||
data-value="justify"
|
|
||||||
data-label="平铺"
|
|
||||||
></view>
|
|
||||||
<!-- <view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height" data-name="lineHeight"
|
|
||||||
data-value="2"></view>
|
|
||||||
<view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing" data-name="letterSpacing"
|
|
||||||
data-value="2em"></view>
|
|
||||||
<view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju" data-name="marginTop"
|
|
||||||
data-value="20px"></view>
|
|
||||||
<view :class="formats.previewarginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju"
|
|
||||||
data-name="marginBottom" data-value="20px"></view> -->
|
|
||||||
<view v-if="t == 'remove'" class="iconfont icon-clearedformat" @tap.stop="removeFormat"></view>
|
|
||||||
<picker v-if="t == 'font'" class="iconfont" mode="selector" :range="fontSizeRange" @change="fontSize"><view class="icon-fontsize"></view></picker>
|
|
||||||
<view
|
|
||||||
v-if="t == 'color'"
|
|
||||||
:style="fontColor != '#FFFFFF' ? 'color:' + formats.color : ''"
|
|
||||||
class="iconfont icon-text_color"
|
|
||||||
data-name="color"
|
|
||||||
@tap.stop="openColor"
|
|
||||||
></view>
|
|
||||||
<view
|
|
||||||
v-if="t == 'backgroundColor'"
|
|
||||||
:style="bgColor ? 'color:' + formats.backgroundColor : ''"
|
|
||||||
class="iconfont icon-fontbgcolor"
|
|
||||||
data-name="backgroundColor"
|
|
||||||
@tap.stop="openColor"
|
|
||||||
></view>
|
|
||||||
<view v-if="t == 'image'" class="iconfont icon-charutupian" @tap.stop="insertImage"></view>
|
|
||||||
<view v-if="t == 'clear'" class="iconfont icon-shanchu" @tap.stop="clear"></view>
|
|
||||||
<view v-if="t == 'preview'" class="iconfont icon-preview" @tap.stop="preview"></view>
|
|
||||||
<view v-if="t == 'date'" class="iconfont icon-date" @tap="insertDate"></view>
|
|
||||||
<view v-if="t == 'list-check'" class="iconfont icon-checklist" data-name="list" data-value="check"></view>
|
|
||||||
<view
|
|
||||||
v-if="t == 'list-ordered'"
|
|
||||||
:class="formats.list === 'ordered' ? 'ql-active' : ''"
|
|
||||||
class="iconfont icon-youxupailie"
|
|
||||||
data-name="list"
|
|
||||||
data-value="ordered"
|
|
||||||
></view>
|
|
||||||
<view v-if="t == 'list-bullet'" :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list" data-value="bullet"></view>
|
|
||||||
<view v-if="t == 'undo'" class="iconfont icon-undo" @tap="undo"></view>
|
|
||||||
<view v-if="t == 'redo'" class="iconfont icon-redo" @tap="redo"></view>
|
|
||||||
<view v-if="t == 'outdent'" class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
|
|
||||||
<view v-if="t == 'indent'" class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
|
|
||||||
<view v-if="t == 'divider'" class="iconfont icon-fengexian" @tap="insertDivider"></view>
|
|
||||||
<view v-if="t == 'h1'" :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1" data-name="header" :data-value="1"></view>
|
|
||||||
<view v-if="t == 'h2'" :class="formats.header === 2 ? 'ql-active' : ''" class="iconfont icon-format-header-2" data-name="header" :data-value="2"></view>
|
|
||||||
<view v-if="t == 'h3'" :class="formats.header === 3 ? 'ql-active' : ''" class="iconfont icon-format-header-3" data-name="header" :data-value="3"></view>
|
|
||||||
<view v-if="t == 'h4'" :class="formats.header === 4 ? 'ql-active' : ''" class="iconfont icon-format-header-4" data-name="header" :data-value="4"></view>
|
|
||||||
<view v-if="t == 'h5'" :class="formats.header === 5 ? 'ql-active' : ''" class="iconfont icon-format-header-5" data-name="header" :data-value="5"></view>
|
|
||||||
<view v-if="t == 'h6'" :class="formats.header === 6 ? 'ql-active' : ''" class="iconfont icon-format-header-6" data-name="header" :data-value="6"></view>
|
|
||||||
<view v-if="t == 'sub'" :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao" data-name="script" data-value="sub"></view>
|
|
||||||
<view v-if="t == 'super'" :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao" data-name="script" data-value="super"></view>
|
|
||||||
<view
|
|
||||||
v-if="t == 'rtl'"
|
|
||||||
:class="formats.direction === 'rtl' ? 'ql-active' : ''"
|
|
||||||
class="iconfont icon-direction-rtl"
|
|
||||||
data-name="direction"
|
|
||||||
:data-value="formats.direction === 'rtl' ? '' : 'rtl'"
|
|
||||||
></view>
|
|
||||||
</block>
|
|
||||||
</view>
|
|
||||||
<uni-popup ref="popup" type="bottom" @transed="colorPop">
|
|
||||||
<colorPicker :color="color" :show="showColor" @confirm="colorChanged" @cancel="colorPopClose"></colorPicker>
|
|
||||||
</uni-popup>
|
|
||||||
<view class="preview" v-show="showPreview"><rich-text :nodes="htmlData" class="previewNodes"></rich-text></view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import colorPicker from '@/components/colorPicker.vue';
|
|
||||||
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
|
||||||
import topbar from './header.vue';
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
colorPicker,
|
|
||||||
uniPopup,
|
|
||||||
topbar
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
value: {
|
|
||||||
type: String
|
|
||||||
},
|
|
||||||
imageUploader: {
|
|
||||||
type: Function
|
|
||||||
},
|
|
||||||
muiltImage: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
compressImage: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
previewMode: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
autoHideToolbar: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
tools: {
|
|
||||||
type: Array,
|
|
||||||
default: function() {
|
|
||||||
return [
|
|
||||||
'bold',
|
|
||||||
'italic',
|
|
||||||
'underline',
|
|
||||||
'strike',
|
|
||||||
'align-left',
|
|
||||||
'align-center',
|
|
||||||
'align-right',
|
|
||||||
'remove',
|
|
||||||
'font',
|
|
||||||
'color',
|
|
||||||
'backgroundColor',
|
|
||||||
'image',
|
|
||||||
'clear',
|
|
||||||
'preview'
|
|
||||||
];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
show: true,
|
|
||||||
readOnly: false,
|
|
||||||
formats: {},
|
|
||||||
fontColor: '#000000',
|
|
||||||
bgColor: '',
|
|
||||||
color: '',
|
|
||||||
colorPickerName: '',
|
|
||||||
showColor: false,
|
|
||||||
fontSizeRange: [10, 12, 14, 16, 18, 24, 32],
|
|
||||||
showPreview: false,
|
|
||||||
htmlData: '',
|
|
||||||
html: '',
|
|
||||||
keyboardHeight: 0,
|
|
||||||
editorHeight: 0,
|
|
||||||
isIOS: false
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
value: function(newvar) {
|
|
||||||
this.html = newvar;
|
|
||||||
},
|
|
||||||
html: function(newvar) {
|
|
||||||
if (this.previewMode) {
|
|
||||||
this.previewData(this.html);
|
|
||||||
}
|
|
||||||
if (this.editorCtx) {
|
|
||||||
this.editorCtx.setContents({
|
|
||||||
html: this.html
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
this.html = this.value;
|
|
||||||
},
|
|
||||||
mounted: function() {
|
|
||||||
const platform = uni.getSystemInfoSync().platform;
|
|
||||||
this.isIOS = platform === 'ios';
|
|
||||||
if (this.previewMode) {
|
|
||||||
this.previewData(this.html);
|
|
||||||
}
|
|
||||||
let keyboardHeight = 0;
|
|
||||||
this.updatePosition(0);
|
|
||||||
uni.onKeyboardHeightChange(res => {
|
|
||||||
if (res.height === keyboardHeight) return;
|
|
||||||
const duration = res.height > 0 ? res.duration * 1000 : 0;
|
|
||||||
keyboardHeight = res.height;
|
|
||||||
setTimeout(() => {
|
|
||||||
uni.pageScrollTo({
|
|
||||||
scrollTop: 0,
|
|
||||||
success: () => {
|
|
||||||
this.updatePosition(keyboardHeight);
|
|
||||||
this.editorCtx && this.editorCtx.scrollIntoView();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, duration);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
labelConfirm: function() {
|
|
||||||
return this.showPreview ? '关闭' : '保存';
|
|
||||||
},
|
|
||||||
labelCancel: function() {
|
|
||||||
return this.showPreview ? '' : '取消';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
updatePosition(keyboardHeight) {
|
|
||||||
const { windowHeight, windowWidth, platform } = uni.getSystemInfoSync();
|
|
||||||
const rpx = windowWidth / 750;
|
|
||||||
let topbarHeight = 85 * rpx;
|
|
||||||
//#ifdef H5
|
|
||||||
topbarHeight += 44;
|
|
||||||
//#endif
|
|
||||||
const toolbarHeight = (70 * Math.ceil(this.tools.length / 15) + 1) * rpx;
|
|
||||||
|
|
||||||
const bodyHeight = windowHeight - topbarHeight;
|
|
||||||
this.keyboardHeight = keyboardHeight;
|
|
||||||
this.editorHeight = keyboardHeight > 0 ? bodyHeight - keyboardHeight - toolbarHeight : this.autoHideToolbar ? bodyHeight : bodyHeight - toolbarHeight;
|
|
||||||
},
|
|
||||||
openColor(e) {
|
|
||||||
var name = e.currentTarget.dataset.name;
|
|
||||||
var color = this.formats[name];
|
|
||||||
this.colorPickerName = name;
|
|
||||||
if (name == 'backgroundColor' && !color) {
|
|
||||||
color = '#FFFFFF';
|
|
||||||
}
|
|
||||||
if (name == 'color' && !color) {
|
|
||||||
color = '#000000';
|
|
||||||
}
|
|
||||||
this.color = color;
|
|
||||||
this.$refs.popup.open({
|
|
||||||
type: 'bottom'
|
|
||||||
});
|
|
||||||
},
|
|
||||||
colorPop(e) {
|
|
||||||
this.showColor = e.show;
|
|
||||||
},
|
|
||||||
colorPopClose() {
|
|
||||||
this.$refs.popup.close();
|
|
||||||
},
|
|
||||||
colorChanged(e) {
|
|
||||||
let label = '';
|
|
||||||
switch (this.colorPickerName) {
|
|
||||||
case 'backgroundColor':
|
|
||||||
if (e.color == '#FFFFFF') {
|
|
||||||
e.color = '';
|
|
||||||
}
|
|
||||||
this.bgColor = e.color;
|
|
||||||
label = '背景色';
|
|
||||||
break;
|
|
||||||
case 'color':
|
|
||||||
this.fontColor = e.color;
|
|
||||||
label = '颜色';
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
this.colorPopClose();
|
|
||||||
this._format(this.colorPickerName, e.color, label + e.color);
|
|
||||||
},
|
|
||||||
readOnlyChange() {
|
|
||||||
this.readOnly = !this.readOnly;
|
|
||||||
},
|
|
||||||
onEditorReady() {
|
|
||||||
uni.createSelectorQuery()
|
|
||||||
.in(this)
|
|
||||||
.select('#editor')
|
|
||||||
.context(res => {
|
|
||||||
this.editorCtx = res.context;
|
|
||||||
if (this.html) {
|
|
||||||
this.editorCtx.setContents({
|
|
||||||
html: this.html
|
|
||||||
});
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.exec();
|
|
||||||
},
|
|
||||||
undo() {
|
|
||||||
this.editorCtx.undo();
|
|
||||||
this.toast('撤销');
|
|
||||||
},
|
|
||||||
redo() {
|
|
||||||
this.editorCtx.redo();
|
|
||||||
this.toast('重做');
|
|
||||||
},
|
|
||||||
format(e) {
|
|
||||||
let { name, value, label } = e.target.dataset;
|
|
||||||
if (!name) return;
|
|
||||||
this._format(name, value, label);
|
|
||||||
},
|
|
||||||
_format(name, value, label) {
|
|
||||||
this.editorCtx.format(name, value);
|
|
||||||
this.toast(label);
|
|
||||||
},
|
|
||||||
toast(label) {
|
|
||||||
uni.showToast({
|
|
||||||
duration: 600,
|
|
||||||
icon: 'none',
|
|
||||||
title: label
|
|
||||||
});
|
|
||||||
},
|
|
||||||
onStatusChange(e) {
|
|
||||||
const formats = e.detail;
|
|
||||||
this.formats = formats;
|
|
||||||
},
|
|
||||||
insertDivider() {
|
|
||||||
this.editorCtx.insertDivider({
|
|
||||||
success: function() {
|
|
||||||
this.toast('插入分割线');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
clear() {
|
|
||||||
this.editorCtx.clear({
|
|
||||||
success: res => {
|
|
||||||
this.toast('清空');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
removeFormat() {
|
|
||||||
this.editorCtx.removeFormat();
|
|
||||||
this.toast('清除格式');
|
|
||||||
},
|
|
||||||
insertDate() {
|
|
||||||
const date = new Date();
|
|
||||||
const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
|
|
||||||
this.editorCtx.insertText({
|
|
||||||
text: formatDate
|
|
||||||
});
|
|
||||||
this.toast('插入日期');
|
|
||||||
},
|
|
||||||
insertImage() {
|
|
||||||
let params = {};
|
|
||||||
params.count = this.muiltImage ? 9 : 1;
|
|
||||||
params.sizeType = this.compressImage ? ['compressed'] : ['original'];
|
|
||||||
uni.chooseImage({
|
|
||||||
...params,
|
|
||||||
success: res => {
|
|
||||||
res.tempFiles.map(path => {
|
|
||||||
this.imageUploader(path, url => {
|
|
||||||
this.editorCtx.insertImage({
|
|
||||||
src: url,
|
|
||||||
alt: '图像'
|
|
||||||
});
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
fontSize(e) {
|
|
||||||
const index = e.detail.value;
|
|
||||||
const fz = this.fontSizeRange[index] + 'px';
|
|
||||||
this._format('fontSize', fz, '字体大小:' + fz);
|
|
||||||
},
|
|
||||||
cancel() {
|
|
||||||
this.$emit('cancel');
|
|
||||||
},
|
|
||||||
save() {
|
|
||||||
if (this.showPreview) {
|
|
||||||
if (this.previewMode) {
|
|
||||||
this.cancel();
|
|
||||||
} else {
|
|
||||||
this.showPreview = false;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
this.editorCtx.getContents({
|
|
||||||
success: res => {
|
|
||||||
this.$emit('save', res);
|
|
||||||
this.$emit('input', res.html);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
previewData: function(html) {
|
|
||||||
this.htmlData = html.replace(/\<img/gi, '<img style="max-width:100%;height:auto"');
|
|
||||||
this.showPreview = true;
|
|
||||||
},
|
|
||||||
preview: function() {
|
|
||||||
this.editorCtx.getContents({
|
|
||||||
success: res => {
|
|
||||||
this.previewData(res.html);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import './editor-icon.css';
|
|
||||||
|
|
||||||
.wrapper {
|
|
||||||
padding: 5px;
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.header {
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 20rpx;
|
|
||||||
background: #fff;
|
|
||||||
|
|
||||||
.ql-container {
|
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
font-size: 16px;
|
|
||||||
line-height: 1.5;
|
|
||||||
overflow: auto;
|
|
||||||
padding: 20rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar {
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
box-sizing: border-box;
|
|
||||||
font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
|
|
||||||
background-color: #fff;
|
|
||||||
border-top: 1px solid #eee;
|
|
||||||
line-height: 50rpx;
|
|
||||||
|
|
||||||
.iconfont {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 10rpx 0;
|
|
||||||
width: 50rpx;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 34rpx;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.preview {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 90rpx;
|
|
||||||
|
|
||||||
.previewNodes {
|
|
||||||
width: 100%;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ql-active {
|
|
||||||
color: #06c;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<template>
|
|
||||||
<view class="head">
|
|
||||||
<view class="btn left" @tap="cancel" v-if="labelCancel">{{labelCancel}}</view>
|
|
||||||
<view class="btn right" @tap="save" v-if="labelConfirm">{{labelConfirm}}</view>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props:{
|
|
||||||
labelCancel:{
|
|
||||||
type:String,
|
|
||||||
default:"取消"
|
|
||||||
},
|
|
||||||
labelConfirm:{
|
|
||||||
type:String,
|
|
||||||
default:"确定"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods:{
|
|
||||||
cancel:function(){
|
|
||||||
this.$emit('cancel')
|
|
||||||
},
|
|
||||||
save:function(){
|
|
||||||
this.$emit('save')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.head {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-bottom: 1px #eee solid;
|
|
||||||
// box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
|
|
||||||
background: #fff;
|
|
||||||
.btn {
|
|
||||||
display: block;
|
|
||||||
width: 150upx;
|
|
||||||
height: 80upx;
|
|
||||||
line-height: 80upx;
|
|
||||||
font-size: 30upx;
|
|
||||||
color: #666;
|
|
||||||
padding-left: 20upx;
|
|
||||||
text-align: center;
|
|
||||||
&.left{
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
&.right{
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -38,7 +38,7 @@ export default {
|
||||||
perPage: 20,
|
perPage: 20,
|
||||||
loading: true,
|
loading: true,
|
||||||
// 'loading', 'nomore', 'loadmore'
|
// 'loading', 'nomore', 'loadmore'
|
||||||
status: 'loading',
|
status: 'loadmore',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
@ -58,6 +58,7 @@ export default {
|
||||||
if (refresh) {
|
if (refresh) {
|
||||||
this.page = 1
|
this.page = 1
|
||||||
this.list = []
|
this.list = []
|
||||||
|
this.status = 'loadmore'
|
||||||
}
|
}
|
||||||
if (this.status == 'nomore') {
|
if (this.status == 'nomore') {
|
||||||
return ;
|
return ;
|
||||||
|
|
|
||||||
|
|
@ -1,273 +0,0 @@
|
||||||
<template>
|
|
||||||
<view v-if="showPopup" class="uni-popup" @touchmove.stop.prevent="clear">
|
|
||||||
<uni-transition :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="showTrans" @click="onTap" />
|
|
||||||
<uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
|
|
||||||
<view class="uni-popup__wrapper-box" @click.stop="clear">
|
|
||||||
<slot />
|
|
||||||
</view>
|
|
||||||
</uni-transition>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import uniTransition from '../uni-transition/uni-transition.vue'
|
|
||||||
|
|
||||||
/**
|
|
||||||
* PopUp 弹出层
|
|
||||||
* @description 弹出层组件，为了解决遮罩弹层的问题
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
|
||||||
* @property {String} type = [top|center|bottom] 弹出方式
|
|
||||||
* @value top 顶部弹出
|
|
||||||
* @value center 中间弹出
|
|
||||||
* @value bottom 底部弹出
|
|
||||||
* @property {Boolean} animation = [ture|false] 是否开启动画
|
|
||||||
* @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
|
|
||||||
* @event {Function} change 打开关闭弹窗触发，e={show: false}
|
|
||||||
*/
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'UniPopup',
|
|
||||||
components: {
|
|
||||||
uniTransition
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
// 开启动画
|
|
||||||
animation: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
},
|
|
||||||
// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
|
|
||||||
type: {
|
|
||||||
type: String,
|
|
||||||
default: 'center'
|
|
||||||
},
|
|
||||||
// maskClick
|
|
||||||
maskClick: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
duration: 300,
|
|
||||||
ani: [],
|
|
||||||
showPopup: false,
|
|
||||||
showTrans: false,
|
|
||||||
maskClass: {
|
|
||||||
'position': 'fixed',
|
|
||||||
'bottom': 0,
|
|
||||||
'top': 0,
|
|
||||||
'left': 0,
|
|
||||||
'right': 0,
|
|
||||||
'backgroundColor': 'rgba(0, 0, 0, 0.4)'
|
|
||||||
},
|
|
||||||
transClass: {
|
|
||||||
'position': 'fixed',
|
|
||||||
'left': 0,
|
|
||||||
'right': 0,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
type: {
|
|
||||||
handler: function(newVal) {
|
|
||||||
switch (this.type) {
|
|
||||||
case 'top':
|
|
||||||
this.ani = ['slide-top']
|
|
||||||
this.transClass = {
|
|
||||||
'position': 'fixed',
|
|
||||||
'left': 0,
|
|
||||||
'right': 0,
|
|
||||||
}
|
|
||||||
break
|
|
||||||
case 'bottom':
|
|
||||||
this.ani = ['slide-bottom']
|
|
||||||
this.transClass = {
|
|
||||||
'position': 'fixed',
|
|
||||||
'left': 0,
|
|
||||||
'right': 0,
|
|
||||||
'bottom': 0
|
|
||||||
}
|
|
||||||
break
|
|
||||||
case 'center':
|
|
||||||
this.ani = ['zoom-out', 'fade']
|
|
||||||
this.transClass = {
|
|
||||||
'position': 'fixed',
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
'display': 'flex',
|
|
||||||
'flexDirection': 'column',
|
|
||||||
/* #endif */
|
|
||||||
'bottom': 0,
|
|
||||||
'left': 0,
|
|
||||||
'right': 0,
|
|
||||||
'top': 0,
|
|
||||||
'justifyContent': 'center',
|
|
||||||
'alignItems': 'center'
|
|
||||||
}
|
|
||||||
|
|
||||||
break
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
if (this.animation) {
|
|
||||||
this.duration = 300
|
|
||||||
} else {
|
|
||||||
this.duration = 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
clear(e) {
|
|
||||||
// TODO nvue 取消冒泡
|
|
||||||
e.stopPropagation()
|
|
||||||
},
|
|
||||||
open() {
|
|
||||||
this.showPopup = true
|
|
||||||
this.$nextTick(() => {
|
|
||||||
clearTimeout(this.timer)
|
|
||||||
this.timer = setTimeout(() => {
|
|
||||||
this.showTrans = true
|
|
||||||
}, 50);
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.$emit('transed', {
|
|
||||||
show: true
|
|
||||||
})
|
|
||||||
},this.duration)
|
|
||||||
})
|
|
||||||
this.$emit('change', {
|
|
||||||
show: true
|
|
||||||
})
|
|
||||||
},
|
|
||||||
close(type) {
|
|
||||||
this.showTrans = false
|
|
||||||
this.$nextTick(() => {
|
|
||||||
clearTimeout(this.timer)
|
|
||||||
this.timer = setTimeout(() => {
|
|
||||||
this.$emit('change', {
|
|
||||||
show: false
|
|
||||||
})
|
|
||||||
this.showPopup = false
|
|
||||||
setTimeout(()=>{
|
|
||||||
this.$emit('transed', {
|
|
||||||
show: false
|
|
||||||
})
|
|
||||||
},this.duration)
|
|
||||||
}, 300)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
onTap() {
|
|
||||||
if (!this.maskClick) return
|
|
||||||
this.close()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.uni-popup {
|
|
||||||
position: fixed;
|
|
||||||
/* #ifdef H5 */
|
|
||||||
top: var(--window-top);
|
|
||||||
/* #endif */
|
|
||||||
/* #ifndef H5 */
|
|
||||||
top: 0;
|
|
||||||
/* #endif */
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
z-index: 99;
|
|
||||||
/* #endif */
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__mask {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background-color: $uni-bg-color-mask;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mask-ani {
|
|
||||||
transition-property: opacity;
|
|
||||||
transition-duration: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-top-mask {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-bottom-mask {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-center-mask {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__wrapper {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: block;
|
|
||||||
/* #endif */
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.top {
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
transform: translateY(-500px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.bottom {
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
transform: translateY(500px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
/* #endif */
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
transform: scale(1.2);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-popup__wrapper-box {
|
|
||||||
/* #ifndef APP-NVUE */
|
|
||||||
display: block;
|
|
||||||
/* #endif */
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-ani {
|
|
||||||
// transition: transform 0.3s;
|
|
||||||
transition-property: transform, opacity;
|
|
||||||
transition-duration: 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.uni-top-content {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-bottom-content {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.uni-center-content {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,279 +0,0 @@
|
||||||
<template>
|
|
||||||
<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
|
|
||||||
@click="change">
|
|
||||||
<slot></slot>
|
|
||||||
</view>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
const animation = uni.requireNativePlugin('animation');
|
|
||||||
// #endif
|
|
||||||
/**
|
|
||||||
* Transition 过渡动画
|
|
||||||
* @description 简单过渡动画组件
|
|
||||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
|
|
||||||
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
|
|
||||||
* @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
|
|
||||||
* @value fade 渐隐渐出过渡
|
|
||||||
* @value slide-top 由上至下过渡
|
|
||||||
* @value slide-right 由右至左过渡
|
|
||||||
* @value slide-bottom 由下至上过渡
|
|
||||||
* @value slide-left 由左至右过渡
|
|
||||||
* @value zoom-in 由小到大过渡
|
|
||||||
* @value zoom-out 由大到小过渡
|
|
||||||
* @property {Number} duration 过渡动画持续时间
|
|
||||||
* @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
|
|
||||||
*/
|
|
||||||
export default {
|
|
||||||
name: 'uniTransition',
|
|
||||||
props: {
|
|
||||||
show: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false
|
|
||||||
},
|
|
||||||
modeClass: {
|
|
||||||
type: Array,
|
|
||||||
default () {
|
|
||||||
return []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
duration: {
|
|
||||||
type: Number,
|
|
||||||
default: 300
|
|
||||||
},
|
|
||||||
styles: {
|
|
||||||
type: Object,
|
|
||||||
default () {
|
|
||||||
return {}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
isShow: false,
|
|
||||||
transform: '',
|
|
||||||
ani: { in: '',
|
|
||||||
active: ''
|
|
||||||
}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
show: {
|
|
||||||
handler(newVal) {
|
|
||||||
if (newVal) {
|
|
||||||
this.open()
|
|
||||||
} else {
|
|
||||||
this.close()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
immediate: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
stylesObject() {
|
|
||||||
let styles = {
|
|
||||||
...this.styles,
|
|
||||||
'transition-duration': this.duration / 1000 + 's'
|
|
||||||
}
|
|
||||||
let transfrom = ''
|
|
||||||
for (let i in styles) {
|
|
||||||
let line = this.toLine(i)
|
|
||||||
transfrom += line + ':' + styles[i] + ';'
|
|
||||||
}
|
|
||||||
return transfrom
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
// this.timer = null
|
|
||||||
// this.nextTick = (time = 50) => new Promise(resolve => {
|
|
||||||
// clearTimeout(this.timer)
|
|
||||||
// this.timer = setTimeout(resolve, time)
|
|
||||||
// return this.timer
|
|
||||||
// });
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
change() {
|
|
||||||
this.$emit('click', {
|
|
||||||
detail: this.isShow
|
|
||||||
})
|
|
||||||
},
|
|
||||||
open() {
|
|
||||||
clearTimeout(this.timer)
|
|
||||||
this.isShow = true
|
|
||||||
this.transform = ''
|
|
||||||
this.ani.in = ''
|
|
||||||
for (let i in this.getTranfrom(false)) {
|
|
||||||
if (i === 'opacity') {
|
|
||||||
this.ani.in = 'fade-in'
|
|
||||||
} else {
|
|
||||||
this.transform += `${this.getTranfrom(false)[i]} `
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.$nextTick(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
this._animation(true)
|
|
||||||
}, 50)
|
|
||||||
})
|
|
||||||
|
|
||||||
},
|
|
||||||
close(type) {
|
|
||||||
clearTimeout(this.timer)
|
|
||||||
this._animation(false)
|
|
||||||
},
|
|
||||||
_animation(type) {
|
|
||||||
let styles = this.getTranfrom(type)
|
|
||||||
// #ifdef APP-NVUE
|
|
||||||
if(!this.$refs['ani']) return
|
|
||||||
animation.transition(this.$refs['ani'].ref, {
|
|
||||||
styles,
|
|
||||||
duration: this.duration, //ms
|
|
||||||
timingFunction: 'ease',
|
|
||||||
needLayout: false,
|
|
||||||
delay: 0 //ms
|
|
||||||
}, () => {
|
|
||||||
if (!type) {
|
|
||||||
this.isShow = false
|
|
||||||
}
|
|
||||||
this.$emit('change', {
|
|
||||||
detail: this.isShow
|
|
||||||
})
|
|
||||||
})
|
|
||||||
// #endif
|
|
||||||
// #ifndef APP-NVUE
|
|
||||||
this.transform = ''
|
|
||||||
for (let i in styles) {
|
|
||||||
if (i === 'opacity') {
|
|
||||||
this.ani.in = `fade-${type?'out':'in'}`
|
|
||||||
} else {
|
|
||||||
this.transform += `${styles[i]} `
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.timer = setTimeout(() => {
|
|
||||||
if (!type) {
|
|
||||||
this.isShow = false
|
|
||||||
}
|
|
||||||
this.$emit('change', {
|
|
||||||
detail: this.isShow
|
|
||||||
})
|
|
||||||
|
|
||||||
}, this.duration)
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
},
|
|
||||||
getTranfrom(type) {
|
|
||||||
let styles = {
|
|
||||||
transform: ''
|
|
||||||
}
|
|
||||||
this.modeClass.forEach((mode) => {
|
|
||||||
switch (mode) {
|
|
||||||
case 'fade':
|
|
||||||
styles.opacity = type ? 1 : 0
|
|
||||||
break;
|
|
||||||
case 'slide-top':
|
|
||||||
styles.transform += `translateY(${type?'0':'-100%'}) `
|
|
||||||
break;
|
|
||||||
case 'slide-right':
|
|
||||||
styles.transform += `translateX(${type?'0':'100%'}) `
|
|
||||||
break;
|
|
||||||
case 'slide-bottom':
|
|
||||||
styles.transform += `translateY(${type?'0':'100%'}) `
|
|
||||||
break;
|
|
||||||
case 'slide-left':
|
|
||||||
styles.transform += `translateX(${type?'0':'-100%'}) `
|
|
||||||
break;
|
|
||||||
case 'zoom-in':
|
|
||||||
styles.transform += `scale(${type?1:0.8}) `
|
|
||||||
break;
|
|
||||||
case 'zoom-out':
|
|
||||||
styles.transform += `scale(${type?1:1.2}) `
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return styles
|
|
||||||
},
|
|
||||||
_modeClassArr(type) {
|
|
||||||
let mode = this.modeClass
|
|
||||||
if (typeof(mode) !== "string") {
|
|
||||||
let modestr = ''
|
|
||||||
mode.forEach((item) => {
|
|
||||||
modestr += (item + '-' + type + ',')
|
|
||||||
})
|
|
||||||
return modestr.substr(0, modestr.length - 1)
|
|
||||||
} else {
|
|
||||||
return mode + '-' + type
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// getEl(el) {
|
|
||||||
// console.log(el || el.ref || null);
|
|
||||||
// return el || el.ref || null
|
|
||||||
// },
|
|
||||||
toLine(name) {
|
|
||||||
return name.replace(/([A-Z])/g, "-$1").toLowerCase();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.uni-transition {
|
|
||||||
transition-timing-function: ease;
|
|
||||||
transition-duration: 0.3s;
|
|
||||||
transition-property: transform, opacity;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-in {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade-active {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-top-in {
|
|
||||||
/* transition-property: transform, opacity; */
|
|
||||||
transform: translateY(-100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-top-active {
|
|
||||||
transform: translateY(0);
|
|
||||||
/* opacity: 1; */
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-right-in {
|
|
||||||
transform: translateX(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-right-active {
|
|
||||||
transform: translateX(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-bottom-in {
|
|
||||||
transform: translateY(100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-bottom-active {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-left-in {
|
|
||||||
transform: translateX(-100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.slide-left-active {
|
|
||||||
transform: translateX(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.zoom-in-in {
|
|
||||||
transform: scale(0.8);
|
|
||||||
}
|
|
||||||
|
|
||||||
.zoom-out-active {
|
|
||||||
transform: scale(1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.zoom-out-in {
|
|
||||||
transform: scale(1.2);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -64,6 +64,9 @@
|
||||||
"navigationBarTitleText": "宝芝堂",
|
"navigationBarTitleText": "宝芝堂",
|
||||||
"navigationBarBackgroundColor": "#F8F8F8",
|
"navigationBarBackgroundColor": "#F8F8F8",
|
||||||
"backgroundColor": "#F8F8F8"
|
"backgroundColor": "#F8F8F8"
|
||||||
|
// #ifdef H5
|
||||||
|
,"navigationStyle": "custom"
|
||||||
|
// #endif
|
||||||
},
|
},
|
||||||
"easycom": {
|
"easycom": {
|
||||||
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
|
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,21 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="page">
|
<view class="page">
|
||||||
<u-grid align="center" :border="true" :col="2">
|
<view class="btns">
|
||||||
|
<view class="btn" v-for="item in list" :key="item.id">
|
||||||
|
<u-button
|
||||||
|
:icon="`../../static/${item.key}.png`"
|
||||||
|
:text="item.name"
|
||||||
|
size="large"
|
||||||
|
@click="itemClick(item.id)"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- <u-grid align="center" :border="true" :col="1">
|
||||||
<u-grid-item v-for="item in list" :key="item.id" :name="item.id" @click="itemClick">
|
<u-grid-item v-for="item in list" :key="item.id" :name="item.id" @click="itemClick">
|
||||||
<u-image :src="`../../static/${item.key}.png`" width="40" height="40" />
|
<u-image :src="`../../static/${item.key}.png`" width="40" height="40" />
|
||||||
<text class="grid-text">{{item.name}}</text>
|
<text class="grid-text">{{item.name}}</text>
|
||||||
</u-grid-item>
|
</u-grid-item>
|
||||||
</u-grid>
|
</u-grid> -->
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -35,9 +45,25 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.u-grid {
|
.page ::v-deep .u-grid {
|
||||||
margin-top: 200px;
|
margin-top: 400rpx;
|
||||||
background: white;
|
background: white;
|
||||||
padding: 10px 0;
|
}
|
||||||
|
.page ::v-deep .u-grid-item {
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
.page ::v-deep .grid-text {
|
||||||
|
margin-top: 10px
|
||||||
|
}
|
||||||
|
|
||||||
|
.btns {
|
||||||
|
margin-top: 400rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.btns .btn {
|
||||||
|
width: 90%;
|
||||||
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -55,13 +55,14 @@
|
||||||
title="病情描述"
|
title="病情描述"
|
||||||
isLink
|
isLink
|
||||||
rightIcon="edit-pen"
|
rightIcon="edit-pen"
|
||||||
value="点击修改"
|
|
||||||
@click="openEditor"
|
@click="openEditor"
|
||||||
/>
|
/>
|
||||||
<u-cell
|
<u-cell title="图片资料">
|
||||||
title="录入时间"
|
<view slot="value">
|
||||||
:value="info.created_at"
|
<cu-image ref="images" @update="updateImages" />
|
||||||
/>
|
</view>
|
||||||
|
</u-cell>
|
||||||
|
<u-cell title="录入时间" :value="info.created_at"/>
|
||||||
</u-cell-group>
|
</u-cell-group>
|
||||||
<div class="btn">
|
<div class="btn">
|
||||||
<u-button text="添加病历" type="primary" @click="addRecord" />
|
<u-button text="添加病历" type="primary" @click="addRecord" />
|
||||||
|
|
@ -99,7 +100,7 @@
|
||||||
@confirm="selectBirthday"
|
@confirm="selectBirthday"
|
||||||
/>
|
/>
|
||||||
<select-admin-user ref="select-admin-user" @select="selectDoctor" />
|
<select-admin-user ref="select-admin-user" @select="selectDoctor" />
|
||||||
<cu-editor ref="editor" placeholder="请输入病情描述" @confirm="confirmEditor" />
|
<cu-editor ref="editor" @confirm="confirmEditor" />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -107,13 +108,18 @@
|
||||||
import gender from '../../enums/gender'
|
import gender from '../../enums/gender'
|
||||||
import SelectAdminUser from '../../components/select-admin-user'
|
import SelectAdminUser from '../../components/select-admin-user'
|
||||||
import CuEditor from '../../components/cu-editor'
|
import CuEditor from '../../components/cu-editor'
|
||||||
|
import CuImage from '../../components/cu-image'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {SelectAdminUser, CuEditor},
|
components: {SelectAdminUser, CuEditor, CuImage},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
id: '',
|
id: '',
|
||||||
info: {},
|
info: {
|
||||||
|
images: [],
|
||||||
|
doctor_id: '',
|
||||||
|
doctor: {},
|
||||||
|
},
|
||||||
modal: {
|
modal: {
|
||||||
type: 'text',
|
type: 'text',
|
||||||
show: false,
|
show: false,
|
||||||
|
|
@ -129,7 +135,7 @@ export default {
|
||||||
show: false,
|
show: false,
|
||||||
name: '',
|
name: '',
|
||||||
value: (new Date).getTime(),
|
value: (new Date).getTime(),
|
||||||
minDate: (new Date('1900-1-1')).getTime()
|
minDate: (new Date('1900/1/1')).getTime()
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -148,11 +154,23 @@ export default {
|
||||||
uni.showLoading()
|
uni.showLoading()
|
||||||
const params = {_action: 'getData'}
|
const params = {_action: 'getData'}
|
||||||
this.$ajax.get(`/admin-api/patient/${this.id}`, { params }).then(res => {
|
this.$ajax.get(`/admin-api/patient/${this.id}`, { params }).then(res => {
|
||||||
|
uni.stopPullDownRefresh()
|
||||||
if (res.status == 0) {
|
if (res.status == 0) {
|
||||||
this.info = res.data
|
this.info = {
|
||||||
|
...res.data,
|
||||||
|
birthday: res.data.birthday ? res.data.birthday.replaceAll('-', '/') : '',
|
||||||
|
treat_at: res.data.treat_at ? res.data.treat_at.replaceAll('-', '/') : '',
|
||||||
|
}
|
||||||
|
if (res.data.images) {
|
||||||
|
this.$refs['images'].setList(res.data.images.map(value => {
|
||||||
|
return { url: value }
|
||||||
|
}))
|
||||||
|
}
|
||||||
uni.setNavigationBarTitle({ title: this.info.name })
|
uni.setNavigationBarTitle({ title: this.info.name })
|
||||||
}
|
}
|
||||||
})
|
}).catch(error => {
|
||||||
|
uni.stopPullDownRefresh()
|
||||||
|
})
|
||||||
},
|
},
|
||||||
openModal(title, name) {
|
openModal(title, name) {
|
||||||
this.modal.title = title
|
this.modal.title = title
|
||||||
|
|
@ -199,7 +217,11 @@ export default {
|
||||||
toggleBirthday(name) {
|
toggleBirthday(name) {
|
||||||
if (name) {
|
if (name) {
|
||||||
this.datePicker.name = name
|
this.datePicker.name = name
|
||||||
this.datePicker.value = this.info[name] ? Math.floor(this.info[name] * 1000) : (new Date).getTime()
|
const value = this.info[name]
|
||||||
|
if (value) {
|
||||||
|
|
||||||
|
}
|
||||||
|
this.datePicker.value = (new Date(value)).getTime()
|
||||||
}
|
}
|
||||||
this.datePicker.show = !this.datePicker.show
|
this.datePicker.show = !this.datePicker.show
|
||||||
},
|
},
|
||||||
|
|
@ -230,6 +252,14 @@ export default {
|
||||||
})
|
})
|
||||||
this.closeDoctor()
|
this.closeDoctor()
|
||||||
},
|
},
|
||||||
|
updateImages(e) {
|
||||||
|
const list = e.map(item => item.url)
|
||||||
|
this.update({ images: list }).then(res => {
|
||||||
|
if (res.status == 0) {
|
||||||
|
console.log(res)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
addRecord() {
|
addRecord() {
|
||||||
return uni.navigateTo({ url: `/pages/record/form?patient=${this.id}` })
|
return uni.navigateTo({ url: `/pages/record/form?patient=${this.id}` })
|
||||||
},
|
},
|
||||||
|
|
@ -270,6 +300,10 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.page {
|
||||||
|
padding: 20px;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
.u-cell-group {
|
.u-cell-group {
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
|
|
@ -279,4 +313,8 @@ export default {
|
||||||
.btn .u-button {
|
.btn .u-button {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
.page ::v-deep .u-upload__wrap {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.text-gray {color: gray}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -40,10 +40,13 @@
|
||||||
<u-form-item label="病情描述" prop="illness" @click="openEditor">
|
<u-form-item label="病情描述" prop="illness" @click="openEditor">
|
||||||
<view class="input-text">
|
<view class="input-text">
|
||||||
<!-- <rich-text v-if="form.illness" :nodes="form.illness" /> -->
|
<!-- <rich-text v-if="form.illness" :nodes="form.illness" /> -->
|
||||||
<text :class="{'input-placeholder': !form.illness}">{{form.illness ? '点击修改' : '点击填写'}}</text>
|
<text :class="{'input-placeholder': !form.illness}">点击修改</text>
|
||||||
<u-icon name="arrow-right" />
|
<u-icon name="arrow-right" />
|
||||||
</view>
|
</view>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
|
<u-form-item label="图片资料" prop="images" borderBottom>
|
||||||
|
<cu-image ref="images" />
|
||||||
|
</u-form-item>
|
||||||
<view class="button">
|
<view class="button">
|
||||||
<u-button text="提交" type="primary" @click="submit"></u-button>
|
<u-button text="提交" type="primary" @click="submit"></u-button>
|
||||||
</view>
|
</view>
|
||||||
|
|
@ -74,9 +77,10 @@
|
||||||
import gender from '../../enums/gender'
|
import gender from '../../enums/gender'
|
||||||
import SelectAdminUser from '../../components/select-admin-user'
|
import SelectAdminUser from '../../components/select-admin-user'
|
||||||
import CuEditor from '../../components/cu-editor'
|
import CuEditor from '../../components/cu-editor'
|
||||||
|
import CuImage from '../../components/cu-image'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {SelectAdminUser, CuEditor},
|
components: {SelectAdminUser, CuEditor, CuImage},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
id: '',
|
id: '',
|
||||||
|
|
@ -88,7 +92,8 @@ export default {
|
||||||
address: '',
|
address: '',
|
||||||
treat_at: '',
|
treat_at: '',
|
||||||
doctor_id: '',
|
doctor_id: '',
|
||||||
illness: ''
|
illness: '',
|
||||||
|
images: []
|
||||||
},
|
},
|
||||||
rules: {
|
rules: {
|
||||||
name: {
|
name: {
|
||||||
|
|
@ -189,6 +194,7 @@ export default {
|
||||||
this.form.illness = e.html
|
this.form.illness = e.html
|
||||||
},
|
},
|
||||||
submit() {
|
submit() {
|
||||||
|
this.form.images = this.$refs['images'].getList().map(item => item.url)
|
||||||
this.$refs['form'].validate().then(res => {
|
this.$refs['form'].validate().then(res => {
|
||||||
uni.showLoading()
|
uni.showLoading()
|
||||||
if (this.id) {
|
if (this.id) {
|
||||||
|
|
@ -230,7 +236,7 @@ export default {
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.page {
|
.page {
|
||||||
padding: 0 20px;
|
padding: 20px;
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
.input-text {
|
.input-text {
|
||||||
|
|
|
||||||
|
|
@ -51,15 +51,19 @@
|
||||||
title="诊疗情况"
|
title="诊疗情况"
|
||||||
isLink
|
isLink
|
||||||
rightIcon="edit-pen"
|
rightIcon="edit-pen"
|
||||||
value="点击修改"
|
|
||||||
@click="openEditor"
|
@click="openEditor"
|
||||||
/>
|
/>
|
||||||
|
<u-cell title="图片资料">
|
||||||
|
<view slot="value">
|
||||||
|
<cu-image ref="images" @update="updateImages" />
|
||||||
|
</view>
|
||||||
|
</u-cell>
|
||||||
<u-cell
|
<u-cell
|
||||||
title="下次就诊时间"
|
title="下次就诊时间"
|
||||||
:value="info.next_treat_at | date"
|
:value="info.next_treat_at | date"
|
||||||
isLink
|
isLink
|
||||||
rightIcon="edit-pen"
|
rightIcon="edit-pen"
|
||||||
@click="toggleDatePicker('next_treat_at')"
|
@click="toggleDatePicker('next_treat_at', 'datetime')"
|
||||||
/>
|
/>
|
||||||
<u-cell
|
<u-cell
|
||||||
title="通知人"
|
title="通知人"
|
||||||
|
|
@ -70,10 +74,10 @@
|
||||||
/>
|
/>
|
||||||
<u-cell
|
<u-cell
|
||||||
title="通知时间"
|
title="通知时间"
|
||||||
:value="info.notify_at | date"
|
:value="info.notify_at | date('yyyy-MM-dd')"
|
||||||
isLink
|
isLink
|
||||||
rightIcon="edit-pen"
|
rightIcon="edit-pen"
|
||||||
@click="toggleDatePicker('notify_at')"
|
@click="toggleDatePicker('notify_at', 'date')"
|
||||||
/>
|
/>
|
||||||
<u-cell
|
<u-cell
|
||||||
title="通知备注"
|
title="通知备注"
|
||||||
|
|
@ -101,7 +105,7 @@
|
||||||
/>
|
/>
|
||||||
<u-datetime-picker
|
<u-datetime-picker
|
||||||
v-model="datePicker.value"
|
v-model="datePicker.value"
|
||||||
mode="datetime"
|
:mode="datePicker.mode"
|
||||||
:show="datePicker.show"
|
:show="datePicker.show"
|
||||||
:closeOnClickOverlay="true"
|
:closeOnClickOverlay="true"
|
||||||
:minDate="datePicker.minDate"
|
:minDate="datePicker.minDate"
|
||||||
|
|
@ -131,7 +135,7 @@
|
||||||
@close="toggleOrderStatus"
|
@close="toggleOrderStatus"
|
||||||
@select="selectOrderStatus"
|
@select="selectOrderStatus"
|
||||||
/>
|
/>
|
||||||
<cu-editor ref="editor" placeholder="请输入诊疗情况" @confirm="confirmEditor" />
|
<cu-editor ref="editor" @confirm="confirmEditor" />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -139,9 +143,10 @@
|
||||||
import CuEditor from '../../components/cu-editor'
|
import CuEditor from '../../components/cu-editor'
|
||||||
import SelectAdminUser from '../../components/select-admin-user'
|
import SelectAdminUser from '../../components/select-admin-user'
|
||||||
import orderStatus from '../../enums/order_status'
|
import orderStatus from '../../enums/order_status'
|
||||||
|
import CuImage from '../../components/cu-image'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {SelectAdminUser, CuEditor},
|
components: {SelectAdminUser, CuEditor, CuImage},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
id: '',
|
id: '',
|
||||||
|
|
@ -165,9 +170,10 @@ export default {
|
||||||
},
|
},
|
||||||
datePicker: {
|
datePicker: {
|
||||||
show: false,
|
show: false,
|
||||||
|
mode: 'datetime',
|
||||||
name: '',
|
name: '',
|
||||||
value: (new Date).getTime(),
|
value: (new Date).getTime(),
|
||||||
minDate: (new Date('1900-1-1')).getTime()
|
minDate: (new Date('1900/1/1')).getTime()
|
||||||
},
|
},
|
||||||
modal: {
|
modal: {
|
||||||
type: 'text',
|
type: 'text',
|
||||||
|
|
@ -207,7 +213,17 @@ export default {
|
||||||
this.$ajax.get(`/admin-api/record/${this.id}`, { params }).then(res => {
|
this.$ajax.get(`/admin-api/record/${this.id}`, { params }).then(res => {
|
||||||
uni.stopPullDownRefresh()
|
uni.stopPullDownRefresh()
|
||||||
if (res.status == 0) {
|
if (res.status == 0) {
|
||||||
this.info = res.data
|
this.info = {
|
||||||
|
...res.data,
|
||||||
|
treat_at: res.data.treat_at ? res.data.treat_at.replaceAll('-', '/') : '',
|
||||||
|
next_treat_at: res.data.next_treat_at ? res.data.next_treat_at.replaceAll('-', '/') : '',
|
||||||
|
notify_at: res.data.notify_at ? res.data.notify_at.replaceAll('-', '/') : '',
|
||||||
|
}
|
||||||
|
if (res.data.images) {
|
||||||
|
this.$refs['images'].setList(res.data.images.map(value => {
|
||||||
|
return { url: value }
|
||||||
|
}))
|
||||||
|
}
|
||||||
this.type.text = this.info.type ? this.info.type.name : ''
|
this.type.text = this.info.type ? this.info.type.name : ''
|
||||||
this.adminUser.doctor_name = this.info.doctor ? this.info.doctor.name : ''
|
this.adminUser.doctor_name = this.info.doctor ? this.info.doctor.name : ''
|
||||||
this.orderStatus.text = orderStatus.map[this.info.order_status]
|
this.orderStatus.text = orderStatus.map[this.info.order_status]
|
||||||
|
|
@ -254,10 +270,16 @@ export default {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
toggleDatePicker(name) {
|
toggleDatePicker(name, mode) {
|
||||||
if (name) {
|
if (name) {
|
||||||
this.datePicker.name = name
|
this.datePicker.name = name
|
||||||
this.datePicker.value = this.info[name] ? Math.floor(this.info[name] * 1000) : (new Date).getTime()
|
const value = this.info[name]
|
||||||
|
if (value) {
|
||||||
|
this.datePicker.value = (new Date(value)).getTime()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (mode) {
|
||||||
|
this.datePicker.mode = mode
|
||||||
}
|
}
|
||||||
this.datePicker.show = !this.datePicker.show
|
this.datePicker.show = !this.datePicker.show
|
||||||
},
|
},
|
||||||
|
|
@ -317,6 +339,14 @@ export default {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
updateImages(e) {
|
||||||
|
const list = e.map(item => item.url)
|
||||||
|
this.update('images', list).then(res => {
|
||||||
|
if (res.status == 0) {
|
||||||
|
console.log(res)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
deleteRecord() {
|
deleteRecord() {
|
||||||
uni.showModal({
|
uni.showModal({
|
||||||
title: '删除病历记录',
|
title: '删除病历记录',
|
||||||
|
|
@ -346,10 +376,17 @@ export default {
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.page {
|
||||||
|
padding: 20px;
|
||||||
|
background: white;
|
||||||
|
}
|
||||||
.btn {
|
.btn {
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
}
|
}
|
||||||
.btn .u-button {
|
.btn .u-button {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
|
.text-gray {
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -55,11 +55,14 @@
|
||||||
<u-form-item label="请输入诊疗情况" prop="content" :borderBottom="true" @click="openEditor">
|
<u-form-item label="请输入诊疗情况" prop="content" :borderBottom="true" @click="openEditor">
|
||||||
<view class="input-text">
|
<view class="input-text">
|
||||||
<!-- <rich-text v-if="form.content" :nodes="form.content" /> -->
|
<!-- <rich-text v-if="form.content" :nodes="form.content" /> -->
|
||||||
<text :class="{'input-placeholder': !form.content}">{{form.content ? '点击修改' : '点击填写'}}</text>
|
<text :class="{'input-placeholder': !form.content}">点击修改</text>
|
||||||
<u-icon name="arrow-right" />
|
<u-icon name="arrow-right" />
|
||||||
</view>
|
</view>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
<u-form-item prop="next_treat_at" label="下次就诊" :borderBottom="true" @click="toggleDatePicker('next_treat_at')">
|
<u-form-item label="图片资料" prop="images" borderBottom>
|
||||||
|
<cu-image ref="images" />
|
||||||
|
</u-form-item>
|
||||||
|
<u-form-item prop="next_treat_at" label="下次就诊" :borderBottom="true" @click="toggleDatePicker('next_treat_at', 'datetime')">
|
||||||
<view class="input-text">
|
<view class="input-text">
|
||||||
<text v-if="form.next_treat_at">{{ form.next_treat_at | date }}</text>
|
<text v-if="form.next_treat_at">{{ form.next_treat_at | date }}</text>
|
||||||
<text v-else class="input-placeholder">请选择下次就诊时间</text>
|
<text v-else class="input-placeholder">请选择下次就诊时间</text>
|
||||||
|
|
@ -73,7 +76,7 @@
|
||||||
<u-icon name="arrow-right" />
|
<u-icon name="arrow-right" />
|
||||||
</view>
|
</view>
|
||||||
</u-form-item>
|
</u-form-item>
|
||||||
<u-form-item prop="notify_at" label="通知时间" :borderBottom="true" @click="toggleDatePicker('notify_at')">
|
<u-form-item prop="notify_at" label="通知时间" :borderBottom="true" @click="toggleDatePicker('notify_at', 'date')">
|
||||||
<view class="input-text">
|
<view class="input-text">
|
||||||
<text v-if="form.notify_at">{{ form.notify_at | date }}</text>
|
<text v-if="form.notify_at">{{ form.notify_at | date }}</text>
|
||||||
<text v-else class="input-placeholder">请选择通知时间</text>
|
<text v-else class="input-placeholder">请选择通知时间</text>
|
||||||
|
|
@ -92,7 +95,7 @@
|
||||||
</u--form>
|
</u--form>
|
||||||
<u-datetime-picker
|
<u-datetime-picker
|
||||||
v-model="datePicker.value"
|
v-model="datePicker.value"
|
||||||
mode="datetime"
|
:mode="datePicker.mode"
|
||||||
:show="datePicker.show"
|
:show="datePicker.show"
|
||||||
:closeOnClickOverlay="true"
|
:closeOnClickOverlay="true"
|
||||||
:minDate="datePicker.minDate"
|
:minDate="datePicker.minDate"
|
||||||
|
|
@ -101,7 +104,7 @@
|
||||||
@confirm="selectDatePicker"
|
@confirm="selectDatePicker"
|
||||||
/>
|
/>
|
||||||
<select-admin-user ref="select-admin-user" @select="selectAdminUser" />
|
<select-admin-user ref="select-admin-user" @select="selectAdminUser" />
|
||||||
<cu-editor ref="editor" placeholder="请输入诊疗情况" @confirm="confirmEditor" />
|
<cu-editor ref="editor" @confirm="confirmEditor" />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -109,9 +112,10 @@
|
||||||
import CuEditor from '../../components/cu-editor'
|
import CuEditor from '../../components/cu-editor'
|
||||||
import SelectAdminUser from '../../components/select-admin-user'
|
import SelectAdminUser from '../../components/select-admin-user'
|
||||||
import orderStatus from '../../enums/order_status'
|
import orderStatus from '../../enums/order_status'
|
||||||
|
import CuImage from '../../components/cu-image'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {SelectAdminUser, CuEditor},
|
components: {SelectAdminUser, CuEditor, CuImage},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
id: '',
|
id: '',
|
||||||
|
|
@ -155,6 +159,7 @@ export default {
|
||||||
typeList: [],
|
typeList: [],
|
||||||
patient: {},
|
patient: {},
|
||||||
datePicker: {
|
datePicker: {
|
||||||
|
mode: 'datetime',
|
||||||
show: false,
|
show: false,
|
||||||
name: '',
|
name: '',
|
||||||
value: (new Date).getTime(),
|
value: (new Date).getTime(),
|
||||||
|
|
@ -243,8 +248,8 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
submit() {
|
submit() {
|
||||||
|
this.form.images = this.$refs['images'].getList().map(item => item.url)
|
||||||
this.$refs['form'].validate().then(res => {
|
this.$refs['form'].validate().then(res => {
|
||||||
console.log(res)
|
|
||||||
uni.showLoading()
|
uni.showLoading()
|
||||||
if (this.id) {
|
if (this.id) {
|
||||||
this.update()
|
this.update()
|
||||||
|
|
@ -280,11 +285,14 @@ export default {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
toggleDatePicker(name) {
|
toggleDatePicker(name, mode) {
|
||||||
if (name) {
|
if (name) {
|
||||||
this.datePicker.name = name
|
this.datePicker.name = name
|
||||||
this.datePicker.value = this.form[name] ? Math.floor(this.form[name] * 1000) : (new Date).getTime()
|
this.datePicker.value = this.form[name] ? Math.floor(this.form[name] * 1000) : (new Date).getTime()
|
||||||
}
|
}
|
||||||
|
if (mode) {
|
||||||
|
this.datePicker.mode = mode
|
||||||
|
}
|
||||||
this.datePicker.show = !this.datePicker.show
|
this.datePicker.show = !this.datePicker.show
|
||||||
},
|
},
|
||||||
selectDatePicker(e) {
|
selectDatePicker(e) {
|
||||||
|
|
@ -323,12 +331,8 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.page {
|
.page {
|
||||||
padding: 0 20px;
|
padding: 20px;
|
||||||
background: white;
|
background: white;
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
.input-text {
|
.input-text {
|
||||||
color: #303133;
|
color: #303133;
|
||||||
|
|
|
||||||
|
|
@ -8,25 +8,19 @@
|
||||||
<u-swipe-action>
|
<u-swipe-action>
|
||||||
<u-list-item v-for="item in list" :key="item.id">
|
<u-list-item v-for="item in list" :key="item.id">
|
||||||
<u-swipe-action-item :options="swipeOption" :name="item.id" @click="swipeClick">
|
<u-swipe-action-item :options="swipeOption" :name="item.id" @click="swipeClick">
|
||||||
<u-cell
|
<u-cell size="large" :url="`/pages/record/detail?id=${item.id}`">
|
||||||
:title="item.treat_at"
|
<view slot="title" class="title">
|
||||||
:clickable="true"
|
<view class="list-item-title">{{ item.doctor ? item.doctor.name : '' }}</view>
|
||||||
:isLink="false"
|
|
||||||
size="large"
|
|
||||||
:center="true"
|
|
||||||
:url="`/pages/record/detail?id=${item.id}`"
|
|
||||||
>
|
|
||||||
<view slot="value">
|
|
||||||
<view class="list-item-price">
|
<view class="list-item-price">
|
||||||
<text style="color: #dd524d;font-size: 19px">
|
<text style="color: #dd524d;font-size: 19px">
|
||||||
<u-icon name="rmb" color="#dd524d" size="19px" />
|
<u-icon name="rmb" color="#dd524d" size="19px" />
|
||||||
{{ item.sell_price }}
|
{{ item.sell_price }}
|
||||||
</text>
|
</text>
|
||||||
<text style="color: #c0c0c0;text-decoration: line-through;">{{ item.origin_price }}</text>
|
<text style="color: #c0c0c0;text-decoration: line-through;">{{ item.origin_price }}</text>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="item.doctor" class="list-item-doctor">
|
</view>
|
||||||
<text>{{ item.doctor.name }}</text>
|
<view slot="label" class="label">
|
||||||
</view>
|
<view>就诊时间: {{ item.treat_at }}</view>
|
||||||
</view>
|
</view>
|
||||||
</u-cell>
|
</u-cell>
|
||||||
</u-swipe-action-item>
|
</u-swipe-action-item>
|
||||||
|
|
@ -180,21 +174,23 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.u-list {
|
.page {
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
.list {
|
||||||
background: white;
|
background: white;
|
||||||
}
|
}
|
||||||
.u-cell__label {
|
.list .title {
|
||||||
margin-top: 5px;
|
display: flex;
|
||||||
font-size: 12px;
|
flex-direction: row;
|
||||||
color: #909193;
|
justify-content: space-between;
|
||||||
line-height: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
.list-item-doctor {
|
.list .label {
|
||||||
text-align: right;
|
color: gray;
|
||||||
color: #007aff;
|
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
.u-icon {
|
.list-item-price ::v-deep .u-icon {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.add-button {
|
.add-button {
|
||||||
|
|
|
||||||
|
|
@ -40,9 +40,9 @@ $uni-border-color: #c8c7cc;
|
||||||
/* 尺寸变量 */
|
/* 尺寸变量 */
|
||||||
|
|
||||||
/* 文字尺寸 */
|
/* 文字尺寸 */
|
||||||
$uni-font-size-sm: 12px;
|
$uni-font-size-sm: 14px;
|
||||||
$uni-font-size-base: 14px;
|
$uni-font-size-base: 16px;
|
||||||
$uni-font-size-lg: 16px;
|
$uni-font-size-lg: 18px;
|
||||||
|
|
||||||
/* 图片尺寸 */
|
/* 图片尺寸 */
|
||||||
$uni-img-size-sm: 20px;
|
$uni-img-size-sm: 20px;
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue