ox_zhiNengZhuShou/src/components/reservation_order/reservation_order.vue

<template>
    <view class="reservation-order" @click="detailChange">
        <view class="ro-header">
            <view class="rh-view">{{orderInfo.stadium_name || '-'}}</view>
            <text 
                :class="[ 'rh-text', orderInfo.pay_status == 1?'rh-active':'', orderInfo.pay_status == 4?'rh-red':'' ]"
            >{{zh_order_status(orderInfo.pay_status)}}</text>
        </view>
        <view class="ro-section">
            <view class="rs-line">
                <view class="rl-view">订单编号：</view>
                <view class="rl-view">
                    <view class="rv-view">{{orderInfo.order_no || '-'}}</view>
                </view>
            </view>
            <view class="rs-line">
                <view class="rl-view">预订项目：</view>
                <view class="rl-view">
                    <view class="rv-view"><text>{{ zh_type_name(orderInfo.order_type) }}</text></view>
                </view>
            </view>
			<!-- 场次 -->
			<block v-if="orderInfo.order_type == 0">
				<view class="rs-line" >
					<view class="rl-view">预订场数：</view>
					<view class="rl-view">
						<view class="rv-view">{{ orderInfo.number || '-'}}</view>
					</view>
				</view>
				<view class="rs-line">
					<view class="rl-view">预订时间：</view>
					<view class="rl-view">
						<view class="rv-view" v-for="(e,i) in orderInfo.sessions" :key="i">{{e.date}} {{e.duration}}{{orderInfo.sessions.length>1?'等':''}}</view>
					</view>
				</view>
			</block>
			<!-- 人次 -->
			<block v-if="orderInfo.order_type == 1">
				<view class="rs-line">
				    <view class="rl-view">数量：</view>
				    <view class="rl-view">
				        <view class="rv-view">{{ orderInfo.number || '-'}}</view>
				    </view>
				</view>
				<view class="rs-line">
				    <view class="rl-view">类型：</view>
				    <view class="rl-view">
				        <!-- <view class="rv-view" v-for="(e, i) in orderInfo.person_number_spec_names" :key="i"><text>{{ e || '-'}}</text></view> -->
						<view class="rv-view" >{{ zh_spec_names || '-'}}</view>
					</view>
				</view>
				<!-- 人次+随时用 -->
				<view class="rs-line" v-if="orderInfo.person_number_rule.order_method==1">
				    <view class="rl-view">有效期至：</view>
				    <view class="rl-view">
				        <view class="rv-view">{{orderInfo.end_time || '-'}}</view>
				    </view>
				</view>
				<!-- 人次+指定日期 -->
				<view class="rs-line" v-if="orderInfo.person_number_rule.order_method==2">
				    <view class="rl-view">使用日期：</view>
				    <view class="rl-view">
				        <view class="rv-view">{{orderInfo.date || '-'}}</view>
				    </view>
				</view>
			</block>
        </view>
        <view class="ro-bot">
			<view class="rb-total">实付款 <text class="rt-txt"> ¥{{orderInfo.pay_amount || '0'}}</text></view>
		</view>
       <!-- <view class="ro-bot-line" v-if="orderInfo.verify_type!=0">核销方式：{{zh_verify_type(orderInfo.verify_type)}} {{orderInfo.verify_time || '-'}}</view>
        <view class="ro-bot-line" v-if="orderInfo.pay_status == 4">退款时间：{{orderInfo.refund_time || '-'}}</view> -->
	</view>
</template>

<script>
import util from '@/utils/util';
export default {
    props: {
        orderInfo: {
            type: Object,
           	default: ()=>({})
        }
    },
    computed: {
        zh_verify_type(){
            // 核销方式 1/2/3/4 核销码核销/人脸核销/扫码核销/商家扫码
            return status =>{
                const _obj = {
                    '0': '未核销',
                    '1': '核销码核销',
                    '2': '人脸核销',
                    '3': '扫码核销',
                    '4': '商家扫码',
                }
                return _obj[`${status}`] || '-'
            }
        },
        zh_pay_type(){
            // 支付类型 0微信支付1支付宝支付2储值卡支付
            return status =>{
                const _obj = {
                    '0': '微信支付',
                    '1': '支付宝支付',
                    '2': '储值卡支付',
                }
                return _obj[`${status}`] || '-'
            }
        },
        zh_order_status(){
            // 订单状态 -1已作废0未支付1已支付待使用2已使用3已失效4已退款
            return status =>{
                if(status == 8)return '使用中'; // 20210528 新增状态
                const _obj = {
                    '-1': '已作废',
                    '0': '未支付',
                    '1': '待使用',
                    '2': '已使用',
                    '3': '已失效',
                    '4': '已退款',
                }
                return _obj[`${status}`] || '-'
            }
        },
		zh_type_name(){
			// 预订项目  0场次  1人次
			let { orderInfo } = this
			return status =>{
			    const _obj = {
			        '0': orderInfo.venue_type_name,
			        '1': orderInfo.person_number_rule_name,
			    }
			    return _obj[`${status}`] || '-'
			}
		},
		zh_spec_names(){
			let { orderInfo } = this
			if(!orderInfo.person_number_spec_names)return '';
			let spec = orderInfo.person_number_spec_names.join('+')
			return spec || '';
		},
    },
	methods:{
		detailChange(){
			console.log("点击了吗")
			let { orderInfo } = this
			let _query = {}
			_query["stadium_id"] = orderInfo.stadium_id
			_query["order_no"] = orderInfo.order_no
			_query["order_type"] = 3
			util.routeTo(`/subpackage/device/pages/order_details/order_details?query=${util.jsonStr(_query)}`,'nT');
			console.log("点击了吗444")
		}
	}
	
}
</script>

<style lang="scss" >
    @import "../../style/public.scss";
    .reservation-order{
        padding: 0 24upx;
        border-radius: 10upx;
        background-color: #fff;
        .ro-header{
            margin-bottom: 18upx;
            height: 98upx;
            line-height: 96upx;
            border-bottom: 2upx solid #D8D8D8;
            @include centerFlex(space-between);
            .rh-view{
                flex-grow: 1;
                font-size: 28upx;
                color: #1a1a1a;
                @include textHide(1);
            }
            .rh-text{
                margin-left: 20upx;
                flex-shrink: 0;
                font-size: 28upx;
                color: #9C9C9F;
            }
            .rh-active{
                color: $themeColor;
            }
			.rh-red{
				color: #EA5061;
			}
        }
        .ro-section{
            padding-bottom: 20upx;
            .rs-line{
                display: flex;
                .rl-view,.rv-view{
                    line-height: 40upx;
                    font-size: 24upx;
                    color: #9c9c9f;
					>text{
						color: #333;
					}
                }
                .rl-view{
                    &:first-child{
                        flex-shrink: 0;
                    }
                    &+.rl-view{
                        flex-grow: 1;
                        .rv-view{
                            @include textHide(1);
                        }
                    }
                }
            }

        }
        .ro-bot{
            padding-top: 20upx;
            padding-bottom: 30upx;
            border-top: 2upx solid #D8D8D8;
            .rb-line{
                @include centerFlex(space-between);
                .rl-view{
                    line-height: 40upx;
                    font-size: 24upx;
                    color: #9c9c9f;
                    &:first-child{
                        margin-right: 20upx;
                        flex-shrink: 0;
                    }
                    &+.rl-view{
                        flex-grow: 1;
                        text-align: right;
                        @include textHide(1);
                    }
                }
            }
            .rb-total{
                line-height: 40upx;
                text-align: right;
                font-size: 24upx;
                color: #9c9c9f;
                .rt-txt{
                    color: #1A1A1A;
					margin-left: 10rpx;
                }
            }
        }
        .ro-bot-line{
            height: 90upx;
            line-height: 90upx;
            border-top: 2upx solid #D8D8D8;
            font-size: 24upx;
            color: #9c9c9f;
            @include textHide(1);
        }
    }
</style>