Lexus-media/src/views/account/components/EditModal.vue

<template>
  <div class="delete_modal">
    <div class="modal_content">
      <p class="edit">编辑</p>
      <div class="content">
        <div class="dlr">
          <p style="width: 100px">DLR Code</p>
          <p>{{ dataObj.dlrCode }}</p>
        </div>
        <div class="area">
          <p style="width: 100px">所属区域</p>
          <p>{{ dataObj.localArea }}</p>
        </div>
        <div class="distributor">
          <p style="width: 100px">经销商店名</p>
          <p>{{ dataObj.dlrName }}</p>
        </div>
        <div class="plate">
          <p style="width: 100px">所属平台</p>
          <p>{{ dataObj.platformName}}</p>
        </div>
        <div class="account">
          <p style="width: 100px">平台账号</p>
          <input v-model="accountCode"/>
        </div>
        <div class="isAttest">
          <p style="width: 100px">是否认证</p>
          <select v-model="selectValue">
            <!-- 原来列表展示什么，select默认展示 -->
            <option>{{ authorizationName === '是' ? "是" : "否" }}</option>
            <option>{{ authorizationName === '是' ? "否" : "是" }}</option>
          </select>
        </div>
        <div class="fans">
          <p style="width: 100px">粉丝数</p>
          <input v-model="fansNums" type="number"/>
        </div>
      </div>
      <div class="btn">
        <div class="current_button" @click="submit" style="margin: 0">确定</div>
        <div class="current_button" style="margin: 0" @click="hideModal">
          取消
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    dataObj: {
      type: Object,
      default: () => {
        return {};
      },
    },
    modalAccount: {
      type: String,
      default: ''
    },
    authorizationName: {
      type: String,
      default: ''
    },
    modalFanCount: {
      type: Number,
      default: 0
    },
  },
  data() {
    return {
      accountCode: this.modalAccount,
      fansNums: this.modalFanCount,
      selectValue: this.authorizationName
    };
  },
  methods: {
    submit: function () {
      let isAttesta = this.selectValue;
      let fansNum = this.fansNums;
      let accountCode = this.accountCode;
      console.log(isAttesta, fansNum, accountCode);
      if (!accountCode) {
        alert('平台账号不能为空');
        return
      }
      if (fansNum < 0) {
        alert('粉丝数必须是大于等于0！');
        return
      }
      this.$emit("edit_data", isAttesta, fansNum, accountCode);
    },
    hideModal: function () {
      this.$emit("hide_modal");
    },
  },
  mounted() {
  },
};
</script>

<style scoped lang="less">
.delete_modal {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(127, 127, 127, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  .modal_content {
    width: 700px;
    height: 500px;
    background-color: #eee;
    transform: translateY(-50px);
    .edit {
      height: 40px;
      line-height: 40px;
      font-size: 20px;
      text-align: left;
      border-bottom: 1px solid #ccc;
      padding-left: 20px;
    }
    .content {
      padding-left: 220px;

      .dlr {
        display: flex;
        margin-top: 20px;
        p {
          font-size: 14px;
          height: 28px;
          line-height: 28px;
        }
      }
      .area {
        display: flex;
        margin-top: 15px;
        p {
          font-size: 14px;
          height: 28px;
          line-height: 28px;
        }
      }
      .distributor {
        margin-top: 15px;

        display: flex;
        height: 28px;
        line-height: 28px;
        p {
          font-size: 14px;
        }
      }
      .plate {
        margin-top: 15px;

        display: flex;
        height: 28px;
        line-height: 28px;
        p {
          font-size: 14px;
        }
      }
      .account {
        margin-top: 15px;

        display: flex;
        height: 28px;
        line-height: 28px;
        p {
          font-size: 14px;
        }
      }
      .isAttest {
        margin-top: 15px;

        display: flex;
        p {
          font-size: 14px;
          height: 28px;
          line-height: 28px;
        }
        select {
          border: 1px solid #ccc;
          width: 144px;
          height: 28px;
          font-size: 14px;
          option {
            color: #555;
            font-size: 14px;
          }
        }
      }
      .fans {
        margin-top: 15px;

        display: flex;
        height: 28px;
        line-height: 28px;
        p {
          font-size: 14px;
        }
        input {
          border: 1px solid #ccc;
          width: 144px;
          height: 28px;
          font-size: 14px;
        }
      }
    }
    .btn {
      margin: 0 auto;
      width: 150px;
      margin-top: 50px;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>