From 84b5a1e629e614c21f7e1319529d6c8f32354c36 Mon Sep 17 00:00:00 2001
From: bellezhuo <65014152@qq.com>
Date: Wed, 24 Jun 2020 18:09:49 +0800
Subject: [PATCH] 1

---
 src/assets/css/base.css    |   2 +-
 src/assets/css/element.css |  21 ++
 src/assets/css/other.css   | 249 ++++++++-------
 src/assets/data/en.js      |  35 ++-
 src/assets/data/zh.js      |  31 ++
 src/router.js              |  18 +-
 src/store/modules/user.js  |   2 +-
 src/views/user/account.vue | 620 +++++++++++++++++++++++++++++++++++++
 src/views/user/index.vue   | 199 +-----------
 src/views/user/setting.vue |  71 +++++
 10 files changed, 918 insertions(+), 330 deletions(-)
 create mode 100644 src/views/user/account.vue
 create mode 100644 src/views/user/setting.vue

diff --git a/src/assets/css/base.css b/src/assets/css/base.css
index 7030ca1..eeee9da 100644
--- a/src/assets/css/base.css
+++ b/src/assets/css/base.css
@@ -738,7 +738,7 @@ table {
 	padding: 10px 25px;
 	color: #66718f;
 	border-bottom: 1px solid transparent !important;
-	text-transform: uppercase;
+	/* text-transform: uppercase; */
 	font-weight: normal;
 }
 
diff --git a/src/assets/css/element.css b/src/assets/css/element.css
index 16eadd8..0da3d33 100644
--- a/src/assets/css/element.css
+++ b/src/assets/css/element.css
@@ -19,4 +19,25 @@
 	border: none;
 	background: none;
 	padding: 0;
+}
+
+/* 上传图片 */
+.upload-photo li .upload-photo-box .add-photo-btn .el-icon-plus {
+	width: 100%;
+	line-height: 80px;
+	font-size: 30px;
+	color: #ccc;
+	text-align: center;
+}
+.upload-photo .el-upload-list--picture-card .el-upload-list__item, .upload-photo .el-upload--picture-card {
+	width: 100px;
+	height: 100px;
+	line-height: 104px;
+	margin: 0;
+}
+.upload-photo .el-upload-list__item-status-label {
+	line-height: 24px;
+}
+.upload-photo.hide .el-upload--picture-card{
+	display: none;
 }
\ No newline at end of file
diff --git a/src/assets/css/other.css b/src/assets/css/other.css
index d31ef3c..7311e6b 100644
--- a/src/assets/css/other.css
+++ b/src/assets/css/other.css
@@ -121,6 +121,9 @@
 .header-menu-dropdowns li a {
 	color: #66718f;
 }
+.header-menu-dropdowns li a.active {
+	color: #8488f5;
+}
 
 .user-desc-box {
 	background: #5f97ff;
@@ -3603,6 +3606,21 @@ otc-index-btn:hover {
 .progress {
 	height: 16px;
 }
+.progress-high .progress {
+	background: #80abfb;
+}
+.progress-mid {
+	border: #f9912b 1px solid;
+}
+.progress-mid .progress {
+	background: #f9912b;
+}
+.progress-low {
+	border: #fb4040 1px solid;
+}
+.progress-low .progress {
+	background: #fb4040;
+}
 
 .title_two_right {
 	float: left;
@@ -3658,6 +3676,11 @@ otc-index-btn:hover {
 	text-align: center;
 }
 
+.security-center h3 {
+	font-size: 14px;
+	color: #555;;
+}
+
 .security-center.hc-color1 span {
 	padding-left: 25px;
 	background: url(../images/wrong-icon.png) no-repeat left;
@@ -3831,6 +3854,8 @@ otc-index-btn:hover {
 .setting-div {
 	width: 100%;
 	height: 100%;
+	background: #fff;
+	border-top: 1px solid #f2f2f2;
 	padding: 0 30px;
 }
 
@@ -3859,7 +3884,7 @@ otc-index-btn:hover {
 
 .setting-div li span:first-child:after {
 	width: 1px;
-	background: #66718f;
+	background: #eee;
 	height: 30px;
 	content: '';
 	position: absolute;
@@ -5327,7 +5352,7 @@ otc-index-btn:hover {
 	padding-bottom: 20px;
 }
 
-.el-dialog__wrapper {
+.user-dialog.el-dialog__wrapper {
 	width: 100%;
 	height: 100%;
 	position: fixed;
@@ -5338,36 +5363,25 @@ otc-index-btn:hover {
 	overflow: auto;
 	z-index: 9999;
 	margin: 0;
-	background: rgba(28, 30, 45, .8);
-	display: none;
 }
 
-.el-dialog__div {
+.user-dialog .el-dialog {
 	width: 600px;
-	height: auto;
-	position: absolute;
-	left: 50%;
-	margin-left: -300px;
-	top: 30%;
-	border-radius: 2px;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-	box-sizing: border-box;
-	text-align: center;
 }
 
-.el-dialog__header {
+.user-dialog .el-dialog__header {
 	background: #fff;
 	padding: 15px 0;
 	text-align: center;
 }
 
-.el-dialog__title {
+.user-dialog .el-dialog__title {
 	line-height: 24px;
 	font-size: 18px;
 	color: #66718f;
 }
 
-.el-icon-close {
+.user-dialog .el-icon-close {
 	float: right;
 	color: #909399;
 	width: 20px;
@@ -5378,8 +5392,11 @@ otc-index-btn:hover {
 	background: url(../images/icon_close_gray.png) no-repeat center;
 	background-size: 12px auto;
 }
+.user-dialog .el-icon-close:before {
+	content: none;
+}
 
-.el-dialog__body {
+.user-dialog .el-dialog__body {
 	text-align: initial;
 	padding: 25px 25px 30px;
 	color: #606266;
@@ -5388,28 +5405,49 @@ otc-index-btn:hover {
 	border-top: 1px solid #f2f2f2;
 }
 
-.address-form-input {
+.user-dialog .el-button {
 	background: #5f97ff;
+	border-color: #5f97ff;
+	font-size: 16px;
+	cursor: pointer;
 	color: #fff;
-	border: 1px solid #5f97ff;
+	text-align: center;
+	width: 100%;
+	height: 50px;
+	margin: 20px 0;
+	border-radius: 4px;
+}
+
+.address-form-input {
+	background: #f6f6f6;
+	color: #fff;
+	border: 1px solid #f6f6f6;
 	height: 50px;
 	line-height: 50px;
 	border-radius: 3px;
 	position: relative;
 }
-
 .address-form-input input {
 	padding-left: 15px;
 	height: 100%;
 	width: 100%;
-	color: #fff;
+	color: #66718f;
+}
+.address-form-input .verify-input.el-input {
+	width: 450px;
+}
+.address-form-input .el-input__inner {
+	height: 50px;
+	background: none;
+	border: none;
 }
-
 .address-form-input input::-webkit-input-placeholder {
-	color: #e9e9e9;
+color: #aaa;
 }
-
-.address-form-input span {
+.address-form-input:hover {
+	border: 1px solid #92a5eb;
+}
+.address-form-input span.get-code {
 	height: 18px;
 	line-height: 18px;
 	position: absolute;
@@ -5417,23 +5455,11 @@ otc-index-btn:hover {
 	bottom: 15px;
 	border-left: 1px solid;
 	border-color: #e0e0e0;
-	color: #fff;
+	color: #999;
 	padding-left: 8px;
-}
-
-/* .el-button {
-	background: #5f97ff;
-	border-color: #5f97ff;
-	font-size: 16px;
 	cursor: pointer;
-	color: #fff;
-	text-align: center;
-	width: 100%;
-	height: 50px;
-	margin: 60px 0 20px 0;
-	border-radius: 4px;
 }
- */
+
 .title-tips {
 	color: #66817f;
 	line-height: 40px;
@@ -5607,100 +5633,18 @@ otc-index-btn:hover {
 
 
 .upload-photo {
-	width: 100%;
+	width: 104px;
 	background: #fff;
 	overflow: hidden;
+	margin: 0 20px 0 0;
+	float: left;
 }
 
 .upload-photo h3 {
-	font-size: 14px;
+	font-size: 12px;
 	color: #66817f;
-	text-align: left;
-}
-
-.upload-photo ul {
-	display: inline-block;
-	width: 100%;
-	margin: 5px 0;
-}
-
-.upload-photo li {
-	width: 80px;
-	height: 80px;
-	float: left;
-	margin-top: .5rem;
-	margin-right: 20px;
-}
-
-.upload-photo li .upload-photo-box {
-	width: 80px;
-	height: 80px;
-	border-radius: .3rem;
-	vertical-align: middle;
-	margin: 0 auto;
-	position: relative;
-}
-
-.upload-photo li .upload-photo-box .delete-photo {
-	width: .85rem;
-	height: .85rem;
-	border-radius: 50%;
-	/* background: url(../images/icon_close.svg) no-repeat center #fa9529; */
-	background-size: .5rem auto;
-	position: absolute;
-	z-index: 99;
-	top: -.2rem;
-	right: -.2rem;
-}
-
-.upload-photo li .upload-photo-box .loaded-photo-thumbnail {
-	width: 100%;
-	height: 100%;
-	background-size: cover;
-	border-radius: .3rem;
-	overflow: hidden;
-	position: absolute;
-	z-index: 9;
-	left: 0;
-	top: 0;
-}
-
-.upload-photo li .upload-photo-box .loaded-photo-thumbnail img {
-	width: 100%;
-	object-fit: cover;
-}
-
-.upload-photo li .upload-photo-box .add-photo-btn {
-	width: 100%;
-	height: 100%;
-	border: #ccc .05rem dashed;
-	border-radius: .3rem;
-	background: #eee;
-	position: absolute;
-	z-index: 9;
-	left: 0;
-	top: 0;
-}
-
-.upload-photo li .upload-photo-box .add-photo-btn input {
-	width: 100%;
-	height: 100%;
-	opacity: 0;
-	position: absolute;
-	left: 0;
-	z-index: 100;
-}
-
-.upload-photo li .upload-photo-box .add-photo-btn:after {
-	width: 100%;
-	height: 100%;
-	content: '';
-	/* background: url(../images/icon_plus.svg) no-repeat center; */
-	background-size: 1.2rem auto;
-	position: absolute;
-	left: 0;
-	top: 0;
-	z-index: 99;
+	text-align: center;
+	margin-top: 10px;
 }
 
 .form-group .form-label {
@@ -5829,3 +5773,52 @@ otc-index-btn:hover {
 	font-size: 14px;
 	color: #fff;
 }
+
+
+.way {
+	width: 100%;
+	padding: 0 30px;
+}
+.way ul {
+	overflow: hidden;
+	padding: 10px;
+}
+.way ul li {
+	width: 240px;
+	height: 110px;
+	float: left;
+	background: #fff;
+	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+	-o-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+	border-radius: 5px;
+	padding: 10px;
+	margin-right: 30px;
+}
+.way ul li:last-child {
+	background: #5f97ff;
+}
+.way ul li p {
+	font-size: 14px;
+	color: #66718f;
+	line-height: 30px;
+}
+.way ul li p img {
+	width: 14%;
+	margin-right: 10px;
+}
+.way ul li p span {
+	float: right;
+	color: #5f97ff;
+}
+.way ul li p span.w-sp {
+	color: #ccc;
+}
+.way ul li .add-li {
+	width: 100%;
+	height: 100%;
+	line-height: 90px;
+	text-align: center;
+	color: #fff;
+}
diff --git a/src/assets/data/en.js b/src/assets/data/en.js
index ed7e261..bf0f016 100644
--- a/src/assets/data/en.js
+++ b/src/assets/data/en.js
@@ -20,7 +20,7 @@ module.exports = {
 	'法币订单': '法币订单',
 	'我的': 'my',
 	'账户中心': '账户中心',
-	'个人设置': '个人设置',
+	'个人设置': 'Personal Setting',
 	'邀请好友': '邀请好友',
 	'商户信息': '商户信息',
 	'退出': 'Logout',
@@ -49,7 +49,7 @@ module.exports = {
 	'请输入您的登录密码': '请输入您的登录密码',
 	'忘记密码': '忘记密码',
 	'立即登录': '立即登录',
-	'提交中...': 'loadings...',
+	'提交中...': 'loading...',
 	'请输入登录账号！': '请输入登录账号！',
 	'请输入登录密码！': '请输入登录密码！',
 	'请输入图形验证码！': '请输入图形验证码！',
@@ -127,6 +127,9 @@ module.exports = {
 	'安全认证': '安全认证',
 	'强烈建议开启3项安全认证': '强烈建议开启3项安全认证',
 	'安全级别': '安全级别',
+	'低': 'Low',
+	'中': 'Middle',
+	'高': 'High',
 	'电子邮箱': '电子邮箱',
 	'已绑定': '已绑定',
 	'未绑定': '未绑定',
@@ -141,4 +144,32 @@ module.exports = {
 	'用于提币、找回密码、修改安全设置、管理API时用以收取验证短信': '用于提币、找回密码、修改安全设置、管理API时用以收取验证短信',
 	'根据政策法规要求，请用户务必实名认证，才能进行相关交易操作': '根据政策法规要求，请用户务必实名认证，才能进行相关交易操作',
 	'用于提币、找回密码、修改安全设置、管理API时用以输入谷歌验证码': '用于提币、找回密码、修改安全设置、管理API时用以输入谷歌验证码',
+	'设置邮箱': 'setting email',
+	'请输入邮箱': '请输入邮箱',
+	'动态验证': '动态验证',
+	'请输入邮箱验证码': '请输入邮箱验证码',
+	'邮箱绑定成功！': '邮箱绑定成功！',
+	'姓名': 'Name',
+	'请输入姓名': '请输入姓名',
+	'身份证号': 'Identity Id',
+	'请输入身份证号码': '请输入身份证号码',
+	'上传身份证': '上传身份证',
+	'身份证正面': '身份证正面',
+	'身份证背面': '身份证背面',
+	'手持身份证跟白纸写日期': '手持身份证跟白纸写日期',
+	'选择图片': 'choose photo',
+	'只能上传jpg/png/gif文件，且不超过500kb': '只能上传jpg/png/gif文件，且不超过500kb',
+	'请输入真实姓名！': '请输入真实姓名！',
+	'请输入身份证号码！': '请输入身份证号码！',
+	'请上传身份证正面照片！': '请上传身份证正面照片！',
+	'请上传手持身份证跟白纸写日期的照片！': '请上传手持身份证跟白纸写日期的照片！',
+	'身份认证提交成功！': '身份认证提交成功！',
+	'昵称': '昵称',
+	'请输入昵称': '请输入昵称',
+	'抵押金额': '抵押金额',
+	'请上传头像': '请上传头像',
+	'请输入昵称！': '请输入昵称！',
+	'请上传商家头像！': '请上传商家头像！',
+	'系统设置修改': '系统设置修改',
+	'计费方式': '计费方式',
 }
diff --git a/src/assets/data/zh.js b/src/assets/data/zh.js
index 98853ae..0b17cb6 100644
--- a/src/assets/data/zh.js
+++ b/src/assets/data/zh.js
@@ -127,6 +127,9 @@ module.exports = {
 	'安全认证': '安全认证',
 	'强烈建议开启3项安全认证': '强烈建议开启3项安全认证',
 	'安全级别': '安全级别',
+	'低': '低',
+	'中': '中',
+	'高': '高',
 	'电子邮箱': '电子邮箱',
 	'已绑定': '已绑定',
 	'未绑定': '未绑定',
@@ -141,4 +144,32 @@ module.exports = {
 	'用于提币、找回密码、修改安全设置、管理API时用以收取验证短信': '用于提币、找回密码、修改安全设置、管理API时用以收取验证短信',
 	'根据政策法规要求，请用户务必实名认证，才能进行相关交易操作': '根据政策法规要求，请用户务必实名认证，才能进行相关交易操作',
 	'用于提币、找回密码、修改安全设置、管理API时用以输入谷歌验证码': '用于提币、找回密码、修改安全设置、管理API时用以输入谷歌验证码',
+	'设置邮箱': '设置邮箱',
+	'请输入邮箱': '请输入邮箱',
+	'动态验证': '动态验证',
+	'请输入邮箱验证码': '请输入邮箱验证码',
+	'邮箱绑定成功！': '邮箱绑定成功！',
+	'姓名': '姓名',
+	'请输入姓名': '请输入姓名',
+	'身份证号': '身份证号',
+	'请输入身份证号码': '请输入身份证号码',
+	'上传身份证': '上传身份证',
+	'身份证正面': '身份证正面',
+	'身份证背面': '身份证背面',
+	'手持身份证跟白纸写日期': '手持身份证跟白纸写日期',
+	'选择图片': '选择图片',
+	'只能上传jpg/png/gif文件，且不超过500kb': '只能上传jpg/png/gif文件，且不超过500kb',
+	'请输入真实姓名！': '请输入真实姓名！',
+	'请输入身份证号码！': '请输入身份证号码！',
+	'请上传身份证正面照片！': '请上传身份证正面照片！',
+	'请上传手持身份证跟白纸写日期的照片！': '请上传手持身份证跟白纸写日期的照片！',
+	'身份认证提交成功！': '身份认证提交成功！',
+	'昵称': '昵称',
+	'请输入昵称': '请输入昵称',
+	'抵押金额': '抵押金额',
+	'请上传头像': '请上传头像',
+	'请输入昵称！': '请输入昵称！',
+	'请上传商家头像！': '请上传商家头像！',
+	'系统设置修改': '系统设置修改',
+	'计费方式': '计费方式',
 }
diff --git a/src/router.js b/src/router.js
index f235e6a..e1e3235 100644
--- a/src/router.js
+++ b/src/router.js
@@ -89,8 +89,24 @@ export default new Router({
 					meta: {
 						title: '我的',
 					},
+					redirect: 'user/account',
 					children: [
-						
+						{
+							path: 'account',
+							name: 'account',
+							component: () => import('./views/user/account'),
+							meta: {
+								title: '账户中心',
+							},
+						},
+						{
+							path: 'setting',
+							name: 'setting',
+							component: () => import('./views/user/setting'),
+							meta: {
+								title: '个人设置',
+							},
+						},
 					]
 				},
 			]
diff --git a/src/store/modules/user.js b/src/store/modules/user.js
index d0d43e8..f2dace6 100644
--- a/src/store/modules/user.js
+++ b/src/store/modules/user.js
@@ -44,7 +44,7 @@ export default {
 		// 更新 个人设置
 		setUserConfig(state, data) {
 			state.userConfig = data;
-			console.log(JSON.stringify(state.userConfig))
+			console.log('个人设置项：'+JSON.stringify(state.userConfig))
 		},
 		
 		clearData(state) {
diff --git a/src/views/user/account.vue b/src/views/user/account.vue
new file mode 100644
index 0000000..269d953
--- /dev/null
+++ b/src/views/user/account.vue
@@ -0,0 +1,620 @@
+<template>
+	<div class="wrap">
+		<div class="user-top-container">
+			<div class="container ">
+				<div class="user-top">
+					<div class="user-top-left">
+
+						<div class="user-head-img" onclick="showpop(upload)">
+							<div class="user-add">
+								<img src="../../assets/images/camera-icon.png">
+							</div>
+							<img src="../../assets/images/user-head-img.png">
+						</div>
+						<div class="user-head-text">
+							<h1>{{userInfoData.userName}}</h1>
+							<p>UID：{{userInfoData.uid}}</p>
+						</div>
+					</div>
+					<div class="user-top-right">
+						<div class="user-top-modify">
+							<div class="modify-centent">
+								{{$t('资金密码')}}：
+								<template v-if="userInfoData.initPayPwd">******</template>
+								<template v-else>{{$t('无')}}</template>
+								<span class="modify-btn">{{$t('设置')}}</span>
+							</div>
+
+							<div class="modify-centent">
+								{{$t('登录密码')}}：******
+								<span class="modify-btn">{{$t('修改')}}</span>
+							</div>
+
+						</div>
+						<p>{{$t('互联网账号存在被盗风险，建议您定期更改密码以保护账户安全。')}}</p>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div class="assets-main margin-t60">
+			<div class="container">
+				<div class="content-wrap">
+					<div class="hc-breadcrumb">
+						<div class="title_one">
+							<span>{{$t('安全认证')}}</span>
+							<i>({{$t('强烈建议开启3项安全认证')}})</i>
+						</div>
+
+						<div class="title_two">
+							<div class="title_two_left">{{$t('安全级别')}}：</div>
+
+							<div :class="['title_two_center', {'progress-high':safeLevel==1}, {'progress-mid':safeLevel>=0.5&&safeLevel<1}, {'progress-low':safeLevel<0.5}]">
+								<div class="progress" :style="{'width': safeWidth}"></div>
+							</div>
+							<div class="title_two_right">{{safeLevelText}}</div>
+						</div>
+					</div>
+
+					<div class="auth-list">
+						<ul>
+							<li>
+								<img src="../../assets/images/auth-list-icon01.png" />
+								<h4>{{$t('电子邮箱')}}</h4>
+
+								<template v-if="userInfoData.email">
+									<div class="security-center hc-color2">
+										<span>{{$t('已绑定')}}</span>
+									</div>
+								</template>
+								<template v-else>
+									<div class="security-center hc-color1">
+										<span>{{$t('未绑定')}}</span>
+									</div>
+									<div class="security-btn">
+										<button @click="bindEmail">{{$t('去绑定')}}</button>
+									</div>
+								</template>
+							</li>
+
+							<li>
+								<img src="../../assets/images/auth-list-icon02.png" />
+								<h4>{{$t('电话号码')}}</h4>
+
+								<template v-if="userInfoData.phone">
+									<div class="security-center hc-color2">
+										<span>{{$t('已绑定')}}</span>
+									</div>
+								</template>
+								<template v-else>
+									<div class="security-center hc-color1">
+										<span>{{$t('未绑定')}}</span>
+									</div>
+									<div class="security-btn">
+										<button>{{$t('去绑定')}}</button>
+									</div>
+								</template>
+							</li>
+
+							<li>
+								<img src="../../assets/images/auth-list-icon03.png" />
+								<h4>{{$t('承兑商申请')}}</h4>
+								<p></p>
+
+								<template v-if="merchantStatus == '未申请商家'">
+									<div class="security-center hc-color1">
+										<span>{{merchantStatus}}</span>
+									</div>
+									<div class="security-btn">
+										<button @click="gotoApplyMerchant">{{$t('去申请')}}</button>
+									</div>
+								</template>
+
+								<template v-else-if="merchantStatus == '审核不通过，请重新申请!'">
+									<div class="security-center hc-color1">
+										<span>{{merchantStatus}}</span>
+									</div>
+									<div class="security-btn">
+										<button @click="gotoApplyMerchant">{{$t('重新申请')}}</button>
+									</div>
+								</template>
+
+								<template v-else>
+									<div class="security-center">
+										<span>{{merchantStatus}}</span>
+									</div>
+								</template>
+							</li>
+
+							<li>
+								<img src="../../assets/images/auth-list-icon03.png" />
+								<h4>{{$t('实名认证')}}</h4>
+
+								<template v-if="userInfoData.extendData && userInfoData.extendData.idCard.authPass == '未申请'">
+									<div class="security-center hc-color1">
+										<span>{{userInfoData.extendData.idCard.authPass}}</span>
+									</div>
+									<div class="security-btn">
+										<button @click="showAuth = true">{{$t('去申请')}}</button>
+									</div>
+								</template>
+								<template v-else-if="userInfoData.extendData && userInfoData.extendData.idCard.authPass == '认证未通过'">
+									<div class="security-center hc-color1">
+										<span>{{userInfoData.extendData.idCard.authPass}}</span>
+									</div>
+									<div class="security-btn">
+										<button @click="showAuth = true">{{$t('重新申请')}}</button>
+									</div>
+								</template>
+								<template v-else-if="userInfoData.extendData && userInfoData.extendData.idCard.authPass == '审核中'">
+									<div class="security-center">
+										<h3>{{userInfoData.extendData.idCard.authPass}}</h3>
+									</div>
+								</template>
+								<template v-else>
+									<div class="security-center hc-color2">
+										<span>{{userInfoData.extendData.idCard.authPass}}</span>
+									</div>
+								</template>
+							</li>
+
+							<li>
+								<img src="../../assets/images/auth-list-icon04.png" />
+								<h4>{{$t('谷歌验证')}}</h4>
+
+								<template v-if="userInfoData.hasGoogleAuth">
+									<div class="security-center hc-color2">
+										<span>{{$t('已绑定')}}</span>
+									</div>
+								</template>
+								<template v-else>
+									<div class="security-center hc-color1">
+										<span>{{$t('未绑定')}}</span>
+									</div>
+									<div class="security-btn">
+										<button>{{$t('去绑定')}}</button>
+									</div>
+								</template>
+							</li>
+						</ul>
+					</div>
+
+					<div class="auth-list-p">
+						<p>{{$t('用于提币、找回密码、修改安全设置、管理API时使用，激活后不可修改')}}</p>
+						<p>{{$t('用于提币、找回密码、修改安全设置、管理API时用以收取验证短信')}}</p>
+						<p>{{$t('根据政策法规要求，请用户务必实名认证，才能进行相关交易操作')}}</p>
+						<p>{{$t('根据政策法规要求，请用户务必实名认证，才能进行相关交易操作')}}</p>
+						<p>{{$t('用于提币、找回密码、修改安全设置、管理API时用以输入谷歌验证码')}}</p>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- 设置邮箱的弹窗 -->
+		<el-dialog class="user-dialog" :title="$t('设置邮箱')" :visible.sync="showEmail" :before-close="closeEmail">
+			<div class="title-tips">{{$t('设置邮箱')}}</div>
+			<div class="address-form-input">
+				<el-input :placeholder="$t('请输入邮箱')" v-model="email" type="text" clearable autocomplete="off" @keyup.enter.native="setEmail">
+				</el-input>
+			</div>
+
+			<div class="title-tips">{{$t('动态验证')}}</div>
+			<div class="address-form-input">
+				<el-input class="verify-input" :placeholder="$t('请输入验证码')" v-model="verifyCode" type="text" clearable autocomplete="off" @keyup.enter.native="setEmail">
+				</el-input>
+
+				<span class="get-code" v-if="isCodeSend">{{iTime + $t('s后重新获取')}}</span>
+				<span class="get-code" @click="getCode" v-else>{{$t('获取验证码')}}</span>
+			</div>
+
+			<span slot="footer" class="dialog-footer">
+				<el-button type="primary" :loading="true" v-if="loading">{{$t('提交中...')}}</el-button>
+				<el-button type="primary" @click="setEmail" v-else>{{$t('确定')}}</el-button>
+			</span>
+		</el-dialog>
+
+		<!-- 实名认证的弹窗 -->
+		<el-dialog class="user-dialog" :title="$t('实名认证')" :visible.sync="showAuth" :before-close="closeAuth">
+			<div class="title-tips">{{$t('姓名')}}</div>
+			<div class="address-form-input">
+				<el-input :placeholder="$t('请输入姓名')" v-model="name" type="text" clearable autocomplete="off" @keyup.enter.native="applyAuth">
+				</el-input>
+			</div>
+
+			<div class="title-tips">{{$t('身份证号')}}</div>
+			<div class="address-form-input">
+				<el-input :placeholder="$t('请输入身份证号码')" v-model="identity" type="text" clearable autocomplete="off" @keyup.enter.native="applyAuth">
+				</el-input>
+			</div>
+			
+			<div class="title-tips">{{$t('上传身份证')}}</div>
+			<div class="upload-photo" :class="{'hide': identityPictures1}">
+				<el-upload
+					:action="this.common.baseURL+'/user/api/file/image'"
+					:headers="{'Authorization': 'Bearer '+this.common.getItem(common.tokenKey)}"
+					list-type="picture-card"
+					accept="image/jpeg,image/gif,image/png"
+					:file-list="fileList"
+					:on-success="uploadSuccess1"
+					:on-error="uploadError"
+					:on-remove="uploadDelete1"
+				>
+					<i class="el-icon-plus"></i>
+				</el-upload>
+				<h3>{{$t('身份证正面')}}</h3>
+			</div>
+			
+			<div class="upload-photo" :class="{'hide': identityPictures2}">
+				<el-upload
+					:action="this.common.baseURL+'/user/api/file/image'"
+					:headers="{'Authorization': 'Bearer '+this.common.getItem(common.tokenKey)}"
+					list-type="picture-card"
+					accept="image/jpeg,image/gif,image/png"
+					:file-list="fileList"
+					:on-success="uploadSuccess2"
+					:on-error="uploadError"
+					:on-remove="uploadDelete2"
+				>
+					<i class="el-icon-plus"></i>
+				</el-upload>
+				<h3>{{$t('身份证背面')}}</h3>
+			</div>
+			
+			<div class="upload-photo" :class="{'hide': identityPictures3}">
+				<el-upload
+					:action="this.common.baseURL+'/user/api/file/image'"
+					:headers="{'Authorization': 'Bearer '+this.common.getItem(common.tokenKey)}"
+					list-type="picture-card"
+					accept="image/jpeg,image/gif,image/png"
+					:file-list="fileList"
+					:on-success="uploadSuccess3"
+					:on-error="uploadError"
+					:on-remove="uploadDelete3"
+				>
+					<i class="el-icon-plus"></i>
+				</el-upload>
+				<h3>{{$t('手持身份证跟白纸写日期')}}</h3>
+			</div>
+
+			<span slot="footer" class="dialog-footer">
+				<el-button type="primary" :loading="true" v-if="loading">{{$t('提交中...')}}</el-button>
+				<el-button type="primary" @click="applyAuth" v-else>{{$t('确定')}}</el-button>
+			</span>
+		</el-dialog>
+		
+		<!-- 申请承兑商的弹窗 -->
+		<el-dialog class="user-dialog" :title="$t('承兑商申请')" :visible.sync="showMerchant" :before-close="closeMerchant">
+			<div class="title-tips">{{$t('昵称')}}</div>
+			<div class="address-form-input">
+				<el-input :placeholder="$t('请输入昵称')" v-model="shopName" type="text" clearable autocomplete="off" @keyup.enter.native="applyMerchant">
+				</el-input>
+			</div>
+		
+			<div class="title-tips">{{$t('抵押金额')}}({{applyCoin}})</div>
+			<div class="address-form-input">
+				<el-input v-model="applyMoney" readonly></el-input>
+			</div>
+			
+			<div class="title-tips">{{$t('请上传头像')}}</div>
+			<div class="upload-photo" :class="{'hide': shopPicture}">
+				<el-upload
+					:action="this.common.baseURL+'/user/api/file/image'"
+					:headers="{'Authorization': 'Bearer '+this.common.getItem(common.tokenKey)}"
+					list-type="picture-card"
+					accept="image/jpeg,image/gif,image/png"
+					:file-list="fileList"
+					:on-success="uploadSuccess4"
+					:on-error="uploadError"
+					:on-remove="uploadDelete4"
+				>
+					<i class="el-icon-plus"></i>
+				</el-upload>
+			</div>
+		
+			<span slot="footer" class="dialog-footer">
+				<el-button type="primary" :loading="true" v-if="loading">{{$t('提交中...')}}</el-button>
+				<el-button type="primary" @click="applyMerchant" v-else>{{$t('确定')}}</el-button>
+			</span>
+		</el-dialog>
+		
+		<router-view></router-view>
+	</div>
+</template>
+
+<script>
+	import {
+		mapState
+	} from 'vuex'
+	let Countdown;
+	export default {
+		name: 'account',
+		data() {
+			return {
+				showEmail: false, //设置邮箱
+				email: '', //邮箱地址
+				
+				showPhone: false, //设置手机
+				chooseCode: 86, //区号
+				phone: '', //手机
+				
+				bindType: 0, //0手机 1邮箱
+				iTime: 60, //验证码倒计时
+				isCodeSend: false,
+				verifyCode: '', //验证码
+				
+				showAuth: false, //申请身份认证
+				name: '', //真实姓名
+				identity: '', //身份证号码
+				identityPictures1: '', //身份证正面
+				identityPictures2: '', //身份证背面
+				identityPictures3: '', //手持身份证
+				fileList: [], //上传插件 上传图片列表
+				
+				showMerchant: false, //申请商家
+				shopName: '', //昵称
+				applyMoney: 0, //扣除的钱
+				applyCoin: '', //扣除的币种
+				shopPicture: '', //头像
+				
+				loading: false, //提交loading
+			}
+		},
+		computed: {
+			...mapState('user', ['isLogin', 'userInfoData', 'merchantStatus']),
+
+			bindTypeText() { //设置类型
+				let text = this.bindType == 0 ? this.$t('手机') : this.$t('邮箱');
+				return text;
+			},
+			safeLevel() { //安全等级
+				let val = 0;
+				let length = 0;
+				let statusList = [];
+				if(this.userInfoData && this.userInfoData.extendData) {
+					let email = this.userInfoData.email ? true : false;
+					let phone = this.userInfoData.phone ? true : false;
+					let auth = this.userInfoData.extendData.idCard.authPass == '认证成功' ? true : false;
+					let google = this.userInfoData.hasGoogleAuth;
+					let shop = this.merchantStatus == '您已经是商家了' ? true : false;
+					statusList = [email, phone, auth, google, shop];
+				}
+				statusList.forEach(item => {
+					if(item) {
+						length++;
+					}
+				})
+				val = parseFloat(length)/5;
+				return val;
+			},
+			safeLevelText() { //安全指示文字
+				let text;
+				if(this.safeLevel < 0.5) {
+					text = this.$t('低');
+				} else if(this.safeLevel >=0.5 && this.safeLevel <1) {
+					text = this.$t('中');
+				} else {
+					text = this.$t('高');
+				}
+				return text;
+			},
+			safeWidth() { //安全指示条长度
+				let length = 0;
+				length = this.safeLevel*100 + '%';
+				return length;
+			}
+		},
+		methods: {
+			getMerchantInfo() { //申请承兑商条件
+				this.getAxios('/api/market/enter/feeze/info')
+					.then(data => {
+						this.applyMoney = data.data.amount;
+						this.applyCoin = data.data.coinId;
+					})
+			},
+			
+			bindEmail() { //绑定邮箱
+				this.bindType = 1;
+				this.showEmail = true;
+			},
+			setEmail() { //设置邮箱
+				if (this.loading) {
+					return;
+				}
+				if (!this.email) {
+					this.$message.error(this.$t('请输入邮箱地址！'));
+					return;
+				}
+				if (!this.verifyCode) {
+					this.$message.error(this.$t('请输入验证码！'));
+					return;
+				}
+				this.loading = true;
+
+				let params = {
+					email: this.email,
+					verifyCode: this.verifyCode
+				}
+				this.putAxios('/user/api/user/info/email/bind', params)
+					.then(() => {
+						this.$message.success(this.$t('邮箱绑定成功！'));
+						this.closeEmail();
+						setTimeout(() => {
+							this.$store.dispatch('user/getUserData');
+						}, 600)
+					})
+			},
+			closeEmail() { //关闭邮箱
+				this.showEmail = false;
+				//清除数据
+				this.email = '';
+				this.verifyCode = '';
+				this.loading = false;
+			},
+
+			applyAuth() {
+				if (this.loading) {
+					return;
+				}
+				if (!this.name) {
+					this.$message.error(this.$t('请输入真实姓名！'));
+					return;
+				}
+				if (!this.identity) {
+					this.$message.error(this.$t('请输入身份证号码！'));
+					return;
+				}
+				if (!this.identityPictures1) {
+					this.$message.error(this.$t('请上传身份证正面照片！'));
+					return;
+				}
+				if (!this.identityPictures2) {
+					this.$message.error(this.$t('请上传身份证背面照片！'));
+					return;
+				}
+				if (!this.identityPictures3) {
+					this.$message.error(this.$t('请上传手持身份证跟白纸写日期的照片！'));
+					return;
+				}
+
+				this.loading = true;
+
+				let params = {
+					name: this.name,
+					identity: this.identity,
+					identityType: 0,
+					identityPictures: [
+						this.identityPictures1,
+						this.identityPictures2,
+						this.identityPictures3,
+					]
+				}
+				this.postAxios('/user/api/user/info/authentication', params)
+					.then(() => {
+						this.$message.success(this.$t('身份认证提交成功！'));
+						this.closeAuth();
+						setTimeout(() => {
+							this.$store.dispatch('user/getUserData');
+						}, 600)
+					})
+					.catch(() => {
+						this.loading = false;
+					})
+			},
+			closeAuth() { //关闭身份认证
+				this.showAuth = false;
+				//清除数据
+				this.name = '';
+				this.identity = '';
+				this.identityPictures1 = ''; //身份证正面
+				this.identityPictures2 = ''; //身份证背面
+				this.identityPictures3 = ''; //手持身份证
+				this.loading = false;
+				this.fileList = [];
+			},
+			
+			gotoApplyMerchant() {
+				this.getMerchantInfo();
+				this.showMerchant = true;
+			},
+			applyMerchant() { //申请承兑商
+				if (this.loading) {
+					return;
+				}
+				if (!this.shopName) {
+					this.$message.error(this.$t('请输入昵称！'));
+					return;
+				}
+				if (!this.shopPicture) {
+					this.$message.error(this.$t('请上传商家头像！'));
+					return;
+				}
+				this.loading = true;
+			},
+			closeMerchant() { //关闭承兑商
+				this.showMerchant = false;
+				//清除数据
+				this.shopName = '';
+				this.shopPicture = '';
+				this.loading = false;
+				this.fileList = [];
+			},
+			
+			//图片上传成功
+			uploadSuccess1(res) {
+				console.log(JSON.stringify(res))
+				this.identityPictures1 = res.data
+			},
+			uploadSuccess2(res) {
+				this.identityPictures2 = res.data
+			},
+			uploadSuccess3(res) {
+				this.identityPictures3 = res.data
+			},
+			uploadSuccess4(res) {
+				this.shopPicture = res.data
+			},
+			//删除图片
+			uploadDelete1() {
+				this.identityPictures1 = '';
+			},
+			uploadDelete2() {
+				this.identityPictures2 = '';
+			},
+			uploadDelete3() {
+				this.identityPictures3 = '';
+			},
+			uploadDelete4() {
+				this.shopPicture = '';
+			},
+			uploadError(err) { //上传失败
+				console.log(JSON.stringify(err))
+			},
+
+			getCode() { //获取验证码
+				if (this.isCodeSend) {
+					this.$message.error(this.$t('请勿频繁获取验证码！'))
+					return;
+				}
+				if (!this.phone && this.bindType == 0) {
+					this.$message.error(this.$t('请输入手机号！'));
+					return;
+				}
+				if (!this.email && this.bindType == 1) {
+					this.$message.error(this.$t('请输入邮箱地址！'));
+					return;
+				}
+				this.isCodeSend = true;
+
+				let params = {
+					identity: this.bindType == 0 ? `${this.chooseCode} ${this.phone}` : this.email,
+					imageVerifyCode: this.imgVerifyCode,
+					verifyType: this.bindType,
+				};
+				this.postAxios('/user/api/user/verify/send', params)
+					.then(() => {
+						this.$message.success(this.bindTypeText + this.$t('验证码发送成功！'));
+						this.countdownTimer();
+					})
+					.catch(() => {
+						this.isCodeSend = false;
+					});
+			},
+			countdownTimer() { //短信发送开始计时60s
+				if (this.iTime === 0) {
+					clearTimeout(Countdown);
+					this.isCodeSend = false;
+					this.iTime = 60;
+				} else {
+					Countdown = setTimeout(this.countdownTimer, 1000);
+					this.iTime = this.iTime - 1;
+				}
+			},
+		},
+		created() {
+
+		}
+	}
+</script>
+
+<style>
+</style>
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index 05f1b00..6b1adf7 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -1,212 +1,17 @@
 <template>
 	<div class="wrap">
-		<div class="user-top-container">
-			<div class="container ">
-				<div class="user-top">
-					<div class="user-top-left">
-
-						<div class="user-head-img" onclick="showpop(upload)">
-							<div class="user-add">
-								<img src="../../assets/images/camera-icon.png">
-							</div>
-							<img src="../../assets/images/user-head-img.png">
-						</div>
-						<div class="user-head-text">
-							<h1>{{userInfoData.userName}}</h1>
-							<p>UID：{{userInfoData.uid}}</p>
-						</div>
-					</div>
-					<div class="user-top-right">
-						<div class="user-top-modify">
-							<div class="modify-centent">
-								{{$t('资金密码')}}：
-								<template v-if="userInfoData.initPayPwd">******</template>
-								<template v-else>{{$t('无')}}</template>
-								<span class="modify-btn">{{$t('设置')}}</span>
-							</div>
-
-							<div class="modify-centent">
-								{{$t('登录密码')}}：******
-								<span class="modify-btn">{{$t('修改')}}</span>
-							</div>
-
-						</div>
-						<p>{{$t('互联网账号存在被盗风险，建议您定期更改密码以保护账户安全。')}}</p>
-					</div>
-				</div>
-			</div>
-		</div>
-		
-		<div class="assets-main margin-t60">
-			<div class="container">
-				<div class="content-wrap">
-					<div class="hc-breadcrumb">
-						<div class="title_one">
-							<span>{{$t('安全认证')}}</span>
-							<i>({{$t('强烈建议开启3项安全认证')}})</i>
-						</div>
-						
-						<div class="title_two">
-							<div class="title_two_left">{{$t('安全级别')}}：</div>
-							
-							<div class="title_two_center">
-								<div class="progress" style="width: 25%; background: rgb(95, 151, 255);"></div>
-							</div>
-							<div class="title_two_right">低</div>
-						</div>
-					</div>
-					
-					<div class="auth-list">
-						<ul>
-							<li>
-								<img src="../../assets/images/auth-list-icon01.png" />
-								<h4>{{$t('电子邮箱')}}</h4>
-								
-								<template v-if="userInfoData.email">
-									<div class="security-center hc-color2">
-										<span>{{$t('已绑定')}}</span>
-									</div>
-								</template>
-								<template v-else>
-									<div class="security-center hc-color1">
-										<span>{{$t('未绑定')}}</span>
-									</div>
-									<div class="security-btn">
-										<button>{{$t('去绑定')}}</button>
-									</div>	
-								</template>
-							</li>
-							
-							<li>
-								<img src="../../assets/images/auth-list-icon02.png" />
-								<h4>{{$t('电话号码')}}</h4>
-								
-								<template v-if="userInfoData.phone">
-									<div class="security-center hc-color2">
-										<span>{{$t('已绑定')}}</span>
-									</div>
-								</template>
-								<template v-else>
-									<div class="security-center hc-color1">
-										<span>{{$t('未绑定')}}</span>
-									</div>
-									<div class="security-btn">
-										<button>{{$t('去绑定')}}</button>
-									</div>	
-								</template>
-							</li>
-							
-							<li>
-								<img src="../../assets/images/auth-list-icon03.png" />
-								<h4>{{$t('承兑商申请')}}</h4>
-								<p></p>
-								
-								<template v-if="merchantStatus == '未申请商家'">
-									<div class="security-center hc-color1">
-										<span>{{merchantStatus}}</span>
-									</div>
-									<div class="security-btn">
-										<button>{{$t('去申请')}}</button>
-									</div>
-								</template>
-								
-								<template v-else-if="merchantStatus == '审核不通过，请重新申请!'">
-									<div class="security-center hc-color1">
-										<span>{{merchantStatus}}</span>
-									</div>
-									<div class="security-btn">
-										<button>{{$t('重新申请')}}</button>
-									</div>
-								</template>
-								
-								<template v-else>
-									<div class="security-center">
-										<span>{{merchantStatus}}</span>
-									</div>
-								</template>
-							</li>
-							
-							<li>
-								<img src="../../assets/images/auth-list-icon03.png" />
-								<h4>{{$t('实名认证')}}</h4>
-								
-								<template v-if="userInfoData.extendData && userInfoData.extendData.idCard.authPass == '未申请'">
-									<div class="security-center hc-color1">
-										<span>{{userInfoData.extendData.idCard.authPass}}</span>
-									</div>
-									<div class="security-btn">
-										<button>{{$t('去申请')}}</button>
-									</div>
-								</template>
-								<template v-else-if="userInfoData.extendData && userInfoData.extendData.idCard.authPass == '认证未通过'">
-									<div class="security-center hc-color1">
-										<span>{{userInfoData.extendData.idCard.authPass}}</span>
-									</div>
-									<div class="security-btn">
-										<button>{{$t('重新申请')}}</button>
-									</div>
-								</template>
-								<template v-else-if="userInfoData.extendData">
-									<div class="security-center">
-										<span>{{userInfoData.extendData.idCard.authPass}}</span>
-									</div>
-								</template>
-							</li>
-							
-							<li>
-								<img src="../../assets/images/auth-list-icon04.png" />
-								<h4>{{$t('谷歌验证')}}</h4>
-								
-								<template v-if="userInfoData.hasGoogleAuth">
-									<div class="security-center hc-color2">
-										<span>{{$t('已绑定')}}</span>
-									</div>
-								</template>
-								<template v-else>
-									<div class="security-center hc-color1">
-										<span>{{$t('未绑定')}}</span>
-									</div>
-									<div class="security-btn" onclick="window.location.href='../user/google.html'">
-										<button>{{$t('去绑定')}}</button>
-									</div>
-								</template>
-							</li>
-						</ul>
-					</div>
-					
-					<div class="auth-list-p">
-						<p>{{$t('用于提币、找回密码、修改安全设置、管理API时使用，激活后不可修改')}}</p>
-						<p>{{$t('用于提币、找回密码、修改安全设置、管理API时用以收取验证短信')}}</p>
-						<p>{{$t('根据政策法规要求，请用户务必实名认证，才能进行相关交易操作')}}</p>
-						<p>{{$t('根据政策法规要求，请用户务必实名认证，才能进行相关交易操作')}}</p>
-						<p>{{$t('用于提币、找回密码、修改安全设置、管理API时用以输入谷歌验证码')}}</p>
-					</div>
-				</div>
-			</div>
-		</div>
+		<router-view></router-view>
 	</div>
 </template>
 
 <script>
-	import {
-		mapState
-	} from 'vuex'
 	export default {
 		name: 'userIndex',
 		data() {
 			return {
-
+				
 			}
 		},
-		computed: {
-			...mapState('user', ['isLogin', 'userInfoData', 'merchantStatus']),
-		},
-		methods: {
-
-		},
-		created() {
-
-		}
 	}
 </script>
 
diff --git a/src/views/user/setting.vue b/src/views/user/setting.vue
new file mode 100644
index 0000000..11936a1
--- /dev/null
+++ b/src/views/user/setting.vue
@@ -0,0 +1,71 @@
+<template>
+	<div class="wrap">
+		<div class="assets-main">
+			<div class="container">
+				<!--当前位置-->
+				<div class="hc-breadcrumb">
+					<span>{{$t('个人设置')}}</span>
+				</div>
+
+				<div class="financialRecords-main ">
+					<div class="hc-breadcrumb margin0">
+						<div class="title_one">
+							<span>{{$t('系统设置修改')}}</span>
+						</div>
+					</div>
+				</div>
+
+				<div class="setting-div">
+					<ul>
+						<li>
+							<span>{{$t('计费方式')}}</span>
+							<span>"人民币（CNY）"</span>
+							<span>更改</span>
+						</li>
+						<li>
+							<span>涨跌色</span>
+							<span>"红涨绿跌"</span>
+							<span>更改</span>
+						</li>
+					</ul>
+				</div>
+
+				<div class="financialRecords-main padding-b40">
+					<div class="hc-breadcrumb margin0">
+						<div class="title_one">
+							<span>账户收款方式管理</span>
+						</div>
+					</div>
+					<div class="way">
+						<ul>
+							<li>
+								<p><img src="../../assets/images/trade/icon-alipay.png" />支付宝<span>已激活</span></p>
+								<p>张三</p>
+								<p>15626354824</p>
+							</li>
+							<li>
+								<p><img src="../../assets/images/trade/icon-wechat.png" />微信<span class="w-sp">未激活</span></p>
+								<p>张三</p>
+								<p>15626354824</p>
+							</li>
+							<li>
+								<p><img src="../../assets/images/trade/icon-bankpayicon.png" />银行卡<span>已激活</span></p>
+								<p>张三</p>
+								<p>15626354824</p>
+							</li>
+							<li>
+								<div class="add-li">+添加</div>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>