proginn-frontend/components/sign/social.vue

<template>
  <div class="info">
    <header>
      <h5>专业社区影响力</h5>
    </header>
    <div class="edit">
      <el-form ref="form" :rules="rules" :model="social" label-width="130px">
        <div class="line">
          <img
            class="prefix-icon"
            src="~@/assets/img/sign/github.png"
            srcset="~@/assets/img/sign/github@2x.png"
            alt="github"
          />
          <el-form-item label="Github" prop="github">
            <el-input placeholder="请输入需绑定账号用户名" v-model="social.github"></el-input>
          </el-form-item>
          <span class="opts">
            <el-button type="info" @click="handleCancel('github')">取消</el-button>
            <el-button type="primary" @click="onSubmit('github')">确认</el-button>
          </span>
        </div>
        <div class="line">
          <img
            class="prefix-icon"
            src="~@/assets/img/sign/zhihu.png"
            srcset="~@/assets/img/sign/zhihu@2x.png"
            alt="zhihu"
          />
          <el-form-item label="知乎" prop="zhihu">
            <el-input placeholder="请输入需绑定账号用户名" v-model="social.zhihu"></el-input>
          </el-form-item>
          <span class="opts">
            <el-button type="info" @click="handleCancel('zhihu')">取消</el-button>
            <el-button type="primary" @click="onSubmit('zhihu')">确认</el-button>
          </span>
        </div>
        <div class="line">
          <img
            class="prefix-icon"
            src="~@/assets/img/sign/stackoverflow.png"
            srcset="~@/assets/img/sign/stackoverflow@2x.png"
            alt="stackoverflow"
          />
          <el-form-item label="StackOverflow" prop="stackoverflow">
            <el-input placeholder="请输入需绑定账号用户名" v-model="social.stackoverflow"></el-input>
          </el-form-item>
          <span class="opts">
            <el-button type="info" @click="handleCancel('stackoverflow')">取消</el-button>
            <el-button type="primary" @click="onSubmit('stackoverflow')">确认</el-button>
          </span>
        </div>
        <div class="line">
          <img
            class="prefix-icon"
            src="~@/assets/img/sign/dribbble.png"
            srcset="~@/assets/img/sign/dribbble@2x.png"
            alt="dribbble"
          />
          <el-form-item label="Dribbble" prop="dribbble">
            <el-input placeholder="请输入需绑定账号用户名" v-model="social.dribbble"></el-input>
          </el-form-item>
          <span class="opts">
            <el-button type="info" @click="handleCancel('dribbble')">取消</el-button>
            <el-button type="primary" @click="onSubmit('dribbble')">确认</el-button>
          </span>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import uploader from "@/components/uploader";
export default {
  data() {
    return {
      // editing: true,
      editingItem: [],
      rules: {
        name: ""
      },
      social: {
        imageUrl: "",
        start: "",
        end: "",
        company: "",
        position: "",
        des: ""
      },
      experience: [
        {
          imageUrl: "",
          start: "2019-01-02",
          end: "2019-01-02",
          company: "程序员客栈",
          position: "高级产品经理",
          des:
            "主要负责程序员客栈“雇佣直通车、1980服务、云端项目、雇佣项目“项目前后端开发，参与整个项目的设计、需求讨论、代码开发、联调测试及系统维护迭代。 【主要工作成就】：解决“雇佣直通车”项目，系统智能自动匹配算法问题。"
        }
      ],
      current: null
    };
  },
  components: {
    uploader
  },
  methods: {
    onSubmit(idx) {
      console.log("submit!", this.form);
      this.experience.push(this.form);
    },
    handleAdd() {
      this.experience.push(this.init);
      this.editingItem.push(this.experience.length - 1);
    },
    handleImageUrl(url) {
      this.form.imageUrl = url;
    },
    handleDelete(idx) {
      this.experience.splice(this.experience.indexOf(this.current), 1);
    },
    handleCancel(idx) {
      this.editingItem.splice(this.editingItem.indexOf(idx), 1);
    },
    editItem(idx) {
      this.editingItem.push(idx);
    }
  }
};
</script>

<style lang="scss">
.info {
  header .el-icon-plus {
    font-size: 18px;
  }
  .edit {
    padding: 20px;
    > form {
      .opts {
        float: right;
      }
      .to {
        margin-right: 10px;
      }
      .line {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80px;
        border-bottom: 1px solid #ebeef5;
        .el-form-item {
          margin-bottom: 0;
        }
        .el-input {
          width: 586px;
        }
        .prefix-icon {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 26px;
          height: 26px;
          z-index: 10;
        }
      }
      .el-form-item__label {
        text-align: left;
        padding-left: 30px;
      }
    }
  }
}
</style>