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) {
		// this.orderId = e.orderId || '13140'
		// this.userId = e.userId || '13914'
		this.orderId = e.orderId
		this.userId = e.userId
	},
	computed: {
		canSubmit() {
			return this.shareCode.trim().length > 0
		}
	},
	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, 0.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>