carInsightSystem/src/views/Myself/index.vue

<!--
 * @Author: xw
 * @Date: 2021-10-09 16:57:27
 * @LastEditTime: 2021-10-23 17:25:22
 * @LastEditors: Please set LastEditors
 * @Description: 个人中心
 * @FilePath: /data-show/src/views/Myself/index.vue
-->
<template>
    <div class="d-container">
        <div class="ms-outter">
            <div class="ms-d1">
                <v-label-div title="个人中心">
                    <v-btn @click="handlerBack">返回</v-btn>
                </v-label-div>
                <div class="ms-d1-inner">
                    <div class="d1" style="margin-left: 36px">
                        <img class="m1" src="../../assets/images/Index/ic_zhm.png" />
                        <div class="dd1">
                            <div class="ss1">
                                <span>{{getUser.UserName}}</span>
                                <a-button type="primary" style="margin-left: 16px" @click="handlerPwd">
                                    修改密码
                                </a-button>
                            </div>
                            <span class="ss2">账户名</span>
                        </div>
                    </div>
                    <div class="d1" style="width: 350px">
                        <img class="m1" src="../../assets/images/Index/ic_sjh.png" />
                        <div class="dd1">
                            <div class="ss1"><span>13643446943</span></div>
                            <span class="ss2">关联手机号</span>
                        </div>
                    </div>
                    <div class="d1" style="margin-right: 36px; width: 470px">
                        <img class="m1" src="../../assets/images/Index/ic_sj.png" />
                        <div class="dd1">
                            <div class="ss1"><span>2021-08-28 12:00:00</span></div>
                            <span class="ss2">上次登录时间</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ms-d2">
                <v-label-div title="数据导出管理"></v-label-div>
                <div class="ms-d2-inner">
                    <v-table :columns="columns" :data="tbData" row-key="id">
                        <span slot="action">
                            <a>下载</a>
                        </span>
                    </v-table>
                </div>
            </div>
        </div>
        <!--对话框-->
        <v-modal :eleStyle="{ width: '800px', height: '520px' }" :visible.sync="modalObj.visible" :title="modalObj.title">
            <div slot="body">
                <div class="ms-step">
                    <a-steps :current="modalObj.current" labelPlacement="vertical">
                        <a-step title="验证身份" />
                        <a-step title="修改登入密码" />
                        <a-step title="修改成功" />
                    </a-steps>
                </div>
                <div class="ms-form">
                    <phoneForm ref="phoneForm" @nextStep="handlerNext" v-if="nextType === 1"></phoneForm>
                    <modifyForm v-if="nextType === 2" ref="modifyForm" :forgetForm="accout" @success="handlerSuc"></modifyForm>
                    <div class="stepEst" v-if="nextType === 3">
                      <span>222</span>
                        <span style="font-size: 20px;color:#fff">密码修改成功，请重新登录</span>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <div class="ms-footer" align="center">
                    <div class="f-btn" @click="next">{{nextStr}}</div>
                </div>
            </div>
        </v-modal>
    </div>
</template>

<script>
import phoneForm from "./phoneForm";
import modifyForm from "./modifyForm";
import {getMyFileInfoExcel} from "@/api/mySelf"
export default {
    name: "Myself",
    components: {
        phoneForm,
        modifyForm,
    },
    data() {
        return {
            modalObj: {
                visible: false,
                current: 0,
                title: "修改密码",
            },
            accout: {
                sPhone: "",
                iCode: "",
                token: ""
            },
            nextStr: "下一步",
            nextType: 1,
            form: {
              iPageIndex: 1,
              iPageSize: 20
            },
            columns: [
                {
                    title: "文件名称",
                    key: "name",
                    dataIndex: "name",
                },
                {
                    title: "生成状态",
                    dataIndex: "age",
                    key: "age",
                },
                {
                    title: "导出时间",
                    dataIndex: "address",
                    key: "address",
                },
                {
                    title: "操作",
                    key: "action",
                    width: 100,
                    scopedSlots: { customRender: "action" },
                },
            ],
            tbData: [
                
            ],
        };
    },
    created() {
      this.getTable()
    },
    methods: {
        handlerPwd() {
            this.modalObj.visible = true;
        },
        handlerBack() {
            this.$router.go(-1);
        },
        // 下一步的方法
        next() {
            if (this.nextType === 1) {
                this.$refs.phoneForm.onNext();
            } else if (this.nextType === 2) {
                this.$refs.modifyForm.onSuccess();
            } else {
              this.$router.push('/login')
            }
        },
        // 下一步
        handlerNext(form) {
            this.accout = Object.assign(this.accout, form);
            this.nextStr = "确认";
            this.nextType = 2;
            this.modalObj.current = 1;
        },
        // 修改密码成功
        handlerSuc() {
            this.nextStr = "重新登录";
            this.nextType = 3;
            this.modalObj.current = 2;
        },
        // 获取表格数据
        getTable() {
          this.form.token = this.getToken;
          getMyFileInfoExcel(this.form).then(res => {
            console.log(res)
          })
        }
    },
};
</script>

<style lang="less" scoped>
.ms-outter {
    padding: 0px 16px;
}
.ms-d1 {
    width: 100%;
    height: 222px;
    border: 2px solid #0f2a4d;
    .ms-d1-inner {
        width: 100%;
        height: calc(100% - 48px);
        display: flex;
        justify-content: space-between;
        .d1 {
            height: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .m1 {
                width: 80px;
                height: 80px;
            }
            .dd1 {
                margin-left: 20px;
                .ss1 {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    font-size: 36px;
                    color: #fff;
                }
                .ss2 {
                    font-size: 20px;
                    color: #acb0b4;
                }
            }
        }
    }
}
.ms-d2 {
    padding: 0px 16px;
    height: 730px;
    margin-top: 16px;
    border: 2px solid #0f2a4d;
    .ms-d2-inner {
        padding: 16px;
    }
}
.ms-form {
    position: relative;
    width: 400px;
    margin: 0 auto;
    margin-top: 30px;
}
.ms-step {
    padding: 40px;
}
.f-btn {
    width: 400px;
    height: 60px;
    background-image: url("../../assets/images/login/img_dlan_nor.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    color: #63aecc;
    line-height: 60px;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    cursor: pointer;
}
.stepEst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
/deep/ .ant-table-body {
    height: 600px;
}
</style>