订单组件优化

hookehuyr
Commit 1d3e9144bb6e0a4cb85b85177efdfd81882d4403 1d3e9144 1 parent 295b9731
Showing 3 changed files with 66 additions and 8 deletions
src/components/orderCard.vue
src/pages/index/index.vue
src/pages/my/index.vue
--- a/src/components/orderCard.vue
View file @1d3e914
+++ b/src/components/orderCard.vue
View file @1d3e914
@@ -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(() => {
--- a/src/pages/index/index.vue
View file @1d3e914
+++ b/src/pages/index/index.vue
View file @1d3e914
 <!--
  * @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({
--- a/src/pages/my/index.vue
View file @1d3e914
+++ b/src/pages/my/index.vue
View file @1d3e914
 <!--
  * @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>