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

<template>
    <div class="cinemaTicket">
        <template v-if="order.status != 0">
            <div class="head">
                <div class="head_tit">{{ ticket.cinemaName }}</div>
                <div class="head_con flex_r flex_jb">
                    <div class="info flex_c flex_jb">
                        <div class="cb">
                            <p class="pt">{{ ticket.movieName }}</p>
                            <p>{{ticket.showVersionType}} {{ ticket.amount }}张</p>
                        </div>
                        <div class="cb">
                            <p>{{ ticket.showTime }} 时长{{ ticket.duration }}分钟</p>
                            <p class="p">{{ ticket.hallName }} {{ ticket.seatInfos }}</p>
                        </div>
                    </div>
                    <image class="poster" mode="aspectFill" :src="ticket.posterUrl" />
                </div>
            </div>
            <div class="card qupiao">
                <div class="tit">取电影票</div>
                <div class="codebar">
                    <Uqrcode ref="uqcode" :size="150" class="code-img" />
                </div>
            </div>
            <div class="card detail">
                <div class="tit">订单详情</div>
                <view class="label">
                    <view class="title">实付金额：</view>
                    <view class="nums">￥{{ order.pay_amount }}</view>
                </view>
                <view class="label">
                    <view class="title">订单编号：</view>
                    <view class="nums">{{ ticket.tradeNo }}</view>
                </view>
                <view class="label">
                    <view class="title">购买时间：</view>
                    <view class="nums">{{ ticket.orderTime }}</view>
                </view>
                <view class="label">
                    <view class="title">手机号码：</view>
                    <view class="nums">{{ ticket.phoneNumber }}</view>
                </view>
            </div>
        </template>
        <template v-else>
            <div class="head">
                <div class="head_tit">{{ order.cinemaName }}</div>
                <div class="head_con flex_r flex_jb">
                    <div class="info flex_c flex_jb">
                            <p class="pt">{{ order.movieName }}</p>
                            <p class="p">{{ order.amount }}张</p>
                            <p class="p">原价 ￥{{ order.order_amount }}</p>
                            <p class="p">{{ order.seatInfos }}</p>
                    </div>
                    <image class="poster" mode="aspectFill" :src="order.posterUrl" />
                </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>￥{{ 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>￥{{ order.pay_amount || 0 }}</span>
                </div>
            </div>
            <div class="btnbar" v-if="ispay" @click="pay">立即支付
                <div class="msg">请在 {{ $day(order.create_time).add(15, 'm').format("YYYY-MM-DD HH:mm") }} 前完成支付</div>
            </div>
        </template>
    </div>
</template>

<script>
import { ToPayOpre } from "@/utils/reqTools.js";
let toPayOpre = new ToPayOpre();
import Uqrcode from '@/components/uqrcode/uqrcode'
import { post } from "@/request/api.js";
export default {
    name: "cinemaTicket",
    props: {},
    components: { Uqrcode },
    data() {
        return {
            pda: {},
            ticket: {},
            order: {},
            Integral: 0,
            deduction: 0,
            userinfo: uni.getStorageSync("userinfo"),

            ispay: false,
        };
    },
    methods: {
        getTicket(da){
            post("local/orderMovie",da).then(res=>{
                if (res.code == 0) {
                    if(res.data.detail.code == 200){
                        this.ticket = res.data.detail.data
                    }
                    let da =  res.data.order
                    let arr = JSON.parse(da.product_detail)
                    let obj = {
                        trade_no: da.trade_no,
                        cinemaName: da.restaurant_name,
                        movieName: da.orderGoods[0].product_name,
                        amount: da.orderGoods[0].number,
                        posterUrl: da.orderGoods[0].product_img,
                        seatInfos: arr.map(item => item.seatName).join("，"),
                        pay_amount: da.pay_amount,
                        order_amount: da.order_amount,
                        create_time: da.create_time,
                        status: da.status
                    }
                    this.order = obj;
                    this.getIntegral();

                    this.ispay = this.$day().unix() < this.$day(this.order.create_time).add(15, 'm').unix()
                }
            })
        },
        getIntegral(){
            post("local/getIntegral",{type:2}).then(res=>{
                if (res.code == 0) {
                    let i1 = res.data.integral;
                    this.Integral = this.$h.Mul(i1,100);
                    this.deduction = this.$h.Mul(this.order.order_amount,i1).toFixed(2);
                }
            })
        },
        pay() {
            post("local/goOrderPay", {trade_no: this.order.trade_no}).then(res => {
                if (res.code == 0 && res.data.data.prepayid) {
                    toPayOpre.toPay(res.data.data, (rea) => {
                      if (!rea) {
                        // 支付成功
                        this.getTicket(this.pda);
                      } else {
                        // 支付失败
                      }
                    });
                }
            })
        },
    },
    onLoad(da) {
        this.pda = da;
        this.getTicket(da)
    },
    onShow() {
        // this.$refs.uqcode.createCode("kjsdgkhg");
    },
    mounted() {},
};
</script>

<style scoped lang='scss'>
.cinemaTicket{
    padding: 28rpx 30rpx;
}
.head{
    border-radius: 20rpx;
    background-color: #fff;
    box-shadow: 4rpx 4rpx 26rpx 2rpx rgba(17, 18, 29, 0.1);
    .head_tit{
        font-size: 28rpx;
        padding: 25rpx 28rpx;
        // background-color: rgba($color: #000, $alpha: 0.05);
    }
    .head_con{
        padding: 25rpx 28rpx;
    }
    .info,.poster{
        vertical-align: text-top;
    }
    .info{
        width: calc(100% - 150rpx);
        padding-right: 30rpx;
        min-height: 220rpx;
        p{
            font-size: 26rpx;
            color: #666;
            margin-bottom: 8rpx;
        }
        .pt{
            font-weight: bold;
            color: #000;
            font-size: 30rpx;
            margin-bottom: 8rpx;
        }
        .p{
            color: #000;
        }
    }
    .poster{
        width: 150rpx;
        height: 220rpx;
        border-radius: 12rpx;
    }
}
.qupiao{
    .code-img {
      display: flex;
      flex-direction: row;
      justify-content: center;
      margin: 0 auto;
    }
    .opacity{
        opacity: 0.3;
    }
}
.detail{
    .label{
        margin-top: 15rpx;
    }
    .title,.nums{
        display: inline-block;
        font-size: 26rpx;
    }
    .title{
        color: #888;
        width: 160rpx;
    }
}
.money{
    .li{
        margin-bottom: 16rpx;
        &:last-child{
            margin-bottom: 0;
        }
        span{
            font-size: 30rpx;
        }
    }
    .corg{
        color: #E8627B;
        margin-left: 5rpx;
    }
}
.btnbar{
  width: calc(100% - 60rpx);
  height: 80rpx;
  background: #E8627B;
  border-radius: 45rpx;
  position: fixed;
  bottom: 50rpx;
  left: 30rpx;
  color: #fff;
  font-size: 36rpx;
  text-align: center;
  line-height: 80rpx;
  .msg{
    position: absolute;
    top: -80rpx;
    left: 0;
    font-size: 25rpx;
    color: #666;
    width: 100%;
    text-align: center;
  }
}
.card {
    background-color: #fff;
    border-radius: 16rpx;
    margin-top: 30rpx;
    padding: 28rpx 30rpx;
    font-size: 32rpx;
    .tit{
        height: 30rpx;
        line-height: 30rpx;
        font-size: 30rpx;
        margin-bottom: 30rpx;
        padding-left: 12rpx;
        border-left: 6rpx solid #E8627B;
    }
}
</style>