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

<template>
    <div class="orderDetail">
        <div class="Detail_con" v-if="order.type==3">
            <image :src="order.product_img" class="p_img" mode="widthFix" />
            <div class="p_t">{{ order.product_name }}</div>
        </div>
        <div class="card qupiao" v-for="(detail,s) in orders" :key="s">
            <uqrcode ref="uqcode" v-if="[0,2].includes(detail.card_type)" :code="detail.unique_code" class="code-img" :size="150" />
            <tki-barcode v-if="[1,2].includes(detail.card_type)" :val="detail.unique_code" />
            <p @click="copyText(detail.card_no)" v-if="detail.card_no">
                <span>卡号：{{ detail.card_no }}</span>
                <span class="iconfont ico">&#xe602;</span>
            </p>
            <p @click="copyText(detail.card_pwd)" v-if="detail.card_pwd">
                <span>卡密：{{ detail.card_pwd }}</span>
                <span class="iconfont ico">&#xe602;</span>
            </p>
            <p @click="copyText(detail.link_url)" v-if="detail.link_url">
                <span>卡券链接：{{detail.link_url}}</span>
                <span class="iconfont ico">&#xe602;</span>
            </p>
        </div>
        <div class="money card" v-if="order.type==2">
            <div class="li flex_r flex_jb">
                <span>数量</span>
                <span>x {{ order.number }}</span>
            </div>
            <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="info card">
            <template v-if="order.type==2">
                <p>产品品牌：{{ order.restaurant_name }}</p>
                <p>产品名称：{{ order.product_name }}</p>
            </template>
            <p>账号：{{ order.phone }}</p>
            <p>数量：{{ order.number }}</p>
            <p>订单金额：￥{{ order.pay_amount }}</p>
            <p>订单编号：{{ order.trade_no }}</p>
            <p>下单时间：{{ order.create_time }}</p>
        </div>
        <div class="msg" v-html="order.product_detail"></div>
        <div class="footbtn" v-if="order.status == 0" @click="pay">立即支付</div>
    </div>
</template>

<script>
import { ToPayOpre } from "@/utils/reqTools.js";
let toPayOpre = new ToPayOpre();
import Uqrcode from '@/components/uqrcode/uqrcode';
import tkiBarcode  from "@/pagesB/components/tki-barcode/tkiBarcode.vue";
import { post } from "@/request/api.js";
import uniCopy from "@/utils/copy";
export default {
    name: "orderDetail",
    props: {},
    components: { Uqrcode, tkiBarcode  },
    data() {
        return {
            order: {},
            orders: [],
            pda: {},
            Integral: 0,
            deduction: 0,
        };
    },
    methods: {
        getOrderDetail(da) {
            post("local/coupon/orderDetail", da).then(res => {
                if (res.code == 0) {
                    let da = res.data.order
                    da.product_img = da.orderGoods[0].product_img;
                    da.product_name = da.orderGoods[0].product_name;
                    delete da.orderGoods;
                    this.order = da;
                    if(res.data.detail.code == 200){
                        this.orders = res.data.detail.data;
                    }
                    if(this.order.type==2) this.getIntegral()
                }
            })
        },
        getIntegral() {
            post("local/getIntegral", { type: 3 }).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.getOrderDetail(this.pda);
                        } else {
                            // 支付失败
                        }
                    });
                }
            })
        },
        copyText(e) {
            uniCopy({
                content: e,
                success: (res) => {},
                error: (e) => {},
            });
        },
    },
    onLoad(da) {
        this.getOrderDetail(da);
        this.pda = da;
    },
    onShow() {},
    mounted() {},
};
</script>

<style scoped lang='scss'>
.orderDetail{
    padding: 28rpx 30rpx;
}
.Detail_con{
    background-color: #fff;
    border-radius: 20rpx;
    padding: 28rpx 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 4rpx 4rpx 16rpx 10rpx rgba($color: #000, $alpha: 0.15);
    .p_img{
        width: 100%;
        border-radius: 20rpx;
    }
    .p_t{
        font-size: 30rpx;
        font-weight: bold;
    }
}
.info{
    p{
        font-size: 28rpx;
        color: #666;
        margin-bottom: 8rpx;
        &:last-child {
            margin-bottom: 0;
        }
    }
}

.qupiao {
    position: relative;
    .code-img {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin: 0 auto;
    }
    .ico{
        float: right;
    }
}
.card {
    background-color: #fff;
    border-radius: 20rpx;
    margin-bottom: 30rpx;
    padding: 28rpx 30rpx;
    font-size: 32rpx;
    box-shadow: 4rpx 4rpx 16rpx 10rpx rgba($color: #000, $alpha: 0.15);

    &:last-child {
        margin-bottom: 0;
    }
}
.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;
}
.money{
    .li{
        margin-bottom: 16rpx;
        &:last-child{
            margin-bottom: 0;
        }
        span{
            font-size: 30rpx;
        }
    }
    .corg{
        color: #18bb88;
        margin-left: 5rpx;
    }
}
.msg {
    font-size: 26rpx;
    margin-top: 50rpx;
}
</style>