home_exhibition/pages/index/successPage/index.vue

<template>
	
	<view class="content">
		 <view class="success-bg-box" :style="{backgroundImage: 'url('+imageURL+')'}">
			 <view class="title-font">科尔卡诺展会入场登记</view>
			 <view class="number-box">编号：1523</view>
			 <view v-show="pageTypes==='custom'">
				 <view class="show-tips-box">请将此编码，展示给工作人员，</view>
				 <view class="show-tips-box">方可入内，截图无效。</view>
			 </view>
		     <view v-show="pageTypes==='dealer'">
				 <view class="show-tips-box">尊敬的超级VIP客户，请将此编码，</view>
				 <view class="show-tips-box">展示给工作人员，方可入内，截图无效。</view>
		     </view> 
		 </view>
		 <view class="phone-box">
			 <view class="phone-value-box">您的专属顾问：{{salePhone}} （张经理）</view>
			 <view class="phone-tips">请保存此电话，展馆内有问题均可咨询！</view>
			 <button type="primary" @tap="callPhone">拨打</button>
		 </view>
		 <view class="footer-box">
			 <view>登记时间：{{registerDate}}</view>
		 </view>
	</view>
	
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				imageURL:'/static/dealer-success.png',
				pageTypes:'custom',
				salePhone:'13652320120',
				registerDate:'2020-07-06 12:12'
			}
		},
		onLoad(option) {
			this.pageTypes = option.types;
		},
		onShow() {
		},
		methods: {
			callPhone(){
				let that = this;
				uni.makePhoneCall({
					phoneNumber: that.salePhone
				})
			}
		}
	}
</script>

<style>
	 page{
		background: #f7f7f7!important;
	 }
	.content {
		width: 100%;
		/* height: 100%; */
		display: flex;
		flex-direction: column;
		align-items: center;
		/* justify-content: center; */
	}
	.success-bg-box {
		width: 100%;
		height: 500rpx;
		background-size: 100%;
		background-repeat: no-repeat;
		margin-top: 3%;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 28rpx;
		color: #fff;
	}
	.title-font {
		font-size: 32rpx;
		margin-top: 10%;
		margin-bottom:8%;
		opacity: .9;
	}
	.number-box {
		font-size: 66rpx;
		color: #FFFFFF;
		font-weight: bold;
		margin-bottom: 10%;
	}
	.show-tips-box {
		opacity: 0.8;
		font-size: 28rpx;
		color: #FFFFFF;
		letter-spacing: 0.3rpx;
		text-align: center;
	}
	.phone-box {
		width: 89%;
		height: 360rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 99;
		margin-top: -10px;
	}
	.phone-value-box {
		font-size: 28rpx;
		color: #4E4E4E;
		margin-top: 10%;
		margin-bottom: 3%;
	}
	.phone-tips {
		font-size: 24rpx;
		color: #4E4E4E;
	}
	.phone-box button {
		width: 25%;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 24rpx;
		border-radius: 50rpx;
		background-image: linear-gradient(-135deg, #43DC7A 0%, #0EBD66 100%)!important;
		margin-top: 10%;
	}
	.footer-box {
		width: 100%;
		position: fixed;
		bottom: 3%;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 24rpx;
		color: #B7B7B7;
		letter-spacing: 0.26rpx;
		text-align: center;
	}
</style>