jiangchengfeiyi-xiaochengxu/pages/mine/main/main.vue

<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-row items-center group_2">
				<button class="avatar_button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar_son" :src="myAvatar" />
				</button>

				
				<view class="ml-20 flex-col items-start flex-1">
					<!-- <text class="text">微信用户</text> -->
					
						<input class= "text" type="nickname" :value="nickName" placeholder="请输入昵称" name="nickname"  @blur="onUpdateNick" />
					<text class="mt-18 font text_2">剩余积分：{{ myPoints }}</text>
				</view>
			</view>
			<view class="flex-row equal-division">
				<view class="flex-col items-center" @click="goto(0)">
					<image class="shrink-0 image_2"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FjqkEyOpY-totalorder.png" />
					<text class="font text_3">全部</text>
				</view>
				<view class="flex-col items-center ml-1"  @click="goto(1)">
					<image class="shrink-0 image_2"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FEzgKLIBS-waitproduct.png" />
					<text class="font text_5">待支付</text>
				</view>
				<view class="flex-col items-center ml-1"  @click="goto(2)">
					<image class="shrink-0 image_2"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FVWTrHegX-waitpay.png" />
					<text class="font text_4">待发货</text>
				</view>
				<view class="flex-col items-center ml-1"  @click="goto(3)">
					<image class="shrink-0 image_2"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FWAdobYmD-waitshouhou.png" />
					<text class="font text_6">待收货</text>
				</view>
				<view class="flex-col items-center ml-1"  @click="goto(4)">
					<image class="shrink-0 image_2"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FGEFKFVXw-shouhou.png" />
					<text class="font text_7">已退款</text>
				</view>
			</view>
		</view>
		<view class="flex-col mt-37">
			<view class="flex-col group_3">
				
				<view class="flex-row justify-between relative" @click="jump_addressList">
					<image class="image_3"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FSJZTOttL-address.png" />
					<image class="self-start image_4 image_5"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FwQgycnra-rush.png" />
					<text class="font_2 text_8 pos">地 址 列 表</text>
					<view class="divider pos_2"></view>
				</view>
				
				<view class="flex-row justify-between relative" @click="goToText">
					<image class="image_6"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FejVXliLM-contact.png" />
					<image class="self-start image_4 image_7"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FwQgycnra-rush.png" />
					<text class="font_2 pos_3">联系人列表</text>
					<view class="divider pos_4"></view>
				</view>
			</view>
			<view class="flex-row justify-between group_4" @click="jumpToBookingOrder">
				<view class="flex-row items-center">
					<image class="shrink-0 image_8"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FOfemexvK-booking.png" />
					<text class="font_2 text_9">我 的 预 约</text>
				</view>
				<image class="self-start image_4 image_9"
					src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FwQgycnra-rush.png" />
			</view>
			<view class="flex-col group_5">
				<view class="divider view"></view>
				
				<view class="flex-row justify-between items-center group_6" @click="jumpToMyCoupon">
					<view class="flex-row items-center">
						<image class="shrink-0 image_10"
							src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FqihgypDY-coupon.png" />
						<text class="font_2">我的优惠券</text>
					</view>
					<image class="image_4 image_11"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FwQgycnra-rush.png" />
				</view>
				
				<view class="divider view_2"></view>
				
				<view class="flex-row justify-between group_7" @click="userLogout">
					<view class="flex-row self-center">
						<view class="flex-row shrink-0">
							<image class="shrink-0 image_12"
								src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FlGcdVAji-setting.png" />
							<text class="ml-10 self-start font_3 text_10">退 出 登 录</text>
						</view>
					</view>
					<image class="self-start image_4 image_13"
						src="https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FwQgycnra-rush.png" />
				</view>
				
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	onMounted,
	ref
} from 'vue';
import {
	onShow,
	onLoad
} from "@dcloudio/uni-app";
import { baseUrl } from '../../../api/request';

import { getFonts } from '../../../common/globalFont';

onLoad(() => {
	getFonts() //启动使从服务器下载字体
})

onMounted(() => {
	getMyUser()
})

const goToText = () => { //跳转到联系人信息
	uni.navigateTo({
		url: '/pages/mine/Contact/testContact'
	})
}
const goTo = ()=>{  //跳转到预约
	uni.navigateTo({
		url: '/pages/mine/bookings/booking'
	})
}
const goto = (tab) => {
	uni.navigateTo({
		url: '/pages/my-order/myOrderList/myOrderList?status=' + tab
	})
}

const jumpToBookingOrder = () => {
	uni.navigateTo({
		url: '/pages/book/photoProductsOrderDetail/photoProductsOrderDetail'
	})
}

const jumpToMyCoupon = () => {
	uni.navigateTo({
		url: '/pages/coupon/MyCoupon/MyCoupon'
	})
}

const jump_addressList = () => {
	uni.navigateTo({
		url: '/pages/mine/addressList/addressList'
	})
}
const cookie = wx.getStorageSync('cookie')



const logout = async () => {
	const res = await uni.request({
		url: baseUrl + '/user/mini/logout',
		method: 'POST',
		header: {
			cookie
		}
	})
}


const userLogout = () => {
	uni.showModal({
		title: '提示',
		content: '您确定要退出登录吗？',
		success: (res) => {
			if (res.confirm) {
				logout()
				uni.showToast({
					title: '退出成功'
				})
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}
		}
	})
}


let tempFile = ''
const myAvatar = ref('')
const onChooseAvatar = (e) => {
	tempFile = e.detail.avatarUrl
	console.log(tempFile)
	uni.uploadFile({
		url: baseUrl + '/file/upload/single',
		filePath: tempFile,
		name: 'file',
		header: { 
			cookie
		},
		success: (res) => {
			myAvatar.value = JSON.parse(res.data).data.url
			console.log(myAvatar.value)
			updateMyUser()
		},
		fail: (e) => {
			console.log(e)
		}
	})
}


const nickName = ref('')
const onUpdateNick = (e) => {
	nickName.value = e.detail.value
	updateMyUser()
}


const updateMyUser = async () => {
	const res = await uni.request({
		url: baseUrl + '/user/update/my',
		method: 'POST',
		header: {
			cookie
		},
		data: {
			userName: nickName.value,
			userAvatar: myAvatar.value
		}
	})
	console.log(res.data.data)
}

const myPoints = ref(0)
const getMyUser = async () => {
	const res = await uni.request({
		url: baseUrl + '/user/get/login',
		method: 'GET',
		header: {
			cookie
		}
	})
	console.log(res.data.data)
	nickName.value = res.data.data.userName
	myAvatar.value = res.data.data.userAvatar
	myPoints.value = res.data.data.points
}



</script>

<style lang="scss" scoped>
	button{padding: 0;margin: 0;}
	button::after{ border: none; }

	.ml-1 {
		margin-left: 1.88rpx;
	}

	.mt-37 {
		margin-top: 69.38rpx;
	}

	.page {
		padding: 100rpx 0 211.88rpx;
		background-color: #ffffff00;
		background-image: url('https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FQfLHXSAU-feiyigongfangbeijin.png');
		background-size: 100% 100%;
		width: 100%;
		overflow-y: hidden;
		overflow-x: hidden;
		height: 100vh;
	}

	.group {
		padding: 0 7.5rpx;
	}

	.group_2 {
		margin: 0 30rpx;
		padding: 0 7.5rpx 37.5rpx;
		border-bottom: solid 0.94rpx #aeaeae;
	}

	.image {
		border-radius: 50%;
		width: 150rpx;
		height: 150rpx;
	}
	.avatar_button {
		padding: 0;
		height: 150rpx;
		width: 150rpx;
		border-radius: 50%;
		background-color: #fff;
	}
	.avatar_son {
		border-radius: 50%;
		width: 150rpx;
		height: 150rpx;
	}
	
	.text {
		color: #000000;
		font-size: 40rpx;
		font-family: FangZhengFonts;
		line-height: 40.61rpx;
	}

	.font {
		font-size: 28.13rpx;
		font-family: FangZhengFonts;
		line-height: 27.02rpx;
		color: #000000;
	}

	.text_2 {
		margin-left: 7.5rpx;
		font-size: 30rpx;
		line-height: 27.9rpx;
	}

	.equal-division {
		margin-right: 5.63rpx;
	}

	.image_2 {
		width: 144rpx;
		height: 144rpx;
	}

	.text_3 {
		margin-top: -7.5rpx;
	}

	.text_5 {
		margin-top: -7.5rpx;
	}

	.text_4 {
		margin-top: -7.5rpx;
	}

	.text_6 {
		margin-top: -7.5rpx;
	}

	.text_7 {
		margin-top: -7.5rpx;
	}

	.group_3 {
		padding: 0 35.63rpx;
	}

	.image_3 {
		width: 120rpx;
		height: 123.75rpx;
	}

	.image_4 {
		width: 39.38rpx;
		height: 41.25rpx;
	}

	.image_5 {
		margin-right: 31.88rpx;
		margin-top: 52.5rpx;
	}

	.font_2 {
		font-size: 37.5rpx;
		font-family: FangZhengFonts;
		line-height: 36.47rpx;
		color: #000000;
	}

	.text_8 {
		line-height: 35.74rpx;
	}

	.pos {
		position: absolute;
		left: 121.76rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.divider {
		background-color: #aeaeae;
		height: 0.94rpx;
	}

	.pos_2 {
		position: absolute;
		left: 3.75rpx;
		right: 37.5rpx;
		top: 117.19rpx;
	}

	.image_6 {
		width: 120rpx;
		height: 125.63rpx;
	}

	.image_7 {
		margin-right: 31.88rpx;
		margin-top: 52.5rpx;
	}

	.pos_3 {
		position: absolute;
		left: 116.72rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.pos_4 {
		position: absolute;
		left: 3.75rpx;
		right: 37.5rpx;
		top: 124.69rpx;
	}

	.group_4 {
		margin-top: 4rpx;
		padding: 0 28.13rpx 11.25rpx;
	}

	.image_8 {
		width: 133.13rpx;
		height: 114.38rpx;
	}

	.text_9 {
		padding-top: 20rpx;
		margin-left: -7.5rpx;
		line-height: 33.99rpx;
	}

	.image_9 {
		margin-right: 41.25rpx;
		margin-top: 45.5rpx;
	}

	.group_5 {
		padding: 0 39.38rpx;
	}

	.view {
		margin-right: 33.75rpx;
	}

	.group_6 {
		padding: 22.5rpx 0 7.5rpx;
	}

	.image_10 {
		width: 118.13rpx;
		height: 101.25rpx;
	}

	.image_11 {
		margin-right: 28.13rpx;
	}

	.view_2 {
		margin-right: 31.88rpx;
	}

	.group_7 {
		padding: 28.13rpx 7.5rpx 0;
	}

	.image_12 {
		width: 91.88rpx;
		height: 91.88rpx;
	}

	.font_3 {
		font-size: 37.5rpx;
		font-family: FangZhengFonts;
		line-height: 30.47rpx;
		color: #000000;
	}

	.text_10 {
		margin-top: 26.25rpx;
	}

	.text_11 {
		margin-top: 22.5rpx;
	}

	.image_13 {
		margin-right: 20.63rpx;
		margin-top: 16.88rpx;
	}

	@import url(../../../common/css/global.css);
</style>