charge_miniapp/pages/my/my.vue

<template>
	<ax-body hide-indicator-area>
		<template #title></template>
		<view class="page-background">
			<image src="@/static/img/my-bg.svg" mode="widthFix"></image>
		</view>

		<!-- 主内容 -->
		<view class="main">
			<!-- 用户信息 -->
			<view class="app-flex c-between user-card">
				<view class="app-flex middle">
					<image src="@/static/img/user-avatar.svg" class="user-avatar"></image>
					<view>
						<view class="user-name">
							<view class="user-name-text">{{ userinfo.nickName ? userinfo.nickName : '匿名' }}</view>
							<view class="enterprise-name-card" v-if="userinfo.firmName">{{ userinfo.firmName }}
							</view>
						</view>
						<view class="user-phone" v-if="userinfo.appletUserId">{{ userinfo.phone ? userinfo.phone :
							'未获取手机号' }}
						</view>
						<button v-if="!userinfo.appletUserId" @getphonenumber="onGetPhoneNumber"
							open-type="getPhoneNumber" class="get-phone-number">授权并登录</button>
					</view>
				</view>
				<view class="seting-icon-box" @click="$app.url.goto('/subPackages/coupon/coupons/coupons')">
					<image class="img-icon"
						src="https://national-motion.oss-cn-beijing.aliyuncs.com/20251230/d76e9bad8597403c9816d481aafd88d3.png">
					</image>
					<view class="tips-text">优惠券</view>
				</view>
			</view>
			<!-- 统计卡 -->
			<view class="statistics-card">
				<view class="statistics-title">我的钱包</view>
				<view class="statistics-dataInfo">
					<view class="dataInfo-left">
						<view class="left-text">我的积分</view>
						<view class="left-number">{{ userinfo.integral }}</view>
					</view>
					<view class="dataInfo-line"></view>
					<view class="dataInfo-left">
						<view class="left-text">可抵扣余量</view>
						<view class="left-number">{{ userinfo.accountBalance }}</view>
						 <!-- v-if="userinfo.accountBalance>0" -->
						<view class="left-refund-btn" @click="refund" v-if="userinfo.accountBalance>0">
							退还
						</view>
					</view>
				</view>
				<view @click="$app.url.goto('/subPackages/coupon/coupon-buy/coupon-buy')" class="buy">购买充电券</view>
			</view>
			<!-- 我的车辆 -->
			<view class="card vehicle-card" style="margin-bottom: 30rpx">
				<view class="vehicle-card-content">
					<view class="vehicle-left">
						<view class="card-title" style="padding:0;">我的车辆</view>
						<!-- 未绑定车辆 -->
						<view class="vehicle-empty" v-if="carList.length === 0" @click="goAddVehicle">
							<view class="vehicle-add-btn">
								<text class="vehicle-add-icon">+</text>
							</view>
							<view class="vehicle-add-text">添加车辆，享更多权益</view>
						</view>
						<!-- 已绑定车辆 -->
						<view class="vehicle-bound" v-else>
							<view class="vehicle-plate">
								{{ currentCar ? currentCar.licensePlate : carList[0].licensePlate }}</view>
							<view class="vehicle-manage-btn" @click="goManageVehicle">管理 <text
									class="vehicle-manage-arrow">></text></view>
						</view>
					</view>
					<image class="vehicle-car-img"
						src="https://national-motion.oss-cn-beijing.aliyuncs.com/20260318/9629c91c6a314e7f9e67af61ae14f2bd.png"
						mode="aspectFit"></image>
				</view>
			</view>
			<!-- 个人中心banner -->
			<swiper class="banner" v-if="banners.length > 0" autoplay="true" circular>
				<swiper-item v-for="(item, index) in banners" :key="index" @click="$app.url.goto(item.jumpPage)">
					<view class="swiper-item">
						<image @load="bannerLoadCompleted()" :src="item.picture" class="swiper-item-image"
							mode="widthFix">
						</image>
					</view>
				</swiper-item>
			</swiper>
			<!-- 常用工具 -->
			<view class="card">
				<view class="card-title">常用工具</view>
				<view class="act-wrap">
					<view class="act-item" @click="$app.url.goto('/subPackages/coupon/recharge-log/recharge-log')">
						<image src="@/static/img/my-icon01.svg" class="icon"></image>
						<view class="name">购券记录</view>
					</view>
					<view class="act-item" @click="$app.url.goto('/subPackages/order/order/order')">
						<image src="@/static/img/my-icon02.svg" class="icon"></image>
						<view class="name">我的订单</view>
					</view>
					<view class="act-item" @click="$app.url.goto('/subPackages/other/feedback/feedback')">
						<image src="@/static/img/my-icon03.svg" class="icon"></image>
						<view class="name">意见反馈</view>
					</view>
					<view class="act-item" @click="customerService()">
						<image src="@/static/img/my-icon04.svg" class="icon"></image>
						<view class="name">在线客服</view>
					</view>
				</view>
			</view>

			<!-- 更多功能 -->
			<view class="card">
				<view class="card-title">更多功能</view>
				<view class="act-wrap">
					<!-- <view class="act-item about">
						<image src="@/static/img/logo-small.png" class="icon"></image>
						<view class="name">关于我们</view>
					</view> -->
					<view class="act-item" @click="openPrivacyContract">
						<image src="@/static/img/my-icon05.svg" class="icon"></image>
						<view class="name">隐私条例</view>
					</view>
					<!-- firmUserType===1管理员，2普通用户 -->
					<!--  v-if="userinfo.firmId && userinfo.firmUserType === 1" -->
					<view class="act-item" @click="openFilter()" v-if="userinfo.firmId && userinfo.firmUserType === 1">
						<image src="@/static/img/my-icon06.svg" class="icon"></image>
						<view class="name">邀请员工</view>
					</view>
				</view>
			</view>
			<view style="height: 300rpx;" v-if="userinfo.appletUserId">
				<view class="logout" @click="logout">退出登录</view>
			</view>
		</view>
		<ax-popup ref="filter" position="" maskType="black" maskEnable maskClose>
			<l-painter ref="painter" isCanvasToTempFilePath @success="path = $event">
				<l-painter-view css="position:relative;">
					<l-painter-image
						src="https://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/XVsEVGuCCbNv4aee36cc2f76e7050f62ebad3080ad88.jpg/1.jpg"
						css="width:600rpx; height: 1000rpx" />
					<l-painter-qrcode :text="'https://cd.admin.zswlgz.com/v2/?frimId=' + userinfo.firmId"
						css="width:260rpx; height: 260rpx;position: absolute;top:27%;left:29%" />
					<l-painter-text
						css="position: absolute;top:594rpx;left:50%;transform:translateX(-50%);color:#216ff7;font-size:22rpx;width:60%;text-align:center;"
						align="center" :text="userinfo.firmName ? userinfo.firmName : '默认企业'">
					</l-painter-text>
					<l-painter-text css="position: absolute;top:86%;left:37%;color:#ffffff;font-size:24rpx"
						:text="userinfo.nickName ? userinfo.nickName : '匿名用户'">
					</l-painter-text>
				</l-painter-view>
			</l-painter>
			<view class="enterprise-tips" @click="savePainter">保存海报</view>
		</ax-popup>
		<!-- 导航栏 -->
		<view style="position: fixed;width: 100%;bottom:100rpx;z-index: 100;">
			<app-navigation active="my"></app-navigation>
		</view>
	</ax-body>
</template>

<script>
	import $config from '@/static/js/config.js';
	export default {
		data() {
			return {
				userinfo: {},
				banners: [],
				carList: [],
				currentCar: null,
			}
		},
		onShow() {
			this.getMyAccount()
			this.getCarList()
		},
		mounted() {
			this.getBanners()
		},
		methods: {
			openFilter() {
				this.$refs.filter.open();

			},
			// 版头加载完成
			bannerLoadCompleted() {
				this.setListHeight();
			},
			showImg(img) {
				return this.$config.url.request + img
			},
			getBanners() {
				this.$api.base("get", "/applet/v1/homePage/getBannerList/2", {}, {}).then(res => {
					this.banners = res.data
				})
			},
			savePainter() {
				this.$refs.painter.canvasToTempFilePathSync({
					fileType: "png",
					// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
					pathType: 'url',
					quality: 1,
					success: (res) => {
						console.log(res.tempFilePath);
						uni.showShareImageMenu({
							path: res.tempFilePath,
							success: () => {
								console.log('分享成功');
							},
							fail: (err) => {
								console.error('分享失败', err);
							}
						});
					},
				});
			},
			goAddVehicle() {
				this.$app.url.goto('/subPackages/other/addLicensePlates/addLicensePlates');
			},
			goManageVehicle() {
				this.$app.url.goto('/subPackages/other/addLicensePlates/addLicensePlates');
			},
			getCarList() {
				this.$api.base('get', '/applet/v1/vehicle/default', {}, {
					error: false
				}).then(res => {
					if (res && res.data) {
						// 接口返回的是默认车辆对象
						this.currentCar = res.data;
						this.carList = [res.data];
					} else {
						this.currentCar = null;
						this.carList = [];
					}
				}).catch(() => {
					this.currentCar = null;
					this.carList = [];
				});
			},
			refund() {
				this.$app.popup.confirm("退款按照购券记录进行逐笔退款，可能产生多笔退款到账记录，请注意查收。", "退款说明").then(confirm => {
					if (confirm) {
						this.$api.base("put", '/applet/v1/wft/order/refundOrder', {}).then(res => {
							if (res.code == '00000') {
								this.$app.popup.alert(res.data).then(() => {
									this.getMyAccount()
								});
							} else {
								this.$app.popup.alert(res.data);
							}
						});
					}
				});
			},
			openPrivacyContract() {
				uni.openPrivacyContract();
			},
			// 打开客服
			customerService() {
				const cs = this.$config.customerService;
				this.$app.act.customerService(cs.id, cs.url).catch(err => {
					console.log(err);
					this.$app.popup.alert('客服中心失联啦,请联系管理员!');
				});
			},
			getMyAccount() {
				// let channelUrl = 'http://192.168.110.241:9120/zs/channel/admin/'
				let channelUrl = 'https://channel-api.zonelife.cn/zs/channel/admin/'
				this.$api.base("get", "/applet/v1/user/getUserInfo", {}, {
					error: false
				}).then(res => {
					console.log(res);
					this.userinfo = res.data
					this.$app.storage.set('USER_INFO', res.data);
					// 识别用户是否通过分销码进入小程序
					if (uni.getStorageSync('ADMIN_USERID')) {
						uni.request({
							url: channelUrl + 'ums/umsAdminUser/distributionBindUser',
							method: 'POST',
							header: {
								'content-type': 'application/json'
							},
							data: {
								userId: uni.getStorageSync('USER_INFO').id,
								adminUserId: parseInt(uni.getStorageSync('ADMIN_USERID')),
							},
							success: (res) => {
								setTimeout(() => {
									this.$app.storage.remove('ADMIN_USERID')
								}, 500)
							},
							fail(err) {
								console.log(err, '----错误信息');
							}
						});
					}
				})
			},
			get_firmId() {
				if (this.$app.storage.get('FRIM_ID')) {
					this.$api.base("post", "/userApi/add-firm-user?firmId=" + parseInt(this.$app.storage.get(
						'FRIM_ID')), {}, {
						error: false
					}).then(res => {
						this.$app.popup.alert(res.msg);
						setTimeout(() => {
							this.$app.storage.remove('FRIM_ID')
						}, 500)
					}).catch(err => {
						setTimeout(() => {
							this.$app.storage.remove('FRIM_ID')
						}, 500)
					})
				}
			},
			onGetPhoneNumber(e) {
				uni.login({
					provider: 'weixin',
					success: (result) => {
						console.log(result, '微信登录');
						if (result.code) {
							if (e.detail.code) {
								this.$api.base("post", '/api/v1/auth/wx/miniapp/phone-code-login', {
									code: result.code,
									phoneCode: e.detail.code
								}).then(res => {
									console.log(res);
									uni.setStorageSync($config.keyname.accessToken, res?.data
										?.accessToken);
									uni.setStorageSync($config.keyname.refreshToken, res?.data
										?.refreshToken);
									this.$app.storage.set('USER_INFO', res.data);
									this.getMyAccount();
									this.get_firmId()
								});
							}
						}
					},
					fail: (error) => {}
				})

			},
			logout() {
				this.$app.popup.confirm("确认退出登录？").then(confirm => {
					if (confirm) {
						this.$api.base('delete', '/api/v1/auth/logout').then(() => {
							uni.removeStorageSync($config.keyname.accessToken);
							uni.removeStorageSync($config.keyname.refreshToken);
							this.$app.storage.remove('USER_INFO');
							// 跳转首页
							uni.reLaunch({
								url: '/pages/index/index'
							});
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
	@import url("my.css");

	.refund_btn {
		position: absolute;
		font-size: 14px;
		color: #fff;
		background-color: #3EB6F8;
		padding: 2px 8px;
		border-radius: 10px 0 0 10px;
		bottom: 5px;
		right: 0;
		z-index: 99;
	}
</style>