zhengbingbing
/
ZXZB_CallCenterUI5.0


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="renderer" content="webkit|ie-comp|ie-stand" />
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<title>华谊科技呼叫中心管理系统</title>
		<script src="./Script/Common/huayi.load.js"></script>
		<script src="./Script/Common/huayi.config.js"></script>
		<link rel="shortcut icon" href="img/32.ico" />
		<link href="./css/wh.css" rel="stylesheet">
		<link rel="stylesheet" href="./css/personal.css" />
		<link href="./css/plugins/cropper/cropper.min.css" rel="stylesheet">
		<link href="./css/plugins/jasny/jasny-bootstrap.min.css" rel="stylesheet">
		<title></title>
	</head>
	<body>
		<div class="personal">
			<div class="ptop clearFix">
				<p class="ptl">个人中心</p>
				<p class="ptr" title="关闭">x</p>
			</div>
			<div class="perBox " style="height:500px;">
				<ul class="perTab clearFix">
					<li class="sel">个人资料</li>
					<li>修改头像</li>
				</ul>
				<div class="perTab_con">
					<div class="geRen" style="display: block;">
						<div class="grt clearFix">
							<p class="grtl">基本资料</p>
							<p class="grtr">
								<i class="grqx" title="取消编辑"></i>
								<i class="grbj" title="编辑资料"></i>
							</p>

						</div>
						<table class="table grzl">
							<tr>
								<th>我的工号：</th>
								<td><input type="text" class="mgh" readonly="readonly" /></td>
							</tr>
							<tr>
								<th>我的姓名：</th>
								<td><input type="text" class="mn" readonly="readonly" /></td>
							</tr>
							<tr>
								<th>分机号：</th>
								<td><input type="text" class="fenji" readonly="readonly" /></td>
							</tr>
							<!--<tr>
                                <th>外线号码：</th>
                                <td><input type="text" class="wxno" readonly="readonly" /></td>
                            </tr>-->

							<tr>
								<th>原密码：</th>
								<td><input type="password" class="spwd zhidu" /></td>
							</tr>
							<tr>
								<th>新密码：</th>
								<td><input type="password" class="npwd zhidu" /></td>
							</tr>
							<tr>
								<th>确认密码：</th>
								<td><input type="password" class="epwd zhidu" /><span class="wrong">*密码不一致</span></td>
							</tr>
							<tr>
								<th>手机号：</th>
								<td><input type="text" class="mobile zhidu" /></td>
							</tr>
							<tr>
								<th></th>
								<td><button class="btnn grbtn">保存修改</button></td>
							</tr>
						</table>
					</div>
					<div class="crop ">
						<div class="clearFix" style="margin-top: 45px;">
							<div class="crop_left">
								<div class="image-crop">
									<img src="./img/gaga.jpg">
								</div>
							</div>
							<div class="crop_right">
								<h4>图片预览：</h4>
								<div class="img-preview img-preview-sm"></div>
							</div>
						</div>

						<!--<div class="btn-group">
                            <label title="上传图片" for="inputImage" class="btn btn-primary">
                                    <input type="file" accept="image/*" name="file" id="inputImage" class="hide"> 本地上传
                                </label>-->
						<!--<label title="下载图片" id="download" class="btn btn-primary">下载</label>-->
						<!--</div>
                    <div class="btn-group">-->
						<!--<button class="btn btn-white" id="zoomIn" type="button">放大</button>-->
						<!--<button class="btn btn-white" id="zoomOut" type="button">缩小</button>-->
						<!--<button class="btn btn-white" id="rotateLeft" type="button">左旋转</button>-->
						<!--<button class="btn btn-white" id="rotateRight" type="button">右旋转</button>-->
						<!--<button class="btn btn-warning " id="setDrag" type="button">裁剪</button>
                    </div>-->
						<div class="anniu" style="margin-top: 75px;text-align: center;">
							<label title="上传图片" for="inputImage" class="btnn" style="margin-right: 100px;">
                            <input type="file" accept="image/jpeg,image/jpg,image/png" name="file" id="inputImage" class="hide"> 本地上传
                        </label>
							<!--<button class="btn btn-warning " id="setDrag" type="button">裁剪</button>-->
							<button class="btnn" id="zoomIn" type="button">放大</button>
							<button class="btnn" id="zoomOut" type="button">缩小</button>
							<button class="btnn" id="rotateLeft" type="button">左旋转</button>
							<button class="btnn" id="rotateRight" type="button">右旋转</button>
							<button class="btnn" id="setDrag" type="button">确定保存</button>

						</div>
					</div>
				</div>
			</div>

		</div>
		<script src="./js/plugins/pace/pace.min.js"></script>
		<script src="./js/plugins/iCheck/icheck.min.js"></script>
		<script src="./css/laydate/laydate.js"></script>
		<script src="./js/main.js?v=1.5"></script>
		<script src="./js/zTree/jquery.ztree.core.js"></script>
		<script src="./js/plugins/datapicker/bootstrap-datepicker.js"></script>
		<script src="./js/plugins/cropper/cropper.min.js"></script>
		<script src="./js/guid.js"></script>
		<script>
			$('.shezhi').click(function() {
				$('.personal').show();
				$.ajax({
					type: "get",
					url: huayi.config.callcenter_url + "UserAccount/GetNowUser",
					async: true,
					dataType: 'json',
					data: {
						token: $.cookie("token")
					},
					success: function(result) {

						if(result.state.toLowerCase() == "success") {
							var con = result.data.user;
							console.log(con)
							$('.mgh').val(con.F_UserId);
							$('.mn').val(con.F_UserName);
							$('.mobile').val(con.F_Mobile);
							$('.fenji').val($.cookie("extno"));
							//$('.wxno').val(con.F_WXNo);
							//		          		$('.spwd').val(con.F_Password);
						}
					}
				});

			})
			//tab切换
			$('.perTab li').click(function() {
				$(this).addClass('sel').siblings().removeClass('sel');
				var index = $(this).index();
				$('.perTab_con').children('div').eq(index).show().siblings().hide();
			})
			//编辑个人资料
			$('.grzl tbody>tr>td input.zhidu').attr('readonly', true);
			$('.grbj').click(function() {
				$('.grzl tbody>tr>td input.zhidu').attr('readonly', false);
				$('.grzl tbody>tr>td input.zhidu').css('border-bottom', "1px solid #b3b3b3");
			})
			//取消编辑
			$('.grqx').click(function() {
				$('.grzl tbody>tr>td input.zhidu').attr('readonly', true);
				$('.grzl tbody>tr>td input.zhidu').css('border-bottom', "none");
			})
			//关闭按钮
			$('.ptr').click(function() {
				$('.personal').hide();

			})
			//修改密码
			$('.grbtn').click(function() {
				var gh = $('.mgh').val();
				var xm = $('.mn').val();
				var ymm = $('.spwd').val();
				var xmm = $('.npwd').val();
				var qmm = $('.epwd').val();
				if(xmm !== qmm) {
					$('.wrong').show();
					$('.npwd').val('')
					$('.epwd').val('')
				} else if(xmm == '') {
					layer.msg("密码不允许为空！");
				} else {
					$('.wrong').hide();
					$('.grzl tbody>tr>td input').attr('readonly', true);
					$('.grzl tbody>tr>td input').css('border-bottom', "none");
					$.ajax({
						type: "post",
						url: huayi.config.callcenter_url + "UserAccount/UpdatePwd",
						async: true,
						dataType: 'json',
						data: {
							token: $.cookie("token"),
							usercode: gh,
							pwd: xmm,
							oldpwd: ymm,
							mobile: $('.mobile').val()
						},
						success: function(result) {
							//                		result = $.parseJSON(result);
							if(result.state.toLowerCase() == "success") {
								layer.msg("修改成功！");
								$(".personal").hide();
								 $('.spwd').val('');
								 $('.npwd').val('');
								 $('.epwd').val('')
							}
						}
					});
				}
			})

			//图片裁剪
			var o = $(".image-crop > img");
			$(o).cropper({
				aspectRatio: 1 / 1,
				resizable: false,
				dragCrop: false,
				preview: ".img-preview",
				done: function() {}
			});
			var r = $("#inputImage");
			if(window.FileReader) {
				r.change(function() {
					var e, i = new FileReader,
						t = this.files;
					if(t.length && (e = t[0], /^image\/\w+$/.test(e.type))) {
						i.readAsDataURL(e);
						i.onload = function() {
							r.val("");
							o.cropper("reset", !0).cropper("replace", this.result);
						}

					} else {
						alert("请选择图片文件");
					}
				});
				$("#setDrag").click(function() {
					o.cropper("setDragMode", "crop");
					var img = o.cropper("getDataURL");
					$.post(huayi.config.callcenter_url + "Index/UploadTX64", {
						dataurl: encodeURIComponent(img),
						"token": $.cookie("token")
					}, function(result) {
						result = $.parseJSON(result);
						if(result.state.toLowerCase() == "success") {
							$(".yhtx").attr("src", huayi.config.callcenter_url.substr(0, huayi.config.callcenter_url.length - 1) + result.data);
							layer.msg("上传成功");
							$('.personal').hide();
						}
					})
				});
				$("#zoomIn").click(function() {
					o.cropper("zoom", .1)
				});
				$("#zoomOut").click(function() {
					o.cropper("zoom", -.1)
				});
				$("#rotateLeft").click(function() {
					o.cropper("rotate", 45)
				});
				$("#rotateRight").click(function() {
					o.cropper("rotate", -45)
				});
			} else {
				r.addClass("hide");
			}
		</script>
	</body>
</html>