whitechiina
/
H5-ThreeDoorder
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
H5-ThreeDoorder/pages/film/filmDetail.vue

450 lines
9.7 KiB
Vue
Raw Permalink Blame History

<!-- 订单详情 -->
<template>
<view class="content">
<view class="Order-infor">
<view class="Order-infor-term">
<view class="Order-infor-term-label">
电影
</view>
<view class="Order-infor-term-value">
{{filmData.movieName}}
</view>
</view>
<view class="Order-infor-term">
<view class="Order-infor-term-label">
购买数量
</view>
<view class="Order-infor-term-value">
{{filmData.amount}}张
</view>
</view>
<view class="Order-infor-term">
<view class="Order-infor-term-label">
场次
</view>
<view class="Order-infor-term-value">
{{filmData.create_time}}
</view>
</view>
<!-- 取票码 -->
<view class="Pcode" v-if="filmData['status'] === 2">
<view class="Pcode-text">
取票码
</view>
<view class="Pcode-image">
<!-- 背景 -->
<image class="Pcode-bg" src="https://img.agrimedia.cn/chwl%2Fv2%2Fcode-bg.png"></image>
<!-- 二维码 -->
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
<image class="Pcode-img" :src="filmData.code_img"></image>
</scroll-view>
<!-- 取票码 -->
<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
<view class="scroll-view-item_H uni-bg-red" v-for="(item, index) in filmData.code" :key="item.id">
<view class="Pcode-title">取票号：{{item.ticket_code}}</view>
<view class="Pcode-sub">验证码：{{item.verification_code}}</view>
</view>
<!-- ticket_code 取票码 验证码verification_code -->
</scroll-view>
<view class="tips">
左右滑动查看取票码和取票号
</view>
</view>
</view>
<view class="Order-infor-term">
<view class="Order-infor-term-label">
订单状态
</view>
<view class="Order-infor-term-value">
<!-- 0:待支付 1:待出票 2:出票成功 3:出票失败 4:已取消-->
<text :class="OrderStatus[filmData['status']]">{{filmData['status_name']}}</text>
</view>
</view>
<view class="Order-infor-term">
<view class="Order-infor-term-label">
订单号
</view>
<view class="Order-infor-term-value">
{{filmData.orderNo}}
</view>
</view>
<view class="Order-infor-term">
<view class="Order-infor-term-label">
原价
</view>
<view class="Order-infor-term-value">
￥{{this._amount(filmData.price)}}
</view>
</view>
<view class="Order-infor-term">
<view class="Order-infor-term-label">
补贴卡抵扣金额
</view>
<view class="Order-infor-term-value">
￥{{this._amount(filmData.deduction_price)}}
</view>
</view>
<view class="Order-infor-term">
<view class="Order-infor-term-label">
预估佣金
</view>
<view class="Order-infor-term-value">
￥{{filmData.commission_total}}
</view>
</view>
<view class="Order-infor-term">
<view class="Order-infor-term-label">
需付款金额
</view>
<view class="Order-infor-term-value">
￥{{this._amount(filmData.pay_price)}}
</view>
</view>
<view class="Order-infor-term">
<view class="Order-infor-term-label">
影院地址
</view>
<view class="Order-infor-term-value">
{{filmData.cinemaAddress}}
</view>
</view>
<view class="Order-infor-term">
<view class="Order-infor-term-label">
手机号
</view>
<view class="Order-infor-term-value">
{{filmData.phoneNumber}}
</view>
</view>
</view>
<view class="block_11" v-if="filmData['status'] == 0">
<button bindtap="onClick" class="button_1" @tap="cancel">
<text lines="1" class="text_26">取消支付</text>
</button>
<button bindtap="onClick" class="button_5" @tap="pay">
<text lines="1" class="text_30">立即支付</text>
</button>
</view>
</view>
</template>
<script>
import mixin from '@/static/js/mixin/mixin.js';
import { getFilmOrderListDetail, getCancelPay } from '@/request/film/index.js';
export default {
mixins: [mixin],
data() {
return {
show: true,
orderNo: '', // 订单号
filmData: '',
// 0:待支付(橙) 1:待出票(橙) 2:出票成功(绿) 3:出票失败(红) 4:已取消(灰)
OrderStatus: [
'wait-buy',
'now-buy',
'now-buy',
'out-buy',
'cancel-buy'
],
old: {
scrollTop: 0
}
};
},
onLoad(option) {
this.orderNo = option.orderNo;
},
created() {
this.getOrderDetail()
},
methods: {
/**
* @获取订单详情
* @param {orderNo} 订单号
* */
getOrderDetail() {
const params = {
orderNo: this.orderNo,
}
getFilmOrderListDetail(params).then(res => {
this.filmData = res.data
console.log(res)
})
},
/**
* @取消支付
* @param {orderNo} 订单号
* */
cancel() {
const params = {
orderNo: this.orderNo,
}
getCancelPay(params).then(res => {
if (res.code === 200) {
uni.showToast({
title: res.msg,
});
// 取消之后退页
uni.navigateBack({
delta: 1
});
} else {
uni.showToast({
title: res.msg,
});
}
})
},
scroll: function(e) {
console.log(e)
this.old.scrollTop = e.detail.scrollTop
},
/**
* @支付
* */
pay() {
this.$Payment.Repayment({
order_sn:this['orderNo'],
// 点餐订单类型为4直接写死
type:6,
redirect_url:`/pages/film/filmDetail?orderNo=${this['orderNo']}`
});
// this.payment({
// order_sn:this['filmData']['orderNo'],
// type:4,
// redirect_url:'/pages/film/filmForm'
// })
}
}
}
</script>
<style lang="scss">
page {
background-color: #F5F5F5;
}
</style>
<style lang="scss" scoped>
.content {
padding: 32rpx;
}
.state {
width: 100%;
height: 237rpx;
position: relative;
}
.Order-infor-term-label {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 32rpx;
}
.Pcode {
position: relative;
height: 600rpx;
.Pcode-text {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #666666;
line-height: 32rpx;
}
.Pcode-image {
position: relative;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
.Pcode-bg {
width: 460rpx;
height: 560rpx;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
}
.Pcode-img {
width: 340rpx;
height: 340rpx;
border-radius: 5px;
margin-top: 20rpx;
image {
width: 340rpx;
height: 340rpx;
}
}
.Pcode-title {
font-size: 26rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #666666;
line-height: 40rpx;
text-align: center;
}
.Pcode-sub {
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 600;
color: #666666;
line-height: 32rpx;
text-align: center;
}
}
}
.Order-infor-term-value {
font-size: 26rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #333333;
line-height: 40rpx;
.wait-buy {
color: #FF7700;
}
.now-buy {
color: #07C160;
}
.cancel-buy {
color: #999999;
}
.out-buy {
color: #DF2828;
}
}
.Order-infor {
background-color: #ffffff;
border-radius: 15rpx;
padding: 15rpx 32rpx;
&-term {
width: 100%;
height: 70rpx;
display: flex;
justify-content: space-between;
align-items: center;
&-label {
color: #666666;
font-size: 24rpx;
}
&-value {
color: #333333;
font-size: 28rpx;
}
// 取消
&-value-paid {
color: #FF7700;
}
// 待支付
&-value-cancel {
color: #999990;
}
// 完成
&-value-complete {
color: #41C420;
}
// 退款
&-value-refund {
color: #DF2828;
}
}
}
.block_11 {
width: 100%;
flex-direction: row;
display: flex;
justify-content: space-between;
margin-top: 60rpx;
}
.button_1 {
background-color: rgba(222, 222, 222, 1.000000);
border-radius: 19rpx;
display: flex;
flex-direction: column;
padding: 21rpx 98rpx 21rpx 98rpx;
}
.text_26 {
overflow-wrap: break-word;
color: rgba(102, 102, 102, 1);
font-size: 27rpx;
font-family: PingFangSC-Semibold;
text-align: center;
white-space: nowrap;
line-height: 38rpx;
border: none !important;
}
.button_5 {
background-color: rgba(255, 119, 0, 1.000000);
border-radius: 19rpx;
display: flex;
flex-direction: column;
padding: 21rpx 98rpx 21rpx 98rpx;
}
.text_30 {
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 27rpx;
font-family: PingFangSC-Semibold;
text-align: center;
white-space: nowrap;
line-height: 38rpx;
}
.scroll-Y {
height: 300rpx;
}
.scroll-view_H {
white-space: nowrap;
width: 100%;
width: 460rpx;
text-align: center;
margin: 0 auto;
}
.tips {
position: absolute;
width: 100%;
text-align: center;
color: #b3b1b5;
text-decoration:underline;
font-size: 14rpx;
z-index: 99;
margin-top: 20rpx;
}
.scroll-view-item {
height: 300rpx;
line-height: 300rpx;
text-align: center;
font-size: 36rpx;
}
.scroll-view-item_H {
display: inline-block;
width: 100%;
line-height: 300rpx;
text-align: center;
font-size: 36rpx;
}
</style>
Reference in New Issue View Git Blame Copy Permalink