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.productImage" 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,	//控制显示授权弹窗
				nickName:'',		//存储用户名
				userInfo:'',		//存储微信用户授权信息
				orderID:0,			//订单ID
				userID:0,			//分享人的用户ID
				isShareStatus:false,
				serviceProviderId:'',
				productList:[]
			}
		},
		onLoad(e) {
			console.log(e)
			this.orderID = e.orderID
			this.userID = e.userID
			if(e.serviceProviderId){
				this.serviceProviderId = e.serviceProviderId
			}
		},
		methods:{
			initQueryUser(){
				authorize.getCode('weixin').then(wechatcode =>{
					let params ={
							code:wechatcode,
							orderID:this.orderID,
							userID:this.userID,
							shareCode:this.shareCode,
							serviceProviderId:this.serviceProviderId
						}
					this.OrderService.OrderShareCode(params).then(response =>{
						console.log(response.code)
						if(response.code === 2){
							this.$api.navigateTo(`/pages/seller/order/order-details?type=share&orderID=${this.orderID}`)
						}else if(response.code === 0) {
							console.log(response.data)
							if(response.data == true){//同为会所运营人员查看订单详情
								this.$api.navigateTo(`/pages/user/order/order-details?type=share&orderID=${this.orderID}`)
							}else{//游客第二次查看订单详情
								this.$api.redirectTo(`/pages/user/order/order-sharedetails?orderID=${this.orderID}&userId=${this.userID}`)
							}
						}else if(response.code === -2){
							this.$util.modal('提示',response.msg,'确定','',false,() =>{})
						}else{
							console.log(response.msg);
							this.getOrderCommodityData()
						}
					})
				})
			},
			getOrderCommodityData(){//查询订单商品信息s
				this.OrderService.OrderCommodityData({orderId:this.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.orderID)
						this.$api.navigateTo('/pages/login/login')
						break;
					case 2:
						this.$api.navigateTo(`/pages/user/order/orderShareLogin?orderID=${this.orderID}&userID=${this.userID}`)
						break;
				}
			}
		},
		onShow() {
			this.initQueryUser()
		}
	}
</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: 702rpx;
			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: 14rpx;
		}
		.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>