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

<template>
	<view class="container">
		<!-- 机构信息区域 -->
		<template v-if="isRequest">
			<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"
					>
						请登录
					</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>
					<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>
					<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>
					<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>
				</view>
			</view>
			<!-- 订单状态区域END -->
			<!-- 帮机构下单 -->
			<view class="place-order" @click="navigator('/pages/user/club/club-list')">
				<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 { mapState, mapMutations } from 'vuex'
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/common/config/wxLogin.js'

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,
			organizeName:'',
			isRequest:false,
			paymentCount: 0, //待付款角标
			waitShipmentsCount: 0, //待收货角标
			shipmentsCount: 0, //已发货角标
			salesReturnCount: '' //退货/款角标
		}
	},
	onLoad() {
		authorize.getSetting().then(res => {
			//0:为取消授权 1:为已授权 2:为未操作
			if (res == 1) {
				this.getWxAuthorize()
			}
		})
	},
	computed: {
		...mapState(['hasLogin', 'userInfo'])
	},
	methods: {
		...mapMutations(['login', 'logout']),
		// 获取用户信息
		async getWxAuthorize() {
			// const wechatCode = await
			const wechatCode = await authorize.getCode('weixin')
			// 初始化用户状态
			this.UserService.userInfoLogin({code:wechatCode}).then(response=>{
				this.login(response.data);
				this.$store.commit('updateStatus',response.data)
				this.organizeName = response.data.organizeName
				this.paymentCount = this.showBadge(response.data.paymentCount) //待付款
				this.waitShipmentsCount = this.showBadge(response.data.waitShipmentsCount) //待收货
				this.shipmentsCount = this.showBadge(response.data.shipmentsCount) //已发货
				this.salesReturnCount = this.showBadge(response.data.salesReturnCount) //退货/款
				this.isRequest = true
			}).catch(error =>{
				uni.setStorage({//缓存游客用户openid
				    key: 'openid',
				    data: error.data.openid
				})
				this.logout()
			})
		},
		// 客服
		handleContact(e) {
			console.log(e.detail.path)
			console.log(e.detail.query)
		},
		navigator(url) {
			authorize.getSetting().then(wxResponse => {
				// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
				if (wxResponse == 1) {
					if (this.hasLogin) {
						this.$api.navigateTo(url)
					} else {
						this.$api.navigateTo('/pages/login/login')
					}
				} else {
					this.$api.navigateTo('/pages/authorization/authorization?type=1')
				}
			})
		},
		navigatorNex(url, type) {
			authorize.getSetting().then(wxResponse => {
				// console.log('是否已授权',res);//0:为取消授权 1:为已授权 2:为未操作
				if (wxResponse == 1) {
					if (!this.hasLogin) {
						this.$api.navigateTo(url)
					}
				} else {
					this.$api.navigateTo(`/pages/authorization/authorization?type=${type}`)
				}
			})
		},
		showBadge(n) {
			let num = ''
			if (n > 100) {
				num = 99
			} else {
				num = n
			}
			return num
		}
	},
	onPullDownRefresh() {
		//下拉刷新
		if (this.hasLogin) {
			this.getWxAuthorize()
			uni.stopPullDownRefresh()
		} else {
			uni.stopPullDownRefresh()
		}
	}
}
</script>

<style lang="scss">
@import '@/uni.scss';
.container {
	background: #f7f7f7;
}
// 用户登录信息区域
.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 {
			display: flex;
			align-items: center;
			flex-direction: column;
			image {
				width: 56rpx;
				height: 56rpx;
			}
			text {
				font-size: 26rpx;
				line-height: 37rpx;
				margin-top: 8rpx;
			}
		}
	}
}
.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>