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

<template>
	<view class="container cashier">
		<headerNavbar :systeminfo='systeminfo' :navbar-data='nvabarData' :headerBtnPosi ="headerBtnPosi" :page='2'></headerNavbar>
		<view class="container-cash clearfix" :style="{paddingTop:navbarHeight+'px'}">
			<view class="container-wrapper">
				<view v-if="isSuccess" class="cashier-wrapper-empty" :style="{height:emptyWrapperH+'px'}">
					<image class="cashier-wrapper-empty-image" src="https://img.caimei365.com/group1/M00/03/81/Cmis214BwaGANmv9AAE432FGJ5Q324.png"></image>
					<view class="txt">订单提交并支付成功</view>
				</view>
				<view v-else class="cashier-wrapper">
					<image src="https://img.caimei365.com/group1/M00/03/95/Cmis216Sk_SAKGNWAAEaFsvZ8c0647.png" mode=""></image>
					<view class="wrapper-text">
						<view>订单提交成功，请及时转账付款</view>
						<view><text class="red">（目前只支持网银转账）</text>否则订单将会被取消。</view>
					</view>
					<view class="wrapper-message">
						<view>支付金额：￥{{payableAmount}}</view>
						<view>订单编号：{{orderNumber}}</view>
						<view>订单标识：{{orderIdentification}} <text class="clipboard" @click="clipboard(orderIdentification)">复制</text></view>
					</view>
					<view class="wrapper-title">转账信息</view>
					<view class="wrapper-message t">
						<view>开户行：{{bankBranch}}</view>
						<view>银行卡号：{{this.$reg.bankRegex(bankNumber)}}</view>
						<view>户名：{{accountName}}</view>
					</view>
					<view class="wrapper-title">特别注意</view>
					<view class="wrapper-text warning">
						<view class="warning">请在网银转账备注中填写上述订单标识，或者直接复制本订单的订单标识，方便财务快速审核，提高发货速度。</view>
					</view>					
				</view>	
				<view class="cash-btn" :style="{paddingBottom :isIphoneX ? '68rpx' : '20rpx'}">
					<view class="btn btn-share" @click="onShareCode">分享订单<view class="tips" v-if="isShareCode">分享码：{{shareCode}}</view></view>
					<view class="btn btn-query" @click="this.$api.navigateTo('/pages/user/order/order-details?type=confim&orderID='+shareOrderID)">查看订单</view>
					<view class="btn btn-makes" @click="this.$api.switchTabTo('/pages/tabBar/home/index')">继续采购</view>
				</view>
			</view>
		</view>
		<share-alert ref="shareAlert" v-if="isShareModal" :orderID="shareOrderID"  @btnConfirm ='onShareAppMessage'></share-alert>
	</view>
</template>

<script>
	import headerNavbar from "@/components/cm-module/headerNavbar/headerNavbar.vue" //顶部自定义胶囊'
	import shareAlert from "@/components/cm-module/modelAlert/shareAlert.vue" //分享弹窗'
	const  thorui = require("@/components/clipboard/clipboard.thorui.js")
	export default{
		components:{
			headerNavbar,
			shareAlert
		},
		data(){
			return{
				userID:'',
				shareOrderID:'',
				isSuccess:false,
				isShareModal:false,
				isShareCode:false,
				stateType:'',
				payableAmount:0,
				shareCode:'',
				orderNumber:'',
				orderIdentification:'#8888#',
				bankBranch:'中信银行（深圳泰然支行）',
				bankNumber:'6217 6803 0362 0897',
				accountName:'周仁声',
				navbarHeight:'',
				emptyWrapperH: '',
				headerBtnPosi:	this.setHeaderBtnPosi(),//获取设备顶部胶囊高度
				systeminfo:this.setSysteminfo(),		 //获取设备信息
				isIphoneX:this.$store.state.isIphoneX,
				nvabarData: {							 //顶部自定义导航
					showCapsule: 1, // 是否显示左上角图标   1表示显示    0表示不显示
					title: '收银台', // 导航栏 中间的标题
				}
			}
		},
		onLoad(option) {
			this.getHeaderTopHeight()
			this.getWinHeight()
			this.initData(option)
		},
		methods:{
			initData(e){
				let data = JSON.parse(e.data);
				this.shareOrderID = data.data.orderID
				if(e.type =='success'){
					this.isSuccess = true					
				}else{
					this.orderNumber = data.data.orderNo
					this.orderIdentification = data.data.orderMark
					this.payableAmount = Number(data.data.payableAmount).toFixed(2)
				}
				this.$api.getStorage().then((resolve) => {
					this.userID = resolve.userID;
				})	
			},
			getWinHeight() {
				const query = wx.createSelectorQuery().in(this);
				query.selectAll('.cash-btn').boundingClientRect();
				query.exec(res => {
					let winHeight = this.$api.getWindowHeight(),
						btnHeight = res[0][0].height;
					this.emptyWrapperH = winHeight - btnHeight - this.navbarHeight;
				})
			},
			setHeaderBtnPosi(){
				// 获得胶囊按钮位置信息
				let headerBtnPosi = uni.getMenuButtonBoundingClientRect();
				return headerBtnPosi
			},
			setSysteminfo(){
				let systeminfo;
				uni.getSystemInfo({ // 获取设备信息
					success: (res) => {
						systeminfo = res
					},
				})
				return systeminfo
			},
			getHeaderTopHeight(){
				let statusBarHeight = this.systeminfo.statusBarHeight // 状态栏高度
				let headerPosi = this.headerBtnPosi
				let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点
				      height: headerPosi.height,
				      width: headerPosi.width,
				      // 胶囊top - 状态栏高度
				      top: headerPosi.top - statusBarHeight,
				      // 胶囊bottom - 胶囊height - 状态栏height （现胶囊bottom 为距离导航栏底部的长度）
				      bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,
				      // 屏幕宽度 - 胶囊right
				      right: this.systeminfo.screenWidth - headerPosi.right
				}
				this.navbarHeight= headerPosi.bottom + btnPosi.bottom// 原胶囊bottom + 现胶囊bottom
			},
			clipboard(data) {
				thorui.getClipboardData(data, (res) => {
					if (res) {
						this.$util.msg("复制成功",2000,true,'success');
					} else {
						this.$util.msg("复制失败",2000,true,'none');
					}
				})
			},
			onShareCode(){
				this.isShareModal = true
			},
			onShareAppMessage(res){//分享转发
				let self = this
				self.isShareModal = false
				if (res.from === 'button') {
					// 来自页面内转发按钮
					setTimeout(function(){
						self.isShareCode = true;
					},5000)
			    }
				return {
					title: '您有新的分享订单，快来查看吧~',
					path: `/pages/user/order/order-sharelogin?orderID=${this.shareOrderID}&userID=${this.userID}`,
					imageUrl:'https://img.caimei365.com/group1/M00/03/95/Cmis216Sk_SABnOFABZCgCzFV_g063.png'
				}
			},
			goIndex(){
				uni.switchTab({
				    url: '/pages/tabBar/home/index'
				});
			}
		},
		onShow() {
			
		}
	}
</script>

<style lang="scss">
	$width:100%;
	$height:100%;
	.container-cash{
		width: $width;
		.container-wrapper{
			float: left;
			width: $width;
			.cashier-wrapper-empty{
				width: $width;
				float: left;
				// min-height: 750rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				background: $bg-color;
				&-image {
					width: 330rpx;
					height: 260rpx;
					margin-bottom: 10rpx;
					margin-top: -120rpx;
				}
				.txt{
					font-size: $font-size-28;
					color: #07c160;
					line-height: 44rpx;
					font-weight: bold;
				}
			}
			.cashier-wrapper{
				width: 100%;
				height: auto;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding-top: 36rpx;
				padding-bottom: 100rpx;
				image{
					display: flex;
					width: 330rpx;
					height: 260rpx;
					margin-bottom: 22rpx;
				}
				.wrapper-text{
					font-size: $font-size-28;
					color: $text-color;
					text-align: center;
					line-height: 44rpx;
					font-weight: bold;
					margin-bottom: 30rpx;
					.red{
						color: #FF2A2A;
					}
				}
				.wrapper-text.warning{
					width:540rpx;
					text-align: justify;
					color: #FF2A2A;
					font-size: $font-size-24;
					line-height: 40rpx;
					font-weight: normal;
				}
				.wrapper-title{					
					line-height: 36rpx;
					text-align: center;
					font-size: $font-size-26;
					color: $text-color;
					margin: 48rpx 0 24rpx 0;
					font-weight: bold;
					position: relative;
					&:before{
						content: '';
						width: 210rpx;
						height: 1px;
						background: #F8F8F8;
						position: absolute;
						left: -235rpx;
						top: 18rpx;						
					}
					&:after{
						content: '';
						width: 210rpx;
						height: 1px;
						background: #F8F8F8;
						position: absolute;
						right: -235rpx;
						top: 18rpx;						
					}
				}
				.wrapper-message.t{
					width: 460rpx;
					padding: 36rpx 25rpx 36rpx 65rpx;
				}
				.wrapper-message{
					width: 400rpx;
					height: 194rpx;
					padding: 36rpx 75rpx;
					border-radius: 30rpx;
					background: rgba(255,255,255,0);
					border: 1px solid #F8C499;
					font-size: $font-size-26;
					color: $text-color;
					line-height: 64rpx;
					text-align: left;
					position: relative;
					&:before{
						content: "";
						width: 100%;
						height: 100%;
						border-radius: 30rpx;
						background: #F8C499;
						position: absolute;
						right: -20rpx;
						bottom: -20rpx;
						z-index: -1;
						opacity: 0.2;
					}
					.clipboard{
						width: 84rpx;
						height: 36rpx;
						background: linear-gradient(34deg,rgba(255,41,41,1) 0%,rgba(255,109,27,1) 100%);
						text-align: center;
						font-size: $font-size-24;
						color: #FFFFFF;
						border-radius: 6rpx;
						line-height: 36rpx;
						display: inline-block;
						margin-left: 42rpx;
					}
				}
			}
			.cash-btn{
				width: 612rpx;
				height: 64rpx;
				padding: 20rpx 69rpx;
				display: flex;
				align-items: center;
				position: fixed;
				bottom: 0;
				left: 0;
				background: #FFFFFF;
				.btn{
					width: 160rpx;
					height: 64rpx;
					margin: 0 22rpx;
					line-height: 64rpx;
					font-size:$font-size-26;
					border-radius: 10rpx;
					color: #FFFFFF;
					text-align: center;
				}
				.btn-share{
					background:linear-gradient(315deg,rgba(0,212,150,1) 0%,rgba(126,243,174,1) 100%);
					position: relative;
					.tips{
						width: 160rpx;
						height: 34rpx;
						padding: 10rpx 10rpx;
						background:linear-gradient(45deg,rgba(0,0,0,1) 0%,rgba(87,87,87,1) 100%);
						box-shadow:0px 2px 4px 0px rgba(0,0,0,0.2);
						border-radius: 8rpx;
						position: absolute;
						color: #FFFFFF;
						line-height: 34rpx;
						font-size: $font-size-24;
						text-align: left;
						left: 0;
						top: -65rpx;
						&:before{
							content: "";
							width: 25rpx;
							height: 25rpx;
							background:linear-gradient(45deg,rgba(0,0,0,1) 0%,rgba(87,87,87,1) 100%);
							position: absolute;
							bottom: -8rpx;
							left: 30rpx;
							z-index: -1;
							transform:rotate(45deg);
						}
					}
				}
				.btn-query{
					background:linear-gradient(225deg,rgba(44,180,255,1) 0%,rgba(0,115,255,1) 100%);
				}
				.btn-makes{
					background:linear-gradient(315deg,rgba(231,0,0,1) 0%,rgba(255,104,1,1) 100%);
				}
			}
		}
	}
	
</style>