From c13670bb28b8e0c2b68974aa446cd6e98691ef39 Mon Sep 17 00:00:00 2001
From: yuyu <1981343953@qq.com>
Date: 星期五, 04 八月 2023 13:42:37 +0800
Subject: [PATCH] 导航栏，报检管理
---
src/views/personal/myInformation/index.vue | 194 +++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 166 insertions(+), 28 deletions(-)
diff --git a/src/views/personal/myInformation/index.vue b/src/views/personal/myInformation/index.vue
index a55172f..3fc95ed 100644
--- a/src/views/personal/myInformation/index.vue
+++ b/src/views/personal/myInformation/index.vue
@@ -1,11 +1,44 @@
<template>
<div class="my-main content-main">
<div class="my-info">
- <div class="tips">
- <span />
- <div>鍩烘湰淇℃伅</div>
+ <div class="tips-main">
+ <div class="tips">
+ <span />
+ <div>鍩烘湰淇℃伅</div>
+ </div>
+ <div class="tips-btn">
+ <span><i class="el-icon-edit" />鎿嶄綔锛�</span>
+ <el-button type="text" @click="dialogFormVisible = true">缂栬緫</el-button>
+ <el-dialog title="缂栬緫" :visible.sync="dialogFormVisible">
+ <el-form ref="form" :model="form" :rules="rules">
+ <el-form-item label="璐﹀彿" :label-width="formLabelWidth" prop="account">
+ <el-input v-model="form.account" autocomplete="off" />
+ </el-form-item>
+ </el-form>
+ <div slot="footer" class="dialog-footer">
+ <el-button @click="dialogFormVisible = false">鍙� 娑�</el-button>
+ <el-button type="primary" @click="submitForm()">纭� 瀹�</el-button>
+ </div>
+ </el-dialog>
+ </div>
</div>
- <el-table
+ <div class="message">
+ <div class="message-item"><span><i class="el-icon-edit" />鐢ㄦ埛鍚嶏細</span>{{ infoTable.username }}</div>
+ <div class="message-item">
+ <span><i class="el-icon-edit" />濮撳悕锛�</span>
+ <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}" />{{ infoTable.name }}</el-tag>
+ </div>
+ <div class="message-item">
+ <span><i class="el-icon-edit" />鐢佃瘽鍙风爜锛�</span>
+ {{ infoTable.cellPhone }}</div>
+ <div class="message-item">
+ <span><i class="el-icon-edit" />閭锛�</span>
+ {{ infoTable.email }}</div>
+ <div class="message-item">
+ <span><i class="el-icon-edit" />绛惧悕锛�</span>
+ 2121212121212121</div>
+ </div>
+ <!-- <el-table
ref="infoTable"
:header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5'}"
:data="infoTable"
@@ -49,17 +82,23 @@
>
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">缂栬緫</el-button>
- <!-- <el-button type="text" size="small">缂栬緫</el-button> -->
+ <el-button type="text" size="small">缂栬緫</el-button>
</template>
</el-table-column>
- </el-table>
+ </el-table> -->
</div>
<div class="my-business">
- <div class="tips">
- <span />
- <div>浼佷笟淇℃伅</div>
+ <div class="tips-main">
+ <div class="tips">
+ <span />
+ <div>浼佷笟淇℃伅</div>
+ </div>
+ <div class="tips-btn">
+ <span><i class="el-icon-edit" />鎿嶄綔锛�</span>
+ <el-button type="text">閫�鍑�</el-button>
+ </div>
</div>
- <el-table
+ <!-- <el-table
ref="businessTable"
:header-cell-style="{border:'0px',background:'#f5f7fa',color:'#606266',boxShadow: 'inset 0 1px 0 #ebeef5'}"
:data="businessTable"
@@ -109,40 +148,60 @@
>
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">閫�鍑�</el-button>
- <!-- <el-button type="text" size="small">缂栬緫</el-button> -->
+ <el-button type="text" size="small">缂栬緫</el-button>
</template>
</el-table-column>
- </el-table>
+ </el-table> -->
+ <div class="message">
+ <div class="message-item"><span><i class="el-icon-edit" />浼佷笟绠�绉帮細</span>{{ businessTable.businessSmallName }}</div>
+ <div class="message-item">
+ <span><i class="el-icon-edit" />瀹屾暣鍚嶇О锛�</span>{{ businessTable.businessBigName }}
+ </div>
+ <div class="message-item">
+ <span><i class="el-icon-edit" />鑱旂郴浜猴細</span>
+ <el-tag type="primary"><i class="el-icon-info" :style="{marginRight:'4px', color:'#409EFF'}" />{{ businessTable.businessContact }}</el-tag></div>
+ <div class="message-item">
+ <span><i class="el-icon-edit" />鑱旂郴浜虹數璇濓細</span>
+ {{ businessTable.businessPhone }}</div>
+ <div class="message-item">
+ <span><i class="el-icon-edit" />鍔犲叆鐘舵�侊細</span>
+ 2121212121212121</div>
+ </div>
</div>
</div>
</template>
<script>
+import { getInfo } from '@/api/user'
+
+// axios.defaults.baseURL = process.env.VUE_APP_BASE_API
+
export default {
data() {
return {
- infoTable: [
+ infoTable:
{
username: 'jack',
name: '寮犱笁',
cellPhone: '138888888',
email: '138888888@qq.com',
signature: '鎴戞槸娉曞鐙傚緬'
- }
-
- ],
- businessTable: [
+ },
+ businessTable:
{
businessSmallName: '涓ぉ',
businessBigName: '涓ぉ绉戞妧',
businessContact: 'jack',
businessPhone: '1388888888',
businessStatus: 1
- }
- ]
+ },
+ dialogFormVisible: false,
+ form: [],
+ formLabelWidth: 120
}
},
created() {
+ this.getUserInfo()
},
methods: {
clearFilter() {
@@ -152,6 +211,24 @@
filterTag(value, row) {
console.log(value, row)
return row.businessStatus === value
+ },
+ submitForm() {
+ // Handle form submission here
+ // console.log(this.form);
+ // POST璇锋眰
+ this.dialogFormVisible = false
+ },
+ async getUserInfo() {
+ const res = await getInfo()
+ this.infoTable.name = res.data.uname
+ this.infoTable.username = res.data.account
+ this.infoTable.cellPhone = res.data.phone
+ this.infoTable.email = res.data.email
+ this.businessTable.businessSmallName = res.data.e_byname
+ this.businessTable.businessBigName = res.data.e_name
+ this.businessTable.businessContact = res.data.e_link_name
+ this.businessTable.businessPhone = res.data.e_phone
+ // console.log(res)
}
}
}
@@ -161,34 +238,95 @@
.my-main{
.my-info,.my-business{
background: #fff;
- padding: 20px 20px 10px 20px;
+ // padding: 10px 20px 10px 20px;
margin: 0;
margin-bottom: 12px;
- .tips{
+ border-radius: 6px;
+ overflow: hidden;
+ .tips-main{
+ // margin: ;
+ padding: 10px 20px 0 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 50px;
+ // height: ;
+ &:hover{
+ background: #85bff810;
+ .tips-btn{
+ display: block;
+ left: 0;
+ opacity:1;
+ }
+ }
+ .tips-btn{
+ height: 100%;
+ // display: none;
+ position: relative;
+ opacity:0;
+ left: 100px;
+ transition: all 0.3s ease-in-out;
+ }
+ .tips{
+ height: 100%;
display: flex;
height: 24px;
align-items: center;
font-size: 16px;
- margin-bottom: 12px;
- span{
+ // margin-bottom: 12px;
+ >span{
display: inline-block;
margin-right: 10px;
width: 4px;
height: 16px;
background: #0077DB;
}
- div{
+ >div{
height: 100%;
line-height: 26px;
}
+ .el-button{
+ padding: 0;
+ }
+ }
+ }
+ // 鍩烘湰淇℃伅鍜屼紒涓氫俊鎭殑姣忎竴涓俊鎭」鏍峰紡
+ .message{
+ padding: 0px 20px 10px 20px;
+
+ display: flex;
+ flex-wrap: wrap;
+ border-top: 1px solid #F2F6FC;
+ // border-top: 1px solid #F2F6FC;
+ >div{
+ flex: 30%;
+ max-width: 30%;
+ padding: 8px;
+ color: #606266;
+ align-items: center;
+ // height: 65px;
+ font-size: 12px;
+ height: 52px;
+ display: flex;
+ align-items: center;
+ >span{
+ color: #303133;
+ font-size: 16px;
+ //
+ >i{
+ margin-right: 8px;
+ }
+ }
+ }
+ // >div:nth-child(5){
+ // flex: 60%;
+ // max-width: 60%;
+ // }
}
}
- .my-info{
-
- }
.my-business{
-
+ margin-top: 28px;
}
}
</style>
--
Gitblit v1.9.3