首页、授权页面已完成

pages.json

@@ -7,6 +7,12 @@
 				"enablePullDownRefresh": true
 			}
 		}, {
+			"path": "pages/login/authorize",
+			"style": {
+				"navigationBarTitleText": "微信授权"
+			}
+		},
+		{
 			"path": "pages/login/login",
 			"style": {
 				"navigationBarTitleText": "登录"

pages/index/index.vue

@@ -5,11 +5,45 @@
 			<!-- 用户信息 -->
 			<view class="user-info">
 				<image src="@/static/ws/default_avatar.png" mode="widthFix"></image>
-				<view class="ws-login">请登录</view>
+				<view class="ws-login" @click="toAuthorize">请登录</view>
+				<!-- <view class="user-text"> 瑞恺迪光电科技有限公司有限公司撒娇观看了 </view> -->
 			</view>
 			<!-- 背景图 -->
-			<image class="user-bg" src="@/static/ws/user_bg.png" mode="widthFix"></image
-		></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> <text class="more-right">全部订单</text> <text class="iconfont iconchakangengduo"></text> </view>
+			</view>
+			<view class="line"></view>
+			<view class="order-nav">
+				<view class="order-nav-item">
+					<image src="../../static/ws/dh_dqr_01.png" mode="widthFix"></image> <text>待确认</text>
+				</view>
+				<view class="order-nav-item">
+					<image src="../../static/ws/dh_dfk_02.png" mode="widthFix"></image> <text>待付款</text>
+				</view>
+				<view class="order-nav-item">
+					<image src="../../static/ws/dh_dfh_03.png" mode="widthFix"></image> <text>待发货</text>
+				</view>
+				<view class="order-nav-item">
+					<image src="../../static/ws/dh_yfh_04.png" mode="widthFix"></image> <text>已发货</text>
+				</view>
+				<view class="order-nav-item"> <image src="../../static/ws/dh_tk_05.png" mode="widthFix"></image> <text>退款</text> </view>
+			</view>
+		</view>
+		<!-- 订单状态区域END -->
+		<!-- 帮机构下单 -->
+		<view class="place-order">
+			<view class="place-left"> <text class="iconfont iconbangjigouxiadan"></text> <text class="title">帮机构下单</text> </view>
+			<text class="iconfont iconchakangengduo"></text>
+		</view>
+		<!-- 帮机构下单END -->
+		<!-- 客服 -->
+		<view class="ws-service"> <text class="iconfont iconzaixiankefu"></text> 在线客服 </view>
 	</view>
 </template>
 
@@ -66,6 +100,11 @@ export default {
 		...mapState(['hasLogin', 'userInfo'])
 	},
 	methods: {
+		toAuthorize(){
+			uni.navigateTo({
+				url:'/pages/login/authorize'
+			})
+		},
 		getUserInfo() {
 			let self = this
 			this.UserService.PersonalInfo({ userID: this.userID })
@@ -233,9 +272,14 @@ export default {
 
 <style lang="scss">
 @import '@/uni.scss';
+.container {
+	background: #f7f7f7;
+}
+// 用户登录信息区域
 .ws-header {
 	position: relative;
-	.user-info{
+	height: 280rpx;
+	.user-info {
 		position: absolute;
 		z-index: 10;
 		width: 750rpx;
@@ -243,20 +287,132 @@ export default {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
+		justify-content: center;
 		image {
+			display: block;
 			width: 120rpx;
 			height: 120rpx;
 			border-radius: 50%;
 		}
 	}
-	.user-bg{
-		width: 100%;
-	}
+	// 登录按钮
 	.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;
+			}
+		}
+	}
+}
+.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>

pages/login/authorize.vue

@@ -0,0 +1,58 @@
+<template>
+	<view class="container">
+		<view class="authorize">
+			<image src="../../static/ws/logo.png" mode="widthFix"></image>
+			<view class="text">
+				您暂未授权<text>维沙采购商城</text>小程序获取您的信息将无法正常使用小程序的功能，如需正常使用，请点击 “<text>授权</text>” 按钮打开头像，昵称等信息的授权
+			</view>
+			<view class="btns">
+				<button type="primary">微信授权</button>
+				<button type="default">取消</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+</script>
+
+<style lang="scss">
+	.authorize{
+		width: 572rpx;
+		margin: 180rpx auto 0;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		image{
+			width: 152rpx;
+			height: 152rpx;
+			border-radius: 50%;
+		}
+		.text{
+			font-size: 26rpx;
+			line-height: 48rpx;
+			margin: 60rpx 0;
+			color: #666;
+			text{
+				color: #333;
+			}
+		}
+		.btns{
+			button{
+				width: 540rpx;
+				height: 90rpx;
+				border-radius: 45rpx;
+				font-size: 30rpx;
+				line-height: 90rpx;
+				text-align: center;
+				margin-top: 20rpx;
+				&:last-child{
+					background-color: #fff;
+					border: 1rpx solid #b4b4b4;
+					box-sizing: border-box;
+				}
+			}
+			
+		}
+	}
+</style>