phone_uni_xiongan_LBG/pages/personcenter/personcenter.vue

<template>
	<view>
		<!-- 头部 -->
		<view class="dzhi_top">
			<!-- <image src="" class="dzhi_t_bg" mode="aspectFill"></image> -->
			<view class="mode_com mode_coms">
				<view class="dly_flex person_inf" @click="oauthUser()">
					<view class="pers_box">
						<view class="pes_img">
							<button class="btn_dzhi">
								<image :src="headimgurl" class="pers_box" mode="aspectFill"></image>
							</button>
							<!-- <button class="btn_dzhi" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							    <image class="pers_box" :src="headimgurl" mode="aspectFill"></image>
							</button> -->
						</view>
					</view>
					<view class="pes_inf aml_30">
						<!-- 用户昵称 -->
						<view class="t_adm_box">
							<!-- <text class="t_nic">{{nickname}}阳光夏~小葵</text> -- 已登录状态 显示用户昵称      -->
							<text class="t_nic">{{ nicknames }}</text>
						</view>
						<!-- <input type="nickname" @blur="saveName" class="weui-input" placeholder="请输入昵称"/> -->
					</view>
					<!-- 头像 -->
				</view>
				<view class="t-setting" v-if="isLogin" @click="changean('center')">
					<image class="set-img" src="https://www.lbgjtoa.com/appImg/icon-set.svg" mode="aspectFit"></image>
				</view>
			</view>
		</view>

		<!-- <view :class="isLogin?'mode_com islogin': 'mode_com'"> -->
		<view class="mode_com mode_com">
			<text class="tit_com">我的应用</text>
			<view class="dly_flex hd_pter mt_hb dzhi_bq2" style="background: #fff; padding-bottom: 40rpx; border-radius: 20rpx">
				<view class="w_33" @tap="jump('myReserve')">
					<view class="">
						<image class="kou_top3" mode="aspectFill" src="../../static/animg/p_wdpj.png"></image>
					</view>
					<text class="ht_text">我的预约</text>
				</view>

				<view class="w_33" @tap="jump('tousu')">
					<view class="">
						<image class="kou_top3" mode="aspectFill" src="../../static/animg/p_lyts.png"></image>
					</view>
					<text class="ht_text">我的投诉</text>
				</view>

				<view class="w_33" @tap="jump('aboutus')">
					<view class="">
						<image class="kou_top3" mode="aspectFill" src="../../static/animg/p_gywm.png"></image>
					</view>
					<text class="ht_text">客服电话</text>
				</view>

				<view class="w_33" @tap="jump('delete')">
					<view class="">
						<image class="kou_top3" mode="aspectFill" src="../../static/animg/p_tc.png"></image>
					</view>
					<text class="ht_text">退出登录</text>
				</view>
			</view>
		</view>
		<view></view>
		<!-- 兴趣定制 -->

		<!-- 工具栏 -->
	</view>
</template>

<script>
var that;
import aes from '@/common/aes.js';

export default {
	data() {
		that = this;
		return {
			avatarUrl: '',
			url: '',
			username: '',
			headimgurl: '',
			nickname: '点击授权',
			nicknames: '点击授权',
			isUpdate: true,
			isLogin: false,
			isShowOnlinets: 'NO',
			isFlag: false,
			scenicList: [],
			lineList: [],
			foodImgList: [],
			methodImgList: [],
			scenicGZType: 'NO',
			lineGZType: 'NO',
			foodGZType: 'NO',
			methodGZType: 'NO',
			scenicSelectStr: '',
			lineSelectStr: '',
			imgBase64: '',
			adminId: '',
			isAdminLogin: false,
			avatarUrl: ''
		};
	},
	onShow() {
		if (!uni.getStorageSync('unionid') || uni.getStorageSync('unionid') == '' || uni.getStorageSync('unionid') == null) {
			this.isLogin = false;
			this.headimgurl = '';
		} else {
			this.nickname = uni.getStorageSync('nickname');
			this.nicknames = this.$util.entitiestoUtf16(this.nickname);
			this.headimgurl = uni.getStorageSync('headimgurl');
			this.isLogin = true;
		}
	},
	onLoad(options) {
		if (uni.getStorageSync('oauthTime') + this.$param.update_oauthTime < new Date().getTime()) {
			// uni.removeStorageSync("user_token");
			uni.removeStorageSync('nickname');
			uni.removeStorageSync('unionid');
			uni.removeStorageSync('headimgurl');
		}
	},
	methods: {
		changean(type) {
			let this_ = this;
			if (!uni.getStorageSync('unionid') || uni.getStorageSync('unionid') == '' || uni.getStorageSync('unionid') == null) {
				uni.showToast({
					title: '请先授权',
					icon: 'none'
				});
				return;
			} else {
				uni.navigateTo({
					url: '/pages/personcenter/EditProfile/EditProfile'
				});
				// this.type = type
				// this_.url = this.headimgurl
				// this_.username = this.nickname
				// // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				// this.$refs.popup.open(type)
			}
		},
		onChooseAvatar(e) {
			let this_ = this;
			// if (!uni.getStorageSync('unionid')||uni.getStorageSync('unionid')==''||uni.getStorageSync('unionid')==null) {
			// 	uni.showToast({
			// 		title: '请先授权',
			// 		icon: 'none'
			// 	});
			// 	return;
			// }
			console.log(e);
			const avatarUrl = e.detail.avatarUrl;
			this_.url = avatarUrl;
		},
		blurname(e) {
			let this_ = this;
			console.log(e);
			this_.username = e.detail.value;
		},
		saveLoginLog: function (unionid) {
			var that = this;
			uni.getSystemInfo({
				success(e) {
					var model = e.model + ' ' + e.system;
					var platform = e.platform;
					var data = {
						userkey: that.$param.userkey,
						unionid: unionid,
						model: model,
						platform: platform
					};
					that.$Request.post(that.$config.insertLoginLog, data).then((res) => {
						if (res.status == 200) {
							console.log('记录成功');
						}
					});
				}
			});
		},
		/* 是否显示投诉功能 */
		getIsShow: function () {
			this.$Request.post(this.$config.getYbsjSysParam, {}).then((res) => {
				var d = res.data;
				this.isShowOnlinets = d.is_show_onlinets;
			});
		},
		oauthUser: function () {
			// #ifdef  MP-WEIXIN
			let this_ = this;
			if (this_.isLogin) {
				return;
			} else {
				uni.showLoading({
					mask: true,
					title: '授权中',
					success() {
						setTimeout(function () {
							wx.login({
								success: (res) => {
									var datas = {
										code: res.code
									};
									uni.request({
										url: this_.$config.getUserInformation,
										data: datas,
										method: 'post',
										success: function (res) {
											const obj = JSON.parse(res.data.msg);
											this_.isLogin = true;
											const da = {
												userkey: this_.$param.userkey,
												openid: obj.openid
											};
											this_.$Request.post(this_.$config.getUser, da).then((res) => {
												if (res.data == null) {
													uni.setStorageSync('nickname', '微信用户');
													uni.setStorageSync('headimgurl', 'https://www.lbgjtoa.com/appImg/icon-person-01.png');
													uni.setStorageSync('oauthTime', new Date().getTime());
													this_.nickname = '微信用户';
													this_.headimgurl = 'https://www.lbgjtoa.com/appImg/icon-person-01.png';
													this_.$forceUpdate();
													this_.saveProfile();
												} else {
													uni.setStorageSync('nickname', res.data.wxNickname);
													uni.setStorageSync('headimgurl', res.data.wxHeadimgurl);
													uni.setStorageSync('oauthTime', new Date().getTime());
													this_.nickname = res.data.wxNickname;
													this_.nicknames = this_.$util.entitiestoUtf16(this_.nickname);
													this_.headimgurl = res.data.wxHeadimgurl;
													this_.$forceUpdate();
												}
											});
											uni.setStorageSync('unionid', obj.openid);
										},
										fail: function (err) {
											console.log(err); //App.json中默认超时时间为60秒
										}
									});
									// console.log( res);
								},
								fail: function (error) {
									console.log('login failed ' + error);
								}
							});

							this_.$forceUpdate();
							uni.hideLoading();
						}, 3000);
					}
				});
			}

			// #endif
		},
		saveProfile: function () {
			let this_ = this;
			// wx.getUserInfo({
			// 	provider: 'weixin',
			// 	success: (res) => {
			// 		uni.setStorageSync('nickname', '微信用户');
			// 		uni.setStorageSync('headimgurl', 'https://www.lbgjtoa.com/appImg/icon-person-01.png');
			// 		uni.setStorageSync('oauthTime', new Date().getTime());
			// 		this_.nickname = '微信用户';
			// 		this_.headimgurl = 'https://www.lbgjtoa.com/appImg/icon-person-01.png';
			// 		this_.$forceUpdate();
			const obj = {
				headimgurl: this_.headimgurl,
				openid: uni.getStorageSync('unionid'),
				nickname: this_.nickname
			};
			console.log(obj, '请求参数');
			var data = {
				data: JSON.stringify(obj),
				userkey: this_.$param.userkey
			};
			this_.$Request.post(this_.$config.saveUser, data).then((res) => {
				var flag = this_.$util.isSuccess(res);
				if (!flag) {
					return;
				}
				var userid = res.data;
				console.log(userid, '保存返回');
			});
			// },
			// fail: function (error) {
			// 	console.log('login failed ' + error);
			// }
			// });
			// uni.showToast({
			// 	title:"授权失败,点击"+that.nickname+"重新授权",
			// 	icon:"none",
			// 	duration: 1500
			// })
		},

		jump: function (obj) {
			if (obj == 'aboutus') {
				uni.navigateTo({
					url: '/pages/personcenter/aboutus'
				});
			} else if (obj == 'yuyue') {
				if (!uni.getStorageSync('unionid') || uni.getStorageSync('unionid') == '' || uni.getStorageSync('unionid') == null) {
					uni.showToast({
						title: '请先授权',
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: '/sunPackIndex/scenic/subscribe/yuyue/yue_list_js'
				});
			} else if (obj == 'tousu') {
				if (!uni.getStorageSync('unionid') || uni.getStorageSync('unionid') == '' || uni.getStorageSync('unionid') == null) {
					uni.showToast({
						title: '请先授权',
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: '/sunPackIndex/suggest/sug_list'
				});
			} else if (obj == 'myReserve') {
				console.log(uni.getStorageSync('unionid'));
				if (!uni.getStorageSync('unionid') || uni.getStorageSync('unionid') == '' || uni.getStorageSync('unionid') == null) {
					uni.showToast({
						title: '请先授权',
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/myReserve/myReserve'
				});
			} else if (obj == 'admin') {
				uni.navigateTo({
					url: '/pages/personcenter/adminLogin/adminLogin'
				});
			} else if (obj == 'scanRecord') {
				if (this.$util.isBlack(aes.aesDecrypt(uni.getStorageSync('adminId')))) {
					uni.showToast({
						title: '请先登陆管理员',
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/personcenter/scanCodeRecord/scanCodeRecord'
				});
			} else if (obj == 'logout') {
				uni.removeStorageSync('adminId');
				this.adminId = '';
				this.isAdminLogin = false;
			} else if (obj == 'myComment') {
				if (!uni.getStorageSync('unionid') || uni.getStorageSync('unionid') == '' || uni.getStorageSync('unionid') == null) {
					uni.showToast({
						title: '请先授权',
						icon: 'none'
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/myComment/list/list'
				});
			} else if (obj == 'delete') {
				var that = this;
				if (that.isLogin == true) {
					uni.showModal({
						title: '提示',
						icon: 'none',
						content: '确定退出登录？',
						success: function (res) {
							if (res.confirm) {
								// that.deleteUserApp();
								(this.scenicGZType = 'NO'), (this.lineGZType = 'NO'), (this.foodGZType = 'NO'), (this.methodGZType = 'NO'), uni.removeStorageSync('nickname');
								uni.removeStorageSync('headimgurl');
								uni.removeStorageSync('nickname');
								uni.removeStorageSync('oauthTime');
								uni.removeStorageSync('openid');
								uni.removeStorageSync('unionid');
								that.nicknames = '点击授权';
								that.headimgurl = 'https://www.lbgjtoa.com/appImg/icon-person-01.png';
								that.isLogin = false;
							} else if (res.cancel) {
							}
						}
					});
				} else {
					uni.showToast({
						title: '您还未登录！',
						icon: 'none'
					});
					return;
				}
			}
		},
		getUserInterest: function () {
			var that = this;
			var data = {
				userid: uni.getStorageSync('unionid'),
				userkey: this.$param.userkey
				//userid: "2"
			};
			this.$Request.post(this.$config.getUserInterest, data).then((res) => {
				var data = res.data;
				that.scenicGZType = data.scenic_isShow;
				that.lineGZType = data.line_isShow;
				that.foodGZType = data.food_isShow;
				that.methodGZType = data.method_isShow;
				var scenicArr = data.scenic_msg.split(',');
				var lineArr = data.line_msg.split(',');
				for (var i = 0; i < scenicArr.length; i++) {
					if (!this.$util.isBlack(scenicArr[i])) {
						that.scenicSelectXQ(scenicArr[i].split('_')[1], 'hx');
					}
				}

				for (var i = 0; i < lineArr.length; i++) {
					if (!this.$util.isBlack(lineArr[i])) {
						that.lineSelectXQ(lineArr[i].split('_')[1], 'hx');
					}
				}
			});
		},
		deleteUserApp: function () {
			var data = {
				userid: uni.getStorageSync('unionid'),
				userkey: this.$param.userkey
			};
			this.$Request.post(this.$config.deleteUserApp, data).then((res) => {
				uni.showToast({
					title: '注销成功！',
					duration: 2000
				});
			});
		},
		getAndroidUserKey: function () {
			this.$util.bindGpsObj(this);
			switch (uni.getSystemInfoSync().platform) {
				case 'android':
					console.log('运行Android上');
					Android.gotoDetial('DEVICEID', '');
					break;
				case 'ios':
					console.log('运行iOS上');
					window.location.href = 'https://www.baidu.com?url=tuisong';
					break;
				default:
					break;
			}
		},
		imgPushTest: function (code) {
			if (!aes.aesDecrypt(uni.getStorageSync('imgPushType'))) {
				var data = {
					areacode: this.$config.ARER_CODE_FOUR,
					userStr: code,
					lng: this.$param.lng,
					lat: this.$param.lat,
					imgUrl: this.$config.REAUEST_ROOTPATH,
					userkey: this.$param.userkey,
					userid: uni.getStorageSync('unionid'),
					pageType: ''
				};
				this.$Request.post(this.$config.imgPushFun, data).then((res) => {});
			}
		}
	}
};
</script>

<style>
@import url('../../static/css/common.css');
@import url('../../static/css/hebei.css');
.dzhi_top {
	padding: 150rpx 0 40rpx;
	border-radius: 0 0 50rpx 50rpx;
}
.islogin {
	padding: 120rpx 50rpx 40rpx;
}
.mode_coms {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.fx-box {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.tx-tt {
	margin: 0 auto;
	margin-bottom: 20rpx;
}
.tx-btn {
	margin: 0 auto;
	width: 140rpx;
	height: 140rpx;
}
.m-t-40 {
	text-align: center;
	margin-top: 20rpx;
}
.tx-btn {
	margin: 0 auto;
	margin-top: 20rpx;
	padding: 0;
}
.wh-106s {
	width: 100%;
	height: 100%;
}
.t-setting {
	width: 50rpx;
	height: 50rpx;
}
.set-img {
	width: 100%;
	height: 100%;
}
.person_inf{
	width: 50%;
}
.pes_inf {
    width: 99%;
}
.t_nic {
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
</style>