QianNiaoShop/pages/user/index.vue

<template>
	<view>
		<view class="user-top">
			<!-- <u-navbar title="我的" :is-back="false" :border-bottom="false" title-color="#ffffff"></u-navbar> -->
			<view class="user-top-bg"></view>
			<view class="e-ul">
				<view class="e-li clearfix">
					<view class="float_left"><image :src="enterprise.logo" mode="aspectFill"></image></view>
					<view class="float_left en-info">
						<view class="en-name clearfix">
							<view class="float_left" style="margin-right: 14rpx;">{{ userInfo.name || '--' }}</view>
							<view class="float_left" style="line-height: 36rpx;"><u-icon name="arrow-right" color="#879BBA" size="20"></u-icon></view>
						</view>
						<view class="shop">
							<text class="title float_left">{{ supplier_data.roleName || '' }}</text>
							<view class="en-time float_left">
								<view class="en_tig1" v-if="enterprise.expireStatus">已打烊</view>
								<view class="en_tig" v-else>营业中</view>
							</view>
						</view>
					</view>
					<!-- 	<view class="en-time">
						<text class="en_tig" v-if="enterprise.expireStatus">已打烊</text>
						<text class="en_tig" v-else>营业中</text>
					</view> -->
					<view class="enterprise">
						<view class="enterprise_btn" @click="goPage('/pages/enterprise/index','reLaunch')">
							<u-icon name="content_ico_city" custom-prefix="custom-icon" size="28"></u-icon>
							<text style="margin-left: 16rpx;">切换企业</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="profit" v-if="userInfo.staffId">
			<view class="tabs-view">
				<u-tabs
					:list="list"
					font-size="24"
					inactive-color="#5C79B0"
					:is-scroll="false"
					:current="current"
					@change="tabChange"
				></u-tabs>
			</view>
			<view class="profit-ul">
				<view class="profit-item">
					<view class="money"><text class="rmb-icon">¥</text>{{ $utils.formatNub(total_profit) }}</view>
					<view class="profit-item-list">总提成</view>
				</view>
				<view class="profit-item" style="border-left: 2rpx solid #ECF0F7;">
					<view class="money"><text class="rmb-icon">¥</text>{{ $utils.formatNub(proportion_profit) }}</view>
					<view class="profit-item-list">比例提成</view>
				</view>
				<view class="profit-item" style="border-left: 2rpx solid #ECF0F7;">
					<view class="money"><text class="rmb-icon">¥</text>{{ $utils.formatNub(goods_profit) }}</view>
					<view class="profit-item-list">商品提成</view>
				</view>
			</view>
		</view>
		<view class="menu_ul">
			<view class="model-tit">商家工具</view>
			<view class="menu_li">
				<view class="menu_li_cont" @click="goPage('/pages/index/WxCode')">
					<image src="../../static/img/ic-rjtg.png" mode=""></image>
					<view class="menu_li_text">软件推广</view>
				</view>
				<view class="menu_li_cont" @click="goPage('/pagesT/user/editPwd')">
					<image src="../../static/img/ic-xgmm.png" mode=""></image>
					<view class="menu_li_text">修改密码</view>
				</view>
				<view class="menu_li_cont" @click="goPage('/pagesT/user/editID')">
					<image src="../../static/img/ic-xgzh.png" mode=""></image>
					<view class="menu_li_text">修改账号</view>
				</view>
				<view class="menu_li_cont" @click="logout">
					<image src="../../static/img/ic-tcdl.png" mode=""></image>
					<view class="menu_li_text">退出登录</view>
				</view>
			</view>
		</view>
		<!-- 底部tabbar -->
		<Tabbar v-model="tabbar_current"></Tabbar>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	data() {
		return {
			tabbar_current: 4,
			userCenterId: '',
			goods_profit: '', //商品收益
			proportion_profit: '', //比例收益
			total_profit: '', //总收益
			current: 0,
			list: [
				{
					name: '总提成'
				},
				{
					name: '月提成'
				},
				{
					name: '日提成'
				}
			],
			supplier_data: {}
		};
	},
	computed: {
		userInfo() {
			return this.$store.state.userInfo;
		},
		enterprise() {
			return this.$store.state.enterprise;
		}
	},
	onLoad() {
		this.tabChange(0);
		// this.onShareAppMessage();
	},
	onShareAppMessage(res) {
		return {
			title: '六牛云商',
			path: '/pages/index/index'
		};
	},
	methods: {
		...mapActions({
			logout: 'logout'
		}),
		tabChange(index) {
			console.log(index,'切换');
			if(!this.userInfo.staffId){
				return
			}
			this.current = index;
			this.$u.api.getStaffInfo(this.userInfo.staffId).then(res => {
				if (this.current === 1) {
					this.proportion_profit = res.data.rewardData.rewardMonth.order;
					this.goods_profit = res.data.rewardData.rewardMonth.goods;
					this.total_profit = res.data.rewardData.rewardMonth.total;
				} else if (this.current === 2) {
					this.proportion_profit = res.data.rewardData.rewardDay.order;
					this.goods_profit = res.data.rewardData.rewardDay.goods;
					this.total_profit = res.data.rewardData.rewardDay.total;
				} else {
					this.proportion_profit = res.data.rewardData.rewardTotal.order;
					this.goods_profit = res.data.rewardData.rewardTotal.goods;
					this.total_profit = res.data.rewardData.rewardTotal.total;
				}
				this.supplier_data = res.data;
			});
		},
		...mapActions({
			logout: 'logout'
		}),
		changeEn() {
			this.goPage('/pages/enterprise/index');
		}
	}
};
</script>

<style scoped lang="scss">
.profit {
	width: 690rpx;
	margin: 0 auto;
	border-radius: 8rpx;
	box-shadow: 0rpx 40rpx 40rpx -20rpx rgba(45, 64, 94, 0.06);
	overflow: hidden;
	.tabs-view {
		border-bottom: 1rpx solid #f1f1f1;
	}

	.profit-ul {
		padding: 30rpx 0;
		display: flex;
		background-color: #ffffff;
		border-radius: 10rpx;

		.profit-item {
			flex: 3;
			text-align: center;
			font-weight: bold;

			.money {
				font-size: 32rpx;
				color: $uni-color-primary;
				font-weight: bold;
				font-family: DIN-Medium;
				.rmb-icon{
					font-size: 24rpx;
				}
			}

			.profit-item-list {
				font-weight: 400;
				margin-top: 10rpx;
				font-size: 22rpx;
				color: #62738e;
			}
		}
	}
}

.btn-view {
	width: 600rpx;
	margin: 0 auto;
}

.user-top {
	background-size: 100% 100%;
	padding-bottom: 64rpx;
	.user-top-bg {
		position: absolute;
		top: 0;
		right: 0;
		width: 585rpx;
		height: 208rpx;
		background: linear-gradient(315deg, #00fa69 0%, #ffed81 100%);
		opacity: 0.2;
		filter: blur(50rpx);
	}

	.e-ul {
		padding-top: 120rpx;

		.e-li {
			width: 700rpx;
			margin: 50rpx auto 0;
			color: #fff;
			border-radius: 10rpx;
			padding: 0 20rpx;
			position: relative;

			image {
				width: 98rpx;
				height: 98rpx;
				border-radius: 100%;
				margin-right: 16rpx;
				background-color: #ffffff;
				border: 2rpx solid #FFFFFF;
			}

			.en-time {
				margin-top: 6rpx;
				margin-left: 16rpx;
				.en_tig {
					width: 124rpx;
					height: 32rpx;
					background-color: rgb(203, 238, 226);
					color: #00c395;
					font-size: 20rpx;
					line-height: 32rpx;
					text-align: center;
				}

				.en_tig1 {
					width: 124rpx;
					height: 32rpx;
					background-color: rgb(255, 232, 233);
					color: rgb(255, 109, 116);
					font-size: 20rpx;
					line-height: 32rpx;
					text-align: center;
				}
			}

			.enterprise {
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);

				.enterprise_btn {
					width: 208rpx;
					height: 64rpx;
					font-size: 28rpx;
					color: #fff;
					background-color: #2d405e;
					line-height: 64rpx;
					text-align: center;
					border-radius: 64rpx;
				}
			}

			.en-info {
				.en-name {
					padding-top: 10rpx;
					font-weight: 700;
					font-size: 30rpx;
					color: #2d405e;
				}

				.shop {
					margin-top: 10rpx;
					font-size: 26rpx;

					.title {
						color: #b8c0c8;
						opacity: 0.8;
					}
				}
			}
		}
	}

	.user_info {
		display: flex;
		color: #fff;
		padding: 30rpx;
		align-items: center;
		font-size: 32rpx;

		.user_set {
			flex: 1;
			text-align: center;

			.tip {
				margin-top: 10rpx;
				font-size: 24rpx;
			}
		}

		.user_line {
			flex: 1;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
		}
	}
}

.menu_ul {
	background-color: #fff;
	margin-bottom: 30rpx;
	font-size: 26rpx;
	width: 690rpx;
	margin: 40rpx auto 0;
	border-radius: 8rpx;
	box-shadow: 0rpx 40rpx 40rpx -20rpx rgba(45, 64, 94, 0.06);

	.model-tit {
		padding: 0 32upx;
		line-height: 88upx;
		font-weight: bold;
		font-size: 28rpx;
		color: #2d405e;
	}

	.menu_li {
		width: 100%;
		display: flex;
		padding-bottom: 40rpx;

		.menu_li_cont {
			margin-top: 16rpx;
			flex: 1;
			text-align: center;
			image {
				margin: 0 auto;
				width: 72rpx;
				height: 72rpx;
			}
			.menu_li_text {
				font-size: 26rpx;
				color: #2d405e;
				margin-top: 16rpx;
			}
		}
	}
	.menu_li_btm {
		width: 100%;
		height: 112rpx;
		line-height: 112rpx;
		text-align: center;
		image {
			width: 290rpx;
			height: 24rpx;
		}
	}
}
</style>