绑定wx

pages/index/modules/mine.vue

@@ -4,9 +4,9 @@
 			bgImage="https://yostest175549.obs.cn-east-2.myhuaweicloud.com:443/202306151686796745663B52544232.png">
 			<view slot="head" class="head" :style="{ 'height': headHeight, 'top': posTop }">
 				<view class="custom-bar" :style="{ 'height': customBar }">
-					<navigator class="iconfont icon-wode-xuanzhong" url="#" @click.stop="openPopup" />
+					<navigator class="iconfont icon-wode-xuanzhong" url="#" @click.stop="showUserCenter" />
 				</view>
-				<navigator class="user" url="#" @click.stop="openPopup">
+				<navigator class="user" url="#" @click.stop="showUserCenter">
 					<image class="profile-photo" v-if="userMsg.attinfos.length" :src="userMsg.attinfos[0].url"
 						mode="aspectFill" />
 					<view v-else class="profile-photo">
@@ -19,7 +19,7 @@
 							{{ userMsg.name }}
 						</view>
 						<view class="replenish">
-							<text class="iconfont icon-daka" />
+							<text class="iconfont icon-shoujihao" />
 							{{ userMsg.phonenumber || '未填写' }}
 							<block v-if="userMsg.hr.userid">
 								<text style="margin: 0 10px;">
@@ -32,128 +32,53 @@
 				</navigator>
 			</view>
 		</cu-custom>
+
+
 		<view class="nav-box">
-			<navigator class="nav-item" url="#">
-				<text class="iconfont icon-wode-xuanzhong" />
+
+			<navigator class="nav-item" url="/pages/index/mine-modules/changePassword">
+				<text class="iconfont icon-mima" />
 				<view class="view">
 					修改登录密码
 				</view>
-				<text class="iconfont icon-wode-xuanzhong" />
-			</navigator>
-			<navigator class="nav-item" url="#">
-				<text class="iconfont icon-wode-xuanzhong" />
-				<view class="view">
-					修改登录手机号
-				</view>
-				<text class="iconfont icon-wode-xuanzhong" />
+				<text class="iconfont icon-a-wodetiaozhuan" />
 			</navigator>
-			<navigator class="nav-item" url="#">
+			<!-- v-if="usePort == 'wechat'" -->
+			<navigator class="nav-item" url="#" @tap="bindingWechat">
 				<text class="iconfont icon-wode-xuanzhong" />
 				<view class="view">
 					绑定微信
 				</view>
-				<text class="iconfont icon-wode-xuanzhong" />
+				<view class="already-bound" v-if="userMsg.wechatuserinfo.avatarUrl || false">
+					<view class="portrait">
+						<image class="image" :src="userMsg.wechatuserinfo.avatarUrl" mode="aspectFit" />
+					</view>
+					<text>
+						已绑定
+					</text>
+				</view>
+				<view class="not-bound" v-else>
+					未绑定
+				</view>
+				<text class="iconfont icon-a-wodetiaozhuan" />
 			</navigator>
+
 		</view>
-		<u-button :customStyle="butStyle" @click="logOut()">退出登录</u-button>
 
-		<u-popup :show="showPopup" :customStyle="popupStyle" bgColor="#F7F7F7" :overlay="false" zIndex="9998" mode="left"
-			@close="closePopup">
-			<view :style="{ 'height': spaceUsage }" />
-			<view class="head-p">
-				账号信息
-				<text class="cuIcon-close" @click="closePopup" />
-			</view>
 
-			<upload maxCount="1" @uploadCallback="uploadCallback">
-				<navigator class="portrait-p-box" url="#">
-					<view class="label">
-						头像
-					</view>
-					<view class="content">
-						<image class="profile-photo" v-if="userMsg.attinfos.length" :src="userMsg.attinfos[0].url"
-							mode="aspectFill" />
-						<view v-else class="profile-photo">
-							<view class="substitution">
-								<text class="iconfont icon-wode-xuanzhong" />
-							</view>
-						</view>
-						<text class="iconfont icon-a-wodetiaozhuan" />
-					</view>
-				</navigator>
-			</upload>
-			<view class="rests-p-box">
-				<view class="row">
-					<view class="label">
-						工号
-					</view>
-					<view class="content">
-						{{ userMsg.accountno }}
-					</view>
-				</view>
-				<navigator url="#" class="row" @click="openModal('name', '姓名', userMsg.name, '请填写姓名')">
-					<view class="label">
-						姓名
-					</view>
-					<view class="content">
-						{{ userMsg.name }}
-						<text class="iconfont icon-a-wodetiaozhuan" />
-					</view>
-				</navigator>
-				<block v-if="userMsg.hr.userid">
-					<navigator url="#" class="row" @click="openModal('email', '邮箱', userMsg.hr.email, '请填写邮箱')">
-						<view class="label">
-							邮箱
-						</view>
-						<view class="content">
-							{{ userMsg.hr.email || '--' }}
-							<text class="iconfont icon-a-wodetiaozhuan" />
-						</view>
-					</navigator>
-					<view class="row">
-						<view class="label">
-							部门
-						</view>
-						<view class="content">
-							{{ userMsg.hr.depname || '--' }}
-						</view>
-					</view>
-					<view class="row">
-						<view class="label">
-							职位
-						</view>
-						<view class="content">
-							{{ userMsg.hr.position || '--' }}
-						</view>
-					</view>
-				</block>
-			</view>
-		</u-popup>
-		<u-overlay :show="showPopup" zIndex="9997" @click="closePopup" />
-		<u-modal :show="changeUser.showModal" @confirm="changeUserMsg" @cancel="onCancel" showCancelButton ref="uModal"
-			:asyncClose="true">
-			<view class="modal-content">
-				<view class="title">
-					修改{{ changeUser.title }}
-				</view>
-				<input :focus="inputFocus" class="input" v-model="changeUser.changeValue" type="text"
-					:placeholder="changeUser.placeholder" />
-			</view>
-		</u-modal>
+		<u-button :customStyle="butStyle" @click="logOut()">退出登录</u-button>
+		<user-center ref="userCenter" :userMsg="userMsg" @getMsg="getUserMsg" />
 	</view>
 </template>
 
 <script>
-import upload from "../../../components/my-upload.vue";
-import {
-	queryStr,
-	CheckEmail
-} from "../../../utils/basicInspection"
+import userCenter from "../mine-modules/userCenter.vue"
 export default {
 	name: 'Mine',
-	components: { upload },
+	components: { userCenter },
 	data() {
 		return {
+			usePort: this.usePort,
 			uninitialized: true,
 			posTop: this.tovw(this.StatusBar),
 			headHeight: this.tovw(this.CustomBar - this.StatusBar),
@@ -170,77 +95,13 @@ export default {
 				fontSize: "4vw",
 				color: "#FFFFFF"
 			},
-			popupStyle: {
-				width: "88.000vw",
-				background: "#F7F7F7",
-				padding: "2.667vw",
-				boxSizing: "border-box"
-			},
 			userMsg: {},
-			showPopup: false,
-			spaceUsage: 0,
-			inputFocus: "",
-			changeUser: {
-				name: "",
-				showModal: false,
-				title: "",
-				changeValue: "",
-				placeholder: "",
-			}
 		};
 	},
 	methods: {
 		init(forcedUpdating = true) {
 			this.uninitialized = false;
 			this.getUserMsg()
-			console.log("加载我的")
-		},
-		/* 打开modal */
-		openModal(name, title, value, placeholder) {
-			this.changeUser = {
-				name,
-				showModal: true,
-				title,
-				changeValue: "",
-				placeholder: value || placeholder,
-			}
-			setTimeout(() => {
-				this.inputFocus = true
-			}, 100)
-		},
-		closePopup() {
-			this.showPopup = false;
-		},
-		onCancel() {
-			this.changeUser.showModal = false
-			this.inputFocus = false
-		},
-		/* 修改用户信息 */
-		changeUserMsg() {
-			let changeUser = this.changeUser,
-				content = {
-					name: this.userMsg.name,
-					email: this.userMsg.hr.email || "",
-					phonenumber: this.userMsg.phonenumber
-				};
-			if (changeUser.changeValue == '') return this.changeUser.showModal = false;
-			if (changeUser.name == 'name') {
-				content.name = queryStr(changeUser.changeValue, '已移除非法字符');
-			} else if (changeUser.name == 'email') {
-				if (!CheckEmail(changeUser.changeValue.trim())) return this.$refs.uModal.loading = false;
-				content.email = changeUser.changeValue.trim();
-			}
-			this.$Http.basic({
-				id: 20230608105602,
-				content
-			}).then(res => {
-				console.log("修改用户信息", res)
-				if (this.cutoff(res.msg, '修改成功')) return;
-				this.userMsg.name = content.name;
-				this.userMsg.hr.email && (this.userMsg.hr.email = content.email);
-				this.onCancel();
-				this.getUserMsg();
-			})
 		},
 		// 获取用户信息
 		getUserMsg() {
@@ -255,40 +116,10 @@ export default {
 				this.userMsg = res.data;
 			})
 		},
-		openPopup() {
-			this.spaceUsage = this.$refs.Dustom.getHeight();
-			this.showPopup = true;
-		},
-		uploadCallback(attachmentids) {
-			let attinfos = [];
-			//删除原本头像
-			if (this.userMsg.attinfos.length) this.$Http.basic({
-				"classname": "system.attachment.Attachment",
-				"method": "deleteFileLink",
-				"content": {
-					"linksids": this.userMsg.attinfos.map(v => v.linksid)
-				}
-			}).then(res => {
-				console.log("删除原本头像", res)
-				if (this.cutoff(res.msg)) return;
-				this.userMsg.attinfos = attinfos;
-			})
-			//绑定新头像
-			if (attachmentids) this.$Http.basic({
-				"classname": "system.attachment.Attachment",
-				"method": "createFileLink",
-				"content": {
-					"ownertable": "sys_users",
-					"ownerid": uni.getStorageSync('userMsg').userid,
-					"usetype": "headportrait",
-					"attachmentids": attachmentids
-				}
-			}).then(res => {
-				console.log("绑定头像", res)
-				if (this.cutoff(res.msg)) return;
-				attinfos = res.data;
-				this.userMsg.attinfos = attinfos;
-			})
+		/* 打开用户中心 */
+		showUserCenter() {
+			this.$refs.userCenter.show = !this.$refs.userCenter.show;
+			this.$refs.userCenter.spaceUsage = this.$refs.Dustom.getHeight();
 		},
 		logOut() {
 			uni.showModal({
@@ -301,6 +132,63 @@ export default {
 				},
 			})
 		},
+		/* 绑定或解绑微信 */
+		bindingWechat(e) {
+			let that = this;
+			if (this.userMsg.iswechatbinding) {
+				uni.showModal({
+					title: "提示",
+					content: "是否解除绑定",
+					success: (res) => {
+						if (res.confirm) handleBDWechat(0);
+					}
+				})
+			} else {
+				handleBDWechat(1);
+			}
+			function handleBDWechat(isbinging) {
+				wx.getUserProfile({
+					desc: '用于完善用户资料',
+					success: ({
+						userInfo
+					}) => {
+						wx.login({
+							success(res) {
+								if (res.code) that.$Http.basic({
+									id: 20230608105702,
+									content: {
+										"wechat_code": res.code,
+										isbinging, // 0解绑 1绑定
+										wechatuserinfo: userInfo,
+										"appid": "wxd162e1286b6d7ecd"
+									}
+								}).then(s => {
+									console.log("微信绑定", isbinging, s)
+									if (s.msg != '成功') return wx.showToast({
+										title: s.data,
+										icon: "none"
+									});
+									setTimeout(() => {
+										wx.showToast({
+											title: isbinging == 0 ? '解除成功' : '绑定成功',
+											icon: "none"
+										})
+									}, 100);
+									that.getUserMsg();
+								})
+							}
+						})
+					},
+					fail: () => {
+						wx.showToast({
+							title: '操作失败，未获得授权',
+							icon: "none"
+						})
+					}
+				})
+			}
+
+		},
 	}
 }
 </script>
@@ -405,134 +293,40 @@ export default {
 			margin-left: 10px;
 		}
 
-		.iconfont {
-			font-size: 14px;
-			flex-shrink: 0;
-		}
-	}
-}
-
-.cu-bar .content {
-	overflow: auto !important;
-
-}
-
-.head-p {
-	width: 100%;
-	display: flex;
-	justify-content: space-between;
-	height: 21px;
-	font-size: 15px;
-	color: #333333;
-	line-height: 21px;
-
-	.cuIcon-close {
-		padding-left: 10px;
-	}
-}
-
+		/* 绑定wx */
+		.already-bound {
+			display: flex;
+			align-items: center;
+			font-size: 0;
 
-.portrait-p-box,
-.rests-p-box {
-	width: 310px;
-	background: #FFFFFF;
-	box-sizing: border-box;
-	padding-right: 10px;
-	border-radius: 4px;
-	overflow: hidden;
-}
-
-.portrait-p-box {
-	height: 60px;
-	margin-top: 15px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-
-	.label {
-		font-size: 14px;
-		font-family: PingFang SC-Regular, PingFang SC;
-		color: #666666;
-		margin-left: 15px;
-	}
-
-	.content {
-		display: flex;
-		align-items: center;
-
-		.icon-a-wodetiaozhuan {
-			font-size: 18px;
-			color: #999;
-		}
-
-		.profile-photo {
-			width: 32px;
-			height: 32px;
-			border-radius: 50%;
-			overflow: hidden;
-
-			.substitution {
-				width: 32px;
-				line-height: 32px;
-				text-align: center;
-				background: #EFF4FA;
+			text {
+				font-size: 13px;
+			}
 
-				.iconfont {
-					font-size: 16px;
-					color: #7C98BB;
-				}
+			.image {
+				width: 20px;
+				height: 20px;
+				border-radius: 50%;
+				margin-right: 6px;
 			}
 		}
-	}
-}
-
-.rests-p-box {
-	margin-top: 10px;
-
-	.row {
-		display: flex;
-		width: 310px;
-		box-sizing: border-box;
-		padding: 13px 10px 12px 15px;
 
-		.label {
-			min-width: 28px;
-			flex: 1;
-			font-size: 14px;
-			line-height: 20px;
+		.not-bound {
+			display: flex;
+			align-items: center;
+			font-size: 13px;
+			color: #FF3B30;
 		}
 
-		.content {
-			line-height: 20px;
+		.iconfont {
 			font-size: 14px;
-			color: #333333;
-
-			.icon-a-wodetiaozhuan {
-				font-size: 14px;
-			}
+			flex-shrink: 0;
 		}
 	}
 }
 
-.modal-content {
-	width: 100%;
-
-	.title {
-		width: 100%;
-		text-align: center;
-		font-size: 18px;
-		color: #333;
-	}
+.cu-bar .content {
+	overflow: auto !important;
 
-	.input {
-		width: 100%;
-		margin-top: 22px;
-		border: 1px solid #888;
-		height: 30px;
-		line-height: 30px;
-		padding-left: 6px;
-		font-size: 14px;
-		border-radius: 4px;
-	}
 }
 </style>