lhyt_shop_applet/XCX-Shop/pages/userInfo/index.vue

<template>
	<view class="body">
		<view class="userinfo">
			<view class="heardImage">
				<view class="img">
					<view style="width: 20vw; border-radius: 50%; padding: 0;margin: 0vw; height:20vw;"
						@click="getShow">
						<image class="avatar" style="width: 20vw; height: 20vw; border-radius: 50%;"
							:src="avatarUrl==''? '../../static/heard.png' : avatarUrl ">
						</image>
					</view>
				</view>
				<view class="usercon">
					<p style="display: flex;"> <span>会员:</span> <span>{{name}}</span> </p>
					
				</view>
			</view>
			<view class="bcar_border">  
			<view class="contentBiref">
				<view style="display: flex; width: 96vw;  justify-content: space-around; margin-top: 2vw; ">
					<view class="model" @click="bindLog">
						<p>
							<image style="width: 13vw; height: 13vw; " src="../../static/bindCar.png" mode=""></image>
						</p>
						<p>绑定记录</p>
					</view>
					
					<view class="model" @click="zhihuanCar">
						<p>
							<image style="width: 13vw; height: 13vw; " src="../../static/orderlist.png" mode=""></image>
						</p>
						<p>我的订单</p>
					</view>
				</view>
				<view style="display: flex; width: 96vw;  justify-content: space-around; margin-top: 10vw; ">
					<view class="model" @click="orderList">
						<p>
							<image style="width: 13vw; height: 13vw; " src="../../static/userOrder.png" mode=""></image>
						</p>
						<p>我的询价</p>
					</view>
					<view class="model" @click="textDrive">
						<p>
							<image style="width: 13vw; height: 13vw; "  src="../../static/userYuyue.png" mode=""></image>
						</p>
						<p>试驾记录</p>
					</view>
					<view class="model" @click="maintenance">
						<p>
							<image style="width: 13vw; height: 13vw; " src="../../static/userBaoyang.png" mode=""></image>
						</p>
						<p>预约记录</p>
					</view>
				</view>
				<view style="display: flex; width: 96vw;  justify-content: space-around; margin-top: 10vw; ">
					<view class="model" @click="baodan">
						<p>
							<image style="width: 13vw; height: 13vw; "  src="../../static/baoxian.png" mode=""></image>
						</p>
						<p>保险咨询</p>
					</view>
					<view class="model" @click="replacement">
						<p>
							<image style="width: 13vw; height: 13vw; " src="../../static/zhihuanjilu.png" mode=""></image>
						</p>
						<p>置换记录</p>
					</view>
					<view class="model" @click="CarBind">
						<p>
							<image style="width: 13vw; height: 13vw; " src="../../static/userCar.png" mode=""></image>
						</p>
						<p>车辆绑定</p>
					</view>
					
				</view>
			</view>
			</view>
			
			<view class="biref">
				
				<u-popup v-model="show" mode="bottom" border-radius="20" width="500rpx" height="300px">
					<view style="padding: 2vw;">
						<view style="display: flex; margin-top: 3vw;">
							<p>
								<image style="width: 6vw;height: 6vw;" src="/static/selectIndex.png"></image>
							</p>
							<p><span style="font-size:0.8rem;margin-left: 2vw; ">泡泡猪24小时自助洗车 </span> <span
									style="font-size: 0.8rem; margin-left: 2vw;">申请</span> </p>
						</view>
						<view style="font-size: 1rem; margin-top: 3vw;"> 获取你的头像、昵称 </view>
						<view
							style="display: flex; height: 15vw; margin-top: 3vw; align-items: center; justify-content:space-between; border-top: 0.5rpx solid #eaeaea;  border-bottom: 0.5rpx solid #eaeaea;">
							<!-- <view style="display: flex; width: 26vw; justify-content: space-between; align-items: center;">
								
								 </view> -->
							<p>头像</p>
							<button class="button"
								style="width: 80vw; margin-left: 5vw; border-radius: 10px; background-color: white; border: none; padding: 0;margin: 0vw; height: 10vw;"
								open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<image class="avatar" style="width: 10vw; height: 10vw; border-radius: 10px;margin-left: -62vw;"
									:src="avatarUrl">
								</image>
							</button>
							<p>
								<image style="width: 5vw; height: 5vw; " src="../../static/danjian.png"></image>
							</p>
						</view>
						<view style="display: flex; height: 15vw; align-items: center; border-bottom: 0.5rpx solid #eaeaea;">
							<p>昵称:</p>
							<p style="margin-left: 5vw;"><input type="nickname" placeholder="请输入昵称" class="input" :value="name"
									@focus="bindblur" /></p>
						</view>
						<view
							style="display: flex; height: 24vw; align-items: center; justify-content: space-between; padding: 0 13vw;">
							<p style="width: 20vw;  border-radius: 5px; background-color: #eaeaea; height: 10vw; line-height: 10vw; text-align: center; font-size: 0.75rem;"
								@click="operate('refuse')">拒绝</p>
							<p style="width: 20vw; border-radius: 5px; background-color: #0cb70c; height: 10vw; line-height: 10vw; text-align: center; font-size: 0.75rem;"
								@click="operate('allow')">允许</p>
						</view>
					
					
					</view>
				
				</u-popup>
			</view>
		</view>
		<!-- <view style=" width: 100vw; height: 50vw; text-align: center; line-height: 50vw; ">暂无内容</view> -->
	</view>
</template>

<script>
import { vShow } from "vue"
	export default {
		data() {
			return {
				show:false,
				avatarUrl: '',
				avatar:'',
				name:''
			}
		},
		
		onLoad() {

		},
		onShow() {
			if(!this.$db.get('token')){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			}
			this.getUser()
		},
		onTabItemTap(e){
			
			
		},
		methods: {
			bindLog(){
				uni.navigateTo({
					url:'/pages/userInfo/bindlog'
				})
			},
			baodan(){
				uni.navigateTo({
					url:'/pages/userInfo/baoxian'
				})
			},
			zhihuanCar(){
				uni.navigateTo({
					url:'/pages/userInfo/Vehicle'
				})
			},
			maintenance(){
				uni.navigateTo({
					url:'/pages/userInfo/maintenance'
				})
			},
			textDrive(){
				uni.navigateTo({
					url:'/pages/userInfo/TestDrive'
				})
			},
			orderList(){
				uni.navigateTo({
					url:'/pages/userInfo/orderList'
				})
			},
			replacement(){
				uni.navigateTo({
					url:'/pages/userInfo/replacementlog'
				})
			},
			// 获取个人信息
			getUser(){
				this.$api.getUserInfo(res=>{
					if(res.code==0){
						this.getBase64ImageUrl(res.data.face)
						this.avatar=res.data.face
						this.name=res.data.name
						if(res.data.face==''){
							this.show=true
						}
					}
				})
			},
			getShow(){
			this.show=true	
			},
		onChooseAvatar(e) {
			this.base64(e.detail.avatarUrl)
			this.avatarUrl = e.detail.avatarUrl // 此处是头像的临时路径
		},
		bindblur(e) {
			this.name = e.detail.value // 获取微信昵称
		},
		// 操作是否上传头像
		operate(item) {
			this.$store.commit('getNicknameState', 1)
			if (item == 'allow') {
				// 调接口传数据
				// if(this.avatar==''){
				// 	this.avatar=this.avatarUrl
				// }
				this.$api.postupUserInfo({
					face: this.avatar,
					name: this.name
				}, res => {
					if (res.code == 0) {
						this.show = false
					}
				})
			} else {
				this.show = false
			}
		},
		//// 图片转64代码
		async base64(url, type) {
			await wx.getFileSystemManager().readFile({
					filePath: url, //选择图片返回的相对路径
					encoding: 'base64', //编码格式
					success: res => {
						this.avatar=res.data
					},
					fail: res => this.errorToast(res.msg)
				})
		},
		//把base64转换成图片
		getBase64ImageUrl(base64Url) {
			var base64Data = base64Url;
			/// 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64
			base64Data = uni.arrayBufferToBase64(uni.base64ToArrayBuffer(base64Data));
			/// 拼接请求头，data格式可以为image/png或者image/jpeg等，看需求
			this.avatarUrl = "data:image/png;base64," + base64Data;
		},
		// 车辆绑定
		CarBind(){
			uni.navigateTo({
				url:'/pages/userInfo/bindCar'
			})
		}
		}

	}
</script>

<style lang="scss" scoped>
	.button::after {
		border: none;
	}
	.body {
		width: 100vw;
		height: 100vh;
		background-color: white;

		.userinfo {
			width: 100vw;
			height: 100vh;
			background-color: white;
			overflow: hidden;
			// .bcar_border{
			// 	width: 100vw;
			// 	height: 10vh;
			// 	background-color: #f1f1f1;
			// 	.model{
			// 		width: 28vw;
			// 		height: 20vw;
			// 		display: flex;
			// 		justify-content: center;
			// 		align-items: center;
			// 		flex-direction: column;
			// 	}
			// }

			.heardImage {
				display: flex;
				align-items: center;
				height: 15vh;
				margin-top: 2vw;
				margin-left: 10vw;
				margin-bottom: 2vw;

				.img {
					width: 20vw;
					height: 20vw;
					background-color: white;
					border-radius: 50%;
				}

				.usercon {
					font-size: 1rem;
					margin-left: 4vw;
				}
			}

			.biref {
				width: 100vw;
				height: 50vw;
				.contentBiref {
					width: 96vw;
					margin-left: 2vw;
					z-index: 999;
					background-color: white;
					height: 40vw;
					border-radius: 5px;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-around;
					.model{
						width: 28vw;
						height: 20vw;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
					}
				}

			}
		}

	}
</style>