Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
bdc74f4c 1 parent 750c3959

fix 数据操作优化

Inline Side-by-side
Showing 3 changed files with 41 additions and 11 deletions
......@@ -27,7 +27,7 @@
</nut-col>
</nut-row>
</view>
<view :class="['calendar-select-page', props.data.status === 'enable' || props.data.status === 'cancel' ? 'bg-gray' : '']">
<view :class="['calendar-select-page', calcBgColor ? 'bg-gray' : '']">
<nut-row gutter="10">
<nut-col span="9">
<view class="check-in-text">入住日期</view>
......@@ -52,16 +52,21 @@
</view>
</nut-col>
<!-- 待支付状态下，剩余时间归零 操作隐藏 -->
<nut-col span="18" v-if="no_pay_show">
<view v-if="props.data.status === 'no-pay' || props.data.status === 'apply'" class="order-control">
<nut-button @tap="cancelOrder('id')" plain color="#6A4925" size="small">取消订单</nut-button>&nbsp;
<nut-button v-if="props.data.status !== 'apply'" @tap="payOrder('id')" color="#6A4925" size="small">立即支付</nut-button>
<nut-col span="18">
<view v-if="showBtn" class="order-control">
<nut-button v-if="pay_show || props.data.status === 'apply'" @tap="cancelOrder('id')" plain color="#6A4925" size="small">取消订单</nut-button>&nbsp;
<nut-button v-if="pay_show" @tap="payOrder('id')" color="#6A4925" size="small">立即支付</nut-button>
<view v-if="delay_pay_show">
<text style="font-size: 23rpx; color: red;">
支付超时，请重新下单！
</text>
</view>
</view>
</nut-col>
</nut-row>
</view>
<!-- 待支付状态下，剩余时间归零 显示隐藏 -->
<view v-if="no_pay_show" class="order-remain-time">
<view v-if="pay_show" class="order-remain-time">
<text>支付剩余时间</text>&nbsp;
<text style="font-size: 23rpx; color: red;">
{{ formatTime(remain_time) }}
......@@ -124,7 +129,7 @@
</template>
<script setup>
import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
import { ref, reactive, onMounted, onUnmounted, computed, } from 'vue'
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro';
......@@ -142,6 +147,16 @@ const STATUS_TEXT = {
'no-pay': '待支付',
}
// 日历背景色灰色的条件判断
const calcBgColor = computed(() => {
return props.data.status === 'enable' || props.data.status === 'cancel';
});
// 显示操作按钮的条件判断
const showBtn = computed(() => {
return props.data.status === 'apply' || props.data.status === 'no-pay';
});
/**
* 格式化时间
* @param {*} seconds
......@@ -182,7 +197,7 @@ const showOrderInfo = (id) => {
}
// 控制待支付状态下的显示
const no_pay_show = computed(() => {
const pay_show = computed(() => {
let flag = false;
if (props.data.status === 'no-pay' && remain_time.value) { // 倒计时进行时
flag = true;
......@@ -192,6 +207,11 @@ const no_pay_show = computed(() => {
return flag;
});
// 支付超时显示
const delay_pay_show = computed(() => {
return props.data.status === 'no-pay' && !remain_time.value;
})
const cancelOrder = (id) => {
Taro.showModal({
title: '温馨提示',
......@@ -199,6 +219,15 @@ const cancelOrder = (id) => {
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
// TODO：取消订单
if (id) {
Taro.showToast({
title: '取消成功',
icon:'success',
duration: 2000
});
// TODO：刷新当前列表接口
}
} else if (res.cancel) {
console.log('用户点击取消')
}
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-26 17:21:40
* @LastEditTime: 2023-12-27 10:55:11
* @FilePath: /meihuaApp/src/pages/confirm/index.vue
* @Description: 确认订单页面
-->
......@@ -271,6 +271,7 @@ const goPay = () => {
show_pay.value = true;
payData.value.id = '订单ID';
payData.value.price = room_price_info.value.discount * book_count.value * booking_info.value.days;
// TODO: 数据从哪里过去？
payData.value.remain_time = '1000'; // 支付失效秒数
}, 1000);
}
......
<!--
* @Date: 2023-12-13 11:13:13
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-22 12:17:30
* @LastEditTime: 2023-12-27 10:55:44
* @FilePath: /meihuaApp/src/pages/my/index.vue
* @Description: 我的页面
-->
......@@ -71,7 +71,7 @@ const orderList = ref([
name: '阿忆妞妞1',
phone: '138****8888',
price: 1200,
remain_time: 10,
remain_time: 1000,
status: 'no-pay',
},
{
......