FaceStarDetail.vue 7.72 KB
Newer Older
Davve's avatar
Davve committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
<template>
  <div class="createPost-container">
    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">

      <sticky :class-name="'sub-navbar '+postForm.status">
        <el-button v-loading="loading" style="margin-left: 10px;" type="success" @click="submitForm" :disabled="isdisabledFn">保存
        </el-button>
      </sticky>

      <div class="createPost-main-container">
        <el-row :gutter="20">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>Face明星</span>
            </div>

            <el-row>
              <el-col :span="24">
                <div class="postInfo-container">
                  <el-row>
                    <el-col :span="12">

                      <el-form-item style="margin-bottom: 20px;" label-width="75px" label="*用户名:" prop="nick_name">
                        <el-input v-model="postForm.name" type="text" style="width: 230px"/>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">

                      <el-form-item label-width="75px" label="*性别:" prop="gender">
                        <el-select v-model="postForm.sex" :placeholder="'性别:'" clearable
                                   class="postInfo-container-item"
                                   style="width: 230px">
                          <el-option v-for="item in GenderTypeOptions" :key="item.key" :label="item.display_name"
                                     :value="item.key"/>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>

                </div>
              </el-col>
            </el-row>

            <div>
Davve's avatar
Davve committed
45
              <el-form-item style="margin-bottom: 20px;" label-width="75px" label="*原图:" prop="avatar">
Davve's avatar
Davve committed
46 47 48 49 50 51
                <span v-model="uploadType"></span>
                <FaceUpload v-model="postForm.ordinary_image_url" :uploadType="uploadType"/>
              </el-form-item>
            </div>

            <div>
Davve's avatar
Davve committed
52
              <el-form-item style="margin-bottom: 20px;" label-width="75px" label="*模型:" prop="avatar">
Davve's avatar
Davve committed
53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72
                <span v-model="uploadType"></span>
                <FaceUpload v-model="postForm.modeling_obj_url" :uploadType="uploadType"/>
              </el-form-item>
            </div>
          </el-card>
        </el-row>
      </div>
    </el-form>

  </div>
</template>

<script>
  import Tinymce from '@/components/Tinymce'
  import FaceUpload from '@/components/Upload/faceupload'
  import MDinput from '@/components/MDinput'
  import Sticky from '@/components/Sticky' // 粘性header组件
  import waves from '@/directive/waves'
  import Pagination from '@/components/Pagination'
  import {validateURL} from '@/utils/validate'
Davve's avatar
Davve committed
73
  import {faceStarCreate, facestarDetail} from '@/api/face_image_upload'
Davve's avatar
Davve committed
74

Davve's avatar
Davve committed
75 76 77 78 79 80 81 82 83 84 85 86 87 88
 const SexOptions = [
        {'key': 1, 'display_name': '男'},
        {'key': 2, 'display_name': '女'},
      ]

  const sexTypeKeyValue = SexOptions.reduce((acc, cur) => {
        acc[cur.key] = cur.display_name
        return acc
  }, {})

  const ValueToSexTypeKeyValue = SexOptions.reduce((acc, cur) => {
        acc[cur.key] = cur.display_name
        return acc
  }, {})
Davve's avatar
Davve committed
89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134

  const defaultForm = {
    status: 'draft',
    uploadType: '',

    name: '',
    sex: '',
    ordinary_image_url: '',
    modeling_obj_url: '',
  }

  export default {
    name: 'FaceStarDetail',
    components: {Tinymce, MDinput, FaceUpload, Sticky, Pagination},
    directives: {waves},
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data() {
      const validateRequire = (rule, value, callback) => {
        if (value === '') {
          this.$message({
            message: rule.field + '为必传项',
            type: 'error'
          })
          callback(new Error(rule.field + '为必传项'))
        } else {
          callback()
        }
      }
      return {
        postForm: Object.assign({}, defaultForm),
        loading: false,

        city: '',
        tags: [],

        rules: {
          name: [{validator: validateRequire, trigger: 'blur'}],
          sex: [{validator: validateRequire, trigger: 'blur'}],
        },
        tempRoute: {},
        GenderTypeOptions: [
Davve's avatar
Davve committed
135 136
          {'key': 1, 'display_name': '男'},
          {'key': 2, 'display_name': '女'},
Davve's avatar
Davve committed
137 138 139 140 141 142 143 144 145 146 147
        ],
        uploadType: -99,
        isdisabledFn: false
      }
    },
    computed: {
      lang() {
        return this.$store.getters.language
      }
    },
    created() {
Davve's avatar
Davve committed
148 149 150 151 152 153 154 155
      if (this.isEdit) {
        const id = this.$route.params && this.$route.params.id
        this.fetchData(id)
      } else {
        this.postForm = Object.assign({}, defaultForm)
      }

      this.tempRoute = Object.assign({}, this.$route)
Davve's avatar
Davve committed
156 157
    },
    methods: {
Davve's avatar
Davve committed
158 159 160
      fetchData(id) {
        facestarDetail(id).then(response => {
            this.postForm = response.data.data.data
Davve's avatar
Davve committed
161
            this.postForm.sex = sexTypeKeyValue[response.data.data.data.sex]
Davve's avatar
Davve committed
162 163 164 165
        }).catch(err => {
          console.log(err)
        })
      },
Davve's avatar
Davve committed
166 167 168 169 170 171 172 173 174 175 176 177 178 179 180
      submitForm() {

        this.$refs.postForm.validate(valid => {
          if (valid) {
            this.loading = true
            if (this.postForm.ordinary_image_url === ''){
              this.$message.error('头像一不能为空~')
              this.loading = false
              return false
            }
            if (this.postForm.modeling_obj_url === ''){
              this.$message.error('头像二不能为空~')
              this.loading = false
              return false
            }
Davve's avatar
Davve committed
181 182 183 184 185 186 187 188
            const gender = {
              '男': 1,
              '女': 2
            }
            this.isdisabledFn = true
            if (gender.hasOwnProperty(this.postForm.sex)){
              this.postForm.sex = gender[this.postForm.sex]
            }
Davve's avatar
Davve committed
189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266
            this.isdisabledFn = true
            faceStarCreate(this.postForm).then(response => {
              this.$notify({
                title: '成功',
                message: response.data.data.message,
                type: 'success',
                duration: 2000
              })
              this.$router.go(0)
            }).catch(err => {
              this.$notify({
                title: '失败',
                message: '操作失败',
                type: 'danger',
                duration: 2000
              })
            });


            this.postForm.status = 'published'
            this.loading = false
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      getRemoteCityList(query) {
        citySearch(query).then(response => {
          if (!response.data.data.data) return
          this.regionListOptions = response.data.data.data
        })
      },
      getRemoteTagList(query) {
        tagSearch(query).then(response => {
          if (!response.data.data.data) return
          this.tagListOptions = response.data.data.data
        })
      },
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";

  .createPost-container {
    position: relative;
    .createPost-main-container {
      padding: 40px 45px 20px 50px;
      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;
        .postInfo-container-item {
          float: left;
        }
      }
      .editor-container {
        min-height: 500px;
        margin: 0 0 30px;
        .editor-upload-btn-container {
          text-align: right;
          margin-right: 10px;
          .editor-upload-btn {
            display: inline-block;
          }
        }
      }
    }
    .word-counter {
      width: 40px;
      position: absolute;
      right: -10px;
      top: 0px;
    }
  }
</style>