BRS1.0/pages/individual/index.vue

<template>
	<view class="app-content">
		<view class="header">
			<view class="log" @tap="clickOrder"></view>{{ navname }}
			<view class="up">完成</view>
		</view>
		<view class="cont">
			<view class="photograph">
				<!-- <view class="log"  @click="clk(0)"></view> -->
				<!-- <image :src="urls[0]" @click="clk(0)"></image>
        <image :src="urls[1]" @click="clk(1)"></image> -->
				<!-- <button @click="clk(0)">按钮触发</button> -->
				<avatar selWidth="200px" selHeight="400upx" @upload="myUpload" :avatarSrc="url"
					avatarStyle="width: 200upx; height: 200upx; border-radius: 100%;"></avatar>
			</view>
		</view>
		<view class="content">
			<view class="list">
				<p>名称</p>
				<input class="input" name="yonghuming" type="text" value=""
					placeholder-style="font-size:.8125rem;color:rgb(197, 197, 197);" placeholder="请输入名称" />
			</view>
			<view class="list">
				<p>工号</p>
				<input class="input" name="yonghuming" type="text" value=""
					placeholder-style="font-size:.8125rem;color:rgb(197, 197, 197);" placeholder="请输入工号" />
			</view>
		</view>
		<view class="butele" @tap="loginOut">退出登录</view>
	</view>
</template>
<script>
	import Nav from '../../components/header/nav.vue'
	import avatar from "../../components/yq-avatar/yq-avatar.vue";
	export default {
		data() {
			return {
				navname: '个人信息',
				url: []
			}
		},
		created(option) {},
		onLoad() {},
		onUnload() {},
		onShow() {},
		mounted() {},
		components: {
			Nav,
			avatar
		},
		methods: {
			loginOut(){
				this.$storage.clear()
				uni.redirectTo({
					url: "/pages/login/index"
				})
			},
			clickOrder() {
				uni.switchTab({
					url: "/pages/mypage/index"
				})
			},
			myUpload(rsp) {
				this.$set(this.urls, rsp.index, rsp.path);
			},
			clk(index) {
				this.$refs.avatar.fChooseImg(index, {
					selWidth: "300upx",
					selHeight: "300upx",
					expWidth: '260upx',
					expHeight: '260upx'
				});
			},
			myUpload(rsp) {
				this.url = rsp.path; //更新头像方式一
				//rsp.avatar.imgSrc = rsp.path; //更新头像方式二
			}
		},
	}
</script>
<style lang="scss" scoped>
	.app-content {
		>.header {
			width: 100%;
			height: 4.375rem;
			display: flex;
			justify-content: center;
			align-items: center;
			// background: rgba(49,85,99,1);
			color: rgb(16, 17, 22);
			font-family: Noto Sans SC;
			font-size: 1rem;
			position: relative;

			>.log {
				width: .375rem;
				height: .75rem;
				font-size: .75rem;
				position: absolute;
				left: 1.5rem;
				background: url('../../static/ico@1x.png') no-repeat;
				background-size: 100% 100%;
			}

			>.up {
				position: absolute;
				right: 1.5rem;
				color: rgb(37, 121, 160);
				font-family: Noto Sans SC;
				font-size: .875rem;
				font-weight: 500;
			}
		}

		>.cont {
			>.photograph {
				width: 6rem;
				height: 6rem;
				background: rgb(197, 207, 211);
				// background: red;
				border-radius: 50%;
				margin: 0 auto;
				margin-top: .625rem;
				display: flex;
				align-items: center;
				justify-content: center;

				>.log {
					width: 1.75rem;
					height: 1.75rem;
					background: url('../../static/shi.png') no-repeat;
					background-size: 100% 100%;
				}
			}
		}

		>.content {
			margin-left: 1.5rem;
			margin-top: 2.125rem;
			margin-bottom: 3rem;

			>.list {
				height: 3.375rem;
				display: flex;
				align-items: center;
				border-bottom: 1px solid rgb(238, 238, 238);

				>p {
					color: rgb(0, 0, 0);
					font-family: Noto Sans SC;
					font-size: .8125rem;
					font-weight: 500;
					margin-right: 2.1875rem;
				}
			}
		}

		>.butele {
			width: 20.5625rem;
			height: 2.75rem;
			background: linear-gradient(165.96deg, rgba(248.17, 101.23, 53.02, 1) -34%, rgba(231.09, 13.66, 13.66, 1) 166%);
			border-radius: 4px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			color: rgb(255, 255, 255);
			font-family: Noto Sans SC;
			font-size: 1rem;
			font-weight: 700;
		}
	}
</style>