caimei-applets-weisha/pages/user/order/orderShareLogin.vue

 <template>
	<view class="container login">
		<!-- logo区域 -->
		<view class="login-main">
			<image class="logo" :src="imagePath" mode=""></image>
		</view>
		<!-- 输入框 -->
		<view class="login-input">
			<input type="number" 
				   v-model="shareCode"
				   maxlength="6" 
				   class="input" 
				   placeholder="请输入分享码"
			/>
		</view>
		<!-- 提示信息 -->
		<view class="logo-message" v-if="false"><text>分享码错误，请联系对方获取分享码</text> </view>
		<!-- 登录按钮 -->
		<button class="login-btn" :disabled="!canSubmit" @click="goLogin">查看订单</button>
	</view>
</template>
<script>
	import authorize from '@/common/config/authorize.js' 
	export default{
		data() {
			return{
				imagePath:'/static/ws/logo.png',
				shareCode:'',  		//获取用户登录的邀请码
				isUserInfo:false,	//控制显示授权弹窗
				nickName:'',		//存储用户名
				userInfo:'',		//存储微信用户授权信息
				orderID:0,			//订单ID
				userID:0			,//分享人的用户ID
				isShareStatus:false,
			}
		},
		onLoad(e) {
			console.log(e)
			this.orderID = e.orderID
			this.userID = e.userID
		},
		computed:{
			canSubmit(){
				return this.shareCode.trim().length>=6
			}
		},
		methods:{
			goLogin() {
				if(this.shareCode == ''){
					this.$util.msg('请联系分享人获取分享码',2000);
					return
				}
				if(!this.$api.isNumber(this.shareCode)){
					this.$util.msg('分享码格式不正确',2000);
					return
				}
				authorize.getCode('weixin').then(wechatcode =>{
					let params ={
							code:wechatcode,
							orderID:this.orderID,
							userID:this.userID,
							shareCode:this.shareCode
						}
					this.OrderService.OrderShareCode(params).then(response =>{
						if (response.code === 0) {//游客第一次查看订单详情
							this.$api.redirectTo('/pages/user/order/order-sharedetails?orderID='+this.orderID)
						}else{
							this.$util.msg(response.msg,2000);
						}
					})
				})
			},
		},
		onShow() {
			
		}
	}
</script>

<style lang="scss">
	.login{
		width: 100%;
		height:100%;
		background: #FFFFFF;
		.model-warp.none{
			display: none;			
		}
		.model-warp.show{
			display: block;
		}
		.login-main{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 178rpx 0 140rpx;
			.logo{
				width: 152rpx;
				height: 152rpx;
				display: block;
			}
		}
		.login-input{
			width: 550rpx;
			height: 40rpx;
			padding: 24rpx 0;
			margin: 0 auto;
			margin-bottom: 30rpx;
			background: #FFFFFF;
			border-bottom: 1px solid #E1E1E1;
			.input{
				width: 100%;
				height: 100%;
				background: #FFFFFF;
				font-size: $font-size-28;
				line-height: 40rpx;
				color: #333333;
			}
		}
		.login-btn{
			width: 600rpx;
			height: 90rpx;
			font-size: $font-size-30;
			line-height: 90rpx;
			color: #FFFFFF;
			margin: 0 auto;
			margin-top: 64rpx;
			text-align: center;
			background: $btn-confirm;
			border-radius: 44rpx;
		}
		.model-authorization{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;
			.authorization{
				width: 518rpx;
				height: 320rpx;
				position: absolute;
				background: rgba(255,255,255,.7);
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				.to-btn{
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					margin: auto;
					width: 70%;
					height: 88rpx;
					font-size: $font-size-28;
					line-height: 88rpx;
					color: #FFFFFF;
					text-align: center;
					border-radius: 44rpx;
				}
			}
		}
		.logo-message {
			font-size: 24rpx;
			line-height: 33rpx;
			color: #ff2a2a;
			display: flex;
			justify-content: center;
			align-items: center;
			&::before {
				content: '!';
				display: block;
				width: 22rpx;
				height: 22rpx;
				border: 1px solid #ff2a2a;
				border-radius: 50%;
				color: #ff2a2a;
				text-align: center;
				line-height: 22rpx;
				margin-right: 6rpx;
			}
		}
	}
</style>