晚上弹窗内容

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,302 @@
+<template>
+  <Dialog
+    :is-dialog-exist="showDialog"
+    :title="dialogTitle"
+    :dialog-style="dialogStyle"
+    @close-dialog="handleClose"
+  >
+    <el-tabs v-model="activeName">
+      <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>
+
+              <div class="item-list">
+                <span class="itemSpan1">邀请码</span>
+                <span class="itemSpan2" style="color: #178cf8">YT23694</span>
+                <el-button @click="setInvitationCode" type="primary" size="mini" icon="el-icon-edit" plain
+                  >自定义邀请码</el-button
+                >
+              </div>
+
+              <div class="item-list">
+                <span class="itemSpan1">支付宝账号</span>
+                <span class="itemSpan2">******</span>
+                <el-button type="danger" size="mini" icon="el-icon-bank-card" plain
+                  >更改绑定账号</el-button
+                >
+              </div>
+
+              <div class="item-list">
+                <span class="itemSpan1">会员等级</span>
+                <span class="itemSpan2" style="color: #178cf8">普通会员</span>
+                <el-button type="primary" size="mini" icon="el-icon-edit" plain
+                  >设置等级</el-button
+                >
+              </div>
+
+              <div class="formTitle">钱包数据</div>
+              <div class="item-list">
+                <span class="itemSpan1">余额变动</span>
+                <span class="itemSpan2" style="color: #ff4242">0.0000</span>
+                <el-button type="primary" size="mini" icon="el-icon-edit" plain
+                  >调整</el-button
+                >
+              </div>
+
+              <div class="item-list">
+                <span class="itemSpan1">积分变动</span>
+                <span class="itemSpan2" style="color: #ff4242">0.0000</span>
+                <el-button type="primary" size="mini" icon="el-icon-edit" plain
+                  >调整</el-button
+                >
+              </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>
+
+    <OtherSettingsDialog
+      :showDialog="true"
+      :dialogTitle="'设置等级'"
+    ></OtherSettingsDialog>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@/components/Dialog/index";
+
+import OtherSettingsDialog from "./otherSettingsDialog/otherSettingsDialog";
+/**
+ * 结算dialog
+ */
+export default {
+  components: { Dialog, OtherSettingsDialog },
+  props: {
+    // 弹窗控制参数
+    showDialog: {
+      type: Boolean,
+      default: false,
+    },
+    // 选中的数据
+    selectItem: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      activeName: "message",
+      // dialog样式
+      dialogStyle: {
+        "--dialog-width": "1000px",
+        "--dialog-height": "844px",
+        "--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;
+    },
+
+    // 自定义邀请码
+    setInvitationCode(){
+        this.setItemData = {
+           title: '自定义邀请码',
+           data: []
+        }
+    },
+  },
+};
+</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;
+  }
+}
+
+.item-list {
+  display: flex;
+  font-size: 14px;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 0 20px;
+  .itemSpan1 {
+    margin-right: 20px;
+    text-align: right;
+    color: #333333;
+  }
+  .itemSpan2 {
+    margin-right: auto;
+  }
+}
+</style>

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

@@ -0,0 +1,190 @@
+<template>
+  <Dialog
+    :is-dialog-exist="showDialog"
+    :title="dialogTitle"
+    :dialog-style="dialogStyle"
+    @close-dialog="handleClose"
+  >
+    <el-container>
+      <el-main>
+        <el-form ref="formData" :model="formData" :rules="rules" label-width="auto">
+          <div class="formData">
+            <img
+              src="https://img0.baidu.com/it/u=963870570,3690182722&fm=26&fmt=auto&gp=0.jpg"
+              alt=""
+            />
+            <span style="margin-bottom: 20px; color: #333333; font-size: 14px"
+              >15326713918</span
+            >
+            <el-form-item label="等级">
+              <el-select style="width: 360px" 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
+                style="width: 360px"
+                placeholder="请输入支付宝提现账号"
+              ></el-input>
+            </el-form-item>
+
+            <el-form-item label="真实姓名">
+              <el-input style="width: 360px" placeholder="请输入真实姓名"></el-input>
+            </el-form-item>
+
+            <el-form-item label="可提现余额">
+              <el-input style="width: 360px" placeholder="0.00"></el-input>
+            </el-form-item>
+            
+            <el-form-item label="积分变动">
+              <el-input style="width: 360px" placeholder="0.00"></el-input>
+            </el-form-item>
+          </div>
+        </el-form>
+      </el-main>
+      <el-footer>
+        <el-button type="primary" @click="submitForm">确定</el-button>
+        <el-button @click="handleClose">取消</el-button>
+      </el-footer>
+    </el-container>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from "@/components/Dialog/index";
+/**
+ * 结算dialog
+ */
+export default {
+  components: { Dialog },
+  props: {
+    // 弹窗控制参数
+    showDialog: {
+      type: Boolean,
+      default: true,
+    },
+    // 选中的数据
+    selectItem: {
+      type: Object,
+      default: () => {},
+    },
+    dialogTitle: {
+      type: String,
+      default: () => {
+        return "";
+      },
+    },
+  },
+  data() {
+    return {
+      // dialog样式
+      dialogStyle: {
+        "--dialog-width": "622px",
+        "--dialog-height": "424px",
+        "--title-height": "51px",
+      },
+
+      // 提交参数
+      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%;
+    .formData {
+      display: flex;
+      flex-flow: column;
+      align-items: center;
+      padding: 30px 0 0 0;
+      img {
+        width: 70px;
+        height: 70px;
+        border-radius: 50%;
+        margin-bottom: 10px;
+      }
+    }
+  }
+  .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);
+  }
+}
+</style>

src/views/member-management/index.vue

@@ -48,6 +48,7 @@
                 tip-text="查看明细"
                 type="primary"
                 icon="el-icon-tickets"
+                @onClick="handleDetalis"
               ></CustomButton>
               <CustomButton
                 tip-text="删除"
@@ -74,6 +75,8 @@
         </el-footer>
       </div>
     </el-main>
+
+    <memberDialog :showDialog="isSearchDialog" @handle-close="handleClose"></memberDialog>
   </el-container>
 </template>
 
@@ -81,16 +84,21 @@
 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 {
       formData: {},
       isSearchVisible: false,
 
+      isSearchDialog: false,
+
       // 分页数据
       totalCount: 0,
       currentPage: 1,
@@ -120,6 +128,14 @@ export default {
       this.currentPage = val;
       this._fetchData();
     },
+
+    handleDetalis() {
+      this.isSearchDialog = true;
+    },
+
+    handleClose() {
+      this.isSearchDialog = false;
+    },
   },
 };
 </script>
@@ -136,10 +152,10 @@ export default {
   }
 }
 
-  .el-footer {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+.el-footer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>