VAVABUY/pages/dashboard/parcel.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar fixed border :navShow="navShow">
        <template #center>
          <view class="nav_search">
            <Search
              v-model="searchValue"
              @confirm="searchConfirm"
              :placeholder="t('名称订单号商品名称')"
            >
              <template #prefix>
                <i class="icon-font icon-search"></i>
              </template>
            </Search>
          </view>
        </template>
        <template #right>
          <navFilter @submit="filterSubmit" isOrderTime />
          <navMenu
            :options="{ icon: 'icon-home', text: '主页' }"
            page="parcel"
          />
        </template>
      </Navbar>
      <view class="content3">
        <view class="cont_tab">
          <Tab
            :active="tabActive"
            :tabList="tabList"
            @confirm="tabConfirm"
            keyName="text"
          />
        </view>
        <view class="cont">
          <List
            url="/shop/packages/lists"
            :topHeight="tabHeight"
            :defaultParams="{ keywords: searchValue, ...params }"
            ref="listRef"
          >
            <template #item="{ item }">
              <view class="order_list">
                <view class="order_header">
                  <view class="create_time">
                    <trans _t="创建时间" />:
                    {{ useGlobal().$format(item.indate) }}
                  </view>
                </view>
                <view class="order_item">
                  <view
                    class="order_item_wrapper"
                    v-for="(val, num) in item.goods"
                    :key="num"
                    @click="listClick(item)"
                  >
                    <view class="_item_wrapper">
                      <view class="thumb_img">
                        <image :src="val.pic_url" class="_img"></image>
                      </view>
                      <view class="goods_info">
                        <view class="info_name">
                          <view class="_name">{{ val.goodTitle }}</view>
                          <view class="_price"
                            >{{ symbol.symbol }}&nbsp;{{
                              Moneyhtml(val.price)
                            }}</view
                          >
                        </view>
                        <view class="spec_info">
                          <view class="spec_desc">{{ val.sku_desc }}</view>
                          <view class="spec_num">x{{ val.total }}</view>
                        </view>
                        <up-copy
                          :content="item?.orderNo"
                          :notice="t('复制成功')"
                          class="right_value"
                          @click.stop
                        >
                          <up-icon name="file-text" size="16px"></up-icon>
                          <text>{{ item?.orderNo }}</text>
                        </up-copy>
                      </view>
                    </view>
                    <view class="order_status">
                      <text>{{ item.statusTxt }}&nbsp;</text>
                      <!-- <i class="icon-font icon-question2"></i> -->
                    </view>
                  </view>
                  <view class="order_footer">
                    <view class="order_price">
                      <view class="price_text"> <trans _t="运费" />： </view>
                      <text class="price-pay"
                        >{{ symbol.symbol
                        }}{{
                          Moneyhtml(item.money - item.discount) < 0
                            ? 0.01
                            : Moneyhtml(item.money - item.discount)
                        }}</text
                      >
                      <text class="price-original" v-if="item.discount > 0"
                        >{{ symbol.symbol }}{{ Moneyhtml(item.money) }}</text
                      >
                      <!-- <i class="icon-font icon-question2"></i> -->
                    </view>
                    <view class="order_btns">
                      <view class="btn" @click="logisticsPop(item)">
                        <trans _t="订单详情" />
                      </view>
                      <view
                        class="btn"
                        v-if="item.status <= 100"
                        @click="deleteOrder(item)"
                      >
                        <trans _t="删除订单" />
                      </view>
                      <view
                        class="btn pay_btn"
                        @click="paySubmit(item)"
                        v-if="item.status == 100"
                      >
                        <trans _t="支付" />
                      </view>
                      <template v-if="item.status == 401">
                        <view class="btn pay_btn" @click="confirmReceive(item)">
                          <trans _t="确认收货" />
                        </view>
                      </template>
                      <template v-if="item.status == 402 && !item.isComment">
                        <view class="btn pay_btn" @click="openReview(item)">
                          <trans _t="待评价" />
                        </view>
                      </template>
                      <template v-if="item.isComment">
                        <view
                          class="btn pay_btn"
                          @click="openCommentPopup(item)"
                        >
                          <trans _t="查看评论" />
                        </view>
                      </template>
                    </view>
                    <!-- <view class="order_btns" v-if="item.status == 100">
                      <view class="btn" @click="orderCancel(item)">
                        <trans _t="取消" />
                      </view>
                      <view class="btn pay_btn" @click="paySubmit(item)">
                        <trans _t="支付" />
                      </view>
                    </view> -->
                  </view>
                </view>
              </view>
            </template>
          </List>
        </view>
      </view>

      <ReviewPopup
        ref="reviewPopupRef"
        :id="productId"
        @submit="handleSubmit"
      />

      <CommentPopup ref="commentPopupRef" :commentId="currentCommentId" />
    </view>
  </Theme>
</template>
<script setup>
import Navbar from "@/components/navbar";
import navMenu from "@/components/nav_menu";
import navFilter from "@/components/nav_filter";
import Search from "@/components/input";
import Tab from "@/components/tabs";
import List from "@/components/list";
import ReviewPopup from "./components/ReviewPopup.vue";
import CommentPopup from "./components/CommentPopup.vue";
import { ref, watch, onMounted, nextTick, computed } from "vue";
import { t } from "@/locale";
import { useGlobal, Modal, Toast, Moneyhtml } from "@/utils";
import { useSystemStore, useShopStore } from "@/store";
import { onShow, onReachBottom } from "@dcloudio/uni-app";
import {
  SHOP_PACKAGES_CANCEL,
  SHOP_PACKAGES_FINISH,
  SHOP_ORDER_EXPRESS,
} from "@/api";

const useSystem = useSystemStore();
const useShop = useShopStore();
const searchValue = ref("");
const tabActive = ref(0);
const listRef = ref(null);
const tabList = [
  { text: "所有包裹", status: 0 },
  { text: "待确认", status: 100 },
];
const params = ref({});
const symbol = computed(() => useSystem.getSymbol);
const reviewPopupRef = ref(null);
const productId = ref("");

const commentPopupRef = ref(null);
const currentCommentId = ref("");

const props = defineProps({
  tabHeight: {
    type: Number,
    default: 0,
  },
  tabParams: {
    type: Object,
  },
  navShow: Boolean,
});

watch(
  () => props.tabParams,
  (newVal) => {
    if (newVal && newVal.tab == 2) {
      tabActive.value = newVal.type;
      params.value.status = newVal.status;
      useShop.setTabParams(null);

      nextTick(() => {
        listRef.value?.handleRefresh();
      });
    }
  },
  { immediate: true }
);

const openReview = (item) => {
  productId.value = item.id;
  reviewPopupRef.value?.open();
};

const openCommentPopup = (item) => {
  currentCommentId.value = item.id;
  commentPopupRef.value?.open(item.id);
};

const handleSubmit = () => {
  nextTick(() => {
    // listRef.value && listRef.value.handleRefresh();
  });
};

const searchConfirm = () => {
  nextTick(() => {
    listRef.value && listRef.value.handleRefresh();
  });
};

const listClick = (item) => {
  uni.navigateTo({ url: `/pages/dashboard/parcel_detail?orderid=${item.id}` });
};

const tabConfirm = (item, index) => {
  if (!item) return;
  tabActive.value = index;
  params.value.status = item.status;
  nextTick(() => {
    listRef.value && listRef.value.handleRefresh();
  });
};

const filterSubmit = (obj) => {
  const { status, ...newObj } = obj;
  params.value = newObj;
  nextTick(() => {
    listRef.value && listRef.value.handleRefresh();
  });
};

const paySubmit = (item) => {
  uni.navigateTo({
    url: `/pages/shop/payment?oid=${item.id}&type=package&money=${item.money}`,
  });
};

const logisticsPop = (item) => {
  uni.navigateTo({
    url: `/pages/dashboard/parcel_detail?orderid=${item.id}`,
  });
};

const confirmReceive = (item) => {
  Modal({ content: t("确定收到货了吗？") }).then(async () => {
    try {
      const res = await SHOP_PACKAGES_FINISH(item.id);
      nextTick(() => {
        listRef.value && listRef.value.handleRefresh();
      });
    } catch (error) {
      Toast(error.msg);
    }
  });
};

const deleteOrder = async (item) => {
  Modal({ content: t("你确定要删除此订单吗？") }).then(async () => {
    try {
      await SHOP_PACKAGES_CANCEL(item.id);
      nextTick(() => {
        listRef.value && listRef.value.handleRefresh();
      });
    } catch (error) {
      Toast(error.msg);
    }
  });
};

onMounted(() => {
  listRef.value && listRef.value.getData();
});
onShow(() => {
  listRef.value && listRef.value.getData();
});
onReachBottom(() => {
  nextTick(() => {
    listRef.value && listRef.value.scrolltolower();
  });
});
</script>
<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  background-color: var(--bg);
  .flex();
  flex-direction: column;

  /deep/ .u-navbar__content {
    justify-content: unset;

    .u-navbar__content__left {
      position: unset;
    }
  }

  .nav_search {
    .icon-search {
      color: #a8abb2;
      .size(28px);
    }
  }

  .content3 {
    flex-grow: 1;
    // height: calc(100vh - 44px);
    flex-direction: column;
    .flex();

    .cont_tab {
      background-color: var(--light);
      padding: 0 48rpx;

      :deep(.tab) {
        .active {
          color: var(--text) !important;

          &::before {
            background-color: var(--text) !important;
          }
        }
      }
    }

    .cont {
      flex-grow: 1;
      overflow: hidden scroll;
      padding: 0 24rpx 24rpx;

      .order_list {
        margin-top: 24rpx;
        padding: 16rpx 24rpx;
        background-color: var(--light);
        border-radius: 16rpx;

        .order_header {
          .ver();
          margin-bottom: 16rpx;

          .create_time {
            .size(24rpx);
            color: var(--text);
            font-weight: 700;

            text {
              font-weight: 500;
            }
          }
        }

        .order_item {
          &_wrapper {
            margin-top: 16rpx;

            ._item_wrapper {
              .flex();

              .thumb_img {
                width: 140rpx;
                height: 140rpx;

                ._img {
                  width: inherit;
                  height: inherit;
                  border-radius: 16rpx;
                }
              }

              .goods_info {
                margin-left: 16rpx;
                flex: 1;

                .info_name {
                  color: var(--text);
                  .size(24rpx);
                  font-weight: 700;
                  line-height: 44rpx;
                  .ver();

                  ._name {
                    flex: 1;
                    // .ellipsis();
                    margin-right: 8rpx;
                  }
                }

                .spec_info {
                  .flex();
                  flex: 1;
                  margin-top: 8rpx;
                  color: var(--text-01);
                  .size(24rpx);
                  line-height: 40rpx;

                  .spec_desc {
                    flex: 1;
                    margin-right: 8rpx;
                  }
                }

                .right_value {
                  .hor(flex-end);
                  .size(24rpx);
                  margin-top: 12rpx;
                }
              }
            }

            .order_status {
              color: var(--primary);
              .size(24rpx);
              height: 40rpx;
              .flex_position(flex-end);
              margin-top: 16rpx;

              .icon-question2 {
                .size(36rpx);
              }
            }
          }

          .order_footer {
            margin-top: 16rpx;
            border-top: 1px solid #f5f6f7;

            .order_price {
              padding-top: 16rpx;
              .flex_position(flex-end);
              color: var(--red);
              .size();
              font-weight: 700;
              height: 48rpx;
              line-height: 1;

              .price_text {
                color: var(--text);
                .size(24rpx);
                font-weight: 400;
              }

              .icon-question2 {
                font-weight: 400;
                color: var(--text-01);
                margin-left: 8rpx;
              }

              .price-pay {
                color: var(--red);
                font-weight: bold;
                margin-right: 16rpx;
              }

              .price-original {
                font-size: 24rpx;
                color: #999;
                text-decoration: line-through;
                line-height: 1;
              }
            }

            .end_time {
              .flex_position(flex-end);
              margin-top: 16rpx;
              color: #e62e2e;
              font-weight: 700;
              .size(24rpx);

              text {
                font-weight: 400;
              }
            }

            .order_btns {
              flex-wrap: wrap;
              .flex_position(flex-end);
              margin-top: 16rpx;
              gap: 16rpx;

              .btn {
                .flex_center();
                border-radius: 16rpx;
                padding: 0 30rpx;
                .size(24rpx);
                height: 48rpx;
                border: 1px solid var(--black);
                background-color: var(--light);
                color: var(--black);
              }

              .pay_btn {
                color: var(--light);
                background-color: var(--black);
              }
            }
          }
        }
      }
    }
  }
}
</style>