509 lines
9.2 KiB
Vue
509 lines
9.2 KiB
Vue
|
<template>
|
||
|
|
<view class="content">
|
||
|
|
<view class="form-item">
|
||
|
|
<text class="label">课程名称</text>
|
||
|
|
<input class="input" type="text" v-model="formData.name" placeholder="请输入课程名称" />
|
||
|
|
</view>
|
||
|
|
<view class="form-item">
|
||
|
|
<text class="label">课程价格</text>
|
||
|
|
<input class="input" type="number" v-model="formData.price" placeholder="请输入课程价格" />
|
||
|
|
</view>
|
||
|
|
<view class="form-item">
|
||
|
|
<text class="label">报名定金</text>
|
||
|
|
<input class="input" type="number" v-model="formData.reserveMoney" placeholder="请输入报名定金" />
|
||
|
|
</view>
|
||
|
|
<view class="form-item">
|
||
|
|
<text class="label">课程特色</text>
|
||
|
|
<input class="input" type="text" v-model="formData.automatic" placeholder="请输入课程特色" />
|
||
|
|
</view>
|
||
|
|
<view class="form-item">
|
||
|
|
<text class="label">课程优势</text>
|
||
|
|
<input class="input" type="text" v-model="formData.license" placeholder="请输入课程优势" />
|
||
|
|
</view>
|
||
|
|
<view class="form-item">
|
||
|
|
<text class="label">图片上传</text>
|
||
|
|
<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
|
||
|
|
:previewFullImage="true" :maxCount="1"></u-upload>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
<view class="form-item">
|
||
|
|
<text class="label">课程描述</text>
|
||
|
|
<textarea class="textarea" v-model="formData.describ" placeholder="请输入课程描述"></textarea>
|
||
|
|
</view>
|
||
|
|
<view style="width: 100%; height: 70px;"></view>
|
||
|
|
<view class="bottom-box">
|
||
|
|
<view class="anniu" @click="submit()">保存</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import upload from '@/utils/upload.js'
|
||
|
|
import request from '../../utils/request';
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
keyword: '',
|
||
|
|
imageUrl: this.$imagesUrl,
|
||
|
|
tabindex: 0,
|
||
|
|
fileList1: [],
|
||
|
|
tabindex2: 1,
|
||
|
|
show: false,
|
||
|
|
formData: {},
|
||
|
|
tabList: [
|
||
|
|
'教学学员', '教学课程',
|
||
|
|
],
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onLoad(option) {
|
||
|
|
if (option.id) {
|
||
|
|
//编辑页面
|
||
|
|
this.getDataInfo(option.id)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
|
||
|
|
},
|
||
|
|
onPullDownRefresh() {
|
||
|
|
console.log("刷新");
|
||
|
|
uni.stopPullDownRefresh()
|
||
|
|
},
|
||
|
|
onReachBottom() {
|
||
|
|
// this.show = true
|
||
|
|
setTimeout(() => {
|
||
|
|
console.log("加载执行");
|
||
|
|
}, 2000)
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
getDataInfo(id) {
|
||
|
|
request({
|
||
|
|
url: '/drivingSchool/system/driveSchoolCourse/' + id,
|
||
|
|
method: 'get'
|
||
|
|
}).then((res) => {
|
||
|
|
if (res.code == 200) {
|
||
|
|
this.formData = res.data
|
||
|
|
this.fileList1 = [{
|
||
|
|
url: this.imageUrl + res.data.photo
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
deletePic(event) {
|
||
|
|
this[`fileList${event.name}`].splice(event.index, 1)
|
||
|
|
if (event.name == '1') {
|
||
|
|
this.photoUrl.splice(event.index, 1)
|
||
|
|
}
|
||
|
|
if (event.name == '2') {
|
||
|
|
this.videoUr = null
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
// 新增图片
|
||
|
|
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,
|
||
|
|
|
||
|
|
})
|
||
|
|
})
|
||
|
|
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(e) {
|
||
|
|
console.log(e);
|
||
|
|
upload({
|
||
|
|
url: '/common/upload',
|
||
|
|
filePath: e,
|
||
|
|
}).then((res) => {
|
||
|
|
this.formData.photo = res.fileName
|
||
|
|
})
|
||
|
|
},
|
||
|
|
submit() {
|
||
|
|
if (!this.formData.photo || this.formData.photo.length == 0) {
|
||
|
|
uni.showToast({
|
||
|
|
title: "请上传封面图",
|
||
|
|
icon: "none"
|
||
|
|
})
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (!this.formData.name || !this.formData.price || !this.formData.reserveMoney || !this.formData
|
||
|
|
.automatic || !this.formData.license || !this.formData.describ) {
|
||
|
|
uni.showToast({
|
||
|
|
title: "请填写完整数据",
|
||
|
|
icon: "none"
|
||
|
|
})
|
||
|
|
return
|
||
|
|
}
|
||
|
|
if (this.formData.id) {
|
||
|
|
request({
|
||
|
|
url: '/drivingSchool/system/driveSchoolCourse',
|
||
|
|
method: 'put',
|
||
|
|
data: this.formData
|
||
|
|
}).then((res) => {
|
||
|
|
uni.navigateBack()
|
||
|
|
})
|
||
|
|
} else {
|
||
|
|
request({
|
||
|
|
url: '/drivingSchool/system/driveSchoolCourse',
|
||
|
|
method: 'post',
|
||
|
|
data: this.formData
|
||
|
|
}).then((res) => {
|
||
|
|
uni.navigateBack()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
goback() {
|
||
|
|
uni.navigateBack()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.content {
|
||
|
|
width: 100%;
|
||
|
|
background: #f7f7f7;
|
||
|
|
height: 100vh;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-item {
|
||
|
|
margin-bottom: 20rpx;
|
||
|
|
margin-top: 15rpx;
|
||
|
|
margin-left: 15rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.label {
|
||
|
|
display: block;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 10rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.input,
|
||
|
|
.textarea {
|
||
|
|
width: 100%;
|
||
|
|
|
||
|
|
padding: 10rpx;
|
||
|
|
border-radius: 4rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.textarea {
|
||
|
|
height: 100rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.image-preview {
|
||
|
|
width: 100%;
|
||
|
|
height: 200rpx;
|
||
|
|
margin-top: 10rpx;
|
||
|
|
object-fit: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
.picker {
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
padding: 10rpx;
|
||
|
|
border-radius: 4rpx;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.qiu {
|
||
|
|
width: 21px;
|
||
|
|
height: 21px;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: 1px solid #DCDCDC;
|
||
|
|
}
|
||
|
|
|
||
|
|
.qiu-x {
|
||
|
|
width: 21px;
|
||
|
|
height: 21px;
|
||
|
|
border-radius: 50%;
|
||
|
|
border: 1px solid #4AA76F;
|
||
|
|
background: #4AA76F;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.container {
|
||
|
|
width: 100%;
|
||
|
|
background: #f7f7f7;
|
||
|
|
box-sizing: border-box;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.d-s {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-d-s {
|
||
|
|
width: 95%;
|
||
|
|
margin: 10px auto;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.touxiang {
|
||
|
|
width: 56px;
|
||
|
|
height: 56px;
|
||
|
|
border-radius: 0px 0px 0px 0px;
|
||
|
|
overflow: hidden;
|
||
|
|
border-radius: 50%;
|
||
|
|
margin-right: 10px;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.touxiang1 {
|
||
|
|
width: 36px;
|
||
|
|
height: 36px;
|
||
|
|
border-radius: 0px 0px 0px 0px;
|
||
|
|
overflow: hidden;
|
||
|
|
border-radius: 50%;
|
||
|
|
margin-right: 10px;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.name_ {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 16px;
|
||
|
|
color: #FFFFFF;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bai-box {
|
||
|
|
width: 95%;
|
||
|
|
margin: 10px auto;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 8px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.tab-box {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.t-box {
|
||
|
|
width: 50%;
|
||
|
|
text-align: center;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.gang {
|
||
|
|
width: 16px;
|
||
|
|
height: 3px;
|
||
|
|
margin: 0px auto;
|
||
|
|
margin-top: 5px;
|
||
|
|
// background: #4AA76F;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lvsize {
|
||
|
|
color: #4AA76F !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lvback {
|
||
|
|
background: #4AA76F;
|
||
|
|
}
|
||
|
|
|
||
|
|
.box-ds {
|
||
|
|
width: 95%;
|
||
|
|
margin: 15px auto;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
background-color: #fff;
|
||
|
|
border-radius: 4px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.left-box {
|
||
|
|
width: 106px;
|
||
|
|
height: 66px;
|
||
|
|
overflow: hidden;
|
||
|
|
border-radius: 6px;
|
||
|
|
margin-right: 10px;
|
||
|
|
|
||
|
|
image {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.box-title {
|
||
|
|
font-weight: 800;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #333333;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.wrap-box {
|
||
|
|
width: 100%;
|
||
|
|
box-sizing: border-box;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-lv {
|
||
|
|
background: #E6F5F0;
|
||
|
|
border-radius: 2px 2px 2px 2px;
|
||
|
|
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 5px;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 10px;
|
||
|
|
font-size: 10px;
|
||
|
|
color: #4AA76F;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-h {
|
||
|
|
background: #FFEDD4;
|
||
|
|
border-radius: 2px 2px 2px 2px;
|
||
|
|
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 5px;
|
||
|
|
font-weight: 400;
|
||
|
|
font-size: 10px;
|
||
|
|
font-size: 10px;
|
||
|
|
color: #EDA23A;
|
||
|
|
}
|
||
|
|
|
||
|
|
.price_ {
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #FB423B;
|
||
|
|
margin-right: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sc {
|
||
|
|
font-size: 10px;
|
||
|
|
color: #AAAAAA;
|
||
|
|
text-decoration-line: line-through;
|
||
|
|
text-transform: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.liang-box {
|
||
|
|
border-top: 1px solid #DDDDDD;
|
||
|
|
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 10px 0px;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.lb-box {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
font-size: 12px;
|
||
|
|
color: #999999;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.right-icon {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: flex-end;
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: bold;
|
||
|
|
margin-top: 10px;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.h-bs- {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
border-bottom: 1px solid #EEEEEE;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 10px 0px;
|
||
|
|
font-size: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.anniu {
|
||
|
|
width: 313px;
|
||
|
|
height: 40px;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 20px 20px 20px 20px;
|
||
|
|
border: 1px solid #4AA76F;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: #4AA76F;
|
||
|
|
margin: 15px auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.top-input {
|
||
|
|
width: 100%;
|
||
|
|
background: #fff;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 10px 0px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
</style>
|