caimei-applets-caimei/components/cm-module/supplier/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-icon"><image :src="headpic ? headpic : defalutLogo" mode=""></image></view>
					<view class="header-text">
						<view class="user-item">
							<text class="u-h1">{{name}}</text>
							<text class="u-tips">供应商</text>
						</view>
						<view class="user-item" @click="navigator('/supplier/pages/user/my-shop?shopId='+shopID)">
							<text class="u-shop">进入店铺</text><text class="iconfont icon-jinrudianpu"></text>
						</view>
					</view>
				</view>
				<!-- 订单 -->
				<view class="user-order">
					<view class="tab-title">
						<text class="cell-tit">我的商品</text>
					</view>
					<view class="order-section">
						<view class="order-item" @click="navigator('/supplier/pages/user/my-product?listType=0')" hover-class="common-hover"  :hover-stay-time="50">
							<view class="order-icon">
								<text class="iconfont icon-quanbushangpin"></text>
								<text 	v-if="allNum>0" 
										class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
										:class="[allNum < 10 ? 'goleft':'']">
										{{ allNum | BadgeType }}
								</text>
							</view>
							<text class="order-t">全部商品</text>
						</view>
						<view class="order-item" @click="navigator('/supplier/pages/user/my-product?listType=1')"  hover-class="common-hover" :hover-stay-time="50">
							<view class="order-icon">
								<text class="iconfont icon-yishangjia"></text>
								<text  v-if="upNum >0" 
									   class="uni-badge uni-badge-error uni-small uni-badge--small icon-num " 
									   :class="[upNum < 10 ? 'goleft':'']">
									   {{ upNum | BadgeType }}
								</text>
							</view>
							<text class="order-t">已上架</text>
						</view>
						<view class="order-item" @click="navigator('/supplier/pages/user/my-product?listType=2')" hover-class="common-hover"  :hover-stay-time="50">
							<view class="order-icon">
								<text class="iconfont icon-yixiajia"></text>
								<text   v-if="downNum >0" 
										class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
										:class="[downNum < 10 ? 'goleft':'']">
										{{ downNum | BadgeType  }}
								</text>
							</view>
							<text class="order-t">已下架</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 底部跳转 -->
			<view class="foot-list">
				<view class="list-cell-item">
					<view class="list-cell" hover-class="cell-hover" :hover-stay-time="50" @click="navigator('/supplier/pages/order/order-list')">
						<text class="cell-icon"><text class="iconfont icon-wodedingdan"></text></text>
						<text class="cell-tit">我的订单</text>
						<text class="cell-more iconfont icon-xiayibu"></text>
						<text class="cell-more"></text>
					</view>
				</view>	
				<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 class="cell-more iconfont icon-xiayibu"></text>
					</view>
				</view>
				<view class="list-cell-item">
					<view class="list-cell" hover-class="cell-hover" :hover-stay-time="50">
						<text class="cell-icon"><text class="iconfont icon-lianxiwomen"></text></text>
						<text class="cell-tit">联系我们</text>
						<text class="cell-more" @click="toPhone">{{ contactNumber }}</text>
					</view>
					<view class="list-cell" @click="this.$api.navigateTo('/pages/user/about/about')" hover-class="cell-hover" :hover-stay-time="50">
						<text class="cell-icon"><text class="iconfont icon-guanyuwomen"></text></text>
						<text class="cell-tit">关于我们</text>
						<text class="cell-more iconfont icon-xiayibu"></text>
					</view>
					<view class="list-cell last" @click="this.$api.navigateTo('/h5/pages/article/page?linkType=99')" hover-class="cell-hover" :hover-stay-time="50">
						<text class="cell-icon"><text class="iconfont icon-bangzhuzhongxin"></text></text>
						<text class="cell-tit">帮助中心</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,
				defalutLogo:'https://static.caimei365.com/app/img/icon/logo@3x.png',
				bgImgUrl:'https://img.caimei365.com/group1/M00/03/B0/Cmis217Z_i6ASHobAAhl69yz3SM078.png',
				name:'这里是供应商的名字',
				headpic:'',
				userId:'',
				shopID:0,
				skeletonShow:true,
				contactNumber:0,
				orderNum:0,//机构自主下单订单数
				allNum:0,//全部商品
				upNum:0, 	//已上架
				downNum:0, //已下架
				firstList:[
					{name:'运营人员管理',path:'/supplier/pages/user/operator/list',icon:'icon-yunyingrenyuanguanli'},
					{name:'我的资料',path:'/supplier/pages/user/information',icon:'icon-wodeziliao'},
					{name:'账户设置',path:'/supplier/pages/user/setting/setting',icon:'icon-zhanghushezhi'},
				]
			}
		},
		created() {
			this.initData()
		},
		filters: {
			NumFormat:function(text) {//处理金额
				return Number(text).toFixed(2);
			},
			BadgeType(n){
				let num ='';
				if( n>999 ){ num = '999+' } else{ num = n;}
				return num;
			},
		},
		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.GetHomePageData()
						this.getPhone()
					}else{
						this.isLogin = false;
						this.logout()
						uni.setStorageSync('unionId',response.data.unionId)
						this.$store.commit('updateStatus',response.data)
					}
				})
			},	
			GetHomePageData(){
				this.$api.getStorage().then((resolve) =>{
					this.userId = resolve.userId ? resolve.userId : 0
					this.ShopService.GetHomePageData({userId:this.userId}).then(response =>{
						let data = response.data
						this.name = data.shop.name 	//协销名称
						this.shopID = data.shop.shopID 	//供应商ID
						this.headpic = data.shop.logo //会所头像
						this.allNum = data.allNum	//全部商品
						this.upNum = data.upNum 	//已上架
						this.downNum = data.downNum //已下架
						this.skeletonShow = false;
					}).catch(error =>{
						this.$util.msg(error.msg,2000)
					})
				})	
			},
			getPhone(){
				this.CommonService.QueryAfterSale().then(response =>{
					this.contactNumber = response.data.contactNumber
				}).catch(error =>{
					this.$util.msg(error.msg,2000);
				})
			},
			toPhone(){
				uni.makePhoneCall({
				    phoneNumber:this.contactNumber //仅为示例
				});
			},
			navigator(url){
				this.$api.navigateTo(url)
			},			
			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;
			padding: 15rpx 0;
			.user-item{
				flex: 1;
				height: 50rpx;
				line-height: 50rpx;
				.u-tips{
					display: inline-block;
					float: left;
					width: 98rpx;
					height: 30rpx;
					background: #FFFFFF;
					border-radius: 16rpx;
					line-height: 30rpx;
					font-size: $font-size-20;
					text-align: center;
					color: $color-system;
					margin-left: 10rpx;
					margin-top: 12rpx;
				}
				.icon-jinrudianpu{
					font-size: $font-size-26;
					line-height: 50rpx;
					color: #FFFFFF;
					text-align: left;
					margin-left: 12rpx;
				}
				.u-shop{
					font-size: $font-size-28;
					line-height: 50rpx;
					color: #FFFFFF;
					text-align: left;
				}
				.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-30;
					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: #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: 16rpx;
	}	
	.tab-title{
		font-size: $font-size-30;
		line-height: 80rpx;
		color: #333333;
		text-align:left;
		position: relative;
		.cell-tit{
			font-size: $font-size-30;
			color: $text-color;
		}
	}
	.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;
		.order-icon{
			width: 52rpx;
			height: 52rpx;
			position: relative;
			.iconfont{
				line-height: 52rpx;
				font-size: $font-size-48;
				color: #ff7a51;
			}
			.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>