caimei-applets-caimei/pages/supplier/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"><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('/pages/supplier/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('/pages/supplier/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('/pages/supplier/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('/pages/supplier/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('/pages/supplier/order/order-list')"
					>
						<view class="cell-icon">
							<image
								class="cell-icon-image"
								src="https://static.caimei365.com/app/img/icon/icon_club_11@2x.png"
								mode=""
							></image>
						</view>
						<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"
					>
						<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" hover-class="cell-hover" :hover-stay-time="50">
						<view class="cell-icon">
							<image
								class="cell-icon-image"
								src="https://static.caimei365.com/app/img/icon/icon_club_5@2x.png"
								mode=""
							></image>
						</view>
						<text class="cell-tit cont">联系我们</text>
						<text class="cell-more cont" @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"
					>
						<view class="cell-icon">
							<image
								class="cell-icon-image"
								src="https://static.caimei365.com/app/img/icon/icon_club_6@2x.png"
								mode=""
							></image>
						</view>
						<text class="cell-tit">关于我们</text> <text class="cell-more iconfont icon-xiayibu"></text>
					</view>
					<view
						class="list-cell last"
						@click="this.$api.navigateTo('/pages/h5/article/page?linkType=99')"
						hover-class="cell-hover"
						:hover-stay-time="50"
					>
						<view class="cell-icon">
							<image
								class="cell-icon-image"
								src="https://static.caimei365.com/app/img/icon/icon_club_7@2x.png"
								mode=""
							></image>
						</view>
						<text class="cell-tit">帮助中心</text> <text class="cell-more iconfont icon-xiayibu"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹窗提示 -->
		<tui-modal
			:show="modal"
			@click="handleClick"
			@cancel="hideMobel"
			:content="contentModalText"
			:button="modalButton"
			color="#666666"
			:padding="'20rpx 20rpx'"
			:size="30"
			shape="circle"
			:maskClosable="false"
		>
		</tui-modal>
	</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: '/pages/supplier/user/operator/list',
					icon: 'https://static.caimei365.com/app/img/icon/icon_club_1@2x.png'
				},
				{
					name: '我的资料',
					path: '/pages/supplier/user/information',
					icon: 'https://static.caimei365.com/app/img/icon/icon_club_12@2x.png'
				},
				{
					name: '账户设置',
					path: '/pages/supplier/user/setting/setting',
					icon: 'https://static.caimei365.com/app/img/icon/icon_club_4@2x.png'
				}
			],
			modal:false,
			contentModalText:'您的供应商账号上架费将于30日后到期，到期后将无法发布和编辑商品，同时也会影响到其他采美提供的支持服务。请联系采美工作人员进行续费，联系电话0755-22907771或15338851365',
			modalButton:[
				{
					text: '确认',
					customStyle: {
						color: '#fff',
						bgColor: 'linear-gradient(90deg, #F28F31 0%, #E15616 100%)'
					},
					plain: false
				}
			]
		}
	},
	created() {
		this.initData()
	},
	filters: {
		NumFormat: function(text) {
			//处理金额
			return Number(text).toFixed(2)
		},
		BadgeType(n) {
			let num = ''
			if (n > 99) {
				num = '99+'
			} 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.modal = data.constraint === "0" ? true : false
						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)
		},
		handleClick(){
			this.modal = false
		},
		hideMobel(){
			this.modal = false
		}
	}
}
</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;
		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, 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: 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 {
	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;
		&.cont {
			width: 250rpx;
		}
		.txt {
			color: #fb4343;
			padding-right: 10rpx;
		}
	}
	.cell-tit {
		width: 465rpx;
		display: block;
		float: left;
		font-size: $font-size-28;
		color: #666666;
		margin-right: 10rpx;
		&.cont {
			width: 300rpx;
		}
	}
	.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>