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">{{userinfo.nickName?userinfo.nickName:'匿名'}}</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/seting.svg" class="seting-icon"></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>
					
				</view>
			</view>
		</view>
		
		<!-- 导航栏 -->
		<app-navigation active="my"></app-navigation>
	</ax-body>
</template>

<script>
	export default {
		data() {
			return {
				userinfo:{}
			}
		},
		onShow() {
			this.getMyAccount()
		},
		methods: {
			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(){
				this.$api.base("post","/userApi/getUserAccount",{},{}).then(res=>{
					this.userinfo = res.accountInfo
				})
			},
			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();
					});
				}
				
			},
		}
	}
</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>