WashingCar-frontend-Ver3.0/pages/my/my.vue

<template>
	<navss :titles="titles" :color="color"></navss>
	<view class="my">
		<view class="tops">
			
		</view>
		<view class="my-header">
			<view class="icon-title">
				<view class="icon-title-lefts" @click="logins">
					<img class="left-imgs" :src="wxImg ? wxImg :'https://www.jiubaotongxue.love/image/tin.jpg'" alt="" />
				<text class="left-txt">登录</text>
				</view>
				<view class="icon-title-rights">
					<view class="flex-1">
						<view class="a">
							3
						</view>
						<view class="a">
							洗车卡
						</view>
					</view>
					<view class="flex-2" @click="Coupons">
						<view class="a">
							3
						</view>
						<view class="a">
							券
						</view>
					</view>
					<view class="flex-1" @click="GOji">
						<view class="a">
							3
						</view>
						<view class="a">
							积分
						</view>
					</view>
				</view>
			</view>
			<view class="wxname">
				<view class="topBtn">
					{{wxname ? wxname :"微信昵称"}}
				</view>
				<view class="topBtns" @click="tong">
					同步资料
				</view>
			</view>
		</view>
		<view class="my-vip" @click="huiyuan">
			<view class="vip-left">
				<view class="vip-left-txt">
					有效期：2024-5-9
				</view>
			</view>
			<view class="vip-right">
				<view class="vip-right-box">
					<view class="vip-right-txt">
						普通会员
					</view>
					<view class="vip-right-txt2">
						NO.00038165
					</view>
				</view>
				<view class="vip-right-vip">
					VIP
				</view>
				<view class="vip-right-card">
					card
				</view>
			</view>
			<view class="line1">

			</view>
			<view class="line2">

			</view>
			<view class="line3">

			</view>
			<view class="line4">

			</view>
		</view>
		<view class="neirong">
			<view class="flex-car" @click="goOrderForm">
				<img class="flex-car-img" src="https://www.jiubaotongxue.love/image/tin.jpg" alt="" />
				<text class="car-text">洗车订单</text>
			</view>
			<view class="flex-car" @click="secondaryCard">
				<img class="flex-car-img" src="https://www.jiubaotongxue.love/image/tin.jpg" alt="" />
				<text class="car-text">洗车次卡</text>
			</view>
			<view class="flex-car" @click="balance">
				<img class="flex-car-img" src="https://www.jiubaotongxue.love/image/tin.jpg" alt="" />
				<text class="car-text">我的余额</text>
			</view>
			<view class="flex-car" @click="goInformation">
				<img class="flex-car-img" src="https://www.jiubaotongxue.love/image/tin.jpg" alt="" />
				<text class="car-text">意见反馈</text>
			</view>
			<view class="flex-car">
				<img class="flex-car-img" src="https://www.jiubaotongxue.love/image/tin.jpg" alt="" />
				<text class="car-text">联系客服</text>
			</view>
			<view class="flex-car">
				<img class="flex-car-img" src="https://www.jiubaotongxue.love/image/tin.jpg" alt="" />
				<text class="car-text">关于我们</text>
			</view>

		</view>
		<view class="my-shop" @click="shop">
			商家入驻
		</view>
	</view>
	<view class="gets" v-if="wxClose===1">
		<form @submit="suBmit" name="id">
			<view class="bgn">
				
				<view class="title">
					同步微信信息
				</view>
				<img class="bgnImg" :src="wxImg" />
				<view class="inputs">
					<text>昵称</text> <input class="input" type="nickname" name="input"  placeholder="点击选择微信昵称">
				</view>
				<button class="getImgs" open-type="chooseAvatar" @chooseavatar="chooseavatar">获取头像</button>
				<view class="btnView">
					<view class="left-btnView" @click="getClose">
						取消
					</view>
					<button class="left-btnViews" form-type="submit">
						确定
					</button>
				</view>
			</view>
		</form>
	
	</view>

</template>

<script setup>
	import {ref} from 'vue'
	import {onLoad} from "@dcloudio/uni-app"
	const wxClose = ref(0)
	const wxname = ref(null)
	const wxImg = ref('https://www.jiubaotongxue.love/image/tin.jpg')
	const oldImg = ref(null)
	const goOrderForm = ()=>{
		uni.navigateTo({
			url:"/pages/orderForm/orderForm"
		})
	}
	const secondaryCard = ()=>{
		uni.navigateTo({
			url:"/pages/secondaryCard/secondaryCard"
		})
	}
	
	const Coupons = ()=>{
		uni.navigateTo({
			url:"/pages/Coupons/Coupons"
		})
	}

	const titles = ref('我的信息')
	const color = ref('#2264dc')
	onLoad(()=>{
		 wxname.value=uni.getStorageSync('wxname')
		 wxImg.value=uni.getStorageSync('wxImg')
		 titles.value = '我的信息'
		 color.value = '#2264dc'
	})
	const shop = () => {
		uni.showToast({
			icon: "none",
			title: "暂未开通"
		})
	}
	const logins = ()=>{
		uni.navigateTo({
			url:"/pages/login/login"
		})
	}
	const tong = ()=>{
		wxClose.value=1
	}
	const chooseavatar = (e)=>{
		oldImg.value=wxImg.value
		wxImg.value = e.detail.avatarUrl
		uni.setStorageSync('wxImg',oldImg.value)
	}
	const getClose = ()=>{
		wxClose.value=0
		wxImg.value=oldImg.value
		console.log(oldImg.value)
		uni.setStorageSync('wxImg',oldImg.value)
	}
	const suBmit= (e)=>{
		uni.setStorageSync('wxname',e.detail.value.input)
		uni.setStorageSync('wxImg',wxImg.value)
		wxClose.value=0
	}
	const GOji=()=>{
		uni.navigateTo({
			url:"/pages/integral/integral"
		})
	}
	const balance = ()=>{
		uni.navigateTo({
			url:"/pages/balance/balance"
		})
	}
	const huiyuan = ()=>{
		uni.navigateTo({
			url:"/pages/huiyuan/huiyuan"
		})
	}
</script>

<style lang="scss">
	.my {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #f2f2f2;
		.tops{
			width: 100%;
			height: 13%;
			background-color: #fff;
		}

		.my-header {
			width: 100%;
			height: 290rpx;
			background-color: #fff;
			.icon-title{
				width: 100%;
				height: 180rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.icon-title-lefts{
					width: 40%;
					height: 120rpx;
					margin-top: 40rpx;
					display: flex;
					line-height: 120rpx;
					margin-left: 30rpx;
					.left-imgs{
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}
					.left-txt{
						display: inline-block;
						font-size: 24rpx;
						margin-left: 20rpx;
					}
				}
				.icon-title-rights{
					// width: 58%;
					height: 150rpx;
					margin-top: 40rpx;
					margin-left: 10rpx;
					display: flex;
					justify-content: center;
					.flex-1{
						width: 120rpx;
						height: 120rpx;
						margin-left: 10rpx;
						.a{
							width: 100%;
							height: 60rpx;
							text-align: center;
							line-height: 80rpx;
						}
					}
					.flex-2{
						width: 120rpx;
						height: 120rpx;
						margin-left: 10rpx;
						border-left: 1rpx solid black;
						border-right: 1rpx solid black;
						.a{
							width: 100%;
							height: 60rpx;
							text-align: center;
							line-height: 80rpx;
						}
					}
				}
			}
			.wxname{
				width: 100%;
				height: 100rpx;
				font-size: 26rpx;
				.topBtn{
					// width: 125rpx;
					height: 40rpx;
					// background-color: #169bd5;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					box-sizing: border-box;
					padding-left: 55rpx;
				}
				.topBtns{
					width: 150rpx;
					height: 40rpx;
					background-color: #169bd5;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					line-height: 40rpx;
					text-align: center;
					margin-left: 30rpx;
					color: white;
				}
			}
		}

		.my-vip {
			position: relative;
			margin-top: -10rpx;
			width: 90%;
			margin-left: 50%;
			transform: translateX(-50%);
			height: 300rpx;
			background-color: #d1d2d6;
			border: 1rpx solid #ccc;
			display: flex;
			justify-content: space-between;
			overflow: hidden;

			.vip-left {
				position: relative;
				width: 50%;
				height: 300rpx;

				.vip-left-txt {
					position: absolute;
					bottom: 30rpx;
					left: 20rpx;
					font-size: 26rpx;
					color: white;
				}
			}

			.vip-right {
				position: relative;
				width: 50%;
				height: 300rpx;

				.vip-right-box {
					height: 50%;
					position: absolute;
					right: 10rpx;
					display: flex;
					justify-content: flex-end;
					flex-wrap: wrap;

					.vip-right-txt {
						margin-top: 25rpx;
						width: 160rpx;
						height: 55rpx;
						line-height: 55rpx;
						background-color: #ccc;
						font-size: 28rpx;
						text-align: center;
						color: white;
					}

					.vip-right-txt2 {
						font-size: 32rpx;
						color: #fff;
					}
				}

				.vip-right-vip {
					position: absolute;
					font-size: 80rpx;
					bottom: 10rpx;
					right: 30rpx;
					color: #fff;
				}

				.vip-right-card {
					position: absolute;
					font-size: 15rpx;
					bottom: 30rpx;
					right: 30rpx;
					color: #f2f2f2;
				}

			}

			.line1 {
				position: absolute;

				height: 300rpx;
				border-left: 1rpx solid #e9e9e9;
				box-shadow: 2rpx 1rpx 2rpx 0rpx #e9e9e9;
				transform: rotateZ(30deg);
				left: 180rpx;
				top: -50rpx;
			}

			.line2 {
				position: absolute;
				height: 500rpx;
				border-left: 5rpx solid #b8b8c0;
				transform: rotateZ(30deg);
				left: 221rpx;
				top: -53rpx;
				box-shadow: 0rpx 1rpx 2rpx 0rpx rgba(0, 0, 0, 0.1);
			}

			.line3 {
				position: absolute;

				height: 200rpx;
				border-left: 1rpx solid #b8b8c0;
				box-shadow: 2rpx 1rpx 2rpx 0rpx rgba(0, 0, 0, 0.1);
				transform: rotateZ(330deg);
				left: 55rpx;
				top: 45rpx;
			}

			.line4 {
				position: absolute;

				height: 110rpx;
				transform: rotateZ(330deg);
				left: 8rpx;
				bottom: -10rpx;
				border-left: 1rpx solid #d4d4d4;
				box-shadow: 2rpx 1rpx 2rpx 0rpx rgba(255, 255, 255, 0.5);
			}
		}

		.neirong {
			width: 98%;
			// height: 130rpx;
			margin-top: 25rpx;
			background-color: #fff;
			margin-left: 50%;
			transform: translateX(-50%);
			display: flex;
			flex-wrap: wrap;
			align-content: flex-start;

			.flex-car {
				width: 25%;
				// height: 150rpx;
				// background-color: seagreen;
				margin-top: 20rpx;

				.flex-car-img {
					width: 90rpx;
					height: 90rpx;
					// background-color: sienna;
					margin-left: 50%;
					transform: translateX(-50%);
					border-radius: 50%;

				}

				.car-text {
					display: block;
					font-size: 25rpx;
					width: 100%;
					text-align: center;
				}
			}
		}

		.my-shop {
			width: 93%;
			height: 300rpx;
			margin-top: 60rpx;
			background-color: #fff;
			margin-left: 50%;
			transform: translateX(-50%);
			text-align: center;
			line-height: 300rpx;
			font-size: 26rpx;
			border: 1rpx solid #ccc;
		}
	}

.gets{
	width: 100%;
	height: 100%;
	position:fixed;
	background-color: rgba(0, 0, 0, 0.3);
	.bgn{
		width: 600rpx;
		// height: 700rpx;
		background-color: #fff;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%,-50%);
		.title{
			width: 100%;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 28rpx;
		}
		.bgnImg{
			width: 120rpx;
			height: 120rpx;
			margin-top:30rpx;
			background-color: #cfcfcf;
			position: relative;
			margin-left: 50%;
			transform: translateX(-50%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		}
		.inputs{
			width: 100%;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-top: 1rpx solid #ccc;
			// border-bottom: 1rpx solid #ccc;
			font-size: 26rpx;
			margin-top: 80rpx;
			.input{
				width: 500rpx;
				height: 30rpx;
				text-align: center;
				line-height: 30rpx;
			}
			
		}
		.getImgs{
			width: 100%;
			height: 80rpx;
			// margin-top: 20rpx;
			font-size: 26rpx;
			text-align: center;
			line-height: 80rpx;
			color: #999999;
			background: none;
			border: none;
			border-bottom: 1rpx solid #ccc;
			
		}
		
		.btnView{
			width: 100%;
			height: 80rpx;
			margin-top: 50rpx;
			display: flex;
			line-height: 80rpx;
			font-size: 28rpx;
			.left-btnView{
				width: 50%;
				height: 80rpx;
				text-align: center;
			}
			.left-btnViews{
				width: 50%;
				height: 80rpx;
				text-align: center;
				background-color: #169bd5;
				color: white;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
			}
		}
	}
}
</style>