oil-station/gasStation-uni/pages/my/my.vue

<template>
	<view class="content">
		<view class="container">
			<view class="my-header">
				<view class="my-text">个人中心</view>
			</view>
			<!-- 顶部区域 -->
			<view class="my-top">
				<view class="dis-box">
					<view class="dis">
						<view class="touxiang" @click="goSetup">
							<image v-if="user.avatar!='' && user.avatar!=null && user.avatar!=undefined"
								:src="baseUrl + user.avatar" mode=""></image>
							<image v-else src="../../static/imgs/myx.png" mode=""></image>
						</view>
						<view class="">
							<view class="user-tel" @click="goSetup">{{user.mobile}}</view>
							<view class="user-name" @click="gorefuel">蓝鲸加油站（总站）<uni-icons type="right" color="#c1c1ff"
									size="12"></uni-icons> </view>
						</view>
					</view>
					<view class="vipnber" @click="govip()">会员等级 <uni-icons type="right" color="#ffffff"
							size="16"></uni-icons></view>
				</view>
				<view class="my-top-box">
					<view class="jg-box" @click="goMony()">
						<view class="jg-box-title">储值余额</view>
						<view class="jg-box-nmb">{{cardBalance || 0 }}元</view>
					</view>
					<text style="color: #999999;">|</text>
					<view class="jg-box" @click="goOil()">
						<view class="jg-box-title">囤油升数</view>
						<view class="jg-box-nmb">{{refuelMoney[0].incomeLitres || 0 }}L</view>
					</view>

					<text style="color: #999999;">|</text>
					<view class="jg-box" @click="toCoupons">
						<view class="jg-box-title">卡券</view>
						<view class="jg-box-nmb">{{cardsList.length || 0 }}</view>
					</view>
					<text style="color: #999999;">|</text>
					<view class="jg-box" style="border: none;" @click="goIntegral()">
						<view class="jg-box-title">我的积分</view>
						<view class="jg-box-nmb">{{myPoints || 0 }}</view>
					</view>
				</view>
			</view>
			<view class="my-top-box" style="margin-top: 45px;">
				<view class="centenr-sx" @click="goMyOrder(0)">
					<view class="centenr-img">
						<image src="../../static/my/dingdan.png" mode=""></image>
					</view>
					<view class="centenr-size">
						我的订单
					</view>
				</view>


				<view class="centenr-sx" @click="goMyOrder(1)">
					<view class="centenr-img">
						<image src="../../static/my/dsy.png" mode=""></image>
					</view>
					<view class="centenr-size">
						待使用
					</view>
				</view>

				<view class="centenr-sx" @click="goMyOrder(2)">
					<view class="centenr-img">
						<image src="../../static/my/ywc.png" mode=""></image>
					</view>
					<view class="centenr-size">
						已完成
					</view>
				</view>
				<view class="centenr-sx" @click="goMyOrder(3)">
					<view class="centenr-img">
						<image src="../../static/my/dpj.png" mode=""></image>
					</view>
					<view class="centenr-size">
						待评价
					</view>
				</view>
			</view>
			<view class="box-centenr">
				<view class="box-centenr-title">我的服务</view>
				<view class="wrap-box">
					<view class="centenr-sx" @click="goReder">
						<view class="centenr-img">
							<image src="../../static/my/lpk.png"></image>
						</view>
						<view class="centenr-size">
							礼品卡
						</view>
					</view>
					<view class="centenr-sx" @click="goToDaby">
						<view class="centenr-img">
							<image src="../../static/my/jryj.png" mode=""></image>
						</view>
						<view class="centenr-size">
							今日油价
						</view>

					</view>

					<view class="centenr-sx" @click="goWriteoff()">
						<view class="centenr-img">
							<image src="../../static/my/jl.png" mode=""></image>
						</view>
						<view class="centenr-size">
							核销记录
						</view>

					</view>
					<view class="centenr-sx" @click="goRecharge()">
						<view class="centenr-img">
							<image src="../../static/my/chongzhi.png" style="width: 30px;height: 30px; "></image>
						</view>
						<view class="centenr-size">
							充值记录
						</view>
					</view>
					<view class="centenr-sx" @click="goInvte()">
						<view class="centenr-img">
							<image src="../../static/my/lp.png" style="width: 30px;height: 30px; "></image>
						</view>
						<view class="centenr-size">
							邀请有礼
						</view>
					</view>
					<view class="centenr-sx" @click="goPoints()">
						<view class="centenr-img">
							<image src="../../static/my/jfsc.png" style="width: 30px;height: 30px; "></image>
						</view>
						<view class="centenr-size">
							积分商城
						</view>
					</view>
					<view class="centenr-sx" @click="goCard()">
						<view class="centenr-img">
							<image src="../../static/my/kb.png"></image>
						</view>
						<view class="centenr-size">
							子卡管理
						</view>
					</view>
					<view class="centenr-sx" @click="goFeedback()">
						<view class="centenr-img">
							<image src="../../static/my/yj.png"></image>
						</view>
						<view class="centenr-size">
							意见反馈
						</view>
					</view>
				</view>
			</view>
			<u-divider text="蓝鲸智慧加油站" :hairline="true"></u-divider>
			<tabbar :msg="msg"></tabbar>
		</view>
	</view>
</template>
<script>
	import request from "../../utils/request";
	import tabbar from "../../components/tabbar/tabbar.vue"
	export default {
		data() {
			return {
				query: {
					storeId: '',
					chainStoreId: '',
					couponType: '',
					useStatus: 0,
					pageNo: 1,
					pageSize: 10
				},
				myPoints: 0,
				cardsList: [],
				refuelMoney: [],
				cardBalance: 0.00,
				title: '',
				msg: "3",
				// url信息
				baseUrl: this.$baseUrl,
				user: {},
			}
		},

		components: {
			tabbar
		},
		onShow() {
			this.getUser()
			this.query.storeId = uni.getStorageSync("storeId")
			this.query.chainStoreId = uni.getStorageSync('chainStoreId')
			this.getUserBalance();
			this.getGiftRecords();


		},
		methods: {
			// 查询当前登录用户信息
			getUser() {
				request({
					url: 'business/userManager/user/getUser',
					method: 'get',
				}).then(res => {
					if (res.data != null && res.data != "" && res.data != undefined) {
						this.user = res.data
						uni.setStorageSync('userId', res.data.id)
						this.user.mobile = res.data.mobile.slice(0, 3) + "****" + res.data.mobile.slice(res.data
							.mobile.length - 5, res.data.mobile.length - 1)
					}
				})
			},
			goMyOrder(id) {
				uni.navigateTo({
					url: '/pagesMy/myorder/myorder?id=' + id
				})
			},
			goReder() {
				uni.navigateTo({
					url: '/pagesHome/RechargeRecords/RechargeRecords'
				})
			},
			goToDaby() {
				uni.navigateTo({
					url: '/pagesMy/today/today'
				})
			},
			goIntegral() {
				uni.navigateTo({
					url: '/pagesMy/integral/integral'
				})
			},
			goOil() {
				uni.navigateTo({
					url: '/pagesMy/oilBalance/oilBalance'
				})
			},
			goMony() {
				uni.navigateTo({
					url: '/pagesMy/moneyBalance/moneyBalance'
				})
			},
			goSetup() {
				uni.navigateTo({
					url: '/pagesMy/setup/index'
				})
			},
			gorefuel() {
				uni.navigateTo({
					url: '/pagesRefuel/pagesRefuel/index'
				})
			},
			goWriteoff() {
				uni.navigateTo({
					url: '/pagesMy/writeOff/writeOff'
				})
			},
			goRecharge() {
				uni.navigateTo({
					url: '/pagesMy/Recharge/Recharge'
				})
			},
			goPoints() {
				uni.navigateTo({
					url: '/pagesHome/PointsMall/PointsMall'
				})
			},
			goInvte() {
				uni.navigateTo({
					url: '/pagesMy/invite/invite'
				})
			},
			goCard() {
				uni.navigateTo({
					url: '/pagesMy/CardManagement/CardManagement'
				})
			},
			govip() {
				uni.navigateTo({
					url: '/pagesMy/VIP/vip'
				})
			},
			goFeedback() {
				uni.navigateTo({
					url: '/pagesMy/feedback/feedback'
				})
			},
			getUserBalance() {
				request({
					url: '/business/userManager/user/getUserBalanceApplet',
					method: 'get',
					params: this.query
				}).then(res => {
					if (res.data) {
						this.cardBalance = res.data.cardBalance,
							this.myPoints = res.data.points,
							/* if (res.data.refuelMoney!=null && res.data.refuelMoney!=""){
								this.refuelMoney = JSON.parse(res.data.refuelMoney);
							} */
							this.refuelMoney = JSON.parse(res.data.refuelMoney);
						console.log("333333333333333", this.refuelMoney);
					}
				})
			},
			getGiftRecords() {
				request({
					url: 'business/marketingActivity/cardFavorable/applet',
					method: 'get',
					params: this.query
				}).then(res => {
					if (res.code == 200) {
						this.cardsList = res.data.records
					}
				})
			},
			// 查询我的积分
			toCoupons() {
				uni.navigateTo({
					url: '/pagesMy/Coupons/Coupons'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #f4f5f6;
	}

	.container {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding-top: 88px;
	}

	.my-header {
		width: 100%;
		height: 88px;
		background: #304fff;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;

		.my-text {
			margin-top: 40px
		}

		position: fixed;
		top: 0px;
	}

	.my-top {
		height: 150px;
		width: 100%;
		background: #304fff;
		box-sizing: border-box;
		padding-top: 1px;
	}

	.dis {
		display: flex;
		align-items: center;
	}

	.dis-box {
		width: 90%;
		margin: 20px auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.touxiang {
		width: 65px;
		height: 65px;
		border-radius: 50%;
		background-color: #ebf5ff;
		overflow: hidden;
		margin-right: 5px;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.user-tel {
		font-weight: bold;
		font-size: 20px;
		color: white;
		margin-bottom: 5px;
	}

	.user-name {
		font-size: 12px;
		color: #c1c1ff;
	}

	.vipnber {
		color: white;
	}

	.my-top-box {
		width: 90%;
		height: 80px;
		background-color: white;
		border-radius: 8px;
		box-sizing: border-box;
		padding: 15px;
		display: flex;
		align-items: center;
		margin: 0 auto;
	}

	.jg-box {
		width: 33%;
		// border-right: 1px solid #999999;
		text-align: center;
	}

	.jg-box-title {
		font-size: 16px;
		color: #999999;
		margin-bottom: 5px;
	}

	.jg-box-nmb {
		font-size: 12px;
		font-weight: bold;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

	}

	.box-centenr {
		width: 90%;
		box-sizing: border-box;
		padding: 10px;
		background: white;
		margin: 15px auto;
		margin-top: 10px;
		border-radius: 8px;
	}

	.box-gang {
		border-bottom: 1px solid #f4f5f6;
		width: 100%;
		box-sizing: border-box;
		padding: 10px 0px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #404041;
	}

	.wrap-box {
		display: flex;
		flex-wrap: wrap;
	}

	.centenr-sx {
		width: 25%;
		margin-top: 10px;
		margin-bottom: 10px;
		text-align: center;
	}

	.box-centenr-title {
		font-weight: bold;
		font-size: 18px;
	}

	.centenr-img {

		margin: 2px auto;

		image {
			width: 32px;
			height: 32px;
		}
	}

	.centenr-size {
		font-size: 14px;
	}
</style>