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" :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>
	</view>
</template>
<script>
import authorize from '@/common/config/authorize.js'
export default {
	data() {
		return {
			isIphoneX: this.$store.state.isIphoneX,
			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
			},
			btnState: {
				isPay: false
			},
			mapStateArr: [{ label: 'isPay', val: [11, 12, 13, 21, 22, 23, 111], status: true }]
		}
	},
	onLoad(e) {
		console.log(e)
		this.params.shopOrderId = e.shopOrderId
		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&shopOrderId=${this.params.shopOrderId}`
					)
				} else if (response.code == 2) {
					// 协销查看分享订单
					this.$api.navigateTo(
						`/pages/seller/order/order-details?type=share&shopOrderId=${this.params.shopOrderId}&userId=${
							this.params.userId
						}`
					)
				} else if (response.code == 3) {
					// 游客第二次查看订单详情
					this.$api.redirectTo(
						`/pages/user/order/order-sharedetails?shopOrderId=${this.params.shopOrderId}&userId=${
							this.params.userId
						}`
					)
				} else {
					// 错误信息返回
					this.$util.modal('提示', response.msg, '确定', '', false, () => {})
				}
			})
		},
		getOrderCommodityData() {
			//查询订单商品信息s
			this.OrderService.OrderCommodityData({ shopOrderId: this.params.shopOrderId })
				.then(response => {
					const data = response.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.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?shopOrderId=${this.params.shopOrderId}&userId=${
							this.params.userId
						}`
					)
					break
			}
		},
		btnConfirmPay() {
			//监听根据付款状态做操作
			this.OrderService.OrderPaymentValidation({ orderId: this.params.shopOrderId })
				.then(response => {
					if (response.data.code == -1) {
						this.$util.modal('', '订单已申请全部退款，无需再付款！', '确定', '', false, () => {})
					} else {
						this.$api.navigateTo(`/pages/user/order/order-pay-list?shopOrderId=${this.params.shopOrderId}`)
					}
				})
				.catch(error => {
					this.$util.msg(error.msg, 2000)
				})
		}
	},
	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>