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

<template>
	<view class="container login">
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		></tui-skeleton>
		<template v-else>
			<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" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
				<view class="login-btn" v-if="btnState.isPay" @click.stop="btnConfirmPay">立即支付</view>
				<view class="login-sub">
					<view class="btn" @click.stop="goLogin(1)">账号登录查看</view>
					<view class="btn" @click.stop="goLogin(2)">使用分享码查看</view>
				</view>
				<view class="pay-statustext">
					<view class="pay-statustext-inner">
						<view class="pay-text">
							<text>使用账号登录支持确认订单和直接付款，使用分享码只支持查看订单，不能操作</text>
						</view>
					</view>
				</view>
			</view>
		</template>
		<!-- 提示弹窗 -->
		<tui-modal
			:show="modal"
			@click="handleClick"
			:content="contentModalText"
			:button="modalButton"
			color="#333"
			:size="32"
			shape="circle"
			:maskClosable="false"
		>
		</tui-modal>
	</view>
</template>
<script>
import authorize from '@/common/config/authorize.js'
export default {
	data() {
		return {
			isIphoneX: this.$store.state.isIphoneX,
			shareCode: '', //获取用户登录的邀请码
			isUserInfo: false, //控制显示授权弹窗
			skeletonShow: true,
			productList: [],
			params: {
				code: '',
				iv: '',
				encryptedData: '',
				orderId: 0, //订单ID
				userId: 0, //机构用户ID
				serviceProviderId: 0 //协销ID
			},
			btnState: {
				isPay:false
			},
			mapStateArr: [
				{ label: 'isPay', val: [11, 12, 13, 21, 22, 23, 111], status: true }
			],
			modal:false,
			contentModalText: '', //操作文字提示语句
			modalButton: [
				{
					text: '确定',
					customStyle: {
						color: '#fff',
						bgColor: '#F3B574'
					},
					plain: false
				}
			]
		}
	},
	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() {
			try{
				const getUserInfo = await authorize.getUserInfo('weixin')
				this.params.code = await authorize.getCode('weixin')
				this.params.iv = getUserInfo.iv
				this.params.encryptedData = getUserInfo.encryptedData
				const res = await this.OrderService.OrderShareCodeIdentity(this.params)
				if(res.code === 0){
					// 初始化订单商品数据
					this.getOrderCommodityData()
				}else if (res.code === 1) {
					// 同为会所运营人员查看订单详情
					this.$api.navigateTo(`/pages/user/order/order-details?type=share&orderId=${this.params.orderId}`)
				} else if (res.code === 2) {
					// 协销查看分享订单
					this.$api.navigateTo(
						`/pages/seller/order/order-details?type=share&orderId=${this.params.orderId}&userId=${
							this.params.userId
						}`
					)
				} else if (res.code === 3) {
					// 游客第二次查看订单详情
					this.$api.redirectTo(
						`/pages/user/order/order-sharedetails?orderId=${this.params.orderId}&userId=${
							this.params.userId
						}`
					)
				} else {
					this.modal = true
					this.contentModalText = res.msg
				}
			}catch(error){
				// 错误信息返回
				console.log(error)
			}
		},
		async getOrderCommodityData() {
			//查询订单商品信息s
			try{
				const res = await this.OrderService.OrderCommodityData({ orderId: this.params.orderId })
				const data =  res.data
				this.productList = data.productList
				this.mapStateArr.forEach(el => {
					el.val.forEach(value => {
						if (!data.payButton && data.orderStatus === value) {
							this.btnState[el.label] = el.status
						}
					})
				})
				this.skeletonShow = false
			}catch(error){
				console.log('查询订单商品信息失败')
			}
		},
		btnConfirmPay() {
			// 待支付订单
			this.getOrderPaymentValidation(this.params.orderId)
		},
		async getOrderPaymentValidation(orderId) {
			//监听根据付款状态做操作
			try{
				const res = await this.OrderService.OrderPaymentValidation({ orderId: orderId })
				const data = res.data
				if(data.code == -1){
					this.modal = true
					this.contentModalText ='订单已申请全部退款，无需再付款！'
				}else{
					if (data.onlinePayFlag === 1) {// 只能线下
						this.$api.navigateTo(`/pages/user/pay/card-under?orderId=${orderId}`)
					} else {
						this.$api.navigateTo(`/pages/user/order/order-pay-list?orderId=${orderId}`)
					}
				}
			}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
			}
		},
		handleClick(e){
			//确认操作
			if (e.index == 1) {
				this.modal = false
			}
			this.modal = false
		},
	},
	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;
	}
	.login-sub {
		width: 600rpx;
		height: 88rpx;
		margin: 0 auto;
		margin-bottom: 24rpx;
		display: flex;
		.btn {
			flex: 1;
			width: 288rpx;
			height: 88rpx;
			box-sizing: border-box;
			border: 1px solid #b2b2b2;
			text-align: center;
			line-height: 88rpx;
			margin: 0 12rpx;
			font-size: $font-size-30;
			color: #333333;
			border-radius: 50rpx;
		}
	}
	.container-footer {
		box-sizing: border-box;
		width: 100%;
		height: auto;
		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: 600rpx;
			margin: 0 auto;
			.pay-text {
				width: 600rpx;
				height: 100%;
				float: left;
				line-height: 40rpx;
				font-size: $font-size-26;
				color: #fea785;
				text-align: justify;
			}
		}
	}
}
</style>