cqcarbonwxapp/pages/offlineBuy/offlineBuy.vue

<template>
	<view class="pages">
		<view class="top-img">
			<image :src="$getimg + 'offlineBuy-bg.png'" class="img" mode="widthFix"></image>
		</view>
		<view class="offline-content">
			<view class="step-wrap" v-if="status == 0||status == 1||status == 2||status == 3">
				<view class="step-item" data-text="步骤一" :class="status == 0?'active':''"></view>
				<view class="step-item" data-text="步骤二" :class="status == 1?'active':''"></view>
				<view class="step-item" data-text="步骤三" :class="status == 2?'active':''"></view>
			</view>
			<view class="step-text">
				<view class="step-text-item">
					<view class="step-text-item-cn">步骤一</view>
					<view class="step-text-item-en">Step 1</view>
				</view>
				<view class="step-text-item">
					<view class="step-text-item-cn">步骤二</view>
					<view class="step-text-item-en">Step 2</view>
				</view>
				<view class="step-text-item">
					<view class="step-text-item-cn">步骤三</view>
					<view class="step-text-item-en">Step 3</view>
				</view>
			</view>
			<!-- step end -->
			<view class="step-content" v-if="status == 0">
				<view class="til">
					<image :src="$getimg + 'icon-rengou.png'" class="til-img" mode="scaleToFill"></image>
					步骤一
				</view>
				<view class="con">
					说明：感谢您的认购，生态环境厅将收到您的申请，请尽快联系生态环境厅（联系电话：{{phone01}}）签订认购协议
				</view>				
			</view>
			<view class="step-content" v-if="status == 1">
				<view class="til">
					<image :src="$getimg + 'icon-rengou.png'" class="til-img" mode="scaleToFill"></image>
					步骤二
				</view>
				<view class="con">
					说明：认购成功，请在{{time}}之前，打款到指定账户{{bankAccount}}，完成购买，如有疑问可联系
				</view>				
			</view>
			<view class="step-content" v-if="status == 2">
				<view class="til">
					<image :src="$getimg + 'icon-rengou.png'" class="til-img" mode="scaleToFill"></image>
					步骤三
				</view>
				<view class="con">
					说明：完成购买，如需开具发票可联系：{{phone03}}
				</view>				
			</view>
			
		</view>
		<view class="bottom-btn-wrap">
			<view class="bottom-btn-wrap-bg">
				<view class="bottom-btn btn" v-if="status == 0" @click="callnumber(phone01)">
					联系管理部门
				</view>
				<view class="bottom-btn btn" v-if="status == 1">
					查看订单
				</view>
				<view class="bottom-btn btn" v-if="status == 2">
					查看订单
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				$getimg:this.$getimg,
				status:0,
				time:'2020年11月11日',
				bankAccount:'6210000000000009900',
				phone01:'08121224',
				phone01:'08121212',
				phone03:'84546545',
			}
		},
		onShow() {
	
		},
		onLoad() {

		},
		methods: {
			//打电话
			callnumber(number){
				if(!number){
					uni.showToast({
						icon:'none',
						mask:true,
						title:`手机号码为空`,
						duration: 2000
					});
					return;
				};
				uni.makePhoneCall({
				    phoneNumber: number 
				});				
			},

		}
	}
</script>

<style>
	@import url("./offlineBuy.css");
</style>