caimei-applets-mcare/pages/seller/index/components/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" @click="TestZHIboFn()">
						<image :src="staticUrl + 'icon_default_seller@2x.png'" mode=""></image>
					</view>
					<view class="header-text">
						<view class="user-item"
							><text class="user-item-none">{{ name | nameFilters }}</text></view
						>
					</view>
				</view>
				<!-- 订单 -->
				<view class="user-order">
					<view class="tab-title" @click="navigator('/pages/seller/order/order-list?listType=0')">
						<text class="cell-tit">我的订单</text> <text class="cell-more">全部订单</text>
						<text class="iconfont icon-xiangyou"></text>
					</view>
					<view class="order-section">
						<view
							class="order-item"
							@click="navigator('/pages/seller/order/order-list?listType=1')"
							hover-class="common-hover"
							:hover-stay-time="50"
						>
							<view class="order-icon">
								<image :src="staticUrl + 'icon_order_1@2x.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('/pages/seller/order/order-list?listType=2')"
							hover-class="common-hover"
							:hover-stay-time="50"
						>
							<view class="order-icon">
								<image :src="staticUrl + 'icon_order_2@2x.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('/pages/seller/order/order-list?listType=3')"
							hover-class="common-hover"
							:hover-stay-time="50"
						>
							<view class="order-icon">
								<image :src="staticUrl + 'icon_order_3@2x.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('/pages/seller/order/order-list?listType=4')"
							hover-class="common-hover"
							:hover-stay-time="50"
						>
							<view class="order-icon">
								<image :src="staticUrl + 'icon_order_4@2x.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('/pages/seller/order/order-list?listType=5')"
							hover-class="common-hover"
							:hover-stay-time="50"
						>
							<view class="order-icon">
								<image :src="staticUrl + 'icon_order_5@2x.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 twoList"
						:key="index"
						@click="navigator(item.path)"
						hover-class="cell-hover"
						:hover-stay-time="50"
					>
						<view class="cell-icon">
							<image class="cell-icon-image" :src="staticUrl + item.icon" mode=""></image>
						</view>
						<text class="cell-tit">{{ item.name }}</text>
						<text class="cell-more iconfont icon-xiangyou"></text>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<button class="list-cell" open-type="contact" @bindcontact="handleContact">
						<view class="cell-icon">
							<image class="cell-icon-image" :src="staticUrl + 'icon_club_5@2x.png'" mode=""></image>
						</view>
						<text class="cell-tit"> 官方客服 </text> <text class="cell-more iconfont icon-xiangyou"></text>
					</button>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<!-- 技术支持 -->
		<view class="copyright">
			<image class="image" :src="staticUrl + 'icon_caimei@2x.png'"></image>
			<view class="text">由采美365网提供技术服务</view>
		</view>
	</view>
</template>
<script>
import authorize from '@/common/config/authorize.js'
import { mapState, mapMutations } from 'vuex'

export default {
	data() {
		return {
			nvabarData: {
				//顶部自定义导航
				showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
				showSearch: 0,
				title: '账户中心', // 导航栏 中间的标题
				haveBack: false,
				textLeft: this.$store.state.isIphone,
				textColor: '#FFFFFF',
				bgColor: ''
			},
			staticUrl: this.global.staticUrl,
			CustomBar: this.CustomBar, // 顶部导航栏高度
			StatusBar: this.StatusBar,
			bgImgUrl: 'https://static.caimei365.com/app/mini-mcare/icon/icon_header@2x.png',
			name: '',
			userId: '',
			orderNum: 0, //未查看订单数量
			beforeConfirmCount: 0, //待确认角标
			beforePayCount: 0, //待付款角标
			beforeShipCount: 0, //待发货角标
			shippedCount: 0, //已发货角标
			refundsCount: '', //退货/款角标
			institutionsCont: 120,
			twoList: [
				{
					name: '帮机构采购',
					path: '/pages/seller/club/club-list',
					icon: 'icon_club_7@2x.png'
				}
			]
		}
	},
	filters: {
		nameFilters(value) {
			if(value && value.length>15){
				return value.substring(0,15)+"..." 
			}else{
				return value
			}
		}
	},
	created() {
		this.initData()
	},
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	methods: {
		...mapMutations(['login', 'logout']),
		async initData() {
			const user = await this.$api.getStorage()
			this.userId = user.userId
			this.name = user.userName //协销名称
			this.getUserSellerHome()
		},
		async getUserSellerHome() {
			try{
				const res = await this.SellerService.GetSellerHome({ userId: this.userId })
				const data = res.data
				this.getOrderCount(data.serviceProviderId)
			}catch(error){
				this.$util.msg(error.msg, 2000)
			}
		},
		async getOrderCount(serviceProviderId) {
			try{
				const res = await this.SellerService.GetOrderCount({ serviceProviderId: serviceProviderId })
				const data = res.data
				this.beforeConfirmCount = this.showBadge(data.confirmedCount) //待确认
				this.beforePayCount = this.showBadge(data.paymentCount) //待付款
				this.beforeShipCount = this.showBadge(data.waitShipmentsCount) //待发货
				this.shippedCount = this.showBadge(data.shipmentsCount) //已发货
				this.refundsCount = this.showBadge(data.salesReturnCount) //退货/款
				this.orderNum = this.showBadge(data.uncheckedOrderCount) //未查看订单数量
			}catch(error){
				console.log(error)
			}
		},
		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;
}
.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;
			.user-item-none{
				font-size: $font-size-32;
				line-height: 120rpx;
				color: #ffffff;
				text-align: left;
				display: inline-block;
			}
		}
	}
	.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, 0.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-image {
	width: 100%;
	height: 168rpx;
	background: url(https://static.caimei365.com/app/meibohui/app/activity-small-banner@2x.png);
	background-size: cover;
	box-sizing: border-box;
	margin-bottom: 24rpx;
	.text {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 38rpx 56rpx;
		.h1 {
			line-height: 50rpx;
			font-size: $font-size-36;
			color: #ffffff;
		}
		.p {
			line-height: 34rpx;
			font-size: $font-size-30;
			color: #ffffff;
		}
	}
}
.list-cell-item {
	width: 654rpx;
	height: auto;
	margin-bottom: 24rpx;
	padding: 0 24rpx;
	background: $bg-color;
	border-radius: 20rpx;
}
.list-cell {
	width: 100%;
	line-height: 100rpx;
	position: relative;
	background: $bg-color;
	border-bottom: 1px solid #ebebeb;
	height: 100rpx;
	&:last-child {
		border-bottom: none;
	}
	&.cell-hover {
		background: #fafafa;
	}
	.cell-icon {
		width: 60rpx;
		height: 100rpx;
		text-align: center;
		box-sizing: border-box;
		padding: 32rpx 12rpx;
		float: left;
		.cell-icon-image {
			width: 36rpx;
			height: 36rpx;
			display: block;
		}
	}
	.cell-more {
		width: 60rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: right;
		position: absolute;
		right: 0;
		top: 0;
		font-size: $font-size-28;
		color: #666666;
		.txt {
			color: #fb4343;
			padding-right: 10rpx;
		}
	}
	.cell-tit {
		width: 465rpx;
		display: block;
		float: left;
		font-size: $font-size-28;
		color: #666666;
		margin-right: 10rpx;
		text-align: left;
	}
	.cell-tip {
		font-size: $font-size-28;
		color: $text-color;
	}
}
.list-cell.last {
	border-bottom: none;
}
.uni-badge--small {
	-webkit-transform: scale(0.8);
	-ms-transform: scale(0.8);
	transform: scale(0.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;
}
.copyright {
	width: 100%;
	position: absolute;
	bottom: 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	image {
		width: 180rpx;
		height: 60rpx;
	}
	.text {
		font-size: 20rpx;
		color: #cccccc;
	}
}
</style>