253 lines
6.2 KiB
Vue
253 lines
6.2 KiB
Vue
<template>
|
|
<view class="page-info-publish">
|
|
<view class="tab-box flex jc-center">
|
|
<text
|
|
v-for="(item,index) in tabData"
|
|
:key="item"
|
|
:class="{
|
|
'active': tabIndex === index
|
|
}"
|
|
@click="changeTab(index)"
|
|
>{{ item.label }}</text>
|
|
</view>
|
|
<form @submit="formSubmit">
|
|
<view class="form-item">
|
|
<view class="title">标题:</view>
|
|
<input
|
|
v-model="form.title"
|
|
type="text"
|
|
placeholder="请输入动态标题..."
|
|
placeholder-style="font-size:24rpx;color:#C2C5CC;"
|
|
class="inp inp-input"
|
|
/>
|
|
</view>
|
|
<view class="form-item">
|
|
<view class="title">简介:</view>
|
|
<textarea
|
|
v-model="form.intro"
|
|
placeholder="请输入简介..."
|
|
placeholder-style="font-size:24rpx;color:#C2C5CC;"
|
|
class="content-style inp"
|
|
/>
|
|
</view>
|
|
<view class="form-item" v-if="showUpload">
|
|
<view v-if="uploadType === 'image'" class="title">图片(最多9张):</view>
|
|
<view v-else class="title">视频:</view>
|
|
<tm-upload
|
|
:dataList="picsArray"
|
|
:upload_img_wh="uploadImgWH"
|
|
:upload_max="uploadMax"
|
|
:upload_count="uploadCount"
|
|
:url="uploadUrl"
|
|
:type='uploadType'
|
|
:header="uploadHeader"
|
|
@change="uploadedImgChange"
|
|
/>
|
|
</view>
|
|
<!--
|
|
<view class="form-item">
|
|
<view class="title">资讯详情:</view>
|
|
<view class="inp">
|
|
<jin-edit
|
|
:html="form.content"
|
|
placeholder="请输入内容..."
|
|
height="320px"
|
|
@editOk="editOk"
|
|
/>
|
|
</view>
|
|
</view>
|
|
-->
|
|
<view class="form-btn">
|
|
<button form-type="submit">发布</button>
|
|
</view>
|
|
</form>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tmUpload from '@/components/tm-upload/tm-upload.vue'
|
|
import {
|
|
VUE_APP_API_URL
|
|
} from '@/config'
|
|
import {
|
|
postHotelNewsAdd
|
|
} from '@/api/inn.js'
|
|
export default {
|
|
components: {
|
|
tmUpload
|
|
},
|
|
data() {
|
|
return {
|
|
uploadUrl: VUE_APP_API_URL + '/api/upload',
|
|
uploadType: 'image',
|
|
uploadCount: 9,
|
|
uploadImgWH: (750 - 3 * 16 - 2 * 32) / 3.0,
|
|
uploadHeader: {
|
|
Authorization: "Bearer " + this.$store.getters.token
|
|
},
|
|
uploadedFilesArray: [],
|
|
uploadMax:10,
|
|
picsArray: [],
|
|
showUpload: true,
|
|
hotelId: 0,
|
|
tabData: [{
|
|
label: '图文动态',
|
|
type: 'NT_TEXT',
|
|
uploadType: 'image',
|
|
uploadCount: 9
|
|
},
|
|
{
|
|
label: '视频动态',
|
|
type: 'NT_VIDEO',
|
|
uploadType: 'video',
|
|
uploadCount: 1
|
|
}
|
|
],
|
|
tabIndex: 0,
|
|
form: {
|
|
title: '',
|
|
intro: '',
|
|
content: ''
|
|
}
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.hotelId = option.hotelId
|
|
},
|
|
methods: {
|
|
changeTab(index) {
|
|
this.tabIndex = index
|
|
this.showUpload = false
|
|
this.uploadType = this.tabData[index].uploadType
|
|
this.uploadCount = this.tabData[index].uploadCount
|
|
setTimeout(()=>{
|
|
this.showUpload = true
|
|
},100)
|
|
},
|
|
editOk(res) {
|
|
this.form.content = res.html
|
|
},
|
|
//文件上传结果
|
|
uploadedImgChange: function(uploadedFilesList) {
|
|
this.uploadedFilesArray = uploadedFilesList
|
|
},
|
|
formSubmit(e) {
|
|
if (!this.form.title) {
|
|
this.$dialog.error('请输入动态标题')
|
|
return
|
|
}
|
|
if (!this.form.intro) {
|
|
this.$dialog.error('请输入简介')
|
|
return
|
|
}
|
|
// if (!this.form.content) {
|
|
// this.$dialog.error('请输入资讯详情')
|
|
// return
|
|
// }
|
|
if (this.uploadedFilesArray.length == 0) {
|
|
this.$dialog.error('请上传动态图片或视频')
|
|
return
|
|
}
|
|
uni.showLoading();
|
|
postHotelNewsAdd({
|
|
hotelId: this.hotelId,
|
|
name: this.form.title,
|
|
intro: this.form.intro,
|
|
content: this.form.content.replace(/\<img src/g, '<img style="display: block;max-width: 100%;" src'),
|
|
type: this.uploadType === 'image' ? 'NT_TEXT' : 'NT_VIDEO',
|
|
resources: this.uploadType === 'image' ? this.uploadedFilesArray : [],
|
|
video: this.uploadType === 'image' ? '' : this.uploadedFilesArray[0]
|
|
}).then(res => {
|
|
uni.hideLoading();
|
|
this.$dialog.toast({
|
|
mes: '发布成功!'
|
|
})
|
|
// 写入缓存，返回至商户主页时监听用于刷新资讯列表
|
|
uni.setStorageSync('hotelInfoPublish', '1')
|
|
setTimeout(() => {
|
|
this.$yrouter.back()
|
|
}, 3000)
|
|
}).catch((err) => {
|
|
uni.hideLoading();
|
|
this.$dialog.error(err.msg)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.page-info-publish {
|
|
padding: 0 0 80rpx 0;
|
|
font-size: 28rpx;
|
|
|
|
.tab-box {
|
|
padding: 30rpx;
|
|
background: #fff;
|
|
line-height: 1;
|
|
|
|
.active {
|
|
background: #0DC5C5;
|
|
color: #fff;
|
|
}
|
|
|
|
text {
|
|
padding: 8rpx 10rpx;
|
|
border: 1rpx solid #0DC5C5;
|
|
color: #0DC5C5;
|
|
}
|
|
|
|
text:first-child {
|
|
border-radius: 8rpx 0 0 8rpx;
|
|
}
|
|
|
|
text:last-child {
|
|
border-radius: 0 8rpx 8rpx 0;
|
|
}
|
|
}
|
|
|
|
.form-item {
|
|
padding: 30rpx;
|
|
background: #fff;
|
|
|
|
.content-style {
|
|
width: 100%;
|
|
height: 200rpx;
|
|
box-sizing: border-box;
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
}
|
|
.inp {
|
|
padding: 10rpx 16rpx;
|
|
border: 1px solid #eee;
|
|
border-radius: 6rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
.inp-input {
|
|
padding: 0 16rpx;
|
|
height: 76rpx;
|
|
line-height: 76rpx;
|
|
}
|
|
.title {
|
|
margin: 0 0 10rpx 0;
|
|
}
|
|
}
|
|
|
|
.form-btn {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
|
|
button {
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
border-radius: 0;
|
|
background: #0DC5C5;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|