Client-Teapay/src/pagesB/cinema/confirmOrder.vue

<template>
    <div class="confirmOrder">
        <div class="MoviceInfo card">
            <img :src="OrderDa.m.posterUrl" alt="" class="l_img">
            <div class="r_info">
                <div class="p_tit">{{ OrderDa.m.movieName }}</div>
                <div class="p1 p_num">共{{OrderDa.oldArray.length}}张，原价￥{{cartTotal}}</div>
                <div class="p1">{{ OrderDa.s.showTime }}</div>
                <div class="p1">
                    <span>{{ OrderDa.s.hallName }}</span>
                    <span v-for="(i,s) in OrderDa.oldArray" :key="s">{{ i.seatNo }}</span>
                </div>
                <div class="p1">{{ cinemaInfo.restaurant_name }}</div>
                <div class="p1">{{ cinemaInfo.restaurant_address }}</div>
            </div>
        </div>
        <div class="phone card flex_r flex_jb">
            <span>联系方式</span>
            <span>{{ userinfo.mobile }}</span>
        </div>
        <div class="money card">
            <div class="li flex_r flex_jb">
                <span>消费金额</span>
                <span>￥{{ cartTotal || 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="msg card">
            <div class="m_tit">购票须知</div>
            <p>1.请确认场次和时间无误，购买成功后将不予退换</p>
            <p>2.由于设备故障等不可抗力因素，存在少量场次取消的情况，会进行退票退款</p>
            <p>3.由于影院系统不稳定等因素，存在出票失败的情况，会进行退款</p>
            <p>4.取票码可以在“我的-本地生活-历史订单”中查看</p>
        </div>

        <div class="btnbar" @click="pay">立即支付</div>
    </div>
</template>

<script>
import { ToPayOpre } from "@/utils/reqTools.js";
let toPayOpre = new ToPayOpre();
import { post } from "@/request/api.js";
export default {
    name: "confirmOrder",
    props: {},
    components: {},
    data() {
        return {
            OrderDa: uni.getStorageSync("confirmOrder"),
            cinemaInfo: uni.getStorageSync("cinemaItem"),
            userinfo: uni.getStorageSync("userinfo"),
            cartTotal: 0,
            Integral: 0,
            deduction: 0,
            actuallypaid: 0,
            chabao: 0,
        };
    },
    methods: {
        getIntegral(){
            post("local/getIntegral",{type:2}).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.cartTotal,i1).toFixed(2);
                    this.actuallypaid = this.$h.Sub(this.cartTotal,this.deduction);
                    this.chabao = this.$h.Mul(this.actuallypaid,i2).toFixed(2);
                }
            })
        },
        pay(){
            let ar = []
            for (let it of this.OrderDa.oldArray) {
                ar.push({
                    seatId: it.SeatCode,
                    seatName: it.seatNo
                })
            }
            let da = {
                cinemaId: this.cinemaInfo.restaurant_id,
                showId: this.OrderDa.s.showId,
                phone: this.userinfo.mobile,
                showInfor: JSON.stringify(ar)
            }
            post("local/cinemaOrder", da).then(res => {
                if (res.code == 0 && res.data.prepayid) {
                    toPayOpre.toPay(res.data, (rea) => {
                      if (!rea) {
                        // 支付成功
                        this.goto("/pagesB/orderingfood/orderlist")
                      } else {
                        // 支付失败
                      }
                    });
                }
            })
        }
    },
    onLoad(da) {
        for (let p of this.OrderDa.oldArray) {
            this.cartTotal = this.$h.Add(this.cartTotal,p.Price)
        }
        this.getIntegral()
    },
    onShow() {},
    mounted() {},
};
</script>

<style scoped lang='scss'>
.confirmOrder{
    padding: 30rpx;
}
.card {
    background-color: #fff;
    border-radius: 26rpx;
    margin-bottom: 30rpx;
    padding: 28rpx 30rpx;
    font-size: 32rpx;

    &:last-child {
        margin-bottom: 0;
    }
}
.MoviceInfo{
    .l_img,.r_info{
        display: inline-block;
        vertical-align: top;
    }
    .l_img{
        width: 188rpx;
        height: 280rpx;
        border-radius: 8rpx;
    }
    .r_info{
        width: calc(100% - 188rpx);
        padding-left: 28rpx;
    }
    .p_tit{
        font-size: 36rpx;
        font-weight: bold;
        margin-bottom: 16rpx;
    }
    .p1{
        margin-top: 6rpx;
        font-size: 25rpx;
        color: #666;
        span{
            margin-right: 16rpx;
        }
    }
    .p_num{
        font-size: 24rpx;
        color: #999;
    }
}
.money{
    .li{
        margin-bottom: 16rpx;
        &:last-child{
            margin-bottom: 0;
        }
        span{
            font-size: 30rpx;
        }
    }
    .corg{
        color: #EB5A5F;
        margin-left: 5rpx;
    }
}
.msg{
    .m_tit{
        font-size: 30rpx;
        margin-bottom: 12rpx;
    }
    p{
        font-size: 24rpx;
        color: #999;
        margin-bottom: 6rpx;
    }
}
.btnbar{
  width: calc(100% - 60rpx);
  height: 80rpx;
  background: #EB5A5F;
  border-radius: 45rpx;
  position: fixed;
  bottom: 50rpx;
  left: 30rpx;
  color: #fff;
  font-size: 36rpx;
  text-align: center;
  line-height: 80rpx;
}
</style>