晚上弹窗内容

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

@@ -5,7 +5,7 @@
     :dialog-style="dialogStyle"
     @close-dialog="handleClose"
   >
-    <el-tabs v-model="activeName" @tab-click="handleClick">
+    <el-tabs v-model="activeName">
       <el-tab-pane label="概况" name="message">
         <el-container>
           <el-main>
@@ -16,7 +16,6 @@
               ref="formData"
               :model="formData"
               :rules="rules"
-         
             >
               <div class="formTitle">基本信息</div>
               <div class="item-box">
@@ -76,6 +75,47 @@
                   <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>
@@ -88,16 +128,23 @@
       <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 },
+  components: { Dialog, OtherSettingsDialog },
   props: {
     // 弹窗控制参数
     showDialog: {
@@ -116,7 +163,7 @@ export default {
       // dialog样式
       dialogStyle: {
         "--dialog-width": "1000px",
-        "--dialog-height": "884px",
+        "--dialog-height": "844px",
         "--title-height": "51px",
       },
       // 弹窗标题
@@ -186,6 +233,14 @@ export default {
 
       return rlt;
     },
+
+    // 自定义邀请码
+    setInvitationCode(){
+        this.setItemData = {
+           title: '自定义邀请码',
+           data: []
+        }
+    },
   },
 };
 </script>
@@ -211,6 +266,7 @@ export default {
     .item-box {
       display: flex;
       align-items: flex-start;
+
       div {
         width: 50%;
       }
@@ -227,4 +283,20 @@ export default {
     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="删除"
@@ -75,7 +76,7 @@
       </div>
     </el-main>
 
-    <memberDialog :showDialog="true" ></memberDialog>
+    <memberDialog :showDialog="isSearchDialog" @handle-close="handleClose"></memberDialog>
   </el-container>
 </template>
 
@@ -83,20 +84,21 @@
 import ActionButton from "@/components/ActionButton/index";
 import CustomButton from "@/components/CustomButton/index";
 
-
-import memberDialog from './components/memberDialog.vue'
+import memberDialog from "./components/memberDialog.vue";
 
 export default {
   components: {
     ActionButton,
     CustomButton,
-    memberDialog
+    memberDialog,
   },
   data() {
     return {
       formData: {},
       isSearchVisible: false,
 
+      isSearchDialog: false,
+
       // 分页数据
       totalCount: 0,
       currentPage: 1,
@@ -126,6 +128,14 @@ export default {
       this.currentPage = val;
       this._fetchData();
     },
+
+    handleDetalis() {
+      this.isSearchDialog = true;
+    },
+
+    handleClose() {
+      this.isSearchDialog = false;
+    },
   },
 };
 </script>
@@ -142,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>