caimei-applets-caimei/pages/user/order/order-sharelogin.vue

<template>
	<view class="container login" v-if="isShareStatus">
		<view class="container-main clearfix">
			<view class="main-title">此订单包含如下商品：</view>
			<view class="main-list clearfix">
				<view class="main-list-item" v-for="(item, index) in productList" :key="index">
					<view class="item-image">
						<image :src="item.image" mode="scaleToFill"></image>
					</view>
					<view class="item-mesage">
						<view class="item-name">{{item.name}}</view>
						<view class="item-num"><text>X</text>{{item.num}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="container-footer">
			<view class="login-btn" @click.stop="goLogin(1)">账号登录查看</view>
			<view class="login-btn" @click.stop="goLogin(2)">使用分享码查看</view>
			<view class="pay-statustext">
				<view class="pay-statustext-inner">
					<view class="pay-icon">
						<text class="iconfont icon-gantanhao-yuankuang"></text>
					</view>
					<view class="pay-text">
						<text>使用账号登录支持确认订单和直接付款，使用分享码只支持查看订单，不能操作</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import authorize from '@/common/config/authorize.js' 
	export default{
		data() {
			return{
				imagePath:'https://img.caimei365.com/group1/M00/03/83/Cmis214FbbCAQhKoAAKWfqqSIds292.png',
				shareCode:'',  		//获取用户登录的邀请码
				isUserInfo:false,	//控制显示授权弹窗
				isShareStatus:false,
				productList:[],
				params:{
					code:'',
					iv:'',
					encryptedData:'',
					orderId:0,			//订单ID
					userId:0,			//机构用户ID	
					serviceProviderId:0,//协销ID	
				}
			}
		},
		onLoad(e) {
			console.log(e)
			this.params.orderId = e.orderId
			this.params.userId = e.userId
			if(e.serviceProviderId){
				this.params.serviceProviderId = e.serviceProviderId
			}
			this.initQueryUser()
		},
		methods:{
			async initQueryUser(){
				const getUserInfo = await authorize.getUserInfo('weixin')
				this.params.code = await authorize.getCode('weixin')
				this.params.iv = getUserInfo.iv
				this.params.encryptedData = getUserInfo.encryptedData
				this.OrderService.OrderShareCodeIdentity(this.params).then(response =>{
					if(response.code == 0){// 初始化订单商品数据
						console.log(response.msg)
						this.getOrderCommodityData()
					}else if(response.code == 1){// 同为会所运营人员查看订单详情
						this.$api.navigateTo(`/pages/user/order/order-details?type=share&orderId=${this.params.orderId}`)
					}else if(response.code == 2){// 协销查看分享订单
						this.$api.navigateTo(`/pages/seller/order/order-details?type=share&orderId=${this.params.orderId}&userId=${this.params.userId}`)
					}else if(response.code == 3){// 游客第二次查看订单详情
						this.$api.redirectTo(`/pages/user/order/order-sharedetails?orderId=${this.params.orderId}&userId=${this.params.userId}`)
					}else{// 错误信息返回
						this.$util.modal('提示',response.msg,'确定','',false,() =>{})
					}
				})
			},
			getOrderCommodityData(){//查询订单商品信息s
				this.OrderService.OrderCommodityData({orderId:this.params.orderId}).then(response =>{
					this.productList = response.data
					this.isShareStatus = true
				}).catch(error =>{
					this.$util.msg(error.msg,2000)
				})
			},
			goLogin(index){
				switch(index){
					case 1:
						this.$store.commit('setLoginType',7)
						this.$store.commit('setLoginOrderId',this.params.orderId)
						this.$api.navigateTo('/pages/login/login')
						break
					case 2:
						this.$api.navigateTo(`/pages/user/order/orderShareLogin?orderId=${this.params.orderId}&userId=${this.params.userId}`)
						break
				}
			}
		},
		onShow() {
			
		}
	}
</script>

<style lang="scss">
	.login{
		width: 100%;
		height:100%;
		background: #F7F7F7;
		.model-warp.none{
			display: none;			
		}
		.model-warp.show{
			display: block;
		}
		.container-main{
			width: 100%;
			height: auto;
			padding-top:80rpx ;
			padding-bottom: 352rpx;
			.main-title{
				width: 100%;
				height: 80rpx;
				padding: 0 20rpx;
				background-color: #F7F7F7;
				line-height: 80rpx;
				text-align: left;
				font-size: $font-size-30;
				color: #333;
				box-sizing: border-box;
				position: fixed;
				top: 0;
				left: 0;
			}
			.main-list{
				box-sizing: border-box;
				width: 100%;
				height: auto;
				background-color: #FFFFFF;
				.main-list-item{
					box-sizing: border-box;
					width: 100%;
					height: 200rpx;
					padding: 20rpx;
					border-bottom: 1px solid #F7F7F7;
					.item-image{
						width: 160rpx;
						height: 160rpx;
						float: left;
						image{
							width: 160rpx;
							height: 160rpx;
							display: block;
						}
					}
					.item-mesage{
						width: 530rpx;
						height: 160rpx;
						float: left;
						margin-left: 20rpx;
						.item-name{
							width: 100%;
							height:84rpx;
							line-height: 42rpx;
							font-size: $font-size-28;
							color: #333333;
							text-align: justify;
							text-overflow:ellipsis;
							display: -webkit-box;
							word-break: break-all;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}
						.item-num{
							width: 100%;
							height:46rpx;
							line-height: 46rpx;
							margin-top: 30rpx;
							font-size: $font-size-28;
							color: #333333;
							text-align: left;
							text{
								font-size: $font-size-20;
							}
						}
					}
				}
			}
		}
		.login-btn{
			width: 600rpx;
			height: 88rpx;
			font-size: $font-size-28;
			line-height: 88rpx;
			color: #FFFFFF;
			margin: 0 auto;
			margin-bottom: 24rpx;
			text-align: center;
			background: $btn-confirm;
			border-radius: 50rpx;
		}
		.container-footer{
			box-sizing: border-box;
			width: 100%;
			height: 352rpx;
			padding: 0 24rpx;
			padding-top: 24rpx;
			padding-bottom: 24rpx;
			background-color: #FFFFFF;
			position: fixed;
			bottom: 0;
			left: 0;
		}
		.pay-statustext{
			width: 100%;
			height: auto;
			float: left;
			.pay-statustext-inner{
				width: 100%;
				margin: 0 auto;
				.pay-icon{
					width: 62rpx;
					height: 100%;
					float: left;
					text-align: center;
					.iconfont{
						color: $color-system;
						font-size:$font-size-36;
						line-height: 20rpx;
					}
				}
				.pay-text{
					width: 635rpx;
					height: 100%;
					float: left;
					line-height: 40rpx;
					font-size: $font-size-26;
					color: $color-system;
					text-align: justify;
				}
			}
		}
	}
</style>