jdt-user/src/pages/admin/add_order/add_menu/index.vue

<template>
  <view>
    <!-- 商品列表 -->
    <view class="good-class" v-if="class_list.length > 0">
      <nut-tabs
        v-model="value"
        title-scroll
        size="large"
        direction="vertical"
        title-gutter="5"
        animated-time="0"
        name="tabName">
        <nut-tab-pane
          v-for="(itm, index) in good_list"
          :key="index"
          :title="itm.name"
          :pane-key="index">
          <view v-if="itm.Goods.length > 0">
            <view class="list" v-for="(item, index) in itm.Goods" :key="index">
              <view class="item" @click.stop="toGoodDetails(item.gid, 1)">
                <image :src="item.cover" lazy-load />
                <view class="right">
                  <view class="name">{{ item.name }}</view>
                  <view class="stock">剩余:{{ item.stock }}</view>
                  <view class="bom">
                    <view>
                      <view class="price">
                        <text style="font-size: 15px">{{ item.number }}元</text>
                      </view>
                      <!-- <view class="price">
                        <text style="font-size: 15px"
                          >{{ item.exchange }}积分</text
                        >
                      </view> -->
                    </view>
                    <nut-button
                      size="mini"
                      type="primary"
                      @click.stop="add_cart(item)">
                      <template #icon>
                        <Cart2 />
                      </template>
                    </nut-button>
                  </view>
                </view>
              </view>
            </view>
          </view>
          <nut-empty v-else description="该分类暂无商品"></nut-empty>
          <view style="height: 180rpx"></view>
        </nut-tab-pane>
      </nut-tabs>
    </view>
    <nut-empty v-else description="该商家暂无商品"></nut-empty>
    <!--  购物车  -->
    <cart
      ref="cartRef"
      :mer-info="mer_info"
      @update-cart="updateCartNum"
      :IsPendingOrder="true" />
  </view>
</template>

<script setup lang="ts">
import {Ref, ref} from 'vue';
import Taro from '@tarojs/taro';
import Cart from '../../../../components/Cart.vue';
import {Cart2} from '@nutui/icons-vue-taro';
import {getGoodList, getMerCategory} from '../../../../api/goods';

interface goodList {
  ID: number;
  name: string;
  bid: string;
  Goods: GoodsType[];
}

interface GoodsType {
  gid: string;
  cover: string;
  name: string;
  number: number;
  stock: number;
  cartNum: number;
  exchange: number;
}

interface CartItems {
  bid: string;
  gid: string;
  number: number;
  price: number;
  cover: string;
  name: string;
  exchange: number;
}

const value = ref('0');
const good_list = ref<goodList[]>([]);
const class_list = ref<
  Array<{
    ID?: number;
    name?: string;
  }>
>([]);

Taro.useLoad(async e => {
  mer_info.value = e;
  await get_class_list(e.bid);
  await cartRef.value.get_cart_list();
});

const get_class_list = async (bid: string) => {
  const res = await getMerCategory({
    Bid: bid,
  });
  class_list.value = res.data.data || [];
  await get_good_list(class_list.value[0].ID as number, bid);
};

const get_good_list = async (id: number, bid: string) => {
  Taro.showLoading({
    title: '加载中',
    mask: true,
  });
  const res = await getGoodList({
    bid: bid,
    goods_class_id: id,
    status: 1,
    state: 1,
  });
  good_list.value = res.data.data || [];
  Taro.hideLoading();
};

const toGoodDetails = (id: string, type: number) => {
  Taro.navigateTo({
    url: `/pages/goods/goods_detail/index?gid=${id}&type=${type}`,
  });
};

const cartRef = ref(null) as Ref;

const mer_info = ref<any>({});

const add_cart = (item: GoodsType) => {
  const num = item.cartNum ? Number(item.cartNum) + 1 : 1;
  cartRef.value.add_cart(item, num);
};

const updateCartNum = (cartItems: CartItems[]) => {
  if (cartItems.length > 0) {
    good_list.value.forEach((category: goodList) => {
      category.Goods.forEach((good: GoodsType) => {
        cartItems.forEach((cartItem: CartItems) => {
          if (good.gid === cartItem.gid) {
            good.cartNum = cartItem.number;
          }
        });
      });
    });
  } else {
    good_list.value.forEach((category: goodList) => {
      category.Goods.forEach((good: GoodsType) => {
        Reflect.deleteProperty(good, 'cartNum');
      });
    });
  }
};
</script>

<style lang="scss">
@import './index.scss';
</style>