caimei-applets-weisha/pages/index/index.vue

<template>
	<view class="container" :style="{ paddingTop: CustomBar + 'px' }">
		<cm-custom :navbar-data="nvabarData"></cm-custom>
		<!-- 机构信息区域 -->
		<template v-if="isRequest">
			<!-- <view class="ws-title" :style="{lineHeight :CustomBar + 'px' }">维沙采购商城</view> -->
			<view class="ws-header">
				<!-- 用户信息 -->
				<view class="user-info">
					<image src="@/static/ws/default_avatar.png" mode="widthFix"></image>
					<view
						class="ws-login"
						@click="navigator('/pages/login/login')"
						v-if="!hasLogin && isRequest"
					>
						请登录
					</view>
					<view class="user-text" v-else> {{ organizeName }} </view>
				</view>
				<!-- 背景图 -->
				<image class="user-bg" src="@/static/ws/user_bg.png" mode="widthFix"></image>
			</view>
			<!-- 机构信息END -->
			<!-- 订单状态区域 -->
			<view class="order-wrap">
				<view class="more">
					<text class="title">我的订单</text>
					<view @click="navigator('/pages/user/order/order-list?state=0')">
						<text class="more-right">全部订单</text>
						<text class="iconfont icon-chakangengduo"></text>
					</view>
				</view>
				<view class="line"></view>
				<!-- 菜单选项 -->
				<view class="order-nav">
					<view
						class="order-nav-item"
						@click="navigator('/pages/user/order/order-list?state=1')"
					>
						<image src="@/static/ws/dh_dfk_02.png" mode="widthFix"></image>
						<text>待付款</text>
						<view class="tui-badge tui-badge-box" v-if="paymentCount > 0">
							<tui-badge :scaleRatio="0.8" type="danger">{{
								paymentCount | countNum
							}}</tui-badge>
						</view>
					</view>
					<view
						class="order-nav-item"
						@click="navigator('/pages/user/order/order-list?state=2')"
					>
						<image src="@/static/ws/dh_dfh_03.png" mode="widthFix"></image>
						<text>待发货</text>
						<view class="tui-badge tui-badge-box" v-if="waitShipmentsCount > 0">
							<tui-badge :scaleRatio="0.8" type="danger">{{
								waitShipmentsCount | countNum
							}}</tui-badge>
						</view>
					</view>
					<view
						class="order-nav-item"
						@click="navigator('/pages/user/order/order-list?state=3')"
					>
						<image src="@/static/ws/dh_yfh_04.png" mode="widthFix"></image>
						<text>已发货</text>
						<view class="tui-badge tui-badge-box" v-if="shipmentsCount > 0">
							<tui-badge :scaleRatio="0.8" type="danger">{{
								shipmentsCount | countNum
							}}</tui-badge>
						</view>
					</view>
					<view
						class="order-nav-item"
						@click="navigator('/pages/user/order/order-list?state=4')"
					>
						<image src="@/static/ws/dh_tk_05.png" mode="widthFix"></image>
						<text>退货/款</text>
						<view class="tui-badge tui-badge-box" v-if="salesReturnCount > 0">
							<tui-badge :scaleRatio="0.8" type="danger">{{
								salesReturnCount | countNum
							}}</tui-badge>
						</view>
					</view>
				</view>
			</view>
			<!-- 订单状态区域END -->
			<!-- 帮机构下单 -->
			<view
				class="place-order"
				@click="navigator(`/pages/user/club/club-list?id=${organizeId}`)"
			>
				<view class="place-left">
					<text class="iconfont icon-bangjigouxiadan"></text>
					<text class="title">帮机构下单</text>
				</view>
				<text class="iconfont icon-chakangengduo"></text>
			</view>
			<!-- 帮机构下单END -->
			<!-- 客服 -->
			<button class="ws-service" open-type="contact" @bindcontact="handleContact">
				<text class="iconfont icon-zaixiankefu"></text> 在线客服
			</button>
		</template>
	</view>
</template>

<script>
import nutBadge from '@/components/thorui/tui-badge/tui-badge.vue'
import { mapState, mapMutations } from 'vuex'
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/common/config/wxLogin.js'

export default {
	components: {
		nutBadge
	},
	data() {
		return {
			nvabarData: {
				//顶部自定义导航
				showCapsule: 1, // 是否显示左上角图标  1表示显示  0表示不显示,
				showSearch: 0,
				title: '维沙采购商城', // 导航栏 中间的标题
				haveBack: false,
				textLeft: this.$store.state.isIphone,
				textColor: '#333333',
				bgColor: '#ffffff'
			},
			CustomBar: this.CustomBar, // 顶部导航栏高度
			organizeName: '', //采购员组织名称
			isRequest: false,

			paymentCount: 0, //待付款角标
			waitShipmentsCount: 0, //待收货角标
			shipmentsCount: 0, //已发货角标
			salesReturnCount: 0, //退货/款角标

			// paymentCount: 16,  //代付款
			// salesReturnCount: 1,
			// shipmentsCount: 2,
			// waitShipmentsCount: 15,

			organizeId: '',
			refresh: false
		}
	},
	onLoad() {
		// 获取用户是否授权
		//0:为取消授权 1:为已授权 2:为未操作
		authorize.getSetting().then(res => {
			if (res == 1) {
				console.log('用户已授权')
				this.GetWxAuthorize()
			} else {
				this.isRequest = true
			}
		})
	},
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	filters: {
		countNum(value) {
			const numstr = value + ''
			if (numstr.length > 2) {
				return numstr.substr(0, 2) + '+'
			} else {
				return numstr
			}
		}
	},
	methods: {
		...mapMutations(['login', 'logout']),
		// 授权登录验证
		async GetWxAuthorize() {
			// 获取微信code
			const wechatCode = await authorize.getCode('weixin')
			this.UserService.userInfoLogin({ code: wechatCode })
				.then(res => {
					// 登录成功  将信息保存在userInfo中 保存在本地和store
					this.login(res.data)
					this.organizeId = res.data.organizeId
					this.getUserInfoPersonal(this.organizeId)
					this.refresh = true
					this.isRequest = true
				})
				.catch(err => {
					// 缓存游客openid
					uni.setStorageSync('openid', err.data.openid)
					this.logout()
					this.refresh = true
					this.isRequest = true
				})
		},
		//初始化个人中心数据
		getUserInfoPersonal(organizeId) {
			this.UserService.userInfoPersonal({ organizeId: organizeId })
				.then(response => {
					console.log(response)
					this.organizeName = response.data.organizeName //采购员组织名称
					this.paymentCount = response.data.paymentCount //待付款
					this.waitShipmentsCount = response.data.waitShipmentsCount //待收货
					this.shipmentsCount = response.data.shipmentsCount //已发货
					this.salesReturnCount = response.data.salesReturnCount //退货/款
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		},
		// 客服
		handleContact(e) {
			console.log(e.detail.path)
			console.log(e.detail.query)
		},
		// 栏目跳转
		navigator(url) {
			authorize.getSetting().then(res => {
				// console.log('是否已授权',res);
				//0:为取消授权 1:为已授权 2:为未操作
				if (res == 1) {
					if (this.hasLogin) {
						// 已登录
						this.$api.navigateTo(url)
					} else {
						// 未登录
						this.$api.navigateTo(`/pages/login/login`)
					}
				} else {
					this.$api.navigateTo(`/pages/authorization/authorization`)
				}
			})
		},
		//下拉刷新
		onPullDownRefresh() {
			if (this.hasLogin) {
				this.GetWxAuthorize()
				if (this.refresh) {
					uni.stopPullDownRefresh()
				}
			} else {
				uni.stopPullDownRefresh()
			}
		},
		onShareAppMessage(res) {
			//分享转发
			this.isShareModal = false
			if (res.from === 'button') {
				// 来自页面内转发按钮
			}
			return {
				title: '维沙采购商城上线啦，快来采购吧~',
				path: `/pages/index/index`,
				imageUrl: 'https://static-b.caimei365.com/app/wisa/img/icon/icon-index.png'
			}
		}
	}
}
</script>

<style lang="scss">
@import '@/uni.scss';
.container {
	box-sizing: border-box;
	background: #f7f7f7;
}
// 用户登录信息区域
.ws-title {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	font-size: 34rpx;
	text-align: center;
}
.ws-header {
	position: relative;
	height: 280rpx;
	.user-info {
		position: absolute;
		z-index: 10;
		width: 750rpx;
		height: 280rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		image {
			display: block;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
	}
	// 登录按钮
	.ws-login {
		width: 184rpx;
		height: 56rpx;
		margin-top: 25rpx;
		border-radius: 28rpx;
		background: linear-gradient(to right, #fccd90, #b6762f);
		line-height: 56rpx;
		text-align: center;
		color: #ffffff;
		font-size: 28rpx;
	}
	// 公司名
	.user-text {
		width: 446rpx;
		margin-top: 25rpx;
		color: #fff;
		font-size: 28rpx;
		line-height: 40rpx;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.user-bg {
		width: 100%;
	}
}
.more {
	width: 750rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 23rpx 25rpx;
	box-sizing: border-box;
	background: #fff;
	.more-right {
		font-size: 26rpx;
		line-height: 37rpx;
		margin-right: 10rpx;
	}
	.title {
		font-size: 32rpx;
		line-height: 45rpx;
		color: #333333;
	}
	.iconfont {
		font-size: 20rpx;
		vertical-align: middle;
	}
}
.order-wrap {
	background: #fff;

	.line {
		width: 702rpx;
		height: 1px;
		margin: 0 auto;
		background: #f0f0f0;
	}
	.order-nav {
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		padding: 40rpx 0;
		.order-nav-item {
			position: relative;
			display: flex;
			align-items: center;
			flex-direction: column;
			image {
				width: 56rpx;
				height: 56rpx;
			}
			text {
				font-size: 26rpx;
				line-height: 37rpx;
				margin-top: 8rpx;
			}
			.tui-badge {
				position: absolute;
				top: -15rpx;
				right: -20rpx;
				z-index: 999;
			}
		}
	}
}
.place-order {
	width: 750rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 23rpx 25rpx;
	box-sizing: border-box;
	background: #fff;
	margin-top: 20rpx;
	.place-left {
		.title {
			font-size: 28rpx;
			line-height: 40rpx;
			margin-left: 10rpx;
		}
		.iconfont {
			font-size: 36rpx;
			vertical-align: middle;
		}
	}
	.iconfont {
		font-size: 20rpx;
	}
}
.ws-service {
	width: 160rpx;
	height: 48rpx;
	margin: 40rpx auto 0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 22rpx;
	background: linear-gradient(to right, #fccd90, #b6762f);
	color: #fff;
	border-radius: 24rpx;
	.iconfont {
		font-size: 30rpx;
		margin-right: 6rpx;
	}
}
</style>