|
@@ -1,261 +1,336 @@
|
|
|
<template>
|
|
|
<view class="o-header-list">
|
|
|
- <view :class="[selected==index?'sel-item-list':'item-list']" v-for="(item,index) in orderTypeList" :key="index"
|
|
|
- @click="selectedItem(index)">{{item}}</view>
|
|
|
+ <view :class="[selected == index ? 'sel-item-list' : 'item-list']" v-for="(item, index) in orderTypeList"
|
|
|
+ :key="index" @click="selectedItem(index)">{{ item }}</view>
|
|
|
</view>
|
|
|
<view style="height: 80rpx;"></view>
|
|
|
<view class="content">
|
|
|
- <view class="o-orderlist-card" v-for="item in 2">
|
|
|
+ <view class="o-orderlist-card" v-for="item in orderList" :key="item.orderId"
|
|
|
+ @click="RouterUtils.to_page(`/pages/index/toBeUsed/index?orderId=${item.orderId}&orderType=${item.orderType}`)">
|
|
|
<view class="o-order-name">
|
|
|
- <view class="order-name">场地:林旦综合运动馆</view>
|
|
|
+ <view class="order-name">场地:{{ item.orderProInfoList[0].address || '--' }}</view>
|
|
|
<!-- 待付款 -->
|
|
|
- <view class="order-status" v-if="selected==1">待支付(剩余14:23)</view>
|
|
|
- <view class="item-order-status" style="color:#FB5B5B;" v-if="selected==2">待使用</view>
|
|
|
- <view class="item-order-status" v-if="selected==3">已使用</view>
|
|
|
- <view class="item-order-status" v-if="selected==4">已退款</view>
|
|
|
+ <view class="order-status" v-if="item.orderStatus == 0">待支付(剩余{{ downTime }})</view>
|
|
|
+ <view class="item-order-status" style="color:#FB5B5B;" v-if="item.orderStatus == 1">待使用</view>
|
|
|
+ <view class="item-order-status" v-if="item.orderStatus == 2">已使用</view>
|
|
|
+ <view class="item-order-status" v-if="item.orderStatus == 3">已到期</view>
|
|
|
+ <view class="item-order-status" v-if="item.orderStatus == 4">已取消</view>
|
|
|
+ <view class="item-order-status" v-if="item.orderStatus == 5">待退款</view>
|
|
|
+ <view class="item-order-status" v-if="item.orderStatus == 6">已退款</view>
|
|
|
</view>
|
|
|
<view class="line"></view>
|
|
|
<view class="o-order-info">
|
|
|
<view class="item-info">
|
|
|
- <!-- 多个商品 -->
|
|
|
-<!-- <scroll-view class="scroll-view_H scroll-order" scroll-x="true">
|
|
|
- <view class="scroll-view-item_H scroll-order-item" v-for="item in 5">
|
|
|
+ <!-- 有保险 -->
|
|
|
+ <scroll-view class="scroll-view_H scroll-order" scroll-x="true"
|
|
|
+ v-if="item.orderInsureList.length > 0">
|
|
|
+ <view class="scroll-view-item_H scroll-order-item">
|
|
|
<view class="item-order">
|
|
|
<view class="order-img">
|
|
|
- <image src="https://img.keaitupian.cn/newupload/08/1629449018344288.jpg" mode="">
|
|
|
+ <image :src="item.orderProInfoList[0].productImage" mode="">
|
|
|
</image>
|
|
|
</view>
|
|
|
- <view class="order-name textHidden">参赛意外险参赛意外险</view>
|
|
|
+ <view class="order-name textHidden">{{ item.orderProInfoList[0].productName }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
- </scroll-view> -->
|
|
|
- <!-- 单个商品 -->
|
|
|
- <view class="item-order-single">
|
|
|
+ <view class="scroll-view-item_H scroll-order-item">
|
|
|
+ <view class="item-order">
|
|
|
+ <view class="order-img">
|
|
|
+ <image :src="item.orderInsureList[0].productImage" mode="">
|
|
|
+ </image>
|
|
|
+ </view>
|
|
|
+ <view class="order-name textHidden">{{ item.orderInsureList[0].productName }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <!-- 没保险 -->
|
|
|
+ <view class="item-order-single" v-else>
|
|
|
<view class="single-img">
|
|
|
- <image src="https://img.keaitupian.cn/newupload/08/1629449018344288.jpg" mode=""></image>
|
|
|
+ <image :src="item.orderProInfoList[0].productImage" mode=""></image>
|
|
|
</view>
|
|
|
<view class="single-name">
|
|
|
- <view class="item-single-name textHidden" v-for="item in 3">不限场地·指定时段·免费不限场地·指定时段·免费...
|
|
|
- </view>
|
|
|
+ <view class="item-single-name textHidden">{{ item.orderProInfoList[0].productName }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="order-data">
|
|
|
- <view class="order-price"><text class="mini-text">¥</text>25.9</view>
|
|
|
- <view class="order-num">共2件</view>
|
|
|
+ <view class="order-price"><text class="mini-text">¥</text>{{ item.price.toFixed(2) }}</view>
|
|
|
+ <view class="order-num">共{{ item.orderProInfoList.length }}件</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="line"></view>
|
|
|
<!-- 待付款 -->
|
|
|
<view class="o-order-btn">
|
|
|
- <view class="cancel-btn" v-if="selected==1">取消订单</view>
|
|
|
- <view class="pay-btn" v-if="selected==1">付款</view>
|
|
|
+ <view class="cancel-btn" v-if="selected == 1">取消订单</view>
|
|
|
+ <view class="pay-btn" v-if="selected == 1">付款</view>
|
|
|
<!-- 售后/退款 -->
|
|
|
- <view class="pay-btn" v-if="selected==3">评价</view>
|
|
|
+ <view class="pay-btn" v-if="selected == 3">评价</view>
|
|
|
<!-- 已使用 -->
|
|
|
- <view class="cancel-btn" v-if="selected==4">申请退款</view>
|
|
|
- <view class="pay-btn" v-if="selected==4">凭证</view>
|
|
|
+ <view class="cancel-btn" v-if="selected == 4">申请退款</view>
|
|
|
+ <view class="pay-btn" v-if="selected == 4">凭证</view>
|
|
|
</view>
|
|
|
<!-- 待使用 -->
|
|
|
- <view class="o-order-tips">
|
|
|
+ <view class="o-order-tips" v-if="item.orderStatus == 1">
|
|
|
限04.23 06:00-08:00使用,过期作废
|
|
|
</view>
|
|
|
</view>
|
|
|
- <zs-empty></zs-empty>
|
|
|
+ <zs-empty v-if="orderList.length == 0"></zs-empty>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
- import { ref, onMounted } from 'vue'
|
|
|
- import { onLoad } from '@dcloudio/uni-app';
|
|
|
- import zsEmpty from '@/components/zs-empty/index.vue'
|
|
|
- const selected = ref(0)
|
|
|
- const orderTypeList = ref(['全部', '待付款', '待使用', '已使用', '退款/售后'])
|
|
|
-
|
|
|
- onLoad((option)=>{
|
|
|
- selected.value=option.selIndex
|
|
|
- })
|
|
|
- const selectedItem = (i) => {
|
|
|
- selected.value = i
|
|
|
+import { ref, onMounted } from 'vue'
|
|
|
+import { http } from '@/utils/http'
|
|
|
+import { onLoad } from '@dcloudio/uni-app';
|
|
|
+import zsEmpty from '@/components/zs-empty/index.vue'
|
|
|
+import { RouterUtils } from '@/utils/util'
|
|
|
+const selected = ref(0)
|
|
|
+const orderTypeList = ref(['全部', '待付款', '待使用', '已使用', '退款/售后'])
|
|
|
+
|
|
|
+onLoad((option) => {
|
|
|
+ selected.value = option.selIndex
|
|
|
+})
|
|
|
+onMounted(() => {
|
|
|
+ getOrderList()
|
|
|
+})
|
|
|
+const selectedItem = (i) => {
|
|
|
+ selected.value = i
|
|
|
+ if (i == 0) {
|
|
|
+ orderFormData.value.orderStatus = null
|
|
|
+ } else if (i == 1) {
|
|
|
+ orderFormData.value.orderStatus = 0
|
|
|
+ } else if (i == 2) {
|
|
|
+ orderFormData.value.orderStatus = 1
|
|
|
+ } else if (i == 3) {
|
|
|
+ orderFormData.value.orderStatus = 2
|
|
|
+ }else if (i == 4) {
|
|
|
+ orderFormData.value.orderStatus = null
|
|
|
+ orderFormData.value.orAfterSale=1
|
|
|
}
|
|
|
+ getOrderList()
|
|
|
+}
|
|
|
+
|
|
|
+// 获取订单数据
|
|
|
+const orderFormData = ref({
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ orderStatus:null,
|
|
|
+ orAfterSale: 0
|
|
|
+})
|
|
|
+const orderList = ref([])
|
|
|
+const downTime = ref(null)
|
|
|
+// 订单状态 0-待付款 1-待使用 2-已使用 3-已到期 4-已取消 5-待退款 6已退款
|
|
|
+const getOrderList = () => {
|
|
|
+ http.post('/order/pageOrders', orderFormData.value, { loading: true }).then((res) => {
|
|
|
+ orderList.value = res.result.records
|
|
|
+ orderList.value.forEach((item) => {
|
|
|
+ if (item.orderStatus == 0) {
|
|
|
+ const createTime = new Date(item.orderProInfoList[0].createTime);
|
|
|
+ const endTime = new Date(createTime.getTime() + 15 * 60 * 1000);
|
|
|
+ const remainingTime = endTime - new Date();
|
|
|
+ if (remainingTime > 0) {
|
|
|
+ const minutes = Math.floor(remainingTime / (1000 * 60));
|
|
|
+ const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
|
|
|
+ downTime.value = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
|
|
|
+ const timer = setInterval(() => {
|
|
|
+ const now = new Date();
|
|
|
+ const newRemainingTime = endTime - now;
|
|
|
+ if (newRemainingTime <= 0) {
|
|
|
+ clearInterval(timer);
|
|
|
+ downTime.value = "00:00";
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const newMinutes = Math.floor(newRemainingTime / (1000 * 60));
|
|
|
+ const newSeconds = Math.floor((newRemainingTime % (1000 * 60)) / 1000);
|
|
|
+ downTime.value = `${newMinutes.toString().padStart(2, '0')}:${newSeconds.toString().padStart(2, '0')}`;
|
|
|
+ }, 1000);
|
|
|
+ } else {
|
|
|
+ downTime.value = "00:00";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
- .o-header-list {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
+.o-header-list {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ height: 80rpx;
|
|
|
+ background: #fff;
|
|
|
+ z-index: 1000;
|
|
|
+
|
|
|
+ .sel-item-list {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+ transition: all .3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-list {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ transition: all .3s;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.o-orderlist-card {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+
|
|
|
+ .o-order-name {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
- height: 80rpx;
|
|
|
- background: #fff;
|
|
|
- z-index: 1000;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 26rpx;
|
|
|
+
|
|
|
+ .order-name {
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
|
|
|
- .sel-item-list {
|
|
|
+ .order-status {
|
|
|
font-weight: bold;
|
|
|
font-size: 28rpx;
|
|
|
- color: #222222;
|
|
|
- transition: all .3s;
|
|
|
+ color: #FB5B5B;
|
|
|
}
|
|
|
|
|
|
- .item-list {
|
|
|
+ .item-order-status {
|
|
|
+ font-weight: bold;
|
|
|
font-size: 28rpx;
|
|
|
color: #AAAAAA;
|
|
|
- transition: all .3s;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .o-orderlist-card {
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 32rpx;
|
|
|
- padding: 20rpx;
|
|
|
- margin-top: 20rpx;
|
|
|
-
|
|
|
- .o-order-name {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 26rpx;
|
|
|
-
|
|
|
- .order-name {
|
|
|
- font-size: 24rpx;
|
|
|
- color: #222222;
|
|
|
- }
|
|
|
-
|
|
|
- .order-status {
|
|
|
- font-weight: bold;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #FB5B5B;
|
|
|
- }
|
|
|
-
|
|
|
- .item-order-status {
|
|
|
- font-weight: bold;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #AAAAAA;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .o-order-info {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-top: 24rpx;
|
|
|
- margin-bottom: 24rpx;
|
|
|
-
|
|
|
- .item-info {
|
|
|
+ .o-order-info {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
|
|
|
- // 多个商品
|
|
|
- .scroll-order {
|
|
|
- width: 560rpx;
|
|
|
+ .item-info {
|
|
|
|
|
|
- .scroll-order-item {
|
|
|
- margin-right: 20rpx;
|
|
|
+ // 多个商品
|
|
|
+ .scroll-order {
|
|
|
+ width: 500rpx;
|
|
|
|
|
|
- .item-order {
|
|
|
- .order-img {
|
|
|
- &>image {
|
|
|
- width: 160rpx;
|
|
|
- height: 160rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+ .scroll-order-item {
|
|
|
+ margin-right: 20rpx;
|
|
|
|
|
|
- .order-name {
|
|
|
+ .item-order {
|
|
|
+ .order-img {
|
|
|
+ &>image {
|
|
|
width: 160rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #222222;
|
|
|
+ height: 160rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- // 单个商品
|
|
|
- .item-order-single {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 20rpx;
|
|
|
-
|
|
|
- .single-img {
|
|
|
- &>image {
|
|
|
+ .order-name {
|
|
|
width: 160rpx;
|
|
|
- height: 160rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .single-name {
|
|
|
- width: 360rpx;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #222222;
|
|
|
-
|
|
|
- .item-single-name {
|
|
|
- width: 360rpx;
|
|
|
- margin-bottom: 10rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .order-data {
|
|
|
- width: 100rpx;
|
|
|
- border-left: 1rpx solid #efefef;
|
|
|
- text-align: center;
|
|
|
+ // 单个商品
|
|
|
+ .item-order-single {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 20rpx;
|
|
|
|
|
|
- .order-price {
|
|
|
- font-weight: 800;
|
|
|
- font-size: 36rpx;
|
|
|
- color: #FB5B5B;
|
|
|
+ .single-img {
|
|
|
+ &>image {
|
|
|
+ width: 160rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .order-num {
|
|
|
- margin-top: 10rpx;
|
|
|
- font-size: 24rpx;
|
|
|
- color: #AAAAAA;
|
|
|
+ .single-name {
|
|
|
+ width: 360rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+
|
|
|
+ .item-single-name {
|
|
|
+ width: 360rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .o-order-btn {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
- gap: 20rpx;
|
|
|
- margin-top: 24rpx;
|
|
|
+ .order-data {
|
|
|
+ width: 400rpx;
|
|
|
+ border-left: 1rpx solid #efefef;
|
|
|
+ text-align: center;
|
|
|
|
|
|
- .cancel-btn {
|
|
|
- width: 200rpx;
|
|
|
- height: 68rpx;
|
|
|
- background: #FFFFFF;
|
|
|
- border-radius: 60rpx;
|
|
|
- border: 2rpx solid #AAAAAA;
|
|
|
- font-weight: bold;
|
|
|
+ .order-price {
|
|
|
+ font-weight: 600;
|
|
|
font-size: 28rpx;
|
|
|
- color: #AAAAAA;
|
|
|
- line-height: 68rpx;
|
|
|
- text-align: center;
|
|
|
+ color: #FB5B5B;
|
|
|
}
|
|
|
|
|
|
- .pay-btn {
|
|
|
- width: 200rpx;
|
|
|
- height: 68rpx;
|
|
|
- background: #C8FF0C;
|
|
|
- border-radius: 60rpx;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 28rpx;
|
|
|
- color: #222222;
|
|
|
- text-align: center;
|
|
|
- line-height: 68rpx;
|
|
|
+ .order-num {
|
|
|
+ margin-top: 10rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .o-order-btn {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 20rpx;
|
|
|
+ margin-top: 24rpx;
|
|
|
|
|
|
- .o-order-tips {
|
|
|
- margin-top: 24rpx;
|
|
|
- background: #F6F6F6;
|
|
|
- border-radius: 16rpx;
|
|
|
- padding: 20rpx;
|
|
|
+ .cancel-btn {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 68rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 60rpx;
|
|
|
+ border: 2rpx solid #AAAAAA;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ line-height: 68rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pay-btn {
|
|
|
+ width: 200rpx;
|
|
|
+ height: 68rpx;
|
|
|
+ background: #C8FF0C;
|
|
|
+ border-radius: 60rpx;
|
|
|
+ font-weight: bold;
|
|
|
font-size: 28rpx;
|
|
|
color: #222222;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 68rpx;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .o-order-tips {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ background: #F6F6F6;
|
|
|
+ border-radius: 16rpx;
|
|
|
+ padding: 20rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #222222;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|