mnsx/pages/index/integral/integral.vue

<template>
	<view class="population">
		<view class="integral-left border-index">
			<view class="integral-title">
				<text>{{hasLogin?'亲爱的会员':'游客'}}</text>
			</view>
			<view class="integral-content">
				<view class="mark">
				</view>
				<view class="int-item" @click="loadMore('/user/page/scoreAccumulate')">
					<text class="tit">积分</text>
					<view class="val">{{ userInfo.integral*1 || '0' }}</view>
					<view class="look-more">立即查看</view>
				</view>
				
				<view class="int-item" @click="loadMore('/pages/product/discount')">
					<text class="tit">优惠券</text>
					<view class="val">{{couponNum || 0}}</view>
					<view class="look-more">立即查看</view>
				</view>
				<view class="int-item item-bt"  @click="loadMore('/user/page/myex')">
					<text class="tit">兑换券</text>
					<view class="val">{{userInfo.uid ? ett : 0}}</view>
					<view class="look-more">立即查看</view>
				</view>
				<view class="int-item item-bt" @click="loadMore('/pages/money/wallet')">
					<text class="tit">余额</text>
					<view class="val ">{{getMoney(userInfo.now_money) || '0'}}</view>
					<view class="look-more">立即查看</view>
				</view>
			</view>
		</view>
		<view class="integral-right">
			<view class="own border-index" @click="load(1)">
				<view><image src="../../../static/img/take-from-oneself.png"></image></view>
					<view class="one">
						<b>门店自取</b><br/><text>下单免排队</text>
					</view>
			</view>
			<view class="takeaway border-index" @click="load(2)">
				<image src="../../../static/img/Takeaway.png"></image>
					<view class="one">
						<b>外送到家</b><br/><text>上门配送到家</text>
					</view>
			</view>
		</view>
	</view>
</template>

<script>
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
import { mapState, mapMutations } from 'vuex';
import { getMoneyStyle } from '@/utils/rocessor.js';
	export default {
		filters: {
			getMoneyStyle,
		},
		data() {
			return {
				
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
		},
		props: ["dhqList","couponNum",'ett'],
		methods: {
			...mapMutations('user', ['setDistribution']),
			loadMore(url) {
				if(this.hasLogin) {
					uni.navigateTo({
						url:url
					})
				}else {
					saveUrl();
					// 登录拦截
					interceptor();
				}
				
			},
			load(url) {
				this.setDistribution(url)
				uni.switchTab({
					url: '/pages/menu/menu'
				});
			},
			getMoney(value) {
				if (typeof value == 'string') {
					value = (+value).toFixed(2)
				}
				if (typeof value == 'number') {
					value = value.toFixed(2)
				}
				if(value*1 > 1000 && value*1 <= 10000) {
					value = (value*1).toFixed(0)
				}
				if(value*1 > 10000 && value*1 <= 100000) {
					value = value*1/10000
					value = (value*1).toFixed(2) + '万'
				}
				if(value*1 > 100000 && value*1 < 984900) {
					value = value*1/10000
					value = (value*1).toFixed(1) + '万'
				}
				if(value*1 > 984900) {
					value = value*1/10000
					value = (value*1).toFixed(0) + '万'
				}
				return value;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.population {
		display: flex;
	}
	.integral-left {
		margin: 27rpx;
		flex: 1;
		height: 423rpx;
		position: relative;
	}
	
	.integral-right {
		flex: 1;
		height: 423rpx;
		margin: 27rpx;
		margin-left: 0;
		display: grid;
		
		image {
			float: left;
			margin: 55rpx 5rpx 0 45rpx;
		}
		
		.one {
			text-align: center;
			margin: 55rpx 10rpx 0 0;
			
			text {
				color: #989B9F;
				font-size: 22rpx;
				margin-top: 4rpx;
			}
			
			b {
				color: #333333;
				font-family: PingFang-SC-Bold;
				font-size: 39rpx;
			}
		}
		view {
			// display: flex;
		}
		
		.own {
			margin-bottom: 14rpx;
			
			image {
				width: 75rpx;
				height: 83rpx;
			}
		}
		
		 .takeaway {
			margin-top: 14rpx;
			
			image {
				width: 83rpx;
				height: 75rpx;
			}
		}
	}
	.integral-title {
		margin-top: 30rpx;
		text-align: center;
		height: 100rpx;
		color: #901B21;
		font-family: PingFang-SC-Bold;
	}
	
	.integral-content {
		width: 264rpx;
		height: 264rpx;
		
		background-color: #ecd49e;
		position: absolute;
		bottom: 34rpx;
		left: 0;
		right: 0;
		margin: auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		// align-items: ;
		.int-item {
			width: 49.6%;
			height: 49.6%;
			background-color: #fff;
			text-align: center;
			display: flex;
			flex-direction: column;
			// flex-wrap: nowrap;
			justify-content: space-around;
			.tit {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.val {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
			.look-more {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #989B9F;
			}
		}
		.item-bt {
			align-self: flex-end;
		}
		.mark {
			width: 24rpx;
			height: 38rpx;
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			margin: auto;
			background-color: #fff;
		}
		// // margin-top: -25rpx;
		// text-align: center;
		// // display: grid;
		// // grid-template-columns: 50% 50%;
		// // grid-template-rows: 60% 60%;
		// width: 100%;
		// display: flex;
		// flex-wrap: wrap;
		// position: relative;
		
		// .lines {
		// 	width: 2rpx;
		// 	height: 120rpx;
		// 	background: #DCB876;
		// 	position: absolute;
		// 	left: 0;
		// 	right: 0;
		// 	margin: auto;
		// }
		// .lineh {
		// 	width: 120rpx;
		// 	height: 2rpx;
		// 	background: #DCB876;
		// 	position: absolute;
		// 	top: 0;
		// 	bottom: 0;
		// 	margin: auto;
		// }
		// .line1 {
		// 	top: 0;	
		// }
		// .line4 {
		// 	bottom: 0;
		// }
		// .line2 {
		// 	left: 35rpx;
		// }
		// .line3 {	
		// 	right: 35rpx;
		// }
		// .int-item {
		// 	width: 50%;
		// 	height: 50%;
		// 	padding: 20rpx 0;
		// 	.val {
		// 		padding: 5rpx 0;
		// 	}
		// }
		// .int-item-t {
		// 	padding-top: 0;
		// }
		// view {
		// 	text-align: center;
		// }
		
		// text {
		// 	color: #333333;
		// 	font-size: 30rpx;
		// 	font-family: PingFang-SC-Medium;
		// }
		// .exchangeOsee {
		// 	color: #989B9F;
		// 	font-size: 20rpx;
		// }
		
		// $integral-border: solid 2rpx #DCB876;
		
		// .integral {
			
		// }
		
		// .exchange-certificate {
			
		// }
		
		// .extension {
			
		// }
		
		// .balance {
			
		// }
		
			
	}
</style>