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

<template>
	<view class="container details clearfix" :class="orderInfo.status !== 0 ? 'none' : ''">
		<tui-skeleton
			v-if="!skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		/>
		<template v-else>
			<!-- 地址信息 -->
			<cm-address-temp ref="orderAddress" v-if="skeletonShow" :addressData="addressData" />
			<!-- 商品信息 -->
			<cm-goods-temp ref="goods" v-if="skeletonShow" :list="orderInfo.orderProductList" :orderInfo="orderInfo" />
			<!-- 订单信息 -->
			<cm-order-temp ref="information" v-if="skeletonShow" :information="orderInfo" />
			<!-- 发票信息 -->
			<cm-invice-temp ref="invoice" v-if="skeletonShow" :orderInvoice="orderInvoice" />
			<template v-if="orderInfo.status === 0">
				<view class="tips-text" >
					<text class="iconfont icon-tishi"></text>
					点击下方按钮对订单进行确认。若未登录账号，将跳转到登录
					页面进行机构账号登录/注册，登录/注册成功后再操作确认订
					单。
				</view>
				<!-- 底部按钮 -->
				<view class="button-content" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
					<view class="btn btn-query"  @click.stop="handleConfirmOrder">确认订单</view>
				</view>
			</template>
		</template>
		<!-- 提示弹窗 -->
		<tui-modal
			:show="modal"
			@click="handleClick"
			:content="contentModalText"
			:button="modalButton"
			color="#333"
			:size="32"
			shape="circle"
			:maskClosable="false"
		/>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'	
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/common/config/wxLogin.js'
import cmAddressTemp from './components/details/cm-address-temp' //地址信息
import cmGoodsTemp from './components/details/cm-goods-temp' //商品列表
import cmInviceTemp from './components/details/cm-invice-temp' //发票信息
import cmOrderTemp from './components/details/cm-order-temp' //订单信息

export default {
	components: {
		cmAddressTemp,
		cmGoodsTemp,
		cmOrderTemp,
		cmInviceTemp
	},
	data() {
		return {
			status: '',
			userId: '',
			orderId: '',
			shopOrderId: '',
			skeletonShow: false,
			cellPhone: '', //客服电话
			btnStatus: 0, //按钮组件状态
			addressData: {}, //地址信息初始化
			orderInfo: {}, //订单信息初始化
			orderInvoice: {}, //发票信息初始化
			returnedPurchaseList: {}, //退款信息初始化
			discernReceiptList: {}, //支付信息初始化
			voucherList: [], //支付凭证
			receiptAmount: 0, //支付金额
			returnedPurchaseFee: 0, //退款金额
			isIphoneX: this.$store.state.isIphoneX,
			popupShow: false,
			handlerPros: {},
			modal: false,
			contentModalText: '确定订单无误，要确认订单吗？', //操作文字提示语句
			modalButton: [
				{
					text: '取消',
					type: 'gray',
					plain: true //是否空心
				},
				{
					text: '确定',
					customStyle: {
						color: '#fff',
						bgColor: '#F3B574'
					},
					plain: false
				}
			]
		}
	},
	computed: {
		...mapState(['hasLogin'])
	},
	onLoad(option) {
		this.shopOrderId = option.shopOrderId
		wxLogin.wxLoginAuthorize()
		this.getShopOrderById(option.shopOrderId)
	},
	methods: {
		async getShopOrderById(shopOrderId) {
			try {
				const res = await this.OrderService.getShopOrderById({ shopOrderId: shopOrderId })
				const data = res.data
				this.skeletonShow = true
				this.status = data.shopOrder.status
				this.addressData = data.userInfo
				this.orderInfo = data.shopOrder
				this.orderInvoice = data.orderInvoice
				this.returnedPurchaseList = data.returnedPurchaseList
				this.discernReceiptList = data.discernReceiptList
				this.receiptAmount = data.shopOrder.receiptAmount
				this.returnedPurchaseFee = data.shopOrder.returnedPurchaseFee
				this.voucherList = data.voucher
				this.mapStateArr.forEach(el => {
					el.val.forEach(value => {
						if (this.status === value) {
							this.btnState[el.label] = el.status
						}
					})
				})
			} catch (error) {
				this.$util.msg(error.msg, 2000)
			}
		},
		//按钮点击事件
		handleConfirmOrder() {
			if(!this.hasLogin){
				const pages = getCurrentPages()
				const page = pages[pages.length - 1]
				console.log('fullPath',page.$page.fullPath)
				uni.setStorageSync('LOGIN_REDIRECT_URL', page.$page.fullPath)
				this.$api.redirectTo('/pages/login/login')
			}else{
				this.modal = true
			}
		},
		// 确认操作
		handleClick(e) {
			if (e.index == 1) {
				this.confirmShopOrder(this.shopOrderId)
			}
			this.modal = false
		},
		//确认订单
		async confirmShopOrder(shopOrderId) {
			try {
				const usrInfo = await this.$api.getStorage()
				const res = await this.OrderService.confirmShopOrder({ shopOrderId: shopOrderId,userId:usrInfo.userId })
				this.$util.msg('订单确认成功~', 2000, true, 'success')
				setTimeout(() => {
					this.$api.redirectTo(`/pages/user/order/order-details?type=share&shopOrderId=${shopOrderId}`)
				}, 2000)
			} catch (error) {
				this.$util.msg(error.msg, 2000)
			}
		},
	},
	onShow() {}
}
</script>

<style lang="scss">
page {
	height: auto;
	background: #f7f7f7;
}
.details {
	padding-bottom: 180rpx;
	&.none{
		padding-bottom: 0;
	}
}
.btn-hover {
	background: #ffffff;
}
.animation {
	/* transition: transform 0.3s ease;*/
	transition-property: transform;
	transition-duration: 0.3s;
	transition-timing-function: ease;
}
.invoice-balance {
	width: 702rpx;
	height: auto;
	padding: 0 24rpx;
	background: #ffffff;
	float: left;
	margin-top: 24rpx;
	margin-bottom: 24rpx;
	.balabce-t {
		width: 100%;
		height: 86rpx;
		line-height: 86rpx;
		font-size: $font-size-28;
		color: $text-color;
		float: left;
		.balabce-t-le {
			float: left;
			font-weight: bold;
		}
		.balabce-t-ri {
			float: right;
			display: flex;
			align-items: center;
			.money {
				display: flex;
				float: left;
			}
			.checkbox-box {
				display: flex;
				width: 60rpx;
				float: left;
				height: 100%;
				font-size: $font-size-24;
				.checkbox {
					width: 40rpx;
					text-align: right;
					box-sizing: border-box;
					text-align: center;
					text-decoration: none;
					border-radius: 0;
					-webkit-tap-highlight-color: transparent;
					overflow: hidden;
				}
			}
		}
	}
	.balabce-b {
		width: 100%;
		float: left;
		overflow: hidden;
		.balabce-b-text {
			width: 100%;
			line-height: 58rpx;
			font-size: $font-size-24;
			color: #ff2a2a;
			text-align: right;
			float: right;
		}
		&.balabce-b--hide {
			padding: 0 0;
			height: 0px;
			line-height: 0px;
		}
	}
}
.tips-text{
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 30rpx;
	font-size: $font-size-24;
	color: #F94B4B;
	float: left;
	line-height: 40rpx;
}
.button-content {
	width: 702rpx;
	padding:24rpx 24rpx 0 24rpx;
	height: auto;
	background: #ffffff;
	position: fixed;
	bottom: 0;
	left: 0;
	.btn {
		width: 600rpx;
		height: 90rpx;
		line-height: 90rpx;
		font-size: $font-size-32;
		color: #ffffff;
		text-align: center;
		border-radius: 45rpx;
		background: #F3B574;
		margin: 0 auto;
	}
}
</style>