hookehuyr

订单组件优化

......@@ -52,7 +52,7 @@
</view>
</nut-col>
<!-- 待支付状态下,剩余时间归零 操作隐藏 -->
<nut-col span="18" v-if="props.data.status === 'no-pay' && remain_time">
<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>
......@@ -61,7 +61,7 @@
</nut-row>
</view>
<!-- 待支付状态下,剩余时间归零 显示隐藏 -->
<view v-if="props.data.status === 'no-pay' && remain_time" class="order-remain-time">
<view v-if="no_pay_show" class="order-remain-time">
<text>支付剩余时间</text>&nbsp;
<text style="font-size: 23rpx; color: red;">
{{ formatTime(remain_time) }}
......@@ -124,7 +124,7 @@
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { ref, onMounted, onUnmounted, computed } from 'vue'
import Taro from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro';
......@@ -181,6 +181,17 @@ const showOrderInfo = (id) => {
show_info.value = !show_info.value;
}
// 控制待支付状态下的显示
const no_pay_show = computed(() => {
let flag = false;
if (props.data.status === 'no-pay' && remain_time.value) { // 倒计时进行时
flag = true;
} else if (props.data.status === 'no-pay' && !remain_time.value) { // 倒计时结束
flag = false;
}
return flag;
});
const cancelOrder = (id) => {
Taro.showModal({
title: '温馨提示',
......@@ -209,7 +220,7 @@ const payOrder = (id) => {
let timeId = null;
onMounted(() => {
console.warn(props.data)
console.warn(props.data.status)
remain_time.value = props.data.remain_time;
// 进入页面后,开始倒计时
timeId = setInterval(() => {
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-20 10:44:15
* @LastEditTime: 2023-12-21 10:10:57
* @FilePath: /meihuaApp/src/pages/index/index.vue
* @Description: 首页
-->
......@@ -99,8 +99,26 @@ export default {
});
},
async onShow () {
// Taro.showLoading({ mask: true, title: "加载中..." })
// // 获取活动和轮播信息
// const { code, data } = await activityHomeAPI({ page: this.page, limit: this.limit });
// if (code) {
// // 绑定服务器时间,判断状态
// data.activity_list.forEach(item => {
// item.server_time = data.server_time;
// });
// this.activity_list = data.activity_list;
// this.carousel = data.carousel;
// this.page = this.page + 1;
// // 缺省页判断
// this.no_activity = this.activity_list.length ? false : true;
// this.no_carousel = this.carousel.length ? false : true;
// Taro.hideLoading()
// }
},
onHide () { // 离开当前页面
this.page = 0;
this.flag = true;
},
computed: {
scrollStyle() {
......@@ -127,6 +145,9 @@ export default {
return {
indexCoverHeight: 0,
scrollTop: 0,
flag: true,
page: 0,
limit: 10,
};
},
methods: {
......@@ -136,7 +157,29 @@ export default {
this.scrollTop = 0; // 重置scrollTop,让按钮能再往下滚动
},
onScrollToLower () {
console.warn('onScrollToLower');
if(!this.flag){
return
}
this.flag = false;
// this.getList();
},
async getList () {
// // 获取推荐活动列表
// const { code, data } = await activityHomeAPI({ page: this.page, limit: this.limit });
// if (code) {
// if (data.activity_list.length) {
// // 绑定服务器时间,判断状态
// data.activity_list.forEach(item => {
// item.server_time = data.server_time;
// });
// this.activity_list = this.activity_list.concat(data.activity_list);
// this.page = this.page + 1;
// this.flag = true;
// } else {
// Toast('没有数据')
// }
// }
// }
},
async onArrowDown () {
Taro.pageScrollTo({
......
<!--
* @Date: 2023-12-13 11:13:13
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-20 18:22:40
* @LastEditTime: 2023-12-21 09:08:58
* @FilePath: /meihuaApp/src/pages/my/index.vue
* @Description: 文件描述
-->
......@@ -22,7 +22,7 @@
<view>
<view id="title" style="padding-left: 1.5rem; font-size: 35rpx; font-weight: bold;">我的订单</view>
<view>
<nut-tabs v-model="value" title-scroll title-gutter="0" name="tabName" background="#FFF" color="#6A4925" animated-time="0">
<nut-tabs v-model="value" @click="onTabClick" title-scroll title-gutter="0" name="tabName" background="#FFF" color="#6A4925" animated-time="0">
<nut-tab-pane v-for="item in tabList" :title="item.title" :pane-key="item.key">
</nut-tab-pane>
</nut-tabs>
......@@ -135,6 +135,10 @@ const goToEdit = () => {
url: '/pages/myInfo/index',
});
}
const onTabClick = ({ title, paneKey, disabled }) => {
console.warn(title, paneKey);
}
</script>
<script>
......