caimei-applets-caimei/components/cm-module/cm-seller/user.vue

<template>
	<view class="container user clearfix">
		<cm-custom :navbar-data='nvabarData'></cm-custom>
		<view class="user-section">
			<view class="header" :style="{height:(CustomBar+90)-StatusBar+'px',paddingTop:CustomBar+'px',background:'url('+ bgImgUrl +')',backgroundSize:'cover'}">
				<view class="header-main" v-if="hasLogin">
					<view class="header-text">
						<view class="user-item">
							<text class="u-h1">{{name}}</text>
						</view>
						<view class="user-item">
							<text class="u-tips">协销人员</text>
						</view>
					</view>
					<view class="header-icon" @click="TestZHIboFn()"><image :src="headpic == null? 'https://static.caimei365.com/app/img/icon/icon-seller@3x.png' : headpic" mode=""></image></view>
				</view>
				<!-- 订单 -->
				<view class="user-order">
					<view class="tab-title" @click="navigator('/seller/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('/seller/pages/order/order-list?listType=1')" hover-class="common-hover"  :hover-stay-time="50">
							<view class="order-icon">
								<image src="https://static.caimei365.com/app/img/icon/order5@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('/seller/pages/order/order-list?listType=2')"  hover-class="common-hover" :hover-stay-time="50">
							<view class="order-icon">
								<image src="https://static.caimei365.com/app/img/icon/order1@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('/seller/pages/order/order-list?listType=3')" hover-class="common-hover"  :hover-stay-time="50">
							<view class="order-icon">
								<image src="https://static.caimei365.com/app/img/icon/order2@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('/seller/pages/order/order-list?listType=4')" hover-class="common-hover"  :hover-stay-time="50">
							<view class="order-icon">
								<image src="https://static.caimei365.com/app/img/icon/order3@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('/seller/pages/order/order-list?listType=5')" hover-class="common-hover"  :hover-stay-time="50">
							<view class="order-icon">
								<image src="https://static.caimei365.com/app/img/icon/order4@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>
			<!-- 底部跳转 -->
			<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-icon"><text class="iconfont" :class="item.icon"></text></text>
						<text class="cell-tit">{{item.name}}</text>
						<text 	v-if="index == 0 && orderNum >0"
								class="uni-badge uni-badge-error uni-small uni-badge--small icon-num">
								{{orderNum == 99 ? '99+' : orderNum}}
						</text>
						<text class="cell-more iconfont icon-xiayibu"></text>
					</view>
				</view>
				<view class="list-cell-item">
					<view class="list-cell"  v-for="(item, index) in twoList" :key="index" @click="navigator(item.path)" hover-class="cell-hover" :hover-stay-time="50">
						<text class="cell-icon"><text class="iconfont" :class="item.icon"></text></text>
						<text class="cell-tit">{{item.name}}</text>
						<text class="cell-more iconfont icon-xiayibu"></text>
					</view>
				</view>
			</view>
		</view>	
	</view>
</template>
<script>
	import authorize from '@/common/config/authorize.js'
	import uniBadge from '@/components/uni-badge/uni-badge.vue'
	import { mapState,mapMutations } from 'vuex'
	
	export default{
		components: {
			uniBadge,
		},
		data() {
			return{	
				nvabarData: {//顶部自定义导航
					showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
					showSearch: 0,
					title: '账户中心', // 导航栏 中间的标题
					haveBack:false,
					textLeft:this.$store.state.isIphone,
					textColor:'#FFFFFF',
					bgColor:''
				},
				CustomBar:this.CustomBar,// 顶部导航栏高度
				StatusBar: this.StatusBar,
				bgImgUrl:'https://img.caimei365.com/group1/M00/03/B0/Cmis217Z_i6ASHobAAhl69yz3SM078.png',
				name:'',
				headpic:'',
				userId:'',
				skeletonShow:true,
				orderNum:0,//机构自主下单订单数
				beforeConfirmCount:0,//待确认角标
				beforePayCount:0, 	//待付款角标
				beforeShipCount:0, //待发货角标
				shippedCount:0,   //已发货角标
				refundsCount:'', //退货/款角标
				institutionsCont:120,
				firstList:[
					{name:'待注册机构',path:'/seller/pages/club/stayClub-list',icon:'icon-jigouliebiao'},
					{name:'机构列表',path:'/seller/pages/club/list',icon:'icon-jigouliebiao'},
					{name:'拉机构上线',path:'/seller/pages/login/register-select',icon:'icon-lajigoushangxian'},
					{name:'邀请运营人员',path:'/seller/pages/club/allClub-list',icon:'icon-yaoqingyunyingrenyuan'}
				],
				twoList:[
					{name:'帮机构下单',path:'/seller/pages/club/club-list',icon:'icon-bangjigouxiadan'},
					{name:'发布二手商品',path:'/second/pages/form/form-seller',icon:'icon-shangpin'}
				]
			}
		},
		created() {
			this.initData()
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods:{
			...mapMutations(['login','logout']),
			async initData(){
				const wechatCode = await authorize.getCode('weixin');// 根据微信的code获取用户登录状态:1已登录过 -1未登录过
				const getUserInfo = await authorize.getUserInfo('weixin');
				const params = { code:wechatCode,encryptedData:getUserInfo.encryptedData,iv:getUserInfo.iv }
				this.UserService.UserLoginAuthApplets(params).then(response =>{
					if(response.code == 0 || response.code == 4){
						this.isLogin = true;
						this.userID = response.data.userId;						
						this.userIdentity = response.data.userIdentity;						
						this.clubStatus = response.data.clubStatus;						
						this.$store.commit('updateStatus',response.data)
						this.login(response.data);
						uni.setStorageSync('token',response.data.token)
						uni.setStorageSync('unionId',response.data.unionId)
						this.getUserSellerHome()
					}else{
						this.isLogin = false;
						this.logout()
						uni.setStorageSync('unionId',response.data.unionId)
						this.$store.commit('updateStatus',response.data)
						this.$api.navigateTo('/seller/pages/login/login')
					}
				})
			},	
			getUserSellerHome(){
				this.$api.getStorage().then((resolve) =>{
					this.userId = resolve.userId ? resolve.userId : 0
					this.SellerService.GetSellerHome({userId:this.userId}).then(response =>{
						let sellerData = response.data
						this.name = sellerData.seller.linkMan1?sellerData.seller.linkMan1:'' 	//协销名称
						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)//退货/款	
						this.orderNum = this.showBadge(sellerData.orderNum)//机构自主下单订单数
						this.skeletonShow = false;
					}).catch(error =>{
						this.$util.msg(error.msg,2000)
					})
				})	
			},
			TestZHIboFn(){//测试跳转直播小程序
				uni.navigateToMiniProgram({
					appId: 'wx92d650b253f8f2e3',
					path: '/pages/index/index',
					extraData: {
						'data1': 'test'
					},
					envVersion: 'develop',
					success(res) {
						// 打开成功
						console.log(res)
					}
				})
			},
			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()
			}
		}
	}
</script>

<style lang="scss">
	@import "@/uni.scss";
	page{
		background-color: #F7F7F7;
	}
	.user{
		width: 100%;
		height: 100%;
		position:relative;
		background: rgba(247, 247, 247, 1);
	}	
	.header{
		width: 100%;
		position: relative;
		background-size: cover;
		border-radius: 0 0 100rpx 100rpx;
	}	
	.header-main{
		width: 702rpx;
		height: 130rpx;
		padding: 12rpx 24rpx;
		display: flex;
		.header-text{
			flex: 8;
			display: flex;
			flex-direction: column;
			.user-item{
				flex: 1;
				height: 64rpx;
				line-height: 64rpx;
				.u-tips{
					display: inline-block;
					float: left;
					width: 98rpx;
					height: 30rpx;
					border: 1px solid #FFFFFF;
					background: linear-gradient(128deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
					border-radius: 16rpx;
					line-height: 30rpx;
					font-size: $font-size-20;
					text-align: center;
					color: #FFFFFF;
					margin-left: 10rpx;
				}
				.u-viptips{
					display: inline-block;
					float: left;
					width: 98rpx;
					height: 30rpx;
					border: 1px solid #FFE600;
					background: linear-gradient(128deg,rgba(242,143,49,1) 0%,rgba(225,86,22,1) 100%);
					border-radius: 16rpx;
					line-height: 30rpx;
					font-size: $font-size-20;
					text-align: center;
					color: #FFE600;
					margin-left: 10rpx;
					margin-top: 17rpx;
				}
				.u-h1{
					float: left;
					font-size: $font-size-36;
					color: #FFFFFF;
					text-align: left;
					-o-text-overflow: ellipsis;
					text-overflow: ellipsis;
					display: -webkit-box;
					word-break: break-all;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
				.u-p{
					font-size: $font-size-24;
					line-height: 64rpx;
					color: #FFFFFF;
					text-align: left;
				}
			}
		}
		.header-icon{
			flex: 2;
			margin-right: 20rpx;
			image{
				float: right;
				width: 128rpx;
				height: 128rpx;
				border-radius: 100%;
				border: 2rpx solid #FFFFFF;
			}
		}
	}
	.header-main-none{
		width: 702rpx;
		height: 152rpx;
		padding: 0 24rpx;
		display: flex;
		.header-text{
			flex: 8;
			display: flex;
			flex-direction: column;
			.user-item{
				flex: 1;
				height: 50rpx;
				line-height: 50rpx;
				.line{
					margin: 0 10rpx;
				}
				.u-h1{
					float: left;
					font-size: $font-size-36;
					color: #FFFFFF;
					text-align: left;
					-o-text-overflow: ellipsis;
					text-overflow: ellipsis;
					display: -webkit-box;
					word-break: break-all;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
				.u-p{
					font-size: $font-size-24;
					line-height: 50rpx;
					color: #EFEFEF;
					text-align: left;
				}
				.u-btn{
					width: 160rpx;
					height: 40rpx;
					background: rgba(255,255,255,.5);
					border-radius: 5rpx;
					line-height: 40rpx;
					text-align: center;
					font-size: $font-size-24;
					color: #FFFFFF;
					display: block;
					margin-top: 5rpx;
					padding-left: 6rpx;
					.icon-xiangyouhuabeifen{
						font-size: $font-size-24;
					}
				}
			}
		}
		.header-icon{
			flex: 2;
			display: flex;
			margin-right: 20rpx;
			align-items: center;
			justify-content: center;
			image{
				float: right;
				width: 128rpx;
				height: 128rpx;
				border-radius: 100%;
				border: 2rpx solid #FFFFFF;
			}
		}
	}
	.user-order{
		width: 654rpx;
		height: auto;
		padding: 0 24rpx;
		background-color: $bg-color;
		margin-bottom: 24rpx;
		position: absolute;
		bottom: -170rpx;
		left: 24rpx;
		border-radius: 20rpx;
	}	
	.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: #666666;
			padding-right: 30rpx;
		}
		.iconfont{
			width: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			position: absolute;
			right: 0;
			top: 0;
			display: block;
			font-size: $font-size-28;
		}
	}
	.order-section{
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-wrap:wrap;
		height: 99rpx;
		padding: 24rpx 0;
	}
	.order-item{
		flex:1;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		&: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: 702rpx;
		padding: 0 24rpx;
		padding-top: 168rpx;
	}	
	.list-cell-item{
		width: 654rpx;
		height: auto;
		margin-bottom: 24rpx;
		padding:0 24rpx;
		background: $bg-color;
		border-radius: 20rpx;
	}
	.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;
		&:last-child{
			border-bottom: none;
		}
		&.cell-hover{
			background:#fafafa;
		}
		.cell-icon{
			width: 60rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			.iconfont{
				font-size: $font-size-34;
				color: #666666;
			}
		}
		.cell-more{
			align-self: baseline;
			font-size:$font-size-28;
			color:#666666;
			.txt{
				color: #FB4343;
				padding-right: 10rpx;
			}
		}
		.cell-tit{
			flex: 1;
			font-size: $font-size-28;
			color: #666666;
			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>