Client-Teapay/src/pagesB/hotel/orderDetail.vue

<template>
    <div class="orderDetail">
        <div class="card">
            <div class="hotelName">{{ hotel.hotelName }}</div>
            <div class="address">{{ hotel.address }}</div>
            <div class="btnico flex_r flex_jb">
                <div class="btn_i" @click="openm">
                    <span class="iconfont">&#xe8ae;</span>
                    <div class="t">查看地图</div>
                </div>
                <div class="btn_i" @click="PhoneCall(hotel.phone)">
                    <span class="iconfont">&#xe8ad;</span>
                    <div class="t">联系酒店</div>
                </div>
            </div>
            <div class="roominfo">
                <div class="name">{{ roomInfo.roomName }}</div>
                <div class="days">
                    <span>{{ daydate(roomInfo.checkInDate) }} - {{ daydate(roomInfo.checkOutDate) }}</span>
                    <span class="dn">共{{ getDaysBetween(roomInfo.checkInDate,roomInfo.checkOutDate) }}晚</span>
                </div>
                <div class="tegs">
                    <span>{{ roomInfo.windowType }}</span>
                    <span>{{ roomInfo.breakfast }}</span>
                    <span>{{ roomInfo.useableArea }}</span>
                    <span>{{ roomInfo.bedType }}</span>
                </div>
                <div class="pli">
                    <div class="label">入住人</div>
                    <span>{{ qda.guestNames }}</span>
                </div>
                <div class="pli">
                    <div class="label">联系手机</div>
                    <span>{{ qda.contactMobile }}</span>
                </div>
                <div class="pli" v-if="detail.arriveTime">
                    <div class="label">预计到店</div>
                    <span>{{ qda.arriveTime }}</span>
                </div>
                <div class="pli" v-else>
                    <div class="label">入住时间</div>
                    <span>{{ qda.checkInDate + " 12:00" }}后</span>
                </div>
            </div>
        </div>
        
        <template v-if="detail && JSON.stringify(detail) != '{}'">
            <div class="card">
                <div class="tit">订单信息</div>
                <div class="pli">
                    <div class="label">订单编号：</div>
                    <span>{{ order.trade_no }}</span>
                </div>
                <div class="pli">
                    <div class="label">平台编号：</div>
                    <span>{{ detail.orderNo }}</span>
                </div>
                <div class="pli">
                    <div class="label">下单时间：</div>
                    <span>{{ order.create_time }}</span>
                </div>

            </div>
        </template>

        <template v-else>
            <div class="money card">
                <div class="li flex_r flex_jb">
                    <span>消费金额</span>
                    <span>￥{{ order.order_amount || 0 }}</span>
                </div>
                <div class="li flex_r flex_jb">
                    <span>消费券抵扣<span class="corg">{{Integral}}%</span></span>
                    <span class="corg">-￥{{ deduction || 0 }}</span>
                </div>
                <div class="li flex_r flex_jb">
                    <span>实付金额</span>
                    <span>￥{{ actuallypaid || 0 }}</span>
                </div>
            </div>
            <div class="money card">
                <div class="li flex_r flex_jb">
                    <span>赠送贡献值</span>
                    <span>{{ chabao || 0 }}</span>
                </div>
            </div>
            <div class="footbtn" @click="pay" v-if="$day().unix() < $day(order.create_time).add(15, 'm').unix() && order.status == 0">立即支付</div>
        </template>
    </div>
</template>

<script>
import { ToPayOpre } from "@/utils/reqTools.js";
let toPayOpre = new ToPayOpre();
import { getDaysBetween } from "@/utils/myfun.js"
import { post } from "@/request/api.js";
export default {
    name: "orderDetail",
    props: {},
    components: {},
    data() {
        return {
            tradeNo: "",
            hotel: {},
            detail: {},
            order: {},
            roomInfo: {},
            qda: {},

            Integral: 0,
            deduction: 0,
            actuallypaid: 0,
            chabao: 0,
        };
    },
    methods: {
        getDaysBetween,
        daydate(va) {
            return this.$day(va).format("M月DD日")
        },
        daydate2(va) {
            return this.$day(va).format("YYYY-MM-DD")
        },
        getorderDetail(da) {
            post("local/ticket/orderDetail",da).then(res => {
                if (res.code == 0) {
                    this.detail = res.data.detail.data
                    this.order = res.data.order
                    this.roomInfo = JSON.parse(res.data.order.orderGoods[0].attachment);
                    let de = JSON.parse(res.data.order.product_detail)
                    let { hotelID,checkInDate,checkOutDate } = de
                    this.gethotel({ hotelID,checkInDate,checkOutDate })
                    this.qda = de
                    this.getIntegral()
                }
            })
        },
        gethotel(da){
            post("local/hotel/detail", da).then((res) => {
                if (res.code == 0) {
                    this.hotel = res.data.data;
                }
            });
        },
        openm() {
            let latitude = this.hotel.googleLat;
            let longitude = this.hotel.googleLon;
            let name = this.hotel.hotelName;
            let address = this.hotel.address;
            uni.openLocation({
                latitude, longitude, scale: 18, name, address,
                success: function() {
                    console.log('success');
                }
            });
        },
        PhoneCall(va){
            uni.makePhoneCall({ phoneNumber: va });
        },
        getIntegral() {
            post("local/getIntegral", { type: 4 }).then(res => {
                if (res.code == 0) {
                    let i1 = res.data.integral, i2 = res.data.chabao;
                    this.Integral = this.$h.Mul(i1, 100);
                    this.deduction = this.$h.Mul(this.order.order_amount, i1);
                    this.actuallypaid = this.$h.Sub(this.order.order_amount, this.deduction);
                    this.chabao = this.$h.Mul(this.actuallypaid, i2).toFixed(2);
                }
            })
        },
        async pay() {
            let type = "";
            // #ifdef  H5
			type = "H5";
			// #endif
			// #ifdef  APP
			type = "app";
			// #endif
			// #ifdef  MP-WEIXIN
			type = "jsapi";
			// #endif
            let adres = await uni.Location();
            post("local/goOrderPay", { trade_no: this.order.trade_no,trade_type: type,location: "+"+adres.lat+'/+'+adres.lng }).then(res => {
                if(res.data && res.data != 200){
                    let data = {
                        ...res.data,
                        appId:res.data.app_id,
                        nonceStr:res.data.nonce_str,
                        package:res.data.package,
                        signType:res.data.sign_type,
                        paySign:res.data.pay_sign,
                        timeStamp:res.data.time_stamp,
                        prepayid:res.data.prepay_id
                    }
                    if (res.code == 0 && data.prepayid) {
                        toPayOpre.toPay(data, (rea) => {
                            if (!rea) {
                                // 支付成功
                                this.getTicket(this.pda);
                            } else {
                                // 支付失败
                            }
                        });
                    }
                }
            })
        },
    },
    onLoad(da) {
        this.tradeNo = da.trade_no;
        this.getorderDetail(da);
    },
    onShow() {},
    mounted() {},
};
</script>

<style scoped lang='scss'>
.orderDetail{
    padding: 28rpx 32rpx;
    .hotelName{
        font-size: 36rpx;
        font-weight: 600;
    }
    .address{
        font-size: 25rpx;
        color: #555;
        margin-top: 10rpx;
    }
    .btnico{
        padding: 26rpx 36rpx;
        margin-bottom: 10rpx;
        .iconfont{
            font-size: 40rpx;
            font-weight: bold;
        }
        .btn_i{
            text-align: center;
            .t{
                font-size: 22rpx;
                margin-top: 6rpx;
            }
        }
    }
    .roominfo{
        margin-top: 10rpx;
        .name{
            font-size: 32rpx;
            font-weight: 600;
        }
        .days{
            margin-top: 12rpx;
            font-size: 28rpx;
            .dn{
                margin-left: 16rpx;
            }
        }
        .tegs{
            font-size: 26rpx;
            margin: 12rpx 0 36rpx;
            span{
                margin-right: 12rpx;
                &:last-child{
                    margin-right: 0;
                }
            }
        }
    }
    .pli{
        margin-bottom: 10rpx;
        font-size: 26rpx;
        &:last-child{
            margin-bottom: 0;
        }
       .label{
            width: 150rpx;
            font-weight: 600;
            display: inline-block;
       } 
    }
    .tit{
        font-size: 32rpx;
        font-weight: 600;
        margin-bottom: 16rpx;
    }
}
.money {
    .li {
        margin-bottom: 16rpx;

        &:last-child {
            margin-bottom: 0;
        }

        span {
            font-size: 30rpx;
        }
    }

    .corg {
        color: #18bb88;
        margin-left: 12rpx;
    }
}
.footbtn {
    width: calc(100% - 60rpx);
    height: 80rpx;
    background: #17bb87;
    border-radius: 45rpx;
    position: fixed;
    bottom: 50rpx;
    left: 30rpx;
    color: #fff;
    font-size: 36rpx;
    text-align: center;
    line-height: 80rpx;
}
.card {
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    padding: 28rpx 30rpx;
    font-size: 32rpx;
    box-shadow: 4rpx 4rpx 8rpx 4rpx rgba(0, 0, 0, 0.12);

    &:last-child {
        margin-bottom: 0;
    }
}
</style>