VAVABUY/pages/dashboard/warehouse.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="warehouse"
          />
        </template>
      </Navbar>
      <view class="contents">
        <view class="cont">
          <List
            url="/shop/stocks/lists"
            ref="listRef"
            :defaultParams="{ keywords: searchValue, ...params }"
            @datas="getList"
          >
            <template #item="{ item }">
              <view class="list_wrapper">
                <view class="cart_cont">
                  <view class="cont_list">
                    <view class="checkout">
                      <up-checkbox-group
                        activeColor="var(--black)"
                        shape="circle"
                        labelSize="14"
                        labelColor="#676969"
                        iconSize="16"
                        :modelValue="ids"
                        @change="checkedChanges(item.id)"
                      >
                        <up-checkbox :name="item.id" />
                      </up-checkbox-group>
                    </view>
                    <view class="list_right" @click="listClick(item)">
                      <view class="img">
                        <up-lazy-load
                          :image="item.pic_url"
                          class="list_icon"
                        ></up-lazy-load>
                      </view>
                      <view class="goods_info">
                        <view class="info_name">{{ item.goodTitle }}</view>
                        <view class="info_desc">{{ item.sku_desc }}</view>
                        <view class="info_price">
                          <view class="unit_price">
                            <text>{{ symbol.symbol }}</text>
                            <rich-text
                              :nodes="Moneyhtml(item?.price)"
                            ></rich-text>
                          </view>
                          <view class="unit_num">x{{ item.total }}</view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </template>
          </List>
        </view>
        <view class="footer" :class="!navShow ? 'footer_bottom' : ''">
          <view class="footer_left">
            <up-checkbox
              :label="t('全部')"
              activeColor="var(--black)"
              shape="circle"
              labelSize="14"
              labelColor="#676969"
              iconSize="16"
              name="agree"
              usedAlone
              v-model:checked="selectAllChecked"
              @change="selectAllChange"
            >
            </up-checkbox>
          </view>
          <view class="footer_right">
            <view
              class="total_btn"
              @click.stop="submit"
              :style="{ opacity: ids.length ? 1 : 0.5 }"
            >
              <trans _t="打包" />
            </view>
          </view>
        </view>
      </view>
    </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 List from "@/components/list";
import { ref, onMounted, nextTick, computed } from "vue";
import { t } from "@/locale";
import { useGlobal, Toast, Moneyhtml } from "@/utils";
import { useSystemStore } from "@/store";
import { onReachBottom } from "@dcloudio/uni-app";
import { onShow } from "@dcloudio/uni-app";

const props = defineProps({
  navShow: Boolean,
});

const useSystem = useSystemStore();
const searchValue = ref("");
const listRef = ref(null);
const allList = ref([]);
const ids = ref([]);
const params = ref({});

const allId = ref([]);

const symbol = computed(() => useSystem.getSymbol);
const selectAllChecked = ref(false);

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

const checkedChanges = (id) => {
  let arr = JSON.parse(JSON.stringify(ids.value));
  let findIndex = ids.value.findIndex((item) => item == id);
  if (findIndex != -1) {
    arr = arr.filter((item) => item != id);
  } else {
    arr.push(id);
  }
  ids.value = arr;
  let flag = allId.value.every((value) => arr.includes(value));
  selectAllChecked.value = flag;
};

const selectAllChange = (e) => {
  ids.value = e ? allId.value : [];
};

const getList = (list) => {
  allList.value = list;
  allId.value = list.reduce((acc, item) => {
    acc.push(item.id);
    return acc;
  }, []);
  let flag = allId.value.every((value) => ids.value.includes(value));
  selectAllChecked.value = list.length === 0 ? false : flag;
};

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

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

const submit = () => {
  if (!ids.value.length) return;
  uni.navigateTo({ url: `/pages/dashboard/pack?ids=${ids.value.join(",")}` });
};
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 {
  height: calc(100vh - 104px);
  background-color: var(--bg);
  .flex();
  flex-direction: column;
  padding-bottom: 104px;

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

    .u-navbar__content__left,
    .u-navbar__content__right {
      position: unset;
    }
  }

  .nav_search {
    flex: 1;

    .icon-search {
      color: var(--text);
      .size(16px);
    }
  }

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

    /deep/ .wrap_list {
      .uni-scroll-view-content {
        > uni-view {
          .u-list-item {
            width: auto !important;
          }
        }
      }
    }

    .cont {
      flex-grow: 1;
      overflow: hidden scroll;
      padding-bottom: 54px;
      background-color: var(--bg);

      // padding: 0 24rpx 24rpx;
      .list_wrapper {
        background-color: var(--light);
        .flex();
        flex-direction: column;
        gap: 24rpx;
        margin-bottom: 24rpx;
        padding: 24rpx;

        .cart_cont {
          .flex();
          flex-direction: column;
          gap: 24rpx;

          .cont_list {
            .flex();
            column-gap: 16rpx;

            .list_right {
              .flex();
              column-gap: 16rpx;
            }

            .img {
              width: 128rpx;
              height: 128rpx;

              .list_icon {
                flex: 0 1 auto;
                max-width: 100%;
                height: 100%;
                border-radius: 16rpx;
              }
            }

            .goods_info {
              .size(24rpx);
              flex: 1;

              .info_name {
                font-weight: 700;
                color: var(--text);
                line-height: 48rpx;
              }

              .info_desc {
                color: var(--text-01);
                font-weight: 400;
                line-height: 40rpx;
                margin-top: 8rpx;
              }

              .info_price {
                .flex_position(space-between);
                margin-top: 16rpx;

                .unit_price {
                  .size(36rpx);
                  color: var(--red);
                  font-weight: 700;
                  line-height: 60rpx;
                  .ver();
                  column-gap: 8rpx;
                }

                .unit_num {
                  background-color: var(--bg);
                  border-radius: 8rpx;
                  color: var(--red);
                  .size(24rpx);
                  line-height: 40rpx;
                  padding: 4rpx 8rpx;
                }
              }
            }
          }
        }
      }
    }

    .footer {
      position: fixed;
      bottom: calc(45px + constant(safe-area-inset-bottom));
      bottom: calc(45px + env(safe-area-inset-bottom));
      left: 0;
      right: 0;
      .flex_position(space-between);
      flex-wrap: wrap;
      height: 54px;
      padding: 0 12px;
      background-color: var(--light);
      box-shadow: 0 -4px 6px #0000000d;
      &.footer_bottom {
        bottom: 0;
      }
      &_left {
      }

      &_right {
        .ver();

        .total_info {
          .total_price {
            text-align: right;
            color: var(--primary);
            .size();
            font-weight: 700;
            line-height: 48rpx;
          }

          .total_desc {
            color: var(--text-01);
            .size(24rpx);
            line-height: 40rpx;
            text-align: right;

            .icon-font {
              .size();
            }
          }
        }

        .total_btn {
          .size(28rpx);
          font-weight: 700;
          height: 38px;
          margin-left: 16rpx;
          min-width: 180rpx;
          background-color: var(--black);
          color: var(--light);
          border-radius: 16rpx;
          padding: 16rpx 30rpx;
          text-align: center;
        }
      }
    }
  }
}
</style>