344 lines
8.9 KiB
Vue
344 lines
8.9 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="container">
|
||
<view class="bai-box">
|
||
<view style="margin-bottom: 10px;">课程图片</view>
|
||
<view class="">
|
||
<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
||
:maxCount="10"></u-upload>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="bai-box">
|
||
<view class="k-bs">
|
||
<view class="">课程名称</view>
|
||
<view class="right_box">
|
||
<input type="text" placeholder="请输入" />
|
||
</view>
|
||
|
||
</view>
|
||
<view class="k-bs">
|
||
<view class="">课程标签</view>
|
||
<view class="right_box">
|
||
<input type="text" placeholder="请输入" />
|
||
</view>
|
||
|
||
</view>
|
||
<view class="k-bs">
|
||
<view class="">课程价格</view>
|
||
<view class="right_box">
|
||
<input type="text" placeholder="请输入" />
|
||
</view>
|
||
|
||
</view>
|
||
<view class="k-bs">
|
||
<view class="">报名订金 </view>
|
||
<view class="right_box">
|
||
<input type="text" placeholder="请输入" />
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="bai-box">
|
||
<view class="k-bs" @click="show=true">
|
||
<view class="">选择教练</view>
|
||
<view class="right_box">
|
||
<view class="">当前绑定3位教练</view>
|
||
<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="k-bs">
|
||
<view class="">训练车型</view>
|
||
<view class="right_box">
|
||
<view class="">请选择</view>
|
||
<u-icon name="arrow-right" color="#999999" size="18"></u-icon>
|
||
</view>
|
||
|
||
</view>
|
||
|
||
|
||
</view>
|
||
<view class="bai-box">
|
||
<view class="">课程详情</view>
|
||
|
||
<view class="editor-box">
|
||
<sp-editor :toolbar-config="{
|
||
excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck'],
|
||
iconSize: '18px'
|
||
}" @init="initEditor" @input="inputOver" @upinImage="upinImage" @overMax="overMax" @addLink="addLink"
|
||
@exportHtml="exportHtml"></sp-editor>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
|
||
<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
|
||
|
||
<view style="width: 100%; height: 70px;"></view>
|
||
<view class="bottom-box">
|
||
<view class="anniu">添加/保存课程</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
show: false,
|
||
columns: [
|
||
['中国', '美国', '日本']
|
||
],
|
||
fileList1: [],
|
||
editorIns: null
|
||
}
|
||
},
|
||
onShow() {
|
||
|
||
},
|
||
onPullDownRefresh() {
|
||
console.log("刷新");
|
||
uni.stopPullDownRefresh()
|
||
},
|
||
onReachBottom() {
|
||
// this.show = true
|
||
setTimeout(() => {
|
||
console.log("加载执行");
|
||
}, 2000)
|
||
},
|
||
|
||
methods: {
|
||
confirm() {
|
||
this.show = false
|
||
},
|
||
cancel() {
|
||
this.show = false
|
||
},
|
||
// 删除图片
|
||
deletePic(event) {
|
||
this[`fileList${event.name}`].splice(event.index, 1)
|
||
},
|
||
// 新增图片
|
||
async afterRead(event) {
|
||
// 当设置 multiple 为 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: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
|
||
filePath: url,
|
||
name: 'file',
|
||
formData: {
|
||
user: 'test'
|
||
},
|
||
success: (res) => {
|
||
setTimeout(() => {
|
||
resolve(res.data.data)
|
||
}, 1000)
|
||
}
|
||
});
|
||
})
|
||
},
|
||
inputOver(e) {
|
||
// 可以在此处获取到编辑器已编辑的内容
|
||
console.log('==== inputOver :', e)
|
||
},
|
||
/**
|
||
* 超出最大内容限制
|
||
* @param {Object} e {html,text} 内容的html文本，和text文本
|
||
*/
|
||
overMax(e) {
|
||
// 若设置了最大字数限制，可在此处触发超出限制的回调
|
||
console.log('==== overMax :', e)
|
||
},
|
||
/**
|
||
* 编辑器就绪
|
||
* @param {Object} editor 编辑器实例，你可以自定义调用editor实例的方法
|
||
* @tutorial editor组件 https://uniapp.dcloud.net.cn/component/editor.html#editor-%E7%BB%84%E4%BB%B6
|
||
* @tutorial 相关api https://uniapp.dcloud.net.cn/api/media/editor-context.html
|
||
*/
|
||
initEditor(editor) {
|
||
this.editorIns = editor // 保存编辑器实例
|
||
// 保存编辑器实例后，可以在此处获取后端数据，并赋值给编辑器初始化内容
|
||
this.preRender()
|
||
},
|
||
preRender() {
|
||
setTimeout(() => {
|
||
// 异步获取后端数据后，初始化编辑器内容
|
||
this.editorIns.setContents({
|
||
html: `<div> 猫猫<img src="https://img.yzcdn.cn/vant/cat.jpeg"/>
|
||
<img src="https://img.yzcdn.cn/vant/cat.jpeg"/>
|
||
<img src="https://img.yzcdn.cn/vant/cat.jpeg"/>yaho giao</div>`
|
||
})
|
||
}, 1000)
|
||
},
|
||
/**
|
||
* 直接运行示例工程插入图片无法正常显示的看这里
|
||
* 因为插件默认采用云端存储图片的方式
|
||
* 以$emit('upinImage', tempFiles, this.editorCtx)的方式回调
|
||
* @param {Object} tempFiles
|
||
* @param {Object} editorCtx
|
||
*/
|
||
upinImage(tempFiles, editorCtx) {
|
||
/**
|
||
* 本地临时插入图片预览
|
||
* 注意：这里仅是示例本地图片预览，因为需要将图片先上传到云端，再将图片插入到编辑器中
|
||
* 正式开发时，还请将此处注释，并解开下面 使用 uniCloud.uploadFile 上传图片的示例方法 的注释
|
||
* @tutorial https://uniapp.dcloud.net.cn/api/media/editor-context.html#editorcontext-insertimage
|
||
*/
|
||
// #ifdef MP-WEIXIN
|
||
// 注意微信小程序的图片路径是在tempFilePath字段中
|
||
editorCtx.insertImage({
|
||
src: tempFiles[0].tempFilePath,
|
||
width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
|
||
success: function() {}
|
||
})
|
||
// #endif
|
||
|
||
// #ifndef MP-WEIXIN
|
||
editorCtx.insertImage({
|
||
src: tempFiles[0].path,
|
||
width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
|
||
success: function() {}
|
||
})
|
||
// #endif
|
||
|
||
/**
|
||
* 使用 uniCloud.uploadFile 上传图片的示例方法（可适用多选上传）
|
||
* 正式开发环境中，请将上面 本地临时插入图片预览 注释后，模仿以下写法
|
||
*/
|
||
// tempFiles.forEach(async (item) => {
|
||
// uni.showLoading({
|
||
// title: '上传中请稍后',
|
||
// mask: true
|
||
// })
|
||
// let upfile = await uniCloud.uploadFile({
|
||
// filePath: item.path,
|
||
// // 同名会导致报错 policy_does_not_allow_file_overwrite
|
||
// // cloudPath可由 想要存储的文件夹/文件名 拼接，若不拼文件夹名则默认存储在cloudstorage文件夹中
|
||
// cloudPath: `cloudstorage/${item.name}`,
|
||
// cloudPathAsRealPath: true
|
||
// })
|
||
// editorCtx.insertImage({
|
||
// src: upfile.fileID,
|
||
// width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
|
||
// success: function () {
|
||
// uni.hideLoading()
|
||
// }
|
||
// })
|
||
// })
|
||
},
|
||
/**
|
||
* 导出 - toolbar需要开启export工具
|
||
* @param {string} e 导出的html内容
|
||
*/
|
||
exportHtml(e) {
|
||
uni.navigateTo({
|
||
url: '/pages/out/out',
|
||
success(res) {
|
||
// 传至导出页面解析即可
|
||
res.eventChannel.emit('e-transmit-html', {
|
||
data: e
|
||
})
|
||
}
|
||
})
|
||
},
|
||
/**
|
||
* 添加超链接
|
||
* @param {Object} e { text: '链接描述', href: '链接地址' }
|
||
*/
|
||
addLink(e) {
|
||
console.log('==== addLink :', e)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content {
|
||
width: 100%;
|
||
background: #f4f5f6;
|
||
height: 100vh;
|
||
}
|
||
|
||
.container {
|
||
width: 100%;
|
||
background: #f4f5f6;
|
||
box-sizing: border-box;
|
||
padding-top: 8px;
|
||
}
|
||
|
||
.bai-box {
|
||
width: 95%;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
background-color: #fff;
|
||
margin: 10px auto;
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.bottom-box {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 5px;
|
||
background: #fff;
|
||
position: fixed;
|
||
bottom: 0px;
|
||
left: 0px;
|
||
height: 70px;
|
||
overflow: hidden;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.anniu {
|
||
width: 311px;
|
||
height: 40px;
|
||
background: #4AA76F;
|
||
border-radius: 20px 20px 20px 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #fff;
|
||
}
|
||
|
||
.k-bs {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
box-sizing: border-box;
|
||
padding: 10px 0px;
|
||
border-bottom: 1px solid #dadada;
|
||
}
|
||
|
||
.right_box {
|
||
text-align: right;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
}
|
||
</style> |