bocai_supplyChain_pc/src/components/userinfo/accountsetting/inedex.vue

<template>
	<div class="accountsetting-container">
		<a-modal v-model="visible" title="设置图标" @cancel="modalcancel" on-ok="handleOk">
			<div class="container">
				<div class="cropper-content">
					<div class="cropper-box">
						<div class="cropper">
							<vue-cropper ref="cropper" :img="option.img" :outputSize="option.outputSize" :outputType="option.outputType" :info="option.info" :canScale="option.canScale" :autoCrop="option.autoCrop" :autoCropWidth="option.autoCropWidth" :autoCropHeight="option.autoCropHeight" :fixed="option.fixed" :fixedNumber="option.fixedNumber" :canMoveBox="option.canMoveBox" :height="option.height" :infoTrue="option.infoTrue" :maxImgSize="option.maxImgSize" :enlarge="option.enlarge" :mode="option.mode" @realTime="realTime"> </vue-cropper>
						</div>
					</div>
					<div class="previewcontainer">
						<!-- 图标预览框 -->
						<p>预览</p>
						<div :style="previewStyle3" class="show-preview">
							<div :style="previews.div" class="preview">
								<img :src="previews.url" :style="previews.img" />
							</div>
						</div>
						<div class="btncontainer">
							<!-- <a-button @click="restaricon">重置</a-button> -->
							<a-button @click="changeavatar">确定</a-button>
							<a-button @click="modalcancel">取消</a-button>
						</div>
					</div>
				</div>
			</div>
			<template slot="footer">
				{{ &nbsp; }}
			</template>
		</a-modal>
		<div class="accountcontent w">
			<div class="accountSetList">
				<div class="userinfobox">
					<div class="avatarbox">
						<i @click="uploadavatar" style="cursor: pointer">
							<span class="iconfont icon-morentouxiang" v-if="!userbaseInfo.imgSrc"></span>
							<img :src="userbaseInfo.imgSrc" alt="" v-else />
							<div class="mask"><div>修改头像</div></div></i
						>
						<input type="file" ref="updateicon" @change="filepick($event)" style="display: none" />
					</div>
					<div class="username" v-if="userinfo.userName">Hi,{{ userinfo.userName }}</div>
					<div class="username" v-else>Hi,{{ userinfo.hidetel }}</div>
				</div>
				<div class="priceinfo">
					<ul style="display: none">
						<li @click="pushto('/accountsetting/myintegral')" :class="{ tagactive: activelist === 6 }">
							<span><i class="iconfont icon-jifen"></i>我的积分</span
							><span
								><span>{{ userpoint >= 0 ? userpoint : "--" }}分</span><i class="iconfont icon-youjiantou"></i
							></span>
						</li>
						<li @click="pushto('/accountsetting/mycard')" :class="{ tagactive: activelist === 7 }">
							<span><i class="iconfont icon-kaquan"></i>我的卡券</span
							><span
								><span>{{ cardinfo.recordCount ? cardinfo.recordCount : "0" }}张</span><i class="iconfont icon-youjiantou"></i
							></span>
						</li>
						<li @click="pushto('/accountsetting/mybalance')" :class="{ tagactive: activelist === 8 }">
							<span><i class="iconfont icon-yue"></i>我的余额</span
							><span
								><span>{{ userbalance >= 0 ? userbalance : "0" }}元</span> <i class="iconfont icon-youjiantou"></i
							></span>
						</li>
					</ul>
				</div>
				<ul>
					<li @click="pushto('/accountsetting/boundtel')" :class="{ tagactive: activelist === 1 }">
						<span><i class="iconfont icon-gerenzhongxin-bangdingshouji"></i>绑定手机</span
						><span
							><span>{{ userinfo.hidetel }}</span>
							<i class="iconfont icon-youjiantou"></i>
						</span>
					</li>
					<li @click="pushto('/accountsetting/boundwx')" :class="{ tagactive: activelist === 2 }">
						<span><i class="iconfont icon-weixin1"></i>绑定微信</span
						><span
							><span v-if="userinfo.openIdAppDTDL">已绑定</span>
							<i class="iconfont icon-youjiantou"></i>
						</span>
					</li>
					<!-- <li
            @click="pushto('/accountsetting/boundbankcard')"
            :class="{ tagactive: activelist === 3 }"
            style="display: none"
          >
            <span
              ><i class="iconfont icon-bangdingyinhangka"></i>绑定银行卡</span
            ><span
              ><span>{{ userbanklist.length }}张</span>
              <i class="iconfont icon-youjiantou"></i>
            </span>
          </li> -->
				</ul>
				<ul>
					<li @click="pushto('/accountsetting/loginpsw')" :class="{ tagactive: activelist === 0 }">
						<span><i class="iconfont icon-gerenzhongxin-mima"></i>登录密码</span
						><span
							><span>已设置</span>
							<i class="iconfont icon-youjiantou"></i>
						</span>
					</li>
					<!-- <li
            @click="pushto('/accountsetting/realname')"
            :class="{ tagactive: activelist === 4 }"
            style="display: none"
          >
            <span><i class="iconfont icon-shimingrenzheng"></i>实名认证</span
            ><span
              ><span v-if="userinfo.realName">已认证</span
              ><span v-else>未认证</span>
              <i class="iconfont icon-youjiantou"></i>
            </span>
          </li> -->
				</ul>
			</div>
			<div class="rightcontent">
				<router-view :userinfo="userinfo" :userbanklist="userbanklist" :userpoint="userpoint" :userbalance="userbalance"></router-view>
			</div>
		</div>
	</div>
</template>

<script>
import {
	userBaseInfoApi,
	getUserBankListApi,
	userBalanceApi,
	getPointApi,
	// uploadUserAvatarApi,
	userCardApi,
} from "../../../api/userinfo";
import { VueCropper } from "vue-cropper";
import request from "@/utils/request";

export default {
	inject: ["reload"],
	// 组件名称
	name: "",
	// 局部注册的组件
	components: {
		VueCropper,
	},

	// 组件参数 接收来自父组件的数据
	props: {},
	// 组件状态值
	data() {
		return {
			userinfo: {}, // 用户基础信息
			userbalance: "",
			userpoint: "",
			activelist: "",
			userbanklist: [],
			cardinfo: {},
			visible: false,
			previewStyle3: {},
			previews: {},
			userbaseInfo: JSON.parse(localStorage.getItem("LOGIN_DATA")),
			option: {
				// 裁剪图片配置
				img: "", // 裁剪图片的地址
				outputSize: 1, // 裁剪生成图片的质量(可选0.1 - 1)
				outputType: "png", // 裁剪生成图片的格式（jpeg || png || webp）
				info: true, // 图片大小信息
				canScale: true, // 图片是否允许滚轮缩放
				autoCrop: true, // 是否默认生成截图框
				autoCropWidth: 150, // 默认生成截图框宽度
				autoCropHeight: 150, // 默认生成截图框高度
				fixed: true, // 是否开启截图框宽高固定比例
				fixedNumber: [1, 1], // 截图框的宽高比例
				// full: false, // false按原比例裁切图片，不失真
				// fixedBox: false, // 固定截图框大小，不允许改变
				// canMove: false, // 上传图片是否可以移动
				canMoveBox: true, // 截图框能否拖动
				// original: false, // 上传图片按照原始比例渲染
				// centerBox: false, // 截图框是否被限制在图片里面
				height: true, // 是否按照设备的dpr 输出等比例图片
				infoTrue: true, // true为展示真实输出图片宽高，false展示看到的截图框宽高
				maxImgSize: 290, // 限制图片最大宽度和高度
				enlarge: 1, // 图片根据截图框输出比例倍数
				mode: "auto", // 图片默认渲染方式
			},
		};
	},
	// 计算属性
	computed: {
		path() {
			return this.$route.fullPath;
		},
	},
	// 侦听器
	watch: {
		path() {
			this.changeactive();
		},
	},
	// 生命周期钩子   注：没用到的钩子请自行删除
	/**
	 * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
	 */
	created() {
		this.getUserInfo();
		this.changeactive();
		this.getuserbnak();
		this.getUserBalanceInfo();
		this.getPoint();
		this.getcardcount();
		console.log(this.userbaseInfo);
	},
	/**
	 * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
	 * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
	 */
	mounted() {},
	// 组件方法
	methods: {
		async getUserInfo() {
			try {
				const { data } = await userBaseInfoApi();
				if (data.status === 200) {
					this.userinfo = data.data;
					console.log(this.userinfo);
					const beforetel = this.userinfo.tel.substr(0, 3);
					const aftertel = this.userinfo.tel.substr(7, 4);
					this.userinfo.hidetel = beforetel + "****" + aftertel;
					const beforeId = this.userinfo.IDCard.substr(0, 1);
					const afterId = this.userinfo.IDCard.substr(17, 1);
					this.userinfo.hideId = beforeId + "****************" + afterId;
					const hidename = this.userinfo.realName.substr(this.userinfo.realName.length - 1, 1);
					// this.userinfo.hidename =  hidename;
					let newstr = "";
					for (let i = 0; i < this.userinfo.realName.length - 1; i++) {
						newstr += "*";
					}
					this.userinfo.hidename = newstr + hidename;
					console.log(aftertel);
					console.log(beforetel);
				}
				console.log(data);
			} catch (error) {
				console.log(error);
			}
		},
		pushto(url) {
			this.$router.push(url);
		},
		changeactive() {
			if (this.path.indexOf("/loginpsw") > -1) {
				this.activelist = 0;
			} else if (this.path.indexOf("/boundtel") > -1) {
				this.activelist = 1;
			} else if (this.path.indexOf("/boundwx") > -1) {
				this.activelist = 2;
			} else if (this.path.indexOf("/boundbankcard") > -1) {
				this.activelist = 3;
			} else if (this.path.indexOf("/realname") > -1) {
				this.activelist = 4;
			} else if (this.path.indexOf("/myintegral") > -1) {
				this.activelist = 6;
			} else if (this.path.indexOf("/mycard") > -1) {
				this.activelist = 7;
			} else if (this.path.indexOf("/mybalance") > -1) {
				this.activelist = 8;
			}
		},
		async getuserbnak() {
			try {
				const { data } = await getUserBankListApi();
				console.log(data);
				this.userbanklist = data.data;
				this.userbanklist.forEach((ele) => {
					ele.newbankNo = ele.bankNo.substr(14, 4);
				});
				// const newdata = this.userbanklist.bankNo.substr(14, 4);
				// console.log(newdata);
			} catch (error) {
				console.log(error);
			}
		},
		async getUserBalanceInfo() {
			try {
				const { data } = await userBalanceApi();
				this.userbalance = data.data.balance / 100;

				console.log(data);
				console.log(this.userbalance);
			} catch (error) {
				console.log(error);
			}
		},
		async getPoint() {
			try {
				const { data } = await getPointApi();
				console.log(data);
				this.userpoint = data.data.pointTotal;
			} catch (error) {
				console.log(error);
			}
		},
		async getcardcount() {
			try {
				const { data } = await userCardApi();
				console.log(data);
				this.cardinfo = data.data;
			} catch (error) {
				console.log(error);
			}
		},
		uploadavatar() {
			//上传头像
			this.$refs.updateicon.click();
		},
		filepick(e) {
			console.log(this.$refs.updateicon);
			console.log(e);
			const that = this;
			this.visible = true;
			const imgFile = new FileReader();
			imgFile.readAsDataURL(this.$refs.updateicon.files[0]);
			imgFile.onload = function () {
				that.option.img = this.result;
			};
			// this.option.img = window.URL.createObjectURL(
			//   this.$refs.updateicon.files[0]
			// )
			this.filelength = this.$refs.updateicon.files.length;
		},
		realTime(data) {
			// data.div.height = "50px";
			// data.div.width = "50px";
			// data.w = 50;
			// data.h = 50;
			console.log(data);

			var previews = data;
			var h = 0.5;
			var w = 0.2;
			this.previewStyle1 = {
				width: previews.w + "px",
				height: previews.h + "px",
				overflow: "hidden",
				margin: "0",
				zoom: h,
			};

			this.previewStyle2 = {
				width: previews.w + "px",
				height: previews.h + "px",
				overflow: "hidden",
				margin: "0",
				zoom: w,
			};

			// 固定为 100 宽度
			this.previewStyle3 = {
				width: previews.w + "px",
				height: previews.h + "px",
				overflow: "hidden",
				margin: "0",
				zoom: 100 / previews.w,
			};

			// 固定为 100 高度
			this.previewStyle4 = {
				width: previews.w + "px",
				height: previews.h + "px",
				overflow: "hidden",
				margin: "0",
				zoom: 100 / previews.h,
			};
			this.previews = data;
		},
		modalcancel() {
			this.visible = false;
			this.$refs.updateicon.value = "";
			this.filelength = this.$refs.updateicon.files.length;

			// console.log(this.filelength)
		},
		changeavatar() {
			let that = this;
			this.$refs.cropper.getCropBlob((data) => {
				// const that = this;
				// do something
				// console.log(data)
				const imgFile = new FileReader();
				imgFile.readAsDataURL(data);
				imgFile.onload = function () {
					let formData1 = new FormData();
					formData1.append("imgName", "abc.png");
					formData1.append("userImg", this.result);

					request({
						method: "post",
						url: "/yishoudan/user/changeUserImgsrc",
						data: formData1,
						withCredentials: true,
						// headers: {'Content-Type': 'application/x-www-form-urlencoded'}

						headers: {
							"Content-Type": "multipart/form-data;boundary = " + new Date().getTime(),
						},
					})
						.then(({ data }) => {
							console.log(data);
							console.log();
							if (data.status === 200) {
								let userinfo = JSON.parse(localStorage.getItem("LOGIN_DATA"));
								// userinfo.imgSrc =;
								localStorage.setItem("LOGIN_DATA", JSON.stringify({ ...userinfo, imgSrc: data.data.url }));
								that.reload();
							}
						})
						.catch((error) => {
							console.log(error);
						});
					console.log(data);
				};
				this.visible = false;
			});

			// console.log(this.avatarready)
			// console.log(this.filelength)
			this.AvatarWaringmsgshow = false;
		},
	},
};
</script>

<style scoped lang="less">
.accountcontent {
	// height: 1000px;
	margin-top: 16px;
	// background-color: pink;
	display: flex;
	.accountSetList {
		width: 346px;
		// height: 500px;
		// background-color: skyblue;
		margin-right: 16px;
		.userinfobox {
			width: 346px;
			height: 158px;
			background: #ffffff;
			border-radius: 0px;
			padding: 24px 0;
			text-align: center;
			border: 1px solid #ededed;
			.avatarbox {
				margin: 0 auto;
				width: 64px;
				position: relative;

				&:hover {
					.mask {
						display: block;
					}
				}
				img {
					display: block;
					width: 64px;
					height: 64px;
					border-radius: 50%;
				}
				i {
					width: 64px;
					height: 64px;
					color: #ff4400;
					> span {
						font-size: 64px;
						line-height: 64px;
					}
					.mask {
						position: absolute;
						display: none;
						width: 64px;
						height: 64px;
						left: 0;
						top: 0;
						border-radius: 50%;
						background-color: rgba(0, 0, 0, 0.7);

						div {
							position: relative;
							padding: 2px;
							width: 40px;
							margin-top: 11px !important;
							margin-left: 13px !important;
							font-size: 14px;
							line-height: 19px;
							font-weight: bold;
							letter-spacing: 2px;
							color: rgba(255, 255, 255, 0.8);
							top: 0;
							right: 0;
							left: 0;
							bottom: 0;
							margin: auto;
						}
					}
				}
			}
			.username {
				margin-top: 18px;
			}
		}
		.priceinfo {
			margin-top: 16px;
			ul {
				// margin-top: 16px;
				// padding: 0 16px;
				background-color: #fff;
				border-radius: 0px;
				overflow: hidden;
				li {
					position: relative;
					display: flex;
					padding: 16px 16px 16px 16px;

					line-height: 24px;
					justify-content: space-between;
					border-bottom: 1px solid #ededed;
					cursor: pointer;
					&:nth-child(-n + 2):after {
						position: absolute;
						content: "";
						display: inline-block;
						height: 1px;
						width: 314px;
						bottom: -1px;
						left: 16px;
						background-color: #f3f4f4;
					}
					span:first-of-type {
						font-size: 16px;
						i:first-of-type {
							margin-right: 12px;
							font-size: 20px;
							vertical-align: middle;
						}
					}
					span:last-of-type {
						span {
							color: #999999;
							font-size: 14px;
						}
						i {
							color: #888;
							font-size: 22px;
							vertical-align: middle;
						}
					}
					&:hover {
						// background-color: #ff4400 !important;
						color: #ff4400;
						span {
							span {
								color: #ff4400;
							}
							i {
								color: #ff4400;
							}
						}
						i {
							color: #ff4400;
						}
					}
				}
			}
		}
		> ul {
			background-color: #fff;
			margin-top: 16px;
			// padding: 0 16px;
			border-radius: 0px;
			overflow: hidden;
			border: 1px solid #ededed;
			li {
				position: relative;
				display: flex;
				padding: 16px;
				line-height: 24px;
				justify-content: space-between;
				cursor: pointer;
				&:not(:last-child) {
					// border-bottom: 1px solid #ededed;
				}
				&:nth-child(-n + 3):after {
					position: absolute;
					content: "";
					display: inline-block;
					height: 1px;
					width: 314px;
					bottom: -1px;
					left: 16px;
					background-color: #f3f4f4;
				}
				> span:first-child {
					font-size: 16px;
					display: flex;
					align-items: center;
					i {
						margin-right: 12px;
						font-size: 20px;
					}
				}
				> span:last-child {
					line-height: 22px;
					span {
						color: #999;
						font-size: 14px;
					}
					> i {
						color: #888;
						// margin-left: 12px;
						vertical-align: middle;

						font-size: 22px;
					}
				}
				&:hover {
					// background-color: #ff4400 !important;
					color: #ff4400;
					span {
						span {
							color: #ff4400;
						}
						i {
							color: #ff4400;
						}
					}
					i {
						color: #ff4400;
					}
				}
			}
		}
	}
	.rightcontent {
		width: 838px;
		height: 600px;
		padding: 0 16px;
		background-color: #fff;
		border: 1px solid #ededed;
	}
}

::v-deep .ant-modal-footer {
	display: none;
}
::v-deep .ant-modal-header {
	height: 48px;
	border-bottom: 0px solid #000;
}
::v-deep .ant-modal-title {
	font-size: 20px;
	font-weight: 400;
	text-align: left;
	color: #222222;
	line-height: 28px;
}
::v-deep .ant-modal-content {
	margin-top: 100px;
	width: 576px;
	height: 409px;
}

::v-deep .vue-cropper {
	width: 290px !important;
	margin: 0 !important;
}
.cropper-content {
	display: flex;
	display: -webkit-flex;
	justify-content: space-around;
	/deep/ .cropper-box {
		flex: 1;
		width: 100%;
		.cropper-view-box,
		.cropper-crop-box {
			border-radius: 50%;
		}
		.cropper-crop-box {
			.cropper-face {
				border-radius: 50%;
			}
			span:last-child {
				// display: none;
				span:nth-child(5) {
					display: none;
				}
				span:nth-child(7) {
					display: none;
				}
				span:nth-child(10) {
					display: none;
				}
				span:nth-child(12) {
					display: none;
				}
			}
		}
		.cropper {
			width: auto;
			height: 300px;
		}
	}
	.previewcontainer {
		text-align: center;
		margin-right: 50px !important;
		p {
			margin-bottom: 20px;
			margin-left: -150px;
		}
	}
	.show-preview {
		flex: 1;
		-webkit-flex: 1;
		display: flex;
		display: -webkit-flex;
		justify-content: center;
		border-radius: 50%;
		border: 1px solid #666;
		.preview {
			overflow: hidden;
			background: #cccccc;
		}
	}
}

.btncontainer {
	position: absolute;
	bottom: 25px;
	button {
		margin: 9px;
		height: 35px;
		width: 63px;
	}
	button:nth-child(1) {
		margin-left: -25px;
	}
}
</style>