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

<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
                    v-if="selectItem.avatarUrl"
                    :src="selectItem.avatarUrl"
                    class="circle-box size-35"
                    alt="avatar"
                    style="width: 70px; height: 70px; border-radius: 5px"
                  />
                  <img
                    v-else
                    :src="defaultAvatar"
                    class="circle-box size-35"
                    alt="avatar"
                    style="width: 70px; height: 70px; border-radius: 5px"
                  />
                </el-form-item>

                <el-form-item label="会员ID">
                  <el-input disabled v-model="selectItem.id"></el-input>
                </el-form-item>
              </div>

              <div class="item-box">
                <el-form-item label="会员昵称">
                  <el-input v-model="selectItem.username"></el-input>
                </el-form-item>

                <el-form-item label="手机号">
                  <el-input v-model="selectItem.mobile"></el-input>
                </el-form-item>
              </div>

              <div class="item-box">
                <el-form-item label="账号状态">
                  <el-select v-model="selectItem.status" 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 v-model="selectItem.invite_code"></el-input>
                </el-form-item>
              </div>

              <div class="item-box">
                <el-form-item label="微信号">
                  <el-input v-model="selectItem.wx_account"></el-input>
                </el-form-item>

                <el-form-item label="密码">
                  <el-input v-model="selectItem.password"></el-input>
                </el-form-item>
              </div>

              <div class="item-box" style="width: 100%">
                <el-form-item label="备注">
                  <el-input style="width: 100%" v-model="selectItem.remark"></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="setInvitation('设置邀请码')"
                  type="primary"
                  size="mini"
                  icon="el-icon-edit"
                  plain
                  >自定义邀请码</el-button
                >
              </div> -->

              <div class="item-list">
                <span class="itemSpan1">支付宝账号</span>
                <span class="itemSpan2">{{ selectItem.alipay_account || "-" }}</span>
                <el-button
                  @click="setInvitation('修改绑定的支付宝')"
                  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
                  @click="setInvitation('设置等级')"
                  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">{{
                  selectItem.balance || "0.00"
                }}</span>
                <el-button
                  @click="setInvitation('调整余额')"
                  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">{{
                  selectItem.integral || "0.00"
                }}</span>
                <el-button
                  @click="setInvitation('调整积分')"
                  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="isOtherSettings"
      :dialogTitle="othoerItem.title"
      :selectItem="selectItem"
      @handle-close="OtherClose"
    ></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: {},
      defaultAvatar: "./pic/default/default_avatar.png",

      //
      isOtherSettings: false,
      othoerItem: {},

      options: [
        {
          value: 1,
          label: "正常",
        },
        {
          value: -1,
          label: "不正常",
        },
      ],
      value: "",
    };
  },
  watch: {
    showDialog(val) {
      if (val) {
        this.initDataView();
      }
    },
  },
  methods: {
    // 关闭弹窗
    handleClose() {
      this.$emit("handle-close");
    },
 
    // 初始化弹窗参数
    initDataView() {
      console.log("初始化弹窗参数");
    },
    // 提交表单
    submitForm() {
        this.$emit("handle-success");

    },
    customValidate() {
      let rlt = true;

      return rlt;
    },

    // 自定义邀请码
    setInvitation(title) {
      this.othoerItem = {
        title: title,
        data: [],
      };
      this.isOtherSettings = true;
    },

    OtherClose() {
      console.log(123);
      this.isOtherSettings = false;
    },
  },
};
</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>