VAVABUY/pages/shop/components/shopModel.vue

<template>
  <view class="cart_list">
    <template v-if="list.length">
      <view class="list_wrapper" v-for="(item, index) in list" :key="index">
        <view class="cart_wrapper">
          <view class="checkout">
            <up-checkbox-group
              :modelValue="isTrue"
              activeColor="var(--black)"
              shape="circle"
              labelSize="14"
              labelColor="#676969"
              iconSize="16"
              @change="
                checkedChanges(item.seller_id, item.seller_id, true, $event)
              "
            >
              <up-checkbox :name="item.seller_id" />
            </up-checkbox-group>
          </view>
          <view class="img">
            <image
              :src="`../../static/shop/icon_${item.channel}.png`"
              class="cart_icon"
            ></image>
          </view>
          <view class="cart_name">{{ item.seller_name }}</view>
        </view>
        <view class="cart_cont">
          <view class="cont_list" v-for="(val, num) in item.goods" :key="num">
            <view class="checkout">
              <up-checkbox-group
                activeColor="var(--black)"
                shape="circle"
                labelSize="14"
                labelColor="#676969"
                iconSize="16"
                :modelValue="isItemTrue"
                @change="checkedChanges(val.seller_id, val.id, false)"
              >
                <up-checkbox :name="val.id" />
              </up-checkbox-group>
            </view>
            <view class="img">
              <image :src="val.pic_url" class="list_icon"></image>
            </view>
            <view class="goods_info">
              <view class="info_name">{{ val.title }}</view>
              <view class="info_desc">{{ val.sku_desc }}</view>
              <view class="info_price">
                <view class="unit_price">
                  <text>{{ symbol.symbol }}</text>
                  <text>{{ Moneyhtml(val.price) }}</text>
                </view>
                <view class="unit_num">
                  <up-number-box
                    v-model="val.total"
                    :min="0"
                    @change="(newVal) => totalChange(newVal, val)"
                  ></up-number-box>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </template>
    <view class="no_data" v-else>
      <image class="img" mode="widthFix" src="@/static/no_data.png"></image>
      <trans _t="无数据" class="tips" />
    </view>
  </view>
</template>
<script setup>
import { ref, computed } from "vue";
import { useSystemStore, useShopStore } from "@/store";
import { SHOP_EDIT_CART, SHOP_CART_DEL } from "@/api";
import { Moneyhtml, Toast } from "@/utils";
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
  isFree: {
    type: Number,
    default: 0,
  },
});
const emit = defineEmits(["getIds"]);

const ids = ref({});
const useSystem = useSystemStore();
const useShop = useShopStore();
const symbol = computed(() => useSystem.getSymbol);

const allObj = computed(() => {
  let result = props.list.reduce((acc, item) => {
    acc[item.seller_id] = item.goods.map((good) => good.id);
    return acc;
  }, {});
  return result;
});

const isTrue = computed(() => {
  let arr = findDifferentKeys(allObj.value, ids.value);
  return arr;
});
const isItemTrue = computed(() => {
  let arr = Object.values(ids.value);
  let arr1 = Object.values(allObj.value);
  let new_arr = arr.flat(1);
  let new_arr1 = arr1.flat(1);
  let flag = new_arr1.every((value) => new_arr.includes(value));
  emit("getIds", ids.value, flag);
  return new_arr;
});
const findDifferentKeys = (obj1, obj2) => {
  let result = [];
  for (let key in obj2) {
    if (obj1.hasOwnProperty(key)) {
      const isSubset = obj1[key].every((value) => obj2[key].includes(value));
      if (isSubset) {
        result.push(key);
      }
    }
  }
  return result;
};
const checkedChanges = (e, id, flag, e_new) => {
  const results = JSON.parse(JSON.stringify(ids.value));
  let arr = results[e] || [];
  if (flag) {
    results[e] = e_new[0] ? JSON.parse(JSON.stringify(allObj.value))[e] : [];
    ids.value = results;
    return;
  }
  if (!arr) {
    arr = [];
  }
  const effectiveId = flag ? id : id;
  let findIndex = arr.findIndex((item) => item == effectiveId);
  if (findIndex == -1 && !flag) {
    arr.push(effectiveId);
  } else {
    arr = arr.filter((item) => item != effectiveId);
  }
  results[e] = arr;
  ids.value = results;
};

const allStatus = (flag) => {
  let objs = JSON.parse(JSON.stringify(allObj.value));
  ids.value = flag ? objs : {};
};

const totalChange = async (total, item) => {
  try {
    let para = {
      id: item.id,
      total: total.value,
    };
    if (total.value) {
      await SHOP_EDIT_CART(para);
    } else {
      await SHOP_CART_DEL(item.id);
    }
    useShop.setCartList(props.isFree);
  } catch (error) {
    Toast(error.msg);
  }
};
defineExpose({
  allStatus,
});
</script>
<style lang="less" scoped>
@import url("@/style.less");

.cart_list {
  padding-bottom: 60rpx;

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

    .cart_wrapper {
      .ver();

      .cart_icon {
        width: 48rpx;
        height: 48rpx;
        display: block;
        margin-left: 24rpx;
      }

      .cart_name {
        .size(28rpx);
        font-weight: 700;
        color: var(--text);
        margin-left: 24rpx;
      }
    }

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

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

        .checkout {
          flex: 1;
        }

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

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

        .goods_info {
          .size(24rpx);

          .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 {
              display: flex;
              background-color: var(--bg);
              border-radius: 8rpx;
              color: var(--red);
              .size(24rpx);
              line-height: 40rpx;
              padding: 4rpx 8rpx;

              /deep/ .u-number-box {
                border: 1px solid #dcdfe6;
                border-radius: 16rpx;

                .u-number-box__minus,
                .u-number-box__plus {
                  width: 56rpx !important;
                  height: 56rpx !important;
                  background-color: transparent !important;

                  .u-icon__icon {
                    .size(26rpx) !important;
                    color: var(--text) !important;
                  }

                  &--hover {
                    .u-icon__icon {
                      color: var(--primary) !important;
                    }
                  }
                }

                .u-number-box__input {
                  margin: 0;
                  border-left: 1px solid #dcdfe6;
                  border-right: 1px solid #dcdfe6;
                  height: 56rpx !important;
                  width: 60rpx !important;
                  background-color: transparent !important;
                }
              }
            }
          }
        }
      }
    }
  }
  .no_data {
    margin-top: 30%;
    .ver();
    flex-direction: column;
    justify-content: space-between;
    .img {
      width: 348rpx;
    }
    .tips {
      margin-top: 4%;
      text-align: center;
      font-size: 28rpx;
      color: #333;
    }
  }
}
</style>