jzhw_uni/pages/checkout/appointResult/appointResult.vue

<template>
    <view>
        <view class="container">
            <image mode="aspectFit" src="https://jzmall.lifejingzhi.com/file/jzmall/weixin/appoint-success.png" class="success-img"></image>
            <view class="success-title">恭喜您，预约成功！</view>
            <view class="success-tips">服务人员上门前会与您联系 请注意接听电话</view>
            <view class="btn-wrapper">
                <view class="view-order" @tap="goOrder">查看订单</view>
                <view class="back-index" @tap="goIndex">返回首页</view>
            </view>
        </view>

        <!-- bind:click="onClickHide" -->
        <van-overlay :show="appointShow" @click="onClickHide">
            <view class="appoint-wrapper">
                <view class="appoint-block" @tap.stop.prevent="appointClick">
                    <view class="pay-title">鲸致生活</view>
                    <view class="appoint-tips">关注抖音号 获取惊喜福利</view>
                    <view class="appoint-btn" @tap.stop.prevent="goAppoint">立即关注</view>
                </view>
            </view>
        </van-overlay>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
var app = getApp();
export default {
    data() {
        return {
            appointShow: false,
            id: ''
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        if (options.id) {
            this.setData({
                id: options.id
            });
        }
    },
    onReady: function () {},
    onShow: function () {
        // 页面显示
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
    },
    methods: {
        goIndex() {
            uni.switchTab({
                url: '/pages/index/index'
            });
        },

        goOrder() {
            uni.navigateTo({
                url: '/pages/ucenter/serviceDetail/serviceDetail?orderId=' + this.id
            });
        },

        onClickHide() {
            this.setData({
                appointShow: false
            });
        },

        appointClick() {},

        goAppoint() {
            this.setData({
                appointShow: false
            });
        }
    }
};
</script>
<style>
page {
    min-height: 100%;
    width: 100%;
    background: #f5f5f5;
}
.container {
    padding: 96rpx 0 0;
    text-align: center;
}
.container .success-img {
    width: 186rpx;
    height: 154rpx;
    margin-bottom: 42rpx;
}
.success-title {
    color: #333333;
    font-size: 32rpx;
    height: 32rpx;
    line-height: 32rpx;
}
.success-tips {
    font-size: 24rpx;
    height: 32rpx;
    line-height: 32rpx;
    margin: 32rpx 0 68rpx;
}
.container .btn-wrapper {
    display: flex;
    justify-content: space-between;
    padding: 0 154rpx;
}
.view-order {
    width: 200rpx;
    height: 70rpx;
    border: 1rpx solid #999999;
    border-radius: 70rpx;
    line-height: 70rpx;
    font-size: 30rpx;
    color: #333;
    text-align: center;
}
.back-index {
    width: 200rpx;
    height: 70rpx;
    background: #00c0ff;
    border-radius: 70rpx;
    line-height: 70rpx;
    font-size: 30rpx;
    color: #fff;
    text-align: center;
}
/* 弹框 */
.appoint-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.appoint-block {
    background: url('https://jzmall.lifejingzhi.com/file/jzmall/weixin/appoint-dia.png') no-repeat center;
    background-size: 100% 100%;
    width: 576rpx;
    height: 524rpx;
    padding-top: 248rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.appoint-block .pay-title {
    height: 30rpx;
    font-size: 30rpx;
    line-height: 30rpx;
    color: #333;
}
.appoint-block .appoint-tips {
    height: 26rpx;
    font-size: 26rpx;
    line-height: 26rpx;
    margin: 32rpx 0 70rpx;
}
.appoint-btn {
    width: 458rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 80rpx;
    text-align: center;
    color: #fff;
    background: #00c0ff;
}
</style>