charge_miniapp/pages/my/my.vue

<template>
	<ax-body>
		<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.firmInfoName">{{userinfo.firmInfoName}}</view>
						</view>
						<view class="user-phone" v-if="userinfo.phone">{{userinfo.phone?userinfo.phone:'未获取手机'}}</view>
						<button v-if="!userinfo.phone" @getphonenumber="onGetPhoneNumber" open-type="getPhoneNumber"
							class="get-phone-number">授权并登录</button>
					</view>
				</view>
				<image src="@/static/img/Coupons.png" class="seting-icon" @click="$app.url.goto('/pages/coupons/coupons')"></image>
			</view>
			<!-- 统计卡 -->
			<view class="app-flex c-between">
				<view class="sta-card">
					<view class="value">{{userinfo.integralNum}}</view>
					<view class="name">我的积分</view>
					<image src="@/static/img/my-sta-bg01.png" mode="heightFix" class="bg"></image>
				</view>
				<view class="sta-card">
					<view class="value">{{userinfo.params.balance}}</view>
					<view class="name">可抵扣余量</view>
					<image src="@/static/img/my-sta-bg03.png" mode="heightFix" class="bg"></image>
					<view class="refund_btn" @click="refund">
						退还
					</view>
				</view>
			</view>
			<view @click="$app.url.goto('/pages/coupon-buy/coupon-buy')" class="buy">购买充电券</view>

			<!-- 常用工具 -->
			<view class="card">
				<view class="card-title">常用工具</view>
				<view class="act-wrap">
					<view class="act-item" @click="$app.url.goto('/pages/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('/pages/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('/pages/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普通用户 -->
					<view class="act-item" @click="openFilter()" v-if="userinfo.firmUserType===1">
						<image src="@/static/img/my-icon06.svg" class="icon"></image>
						<view class="name">邀请员工</view>
					</view>
				</view>
			</view>
		</view>
		<ax-popup ref="filter" position="" maskType="black" maskEnable maskClose>
			<view class="playbil-box" @click="editPlaybil">
				<image class="playbil-bg" :src="playbil_img" mode="widthFix"></image>
				<image class="playbil-qrcode" :src="qrCode" mode=""></image>
				<view class="enterprise-name">
					{{userinfo.firmInfoName}}
				</view>
				<view class="enterprise-user">{{userinfo.nickName?userinfo.nickName:'匿名用户'}}</view>
				<view class="enterprise-tips">*点击图片进行分享或保存</view>
			</view>
		</ax-popup>
		<r-canvas ref="rCanvas"></r-canvas>
		<!-- 导航栏 -->
		<app-navigation active="my"></app-navigation>
	</ax-body>
</template>

<script>
	import rCanvas from "@/components/r-canvas/r-canvas.vue"
	import $config from '@/static/js/config.js';
	export default {
		data() {
			return {
				userinfo: {},
				playbil_img: 'https://hyxhsh.oss-cn-chengdu.aliyuncs.com/63b7c68b71a69169d1b33f92/store/bdb/user/avatar/XVsEVGuCCbNv4aee36cc2f76e7050f62ebad3080ad88.jpg/1.jpg',
				qrCode: null,
			}
		},
		onShow() {
			this.getMyAccount()
		},
		mounted() {},
		methods: {
			openFilter() {
				this.$refs.filter.open();
				this.get_qrCode()
			},
			get_qrCode() {
				uni.showLoading()
				uni.request({
					url: $config.url.request + '/userApi/get-invite-qr',
					method: 'GET',
					responseType: 'arraybuffer',
					header: {
						'content-type': 'application/json',
						'token': uni.getStorageSync($config.keyname.userToken)
					},
					data: {},
					success: (res) => {
						uni.hideLoading()
						const arrayBuffer = res.data;
						const base64 = wx.arrayBufferToBase64(arrayBuffer);
						this.qrCode = 'data:image/png;base64,' + base64;
					},
					fail(err) {
						uni.showToast({
							icon: "error",
							title: '获取二维码失败' + err
						})
					}
				});
			},
			// 操作图片
			editPlaybil() {
				// console.log(this.$refs.filter);
				this.get_downloadImg()
			},
			async get_downloadImg() {
				uni.showLoading()
				this.$nextTick(async () => {
					await this.$refs.rCanvas.init({
						canvas_id: "rCanvas"
					})
					await this.$refs.rCanvas.setCanvasWidth(300)
					await this.$refs.rCanvas.setCanvasHeight(515)
					// 背景卡片
					await this.$refs.rCanvas.drawImage({
						url: this.playbil_img,
						x: 0,
						y: 30,
						w: 300,
						h: 515
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					// 二维码
					await this.$refs.rCanvas.drawImage({
						url: this.qrCode,
						x: 85,
						y: 176,
						w: 130,
						h: 130
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					//文字
					await this.$refs.rCanvas.drawText({
						text:this.userinfo.firmInfoName?this.userinfo.firmInfoName:'默认企业',
						max_width: 0,
						x: 56,
						y: 348,
						font_color: "#216ff7",
						font_size: 10
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					await this.$refs.rCanvas.drawText({
						text: this.userinfo.nickName ?this.userinfo.nickName : '匿名用户',
						max_width: 0,
						x: 122,
						y: 486,
						font_color: "#ffffff",
						font_size: 12
					}).catch(err_msg => {
						uni.showToast({
							title: err_msg,
							icon: "none"
						})
					})
					// 生成海报
					await this.$refs.rCanvas.draw((res) => {
						//res.tempFilePath：生成成功，返回base64图片
						uni.hideLoading()
						uni.showShareImageMenu({
							path: res.tempFilePath,
							success: (res) => console.log('分享成功', res),
							fail: (err) => console.error('分享失败', err),
						});
						// this.$refs.rCanvas.saveImage(res.tempFilePath)
					})
				})
			},
			refund() {
				this.$app.popup.confirm("退款按照购券记录进行逐笔退款，可能产生多笔退款到账记录，请注意查收。", "退款说明").then(confirm => {
					if (confirm) {
						this.$api.base("post", '/orderApi/refund', {}).then(res => {
							if (res.code == 0) {
								this.$app.popup.alert('退款成功!').then(() => {
									this.getMyAccount()
								});
							} else {
								this.$app.popup.alert(res.msg);
							}
						});


					}
				});;
			},
			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("post", "/userApi/getUserAccount", {}, {error:false}).then(res => {
					this.userinfo = res.accountInfo
					this.$app.storage.set('USER_INFO', res.accountInfo);
					// 识别用户是否通过分销码进入小程序
					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) {
				if (e.detail.code) {
					this.$api.base("post", '/userApi/getPhone', {
						code: e.detail.code
					}).then(res => {
						this.$app.storage.set('USER_INFO', res.userInfo);
						this.getMyAccount();
						this.get_firmId()
					});
				}

			},
		}
	}
</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>