tourism/uni_applet/pages/my/my.vue

<template>
	<view class="content">
		<view class='user'>
			<view class='flex userWrap justify-space-between'>
				<view class='flex'>
					<view style='margin-right:20rpx;'>
						<u--image width='60' height='60' :src="userInfo.head" shape="circle"></u--image>
					</view>
					<view>
						<view class='flex'>
							<view @click='login' v-if='!edit' style="font-weight: bold;font-size: 32rpx;">{{userInfo.nickname?userInfo.nickname:'请点击登录'}}</view>
							<view v-else> <u--input
								placeholder="请输入内容"
								border="bottom"
								v-model='userInfo.nickname'
								clearable
							  ></u--input></view>
							<u-icon  v-if='!edit&&userInfo.phone' @click='edit = true' name="edit-pen-fill" color="#eaad1a" size="24"></u-icon>
							<u-icon  v-if='edit&&userInfo.phone' @click='editNickName' name="checkbox-mark" color="#eaad1a" size="24"></u-icon>
						</view>
						<view>{{userInfo.phone1}}</view>
					</view>
				</view>	
				<view>
					<u-icon name="bell" color="#eaad1a" size="28"></u-icon>
				</view>
			</view>
			
		</view>
		<view class="wrap">
		<!-- 	<view class='orderList'>
				<view class="orderItem align-item-center">
					<view style='position:relative;'>
						<u-icon name="home-fill" color="#2979ff" size="28"></u-icon>
						<u-badge :offset='offset' absolute='true'  bgColor='red' max="99" :value="value"></u-badge>
					</view>
					<view class='orderName'>入住订单</view>
				</view>
				<view class="orderItem align-item-center">
					<view style='position:relative;'>
						<u-icon name="home-fill" color="#2979ff" size="28"></u-icon>
						<u-badge :offset='offset' absolute='true'  bgColor='red' max="99" :value="value"></u-badge>
					</view>
					<view class='orderName'>特产订单</view>
				</view>
				<view class="orderItem align-item-center">
					<view style='position:relative;'>
						<u-icon name="home-fill" color="#2979ff" size="28"></u-icon>
						<u-badge :offset='offset' absolute='true'  bgColor='red' max="99" :value="value"></u-badge>
					</view>
					<view class='orderName'>团购订单</view>
				</view>
				<view class="orderItem align-item-center">
					<view style='position:relative;'>
						<u-icon name="home-fill" color="#2979ff" size="28"></u-icon>
						<u-badge :offset='offset' absolute='true'  bgColor='red' max="99" :value="value"></u-badge>
					</view>
					<view class='orderName'>门票订单</view>
					
				</view>
			</view> -->
			<view style='width:100%;'>
				<u-cell-group :border='false'>
					<!-- <u-cell
					    title="收货地址"
					    isLink
					    url="/pages/componentsB/tag/tag"
					></u-cell> -->
					<u-cell
					    title="我的发布"
					    isLink
					    url="/pageA/my/mypublish"
					></u-cell>
					<!-- <u-cell
					    title="房源发布"
					    isLink
					    url="/pages/componentsB/badge/badge"
					></u-cell> -->
					<!-- <u-cell
					    title="商家入驻"
					    isLink
					    url="/pages/componentsB/badge/badge"
					></u-cell> -->
					<!-- <u-cell
					    title="业务合作"
					    isLink
					    url="/pages/componentsB/badge/badge"
					></u-cell> -->
					<!-- <u-cell
					    title="广告推广"
					    isLink
					    url="/pages/componentsB/badge/badge"
					></u-cell> -->
					<u-cell
					    title="联系客服"
					    isLink
					    url="/pages/componentsB/badge/badge"
					></u-cell>
					<u-cell
					:border='false'
					    title="去商家端"
					    isLink
					    url="/pageA/enter/enter"
					></u-cell>
				</u-cell-group>
			</view>
		</view>
		<view v-if='userInfo.nickname' class='quit-login' @click='quitLogin'>退出登录</view>
		<login-pop-up ref='loginpopup' :content='"手机登录后才能查看我的哦~"'></login-pop-up>
	</view>
</template>

<script>
	var that
		import loginPopUp from "@/components/loginPopUp/index.vue"
	export default {
		components: {
			loginPopUp
		},
		data() {
			return {
				edit:false,
				offset:['-2','-27%'],
				type:"warning",
				value:'88',
				title: 'Hello',
				userInfo:{},
			}
		},
		onLoad() {
			that = this
		},
		onShow(){
			if(!uni.getStorageSync("userInfo").phone){
				this.$refs.loginpopup.open()
			}else{
				this.userInfo = uni.getStorageSync("userInfo")
				  var reg = /1(\d{2})\d{4}(\d{4})/g;
				this.userInfo.phone1 = this.userInfo.phone.replace(reg,"1$1****$2");
				console.log(this.userInfo)
			}
		},
		methods: {
			quitLogin(){
				uni.showModal({
					title: '提示',
					content: '确定退出当前账号？',
					success (res) {
					    if (res.confirm) {
							uni.removeStorageSync("userInfo")
							that.userInfo = {}
							setTimeout(()=>{
								that.reload()
							},500)
					    } else if (res.cancel) {
					      console.log('用户点击取消')
					    }
					  }
				})
			},
			reload() {
			       // 页面重载
			       const pages = getCurrentPages()
			       // 声明一个pages使用getCurrentPages方法
			       const curPage = pages[pages.length - 1]
			       // 声明一个当前页面
			       curPage.onLoad(curPage.options) // 传入参数
			       curPage.onShow()
			       curPage.onReady()
			       // 执行刷新
			   },
			editNickName(){
				this.$request.baseRequest('admin.unimall.commonUserInfo', 'update', {
					commonUserInfo:JSON.stringify(this.userInfo)
				}, failres => {
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});	
				}).then(res => {
					uni.setStorageSync("userInfo",this.userInfo)
					this.edit=false
				})
			},
			login(){
				if(!uni.getStorageSync("userInfo").phone){
					this.$refs.loginpopup.open()
				}else{
					
				}
			}
		}
	}
</script>

<style lang='scss' scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.wrap{
		width:92vw;
		padding:0 20rpx;
	}
	.orderList{
		display:flex;
		flex-wrap: wrap;
		.orderItem{
			width:48%;
			padding:20rpx;
			background:#E5EBFF;
			box-sizing:border-box;
			margin:5rpx;
			border-radius:10rpx;
			display:flex;
		}
		/deep/.u-badge{
			z-index:50;
		}
		.orderName{
			margin-left:20rpx;
		}
	}
	.user{
		background:#fff;
		width:100%;
		padding:10rpx 20rpx;
	}
	.userWrap{
		width:92vw;
		margin:0 auto;
	}
	.quit-login{
		background:#fff;
		width:91%;
		padding:10rpx 20rpx;
		text-align:center;
		margin:10rpx 20rpx;
		border-radius:10rpx;
	}
</style>