购物车逻辑

2024-03-20 22:20:24 +08:00
parent 8d7f82b07c
commit 792aa4268a
9 changed files with 118 additions and 63 deletions
--- a/src/components/sku-dialog.vue
+++ b/src/components/sku-dialog.vue
@@ -4,7 +4,7 @@
      <view class='c-flex-row' style='align-items: flex-start'>
        <image class='goods-image' :src='bean?.images' />
        <view class='c-flex-column' style='flex: 1'>
-          <text class='goods-name'>{{ bean.name }}…</text>
+          <text class='goods-name'>{{ bean?.name }}</text>
          <text class='goods-price'>{{ bean?.price }}</text>
        </view>
        <image class='close-image' :src='assetsUrl("ic_close.png")' @click.stop='close' />
@@ -12,7 +12,7 @@
      <view class='sku-view c-flex-column'>
        <view class='sku-title'>颜色</view>
        <view class='sku-color-list c-flex-row'>
-          <view class='sku-item' :class='{"sku-item-active":currentColorIndex==index,"sku-item-disabled":index==3}'
+          <view class='sku-item' :class='{"sku-item-active":currentColorIndex==index}'
                v-for='(item, index) in skuColorList' :key='index'
                @click='colorChange(index)'>
            <text>{{ item }}</text>
@@ -21,16 +21,16 @@

        <view class='sku-title' style='margin-top: 43rpx'>尺码</view>
        <view class='sku-color-list c-flex-row'>
-          <view class='sku-item' :class='{"sku-item-active":currentSizeIndex==index,"sku-item-disabled":index==3}'
+          <view class='sku-item'
+                :class='{"sku-item-active":currentSizeIndex==index,"sku-item-disabled":item.existingNumber<=0}'
                v-for='(item, index) in skuSizeList' :key='index'
                @click='sizeChange(index)'>
-            <text>{{ item }}</text>
+            <text>{{ item.sizeName }}</text>
          </view>
        </view>

        <view class='c-flex-row' style='margin-top: 52rpx'>
          <text class='sku-title'>购买数量</text>
-
          <view class='count-change-view c-flex-row'>
            <view class='count-image' @click.stop='countChange(false)'>
              <image :src='assetsUrl("ic_reduce.png")' />
@@ -48,40 +48,37 @@
 </template>

 <script lang='ts' setup>
-import { Proptype, ref } from 'vue';
+import { ref } from 'vue';
 import { assetsUrl } from '@/utils/assets';
 import { GoodsBean } from '@/api/goods/types';

 const props = defineProps({
  bean: Object as Proptype<GoodsBean>
 });
+const emits = defineEmits(['confirm']);
 const popupRef = ref();
 const skuColorList = ref<string[]>([]);
 const currentColorIndex = ref(0);
-const skuSizeList = ref(['120cm', '130cm', '140cm', '150cm', '160cm', '170cm']);
 const currentSizeIndex = ref(0);
 const goodsCount = ref(1);

 const show = () => {
-  popupRef.value.open();
-  // props.bean.stocks.map((res: { colorName: string }) => res.colorName).forEach((colorName: string) => {
-  //   if(skuColorList.value.includes(colorName)) {
-  //     skuColorList.value.push(colorName);
-  //   }
-  // });
-
-  props.bean.stocks?.reduce((a: any[], b: { colorId: string, colorName: any; }) => {
-    if(a.find(e => e.colorId === b.colorId)) {
-      return a;
+  props.bean?.stocks?.map((res: { colorName: string }) => res.colorName).forEach((colorName: string) => {
+    if(!skuColorList.value.includes(colorName)) {
+      skuColorList.value.push(colorName);
    }
-    a.push(b);
-    return a;
-  }, []).map((res: { colorName: any; }) =>
-    ({
-      colorName: res.colorName
-    }));
+  });
+
+  popupRef.value.open();
 };

+const skuSizeList = computed(() => {
+  const currentColorName = skuColorList.value[currentColorIndex.value];
+  return props.bean?.stocks?.filter((res: { colorName: string }) => {
+    return res.colorName === currentColorName;
+  });
+});
+
 const close = () => {
  popupRef.value.close();
 };
@@ -98,13 +95,17 @@ const countChange = (isPlus: boolean) => {
  if(isPlus) {
    goodsCount.value++;
  } else {
-    if(goodsCount.value > 0) {
+    if(goodsCount.value > 1) {
      goodsCount.value--;
    }
  }
 };

 const confirm = () => {
+  emits('confirm', {
+    ...skuSizeList.value[currentSizeIndex.value],
+    goodsCount: goodsCount.value
+  });
  popupRef.value.close();
 };

--- a/src/pages/mall/index.vue
+++ b/src/pages/mall/index.vue
@@ -23,7 +23,7 @@
            <image class='goods-image' :src='item.images' />
            <text class='goods-name'>{{ item.goodsName }}</text>
            <text class='goods-price'>¥{{ item.price }}</text>
-            <image class='add-image' :src='assetsUrl("ic_add_goods.png")' @click.stop='addShoppingCart' />
+            <image class='add-image' :src='assetsUrl("ic_add_goods.png")' @click.stop='addShoppingCart(item)' />
          </view>
        </grid-view>
      </scroll-view>
@@ -31,7 +31,7 @@

    <view class='shopping-cart' @click.stop='goPath("/pages/mall/subs/shoppingcart/index")'>
      <image :src='assetsUrl("ic_shopping_cart.png")' />
-      <text v-if='shoppingCartCount>0'>{{ shoppingCartCount }}</text>
+      <text v-if='shoppingCartList.length>0'>{{ shoppingCartList.length }}</text>
    </view>
  </view>
 </template>
@@ -41,11 +41,14 @@ import { assetsUrl } from '@/utils/assets';
 import { goPath } from '@/utils';
 import { getCategoryList, getGoodsList } from '@/api/goods';
 import { CategoryBean, GoodsBean } from '@/api/goods/types';
+import useShoppingCartStore from '@/store/modules/shoppingcart';
+
+const shoppingCart = useShoppingCartStore();
+const { shoppingCartList } = storeToRefs(shoppingCart);

 const categoryList = ref<CategoryBean[]>([]);
 const categorySelectedIndex = ref<number>(0);
 const goodsList = ref<GoodsBean[]>([]);
-const shoppingCartCount = ref<number>(0);

 onLoad(() => {
  fetchCategoryList();
@@ -73,8 +76,10 @@ const fetchGoodsList = async () => {
  goodsList.value = data.rows;
 };

-const addShoppingCart = () => {
-
+const addShoppingCart = (goodsBean: GoodsBean) => {
+  shoppingCart.save({
+    ...goodsBean
+  });
 };
 </script>

--- a/src/pages/mall/subs/goods/detail.vue
+++ b/src/pages/mall/subs/goods/detail.vue
@@ -12,7 +12,7 @@
      </view>
    </view>

-    <view class='goods-info-view c-flex-column'>
+    <view class='goods-info-view c-flex-column' style='margin-right: 10rpx'>
      <view class='c-flex-row'>
        <text class='goods-price accent-text-color'>{{ goodsBean?.price || 0 }}</text>
        <text>销量2653</text>
@@ -78,7 +78,7 @@
        <view class='small-button-item'>
          <view class='shoppingcart-count' @click.stop='goPath("/pages/mall/subs/shoppingcart/index")'>
            <image :src='assetsUrl("ic_goods_shoppingcart.png")' />
-            <text>0</text>
+            <text v-if='shoppingCartList.length>0'>{{ shoppingCartList.length }}</text>
          </view>
          <text>购物车</text>
        </view>
@@ -90,20 +90,25 @@
      </view>
    </view>
  </view>
-  <sku-dialog ref='skuDialogRef' @bean='goodsBean' />
+  <sku-dialog ref='skuDialogRef' :bean='goodsBean' @confirm='confirmGoodsSku' />
 </template>

 <script lang='ts' setup>
 import { assetsUrl } from '@/utils/assets';
 import SkuDialog from '@/components/sku-dialog.vue';
-import { goPath } from '@/utils';
+import { goPath, showToast } from '@/utils';
 import { getGoodsDetail, getGoodsList } from '@/api/goods';
 import { GoodsBean } from '@/api/goods/types';
+import useShoppingCartStore from '@/store/modules/shoppingcart';
+
+const shoppingCart = useShoppingCartStore();
+const { shoppingCartList } = storeToRefs(shoppingCart);

 const goodsBean = ref<GoodsBean>();
 const recommendList = ref<GoodsBean[]>();

 const skuDialogRef = ref();
+const skuBean = ref();

 const bannerList = ref([]);
 const swiperIndex = ref(0);
@@ -115,7 +120,7 @@ onLoad(async (e: any) => {
    pageSize: 10,
    bean: {
      keyword: '',
-      typeIds: ['519334122586648576']
+      typeIds: ['1724629185362591745']
    }
  });
  recommendList.value = rows;
@@ -133,11 +138,18 @@ const showSkuDialog = () => {
  skuDialogRef.value.show();
 };

+const confirmGoodsSku = (e: any) => {
+  skuBean.value = e;
+};
+
 const addShoppingCart = () => {
-  uni.showToast({
-    title: '加入购物车成功',
-    icon: 'none'
-  });
+  shoppingCart.save(
+    {
+      ...goodsBean.value,
+      ...skuBean.value
+    }
+  );
+  showToast('加入购物车成功');
 };

 const placeOrder = () => {
--- a/src/pages/mall/subs/shoppingcart/index.vue
+++ b/src/pages/mall/subs/shoppingcart/index.vue
@@ -6,23 +6,22 @@

    <view class='card-view'>
      <scroll-view>
-        <view class='c-flex-column' v-for='(item, index) in [1,2,3,5]' :key='index'>
+        <view class='c-flex-column' v-for='(item, index) in shoppingCartList' :key='index'>
          <view class='c-flex-row'>
            <image v-show='isEditMode' class='checkbox' :src='assetsUrl("ic_checkbox_active_red.png")' />
-            <image class='goods-image' :src='assetsUrl("test_bg.png")' />
+            <image class='goods-image' :src='item.images' />
            <view class='c-flex-column'>
-              <text>女童夏装套装洋气装短袖阔腿裤子夏装夏装套装
-              </text>
+              <text>{{item.name}}</text>
              <view class='sku-view'>
                <text>紫色，120cm x1</text>
                <image :src='assetsUrl("ic_arrow_down_gray.png")' />
              </view>
-              <text>￥29.90</text>
+              <text>￥{{item.price}}</text>
              <view class='count-change-view c-flex-row'>
                <view class='count-image' @click.stop='countChange(false)'>
                  <image :src='assetsUrl("ic_reduce.png")' />
                </view>
-                <text>{{ goodsCount }}</text>
+                <text>{{ item.count || 0 }}</text>
                <view class='count-image' @click.stop='countChange(true)'>
                  <image :src='assetsUrl("ic_plus.png")' />
                </view>
@@ -50,10 +49,15 @@
 <script lang='ts' setup>

 import { assetsUrl } from '@/utils/assets';
+import useShoppingCartStore from '@/store/modules/shoppingcart';

 const isEditMode = ref(false);
 const checkedAll = ref(false);
-const goodsCount = ref(1);
+
+const shoppingCart = useShoppingCartStore();
+const { shoppingCartList } = storeToRefs(shoppingCart);
+
+// const goodsCount = ref(1);

 const countChange = (isPlus: Boolean) => {

@@ -83,7 +87,7 @@ const settlement = () => {
    margin: 30rpx;
    border-radius: 10rpx;
    background: #FFFFFF;
-    padding: 10rpx 20rpx 20rpx 17rpx;
+    padding: 10rpx 20rpx 120rpx 17rpx;

    .c-flex-column:nth-of-type(1) {
      margin: 20rpx 0;
--- a/src/pages/mine/index.vue
+++ b/src/pages/mine/index.vue
@@ -13,7 +13,7 @@
          <text>{{ userInfo.telephone }}</text>
        </view>

-        <image :src='assetsUrl("ic_qrcode_white.png")' />
+        <image :src='assetsUrl("ic_qrcode_white.png")' @click.stop='gotoPath("qrcode")' />
      </view>

      <view class='bottom-row'>
@@ -130,6 +130,10 @@ const { userInfo } = storeToRefs(store);
 const gotoPath = (path: string) => {
  if(path === 'follow_official_account') {
    showOfficialAccountDialog();
+  } else if(path === 'qrcode') {
+    uni.switchTab({
+      url: '/pages/qrcode/index'
+    });
  } else {
    goPath(path);
  }
@@ -138,7 +142,6 @@ const gotoPath = (path: string) => {
 const showOfficialAccountDialog = () => {
  officialAccountDialogRef.value.show();
 };
-
 </script>

 <style lang='scss' scoped>
--- a/src/pages/qrcode/index.vue
+++ b/src/pages/qrcode/index.vue
@@ -33,8 +33,8 @@
          <text>卡信息</text>
        </view>

-        <text>店铺名称（武汉xx店）</text>
-        <text>253654587852</text>
+        <text>店铺名称（{{userInfo.creatorName}}）</text>
+        <text>{{ userInfo.storeId }}</text>
      </view>

    </view>
@@ -48,6 +48,7 @@ import { generateBarCode, generateQrCode } from '@/api/common';
 import { getDynamicCode } from '@/api/user';
 import { useUserStore } from '@/store';
 import { goPath } from '@/utils';
+import { use } from 'licia';

 const store = useUserStore();
 const { userInfo } = storeToRefs(store);
@@ -58,6 +59,7 @@ const codeRefreshInterval = ref(30);

 onLoad(() => {
  generateCode();
+  console.log('------->>>',userInfo.value)

  setInterval(() => {
    codeRefreshInterval.value -= 1;
--- a/src/store/modules/shoppingcart/index.ts
+++ b/src/store/modules/shoppingcart/index.ts
@@ -1,20 +1,43 @@
 import { defineStore } from 'pinia';

 const useShoppingCartStore = defineStore('shoppingCart', {
-  state: () => ({
-    list: [],
-    total: 0,
-    count: 0
+  state: (): { shoppingCartList: any[] } => ({
+    shoppingCartList: []
  }),
+
+  persist: {
+    // 修改存储中使用的键名称，默认为当前 Store的 id
+    key: 'shoppingCartState',
+    storage: {
+      setItem(key, value) {
+        uni.setStorageSync(key, value); // [!code warning]
+      },
+      getItem(key) {
+        return uni.getStorageSync(key); // [!code warning]
+      }
+    },
+    // 部分持久化状态的点符号路径数组，[]意味着没有状态被持久化(默认为undefined，持久化整个状态)
+    paths: undefined
+  },
+
  getters: {
-    getList() {
-      return this.list;
+    getShoppingCartList(): any[] {
+      return this.shoppingCartList;
    },
-    getTotal() {
-      return this.total;
+
+    getTotalCount(): number {
+      return this.shoppingCartList.length;
+    }
+  },
+  actions: {
+    save(partial: Partial<any>) {
+      this.shoppingCartList.push(partial);
    },
-    getCount() {
-      return this.count;
+
+    clear() {
+      this.shoppingCartList = [];
    }
  }
 });
+
+export default useShoppingCartStore;
--- a/src/store/modules/user/index.ts
+++ b/src/store/modules/user/index.ts
@@ -15,11 +15,16 @@ const useUserStore = defineStore('user', {
    image: '',
    telephone: '',
    gender: 0,
+    birthday: '',
+    address: '',
    balance: 0,
    integration: 0,
-    birthday: '',
    creatorId: '',
-    companyId: ''
+    companyId: '',
+    levelName: '',
+    orderNum: 0,
+    storeId: '',
+    creatorName: ''
  }),

  persist: {
--- a/src/store/modules/user/types.ts
+++ b/src/store/modules/user/types.ts
@@ -24,7 +24,7 @@ export interface UserState {
  image: string;
  integration: number;
  lastConsumTime: string;
-  levelEntity: string;
+  levelEntity: any;
  levelId: string;
  levelName: string;
  maOpenId: string;