wit-uniapp/pages/my/my.vue

<template>
	<view class="mainview">
		<view class="topimg">
			<view class="touxiang">
				<u-upload :fileList="fileList" @afterRead="afterRead" name="6" :multiple='false' :maxCount="1"
					imageMode="true" width="150" height="150">
					<image :src="src" mode="widthFix" shape="circle" 
					style="width: 150rpx;height: 150rpx;"></image>
				</u-upload>
			</view>
			<view class="Username">
				<view class="Username1">李伟 <span>您好</span>   </view>
				<view class="Username2">
					<view class="">
						您上次登录时间：
					</view>
					<view class="">
						2023-3-23 13:32:48
					</view>
				</view>
			</view>
			
			<view class="changemm">
				<view class="message">
					<view class="wdmessage">已读信息:</view>
					<view class="messagenumber">
						<u-badge type="success" max="99" :value="information1"></u-badge>
					</view>
				</view>
				<view class="message">
					<view class="wdmessage">未读信息:</view>
					<view class="messagenumber">
						<u-badge type="warning" max="99" :value="information2"></u-badge>
					</view>
				</view>
				<!-- 	<view class="setdata"> -->
				<!-- <u-icon name="setting" color="#0C1935" size="40" @click="tuichu"></u-icon> -->
				<!-- 	<img src="../../static/my/tc.png" alt=""  @click="tuichu"> -->
				<!-- </view> -->
			</view>
		</view>
		<!-- 头部结束 -->
		<view class="minndle">
			<!-- <u-grid :border="false" col="4" @click="navigations">
				<u-grid-item v-for="(listItem,listIndex) in list" :key="listIndex">
					<u-icon :customStyle="{paddingTop:20+'rpx'}" :name="listItem.name" :color="listItem.color"
						:size="55"></u-icon>
					<text class="grid-text" style="padding-top: 8px;">{{listItem.title}}</text>
				</u-grid-item>
			</u-grid> -->
			<view class="information">
				<view class="icon1">
					<u-icon name="account" size="55" color="#30D3A2" class=""></u-icon>
				</view>
				<view  style="padding-top: 8px;">
					个人信息
				</view>
			</view>
			<view class="distribute">
				<view class="icon2">
					<u-icon name="list" size="55" color="#09C700"></u-icon>
				</view>
				<view  style="padding-top: 8px;">
					我的派发
				</view>
			</view>
			<view class="task">
				<view class="icon3">
					<u-icon name="order" size="55" color="#FF9C27"></u-icon>
				</view>
				<view  style="padding-top: 8px;">我的任务</view>
			</view>
			<view class="opinions">
				<view class="icon4">
					<u-icon name="more-circle" size="55" color="#F7B717"></u-icon>
				</view>
				<view  style="padding-top: 8px;">意见建议</view>
			</view>
		</view>
		<!-- 导航栏结束 -->
		<view class="middleimgs">
			<!-- <img src="@/static/my/xinxi.png" alt=""> -->
			<u--image  mode="widthFix"  :src="srcxinxi" width="750rpx" height="200rpx"></u--image>
		</view>
		<!-- 中间图片结束 -->
		<view class="appcell">
			<u-cell-group>
				<u-cell title="修改密码" :isLink="true"  @click="changepass">
					<u-icon slot="icon" size="35" name="setting"></u-icon>
				</u-cell>
				<u-cell title="一键退出" :isLink="true" @click="tuichu">
					<u-icon slot="icon" size="35" name="close-circle"></u-icon>
				</u-cell>

			</u-cell-group>
		</view>



		<u-modal :show="showtc" content='请问您是否确定一键退出？' :showConfirmButton='true' :showCancelButton='true'
			@confirm="confirmtc" @cancel='canceltc'></u-modal>
	</view>
</template>

<script>
	import {
		Static
	} from "vue"
	export default {
		data() {
			return {
				fileList: [],
				showtc: false,
				src: require('@/static/my/tx.png'),
				srcxinxi: require('@/static/my/xinxi.png'),
				
				information1: 34,
				information2: 100,
				list: [{
						name: 'account',
						title: '个人信息',
						color: "#30D3A2"
					},
					{
						name: 'list',
						title: '我的派发',
						color: "#09C700"
					},
					{
						name: 'order',
						title: '我的任务',
						color: "#FF9C27"
					},
					{
						name: 'more-circle',
						title: '意见建议',
						color: "#F7B717"
					},

				],


			}
		},
		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参
		onLoad() {},
		//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},

		//监听页面隐藏
		onHide() {},
		//监听窗口尺寸变化
		onResize() {},
		//监听页面卸载
		onUnload() {},
		//监听用户下拉动作，一般用于下拉刷新
		onPullDownRefresh() {},


		methods: {
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				console.log('111111111111111111', lists)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			navigations(e) {
				if (e == 0) {
					uni.navigateTo({
						url: 'Personalinformation/Personalinformation'
					})
				} else if (e == 1) {
					uni.navigateTo({
						url: 'Mydistribution/Mydistribution'
					})
				} else if (e == 2) {
					uni.navigateTo({
						url: 'Mytask/Mytask'
					})
				} else if (e == 3) {
					uni.navigateTo({
						url: 'Commentssuggestions/Commentssuggestions'
					})
				}

			},
			
			changepass(){
				uni.navigateTo({
					url: 'Changepassword/Changepassword'
				})
			},
			
			tuichu() {
				this.showtc = true;
			},
			confirmtc() {
				this.showtc = false;
				switch (uni.getSystemInfoSync().platform) {
					case 'android':
						plus.runtime.quit();
												
						break;
					case 'ios':
						plus.ios.import('UIApplication').sharedApplication().performSelector('exit');
						
						break;
				}
			},
			canceltc() {
				this.showtc = false;
			},


		}
	}
</script>

<style lang="scss">
	.minndle {
		width: 750rpx;
		height: 150rpx;
		margin: 25rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		text-align: center;
	}
	.icon1{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.icon2{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.icon3{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.icon4{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.middleimgs {
		width: 750rpx;
		height: 200rpx;
	}

	.mainview {
		width: 750rpx;
		display: flex;
		flex-direction: column;
	}

	.topimg {
		width: 750rpx;
		height: 350rpx;
		display: flex;
		align-items: center;
		// background: linear-gradient(to right, #96C2FF, #5C8FFF);
		  background: url("@/static/my/my.png");
		        background-size: 100% 100%;
	}

	.touxiang {
		width: 180rpx;
		height: 180rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		img {
			width: 120rpx;
			height: 120rpx;
			cursor: pointer;
		}
	}

	.Username {
		flex-grow: 1;
		height:350rpx;
		// line-height: 150rpx;
		// font-size: 40rpx;
		// color: #fff;
		// font-weight: bold;
		display: flex;
	justify-content:center;
		flex-direction: column;
		
	}
.Username1{
	line-height: 100rpx;
	height: 100rpx;
	font-size: 40rpx;
	color: #fff;
	font-weight: bold;
	span{
		padding-left: 15rpx;
		font-size: 30rpx;
		color: #fff;
	}
}

.Username2{
	font-size: 20rpx;
	color: #333333;
}

	.changemm {
		height: 250rpx;
		width: 250rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: flex-end;
	}

	.message {
		display: flex;
		justify-content: flex-end;
		padding-right: 30rpx;
	}

	.wdmessage {
		font-size: 30rpx;
		color: #fff;
		padding-right: 10rpx;
	}

	.messagenumber {
		padding-top: 6rpx;
		width: 70rpx;
	}

	.setdata {
		padding-top: 15rpx;

		img {
			width: 50rpx;
			height: 50rpx;
		}
	}
</style>