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

<template>
	<view class="flex-col page" :style="{ backgroundImage: 'url(' + bkgPubilcPath + ')' }">

		<image class="imgPos_1" :src="mineUrl + '/main/mh.png'" />
		<image class="imgPos_2" :src="mineUrl + '/main/hb.png'" />

		<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" mode="aspectFill" :src="publicPath + myAvatar" />
				</button>


				<view class="ml-20 flex-col items-start flex-1">
					<!-- <text class="text">微信用户</text> -->

					<input class="text" type="nickname" v-model="nickName" placeholder="请输入昵称" name="nickname"
						@blur="onUpdateNick" maxlength="10" :disabled="disabledInput"/>
					<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="mineUrl + '/main/all.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="mineUrl + '/main/dzf.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="mineUrl + '/main/dfh.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="mineUrl + '/main/dsh.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="mineUrl + '/main/ytk.png'" />
					<text class="font text_7">已退款</text>
				</view>
			</view>
		</view>
		<view class="flex-col mt-20" v-if="nickName != '未登录'">
			<view class="flex-col group_3">
				<view class="flex-row justify-between relative" @click="jump_addressList">
					<image class="image_3" :src="mineUrl + '/main/address.png'" />
					<image class="self-start image_4 image_5" :src="mineUrl + '/main/yjt.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="mineUrl + '/main/contact.png'" />
					<image class="self-start image_4 image_7" :src="mineUrl + '/main/yjt.png'" />
					<text class="font_2 pos_3">联系人列表</text>
					<view class="divider pos_4"></view>
				</view>
			</view>
			<view class="flex-col group_3">
				<view class="flex-row justify-between relative" @click="jumpToBookingOrder">
					<image class="image_33" :src="mineUrl + '/main/wdyy.png'" />
					<image class="self-start image_4 image_5" :src="mineUrl + '/main/yjt.png'" />
					<text class="font_2 text_8 pos">我 的 预 约</text>
					<view class="divider pos_2"></view>
				</view>
			
				<view class="flex-row justify-between relative" @click="gotoRentOrder">
					<image class="image_6" :src="mineUrl + '/main/rent.png'" />
					<image class="self-start image_4 image_7" :src="mineUrl + '/main/yjt.png'" />
					<text class="font_2 pos_3">我 的 租 赁</text>
					<view class="divider pos_4"></view>
				</view>
			</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="mineUrl + '/main/coupon.png'" />
						<text class="font_2">我的优惠券</text>
					</view>
					<image class="image_4 image_11" :src="mineUrl + '/main/yjt.png'" />
				</view>

				<view class="divider view_2"></view>

				<view class="flex-row justify-between group_7" @click="userLogout" v-if="nickName != '未登录'">
					<view class="flex-row self-center">
						<view class="flex-row shrink-0">
							<image class="shrink-0 image_12" :src="mineUrl + '/main/logout.png'" />
							<text class="ml-10 self-start font_3 text_10">退 出 登 录</text>
						</view>
					</view>
					<image class="self-start image_4 image_13" :src="mineUrl + '/main/yjt.png'" />
				</view>
			</view>
		</view>
		<view class="flex-col mt-20" v-if="nickName === '未登录'">
			<view class="flex-col group_3">
				<view class="flex-row justify-between relative" @click="gotoLogin">
					<image class="image_3" :src="mineUrl + '/main/logout.png'" />
					<image class="self-start image_4 image_5" :src="mineUrl + '/main/yjt.png'" />
					<text class="font_2 text_8 pos">立 即 登 陆</text>
					<!-- <view class="divider pos_2"></view> -->
				</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';
	import { mineUrl } from '../../../common/globalImagesUrl';
	import { publicPath,bkgPubilcPath } from '../../../common/globalImagesUrl';
	import { onPullDownRefresh } from '@dcloudio/uni-app';
	import { JudgeIsNullity } from '../../../common/globalFunction';

	onPullDownRefresh(async () => { //下拉刷新
		await getMyUser()
		setTimeout(() => {
			uni.stopPullDownRefresh() //停止下拉刷新
		}, 1000)
	})
	
	onShow( async ()=>{
		await getMyUser()
	})
	

	onLoad(() => {
		getFonts() //启动使从服务器下载字体
	})
	
	const gotoLogin = () => {
		uni.redirectTo({
			url: '/pages/login/login'
		})
	}

	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 gotoRentOrder = () => {
		uni.navigateTo({
			url: '/pages/clothesRent/clotherRentOrderList/clotherRentOrderList'
		})
	}

	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(mineUrl + '/main/avatar.png')
	const onChooseAvatar = (e) => {
		if(nickName.value === '未登录') {
			uni.redirectTo({
				url: '/pages/login/login'
			})
			return;
		}
		tempFile = e.detail.avatarUrl
		console.log(tempFile)
		uni.uploadFile({
			url: baseUrl + '/file/uploadFile',
			filePath: tempFile,
			name: 'file',
			formData: {
				biz: 'user_avatar'
			},
			header: {
				cookie
			},
			success: (res) => {
				myAvatar.value = JSON.parse(res.data).data
				updateMyUser()
			},
			fail: (e) => {
				console.log(e)
			}
		})
	}


	const nickName = ref('非遗雅士')
	const onUpdateNick = (e) => {
		if(nickName.value === '未登录') {
			uni.navigateTo({
				url: '/pages/login/login'
			})
			return;
		}
		if (JudgeIsNullity(nickName.value)) {
			getMyUser()
			uni.showModal({
				title: '提示',
				content: '呢称不能为空',
				showCancel: false
			})
			return 
		}
		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 disabledInput = ref(true)
	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)
		if(res.data.code === 40100) {
			nickName.value = '未登录'
			uni.showToast({
				icon: 'error',
				title: '未登录'
			})
		} else if(res.data.code === 1) {
			disabledInput.value = false
			nickName.value = res.data.data.userName
			myAvatar.value = res.data.data.userAvatar
			myPoints.value = res.data.data.points
		}
	}
</script>

<style lang="scss" scoped>
	.pos_99 {
		position: absolute;
		left: 3.75rpx;
		right: 37.5rpx;
		top: 124.69rpx;
	}
	
	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-size: 100% 100%;
		width: 100%;
		overflow-y: hidden;
		overflow-x: hidden;
		height: 100vh;
		position: relative;
	}

	.imgPos_1 {
		position: absolute;
		top: -80rpx;
		right: 0;
		opacity: 0.3;
	}

	.imgPos_2 {
		position: absolute;
		bottom: -160rpx;
		right: 0;
		opacity: 0.3;
	}

	.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_33 {
		width: 120rpx;
		height: 123.75rpx;
	}
	
	.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;
		z-index: 9;
	}

	.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>