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" v-if="userinfo">
					<view class="dis">
						<view class="touxiang" @click="goSetup">
							<image src="@/static/icon/icon/newmy.png" mode="aspectFit" style="margin-right: 10px;">
							</image>
						</view>
						<view class="">
							<view class="user-tel">点击登录</view>
							<view class="user-name">手机号: --</view>
						</view>
					</view>
				</view>
				<view class="dis-box" v-else>
					<view class="dis">
						<view class="touxiang" @click="goSetup">

							<image src="@/static/icon/icon/newmy.png" mode="aspectFit" style="margin-right: 10px;">
							</image>
						</view>
						<view class="">
							<view class="user-tel">用户昵称</view>
							<view class="user-name">手机号: xxxxxxxxxxxx</view>
						</view>
					</view>
					<view class="" @click="goMypages(2)">
						<image src="@/static/icon/erwm.png" style="width: 25px; height: 25px; "></image>
					</view>
				</view>
			</view>
			<view class="my-top-box" style="margin-top: 45px;">
				<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">{{countList.length || 0 }}次</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 class="center_ban" @click="goMypages(1)">
				<image src="@/static/icon/icon/newmyc.png" mode=""></image>
			</view>

			<view class="box-centenr">

				<view class="wrap-box">
					<view class="centenr-sx" @click="goPagesmy(1)">
						<view class="centenr-img">
							<image src="@/static/icon/icon/newmy1.png"></image>
						</view>
						<view class="centenr-size">
							每日签到
						</view>
					</view>
					<view class="centenr-sx" @click="goPagesmy(2)">
						<view class="centenr-img">
							<image src="@/static/icon/icon/newmy2.png"></image>
						</view>
						<view class="centenr-size">
							消费记录
						</view>
					</view>
					<view class="centenr-sx" @click="goPagesmy(3)">
						<view class="centenr-img">
							<image src="@/static/icon/icon/newmy3.png"></image>
						</view>
						<view class="centenr-size">
							我的订单
						</view>
					</view>
					<view class="centenr-sx">
						<view class="centenr-img">
							<image src="@/static/icon/icon/newmy4.png"></image>
						</view>
						<view class="centenr-size">
							积分商城
						</view>
					</view>
					<view class="centenr-sx">
						<view class="centenr-img">
							<image src="@/static/icon/icon/newmy5.png"></image>
						</view>
						<view class="centenr-size">
							个人资料
						</view>
					</view>
					<view class="centenr-sx">
						<view class="centenr-img">
							<image src="@/static/icon/icon/newmy6.png"></image>
						</view>
						<view class="centenr-size">
							邀请有礼
						</view>
					</view>
					<view class="centenr-sx">
						<view class="centenr-img">
							<image src="@/static/icon/icon/newmy7.png"></image>
						</view>
						<view class="centenr-size">
							车牌管理
						</view>
					</view>
					<view class="centenr-sx">
						<view class="centenr-img">
							<image src="@/static/icon/icon/newmy8.png"></image>
						</view>
						<view class="centenr-size">
							成长值记录
						</view>
					</view>
					<view class="centenr-sx">
						<view class="centenr-img">
							<image src="@/static/icon/icon/newmy9.png"></image>
						</view>
						<view class="centenr-size">
							礼品卡
						</view>
					</view>
					<view class="centenr-sx">
						<view class="centenr-img">
							<image src="@/static/icon/icon/newmy10.png"></image>
						</view>
						<view class="centenr-size">
							副卡管理
						</view>
					</view>
					<view class="centenr-sx">
						<view class="centenr-img">
							<image src="@/static/icon/icon/newmy11.png"></image>
						</view>
						<view class="centenr-size">
							我的奖品
						</view>
					</view>
					<view class="centenr-sx">
						<view class="centenr-img">
							<image src="@/static/icon/icon/newmy12.png"></image>
						</view>
						<view class="centenr-size">
							意见反馈
						</view>
					</view>

				</view>
			</view>

			<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
				},
				querys: {
					mtUserId: '',
					storeId: '',
					chainStoreId: '',
					recordName: '囤油卡',
					pageNo: 1,
					pageSize: 100
				},
				countList: [],
				myPoints: 0,
				cardsList: [],
				refuelMoney: [],
				cardBalance: 0.00,
				title: '',
				AppToken: uni.getStorageSync("App-Token"),
				msg: "3",
				// url信息
				baseUrl: this.$baseUrl,
				user: {},
				store: {},
				userinfo: false,
			}
		},

		components: {
			tabbar
		},
		onShow() {
			this.getUser()
			this.query.storeId = uni.getStorageSync("storeId")
			this.query.chainStoreId = uni.getStorageSync('chainStoreId')
			this.querys.storeId = uni.getStorageSync("storeId")
			this.querys.chainStoreId = uni.getStorageSync('chainStoreId')
			this.getUserBalance();
			this.getGiftRecords();
			this.getStore(uni.getStorageSync("storeId"));
			this.getAllOrderList();
		},
		methods: {
			goMypages(num) {

				if (num == 1) {
					uni.navigateTo({
						url: '/pagesHome/certificate/index'
					})
				}
				if (num == 2) {
					uni.navigateTo({
						url: '/pagesHome/QRcode/QRcode'
					})
				}


			},
			goPagesmy(num) {
				// 签到
				if (num == 1) {
					uni.navigateTo({
						url: '/pagesMy/signIn/index'
					})
				}
				//消费记录
				if (num == 2) {
					uni.navigateTo({
						url: '/pagesMy/myorder/myorder'
					})
				}
				if (num == 3) {
					uni.navigateTo({
						url: '/pagesHome/myPointsOrder/myPointsOrder'
					})
				}
			},
			// 查询全部充值订单
			getAllOrderList() {
				request({
					url: 'business/marketingActivity/cardValueRecord/selectAllRecord',
					method: 'get',
					params: this.querys

				}).then((res) => {
					if (res.code == 200) {

						this.countList = res.data.records
						this.totalDetail = res.data.total
						this.show = false
						uni.hideLoading();
					}
				})
			},
			// 获取门店信息
			getStore(id) {
				let _this = this;
				request({
					url: "business/storeInformation/store/queryStoreById",
					method: 'post',
					data: {
						"storeId": id
					},
				}).then((res) => {
					_this.store = res.data;
				})
			},
			// 查询当前登录用户信息
			getUser() {
				console.log(this.AppToken, 2343);
				if (!this.AppToken) {
					return;
				}
				request({
					url: 'business/userManager/user/getUser',
					method: 'get',
				}).then(res => {
					console.log(res, 1541);
					if (res.data) {
						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 - 4, res.data.mobile.length)
					}
				})
			},
			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: '/pagesHome/cardDetails/detailed?type=oilCard'
				})
			},
			goMony() {
				uni.navigateTo({
					url: '/pagesHome/cardDetails/detailed?type=balance'
				})
			},
			goSetup() {
				if (!this.user.mobile) {
					uni.navigateTo({
						url: '/pagesLogin/login/login'
					})
					return;
				}
				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() {
				if (!this.AppToken) {
					return;
				}
				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() {
				if (!this.AppToken) {
					return;
				}
				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: #FF9655;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;

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

		position: fixed;
		top: 0px;
	}

	.my-top {
		height: 80px;
		width: 100%;
		background: #FF9655;
		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;
		background: #fff;
		border-radius: 4px;
		box-sizing: border-box;
		padding: 20px;
	}

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

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

	.user-tel {
		font-weight: bold;
		font-size: 16px;
		margin-left: 10px;
		margin-bottom: 5px;

	}

	.user-name {
		font-size: 12px;
		color: #333;
		margin-left: 10px;
	}

	.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: 12px;
		color: #333333;
		margin-bottom: 5px;
	}

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

	}

	.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: 50px;
			height: 50px;
		}
	}

	.centenr-size {
		font-size: 14px;
	}

	.center_ban {
		width: 90%;
		height: 90px;
		margin: 10px auto;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>