lanan-app/pages/my/my.vue

<template>
	<view class="content">
		<view class="c-top">
			<view style="width: 10%; height: 1px;"></view>
			<view class="X-title">个人中心</view>
			<view style="width: 10%; height: 1px;"></view>
		</view>
		<view class="ail">
			<view style="display: flex; align-items: center; margin-bottom: 20px;">
				<view class="touxiang">
					<u-upload :fileList="fileList6" @afterRead="afterRead" @delete="deletePic" name="6" multiple
						:maxCount="1" width="60" height="60">
						<image src="http://www.nuoyunr.com/lananRsc/detection/touxiang.png" class="tximg" mode=""
							v-if="!userinfo.avatar"></image>
						<image :src=" baseUrl +userinfo.avatar  " class="tximg" mode="" v-if="userinfo.avatar"></image>
					</u-upload>
				</view>

				<view class="c-title" v-if="!userinfo" @click="gologin">立即登录</view>

				<view class="c-title" v-else>
					<view style="display: flex; align-items: center;">

						<text>{{userinfo.realName || '用户昵称'}}</text>
						<uni-icons style="margin-left: 5px;" type="compose" color="#ffffff" size="20"
							@click="show = true"></uni-icons>
					</view>

				</view>

			</view>

			<view class="bai-box">
				<view class="b-title">我的订单</view>
				<view class="sige">
					<view class="s-box" @click="goorder(1)">
						<view class="simg">
							<!-- <image src="http://www.nuoyunr.com/lananRsc/detection/dfk.png" mode=""></image> -->
							<u-icon name="car-fill" color="#133490" size="28"></u-icon>
						</view>
						<view class="zi">救援中</view>
					</view>
					<view class="s-box" @click="goorder(2)">
						<view class="simg">
							<!-- <image src="http://www.nuoyunr.com/lananRsc/detection/yfk.png" mode=""></image> -->
							<u-icon name="bag-fill" color="#133490" size="28"></u-icon>
						</view>
						<view class="zi">待支付</view>
					</view>
					<view class="s-box" @click="goorder(3)">
						<view class="simg">
							<!-- <image src="http://www.nuoyunr.com/lananRsc/detection/ywc.png" mode=""></image> -->
							<u-icon name="lock-opened-fill" color="#133490" size="28"></u-icon>
						</view>
						<view class="zi">待取车</view>
					</view>
					<view class="s-box" @click="goorder(4)">
						<view class="simg">
							<!-- <image src="http://www.nuoyunr.com/lananRsc/detection/qbdd.png" mode=""></image> -->
							<u-icon name="order" color="#133490" size="28"></u-icon>
						</view>
						<view class="zi">待评价</view>
					</view>
				</view>
			</view>

			<view class="dai-box">
				<view class="vinput" @click="gogogog()">
					<view class="dix">
						<view class="d-img">
							<image src="https://www.nuoyunr.com/lananRsc/rescue/carManage.png" mode=""></image>
						</view>
						<view class="zq">车辆管理</view>
					</view>
					<view class="">
						<uni-icons type="right" size="18" color="#AAAAAA"></uni-icons>
					</view>
				</view>
				<view class="vinput" @click="gocarlist()">
					<view class="dix">
						<view class="d-img">
							<image src="https://www.nuoyunr.com/lananRsc/rescue/carManage.png" mode=""></image>
						</view>
						<view class="zq">扣车管理</view>
					</view>
					<view class="">
						<uni-icons type="right" size="18" color="#AAAAAA"></uni-icons>
					</view>
				</view>
				<view class="vinput" @click="gosj()">
					<view class="dix">
						<view class="d-img">
							<image src="https://www.nuoyunr.com/lananRsc/rescue/statistics.png" mode=""></image>
						</view>
						<view class="zq">数据统计</view>
					</view>
					<view class="">
						<uni-icons type="right" size="18" color="#AAAAAA"></uni-icons>
					</view>
				</view>
				<view class="vinput" @click="dialogToggle()">
					<view class="dix">
						<view class="d-img">
							<image src="http://www.nuoyunr.com/lananRsc/detection/xtsz.png" mode=""></image>
						</view>
						<view class="zq">退出登录</view>
					</view>
					<view class="">
						<uni-icons type="right" size="18" color="#AAAAAA"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<!-- <uni-popup ref="inputDialog" type="dialog">
						<uni-popup-dialog ref="inputClose"  mode="input" title="修改昵称" value=""
							placeholder="请输入内容" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup> -->
		<u-modal :show="show" :title="title" :showCancelButton="true" @cancel="show = false" :buttonReverse="true"
			@confirm="confirms" ref="uModal" :asyncClose="true">
			<view class="slot-content">
				<u--input placeholder="请输入内容" border="surround" v-model="realName" @change="change"></u--input>
			</view>
		</u-modal>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="您确认退出吗"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>

		<view style="width: 100%; height: 50px;"></view>
		<tabBar :msg="msg"></tabBar>
	</view>
</template>

<script>
	import request from '../../utils/request'
	import {
		getToken
	} from '@/utils/auth'
	import config from '@/config'
	import upload from '@/utils/upload.js'
	import tabBar from '../../components/tabBar/tabBar.vue'
	export default {
		data() {
			return {
				show: false,
				title: '修改昵称',
				indicatorDots: false,
				openRz: "0",
				autoplay: true,
				interval: 5000,
				duration: 100,
				msgType: 'success',
				realName: '',
				userinfo: {},
				carlist: [],
				fileList6: [],
				carobj: {
					nextInspectionDate: '',
					nextMaintenanceDate: ''
				},
				msg: '4',
				value: '',
				baseUrl: this.$baseUrl
			}
		},
		mounted() {

		},
		onShow() {
			console.log('what?', uni.getStorageSync('userInfo'));
			this.userinfo = uni.getStorageSync('userInfo')

			// this.getmy()
			// this.getcarlist()
		},
		components: {
			tabBar,
		},
		methods: {
			change(e) {
				console.log('change', e);
			},
			dialogInputConfirm(val) {
				console.log(val);
				this.realName = val
				this.updateProfile()
				this.$refs.inputDialog.close()
			},

			dialogToggle() {
				this.$refs.alertDialog.open()
			},
			inputDialogToggle() {
				console.log('?');
				this.$refs.inputDialog.open()
			},

			confirms() {
				this.updateProfile()
				this.show = false;
			},

			async getUserinfo() {
				await request({
					url: '/getAppInfo',
					method: 'get',
				}).then((res) => {
					if (res.code == 200) {
						this.userinfo = res.user
						uni.setStorageSync('userInfo', res.user)
					}

				})
			},
			async getcarlist() {
				if (!getToken()) {
					return
				}
				const res = await request({
					url: '/appInspection/userOwn/getCars',
					method: 'get',
				})

				this.carlist = res.data
				console.log(this.carlist);
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,

					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				console.log(url);
				upload({
					url: '/common/upload',
					filePath: url,
				}).then((res) => {

					console.log(res.fileName);
					this.onChooseavatar(res.fileName)
					// this.releasebox.imageList.push(res.fileName)
					// console.log(this.releasebox.imageList);
				})

			},
			// 头像选择与上传
			onChooseavatar(e) {
				uni.uploadFile({
					url: this.baseUrl + '/system/user/profile/avatar',
					filePath: e,
					name: 'avatarfile',
					header: {
						Authorization: 'Bearer ' + getToken()
					},
					success: (uploadFileRes) => {
						console.log(uploadFileRes);
						if (uploadFileRes.statusCode == 200) {
							this.getUserinfo()
						}
					}
				});
			},
			// 修改昵称
			async updateProfile() {
				if (this.realName == "") {
					return uni.showToast({
						icon: 'error',
						title: '请填写昵称'
					})
				}
				const res = await request({
					method: 'PUT',
					url: '/system/user/profile/updateNickName',
					data: {
						realName: this.realName
					}
				})
				if (res.code == 200) {
					uni.showToast({
						title: '昵称修改成功'
					})
					this.getUserinfo()
				}
			},
			gogogog() {
				uni.navigateTo({
					url: '/pages/my/carManage'
				})
			},
			gosj() {
				uni.navigateTo({
					url: '/pages/my/StatisticsInfo'
				})
			},
			// 退出登陆
			outoflogin() {
				uni.clearStorageSync();
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},

			async getmy() {
				if (!getToken()) {
					return
				}
				let res = await request({
					url: '/getAppInfo',
					method: 'get',
				})
				console.log('个人信息', res);
				this.userinfo = res.user
				this.realName = res.user.realName
				this.openRz = res.openRz
				let carres = await request({
					url: '/system/userCar/getUserCar',
					method: 'get',
				})
				this.carobj = carres.data
				console.log('车辆信息', this.carobj);
			},
			goorder(id) {
				uni.navigateTo({
					url: '/pages/rescue/historylist?id=' + id
				})
			},
			gocarlist() {
				uni.navigateTo({
					url: '/pages/my/carlist'
				})
			},
			goshang() {
				uni.navigateTo({
					url: '/pages/ruzhu/ruzhu'
				})
			},
			gologin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			gowei() {
				uni.navigateTo({
					url: '/pages/contract/contract'
				})
			},
			//去收藏
			gocollect() {
				uni.navigateTo({
					url: '/pages/detection/my-collect'
				})
			},
			gocarinfo(id) {
				uni.navigateTo({
					url: '/pages/detection/my-carinfo?id=' + id
				})
			},
			//行驶证
			gousers() {
				console.log('11');
				uni.navigateTo({
					url: '/pages/detection/my-user'
				})
			},
			//身份证
			gosfz() {
				if (this.userinfo.idCard != null) {
					uni.showToast({
						title: '已上传身份证'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/detection/my-card'
				})
			},
			//我的优惠券
			goyhq() {
				uni.navigateTo({
					url: '/pages/detection/my-coupon'
				})
			},
			//vip
			govip() {
				uni.navigateTo({
					url: '/pages/detection/my-vip'
				})
			},
			//

			dialogConfirm() {
				console.log('点击确认')
				this.outoflogin()
				this.$refs.alertDialog.close()
			},
			dialogClose() {
				this.$refs.alertDialog.close()

			},

		}
	}
</script>

<style lang="scss" scoped>
	.aa-box {
		margin-top: 15px;
		width: 100%;
		height: 152px;
		background-color: white;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 20px;
		// display: flex;
		// align-items: center;
		// justify-content: center;
	}

	.swiper {
		height: 170px;
	}

	.content {
		width: 100%;
		height: calc(100vh);
		background: linear-gradient(180deg, #0d728d 0%, rgba(13, 46, 141, 0) 100%);

		// background: url('http://www.nuoyunr.com/lananRsc/jcbjt.png') center no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding-top: 10%;
	}

	.c-top {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		// background-color: white;
	}

	.c-title {
		width: 50%;
		font-size: 18px;
		color: white;
		font-weight: bold;
	}

	.X-title {

		font-size: 18px;
		color: white;
		font-weight: bold;
	}

	.sbai {
		display: flex;
		align-items: center;
		font-size: 14px;
		color: white;
		font-weight: bold;
		margin-top: 5px;

		image {
			width: 17px;
			height: 17px;
			margin-right: 5px;
		}
	}

	.on-input {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.t-sb {
		width: 50%;
		display: flex;
		align-items: center;

	}

	.xhui {
		color: #D9D9D9;
		font-size: 16px;
	}

	.dix {
		display: flex;
		align-items: center;
	}

	.dixx {
		display: flex;
		align-items: center;
		margin-top: 10px;
	}

	.touxiang {
		width: 60px;
		height: 60px;

		border-radius: 50%;
		overflow: hidden;
		border: 2px solid #FFFFFF;
		margin: 0px 10px;
		margin-top: 0px;
		margin-right: 15px;

	}

	.tximg {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}

	.ail {
		box-sizing: border-box;
		padding: 15px;
		padding-top: 0px;
	}

	.top-xia {
		width: 100%;
		height: 50px;
		border-radius: 8px;
		background: linear-gradient(180deg, #373737 0%, #070707 100%);
		// background: linear-gradient(180deg, #F0DFCB 0%, #E6BC97 100%);
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.top-left {
		width: 15%;
		height: 100%;
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;

		.imgtop {
			width: 30px;
			height: 30px;

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

	.top-right {
		width: 85%;
		height: 100%;
		border-radius: 8px;
		background: linear-gradient(180deg, #F0DFCB 0%, #E6BC97 100%);
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		align-items: center;
		padding: 0px 15px;
	}

	.hai {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.zong {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		text-align: center;
		background-color: #373737;
	}

	.gx {
		font-size: 13px;
		font-weight: 400;
		color: #835530;
	}

	.bai-box {
		box-sizing: border-box;
		padding: 15px;
		background-color: white;
		border-radius: 8px;
		margin-top: 15px;
	}

	.dai-box {
		box-sizing: border-box;
		padding: 15px;
		border-radius: 8px;
		margin-top: 15px;
		background: white;
		box-shadow: 1px 1px 3px 1px #6b6b6b;
	}

	.b-title {
		font-size: 16px;
		font-weight: 600;
		color: #333333;

	}

	.sige {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
	}

	.s-box {
		width: 25%;
		text-align: center;
	}

	.zi {
		margin-top: 5px;
		font-size: 13px;
		font-weight: 400;
		color: #333333;
	}

	.simg {
		width: 26px;
		height: 26px;
		margin: 0 auto;

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

	.x-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #EEEEEE;
		box-sizing: border-box;
		padding-bottom: 10px;
	}

	.x-left {
		display: flex;
		align-items: center;
	}

	.chebiao {
		width: 70px;
		height: 70px;
		margin-right: 10px;

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

	.dh-title {
		font-size: 20px;
		font-weight: 400;
		color: #333333;
		line-height: 20px;
		margin-bottom: 15px;
	}

	.xh-title {
		font-size: 15px;
		font-weight: 400;
		color: #666666;
		line-height: 15px;
	}

	.x-right {
		display: flex;
		align-items: center;
	}

	.x-xia {
		margin-top: 15px;
	}

	.x-icon {
		width: 18px;
		height: 18px;
		margin-right: 5px;

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

	.vinput {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #EEEEEE;
		padding-bottom: 10px;
		margin-top: 10px;
	}

	.d-img {
		width: 18px;
		height: 18px;
		margin-right: 10px;

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

	.zq {
		font-size: 16px;
		font-weight: 400;
		color: #333333;
	}

	.vipimg {
		width: 86px;
		height: 24px;
		margin-left: 10px;

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

	.avatar-wrapper {
		height: 100%;
		height: 100%;
		margin: 0;
		background-color: 0;
		background: 0;
		padding: 0;
		border-radius: 0;
		border-radius: 0;
		border: 0;
		overflow: hidden;
	}

	.avatar-wrapper::after {
		border: none;
	}

	.wdadada {
		width: 100%;
		text-align: center;
		margin-top: 40px;
		font-size: 30px;
	}
</style>