购物车逻辑

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) => {
-  // props.bean.stocks.map((res: { colorName: string }) => res.colorName).forEach((colorName: string) => {
+    if(!skuColorList.value.includes(colorName)) {
-  //   if(skuColorList.value.includes(colorName)) {
+      skuColorList.value.push(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;
     }
-    a.push(b);
+  });
-    return a;
+
-  }, []).map((res: { colorName: any; }) =>
+  popupRef.value.open();
-    ({
-      colorName: res.colorName
-    }));
 };
 
+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();
 };
 

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>
 

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({
+  shoppingCart.save(
-    title: '加入购物车成功',
+    {
-    icon: 'none'
+      ...goodsBean.value,
-  });
+      ...skuBean.value
+    }
+  );
+  showToast('加入购物车成功');
 };
 
 const placeOrder = () => {

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>{{item.name}}</text>
-              </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;

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>

src/pages/qrcode/index.vue

@@ -33,8 +33,8 @@
           <text>卡信息</text>
         </view>
 
-        <text>店铺名称（武汉xx店）</text>
+        <text>店铺名称（{{userInfo.creatorName}}）</text>
-        <text>253654587852</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;

src/store/modules/shoppingcart/index.ts

@@ -1,20 +1,43 @@
 import { defineStore } from 'pinia';
 
 const useShoppingCartStore = defineStore('shoppingCart', {
-  state: () => ({
+  state: (): { shoppingCartList: any[] } => ({
-    list: [],
+    shoppingCartList: []
-    total: 0,
-    count: 0
   }),
+
+  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() {
+    getShoppingCartList(): any[] {
-      return this.list;
+      return this.shoppingCartList;
     },
-    getTotal() {
+
-      return this.total;
+    getTotalCount(): number {
+      return this.shoppingCartList.length;
+    }
   },
-    getCount() {
+  actions: {
-      return this.count;
+    save(partial: Partial<any>) {
+      this.shoppingCartList.push(partial);
+    },
+
+    clear() {
+      this.shoppingCartList = [];
     }
   }
 });
+
+export default useShoppingCartStore;

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: {

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;