合并代码

src/components/Dialog/index.vue

@@ -235,8 +235,8 @@ export default {
       display: flex;
       align-items: center;
       height: var(--title-height);
-      background-color: #fff;
-      border: 1px solid #e9e9e9;
+      background-color: #F9F9F9;
+ 
 
       .title {
         margin-left: 24px;

src/styles/element-ui.scss

@@ -93,3 +93,14 @@
   position: fixed;
   top: 0;
 }
+
+.dialog-area {
+  .el-tabs__nav-scroll  {
+    background-color: #F9F9F9;
+    box-sizing: border-box;
+    padding: 0 24px;
+  }
+  .el-tabs__nav-wrap::after {
+    display: none;
+  }
+}

src/views/member-management/components/memberDialog.vue

@@ -0,0 +1,230 @@
+<template>
+  <Dialog
+    :is-dialog-exist="showDialog"
+    :title="dialogTitle"
+    :dialog-style="dialogStyle"
+    @close-dialog="handleClose"
+  >
+    <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="概况" name="message">
+        <el-container>
+          <el-main>
+            <el-form
+              size="mini"
+              label-position="right"
+              label-width="120px"
+              ref="formData"
+              :model="formData"
+              :rules="rules"
+         
+            >
+              <div class="formTitle">基本信息</div>
+              <div class="item-box">
+                <el-form-item label="头像">
+                  <img
+                    style="width: 70px; height: 70px; border-radius: 5px"
+                    src="https://img1.baidu.com/it/u=4154498888,1222423227&fm=11&fmt=auto&gp=0.jpg"
+                    alt=""
+                  />
+                </el-form-item>
+
+                <el-form-item label="会员ID">
+                  <el-input disabled></el-input>
+                </el-form-item>
+              </div>
+
+              <div class="item-box">
+                <el-form-item label="会员昵称">
+                  <el-input></el-input>
+                </el-form-item>
+
+                <el-form-item label="手机号">
+                  <el-input></el-input>
+                </el-form-item>
+              </div>
+
+              <div class="item-box">
+                <el-form-item label="账号状态">
+                  <el-select v-model="value" placeholder="请选择">
+                    <el-option
+                      v-for="item in options"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    >
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+
+                <el-form-item label="邀请码">
+                  <el-input></el-input>
+                </el-form-item>
+              </div>
+
+              <div class="item-box">
+                <el-form-item label="微信号">
+                  <el-input></el-input>
+                </el-form-item>
+
+                <el-form-item label="密码">
+                  <el-input></el-input>
+                </el-form-item>
+              </div>
+
+              <div class="item-box" style="width: 100%">
+                <el-form-item label="备注">
+                  <el-input style="width: 100%"></el-input>
+                </el-form-item>
+              </div>
+            </el-form>
+          </el-main>
+        </el-container>
+      </el-tab-pane>
+      <el-tab-pane label="余额变动" name="balance">余额变动</el-tab-pane>
+      <el-tab-pane label="积分变动" name="integral">积分变动</el-tab-pane>
+    </el-tabs>
+
+    <el-footer>
+      <el-button type="primary" @click="submitForm">确定</el-button>
+      <el-button @click="handleClose">取消</el-button>
+    </el-footer>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@/components/Dialog/index";
+/**
+ * 结算dialog
+ */
+export default {
+  components: { Dialog },
+  props: {
+    // 弹窗控制参数
+    showDialog: {
+      type: Boolean,
+      default: false,
+    },
+    // 选中的数据
+    selectItem: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      activeName: "message",
+      // dialog样式
+      dialogStyle: {
+        "--dialog-width": "1000px",
+        "--dialog-height": "884px",
+        "--title-height": "51px",
+      },
+      // 弹窗标题
+      dialogTitle: "会员明细",
+      // 提交参数
+      formData: {},
+      // 校验规则
+      rules: {},
+
+      //
+
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+      value: "",
+    };
+  },
+  watch: {
+    showDialog(val) {
+      if (val) {
+        this.initDataView();
+      }
+    },
+  },
+  methods: {
+    // 关闭弹窗
+    handleClose() {
+      this.$emit("handle-close");
+    },
+    // 提交弹窗
+    handleSuccess() {
+      this.$emit("handle-success");
+    },
+    // 初始化弹窗参数
+    initDataView() {
+      console.log("初始化弹窗参数");
+    },
+    // 提交表单
+    submitForm() {
+      this.$refs.formData.validate((valid) => {
+        if (valid && this.customValidate()) {
+          console.log("提交表单");
+        }
+      });
+    },
+    customValidate() {
+      let rlt = true;
+
+      return rlt;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-container {
+  width: 100%;
+  height: 100%;
+  .el-main {
+    height: 90%;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 20px 40px;
+    .formTitle {
+      color: #333333;
+      font-size: 16px;
+      height: 12px;
+      line-height: 12px;
+      padding-left: 6px;
+      border-left: 3px solid #1890ff;
+      margin-bottom: 30px;
+    }
+    .item-box {
+      display: flex;
+      align-items: flex-start;
+      div {
+        width: 50%;
+      }
+    }
+  }
+  .el-footer {
+    height: 10%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    bottom: 0;
+    position: absolute;
+  }
+}
+</style>

src/views/member-management/index.vue

@@ -74,6 +74,8 @@
         </el-footer>
       </div>
     </el-main>
+
+    <memberDialog :showDialog="true" ></memberDialog>
   </el-container>
 </template>
 
@@ -81,10 +83,14 @@
 import ActionButton from "@/components/ActionButton/index";
 import CustomButton from "@/components/CustomButton/index";
 
+
+import memberDialog from './components/memberDialog.vue'
+
 export default {
   components: {
     ActionButton,
     CustomButton,
+    memberDialog
   },
   data() {
     return {