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: {
        github: "",
        zhihu: "",
        stackoverflow: "",
        dribbble: ""
      },
      origin: {}
    };
  },
  components: {
    uploader
  },
  computed: {},
  watch: {},
  async mounted() {
    this.getData();
  },
  methods: {
    // github, zhihu, stackoverflow, dribbble
    async onSubmit(type) {
      console.log("submit!", this.social);
      const value = this.social[type];
      if (!value) {
        this.$message.error("请检查输入!");
        return;
      }
      const data = Object.assign({}, this.origin);
      data[`${type}`] = value;
      const postData = {};
      for (let key in data) {
        postData[`${key}_user`] = data[key];
      }
      const res = await this.$axios.$post(
        `/api/social_network/update`,
        postData
      );
      if (res.status === 1) {
        this.$message.success("保存成功！");
      } else {
        // this.$message.error(res.info);
      }
    },
    async getData() {
      const res = await this.$axios.$post("/api/social_network/get_fill_info");
      const data = res.data || {};
      this.social = data;
      this.origin = Object.assign({}, data);
    }
  }
};
</script>

<style lang="scss">
.info {
  header .el-icon-plus {
    font-size: 18px;
  }
  .edit {
    padding: 20px;
    > form {
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }
      .opts {
        display: flex;
        align-items: center;
        .el-button {
          margin-left: 5px;
        }
      }
      .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>