|
@@ -0,0 +1,363 @@
|
|
|
+<template>
|
|
|
+ <!-- 54是搜索框整体高度 52是tab的整体高度 不展示搜索框时需去除54-->
|
|
|
+ <view class="page" :style="{'min-height':h+'px','padding-top':(mt+54+52)+'px'}">
|
|
|
+ <!-- 头部 -->
|
|
|
+ <!-- <u-navbar title="酒店民宿订单" :leftIconSize="36" bgColor="#ffffff" leftIconColor="#333333" :titleStyle="titleStyle"
|
|
|
+ @leftClick="returnBack"></u-navbar> -->
|
|
|
+ <c-nav-bar title="我的订单"></c-nav-bar>
|
|
|
+
|
|
|
+ <TopTabs :list="list" @changeTab="changeTab" :top="mt" :placeholder="'输入关键字'" @sousuo="sousuo"></TopTabs>
|
|
|
+
|
|
|
+ <view class="list">
|
|
|
+ <view v-for="(item,index) in orderList" :key="index" cc v-if="FormData.orderStatus==item.orderStatus"
|
|
|
+ @click.stop="orderDeatils(item)">
|
|
|
+ <view class="item">
|
|
|
+ <text class="status s3" v-if="item.orderStatus=='-1'">待确定</text>
|
|
|
+ <text class="status disabled" v-if="item.orderStatus=='5'">已退款</text>
|
|
|
+ <text class="status s2" v-if="item.orderStatus=='-2'">待付款</text>
|
|
|
+ <text class="status s3" v-if="item.orderStatus=='1'">待使用</text>
|
|
|
+ <text class="status s3" v-if="item.orderStatus=='2'||item.orderStatus=='3'">已使用</text>
|
|
|
+ <text class="status disabled" v-if="item.orderStatus=='4'">已取消</text>
|
|
|
+
|
|
|
+ <view class="head">
|
|
|
+ <!-- <image src="../../../static/scenicSpots/ticketIcon_.png" v-if="status=='0'"></image> -->
|
|
|
+ <!-- <image src="../../../static/scenicSpots/ticketIcon.png" v-else></image> -->
|
|
|
+ <image src="../../../static/my/jd_ms.png" mode="" v-if="item.orderStatus=='0'"></image>
|
|
|
+ <image src="../../../static/my/jd_ms.png" mode="" v-else></image>
|
|
|
+ <text>酒店民宿</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="mid">
|
|
|
+ <view class="name" :class="item.orderStatus=='-3'?'disabled':''">{{item.homestayName}}</view>
|
|
|
+ <view class="date">入离日期 {{item.arriveDate}} 至 {{item.leaveDate}} </view>
|
|
|
+ <view class="des">{{item.houseBaseName}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="price" :class="item.orderStatus=='0'?'disabled':''">¥{{item.orderAmount}}</view>
|
|
|
+
|
|
|
+ <view class="btns">
|
|
|
+
|
|
|
+ <template v-if="item.orderStatus==1">
|
|
|
+ <view @click.stop="toStatus0(item)">
|
|
|
+ 取消
|
|
|
+ </view>
|
|
|
+ <!-- <view @click.stop="GoRefund(item)">
|
|
|
+ 申请退订
|
|
|
+ </view> -->
|
|
|
+ <view @click.stop="applyAfterSales(item)">
|
|
|
+ 再次预订
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="item.orderStatus==-2">
|
|
|
+ <view @click.stop="toStatus0(item)">
|
|
|
+ 取消
|
|
|
+ </view>
|
|
|
+ <view @click.stop="GoToPay(item)" style="color: #0DBFFD;">
|
|
|
+ 去支付
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+
|
|
|
+ <template v-if="item.orderStatus==3||item.orderStatus==2">
|
|
|
+ <!-- <view @click.stop="applyAfterSales(item)">
|
|
|
+ 删除
|
|
|
+ </view> -->
|
|
|
+ <view @click.stop="toEvaluate(item)">
|
|
|
+ 评价
|
|
|
+ </view>
|
|
|
+ <view @click.stop="applyAfterSales(item)">
|
|
|
+ 再次预订
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.orderStatus==5||item.orderStatus==4">
|
|
|
+ <!-- <view @click.stop="applyAfterSales(item)">
|
|
|
+ 删除
|
|
|
+ </view> -->
|
|
|
+ <view @click.stop="applyAfterSales(item)">
|
|
|
+ 再次预订
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.orderStatus==-1">
|
|
|
+ <view @click.stop="GoRefund(item)">
|
|
|
+ 取消
|
|
|
+ </view>
|
|
|
+ <view @click.stop="applyAfterSales(item)">
|
|
|
+ 再次预订
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view v-else @click.stop="orderDeatils(item)">
|
|
|
+ <view class="item">
|
|
|
+ <text class="status s3" v-if="item.orderStatus=='-1'">待确定</text>
|
|
|
+ <text class="status disabled" v-if="item.orderStatus=='5'">已退款</text>
|
|
|
+ <text class="status s2" v-if="item.orderStatus=='-2'">待付款</text>
|
|
|
+ <text class="status s3" v-if="item.orderStatus=='1'">待使用</text>
|
|
|
+ <text class="status s3" v-if="item.orderStatus=='2'||item.orderStatus=='3'">已使用</text>
|
|
|
+ <text class="status disabled" v-if="item.orderStatus=='4'">已取消</text>
|
|
|
+
|
|
|
+ <view class="head">
|
|
|
+ <!-- <image src="../../../static/scenicSpots/ticketIcon_.png" v-if="status=='0'"></image> -->
|
|
|
+ <!-- <image src="../../../static/scenicSpots/ticketIcon.png" v-else></image> -->
|
|
|
+ <image src="../../../static/my/jd_ms.png" mode="" v-if="item.orderStatus=='0'"></image>
|
|
|
+ <image src="../../../static/my/jd_ms.png" mode="" v-else></image>
|
|
|
+ <text>酒店民宿</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="mid">
|
|
|
+ <view class="name" :class="item.orderStatus=='0'?'disabled':''">{{item.homestayName}}</view>
|
|
|
+ <view class="date">入离日期 {{item.arriveDate}} 至 {{item.leaveDate}} </view>
|
|
|
+ <view class="des">{{item.houseBaseName}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="price" :class="item.orderStatus=='0'?'disabled':''">¥{{item.orderAmount}}</view>
|
|
|
+
|
|
|
+ <view class="btns">
|
|
|
+
|
|
|
+ <template v-if="item.orderStatus==1">
|
|
|
+ <view @click.stop="toStatus0(item)">
|
|
|
+ 取消
|
|
|
+ </view>
|
|
|
+ <!-- <view @click.stop="GoRefund(item)">
|
|
|
+ 申请退订
|
|
|
+ </view> -->
|
|
|
+ <view @click.stop="applyAfterSales(item)">
|
|
|
+ 再次预订
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template v-if="item.orderStatus==-2">
|
|
|
+ <view @click.stop="toStatus0(item)">
|
|
|
+ 取消
|
|
|
+ </view>
|
|
|
+ <view @click.stop="GoToPay(item)" style="color: #0DBFFD;">
|
|
|
+ 去支付
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.orderStatus==3||item.orderStatus==2">
|
|
|
+ <!-- <view @click.stop="applyAfterSales(item)">
|
|
|
+ 删除
|
|
|
+ </view> -->
|
|
|
+ <view @click.stop="toEvaluate(item)">
|
|
|
+ 评价
|
|
|
+ </view>
|
|
|
+ <view @click.stop="applyAfterSales(item)">
|
|
|
+ 再次预订
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.orderStatus==5||item.orderStatus==4">
|
|
|
+ <!-- <view @click.stop="applyAfterSales(item)">
|
|
|
+ 删除
|
|
|
+ </view> -->
|
|
|
+ <view @click.stop="applyAfterSales(item)">
|
|
|
+ 再次预订
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.orderStatus==-1">
|
|
|
+ <view @click.stop="GoRefund(item)">
|
|
|
+ 取消
|
|
|
+ </view>
|
|
|
+ <view @click.stop="applyAfterSales(item)">
|
|
|
+ 再次预订
|
|
|
+ </view>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="tip">{{orderList.length>0?'已显示全部订单':'暂无订单'}}</view> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- <view class="tip"> -->
|
|
|
+ <!-- {{orderList.length>0?'已显示全部订单':'暂无订单'}} -->
|
|
|
+ <!-- <nodata v-if="orderList.length === 0"></nodata> -->
|
|
|
+ <!-- </view> -->
|
|
|
+ <!-- 取消弹框 -->
|
|
|
+ <!-- <u-modal :show="showAgree" :title="title" :content='content' showCancelButton="true" confirmText='确定'
|
|
|
+ confirmColor='#0cbffd' @confirm="confirm" @cancel='cancel'></u-modal> -->
|
|
|
+
|
|
|
+
|
|
|
+ <!-- <u-toast ref="uToast"></u-toast> -->
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ // import nodata from '@/compoments/NoData/index.vue'
|
|
|
+ // import TopTabs from '@/compoments/TopTabs/topTabs.vue';
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ // TopTabs,
|
|
|
+ // nodata
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // mt: uni.getSystemInfoSync().statusBarHeight + 44,
|
|
|
+ h: uni.getSystemInfoSync().windowHeight,
|
|
|
+ mt: uni.getSystemInfoSync().statusBarHeight + 44,
|
|
|
+ titleStyle: {
|
|
|
+ fontSize: '36rpx',
|
|
|
+ fontWeight: "bold",
|
|
|
+ color: "#333333"
|
|
|
+ },
|
|
|
+ list: [{
|
|
|
+ name: '全部'
|
|
|
+ }, {
|
|
|
+ name: '待付款'
|
|
|
+ }, {
|
|
|
+ name: '待使用'
|
|
|
+ }, {
|
|
|
+ name: '退款'
|
|
|
+ }],
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ onLoad() {
|
|
|
+
|
|
|
+ },
|
|
|
+ onReachBottom() {
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ methods: {
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+ .orderList {
|
|
|
+ box-sizing: border-box;
|
|
|
+ background-color: #fff;
|
|
|
+
|
|
|
+ .u-tabs__wrapper__nav__line {
|
|
|
+ // left: 20rpx !important
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .u-button {
|
|
|
+ height: 60rpx !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tip {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #AAAAAA;
|
|
|
+ line-height: 33rpx;
|
|
|
+ margin: 56rpx 0;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+ page {
|
|
|
+ background-color: #F5F8FA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .disabled {
|
|
|
+ color: #AAA !important
|
|
|
+ }
|
|
|
+
|
|
|
+ .list {
|
|
|
+ padding: 0 24rpx;
|
|
|
+
|
|
|
+ .item {
|
|
|
+ background-color: #fff;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 36rpx 24rpx 0;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .status {
|
|
|
+ right: 24rpx;
|
|
|
+ top: 40rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #AAA;
|
|
|
+ position: absolute;
|
|
|
+
|
|
|
+ &.s2 {
|
|
|
+ color: #FF7D01;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.s3 {
|
|
|
+ color: #01B9F9
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .head {
|
|
|
+ color: #111;
|
|
|
+
|
|
|
+ image {
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ text {
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mid {
|
|
|
+ padding: 24rpx 50rpx 40rpx 56rpx;
|
|
|
+ border-bottom: 1rpx solid #EFEFEF;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date {
|
|
|
+ margin: 30rpx 0;
|
|
|
+ color: #AAAAAA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .des {
|
|
|
+ color: #AAAAAA;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btns {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+
|
|
|
+ &>view {
|
|
|
+ // margin: 24rpx 0 0 24rpx;
|
|
|
+ margin: 24rpx;
|
|
|
+ width: 148rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border: 1rpx solid #EFEFEF;
|
|
|
+ border-radius: 28rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ font-family: PingFangSC-Regular, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .price {
|
|
|
+ position: absolute;
|
|
|
+ right: 24rpx;
|
|
|
+ bottom: 144rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #111;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .ml12 {
|
|
|
+ height: 56rpx;
|
|
|
+ width: 148rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 24rpx;
|
|
|
+ }
|
|
|
+</style>
|