xietaitai-shop-wx/pages/me/me.vue

<template>
	<view class="wrap">
		<!-- <image class="bg" :src="require('@/static/qus-bg.jpg')" mode=""></image> -->
		<view class="me" :style="{paddingTop: navBarTop+'px'}">
			<view class="me-avatar" @click="showform = true,maskClose=true">
				<image :src="info.headimgurl?info.headimgurl:headReplace" mode=""></image>
				<view class="">
					{{info.nickname?info.nickname:''}}
				</view>
			</view>
			<view class="me-list">
				<view class="me-list-item" v-for="item in list" @click="toUrl(item)">
					<view class="me-list-item-left">
						<view class="">
							<u-icon :name="item.icon" size="40"></u-icon>
						</view>
						<view>{{item.title}}</view>
					</view>
					<view class="">
						<u-icon name="arrow-right" size="40" color="#e0e0e0"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="showPhone" mode="bottom" :mask-close-able="false">
			<view class="login-btn" style="padding:60rpx">
				<button class="login-btn-btn" open-type="getPhoneNumber" @getphonenumber="getUserWxPhone">授权手机号</button>
			</view>
		</u-popup>
		<!-- 弹出头像 昵称 -->
		<u-popup v-model="showform" mode="bottom" :mask-close-able="maskClose">
			<view class="login-form">
				<view>
					<span>头像：</span>
					<view style="border:none">
						<button open-type="chooseAvatar" @chooseavatar='onChooseAvatar' style="padding: 0;margin: 0;">
							<image :src="imgurl" mode=""></image>
						</button>
					</view>
				</view>
				<view>
					<span>姓名：</span>
					<view>
						<input type="nickname" @blur="blurname" :placeholderStyle="'color:#999;font-size:30rpx'"
							v-model="form.nickname" placeholder="请输入姓名" :border="false" shape="circle" clearable></input>
					</view>
				</view>
				<view>
					<span>电话：</span>
					<view>
						<input :placeholderStyle="'color:#999;font-size:30rpx'"
							v-model="form.mobile" placeholder="请输入手机号" :border="false" shape="circle" clearable></input>
					</view>
				</view>
			</view>
			<view class="login-btn">
				<view class="login-btn-btn" @click="submit">提 交</view>
			</view>
		</u-popup>
		<tabbar :currentPage="2"></tabbar>
	</view>
</template>

<script>
	import {
		ROOTPATH as baseUrl
	} from "@/common/config.js"
	import {
		isNull,
		toast,
		shareInfo
	} from "@/common/util.js"
	import tabbar from '@/components/tabbar/tabbar.vue';
	export default{
		components:{
			tabbar
		},
		data() {
			return {
				navBarTop: 0,
				showPhone:false,
				info: {},
				headReplace: require('@/static/share.jpg'),
				showform: false,
				maskClose: false,
				imgurl: '',
				form: {
					nickname: '',
					mobile:''
				},
				list: [{
					title: '我的订单',
					icon:'order',
					url: '/packages/myorder/myorder',
				},{
					title: '我的积分',
					icon:'coupon',
					url: '/packages/my/score',
				},
				// {
				// 	title: '卡劵查询',
				// 	icon:'search',
				// 	url: '/packages/card/index',
				// },
				{
					title: '我的地址',
					icon:'map',
					url: '/packages/my/address',
				},{
					title: '意见反馈',
					icon:'info-circle',
					url: '/packages/my/feedback',
				}]
			}
		},
		onShareAppMessage() {
			return shareInfo
		},
		onShareTimeline() {
			return shareInfo
		},
		onLoad() {
			const MenuButton = uni.getMenuButtonBoundingClientRect()
			this.navBarTop = MenuButton.top //左侧文字与右侧胶囊对齐
		},
		onShow() {
			this.getInitUser()
		},
		methods: {
			onChooseAvatar(e) {
				console.log("e",e)
				uni.uploadFile({
					url: baseUrl + "/api/mobile/user/upload",
					filePath: e.detail.avatarUrl,
					name: 'file',
					header:{
						'Authorization' : `Bearer ${this.vuex_token}`
					},
					success: (res) => {
						uni.showToast({
							title: '上传成功',
							duration: 1000
						})
						
						this.imgurl = JSON.parse(res.data).url
						this.form.headimgurl = this.imgurl
					},
					fail(res){
						uni.showToast({
							title: '上传失败',
							duration: 1000
						})
					}
				})
			},
			// 获取昵称
			blurname(e) {
				console.log(e)
				if (e) {
					this.form.nickname = e.detail.value
				}

			},
			getUserWxPhone(res) {
				if(!res.detail.code){
					this.showPhone = false
					return
				}
				this.$u.api.getUserMobile({
					code: res.detail.code,
					iv:res.detail.iv,
					encryptedData:res.detail.encryptedData
				}).then(res => {
					this.form.mobile = res.mobile
					this.showPhone = false
					this.showform = true
				})
			},
			async getInitUser() {
				const res = await this.$u.api.user()
				this.$u.vuex('vuex_user', res.user)
				this.form = res.user
				this.imgurl = res.user.headimgurl ? res.user.headimgurl : ''
				this.info = this.$u.deepClone(res.user);
				if(isNull(res.user.mobile)){
					this.showPhone = true
				}
			},
			submit() {
				if (isNull(this.form.nickname)) {
					toast("请填写所有信息")
					return
				}
				this.$u.api.saveUser(this.form).then(res => {
					toast('更新成功')
					this.showform = false
					this.getInitUser()
				})
			},
			toUrl(item) {
				if(item.url){
					uni.navigateTo({
						url:item.url
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.wrap {
		width: 100vw;
		height: 100vh;

		// overflow: scroll;
		.bg {
			height: 100vh;
			width: 100vw;
			position: absolute;
			top: 0;
			left: 0;
		}

		.me {
			position: relative;
			height: 100vh;
			overflow: scroll;
			top: 0;
			padding-bottom: 140rpx;

			&-avatar {
				width: 100%;
				text-align: center;
				color: #960909;
				font-size: 36rpx;

				// width:173rpx;
				// height:173rpx;
				// border-radius: 173rpx;
				// margin:0 auto;
				image {
					border: 10rpx solid #dfc9b1;
					width: 173rpx;
					height: 173rpx;
					border-radius: 173rpx;
					margin-bottom: 20rpx;
				}
			}

			&-list {
				border-radius: 15rpx;
				background-color: #fff;
				box-shadow: -2px -3rpx 12px rgba(0, 0, 0, 0.1);
				margin: 70rpx 35rpx;
				padding: 30rpx;
				min-height: 750rpx;

				&-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 35rpx 10rpx;
					font-size: 28rpx;
					color: #666666;
					border-bottom: 1px solid #e0e0e0;

					& image {

						vertical-align: middle;
						margin: 0 auto
					}

					&-left {
						display: flex;
						align-items: center;

						>view {
							&:first-child {
								// width: 76rpx;
								text-align: center;
								// margin-right: 20rpx
							}


						}

						u-icon {
							margin-right: 20rpx;

						}
					}
				}
			}
		}

		.login {
			&-form {
				padding: 20rpx 60rpx;
				margin-top: 20rpx;
				padding-bottom: 120rpx;

				>view {
					margin-bottom: 30rpx;
					background-color: #fff;
					padding: 20rpx 40rpx;
					border-radius: 20rpx;
					display: flex;
					align-items: center;

					span {
						width: 120rpx;
						text-align: right;
					}

					button {
						width: 100rpx;
						height: 100rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					>view {
						border: 1px solid #999;
						border-radius: 10rpx;
						display: flex;
						width: calc(100% - 120rpx);
						padding: 10rpx 20rpx;

						input {
							width: 100%;
						}
					}

				}
			}

			&-btn {
				padding: 30rpx 60rpx;
				padding-top: 0;

				&-btn {
					box-shadow: 0.5px 3px 9px 0px rgba(235, 107, 85, 0.3);
					background: #2979ff;
					border-radius: 44rpx;
					text-align: center;
					height: 88rpx;
					color: #fff;
					line-height: 88rpx;
					font-size: 34rpx;
				}

			}
		}
	}

	
</style>