Client-Teapay/src/pagesB/scenicSpotTicket/scenicDetail.vue

<template>
    <div class="scenicDetail">
        <div class="card">
            <div class="productName">{{ D.productName }}</div>
            <div class="advanTime" v-if="D.advanceDay == 0">
                <span class="corg">{{ D.advanceTime }}</span><span>前可订今日</span>
            </div>
            <div class="oderinfo">
                <div class="tit">选择日期</div>
                <scroll-view class="scroll_view" :scroll-x="true">
                    <div class="rommnum">
                        <div :class="{'r_num':true,'active':selectDay.date==i.date}" v-for="(i,s) in D.priceCalendar" :key="s" @click="onSelectDay(i)">{{ thatDay(i.date) }}</div>
                    </div>
                </scroll-view>
            </div>
            <div class="oderinfo flex_r flex_jb flex_ac">
                <div class="tit">购买数量</div>
                <numbox v-model="qda.quantity" :min="D.minBuyCount" :max="D.maxBuyCount" @change="computef"/>
            </div>
        </div>
        <div class="card uinfo">
            <div class="tit">游客信息</div>
            <div class="user_item" v-for="(i,s) in users" :key="s">
                <div class="p flex_r flex_jb flex_ac">
                    <span class="label">出游人：</span>
                    <input v-model="i.name"  placeholder="请填写游客真实姓名" placeholder-class="inp_pl"/>
                </div>
                <div class="p flex_r flex_jb flex_ac">
                    <span class="label">手机号：</span>
                    <input v-model="i.mobile"  placeholder="请填写游客联系方式" placeholder-class="inp_pl"/>
                </div>
                <div class="p flex_r flex_jb flex_ac" v-if="[2,4].includes(D.touristInfoType)">
                    <span class="label">身份证：</span>
                    <input v-model="i.cardNo"  placeholder="请填写与姓名一致的身份证号" placeholder-class="inp_pl"/>
                </div>
            </div>
        </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 mar_b60">
            <div class="li flex_r flex_jb">
                <span>赠送贡献值</span>
                <span>{{ chabao || 0 }}</span>
            </div>
        </div>
        <div class="scenic_msg" v-if="D.bookNotice">
            <div class="title">预订说明</div>
            <div class="smsg" v-for="(i,s) in D.bookNotice" :key="s">
                <div class="stit">{{ i.name }}</div>
                <div class="msg_con" v-html="i.value"></div>
            </div>
        </div>
        <div class="scenic_msg" v-if="D.costDescription">
            <div class="title">费用说明</div>
            <div class="smsg" v-for="(i,s) in D.costDescription" :key="s">
                <div class="stit">{{ i.name }}</div>
                <div class="msg_con" v-html="i.value"></div>
            </div>
        </div>
        <div class="scenic_msg" v-if="D.refundChangeRule">
            <div class="title">退改说明</div>
            <div class="smsg" v-for="(i,s) in D.refundChangeRule" :key="s">
                <div class="stit">{{ i.name }}</div>
                <div class="msg_con" v-html="i.value"></div>
            </div>
        </div>
        <div class="scenic_msg" v-if="D.useDescription">
            <div class="title">使用说明</div>
            <div class="smsg" v-for="(i,s) in D.useDescription" :key="s">
                <div class="stit">{{ i.name }}</div>
                <div class="msg_con" v-html="i.value"></div>
            </div>
        </div>
        <div class="scenic_msg" v-if="D.otherDescription">
            <div class="title">其他说明</div>
            <div class="smsg" v-for="(i,s) in D.otherDescription" :key="s">
                <div class="stit">{{ i.name }}</div>
                <div class="msg_con" v-html="i.value"></div>
            </div>
        </div>
        <div class="footbtn" @click="onpay">立即支付</div>
    </div>
</template>

<script>
import numbox from "@/pagesB/components/number-box/number-box.vue"
import { post } from "@/request/api.js";
import { ToPayOpre } from "@/utils/reqTools.js";
let toPayOpre = new ToPayOpre();
import { getThatDay } from "@/utils/myfun.js"
export default {
    name: "scenicDetail",
    props: {},
    components: { numbox },
    data() {
        return {
            qda: {
                quantity: 1
            },
            D: {}, // 门票详情
            selectDay: {},
            userinfo: uni.getStorageSync("userinfo"),
            users: [],

            ratio: {},
            cartTotal: 0,
            Integral: 0,
            deduction: 0,
            actuallypaid: 0,
            chabao: 0,
        };
    },
    methods: {
        getDetail(da) {
            post("local/ticket/ticketDetail", da).then((res) => {
                if (res.code == 0) {
                    let da = res.data.data;
                    if(da.bookNotice) da.bookNotice = JSON.parse(da.bookNotice);
                    if(da.costDescription) da.costDescription = JSON.parse(da.costDescription);
                    if(da.otherDescription) da.otherDescription = JSON.parse(da.otherDescription);
                    if(da.refundChangeRule) da.refundChangeRule = JSON.parse(da.refundChangeRule);
                    if(da.useDescription) da.useDescription = JSON.parse(da.useDescription);
                    this.qda.quantity = da.minBuyCount
                    if([3,4].includes(da.touristInfoType)){
                        this.users.length = da.unitQuantity
                    }
                    this.selectDay = da.priceCalendar[0];
                    this.getIntegral();

                    this.D = da;
                }
            });
        },
        getIntegral() {
            post("local/getIntegral", { type: 4 }).then((res) => {
                if (res.code == 0) {
                    this.ratio = res.data;
                    this.computef();
                }
            });
        },
        computef() {
            let { integral, chabao } = this.ratio
            let i1 = integral, i2 = chabao;
            this.cartTotal = this.$h.Mul(this.selectDay.marketPrice, this.qda.quantity);
            this.Integral = this.$h.Mul(i1, 100);
            this.deduction = this.$h.Mul(this.cartTotal, i1);
            this.actuallypaid = this.$h.Sub(this.cartTotal, this.deduction);
            this.chabao = this.$h.Mul(this.actuallypaid, i2).toFixed(2);
        },
        onSelectDay(va){
            this.selectDay = va
        },
        onpay() {
            let that = this
            let localInfo = uni.getStorageSync("localInfo");
            let um = localInfo.property;
            let str = um > this.actuallypaid ? "将优先使用付宝抵扣" : "将使用付宝抵扣部分支付"
            if(um > 0){
                uni.showModal({
                    title: "温馨提示",
                    content: `您的可用付宝为 ${um}，` + str,
                    showCancel: true,
                    confirmText: "确认",
                    confirmColor: "#f02f2f",
                    success(res) {
                        if (res.confirm) {
                            that.payok();
                        }
                    },
                });
            }else this.payok();
        },
        payok(){
            let type = "";
            // #ifdef  H5
			type = "H5";
			// #endif
			// #ifdef  APP
			type = "app";
			// #endif
			// #ifdef  MP-WEIXIN
			type = "jsapi";
			// #endif

            let da = {
                ...this.qda,
                travelDate: this.selectDay.date,
                contact: JSON.stringify(this.users[0]),
                tourists: JSON.stringify(this.users),
                productID: this.qda.productId,
                ...this.users[0],
                trade_type: type,
            }
            post("local/ticket/addOrder", da).then(res => {
                if(res.data && res.data != 200){
                    let data = JSON.parse(res.data)
                    data.prepayid = data.package?data.package.split('prepay_id=')[1]:''
                    if (res.code == 0 && data.prepayid) {
                        toPayOpre.toPay(data, (rea) => {
                            if (!rea) {
                                // 支付成功
                                this.goto("/pagesB/orderingfood/orderlist")
                            } else {
                                // 支付失败
                            }
                        });
                    }
                }else if (res.code == 0 && res.data == 200) this.goto("/pagesB/orderingfood/orderlist")
            })
        },
        thatDay(va){
            let s = getThatDay(va);
            if(s) {
                return s + " " + va.slice(5)
            }else return va
        }
    },
    onLoad(da) {
        this.qda = { ...this.qda, ...da };
        this.users[0] = {
            // name: this.userinfo.nickname,
            mobile: this.userinfo.mobile
        }
        this.getDetail(da);
    },
    onShow() {},
    mounted() {},
};
</script>

<style scoped lang='scss'>
.mar_b60 {margin-bottom: 60rpx;}
.scenicDetail{
    padding: 28rpx 32rpx 110rpx;
}

.productName{
    font-size: 30rpx;
    font-weight: 600;
}
.advanTime{
    font-size: 25rpx;
    .corg{
        color: #18bb88;
    }
}
.oderinfo{
    margin-top: 30rpx;
    .tit{
        font-size: 28rpx;
        font-weight: 600;
        margin-bottom: 16rpx;
    }
    .rommnum{
        white-space: nowrap;
        .r_num{
            display: inline-block;
        }
    }
}
.rommnum {
    white-space: nowrap;

    .r_num {
        display: inline-block;
        margin-right: 18rpx;
        padding: 10rpx 20rpx;
        font-size: 26rpx;
        border-radius: 8rpx;
        border: 1rpx solid rgba($color: #000, $alpha: 0.032);
        background-color: rgba($color: #000, $alpha: 0.032);

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

        &.active {
            border-color: rgba($color: #00B76C, $alpha: 0.36);
            background-color: rgba($color: #00B76C, $alpha: 0.06);
        }
    }
}
.uinfo{
    .tit{
        font-size: 28rpx;
        font-weight: 600;
        margin-bottom: 16rpx;
    }
    .user_item{
        border-radius: 10rpx;
        background-color: rgba($color: #000, $alpha: 0.05);
        padding: 8rpx 26rpx;
        .p{
            padding: 3rpx 6rpx;
            font-size: 26rpx;
        }
        .label{
            width: 120rpx;
        }
        input{
            width: calc(100% - 130rpx);
        }
    }
}
.scenic_msg {
    margin-bottom: 60rpx;
    .title {
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 16rpx;
    }

    .msg_con {
        font-size: 24rpx;
        color: #555;
        margin-top: 16rpx;
    }

    .smsg{
        margin-bottom: 30rpx;
        &:last-child{
            margin-bottom: 0;
        }
    }
    .stit{
        padding-left: 12rpx;
        font-size: 26rpx;
        height: 26rpx;
        line-height: 26rpx;
        border-left: 6rpx solid #00B76C;
    }
}
.money {
    .li {
        margin-bottom: 16rpx;

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

        span {
            font-size: 30rpx;
        }
    }

    .corg {
        color: #18bb88;
        margin-left: 12rpx;
    }
}
.card {
    background-color: #fff;
    border-radius: 16rpx;
    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;
    }
}
.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;
}
</style>