caimei-applets-caimei/market/pages/user/user.vue

<template>
	<view class="container user clearfix" :style="{paddingBottom:isIphoneX?'140rpx':'98rpx'}">
		<view class="user-section">
			<view class="u-header">
				<image src="https://admin-b.caimei365.com/userfiles/1/images/photo/2020/03/%E6%88%91%E7%9A%84%20%E2%80%93%201%403x.png" mode=""></image>
				<view class="u-header-main">
					<view class="user-item">
						<view class="logo-m">
							<image :src="headpic ? headpic:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/04/%E5%8D%8F%E9%94%80%E9%BB%98%E8%AE%A4%E5%A4%B4%E5%83%8F.png'" mode=""></image>
							<text class="txt">协销员工</text>
						</view>
					</view>
					<view class="user-item">
						<text class="u-h1">{{name}}</text>
					</view>
				</view>
			</view>
			<!-- 订单 -->
			<view class="user-order">
				<view class="tab-title" @click="navigator('/market/pages/order/order-list?listType=0')">
					<text class="cell-tit">我的订单</text>
					<text class="cell-more">查看更多</text>
					<text class="iconfont icon-xiayibu"></text>
				</view>
				<view class="order-section">
					<view class="order-item" @click="navigator('/market/pages/order/order-list?listType=1')" hover-class="common-hover"  :hover-stay-time="50">
						<view class="order-icon">
							<image src="../../../static/temp/order1@3x.png" mode=""></image>
							<text 	v-if="beforeConfirmCount >0" 
									class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
									:class="[beforeConfirmCount < 10 ? 'goleft':'']">
									{{beforeConfirmCount == 99? '99+' : beforeConfirmCount}}
							</text>
						</view>
						<text class="order-t">待确认</text>
					</view>
					<view class="order-item" @click="navigator('/market/pages/order/order-list?listType=2')"  hover-class="common-hover" :hover-stay-time="50">
						<view class="order-icon">
							<image src="../../../static/temp/order2@3x.png" mode=""></image>
							<text  v-if="beforePayCount >0" 
								   class="uni-badge uni-badge-error uni-small uni-badge--small icon-num " 
								   :class="[beforePayCount < 10 ? 'goleft':'']">
								   {{beforePayCount == 99? '99+' : beforePayCount}}
							</text>
						</view>
						<text class="order-t">待付款</text>
					</view>
					<view class="order-item" @click="navigator('/market/pages/order/order-list?listType=3')" hover-class="common-hover"  :hover-stay-time="50">
						<view class="order-icon">
							<image src="../../../static/temp/order3@3x.png" mode=""></image>
							<text   v-if="beforeShipCount >0" 
									class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
									:class="[beforeShipCount < 10 ? 'goleft':'']">
									{{beforeShipCount == 99? '99+' : beforeShipCount}}
							</text>
						</view>
						<text class="order-t">待发货</text>
					</view>
					<view class="order-item" @click="navigator('/market/pages/order/order-list?listType=4')" hover-class="common-hover"  :hover-stay-time="50">
						<view class="order-icon">
							<image src="../../../static/temp/order4@3x.png" mode=""></image>
							<text 	v-if="shippedCount >0" 
									class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
									:class="[shippedCount < 10 ? 'goleft':'']">
									{{shippedCount == 99? '99+' : shippedCount}}
							</text>
						</view>
						<text class="order-t">已发货</text>
					</view>
					<view class="order-item" @click="navigator('/market/pages/order/order-list?listType=5')" hover-class="common-hover"  :hover-stay-time="50">
						<view class="order-icon">
							<image src="../../../static/temp/order5@3x.png" mode=""></image>
							<text 	v-if="refundsCount >0"
									class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
									:class="[refundsCount < 10 ? 'goleft':'']">
									{{refundsCount == 99? '99+' : refundsCount}}
							</text>
						</view>
						<text class="order-t">退货/款</text>
					</view>
				</view>
			</view>
			<!-- 底部跳转 -->
			<view class="foot-list">
				<view class="list-cell-item">
					<view class="list-cell"  v-for="(item, index) in firstList" :key="index" @click="navigator(item.path)" hover-class="cell-hover" :hover-stay-time="50">
						<text class="cell-tit">{{item.name}}</text>
						<text class="cell-more iconfont icon-xiayibu"></text>
					</view>
				</view>
			</view>
		</view>	
		<!-- 底部tabbar -->
		<cu-tabbar :active-index ="2"></cu-tabbar>
	</view>
</template>
<script>
	import cuTabbar from '@/components/cu-tabbar.vue'
	import uniBadge from '@/components/uni-badge/uni-badge.vue'
	import { mapState,mapMutations } from 'vuex'
	import { getSellerHome } from "@/api/seller.js"
	
	export default{
		components: {
			uniBadge,
			cuTabbar
		},
		data() {
			return{	
				name:'采美协销',
				headpic:'',
				userMoney:0.00,
				userId:'',
				aboutHtml:'',
				telPhone:'',
				beforeConfirmCount:0,//待确认角标
				beforePayCount:0, 	//待付款角标
				beforeShipCount:0, //待发货角标
				shippedCount:0,   //已发货角标
				refundsCount:'', //退货/款角标
				isIphoneX:this.$store.state.isIphoneX,
				firstList:[
					{name:'机构列表',path:'/market/pages/club/list'},
					{name:'帮机构下单',path:'/market/pages/club/club-list'},
					{name:'拉机构上线',path:'/market/pages/login/register'},
					{name:'邀请运营人员',path:'/market/pages/club/allClub-list'}
				],
			}
		},
		onLoad(){
			
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods:{
			initData(){
				getSellerHome({userId:this.userId}).then(response =>{
					let sellerData = response.data
					this.name = sellerData.seller.name 	//协销名称
					this.headpic = sellerData.seller.logo //会所头像
					this.beforeConfirmCount = this.showBadge(sellerData.beforeConfirmCount)//待付款
					this.beforePayCount = this.showBadge(sellerData.beforePayCount)//待付款
					this.beforeShipCount = this.showBadge(sellerData.beforeShipCount)//待发货		
					this.shippedCount = this.showBadge(sellerData.shippedCount)//已发货	
					this.refundsCount = this.showBadge(sellerData.refundsCount)//退货/款	
				}).catch(response =>{
					this.$util.msg(response.msg,2000)
				})
			},
			navigator(url){
				this.$api.navigateTo(url)
			},			
			showBadge(n){
				let num ='';
				if(n>100){num = 99}else{num = n;}
				return num;
			},
			onPullDownRefresh() {//下拉刷新
				this.initData()
				uni.stopPullDownRefresh()
			},
			onShow(){
				this.$api.getStorage().then((resolve) =>{
					// console.log(resolve)
					this.userId = resolve.userID
					this.initData()
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "@/uni.scss";
	page{
		background-color: #F7F7F7;
	}
	.user{
		width: 100%;
		height: auto;
		position:relative;
		background: rgba(247, 247, 247, 1);
	}	
	.user-section.none{
		display: none;
	}
	.user-section.show{
		display: block;
	}
	.u-header{
		width: 100%;
		height: 400rpx;
		position: relative;
		image{
			width: 100%;
			height: 400rpx;
		}
	}	
	.u-header-main{
		width: 100%;
		height: 284rpx;
		padding: 58rpx 0;
		position: absolute;
		top: 0;
		left: 0;
		.user-item{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 16rpx;
			.u-h1{
				width: 410rpx;
				font-size: $font-size-28;
				line-height: 40rpx;
				color: #FFFFFF;
				margin-bottom: 8rpx;
				-o-text-overflow: ellipsis;
				text-overflow: ellipsis;
				display: -webkit-box;
				word-break: break-all;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				align-items: center;
			}
			.u-p{
				font-size: $font-size-24;
				line-height: 40rpx;
				color: #FFFFFF;
			}
		}
		.logo-m{
			width: 144rpx;
			height: 144rpx;
			border: 2rpx solid #FFFFFF;
			border-radius: 100%;
			background: $bg-color;
			position: relative;
			.txt{
				width: 144rpx;
				height: 42rpx;
				display: inline-block;
				background: linear-gradient(45deg,rgba(225,86,22,1) 0%,rgba(255,177,0,1) 100%);
				border-radius: 21rpx;
				line-height: 42rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: $font-size-22;
				position: absolute;
				bottom: -10rpx;
				left: 0;
			}
			image{
				width: 144rpx;
				height: 144rpx;
				border-radius: 100%;
			}
		}
	}

	.user-order{
		width: 702rpx;
		height: auto;
		padding: 0 24rpx;
		background-color: $bg-color;
		margin-bottom: 24rpx;
	}	
	.tab-title{
		font-size: $font-size-28;
		line-height: 80rpx;
		color: #333333;
		text-align:left;
		border-bottom: 1px solid #F8F8F8;
		position: relative;
		.cell-tit{
			font-size: $font-size-28;
			color: $text-color;
		}
		.cell-more{
			float: right;
			line-height: 80rpx;
			font-size: $font-size-24;
			color: $text-color;
			padding-right: 30rpx;
		}
		.iconfont{
			width: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			font-size: $font-size-28;
			text-align: center;
			position: absolute;
			right: 0;
			top: 0;
			display: block;
		}
	}
	.order-section{
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap:wrap;
		height: 99rpx;
		padding: 24rpx 0;
	}
	.order-item{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 98rpx;
		position: relative;
		margin-right: 53rpx;
		&:last-child{
			margin-right: 0;
		}
		.order-icon{
			width: 52rpx;
			height: 52rpx;
			position: relative;
			image{
				width: 52rpx;
				height: 52rpx;
			}
			.icon-num{
				position: absolute;
				right:-24rpx;
				top: -9rpx;
			}
			.icon-num.goleft{
				right: -12rpx;
			}
		}
		.order-t{
			line-height: 50rpx;
			font-size: $font-size-24;
			color: $text-color;
		}
	}


	.foot-list{
		width: 100%;
		// margin-bottom: 150rpx;
	}	
	.list-cell-item{
		width: 702rpx;
		height: auto;
		margin-bottom: 24rpx;
		padding:0 24rpx;
		background: $bg-color;
	}
	.list-cell{
		display:flex;
		width: 100%;
		align-items:baseline;
		line-height:100rpx;
		position:relative;
		background: $bg-color;
		justify-content: center;
		// border-bottom: 1px solid #EBEBEB;
		&.cell-hover{
			background:#fafafa;
		}
		.cell-more{
			align-self: baseline;
			font-size:$font-size-28;
			color:$text-color;
			margin-left:10rpx;
		}
		.cell-tit{
			flex: 1;
			font-size: $font-size-28;
			color: $text-color;
			margin-right:10rpx;
		}
		.cell-tip{
			font-size: $font-size-28;
			color: $text-color;
		}
	}	
	.list-cell.last{
		border-bottom: none;
	}
	.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>