caimei-applets-crm/pages/tabBar/user/mine.vue

<template>
	<view class="container mine clearfix">
		<!-- <cu-custom :navbar-data='nvabarData'  @navigateBack="hanldNavigateBack"></cu-custom> -->
		<view class="tui-header-box" :style="{height:CustomBar+'px',background:'rgba(255,255,255,'+opcity+')'}">
			<view class="tui-header" :style="{paddingTop:top+'px', opacity:opcity,lineHeight: CustomBar+'px'}"></view>
			<view class="header-sit" @tap="navigator('/pages/user/setting/setting')">
				<text class="iconfont icon-shezhi"></text>
			</view>
		</view>
		<view class="user-section">
			<view class="header-content">
				<view class="header-mine">
					<view class="header-mine-right">
						<view class="mine-name">官方直营店</view>
						<view class="mine-num">
							<text class="iconfont icon-VIP"></text>
							<text class="text">店铺账号：{{userName}}</text>
						</view>
					</view>
					<view class="header-mine-left">
						<view class="logo-m">
							<text class="iconfont icon-wode2" v-if="headAddress == ''"></text>
							<image v-else :src="headAddress" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="header-tabs">
					<view class="title">账户</view>
					<view class="main">
						<view class="main-item" @click="navigator('/pages/user/account/account')">
							<text class="iconfont icon-daifukuan"></text>
							<text class="text">资金管理</text>
						</view>	
<!-- 						<view class="main-item" @click="navigator('/pages/user/account/balance-details')">
							<text class="iconfont icon-icon"></text>
							<text class="text">账户流水</text>
						</view>	
 -->						<view class="main-item" @click="navigator('/pages/user/account/account-bank')">
							<text class="iconfont icon-yinhangqia1"></text>
							<text class="text">提现账号</text>
						</view>	
					</view>
				</view>
				<view class="header-tabs">
					<view class="title">店铺</view>
					<view class="main">
						<view class="main-item">
							<text class="iconfont icon-shezhi1"></text>
							<text class="text">店铺设置</text>
						</view>	
					</view>
				</view>
			</view>
		</view>	
	</view>
</template>
<script>
	import { mapState,mapMutations } from 'vuex'
	
	export default{
		data() {
			return{	
				nvabarData: {		//顶部自定义导航
					showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
					showSearch: 0,
					title: '', // 导航栏 中间的标题
					haveBack:false,
					home:false,
					textLeft:this.$store.state.isIphone,
					bgColor:'#D33020',
					textColor:'#ffffff'
				},
				icon:'',
				userName:'',
				CustomBar:this.CustomBar,// 顶部导航栏高度
				nickname:'轻描淡写',
				headAddress:'',
				userMoney:0.00,
				contactNumber:'',
				height: 64, //header高度
				top: 0, //标题图标距离顶部距离
				scrollH: 0, //滚动总高度
				opcity: 0,
				userIdentity:'', //机构等级
				toBePaid:0,		//待付款
				toBeDelivered:0, //待发货
				toBeReceived:0, //待收货
				toBeEvaluated:0,  //已发货角标
				refund:0,//账户余额
				invalidOrder:0,//退货/款角标
				balance:0,//优惠券数量
				couponCount:0,//优惠券数量
				collectionCount:'',//收藏
			}
		},
		onLoad(){
			let obj = {}
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect()
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect()
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu()
			// #endif
			uni.getSystemInfo({
				success: (res) => {
					this.width = obj.left || res.windowWidth
					this.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44)
					this.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6)
					this.scrollH = res.windowWidth * 0.6
				}
			})
		},
		filters: {
			NumFormat(value) {
				if(!value) return '0.00'
				/*原来用的是Number(value).toFixed(0)，这样取整时有问题，例如0.51取整之后为1，感谢Nils指正*/
				/*后来改成了 Number(value)|0,但是输入超过十一位就为负数了，具体见评论 */
				var intPart = Number(value) - Number(value)%1 //获取整数部分（这里是windy93的方法）
				var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') //将整数部分逢三一断
				var floatPart = '.00' //预定义小数部分
				var value2Array = value.toString().split('.')
				//=2表示数据有小数位
				if(value2Array.length == 2) {
					floatPart = value2Array[1].toString() //拿到小数部分
					if(floatPart.length == 1) { //补0,实际上用不着
						return intPartFormat + '.' + floatPart + '0'
					} else {
						return intPartFormat + '.' + floatPart
					}
				} else {
					return intPartFormat + floatPart
				}
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods:{
			navigator(url){//跳转
				this.$api.navigateTo(url)
			},	
			getUserInfo(){
				this.$api.getComStorage('userInfo').then((resolve) =>{
					console.log(resolve)
					this.headAddress = resolve.icon
					this.userName = resolve.phone
				})
			}
		},
		onPullDownRefresh() {//下拉刷新
			uni.stopPullDownRefresh()
		},
		onPageScroll(e) {
			let scroll = e.scrollTop <= 0 ? 0 : e.scrollTop
			let opcity = scroll / this.scrollH
			if (this.opcity >= 1 && opcity >= 1) {
				return
			}
			this.opcity = opcity
			this.iconOpcity = 0.5 * (1 - opcity < 0 ? 0 : 1 - opcity)
		},
		onShow(){
			if(this.hasLogin){
				this.getUserInfo()
			}	
		}	
	}
</script>

<style lang="scss">
	@import "@/uni.scss";
	page{
		background:#FFF;
	}
	.tui-header-box {
		width: 100%;
	}
	.tui-header {
		width: 100%;
		font-size: 16px;
		font-weight: 500;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		padding: 0 40rpx;
	}
	.header-sit{
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		box-sizing: border-box;
		padding-left: 40rpx;
		text-align: left;
		.icon-shezhi{
			font-size: 54rpx;
			color: #666666;
		}
	}
	.mine{
		width: 100%;
		height: 100%;
		position:relative;
	}	
	.header-content{
		width: 100%;
		height: 480rpx;
		position: relative;
		.header-mine{
			width:100%;
			padding:40rpx;
			height: 200rpx;
			position: relative;
			.header-mine-left{
				width: 120rpx;
				height: 120rpx;
				float: right;
				.logo-m{
					width: 120rpx;
					height: 120rpx;
					background: linear-gradient(to right, rgba(133,160,250,.6), rgba(101,109,250,1));
					border: 2rpx solid #FFFFFF;
					border-radius: 100%;
					line-height: 120rpx;
					text-align: center;
					image{
						width: 120rpx;
						height: 120rpx;
						border-radius: 100%;
						display: block;
					}
					.icon-wode2{
						font-size: 66rpx;
						color: #FFFFFF;
					}
				}
			}
			.header-mine-right{
				float: left;
				.mine-name{
					font-size: $font-size-40;
					line-height: 60rpx;
					color: #333333;
					font-weight: 600;
					font-family: '正楷';
				}
				.mine-num{
					.text{
						display: block;
						float: left;
						line-height: 60rpx;
						font-size: $font-size-28;
						color: #333333;
					}
					.icon-VIP{
						display: block;
						float: left;
						width: 60rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						font-size: 60rpx;
						color: #4688fa;
					}
				}
			}
		}
		.header-tabs{
			width: 100%;
			height: auto;
			padding:40rpx;
			.title{
				font-size: $font-size-36;
				line-height: 60rpx;
				color: #333333;
				font-weight: bold;
			}
			.main{
				width: 100%;
				margin-top: 40rpx;
				height: 140rpx;
				.main-item{
					float: left;
					width: 180rpx;
					text-align: center;
					.iconfont{
						width: 100%;
						height: 80rpx;
						line-height:80rpx;
						display: block;
						float: left;
						font-size:60rpx;
						color: #4688fa ;
					}
					.text{
						width: 100%;
						height:60rpx;
						line-height: 60rpx;
						display: block;
						float: left;
						font-size:$font-size-30;
						color: #000000;
						text-align: center;
					}
				}
			}
		}
		.tui-header-btm {
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #fff;
		}
		.tui-btm-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		
		.tui-btm-num {
			font-size: 32rpx;
			font-weight: 600;
			position: relative;
		}
		.tui-btm-text {
			font-size: 24rpx;
			opacity: 0.85;
			padding-top: 4rpx;
		}
	}	
	.uni-badge--small {
		-webkit-transform: scale(.8);
		-ms-transform: scale(.8);
		transform: scale(.8);
		-webkit-transform-origin: center center;
		-ms-transform-origin: center center;
		transform-origin: center center;
	}
	.uni-badge {
		font-family: 'Helvetica Neue', Helvetica, sans-serif;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		font-size: 12px;
		line-height: 1;
		display: inline-block;
		padding: 3px 6px;
		color: #333;
		border-radius: 100px;
		background-color: #f1f1f1;
	}
	.uni-badge-error {
		color: #fff;
		background-color: #dd524d;
	}
</style>