home和login冲突

hejianhao

2025-01-08 de16ca9e4528be96b5628edde6678b383248d32d

home和login冲突

 src/assets/delete.png

 src/component/userInfo.vue

@@ -1,54 +1,87 @@
<template>
    <el-dialog :visible.sync="dialogVisible" :show-close="false" width="80%">
    <el-dialog :visible.sync="dialogVisible" :show-close="false" width="80%" top="51px">
        <div class="content">

            <el-form label-position="left" :inline="true" label-width="105px" :model="formLabelAlign" :rules="rules">
            <el-form label-position="left" label-width="105px" :model="form" :rules="rules">
                <div class="title">个人信息</div>
                <div class="company">所属公司：成都喜望软件有限公司</div>
                <el-row :gutter="0" class="companyForm">
                    <el-col :span="7">
                        <el-form-item label="姓名">
                            <el-input v-model="formLabelAlign.name"></el-input>
                <el-row :gutter="90" class="companyForm">
                    <el-col :span="6.5">
                        <el-form-item label="姓名:">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7"><el-form-item label="手机号">
                            <el-input v-model="formLabelAlign.region"></el-input>
                    <el-col :span="6.5"><el-form-item label="手机号:" label-width="120px">
                            <el-input v-model="form.region"></el-input>
                        </el-form-item></el-col>
                    <el-col :span="7"><el-form-item label="邮箱">
                            <el-input v-model="formLabelAlign.type"></el-input>
                    <el-col :span="6.5"><el-form-item label="邮箱:">
                            <el-input v-model="form.type"></el-input>
                        </el-form-item></el-col>
                </el-row>
                <div class="company" style="margin-top: 6px;">其他邮箱
                    <div class="btn"><img src="@/assets/add.png" alt="">新增邮箱</div>
                </div>
                <el-row :gutter="0" class="companyForm">
                    <el-col :span="7">
                        <el-form-item label="邮箱">
                            <el-input v-model="formLabelAlign.email"></el-input>
                <el-row :gutter="90" class="companyForm">
                    <el-col :span="6.5">
                        <el-form-item label="邮箱:" prop="email">
                            <el-input v-model="form.email"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7"><el-form-item label="手机号">
                            <el-input v-model="formLabelAlign.region"></el-input>
                    <el-col :span="16"><el-form-item label="备注:" label-width="120px">
                            <div style="display: flex;align-items: center;"><el-input
                                    v-model="form.region"></el-input>
                                <img style="width: 19px;height: 21px;cursor: pointer;margin-left: 26px;"
                                    src="@/assets/delete.png" alt="">
                            </div>
                        </el-form-item></el-col>
                    <el-col :span="7"><el-form-item label="邮箱">
                            <el-input v-model="formLabelAlign.type"></el-input>

                </el-row>
                <div class="company" style="margin-top: 6px;">常用收件信息
                    <div class="btn"><img src="@/assets/add.png" alt="">新增收件人</div>
                </div>
                <el-row :gutter="90" class="companyForm">
                    <el-col :span="6.5">
                        <el-form-item label="收件人姓名:">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6.5"><el-form-item label="收件人手机号:" label-width="120px">
                            <el-input v-model="form.region"></el-input>
                        </el-form-item></el-col>
                    <el-col :span="6.5"><el-form-item label="收件人邮箱:">
                            <el-input v-model="form.type"></el-input>
                        </el-form-item></el-col>
                    <el-col :span="20" style="padding-right: 73px;"><el-form-item label="收件人地址:">
                            <el-input v-model="form.type"></el-input>
                        </el-form-item></el-col>
                    <el-col :span="20" style="padding-right: 73px;position: relative;"><el-form-item label="备注:">
                            <div style="display: flex;align-items: center;"><el-input type="textarea" :rows="3"
                                    v-model="form.region"></el-input>
                                <img style="width: 19px;height: 21px;cursor: pointer;position: absolute;right: -175px;"
                                    src="@/assets/delete.png" alt="">
                            </div>
                        </el-form-item></el-col>
                </el-row>
            </el-form>
            <div class="btns">
                <el-button @click="dialogVisible = false">关闭</el-button>
                <el-button type="primary">保存</el-button>
            </div>
        </div>
    </el-dialog>
</template>

<script>
export default {
    props: ['show'],
    data() {
        return {
            dialogVisible: true,
            formLabelAlign: {
            dialogVisible: this.show,
            form: {
                name: '',
                region: '',
                type: '',
                email:''
                email: ''
            },
            rules: {
                email: [
@@ -57,6 +90,18 @@
            }
        };
    },
    created() {
        console.log(this.$store.state.userInfo, '111');
    },
    watch: {
        show(val) {
            
            this.dialogVisible = val
        },
        dialogVisible(val) {
            this.$emit('update:show', val);
        }
    }
};
</script>

@@ -108,6 +153,25 @@
        border-bottom: 1px solid rgba(151, 151, 151, 0.12);
        padding-left: 38px;
    }

    .btns {
        display: flex;
        justify-content: center;
        margin-top: 32px;
        padding-bottom: 33px;

        .el-button {
            width: 190px;
            height: 50px;
            font-size: 20px;

        }

        .el-button--primary {
            background-color: #014099;
            border-color: #014099;
        }
    }
}

/deep/ .el-dialog {

 src/router/index.js

@@ -38,7 +38,7 @@
        meta: {
          title: "登录",
        },
        component: () => import("../view/login"),
        component: () => import("../view/Login.vue"),
      },
    ]
  }

 src/store/index.js

@@ -4,10 +4,15 @@

const store = new Vuex.Store({
  state: {
    userInfo: {} || JSON.parse(sessionStorage.getItem('userInfo'))
  },
  mutations: {
    SET_USERINFO(state, userInfo) {
      state.userInfo = userInfo
    }
  },
  actions: {

  }
})


 src/view/Home.vue

@@ -2,6 +2,94 @@
    <div>
        <Header />
        <UserInfo :show="true" />
        <div class="search-box">
            <div class="title-card">
                <div class="title-left">
                    订单列表
                </div>
                <div class="title-right">
                    <span class="order-agress">下单须知</span>
                    <div class="line"></div>
                    <span class="add-ord">添加订单</span>
                </div>
            </div>
            <div class="search-form">
                <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                    <div class="flex a-center justify-between flex-wrap">
                        <el-form-item label="订单编号：" prop="date" class="unset_m" style="margin-left: 15px">
                            <el-input style="width: 230px;" v-model="searchForm.input" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="集装箱号：" prop="date" class="unset_m">
                            <el-input style="width: 230px;" v-model="searchForm.input" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="提单号：" prop="date" class="unset_m">
                            <el-input style="width: 230px;" v-model="searchForm.input" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="收件人邮箱：" prop="date" class="unset_m">
                            <el-input style="width: 230px;" v-model="searchForm.input" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="订单状态：" prop="date" class="unset_m">
                            <el-select style="width: 230px;" :popper-append-to-body="false" v-model="searchForm.typeId"
                                placeholder="请选择">
                                <el-option v-for="item in options" placeholder="请输入" :key="item.id" :label="item.label"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="收件人地址：" prop="date" class="unset_m1"
                            style="margin-bottom: unset !important;">
                            <el-input style="width: 230px;" v-model="searchForm.input" placeholder="请输入"></el-input>
                        </el-form-item>
                        <el-form-item label="DO文件是否上传：" prop="date" class="unset_m1"
                            style="margin-bottom: unset !important;">
                            <el-select style="width: 230px;" :popper-append-to-body="false" v-model="searchForm.typeId"
                                placeholder="请选择">
                                <el-option v-for="item in option1" placeholder="请输入" :key="item.id" :label="item.label"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item style="width: 570px;">
                        </el-form-item>
                        <div class="flex a-center">
                            <el-button type="default" class="reset" @click="reset">重置</el-button>
                            <el-button type="primary" class="search">搜索</el-button>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
        <div class="table-box">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column prop="date" label="订单编号" align="center">
                </el-table-column>
                <el-table-column prop="name" label="集装箱号" align="center">
                </el-table-column>
                <el-table-column prop="address" label="提单号" align="center">
                </el-table-column>
                <el-table-column prop="address" label="收件人邮箱" align="center">
                </el-table-column>
                <el-table-column prop="address" label="收件人地址" align="center">
                </el-table-column>
                <el-table-column prop="address" label="预计到达时间" align="center">
                </el-table-column>
                <el-table-column prop="address" label="预计送柜日期" align="center">
                </el-table-column>
                <el-table-column prop="address" label="实际送货日期" align="center">
                </el-table-column>
                <el-table-column prop="address" label="DO文件是否上传" align="center">
                </el-table-column>
                <el-table-column prop="address" label="订单状态" align="center">
                </el-table-column>
                <el-table-column prop="address" label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleClick(scope.row)">查看</el-button>
                        <el-button type="text" @click="handleClick(scope.row)">编辑</el-button>
                        <el-button type="text" @click="handleClick(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

@@ -15,9 +103,182 @@
        Header
    },
    data() {
        return {};
        return {
            searchForm: {

            },
            options: [
                {
                    id: 1,
                    label: '待到港'
                },
                {
                    id: 2,
                    label: '已到港'
                },
                {
                    id: 3,
                    label: '可提柜'
                },
                {
                    id: 4,
                    label: '预约中'
                },
                {
                    id: 5,
                    label: '预约完成'
                },
                {
                    id: 6,
                    label: '送柜中'
                },
                {
                    id: 7,
                    label: '送柜完成'
                },
                {
                    id: 8,
                    label: '反空'
                },
                {
                    id: 9,
                    label: '订单完成'
                },
                {
                    id: 10,
                    label: '已取消'
                }
            ],
            option1: [
                {
                    id: 1,
                    label: '是'
                },
                {
                    id: 2,
                    label: '否'
                }
            ],
        };
    },
    methods: {
        reset() {
            this.searchForm = {}
        }
    }
};
</script>
<style>
html {
    background-color: rgba(237, 237, 243, 1);
}
</style>
<style scoped lang="less">
.search-box {
    background-color: #fff;

<style></style>
    border-radius: 6px;
    min-height: 263px;
    margin-top: 16px;
    margin-left: 35px;
    margin-right: 35px;
    width: calc(100% - 70px);

    .title-card {
        padding: 0 23px;
        display: flex;
        justify-content: space-between;
        height: 75px;
        line-height: 75px;
        font-family: SourceHanSansCN, SourceHanSansCN;
        font-weight: bold;
        font-size: 20px;
        color: #3B3F56;
        border-bottom: 1px solid rgba(151, 151, 151, .25);

        .title-right {
            display: flex;
            align-items: center;

            .order-agress {
                font-family: SourceHanSansCN, SourceHanSansCN;
                font-weight: bold;
                font-size: 20px;
                color: #014099;
                cursor: pointer;
            }

            .line {
                width: 2px;
                height: 20px;
                margin: 0 10px;
                background-color: rgba(1, 64, 153, .8);
            }

            .add-ord {
                font-family: SourceHanSansCN, SourceHanSansCN;
                font-weight: bold;
                font-size: 20px;
                color: #014099;
                cursor: pointer;
            }
        }
    }

    .search-form {
        padding: 23px 23px 32px 17px;

        .reset {
            width: 190px;
            height: 50px;
            background: #FFFFFF;
            border-radius: 4px;
            border: 2px solid #D2D2D2;
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 500;
            font-size: 20px;
            color: rgba(0, 0, 0, .81);
        }

        .search {
            width: 190px;
            height: 50px;
            background: #014099;
            border-radius: 4px;
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 500;
            font-size: 20px;
            color: #FFFFFF;
        }

        ::v-deep {
            .el-form-item__label {
                font-size: 16px;
                color: rgba(59, 63, 86, .8);
            }

            .el-input__inner {
                height: 50px;
                font-size: 16px;
            }

            .el-form-item {
                margin-left: unset;
                margin-right: unset;
                margin-bottom: 32px;
            }



        }
    }
}

.table-box {
    margin-top: 16px;
    margin-left: 35px;
    margin-right: 35px;
    width: calc(100% - 70px);
    border-radius: 6px;
}
</style>

 src/view/Login.vue

@@ -88,6 +88,7 @@
            }).then((result) => {
                localStorage.setItem('extra', result.data.extra);
                localStorage.setItem('userInfo', JSON.stringify(result.data));
                this.$store.commit('SET_USERINFO', result.data);
                this.$router.push({ path: '/home' });
            }).catch(() => {
                this.code = ''