修改个人信息

src/api/user.js

@@ -26,6 +26,10 @@ export function getUser(data) {
   return axios.get(`${baseApi}/selectUser`, data)
 }
 
+export function updatePassword(data) {
+  return axios.post(`${baseApi}/updatePassword`, [data])
+}
+
 export function addrrole(data) {
   return axios.post(`${baseApi}/teacherRegistration`, [data])
 }

src/common/apiConfig.js

@@ -57,16 +57,16 @@ export const API_CONFIG = {
     functionName: "selectPerInfoAllTea",
   },
   //查询个人信息
-  ajax_selectTestUser: {
-    functionName: "selectTestUser",
+  ajax_selectliyuanUserInfo: {
+    functionName: "selectliyuanUserInfo",
   },
   //获取教研室列表
-  ajax_selectTeacherOfficeBySchool: {
-    functionName: "selectTeacherOfficeBySchool",
+  ajax_UpdateOpenId: {
+    functionName: "UpdateOpenId",
   },
   //修改
-  ajax_updateUserInfoText: {
-    functionName: "updateUserInfoText",
+  ajax_updateliyuanUserInfo: {
+    functionName: "updateliyuanUserInfo",
   },
   // 查询权限
   ajax_schoolPermission: {

src/components/userInfoA.vue

@@ -1,108 +1,199 @@
 <template>
-	<el-dialog
-		title="个人信息"
-		:visible.sync="dialogVisibleInfo"
-		:append-to-body="true"
-		width="500px"
-		:before-close="handleClose"
-		class="dialog_diy"
-		:close-on-click-modal="false"
-		:close-on-press-escape="false"
-		:show-close="isClosed || rrole"
-	>
-		<div style="width: 100%; height: 100%" v-loading="digLoading">
-			<div class="info_box">
-				<div class="img" v-loading="imgLoading">
-					<img :src="info.headportrait ? info.headportrait : avator" alt="" />
-					<div class="mask" @click.stop="addImg($event)">
-						<img src="../assets/info/camera_icon.png" alt="" />
-						<input
-							type="file"
-							accept="image/*"
-							capture="camera"
-							style="display: none"
-							@change="beforeUpload($event)"
-						/>
+	<div>
+		<el-dialog
+			title="个人信息"
+			:visible.sync="dialogVisibleInfo"
+			:append-to-body="true"
+			width="500px"
+			:before-close="handleClose"
+			class="dialog_diy"
+			:close-on-click-modal="false"
+			:close-on-press-escape="false"
+			:show-close="isClosed || rrole"
+		>
+			<div style="width: 100%; height: 100%" v-loading="digLoading">
+				<div class="info_box">
+					<div class="img" v-loading="imgLoading">
+						<img :src="info.headportrait ? info.headportrait : avator" alt="" />
+						<div class="mask" @click.stop="addImg($event)">
+							<img src="../assets/info/camera_icon.png" alt="" />
+							<input
+								type="file"
+								accept="image/*"
+								capture="camera"
+								style="display: none"
+								@change="beforeUpload($event)"
+							/>
+						</div>
 					</div>
-				</div>
-				<div class="info_span">
-					<span>姓名：</span>
-					<el-input v-model="info.username" placeholder="请输入姓名"></el-input>
-				</div>
-				<!-- <div class="info_span">
-          <span>教研室：</span>
-          <el-select v-model="info.teacherOffice"  multiple placeholder="类型" @change="Ochange">
-            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option>
-          </el-select>
-        </div> -->
-
-				<div
-					class="info_span"
-					v-for="item in teaType"
-					:key="item.id"
-					:class="{
-						'error-text': !item.value.length,
-						'error-border': !item.value.length,
-					}"
-				>
-					<span>
-						{{ item.name + "：" }}
-					</span>
-					<el-select
-						v-model="item.value"
-						multiple
-						:placeholder="'请选择' + item.name"
-						@change="Ochange"
-					>
-						<el-option
-							v-for="i in item.child"
-							:key="i.id"
-							:label="i.name"
-							:value="i.id"
+					<div class="infoBar">
+						<span
+							:style="{ color: pageCut == 0 ? '#67B1FF' : '' }"
+							@click="midInfo(0)"
+							>我的资料</span
 						>
-						</el-option>
-					</el-select>
-				</div>
-				<div class="info_span">
-					<span>简介：</span>
-					<textarea
-						v-autoHeight="68"
-						rows="2"
-						class="binfo_input binfo_textarea"
-						cols
-						v-model="info.intro"
-						placeholder="想说点什么..."
-					></textarea>
+						<span
+							:style="{ color: pageCut == 1 ? '#67B1FF' : '' }"
+							@click="midInfo(1)"
+							>修改密码</span
+						>
+					</div>
+					<div class="info_box" style="padding: 0" v-if="pageCut == 0">
+						<div class="info_span">
+							<span>姓名：</span>
+							<el-input
+								v-model="info.username"
+								placeholder="请输入姓名"
+							></el-input>
+						</div>
+
+						<div class="info_span">
+							<span>性别：</span>
+							<el-radio-group v-model="info.sex">
+								<el-radio :label="0">男</el-radio>
+								<el-radio :label="1">女</el-radio>
+							</el-radio-group>
+						</div>
+
+						<div
+							class="info_span"
+							v-for="item in teaType"
+							:key="item.id"
+							:class="{
+								'error-text': !item.value.length,
+								'error-border': !item.value.length,
+							}"
+						>
+							<span>
+								{{ item.name + "：" }}
+							</span>
+							<el-select
+								v-model="item.value"
+								multiple
+								:placeholder="'请选择' + item.name"
+								@change="Ochange"
+							>
+								<el-option
+									v-for="i in item.child"
+									:key="i.id"
+									:label="i.name"
+									:value="i.id"
+								>
+								</el-option>
+							</el-select>
+						</div>
+						<div class="info_span">
+							<span>微信登录：</span>
+							<el-button
+								type="danger"
+								size="small"
+								@click="wxLogin"
+								v-if="info.thirdpartyid"
+								>取消绑定</el-button
+							>
+							<el-button type="primary" size="small" @click="wxLogin" v-else
+								>绑定微信</el-button
+							>
+						</div>
+						<span
+							v-if="pageCut == 0"
+							slot="footer"
+							class="dialog-footer"
+							style="width: 90%; display: flex; justify-content: flex-end"
+						>
+							<el-button type="primary" @click="confirm()">确 认</el-button>
+							<el-button @click="close()" v-if="isClosed">关 闭</el-button>
+						</span>
+						<!-- <div class="info_span">
+							<span>简介：</span>
+							<textarea
+								v-autoHeight="68"
+								rows="2"
+								class="binfo_input binfo_textarea"
+								cols
+								v-model="info.intro"
+								placeholder="想说点什么..."
+							></textarea>
+						</div> -->
+					</div>
+					<div v-else>
+						<div class="input_box">
+							<span>原密码</span>
+							<el-input
+								class="input"
+								v-model="opassword"
+								placeholder="请输入原密码"
+							></el-input>
+						</div>
+						<div class="input_box">
+							<span>输入新密码</span>
+							<div style="position: relative">
+								<el-input
+									:type="isLook ? 'type' : 'password'"
+									class="input"
+									v-model="password"
+									placeholder="长度为8-16位，且包含大小写字母"
+								></el-input>
+								<div class="eye" @click="changeEye">
+									<img :src="isLook ? eye : eyeOff" alt="" />
+								</div>
+							</div>
+						</div>
+						<div class="input_box">
+							<span>再次输入新密码</span>
+							<div style="position: relative">
+								<el-input
+									:type="isLook ? 'type' : 'password'"
+									class="input"
+									v-model="password1"
+									placeholder="请再次输入修改密码"
+								></el-input>
+								<div class="eye" @click="changeEye">
+									<img :src="isLook ? eye : eyeOff" alt="" />
+								</div>
+							</div>
+						</div>
+						<div class="input_box">
+							<div
+								style="width: 100%; display: flex; justify-content: flex-end"
+							>
+								<el-button type="primary" @click="updatePassword"
+									>保存</el-button
+								>
+							</div>
+						</div>
+					</div>
 				</div>
 			</div>
-		</div>
-		<span slot="footer" class="dialog-footer">
-			<el-button type="primary" @click="confirm()">确 认</el-button>
-			<el-button @click="close()" v-if="isClosed">关 闭</el-button>
-		</span>
-	</el-dialog>
+		</el-dialog>
+		<el-dialog
+			title="绑定微信"
+			:visible.sync="wechatDialogVisible"
+			:append-to-body="true"
+			width="400px"
+			:before-close="handleClose2"
+			class="dialog_diy"
+		>
+			<div class="fa_weChat">
+				<div id="QRcode" class="QRcode" ref="QRcode"></div>
+			</div>
+			<span slot="footer" class="dialog-footer">
+				<el-button @click="wechatDialogVisible = false">关 闭</el-button>
+			</span>
+		</el-dialog>
+	</div>
 </template>
 
 <script>
 import avator from "../assets/info/teacher.jpg";
 import { API_CONFIG } from "@/common/apiConfig";
+import { updatePassword, getUser } from "@/api/user";
+import store from "../store";
+
+import "@/common/wxLogin.js";
 
 export default {
-	props: {
-		// dialogVisibleInfo: {
-		// 	type: Boolean,
-		// 	default: false,
-		// },
-		rrole: {
-			type: String,
-		},
-		userid: {
-			type: String,
-		},
-		oid: {
-			type: String,
-		},
-	},
+	props: ["rrole", "userid", "oid"],
 	watch: {
 		dialogVisibleInfo(newVal) {
 			if (newVal) {
@@ -143,6 +234,14 @@ export default {
 			isClosed: false,
 			dialogVisibleInfo: false,
 			digLoading: false,
+			pageCut: 0, //0修改信息也 1修改密码页
+			wechatDialogVisible: false, //微信登录弹框
+			isLook: false, //密码眼睛
+			opassword: "",
+			password: "",
+			password1: "",
+			eyeOff: require("../assets/info/eyeOff.png"),
+			eye: require("../assets/info/eye.png"),
 		};
 	},
 	// mounted() {
@@ -156,6 +255,49 @@ export default {
 			this.dialogVisibleInfo = true;
 			// this.getTypeInfo();
 		},
+		updatePassword() {
+			const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[A-Za-z\d]{8,16}$/;
+			if (!reg.test(this.password)) {
+				this.$message.error("密码长度为8-16位，且包含大小写字母");
+				return;
+			} else if (this.password != this.password1) {
+				this.$message.error("两次新密码不相同");
+				return;
+			}
+			let params = {
+				userid: this.userid,
+				opassword: this.opassword,
+				password: this.password,
+			};
+
+			updatePassword(params)
+				.then((res) => {
+					if (res.data[0] && res.data[0].success == 1) {
+						this.$message.success("修改成功");
+						this.opassword = "";
+						this.password = "";
+						this.password1 = "";
+					} else {
+						this.$message.error("修改失败,原密码不正确");
+					}
+				})
+				.catch((err) => {
+					this.$message.error("修改失败");
+					console.error(err);
+				});
+		},
+		// 密码展示与隐藏开关
+		changeEye() {
+			this.isLook = !this.isLook;
+		},
+		//切换弹框
+		midInfo(type) {
+			if (type == 0) {
+				this.pageCut = 0;
+			} else {
+				this.pageCut = 1;
+			}
+		},
 		//获取分类类名
 		getTypeInfo() {
 			this.digLoading = true;
@@ -189,6 +331,9 @@ export default {
 					console.error(err);
 				});
 		},
+		handleClose2(done) {
+			done();
+		},
 		handleClose(done) {
 			this.typeId = "";
 			this.close();
@@ -225,26 +370,13 @@ export default {
 			// }));
 			this.generateResultInfo();
 
-			// let params = [
-			// 	{
-			// 		userid: this.userid,
-			// 		username: this.info.username,
-			// 		cclassid: this.resultInfo,
-			// 		job: this.info.job,
-			// 		subject: this.info.subject,
-			// 		intro: this.info.intro,
-			// 		h: this.info.headportrait ? this.info.headportrait : "",
-			// 	},
-			// ];
 			let params = [
 				{
-					functionName: API_CONFIG.ajax_updateUserInfoText.functionName, // 调用存储过程的名称
+					functionName: API_CONFIG.ajax_updateliyuanUserInfo.functionName, // 调用存储过程的名称
 					userid: this.userid,
 					username: this.info.username,
+					sex: this.info.sex,
 					cclassid: this.resultInfo,
-					job: this.info.job,
-					subject: this.info.subject,
-					intro: this.info.intro,
 					h: this.info.headportrait ? this.info.headportrait : "",
 				},
 			];
@@ -254,6 +386,7 @@ export default {
 				.post(API_CONFIG.baseUrl, params)
 				.then(() => {
 					this.$message.success("修改成功");
+					this.updateInfo();
 					this.dialogVisibleInfo = false;
 				})
 				.catch((err) => {
@@ -262,12 +395,21 @@ export default {
 					console.error(err);
 				});
 		},
-		getData() {
+		updateInfo() {
+			getUser({ userid: this.userid }).then((response) => {
+				console.log(response);
+				// const { data } = response
+				const data = response.data[0][0];
+				// console.log(response)
+				store.commit("user/SET_USERINFO2", data);
+			});
+		},
+		async getData() {
 			this.digLoading = true;
 			let params = [
 				{
-					functionName: API_CONFIG.ajax_selectTestUser.functionName, // 调用存储过程的名称
-					uid: this.userid, //学校id
+					functionName: API_CONFIG.ajax_selectliyuanUserInfo.functionName, // 调用存储过程的名称
+					uid: this.userid,
 				},
 			];
 
@@ -413,29 +555,61 @@ export default {
 					});
 			}
 		},
-		//获取教研室列表
-		getClass2() {
-			// let params = {
-			// 	oid: this.oid,
-			// };
-			let params = [
-				{
-					functionName:
-						API_CONFIG.ajax_selectTeacherOfficeBySchool.functionName, // 调用存储过程的名称
-					oid: this.oid, //学校id
-				},
-			];
-
-			this.$ajax
-				.post(API_CONFIG.baseUrl, params)
-				.then((res) => {
-					this.classJuri = res.data[0];
-					this.getTypeInfo();
+		wxLogin() {
+			if (this.info.thirdpartyid) {
+				this.$confirm("确定取消绑定微信吗？", "提示", {
+					confirmButtonText: "确定",
+					cancelButtonText: "取消",
+					type: "warning",
 				})
-				.catch((err) => {
-					this.isLoading = false;
-					console.error(err);
+					.then(() => {
+						let params = [
+							{
+								functionName: API_CONFIG.ajax_UpdateOpenId.functionName, // 调用存储过程的名称
+								uid: this.userid,
+								openid: "",
+							},
+						];
+						this.$ajax
+							.post(API_CONFIG.baseUrl, params)
+							.then(() => {
+								this.$message.success("取消绑定成功");
+								this.getData();
+							})
+							.catch((err) => {
+								this.$message.error("取消绑定失败");
+								console.error(err);
+							});
+					})
+					.catch(() => {});
+			} else {
+				this.wechatDialogVisible = true;
+				this.wechatLogin();
+			}
+		},
+		wechatLogin() {
+			setTimeout(() => {
+				const randomState = Math.random().toString(36).substring(2); // 生成随机状态
+				// eslint-disable-next-line no-undef
+				new WxLogin({
+					self_redirect: true,
+					id: "QRcode",
+					appid: "wxe9d7fff3c659445f",
+					scope: "snsapi_login",
+					redirect_uri: encodeURIComponent("https://cocorobo.cn/weixin.html"), //https://liyuan.cocorobo.cn/#/wxTest
+					state: randomState,
+					style: "black",
+					href: "data:text/css;base64,LmltcG93ZXJCb3gge2Rpc3BsYXk6IGZsZXg7fQouaW1wb3dlckJveCAucXJjb2RlIHt3aWR0aDogMjMycHg7IGhlaWdodDogMjMycHh9Ci5pbXBvd2VyQm94IC50aXRsZSB7ZGlzcGxheTogbm9uZTt9Ci5pbXBvd2VyQm94IC5pbmZvIHtkaXNwbGF5OiBub25lO30KLmxvZ2luUGFuZWx7d2lkdGg6MTAwJTtoZWlnaHQ6MTAwJTtkaXNwbGF5OmZsZXg7ZmxleC1kaXJlY3Rpb246Y29sdW1uO2FsaWduLWl0ZW1zOmNlbnRlcjtqdXN0aWZ5LWNvbnRlbnQ6Y2VudGVyO30KLnN0YXR1c19pY29uIHtkaXNwbGF5OiBub25lfQoud2ViX3FyY29kZV9wYW5lbF9hcmVhe2hlaWdodDoxMDAlO3dpZHRoOjEwMCU7ZGlzcGxheTpmbGV4O2FsaWduLWl0ZW1zOmNlbnRlcjtqdXN0aWZ5LWNvbnRlbnQ6Y2VudGVyO30K",
+					onReady: function (isReady) {
+						console.log(isReady);
+					},
 				});
+				setTimeout(() => {
+					let iframe = this.$refs.QRcode.querySelector("iframe");
+					iframe.style.width = "100%";
+					iframe.style.height = "100%";
+				}, 0);
+			}, 0);
 		},
 		Ochange() {
 			this.$forceUpdate();
@@ -590,6 +764,7 @@ export default {
 	display: flex;
 	margin-top: 10px;
 	width: 350px;
+	align-items: center;
 }
 
 .info_span > span:nth-child(1) {
@@ -610,4 +785,61 @@ export default {
 .error-text {
 	color: red; /* 红色文字 */
 }
+.infoBar {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	gap: 20px;
+	margin: 10px 0;
+}
+.infoBar span {
+	cursor: pointer;
+}
+.fa_weChat {
+	width: 300px;
+	height: 300px;
+	margin: 0 auto;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.fa_weChat > .QRcode {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	/* background-color: black; */
+}
+.input_box {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.input_box span {
+	width: 100px;
+	font-size: 14px;
+	text-align: right;
+	padding: 0 12px 0 0;
+}
+.input_box .input {
+	width: 300px;
+}
+.input_box + .input_box {
+	margin-top: 20px;
+}
+.eye {
+	position: absolute;
+	right: 10px;
+	top: 8px;
+	width: 25px;
+	height: 25px;
+	cursor: pointer;
+}
+
+.eye > img {
+	width: 100%;
+	height: 100%;
+}
 </style>

src/store/modules/user.js

@@ -125,6 +125,7 @@ const actions = {
           .catch((error) => {
             // var _user = { userid: "a9c5c04d-1b6f-11f0-a66a-005056924926" }; //刘玉彤
             // var _user = { userid: "e1d282f8-2325-11f0-99d3-005056924926" }; //zjm
+            // var _user = { userid: "0c3735c9-a2ef-11ef-9b30-005056b86db5" }; //yym
             // var _user = { userid: "5943e08c-b7d4-11ed-8d51-005056b86db5" }; //cs111
             // var _user = { userid: "6c56ec0e-2c74-11ef-bee5-005056b86db5" }; //qgt
             // var _user = { userid: "4fda23d4-1b6f-11f0-a66a-005056924926" }; //管理员