<template> <view class="page"> <c-nav-bar1 title="订单详情" bgColor="transparent"></c-nav-bar1> <view class="bg"></view> <view class="content" :style="{ 'height': (h - mt) + 'px', 'top': mt + 'px' }"> <view class="head"> <text class="status disabled" v-if="getalllist.orderStatus == '0'">待支付</text> <text class="status disabled" v-if="getalllist.orderStatus == '-1'">已取消</text> <text class="status s2" v-if="getalllist.orderStatus == '4'">待使用</text> <text class="status s3" v-if="getalllist.orderStatus == '-3'">已退款</text> <text class="status s3" v-if="getalllist.orderStatus == '3'">已使用</text> </view> <view class="ticketInfonmb"> <view class="taocan"> <view class="taocan1" v-if="getalllist.productImg"> <u--image :src="getalllist.productImg.split(',')[0]" width="168rpx" height="168rpx"></u--image> </view> <view class="taocan2"> <view class="taoxxq1"> {{ getalllist.productName }} </view> <view class="taoxxq2"> {{ getalllist.notice | delNotice }} </view> <view class="taoxxq3"> <view class="jiage1"> <span>¥</span> {{ getalllist.realityPay }} </view> </view> </view> </view> </view> <!-- 订单信息 --> <view class="basicInfo"> <view class="chaoji"> 套餐明细 </view> <view class="taocanmx"> <view class="taocanlistmx" v-for="(item, index) in JSON.parse(getalllist.productsDetail)" :key="index"> <view class="taocanlistmx1"> *{{ item.name }} </view> <view class="taocanlistmx2"> ({{ item.number }}份) </view> <view class="taocanlistmx3"> ¥{{ item.price }} </view> </view> </view> </view> <view class="basicInfo" style="margin-bottom: 50rpx;"> <view class="chaoji" style="margin: 0 0 40rpx 0;"> 订单信息 </view> <view class="dingdanxinxi"> <view class="dingdanxinxi1"> <view class="dingdanxinxi2"> 订单编号 </view> <view class="dingdanxinxi3"> {{ getalllist.orderCode }} </view> </view> <view class="dingdanxinxi1"> <view class="dingdanxinxi2"> 付款时间 </view> <view class="dingdanxinxi3"> {{ getalllist.paymentTime }} </view> </view> <view class="dingdanxinxi1" v-if="getalllist.orderStatus == 3"> <view class="dingdanxinxi2"> 核销时间 </view> <view class="dingdanxinxi3"> {{ getalllist.writeOffTime }} </view> </view> <view class="dingdanxinxi1"> <view class="dingdanxinxi2"> 订单总价 </view> <view class="dingdanxinxi3"> ¥{{ getalllist.realityPay }} </view> </view> <view class="dingdanxinxi1"> <view class="dingdanxinxi2"> 实际付款 </view> <view class="dingdanxinxi3"> ¥{{ getalllist.realityPay }} </view> </view> <view class="dingdanxinxi1"> <view class="dingdanxinxi2"> 联系方式 </view> <view class="dingdanxinxi3"> {{ getalllist.guestPhone }} </view> </view> </view> </view> </view> <view class="btns" v-if="getalllist.orderStatus == 4"> <view class="hexiao" @click="hexiaonima">确认核销 </view> </view> <u-toast ref="uToast"></u-toast> <!-- 取消弹框 --> <u-modal :show="showAgree" :title="title" :content='content' showCancelButton="true" confirmText='确定' confirmColor='#007A69' @confirm="confirm" @cancel='cancel'></u-modal> </view> </template> <script> export default { data() { return { titles: '订单详情', h: uni.getSystemInfoSync().windowHeight, mt: uni.getSystemInfoSync().statusBarHeight + 44, value: 1, status: 1, id: '', getalllist: {}, bedData: {}, arriveTime: '', arriveTimes: '', leaveTime: '', leaveTimes: '', count: '', orderId: '', price: '', form: { initiator: 2, orderCode: '', status: '' }, num: 0, title: '温馨提示', content: '您确定要取消吗?确定取消将不可撤回,再次预订可能因为没有房间,影响后续行程!', showAgree: false, checkInTimeStart: '', checkOutTime: '', FormData: { arriveDate: "", // 到达时间(yyyy-MM-dd) leaveDate: "", //离开时间(yyyy-MM-dd) limit: 10, //每页显示记录数 page: 1, //当前页码 name: "", islandId: '', //岛屿id priceSort: '', //价格排序: 1有高高低, 0由低到高 featureLabels: '', // 特色服务(逗号分割):字典FeatureLabels category: '', // 酒店类别(逗号分割): 字典HotelCategory }, departWeek: '', departWeeks: '', weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'], checkInRooms: 0, hexiaodata: {}, } }, filters: { delNotice(val) { if (val) { return JSON.parse(val)[0].notice } } }, onLoad(option) { this.hexiaodata = JSON.parse(option.list); let postdata = { merchantCategory: 4, orderCode: JSON.parse(option.list).orderCode, }; this.$api.get('/api/merchant/food/queryOrderDetail', postdata).then(res => { if (res.data.code == 500) { uni.showToast({ title: res.data.msg, icon: 'none', duration: 1500 }) setTimeout(() => { uni.navigateBack({ delta: 1 }); }, 1500) } else { this.getalllist = res.data.data; } }) }, methods: { hexiaonima() { this.$api.post('/api/merchant/food/scenic/merchant/order/verifyOrderQrCode?writeOffCode', this.hexiaodata) .then(res => { if (res.data.code == 0) { this.$showToast('核销成功'); uni.setStorageSync('list', { totalPrice: this.getalllist.realityPay }); setTimeout(() => { uni.navigateTo({ url: '/pagesHouse/Mine/ordersList/outcome' }) }, 1500) // uni.navigateBack({ // delta: 1 // }); } else { this.$showToast(res.data.msg) } }) }, } } </script> <style lang="scss" scoped> .dingdanxinxi { .dingdanxinxi1 { display: flex; .dingdanxinxi2 { width: 140rpx; height: 60rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 28rpx; color: #808080; line-height: 60rpx; text-align: justify; font-style: normal; } .dingdanxinxi3 { flex-grow: 1; height: 60rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 28rpx; color: #333333; line-height: 60rpx; text-align: justify; font-style: normal; } } } .chaoji { width: 100%; height: 40rpx; font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 40rpx; color: #1C1E41; line-height: 40rpx; text-align: left; font-style: normal; margin: 40rpx 0 0 0; } .goumai { position: fixed; bottom: 0rpx; left: 30rpx; background: #fff; width: 690rpx; height: 140rpx; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; .goumai2 { width: 220rpx; height: 88rpx; background: #007A69; border-radius: 44px; font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 32rpx; color: #FFFFFF; line-height: 88rpx; text-align: center; font-style: normal; } .goumai1 { flex-grow: 1; height: 140rpx; display: flex; align-items: center; .zongji1 { height: 140rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 24rpx; color: #666666; line-height: 140rpx; text-align: left; font-style: normal; } .zongji2 { height: 140rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 24rpx; color: #FF4141; line-height: 140rpx; text-align: left; font-style: normal; } .zongji3 { height: 140rpx; font-family: DINAlternate, DINAlternate; font-weight: bold; font-size: 48rpx; color: #FF4141; line-height: 140rpx; text-align: left; font-style: normal; padding: 0 8rpx; } .zongji4 {} } } .canyu { width: 100%; height: 190rpx; display: flex; margin: 40rpx 0 40rpx 0; .canyu1 { width: 190rpx; height: 190rpx; } .canyu2 { flex-grow: 1; height: 190rpx; .papdang1 { width: 100%; height: 95rpx; display: flex; .haixian2 { width: 56rpx; height: 95rpx; display: flex; justify-content: center; align-items: center; } .haixian1 { flex-grow: 1; height: 95rpx; .xhpd1 { width: 100%; height: 47.5rpx; font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 32rpx; color: #111111; line-height: 47.5rpx; text-align: left; font-style: normal; padding-left: 20rpx; } .xhpd2 { width: 100%; height: 47.5rpx; display: flex; align-items: center; padding-left: 20rpx; .xhpd2new { height: 47.5rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 24rpx; color: #777777; line-height: 47.5rpx; text-align: left; font-style: normal; padding-right: 20rpx; } } } } .papdang2 { display: flex; padding-left: 20rpx; .yingyez1 { width: 78rpx; height: 47.5rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 26rpx; color: #333333; line-height: 47.5rpx; text-align: justify; font-style: normal; padding-right: 10rpx; } .yingyez2 { flex-grow: 1; height: 47.5rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 26rpx; color: #333333; line-height: 47.5rpx; text-align: left; font-style: normal; } } .papdang3 { padding-left: 20rpx; height: 47.5rpx; display: flex; align-items: center; .dizhinew1 { width: 30rpx; height: 47.5rpx; display: flex; align-items: center; justify-content: center; } .dizhinew2 { flex-grow: 1; height: 47.5rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 26rpx; color: #333333; line-height: 47.5rpx; text-align: justify; font-style: normal; } } } } .yyyue1new { width: 100%; min-height: 55rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 26rpx; color: #111111; line-height: 45rpx; text-align: left; font-style: normal; } .xuzhinew { width: 100%; min-height: 130rpx; display: flex; margin: 30rpx 0; .xuzhi1new { width: 260rpx; height: 55rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 26rpx; color: #666666; line-height: 45rpx; text-align: left; font-style: normal; } .xuzhi2new { flex-grow: 1; } } .taocanlistnewmx1 { width: 460rpx; height: 50rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 26rpx; color: #111111; line-height: 50rpx; text-align: left; font-style: normal; } .wuyiyi { width: 750rpx; height: 20rpx; background: #F5F8FA; } .taocanmx { margin: 30rpx 0; .taocanlistmx { display: flex; .taocanlistmx1 { width: 460rpx; height: 50rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 26rpx; color: #111111; line-height: 50rpx; text-align: left; font-style: normal; } .taocanlistmx2 { width: 150rpx; height: 50rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 26rpx; color: #999999; line-height: 50rpx; text-align: center; font-style: normal; } .taocanlistmx3 { width: 80rpx; height: 50rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 26rpx; color: #111111; line-height: 50rpx; text-align: right; font-style: normal; } } } .yyyue1 { width: 100%; height: 55rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 26rpx; color: #111111; line-height: 55rpx; text-align: left; font-style: normal; } .xuzhi { width: 100%; min-height: 130rpx; display: flex; .xuzhi1 { width: 90rpx; height: 55rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 26rpx; color: #666666; line-height: 55rpx; text-align: left; font-style: normal; } .xuzhi2 { flex-grow: 1; } } .basicInfo { width: 678rpx; margin: 0 auto 20rpx; background: #fff; border-radius: 20rpx; padding: 20rpx; .chaoji { width: 100%; height: 40rpx; font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 40rpx; color: #1C1E41; line-height: 40rpx; text-align: left; font-style: normal; margin: 20rpx 0 40rpx 0; } .xianzhi { width: 100%; display: flex; border-bottom: 1px solid #e6e6e6; .xianzhi1 { width: 140rpx; height: 80rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 26rpx; color: #666666; line-height: 80rpx; text-align: left; font-style: normal; } .xianzhi2 { flex-grow: 1; height: 80rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 26rpx; color: #111111; line-height: 80rpx; text-align: left; font-style: normal; } } } .daoqi { height: 30rpx; font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 30rpx; color: #111111; line-height: 30rpx; text-align: center; font-style: normal; } .erweima { width: 100%; height: 340rpx; display: flex; align-items: center; justify-content: center; } .pjm { display: flex; .pjm1 { height: 32rpx; font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 32rpx; color: #111111; line-height: 32rpx; text-align: center; font-style: normal; } .pjm2 { height: 32rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 24rpx; color: #AAAAAA; line-height: 32rpx; text-align: left; font-style: normal; padding-left: 20rpx; } } .ticketInfonmb { box-sizing: border-box; width: 96%; margin: 0 auto 20rpx; padding: 10rpx 24rpx; border-radius: 20rpx; position: relative; background-color: #fff; z-index: 2; } .taocan { width: 690rpx; height: 226rpx; border-radius: 20px; background: #fff; display: flex; align-items: center; .taocan1 { width: 168rpx; height: 168rpx; //margin-left: 20rpx; } .taocan2 { flex-grow: 1; height: 168rpx; .taoxxq1 { height: 52rpx; font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 32rpx; color: #111111; line-height: 52rpx; text-align: left; font-style: normal; padding-left: 20rpx; } .taoxxq2 { height: 50rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 24rpx; color: #777777; line-height: 50rpx; text-align: left; font-style: normal; padding-left: 20rpx; } .taoxxq3 { height: 66rpx; display: flex; justify-content: space-between; align-items: center; .jiage1 { flex-grow: 1; height: 66rpx; font-family: PingFangSC, PingFang SC; font-weight: 500; font-size: 40rpx; color: #FF3E3E; line-height: 66rpx; text-align: left; font-style: normal; span { width: 24rpx; height: 66rpx; font-family: PingFangSC, PingFang SC; font-weight: 400; font-size: 24rpx; color: #FF3E3E; line-height: 66rpx; text-align: left; font-style: normal; padding-left: 20rpx; } } .right { width: 190rpx; height: 66rpx; display: flex; align-items: center; .icon { width: 44rpx; height: 44rpx; vertical-align: middle; } .number { font-size: 36rpx; vertical-align: middle; margin: 0 30rpx; } } } } } .bottom-list { display: flex; margin: 37rpx auto; justify-content: center; .image { width: 36rpx; height: 36rpx; margin: 0 8rpx; image { width: 100%; height: 100%; } } .text { font-size: 26rpx; color: #999999; font-weight: Regular; } } .minus, .plus { display: flex; align-items: center; // width: 44rpx; // height: 44rpx; // line-height: 44rpx; padding: 10rpx 10rpx; // padding-left: 8rpx; border: 1px solid #999; border-radius: 6rpx; text-align: center; } .page { box-sizing: border-box; background-color: #F5F8FA; overflow: hidden; .content { position: relative; z-index: 3; padding-bottom: 180rpx; box-sizing: border-box; overflow-y: auto; .hand-title { position: absolute; left: 20rpx; top: 100rpx; font-size: 24rpx; color: #fff; } } } .bg { height: 100%; position: fixed; // top: 44px; z-index: 1; width: 100%; // background-image: linear-gradient(to bottom, #007A69, #007A69, #F5F8FA); background-image: linear-gradient(to bottom, #007A69, #007A69, #F5F8FA); } .ticketInfo-demo { // border-bottom: 2rpx solid #EFEFEF; margin-top: 40rpx; .demo-layout { display: flex; align-items: center; text-align: center; margin: 0 80rpx; } } .two-center-two { box-sizing: border-box; .tit { font-size: 32rpx; color: #333333; margin: 20rpx 0; } .df-one { font-size: 32rpx; color: #333333; font-weight: bold; // .bg-purple-dark { // margin-left: 140rpx; // } // .demo-layout { // margin-left: 30rpx; // } } .df-two { border-bottom: 2rpx solid #EFEFEF; .bg-purple { // margin-right: 100rpx; width: 182rpx; margin-left: -13rpx; } .bg-purple-dark { // margin-left: 50rpx; } .bg-purple, .bg-purple-dark { font-size: 26rpx; color: #777777; font-weight: Regular; text-align: center; text { margin: 0 8rpx; } } .bg-purple-light { font-size: 24rpx; color: #666666; border: 1rpx solid #666666; text-align: center; border-radius: 50rpx; } } } .prices-content { margin: 24rpx 0; .txt1 { font-size: 32rpx; color: #111111; font-weight: bold; } .txt2 { margin: 12rpx 0; font-size: 26rpx; color: #777777; font-weight: Regular; } } .orderInfo { box-sizing: border-box; background-color: #fff; border-radius: 16rpx; width: 96%; margin: 0 auto 20rpx; .tit { font-size: 32rpx; color: #333; padding-left: 30rpx; padding-top: 40rpx; font-weight: 600; margin-bottom: 20rpx; } .txt { font-size: 28rpx; color: #666; width: 115rpx; } .icon { font-size: 28rpx; color: #666; } .val { font-size: 28rpx; color: #666; margin: 0 20rpx 0 30rpx; } .nums { display: flex; justify-content: space-between; border-bottom: 1rpx solid #f0f2f5; padding: 0 24rpx; .input { margin: 0 30rpx; font-size: 28rpx; } text { margin: 20rpx 0; &:nth-child(1) { font-size: 28rpx; color: #333; font-weight: 400; } &:nth-child(3) { font-size: 36rpx; color: #FF4141; margin-right: 40rpx; } &.icon { display: inline-block; width: 100rpx; flex: 1; text-align: right; padding-top: 12rpx; } } // .minus, // .plus { // width: 44rpx; // height: 44rpx; // line-height: 44rpx; // padding: 11rpx 9rpx; // border: 1px solid #999; // border-radius: 6rpx; // } .plus { background-color: #0EBFFE; border-color: #0EBFFE; } } } .ticketInfo { box-sizing: border-box; width: 96%; margin: 0 auto 20rpx; padding: 44rpx 24rpx; border-radius: 20rpx; position: relative; background-color: #fff; z-index: 2; .ticketInfo-hander { display: flex; .image { width: 130rpx; height: 136rpx; border-radius: 12rpx; margin-right: 20rpx; image { width: 100%; height: 100%; } } } .name { font-size: 32rpx; color: #333; font-weight: bold; width: 100%; } .date { // padding: 20rpx 0 32rpx; padding-top: 40rpx; text { font-size: 26rpx; &:nth-child(1) { color: #808080; } &:nth-child(2) { color: #FF7D01; margin-left: 30rpx; } } } .topHead { width: 96%; margin: 0 auto; background-color: #F5F8FA; padding: 28rpx 0 28rpx 84rpx; border-radius: 16rpx; position: relative; text { position: absolute; left: 0; top: 0; z-index: 1; border-radius: 16rpx 0 0 16rpx; width: 48rpx; color: #fff; font-size: 20rpx; background-color: #484F61; text-align: center; height: 100%; padding: 15rpx 10rpx 0; } .p { font-size: 28rpx; color: #333; &:nth-of-type(1) { font-weight: 600; margin-bottom: 16rpx; } } } .code { margin-top: 40rpx; text-align: center; position: relative; .cover, .sx { position: absolute; background-color: rgba(255, 255, 255, 0.5); width: 340rpx; height: 340rpx; top: 66rpx; left: 50%; transform: translate(-50%, 0); } .sx { width: 120rpx; height: 120rpx; top: 150rpx; background: transparent; } .txt { font-size: 28rpx; } image { width: 340rpx; height: 340rpx; margin: 30rpx 0; } } } .head { box-sizing: border-box; padding: 14rpx 24rpx 30rpx; display: flex; position: relative; z-index: 2; .s2 { font-weight: bold; } text { color: #fff; &:nth-child(1), &:nth-child(3) { font-size: 44rpx; } &:nth-child(2) { flex: 1; text-align: right; width: 100px; font-size: 36rpx; } } } .btns { box-sizing: border-box; width: 100%; position: fixed; bottom: 0; z-index: 4; left: 0; display: flex; padding: 32rpx 32rpx 50rpx; background-color: #fff; gap: 0 20rpx; box-shadow: 0 -8rpx 16rpx rgba(0, 0, 0, 0.06); .hexiao { width: 690rpx; height: 88rpx; background: #007A69; border-radius: 44rpx; font-family: PingFang-SC, PingFang-SC; font-weight: bold; font-size: 32rpx; color: #FFFFFF; line-height: 88rpx; text-align: center; font-style: normal; } } </style>