proginn-frontend/pages/kaifain/add/index.vue

<template>
  <div class="kaifainAdd">
    <div class="topArea">
      <div class="title">
        添加解决方案，成为合作伙伴
        <div class="backBox" @click="jumpTo()">
          <p class="backIcon"/>
          <p class="backWord">企业信息</p>
        </div>
      </div>
      <div class="line">

      </div>
    </div>
    <div class="bodyArea">
      <div class="statusBox" :class="{none: !(statusObj.isOk)}">
        <p>{{statusObj.name}}</p>
      </div>

      <div class="nameBox">
        <div class="stitle">方案名称</div>
        <el-input v-model="data.title" placeholder="20字以内 不能包含 & ￥ % / \ *"></el-input>
      </div>
      <div class="selectArea">
        <div class="left">
          <div class="stitle">行业领域</div>
          <el-select style="width: 280px" v-model="data.industry" placeholder="选择行业类型">
            <el-option
              v-for="item in industryList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="right">
          <div class="stitle">技术分类</div>
          <el-select style="width: 427px" v-model="data.tech_type" placeholder="选择技术分类">
            <el-option
              v-for="item in techTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="logoBox">
        <div class="stitle">缩略图</div>
        <div class="uploadInfo">
          <div class="left">
            <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :multiple="false"
              accept="image/png, image/jpeg"
              :before-upload="(file) => handleFileChange(file, 'images')"
            >
              <i v-if="data.images" class="el-icon-delete avatar-uploader-icon"
                @click.stop="(file) => handleDeleteFile('images')"></i>
              <img v-if="data.images" :src="data.images" class="avatar"/>
              <div v-else class="noneImage">
                <i class="el-icon-plus avatar-uploader-icon"></i>
                <span class="title">上传照片</span>
              </div>
            </el-upload>
            <p class="rightTips">支持JPG、PNG格式</p>
          </div>
          <div class="right">
            <p>（800*800，图片最大2M，最多1张）</p>
          </div>
        </div>
      </div>
      <div class="smallIntro">
        <div class="stitle">方案简介</div>
        <el-input v-model="data.description" placeholder="请用一句话来介绍您的方案，10-50字符"></el-input>
      </div>
      <div class="intro">
        <div class="stitle">方案介绍<span>查看参考示例</span></div>
        <div class="editor">
          <editor :content="data.detail"
            @change="(val) => data.detail = val"
            :haveVideo="true"
            placeholder="支持图文混排，请至少添加：【文字描述】【方案视频】【方案介绍图片】【架构图片】【架构说明】等模块；可添加方案截图/PDF文档转图片，不低于500字"
          ></editor>
        </div>
      </div>

      <div class="successIntro">
        <div class="stitle">成功案例</div>
        <div class="list">
          <div class="titleCell">
            <div class="tt1"><p>品牌logo</p></div>
            <div class="tt2">案例描述</div>
            <div class="tt3">附件</div>
            <div class="tt4">操作</div>
          </div>
          <div class="cell"
            v-for="(item, index) in data.successful_case"
            @click="openEditCase(item)"
          >
            <div class="img">
              <img :src="item.logo" alt="">
            </div>
            <div class="content">
              <p>{{item.description}}</p>
            </div>
            <div class="pdf" @click.stop="openNewUrl(item)">
              <div class="icon"></div>
              <p>成功案例.PDF</p>
            </div>
            <div class="del" @click.stop="deleteCase(item)">
              <div class="icon"></div>
            </div>
          </div>
          <div class="addCell" @click="addSuccessInfo">
            <div class="icon"></div>
            <p>添加成功案例</p>
          </div>
        </div>
      </div>

      <div class="bottomBtn">
        <div class="submit" @click="submitAll">
          <p>提交审核</p>
        </div>
        <div class="keepTmp" @click="saveDraft()">
          <p>存草稿</p>
        </div>
      </div>
    </div>

    <el-dialog
      title="添加成功案例"
      :visible.sync="dialogVisible"
      width="613px"
      :append-to-body="true"
      :center="true"
    >
      <div class="diaContentWork">
        <div class="taskName">
          <div class="name">案例名称</div>
          <div class="value">
            <el-input v-model="dataItem.title" placeholder="请输入案例名称(2-10个字符)"></el-input>
          </div>
        </div>
        <div class="ourLogo">
          <div class="name">品牌logo</div>
          <div class="value">
            <div class="uploadInfo">
              <div class="left">
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :show-file-list="false"
                  :multiple="false"
                  accept="image/png, image/jpeg"
                  :before-upload="(file) => handleFileChange(file, 'logo')"
                >
                  <i v-if="dataItem.logo" class="el-icon-delete avatar-uploader-icon"
                    @click.stop="() => handleDeleteFile('logo') "></i>
                  <img v-if="dataItem.logo" :src="dataItem.logo" class="avatar"/>
                  <div v-else class="noneImage">
                    <i class="el-icon-plus avatar-uploader-icon"></i>
                  </div>
                </el-upload>
              </div>
              <div class="right">
                <p>（800*800，图片最大2M，最多1张）</p>
              </div>
            </div>
          </div>
        </div>
        <div class="taskDesc">
          <div class="name">案例描述</div>
          <div class="value">
            <el-input v-model="dataItem.description" placeholder="请输入案例描述(10-50个字符)"></el-input>
          </div>
        </div>
        <div class="taskFile">
          <div class="name">案例附件</div>
          <div class="value">
            <el-upload
              class="upload-demo"
              action="#"
              :show-file-list="true"
              :multiple="false"
              accept="application/pdf"
              :file-list="fileList"
              :before-upload="handlePDFFileChange"
              :before-remove="handlePDFFileRemove"
            >
              <div style="margin-top: 10px">
                <span class="uploadFileWord">立即上传</span>
                <span class="uploadFileTip">仅支持PDF格式(最大2M)</span>
              </div>
            </el-upload>
          </div>
        </div>

      </div>
      <div class="dialog-footer">
        <div class="submit" @click="addCase"><p>提交</p></div>
        <div class="cancle" @click="dialogVisible=false"><p>取消</p></div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import editor from "@/components/editor";
  import uploadFile from "@/mixins/uploadFile";

  export default {
    name: 'userSetting',
    components: {
      editor
    },
    data() {
      return {
        data: {
          city: 1,
          industry: null, //所处行业的ID
          title: '', //服务名称
          description: '', //简单描述
          images: '', //封面图片，缩略图的地址URL
          detail: '',//具体的描述
          tech_type: null,//技术类型
          successful_case: []
        },
        industryList: [],
        techTypeList: [],
        dialogVisible: false,
        dataItem: {
          provider_id: 0,//服务商ID
          title: '', //成功案例1
          logo: '',//http://www.baidu.com，URL
          description: '', //描述一下啊啥的发啊的算法
          file: '', //https://www.baidu.com，用户上传的PDF，格式必须为PDF，URL
        },
        fileList: [],
      }
    },
    mixins: [uploadFile],
    async created() {
      this.getDraftInfo()
      this.getTypeList()
    },
    computed: {
      statusObj() {
        let status = Number(this.data.status || 0)
        let nameList = ['未申请', '审核中', '已入驻', '拒绝']
        let o = {
          isOk: status === 2,
          name: nameList[status]
        }
        return o
      }
    },
    async mounted() {
    },
    methods: {
      jumpTo() {
        location.href = ""
      },
      /** 图片文件上传 **/
      handleFileChange(file, type) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG) {
          this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
          return
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
          return
        }
        const formData = new FormData();
        formData.append("file", file);
        formData.append("original_filename", file.name);
        this.uploading = true;
        this.$axios
          .$post(`/upload_image`, formData, {
            headers: { "Content-Type": "multipart/form-data" }
          })
          .then(res => {
            if (type === 'images') {
              this.data.images = res.filename
            } else if (type === 'logo') {
              this.dataItem.logo = res.filename
            }
            console.log('type', type, this.data, this.dataItem)
          })
          .finally(() => {
            this.uploading = false;
          });
      },
      /** 删除问及爱你 **/
      handleDeleteFile(type) {
        if (type === 'images') {
          this.data.images = ''
        } else if (type === 'logo') {
          this.dataItem.logo = ''
        }
      },
      /** pdf上传  **/
      handlePDFFileChange(file, type) {
        console.log(file)
        const isPDF = file.type === 'application/pdf';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isPDF) {
          this.$message.error('上传文件只能是 JPG/PNG 格式!');
          return
        }
        if (!isLt2M) {
          this.$message.error('上传文件大小不能超过 2MB!');
          return
        }
        const formData = new FormData();
        formData.append("file", file);
        formData.append("original_filename", file.name);
        this.uploading = true;
        this.apiPrepareUpload(file, (res)=>{
          if (res.data && res.data.status === 1) {
            let url = res.data.data.url
            this.dataItem.file = url
            this.fileList = [{name:file.name, url: url}]
          } else {
            this.$message.error('上传失败')
          }
        })
        return false
      },
      /** pdf删除 **/
      handlePDFFileRemove() {
        this.fileList = []
        this.dataItem.file = ""
      },
      /** 弹窗逻辑 **/
      submitChange() {
      },
      /** 获取选择信息 **/
      getTypeList() {
        this.$axios.get('/api/kaifawu/get_options').then(res => {
          if (Number(res.data.status) === 1) {
            this.industryList = res.data.data.industries
            this.techTypeList = res.data.data.tech_types
          }
        })
      },
      /** 点击添加生成案例 **/
      async addSuccessInfo() {
        let res = null
        if (!this.data.id) {
          res = await this.saveDraft()
        }
        if (this.data.id || res) {
          this.dialogVisible = true
          this.dataItem = {
            provider_id: '',//服务商ID
            title: '', //成功案例1
            logo: '',//http://www.baidu.com，URL
            description: '', //描述一下啊啥的发啊的算法
            file: '', //https://www.baidu.com，用户上传的PDF，格式必须为PDF，URL
          }
        }
      },
      /** 删除案例 **/
      deleteCase(item) {
        this.$confirm('此操作将直接删除该成功案例, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.post('/api/kaifawu/delete_case', {
            id: item.id
          }).then(res => {
            if (Number(res.data.status) === 1) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      /** 添加案例 **/
      async addCase() {
        let p = {}
        let keyList = ['id', 'provider_id', 'title', 'logo', 'description', 'file']
        for (let key of keyList) {
          if (this.dataItem[key]) {
            p[key] = this.dataItem[key]
          }
        }
        p.provider_id = this.data.id
        console.log("添加案例", this.dataItem, p)
        let isEdit = !!p.id
        if (!p.title || p.title.length < 2 || p.title.length > 20) {
          this.$message.warning('请填写2-20字符的案例名称！')
          return
        }
        if (!p.logo) {
          this.$message.warning('请上传品牌logo')
          return
        }
        if (!p.description || p.description.length < 10 || p.description.length > 50) {
          this.$message.warning('请填写10-50字符的案例描述')
          return
        }
        if (!p.file) {
          this.$message.warning('请上传案例附件')
          return
        }
        let url = isEdit ? '/api/kaifawu/update_case' : '/api/kaifawu/store_case'
        this.$axios.post(url, p).then(res => {
          if (Number(res.data.status) === 1) {
            this.dataItem.id = 4
            if (!isEdit) {
              this.data.successful_case.push(this.dataItem)
            } else {
              this.getDraftInfo()
            }
            this.dataItem = {
              provider_id: 0, title: '', logo: '', description: '', file: '',
            }
            this.dialogVisible = false
            this.fileList = []
            this.$message.success(isEdit ? '更新成功' : '添加成功')
          }
        })
      },
      openEditCase(item) {
        this.dataItem = {
          ...item
        }
        if (item.file) {
          this.fileList = [ {
            name: '成功案例.pdf',
            url: item.file
          } ]
        } else {
          this.fileList = []
        }

        this.dialogVisible = true
        console.log('openEditCase', this)
      },
      /** 获取草稿 **/
      getDraftInfo() {
        this.$axios.get('/api/kaifawu/get_draft').then(res => {
          if (Number(res.data.status) == 1 && res.data.data) {
            let data = res.data.data
            if (!Array.isArray(data.successful_case)) {
              if (data.successful_case && typeof data.successful_case === "object") {
                data.successful_case = [ data.successful_case ]
              } else {
                data.successful_case = []
              }
            }
            data.city = Number(data.city)
            data.industry = Number(data.industry)
            data.tech_type = Number(data.tech_type)
            this.data = data
            console.log('this.data', this.data)
          }
        })
      },
      /** 存储草稿 **/
      async saveDraft(isPublish) {
        console.log(isPublish)
        let url = '/api/kaifawu/store'
        if (this.data.id) {
          url = '/api/kaifawu/publish'
        }
        let p = {
          ...this.data,
          publish: isPublish ? 1 : 0
        }
        //服务名称
        if (!p.title) {
          this.$message.warning('请填写正确的服务名称（2-10字符）')
          return
        }
        //所处行业
        if (!p.industry) {
          this.$message.warning('请选择所处行业')
          return
        }
        //技术类型
        if (!p.tech_type) {
          this.$message.warning('请选择技术类型')
          return
        }
        //缩略图
        if (!p.images) {
          this.$message.warning('请上传缩略图')
          return
        }
        //方案简介
        if (!p.description) {
          this.$message.warning('请填写正确的方案简介（10-50字符）')
          return
        }
        //方案简介
        if (!p.detail) {
          this.$message.warning('请填写方案介绍')
          return
        }
        let res = await this.$axios.post(url, p)
        if (Number(res.data.status) === 1) {
          if (!isPublish) {
            this.getDraftInfo()
            this.$message.success('保存成功')
          } else {
            this.$message.success('发布成功')
            location.href = "/wo/" + this.$store.state.userinfo.uid
          }
          return true
        }
      },
      /** 确认提交 **/
      submitAll() {
        this.saveDraft(true)
      },
      openNewUrl(item) {
        window.open(item.file, '__black')
      }
    },

  }
</script>
<style lang="scss" scoped>
  @import '../../../assets/css/kaifain/kaifainAdd.scss';
</style>
<style lang="scss">
  @import '../../../assets/css/kaifain/kaifainAddNoScoped.scss';
</style>