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>
|