caimei-applets-caimei/pages/seller/components/user.vue

<template>
	<view class="container user clearfix">
		<cm-custom :navbar-data="nvabarData" />
		<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="https://static.caimei365.com/app/img/icon/icon-seller@3x.png" mode=""></image
					></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-xiayibu"></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="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('/pages/seller/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('/pages/seller/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('/pages/seller/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('/pages/seller/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 threeList"
						:key="index"
						@click="navigator(item.path)"
						hover-class="cell-hover"
						:hover-stay-time="50"
					>
						<view class="cell-icon">
							<image class="cell-icon-image" :src="item.icon" mode=""></image>
						</view>
						<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"
						v-for="(item, index) in firstList"
						:key="index"
						@click="navigator(item.path)"
						hover-class="cell-hover"
						:hover-stay-time="50"
					>
						<view class="cell-icon">
							<image class="cell-icon-image" :src="item.icon" mode=""></image>
						</view>
						<text class="cell-tit">{{ item.name }}</text>
						<text
							v-if="index == 1 && 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"
					>
						<view class="cell-icon">
							<image class="cell-icon-image" :src="item.icon" mode=""></image>
						</view>
						<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 { 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: ''
			},
			CustomBar: this.CustomBar, // 顶部导航栏高度
			StatusBar: this.StatusBar,
			bgImgUrl: 'https://static.caimei365.com/app/img/bg/home_cumres@2x.png',
			name: '',
			headpic: '',
			userId: '',
			serviceProviderId: '',
			skeletonShow: true,
			orderNum: 0, //未查看订单数量
			beforeConfirmCount: 0, //待确认角标
			beforePayCount: 0, //待付款角标
			beforeShipCount: 0, //待发货角标
			shippedCount: 0, //已发货角标
			refundsCount: '', //退货/款角标
			institutionsCont: 120,
			firstList: [
				{
					name: '待注册机构',
					path: '/pages/seller/club/stayClub-list',
					icon: 'https://static.caimei365.com/app/img/icon/icon_seller_1@2x.png'
				},
				{
					name: '机构列表',
					path: '/pages/seller/club/list',
					icon: 'https://static.caimei365.com/app/img/icon/icon_seller_2@2x.png'
				},
				{
					name: '拉机构上线',
					path: '/pages/seller/login/register-select',
					icon: 'https://static.caimei365.com/app/img/icon/icon_seller_3@2x.png'
				},
				{
					name: '邀请运营人员',
					path: '/pages/seller/club/allClub-list',
					icon: 'https://static.caimei365.com/app/img/icon/icon_seller_4@2x.png'
				}
			],
			twoList: [
				{
					name: '帮机构下单',
					path: '/pages/seller/club/club-list',
					icon: 'https://static.caimei365.com/app/img/icon/icon_seller_5@2x.png'
				},
				// {
				// 	name: '发布二手商品',
				// 	path: '/pages/second/form/form-select',
				// 	icon: 'https://static.caimei365.com/app/img/icon/icon_seller_6@2x.png'
				// },
				{
					name: '客户咨询记录',
					path: '/pages/seller/remarks/list',
					icon: 'https://static.caimei365.com/app/img/icon/icon_seller_7@2x.png'
				},

                {
                	name: '我的名片',
                	path: '/pages/seller/remarks/business-card',
                	icon: 'https://static.caimei365.com/app/img/icon/my-card.png'
                }
			],
			threeList: [
                {
                	name: '机构看板',
                	path: '/pages/seller/club/club-board',
                	icon: 'https://static.caimei365.com/app/img/icon/visits.png'
                }
			]
		}
	},
	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.serviceProviderId = response.data.serviceProviderId
					this.$store.commit('updateStatus', response.data)
					this.login(response.data)
					uni.setStorageSync('token', response.data.token)
					uni.setStorageSync('unionId', response.data.unionId)
                    uni.setStorageSync('spUserId', response.data.spUserId)
					this.getUserSellerHome()
					this.getOrderCount()
				} else {
					this.isLogin = false
					this.logout()
					uni.setStorageSync('unionId', response.data.unionId)
					this.$store.commit('updateStatus', response.data)
					this.$api.navigateTo('/pages/seller/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.linkMan ? sellerData.linkMan : '' //协销名称
						this.headpic = sellerData.logo //会所头像
						this.skeletonShow = false
					})
					.catch(error => {
						this.$util.msg(error.msg, 2000)
					})
			})
		},
		getOrderCount() {
			this.SellerService.GetOrderCount({ serviceProviderId: this.serviceProviderId }).then(response => {
				let data = response.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) //未查看订单数量
			})
		},
		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';
.user {
	width: 100%;
	height: 100%;
	position: relative;
	background-color: #f7f7f7;
	padding-bottom: 120rpx;
}
.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;
			.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, 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;
	padding-bottom: 120rpx;
}
.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;
	}
	.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;
}
</style>