xdd-uniapp-new/pagesInn/inn/innInfoPublish.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"
          :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 '@/pagesInn/components/tm-upload/tm-upload.vue';
  import jinEdit from '@/pagesInn/components/jin-edit/jin-edit.vue';
  import {
    VUE_APP_API_URL
  } from "@/config";
  import {
    postHotelNewsAdd
  } from "@/api/inn.js";
  export default {
    components: {
      tmUpload,
      jinEdit
    },
    data() {
      return {
        webUrl: this.$VUE_APP_RESOURCES_URL,
        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,
          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: "发布成功!"
          });
          setTimeout(() => {
            this.$yrouter.back();
          }, 1000);
        }).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;
      }
      .inp-input {
        height: 72rpx;
        line-height: 72rpx;
      }
      .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>