470 lines
13 KiB
Vue
470 lines
13 KiB
Vue
<!-- 订单提交 -->
|
||
|
||
<template>
|
||
<view class="main">
|
||
<view class="movice">
|
||
<view class="movice-img">
|
||
<image :src="filmData.filmImg" mode=""></image>
|
||
</view>
|
||
<view class="movice-desc">
|
||
<view class="movice-title">
|
||
{{filmData.cinemaName}}
|
||
</view>
|
||
<view class="movice-time">
|
||
<view class="">{{this.getTime(filmData.showTime).month}} ({{this.getTime(filmData.showTime).date}}) {{this.getTime(filmData.showTime).time}}</view>
|
||
<view class="movice-address">{{filmData.cinemaAddress}}</view>
|
||
</view>
|
||
<view class="movice-tag">
|
||
<text>{{filmData.versionType}}</text>
|
||
<text>{{filmData.movieType}}</text>
|
||
</view>
|
||
<view class="movice-num">
|
||
{{filmData.hallName}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="address">
|
||
<view class="flex flex-space-between bt-border address-item">
|
||
<view class="title">座位</view>
|
||
<view class="gray flex">
|
||
<view style="padding-left: 20rpx;" v-for="(item, index) in filmData.showInfor">
|
||
{{item.seatName}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="flex flex-space-between address-item">
|
||
<view class="title">座位备选</view>
|
||
<view class="gray">{{filmData.autoSeatFlag? '自动选座':'非自动选座'}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 抵扣金 -->
|
||
<view class="address">
|
||
<view class="flex flex-space-between bt-border money-item">
|
||
<view class="">
|
||
<view class="old-price">原价: ￥{{__amount(filmData.price)}}</view>
|
||
<view class="number">共{{filmData.amount}}张</view>
|
||
</view>
|
||
|
||
<!-- 实际支付价格 -->
|
||
<view class="new-price">
|
||
票价合计：<text>￥{{Math.round((parseFloat(this.filmData.pay_price) - parseFloat(this.filmData.deduction_price))*100)/100}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="flex flex-space-between money-top">
|
||
<view class="title">
|
||
<view class="tip-money">
|
||
<view class="tip-icon">
|
||
<view class="white"></view>
|
||
</view>
|
||
可用消费补贴卡余额抵扣<text style="color: #E82D2D; text-align: left">￥{{__amount(filmData.deduction_price)}}</text></view>
|
||
<view class="now-money" v-if="amount < newPrice">您余额不足，实际可抵扣<view style="color: #E82D2D; text-align: left">￥{{__amount(filmData.commission_total)}}</view></view>
|
||
</view>
|
||
<view class="gray balance" style="text-align: right;">余额:￥{{ _amount(amount)}}</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="address">
|
||
<view class="flex flex-space-between bt-border address-item">
|
||
<view class="title">预计出票时间</view>
|
||
<view class="gray">{{filmData.stopSellTime}}</view>
|
||
</view>
|
||
<view class="flex flex-space-between address-item">
|
||
<view class="title">手机号码
|
||
<text>(请正确输入)</text>
|
||
</view>
|
||
<input class="phone-class" maxlength="11" v-model="FormInfor.phone_number" type="text" placeholder="请填写您的手机号码">
|
||
</view>
|
||
</view>
|
||
|
||
<view class="buyTips">
|
||
<view class="title">购票须知</view>
|
||
<view class="subtitle">
|
||
<view>1、根据中国电影发行放映协会通知，影院需实名登记观众信息，以及体温测量，未佩戴口罩或体温37.3以上不得入内，入场前请做好上述准备，以免影响观影。</view>
|
||
<view>2、特价电影票，购买成功后将不可退款、改签，支付前务必确认影片、影院、场次准确无误。</view>
|
||
<view>3、出票时间9:00-24:00，支付完成后20-60分钟内完成出票；非出票时间的订单需等待至出票时间方可出票。</view>
|
||
<view>4、出票是由平台入驻的商家提供影票代购服务，若不能出票或者所选座位已售且不接受作为调整，订单将会在24-72小时内自动退款。</view>
|
||
<view>5、取票码查收方式：手机短信；我的订单</view>
|
||
<view>6、出票成功后，在所选应援的自助取票机或者前台取票即可。</view>
|
||
</view>
|
||
</view>
|
||
<view class="totalMoney" @click="ToBuy">共{{__amount(Math.round((parseFloat(this.filmData.pay_price) - parseFloat(this.filmData.deduction_price))*100)/100)}}元 去支付</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
// 混入
|
||
import mixin from '@/static/js/mixin/mixin.js';
|
||
import film from '@/static/js/mixin/film.js';
|
||
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
|
||
import { getFilmpPlaceOrder } from '@/request/film/index.js';
|
||
import { conWalletInfoAPI } from '@/request/recharge/index.js';
|
||
export default {
|
||
mixins: [mixin, film],
|
||
data() {
|
||
return {
|
||
newPrice: 0,
|
||
amount: "",
|
||
paramsData: {},
|
||
total_price: 0, // 展示的需要支付的金额
|
||
FormInfor: {
|
||
// 手机号
|
||
phone_number: "",
|
||
},
|
||
}
|
||
},
|
||
onLoad() {
|
||
this.init()
|
||
console.log(this.filmData, '参数')
|
||
this.newPrice = this.filmData.pay_price; // 总票价
|
||
},
|
||
|
||
computed: {
|
||
...mapGetters({
|
||
filmData: 'film/filmData'
|
||
})
|
||
},
|
||
|
||
methods: {
|
||
init() {
|
||
// 获取余额
|
||
conWalletInfoAPI().then(res => {
|
||
this.amount = res.data.amount;
|
||
})
|
||
},
|
||
|
||
// 结算
|
||
ToBuy() {
|
||
if (!this['FormInfor']['phone_number'] || this['FormInfor']['phone_number']['length'] < 11 || !uni.$u.test.mobile(this['FormInfor']['phone_number'])) {
|
||
uni.showToast({
|
||
title: '请输入正确手机号',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
|
||
uni.showLoading({
|
||
title: '支付中...'
|
||
});
|
||
console.log(this.filmData, '000000')
|
||
let params = {
|
||
amount: this.filmData.showInfor.length, // 购票数
|
||
cinemaId: this.filmData.cinemaId, // 影院ID
|
||
movieId: this.filmData.movieId, // 影片ID
|
||
cinemaName: this.filmData.cinemaName, // 影院名称
|
||
cinemaAddress: this.filmData.cinemaAddress, // 影院地址
|
||
lng: this.filmData.lng, // 纬
|
||
lat:this.filmData.lat, // 经
|
||
movieName: this.filmData.movieName, // 影片名称
|
||
showTime: this.filmData.showTime, // 上映时间
|
||
pay_price: this.filmData.pay_price, // 价格(优惠后)
|
||
price: this.filmData.price, // 原价
|
||
deduction_price: this.filmData.deduction_price, // 抵扣 (默认用户余额大于等于抵扣金额)
|
||
commission_total: this.filmData.commission_total, // 佣金
|
||
|
||
showId: this.filmData.showId, // 座位ID
|
||
showInfor: JSON.stringify(this.filmData.showInfor), // 票详情
|
||
phoneNumber: this.FormInfor.phone_number, // 购票手机号
|
||
addFlag: 0
|
||
}
|
||
|
||
|
||
|
||
// 用户余额小于抵扣金额 传用户的需要支付金额
|
||
if (this._amount(this.amount) >= params.deduction_price) {
|
||
params.pay_price = Math.round((parseFloat(this.filmData.pay_price) - parseFloat(this.filmData.deduction_price))*100)/100;
|
||
} else {
|
||
params.deduction_price = this.__amount(this._amount(this.amount));
|
||
}
|
||
|
||
|
||
if (this._amount(this.amount) === 0) {
|
||
params.deduction_price = 0;
|
||
}
|
||
|
||
uni.showLoading({
|
||
title: '支付中...'
|
||
});
|
||
|
||
params['price'] = this.__amount(params['price']);
|
||
params['pay_price'] = this.__amount(params['pay_price']);
|
||
params['deduction_price'] = this.__amount(params['deduction_price']);
|
||
params['commission_total'] = this.__amount(params['commission_total']);
|
||
|
||
console.log(params, '参数1');
|
||
getFilmpPlaceOrder(params).then(res => {
|
||
console.log(res, '下单返回单号')
|
||
uni.hideLoading();
|
||
const { pay_price, order_sn, type, openid} = res['data'];
|
||
this.$Payment.H5_Payment({
|
||
pay_price,
|
||
order_sn,
|
||
type,
|
||
openid,
|
||
return_url:`/pages/film/filmForm`
|
||
});
|
||
// this.payment({
|
||
// order_sn:res.data.data,
|
||
// type:res.data.type,
|
||
// redirect_url: `/pages/film/filmForm`
|
||
// });
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #F5F5F5;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
.main {
|
||
padding: 20rpx 24rpx;
|
||
.movice {
|
||
width: 100%;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0,0,0,0.1);
|
||
background-color: #FFFFFF;
|
||
display: flex;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
.movice-img {
|
||
width: 160rpx;
|
||
height: 220rpx;
|
||
border-radius: 10rpx;
|
||
margin-right: 20rpx;
|
||
image {
|
||
width: 160rpx;
|
||
height: 220rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
.movice-desc {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
.movice-title {
|
||
font-size: 30rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #333333;
|
||
line-height: 40rpx;
|
||
}
|
||
.movice-time {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
line-height: 32rpx;
|
||
.movice-address {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
}
|
||
.movice-tag {
|
||
display: flex;
|
||
align-items: center;
|
||
text {
|
||
padding: 0rpx 6rpx;
|
||
margin-right: 8rpx;
|
||
border: 2rpx solid #DEDEDE;
|
||
color: #999999;
|
||
font-size: 20rpx;
|
||
}
|
||
}
|
||
.movice-num {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
line-height: 32rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1;
|
||
-webkit-box-orient: vertical;
|
||
text {
|
||
color: #FF6D04;
|
||
font-size: 24rpx;
|
||
font-family: Alibaba-PuHuiTi-H, Alibaba-PuHuiTi;
|
||
font-weight: 600;
|
||
color: #FF6D04;
|
||
line-height: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.address {
|
||
padding: 0rpx 20rpx;
|
||
box-sizing: border-box;
|
||
background-color: #FFFFFF;
|
||
border-radius: 20rpx;
|
||
box-shadow: 0rpx 2rpx 8rpx 0rpx rgba(0,0,0,0.1);
|
||
margin-top: 20rpx;
|
||
/deep/ input {
|
||
text-align: right !important;
|
||
padding-right: 0rpx !important;
|
||
}
|
||
/deep/ .u-input {
|
||
padding-right: 0rpx !important;
|
||
}
|
||
/deep/ .u-border-bottom {
|
||
border-bottom: none !important;
|
||
}
|
||
.phone-class {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
line-height: 34rpx;
|
||
}
|
||
.address-item {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
align-items: center;
|
||
}
|
||
.money-item {
|
||
padding: 20rpx 0rpx;
|
||
align-items: flex-end;
|
||
.old-price {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
line-height: 34rpx;
|
||
text-decoration: line-through;
|
||
}
|
||
.number {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
line-height: 34rpx;
|
||
}
|
||
.new-price {
|
||
color: #999999;
|
||
font-size: 24rpx;
|
||
text-align: right;
|
||
text {
|
||
color: #E83737;
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
.money-top {
|
||
padding: 20rpx 0rpx;
|
||
.tip-money {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #666666;
|
||
line-height: 34rpx;
|
||
letter-spacing: 1rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
.tip-icon {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
background-color: #FF7700;
|
||
position: relative;
|
||
border-radius: 50%;
|
||
margin-right: 10rpx;
|
||
.white {
|
||
position: absolute;
|
||
top: 2rpx;
|
||
left: 2rpx;
|
||
background-color: #FF7700;
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border: 2rpx #FFFFFF solid;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
.now-money {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
line-height: 34rpx;
|
||
letter-spacing: 1rpx;
|
||
margin-top: 10rpx;
|
||
padding-left: 34rpx;
|
||
}
|
||
.balance {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #666666;
|
||
line-height: 34rpx;
|
||
letter-spacing: 1rpx;
|
||
}
|
||
}
|
||
|
||
.bt-border {
|
||
border-bottom: 2rpx solid #EDEDED;;
|
||
}
|
||
.title {
|
||
color: #333333;
|
||
font-size: 26rpx;
|
||
text {
|
||
display: inline-block;
|
||
width: 160rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
line-height: 32rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.gray {
|
||
color: #666666;
|
||
font-size: 24rpx;
|
||
}
|
||
}
|
||
.buyTips {
|
||
margin-top: 40rpx;
|
||
.title {
|
||
font-size: 26rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #666666;
|
||
line-height: 40rpx;
|
||
}
|
||
.subtitle {
|
||
font-size: 24rpx;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
view {
|
||
line-height: 34rpx;
|
||
}
|
||
}
|
||
}
|
||
.totalMoney {
|
||
position: fixed;
|
||
bottom: 40rpx;
|
||
width: 700rpx;
|
||
height: 84rpx;
|
||
background: linear-gradient(132deg, #FC5159 0%, #FF7700 100%);
|
||
border-radius: 40rpx;
|
||
margin: 0 auto;
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #FFFFFF;
|
||
line-height: 84rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style> |