SmartBeehive/pages/my.vue

<template>
	<view class="page">
		<u-navbar is-back="false" :title="title" :border-bottom="false" :background="bgc" title-color='#000'
			title-size='36' :title-bold='true' height='45' id="navbar">
		</u-navbar>
		<view class="atv">
			<button 
			   v-if="imglist == ''" style="border: 0;outline: none;width: 220rpx;padding-left: 0rpx;height: 220rpx;border-radius: 50%;"
				type="primary reverse" open-type="chooseAvatar" @chooseavatar="getImage">
			</button>
			<button
				v-else style="border: 0;outline: none;width: 220rpx;padding-left: 0rpx;height: 220rpx;border-radius: 50%;"
				type="primary reverse" open-type="chooseAvatar" @chooseavatar="getImage">
				<image :src="imglist" mode=""></image>
			</button>
		</view>
		<view class="change">
			身份切换
		</view>
		<view class="btn_li">
			隐私政策 <view class="iconfont icon-xiangyou1"></view>
		</view>
		<view class="btn_li">
			用户协议 <view class="iconfont icon-xiangyou1"></view>
		</view>
		<view class="btn_li">
			关于我们 <view class="iconfont icon-xiangyou1"></view>
		</view>
		<view class="btn_li" @click="btnsz">
			设置 <view class="iconfont icon-xiangyou1"></view>
		</view>
		
		<tab-bar :indexs='4' style=""></tab-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: " #F4FAF8",
				},
				title: "我的",
                userobj:{},
				imglist:'',
				token:''
			}
		},
		onLoad() {
			this.getQiniuToken()
            this.getyh()
		},
		onShow() {

		},
		methods: {
			getyh() {
				this.$u.get(`app/user/userInfo`).then(res => {
					if (res.code == 200) {
						this.userobj = res.data
						this.imglist = res.data.avatar
					}
				})
			},
			btnsz(){
				uni.navigateTo({
					url:'/page_user/user_set'
				})
			},
			getImage(e) {
				let _this = this
				let math = 'static/' + _this.$u.guid(20)
				const tempFilePaths = e.detail.avatarUrl
				wx.uploadFile({
					url: 'https://up-z2.qiniup.com',
					name: 'file',
					filePath: tempFilePaths,
					formData: {
						token: _this.token,
						key: 'smartmeter/img/' + math
					},
					success: function(res) {
						let str = JSON.parse(res.data)
						console.log(str.key)
						let img = 'https://api.ccttiot.com/' + str.key
						_this.imglist = img
					}
				})
			},
			getQiniuToken() {
				this.$u.get("/common/qiniu/uploadInfo").then((res) => {
					if (res.code == 200) {
						this.token = res.token
					}
				});
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FAFDFD;
	}

	.page {
		// position: relative;
		width: 750rpx;

		.atv {
			width: 206rpx;
			height: 206rpx;
			background: #D8D8D8;
			border-radius: 50%;
			margin: 100rpx auto 0;

			image {
				width: 222rpx;
				height: 222rpx;
				border-radius: 50%;
			}

		}

		.change {
			width: 100%;
			text-align: center;
			margin-top: 38rpx;
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
		}

		.btn_li {
			margin: 38rpx auto 0;
			padding: 22rpx;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: space-between;
			width: 658rpx;
			height: 88rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			font-weight: 600;
			font-size: 32rpx;
			color: #3D3D3D;
		}


	}
</style>