|
|
@@ -2,13 +2,103 @@
|
|
|
<div class="create-consult-wrapper">
|
|
|
<div class="create-consult-title">创建话题</div>
|
|
|
<div class="form-wrapper">
|
|
|
- <div class="consult-field">
|
|
|
+ <!-- 标题 -->
|
|
|
+ <div class="title-field">
|
|
|
<div class="field-name">话题标题</div>
|
|
|
<el-input
|
|
|
- class="consult-title-input"
|
|
|
+ class="title-input"
|
|
|
v-model="title"
|
|
|
placeholder="请输入话题"></el-input>
|
|
|
</div>
|
|
|
+ <!-- 描述 -->
|
|
|
+ <div class="content-field">
|
|
|
+ <div class="field-name">话题描述</div>
|
|
|
+ <div class="content-editor">
|
|
|
+ <editor
|
|
|
+ :hideImage="false"
|
|
|
+ :content="content"
|
|
|
+ @change="handleChange"
|
|
|
+ placeholder="请输入话题描述"></editor>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 价格、分类 -->
|
|
|
+ <div class="price-field">
|
|
|
+ <div class="price-wrapper">
|
|
|
+ <div class="field-name">话题价格</div>
|
|
|
+ <el-input
|
|
|
+ class="price-input"
|
|
|
+ type="number"
|
|
|
+ placeholder="请输入价格"
|
|
|
+ v-model="price"></el-input>
|
|
|
+ <span>元</span>
|
|
|
+ </div>
|
|
|
+ <div class="cate-wrapper">
|
|
|
+ <div class="field-name">话题类别</div>
|
|
|
+ <el-cascader
|
|
|
+ class="cate-cascader"
|
|
|
+ v-model="selectedConsultCate"
|
|
|
+ :options="consultCate"
|
|
|
+ :props="{ expandTrigger: 'hover' }"
|
|
|
+ placeholder="请选择类别"></el-cascader>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 咨询时间 -->
|
|
|
+ <div class="week-field">
|
|
|
+ <div class="week-field-name">咨询时间：</div>
|
|
|
+ <el-checkbox-group class="week-checkbox" v-model="week">
|
|
|
+ <el-checkbox-button label="monday">周一</el-checkbox-button>
|
|
|
+ <el-checkbox-button label="tuesday">周二</el-checkbox-button>
|
|
|
+ <el-checkbox-button label="wednesday">周三</el-checkbox-button>
|
|
|
+ <el-checkbox-button label="thursday">周四</el-checkbox-button>
|
|
|
+ <el-checkbox-button label="friday">周五</el-checkbox-button>
|
|
|
+ <el-checkbox-button label="saturday">周六</el-checkbox-button>
|
|
|
+ <el-checkbox-button label="sunday">周日</el-checkbox-button>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <!-- 开放时间 -->
|
|
|
+ <div class="time-field">
|
|
|
+ <div class="field-name">开放时间</div>
|
|
|
+ <el-time-picker
|
|
|
+ class="time-picker"
|
|
|
+ is-range
|
|
|
+ :editable="false"
|
|
|
+ value-format="HH:mm"
|
|
|
+ v-model="time"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始时间"
|
|
|
+ end-placeholder="结束时间"
|
|
|
+ placeholder="选择时间范围"
|
|
|
+ :picker-options="{
|
|
|
+ selectableRange: '18:30:00 - 20:30:00',
|
|
|
+ format: 'HH:mm'
|
|
|
+ }">
|
|
|
+ </el-time-picker>
|
|
|
+ </div>
|
|
|
+ <!-- 图片 -->
|
|
|
+ <div class="image-field">
|
|
|
+ <div class="field-name">话题介绍图</div>
|
|
|
+ <multi-uploader
|
|
|
+ class="consult-image-uploader"
|
|
|
+ :showTips="false"
|
|
|
+ :limit="1"
|
|
|
+ v-model="imageList"></multi-uploader>
|
|
|
+ <div class="upload-tips">请上传话题介绍图，至多一张
|
|
|
+ 建议比例16:9（如：1920*1080、800*450）支持J(E)PG、PNG、GIF格式，小于5MB
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <div class="actions-wrapper">
|
|
|
+ <el-button
|
|
|
+ class="create-btn"
|
|
|
+ :loading="publishIsLoading"
|
|
|
+ :disabled="pcreateIsLoading"
|
|
|
+ @click="handleCreate">提交审核</el-button>
|
|
|
+ <el-button
|
|
|
+ class="pcreate-btn"
|
|
|
+ :loading="pcreateIsLoading"
|
|
|
+ :disabled="publishIsLoading"
|
|
|
+ @click="handlePcreate">存草稿</el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -32,6 +122,14 @@ export default {
|
|
|
title: '', // 标题
|
|
|
selectedConsultCate: [], // 选中的技能分类
|
|
|
consultCate: [], // 技能分类数据源
|
|
|
+ content: '', // 话题描述
|
|
|
+ defaultContent: '', // 默认的话题描述
|
|
|
+ price: '', // 价格
|
|
|
+ week: [], // 接受咨询的星期几
|
|
|
+ time: [], // 接受咨询的时间范围
|
|
|
+ imageList: [], // 用户上传的图片
|
|
|
+ publishIsLoading: false,
|
|
|
+ pcreateIsLoading: false
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
@@ -43,16 +141,16 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- /** 获取技能分类 */
|
|
|
+ /** 获取咨询分类 */
|
|
|
_getConsultCate () {
|
|
|
- this.$axios.$post('/api/sale/cateListYes', { type: 3 }).then(res => {
|
|
|
+ this.$axios.$post('/api/sale/cateListYes', { type: 3, point: 1 }).then(res => {
|
|
|
if (res.status === 1) {
|
|
|
let consultCate = res.data || []
|
|
|
this.consultCate = consultCate.map(item => {
|
|
|
let children = item.child_list.map(child => {
|
|
|
return {
|
|
|
- value: child.category_id,
|
|
|
- label: child.name
|
|
|
+ value: child.category_id,
|
|
|
+ label: child.name
|
|
|
}
|
|
|
})
|
|
|
return {
|
|
|
@@ -66,7 +164,7 @@ export default {
|
|
|
console.log('get consult cate error: ', err)
|
|
|
})
|
|
|
},
|
|
|
- /** 获取技能培训详情 */
|
|
|
+ /** 获取咨询服务详情 */
|
|
|
_getConsultDetail () {
|
|
|
const self = this
|
|
|
|
|
|
@@ -83,6 +181,74 @@ export default {
|
|
|
// }
|
|
|
// })
|
|
|
},
|
|
|
+ /** 创建、编辑咨询服务 */
|
|
|
+ _publishConsultData (actionType) {
|
|
|
+
|
|
|
+ },
|
|
|
+ /** 验证提交的数据 */
|
|
|
+ _validateConsultData () {
|
|
|
+ if (this.title === '') {
|
|
|
+ this.$message.error('请输入话题标题')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (this.title.length < 5) {
|
|
|
+ this.$message.error('话题标题不可少于5字符')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (this.title.length > 50) {
|
|
|
+ this.$message.error('话题标题不可超过50字符，请删减')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (this.content.length < 50) {
|
|
|
+ this.$message.error('话题描述不可少于50字符')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (this.content.length > 5000) {
|
|
|
+ this.$message.error('话题描述不可超过5000字符，请删减')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (this.price < 1 || this.price > 100000) {
|
|
|
+ this.$message.error('请输入1-100000元的整数价格')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (String(this.price).indexOf('.') > -1) {
|
|
|
+ if (parseInt(this.price) != Number(this.price)) {
|
|
|
+ this.$message.error('价格只能为整数')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.selectedConsultCate.length !== 2 ||
|
|
|
+ (!this.selectedConsultCate[0] || !this.selectedConsultCate[1])) {
|
|
|
+ this.$message.error('请选择话题类别')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (this.week.length === 0) {
|
|
|
+ this.$message.error('请选择咨询时间')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (this.time.length === 0) {
|
|
|
+ this.$message.error('请选择开放时间')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ /** 技能描述内容改变时 */
|
|
|
+ handleChange (val) {
|
|
|
+ this.content = val
|
|
|
+ },
|
|
|
+ /** 点击提交审核时 */
|
|
|
+ handleCreate () {
|
|
|
+ if (this._validateConsultData()) {
|
|
|
+ this._publishConsultData(this.sale_id ? 'update' : 'create')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /** 点击存草稿时 */
|
|
|
+ handlePcreate () {
|
|
|
+ if (this._validateConsultData()) {
|
|
|
+ this._publishConsultData('pcreate')
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -116,7 +282,7 @@ input[type="number"]{
|
|
|
}
|
|
|
}
|
|
|
// 图片上传器样式
|
|
|
-.skill-image-uploader {
|
|
|
+.consult-image-uploader {
|
|
|
.el-upload-list__item {
|
|
|
width: 300px !important;
|
|
|
height: 168.75px !important;
|
huan-jie