店铺-购物车

src/pageB/code/index.vue

@@ -1,43 +1,51 @@
 <template>
   <view class="flex items-center justify-center flex-col pt-80rpx">
-     <image class="w-400rpx h-400rpx" :src="image"></image>
+    <image class="w-400rpx h-400rpx" :src="image"></image>
-      <view class="mt-20rpx">请用户通过微信扫码进入小程序生成订单</view>
+    <view class="mt-20rpx">请用户通过微信扫码进入小程序生成订单</view>
-      <view class="grid grid-cols-2 gap-x-80rpx text-36rpx mt-120rpx">
+    <view class="grid grid-cols-2 gap-x-80rpx text-36rpx mt-120rpx">
-        <view @click="toBack">门店管理</view>
+      <view @click="toBack">门店管理</view>
-        <view @click="toSwitchTab">个人中心</view>
+      <view @click="toSwitchTab">个人中心</view>
-      </view> 
+    </view>
   </view>
 </template>
 
 <script>
-  export default {
+export default {
-    data() {
+  data() {
-      return {
+    return {
-        image:''
+      id: '',
-      };
+      image: '',
+    };
+  },
+  onLoad(e) {
+    this.id = e.id;
+    this.getOrder()
+  },
+  methods: {
+    getOrder() {
+      uni.showLoading()
+      this.$api.get(`/v1/order-pre/${this.id}`).then(res => {
+        uni.hideLoading()
+        this.image = res.qrcode
+      })
     },
-    onLoad({image}) {
+    toBack() {
-     this.image=image
+      uni.navigateBack({
+        delta: 4,
+      });
     },
-    methods:{
+    toSwitchTab() {
-      toBack(){
+      uni.switchTab({
-        uni.navigateBack({
+        url: '/pages/me/me',
-          delta:3
+      });
-        })
+    },
-      },
+  },
-      toSwitchTab(){
+};
-        uni.switchTab({
-          url:'/pages/me/me'
-        })
-      }
-    }
-  }
 </script>
 <style>
-  page{
+page {
-    background: #ffffff;
+  background: #ffffff;
-  }
+}
 </style>
 <style lang="scss">
-
 </style>

src/pageB/select_product/cart.vue

@@ -3,7 +3,7 @@
     <cu-navbar class="cu-navbar" :background="{ background: '#f5f5f5' }" :border-bottom="false" :isBack="false" :title="`购物车(${cartList.length})`">
       <view slot="left" class="flex items-center pl-base text-xl font-medium text-txBase font-extrabold">
         <!-- 左边返回箭头 -->
-        <view class="w-20rpx flex items-center mr-10rpx" @tap="back" v-if="isBack">
+        <view class="w-20rpx flex items-center mr-10rpx" @tap="back">
           <image class="w-20rpx" src="/static/images/user/left_arrow.png" mode="widthFix"></image>
         </view>
         <!-- <view>购物车<text class="text-md">({{ cartList.length }})</text></view> -->
@@ -12,11 +12,7 @@
         <u-icon name="chat" size="48"></u-icon>
         <u-badge :is-dot="true" size="16" :offset="[0, 2]" type="warning"></u-badge>
       </view> -->
-      <block v-if="isLogin">
+      <view class="pl-base text-xl font-medium text-txBase" @tap="changeEdit">{{ navBarLeftText }}</view>
-        <view class="pl-base text-xl font-medium text-txBase" @tap="changeEdit">
-          {{ navBarLeftText }}
-        </view>
-      </block>
     </cu-navbar>
     <!-- 已登录 -->
     <block v-if="cartList.length > 0">
@@ -25,6 +21,7 @@
           <cart-goods-item
             :data="item"
             :goods="item.sku"
+            :disabled-input="true"
             :selected="isSelect(item)"
             @select="onSelect"
             @tap="onGoodsClick"
@@ -43,7 +40,7 @@
               <text class="text-lg">全选</text>
             </view>
             <view class="ml-30rpx">
-              <text>共 {{ cartList.length }} 件</text>
+              <text>共 {{ selectedCart.length }} 件</text>
             </view>
           </view>
           <block v-if="isEdit">
@@ -74,12 +71,6 @@
       <view class="flex items-center justify-center flex-col bg-white py-100rpx">
         <image src="/static/images/cart/empty-cart.png" class="w-300rpx h-254rpx" mode="scaleToFill" />
         <view class="text-txGray text-md">购物车是空的</view>
-        <view class="w-full px-150rpx flex items-center mt-50rpx text-txBase text-md mx-100rpx justify-between">
-          <view @tap="jumpIndex" class="w-180rpx h-55rpx border border-txBase leading-55rpx text-center rounded-full"> 去逛逛</view>
-          <view @tap="$u.routeAuth('/pageA/collection/index')" class="w-180rpx h-55rpx border border-txBase leading-55rpx text-center rounded-full"
-            >看看关注</view
-          >
-        </view>
       </view>
     </block>
 
@@ -95,48 +86,41 @@
 </template>
 <script>
 import CartGoodsItem from '@/pages/shop_cart/components/cart-goods-item.vue';
-import { mapActions, mapGetters } from 'vuex';
 import { add, mcl } from '@/utils';
-import CartMixin from '@/pages/shop_cart/mixin';
 export default {
-  mixins: [CartMixin],
   components: {
     CartGoodsItem,
   },
-  props: {
-    isBack: {
-      type: Boolean,
-      default: false,
-    },
-  },
   data() {
     return {
+      mid: '',
       delShow: false,
       isEdit: false,
       calculate: {
         amount: 0,
       },
+
+      cartList: [],
+      selectedCart: []
     };
   },
-  onShow() {
+  onLoad(e) {
-    this.getCartList();
+    this.mid = e.mid
+    this.getCartList()
   },
   computed: {
-    ...mapGetters(['cartList', 'selectedCart']),
     navBarLeftText() {
       return this.isEdit ? '完成' : '管理';
     },
     selectAll: {
       set(val) {
-        this.setSelectedCart(val ? this.cartList.map((e) => e.id) : []);
+        this.selectedCart = val ? this.cartList.map(item => item.id) : []
+        this.getCalculateAmount()
       },
       get() {
-        return this.cartList.length == this.selectedCart.length && this.cartList.length > 0;
+        return this.cartList.length > 0 && this.cartList.length == this.selectedCart.length;
       },
     },
-    selectedCorrect() {
-      return this.selectedCart?.filter((id) => this.cartList.findIndex((e) => e.id == id && e.sku.is_online) >= 0) ?? [];
-    },
 
     height() {
       const { windowHeight, statusBarHeight } = this.$u.sys();
@@ -144,70 +128,74 @@ export default {
     },
   },
   methods: {
-    ...mapActions({
+    getCartList() {
-      getCartList: 'goods/getCartList',
+      uni.showLoading()
-      setSelectedCart: 'goods/setSelectedCart',
+      this.$store.dispatch('storeCart/getCartList', { mid: 1 }).then(res => {
-    }),
+        this.cartList = res
+        uni.hideLoading()
+      })
+    },
     //结算
     onSubmit() {
-      if (this.selectedCorrect.length == 0) return this.$u.toast('请选择需要结算的商品');
+      if (this.selectedCart.length == 0) return this.$u.toast('请选择需要结算的商品');
-      const params = {
+      const cart = this.cartList.filter(item => this.selectedCart.indexOf(item.id) >= 0)
-        cards: this.selectedCorrect,
+      const params = { store_id: this.mid, products: cart.map(item => {
-        type: 'cart',
+        return {
-      };
+          sku_id: item.id,
-      this.$u.route('/pages/confirm_order/confirm_order?data=' + encodeURIComponent(JSON.stringify(params)));
+          quantity: item.quantity,
+          send: item.quantity
+        }
+      })}
+      uni.showLoading()
+      this.$api.post(`/v1/order-pre`, params).then(res => {
+        uni.hideLoading()
+        this.$store.dispatch('storeCart/clear');
+        this.$u.route('/pageB/code/index', { id: res.order_pre })
+      })
     },
-    //数量改变
+    // 数量改变
-    async onNumChange(value, id) {
+    onNumChange(value, id) {
-      await this.$api.put(
+      if (isNaN(value)) return;
-        `/v1/shopping-cart-items/${id}`,
+      this.$store.dispatch('storeCart/update', { id, number: value }).then(res => {
-        {
+        this.cartList = this.cartList.map(item => {
-          quantity: value,
+          if (item.id == id) {
-        },
+            item.quantity = value
-        {
+          }
-          custom: {
+          return item
-            loading: true,
+        })
-          },
+        this.getCalculateAmount()
-        },
+      })
-      );
-      this.getCartList();
     },
-    //移除购物车
+    // 移除购物车
-    async delConfirm() {
+    delConfirm() {
       if (this.selectedCart.length == 0) return this.$u.toast('您还未选择商品哦');
-
+      this.$store.dispatch('storeCart/delete', { id: this.selectedCart }).then(res => {
-      await this.$api.delete(
+        this.delShow = false
-        '/v1/shopping-cart-items',
+        this.cartList = this.cartList.filter(item => this.selectedCart.indexOf(item.id) === -1)
-        { ids: this.selectedCart },
+        this.selectedCart = []
-        {
+      })
-          custom: {
-            loading: true,
-          },
-        },
-      );
-      this.delShow = false;
-      this.getCartList();
     },
-    //编辑
+    // 编辑
     changeEdit() {
       this.isEdit = !this.isEdit;
     },
-    //复选框
+    // 复选框
     onSelect(id, selected) {
       if (selected) {
-        this.setSelectedCart([...this.selectedCart, id]);
+        this.selectedCart.push(id)
       } else {
-        this.setSelectedCart(this.selectedCart.filter((e) => id != e));
+        const index = this.selectedCart.indexOf(id)
+        if (index >= 0) {
+          this.selectedCart.splice(index, 1)
+        }
       }
+      this.getCalculateAmount()
     },
-    //商品点击
+    // 商品点击
     onGoodsClick(e) {
-      if (this.isEdit) return false;
+      return false;
-      this.$u.route('/pages/product_details/index', {
-        skuId: e.id,
-      });
     },
-    //计算价格
+    // 计算价格
     getCalculateAmount() {
       const { is_vip } = this.$store.getters?.user ?? false;
       const amount = this.cartList.reduce((pr, cu) => {
@@ -225,21 +213,7 @@ export default {
         delta: 1,
       });
     },
-    jumpIndex() {
+  }
-      uni.switchTab({
-        url: '/pages/index/index',
-      });
-    },
-  },
-  watch: {
-    selectedCart: {
-      immediate: true,
-      handler(e) {
-        this.getCalculateAmount();
-        // console.log(e);
-      },
-    },
-  },
 };
 </script>
 <style lang="scss" scoped>

src/pageB/select_product/search.vue

@@ -4,7 +4,7 @@
       <view class="w-full">
         <u-search placeholder="搜索商品" @change="Change" @search="Search" v-model="searchText" :show-action="false"></u-search>
       </view>
-      <view slot="right" class="pr-26rpx pl-14rpx flex items-center" @tap="$u.route('/pageB/select_product/cart')">
+      <view slot="right" class="pr-26rpx pl-14rpx flex items-center" @tap="$u.route('/pageB/select_product/cart', { mid })">
         <image class="w-48rpx h-48rpx" src="/static/images/cart/short-cart.png" mode="scaleToFill" />
       </view>
     </u-navbar>
@@ -134,25 +134,26 @@ export default {
     },
     onChangeNumber(e) {
       this.number = e;
-      console.log(e);
     },
-    //购物车点击
+    // 点击购物车图标
     async cartClick(e) {
       this.productId = e.id;
       this.number = 1;
       await this.getProducts();
       this.show = true;
-      console.log(e);
     },
+    // 添加购物车
     onAddCart(e) {
-      console.log('添加到购物车数量：' + this.number);
+      this.$store.dispatch('storeCart/add', { id: e.id, number: this.number }).then(res => {
-      console.log(e);
+        this.$u.toast('添加成功')
+        this.show = false
+      })
     },
     //获取商品详情
     async getProducts() {
       try {
         this.loading = true;
-        const resData = await this.$api.get(`/v1/product/products/${this.productId}`);
+        const resData = await this.$api.get(`/v1/store/${this.mid}/product-spu/${this.productId}`);
         this.products = resData;
         this.skuId = this.products?.sku.id;
         this.sku = this.products?.sku

src/pages/shop_cart/components/cart-goods-item.vue

@@ -34,7 +34,7 @@
           <image class="w-58rpx h-58rpx ml-10rpx" src="/static/svg/svip.svg" mode=""></image>
         </view>
         <view class="text-right" @tap.prevent.stop="() => false">
-          <u-number-box @change="onNumberChange" :min="1" :max="goods.stock" :value="data.quantity" @plus="onPlus" @minus="onMinus">
+          <u-number-box @change="onNumberChange" :disabled-input="disabledInput" :min="1" :max="goods.stock" :value="data.quantity" integer asyncChange>
           </u-number-box>
         </view>
       </view>
@@ -56,6 +56,10 @@
         type: Boolean,
         default: false,
       },
+      disabledInput: {
+        type: Boolean,
+        default: false
+      }
     },
     computed: {
       goods() {
@@ -68,7 +72,7 @@
         this.$emit('select', this.data.id, !this.selected);
       },
       onNumberChange({value}) {
-        // this.$emit('num-change', value, this.data.id);
+        this.$emit('num-change', value, this.data.id);
       },
       onPlus({
         value

src/store/index.js

@@ -5,6 +5,7 @@ import getters from './getters'
 import user from './modules/user'
 import app from './modules/app'
 import goods from './modules/goods'
+import storeCart from './modules/store_cart'
 
 Vue.use(Vuex)
 
@@ -12,7 +13,8 @@ const store = new Vuex.Store({
   modules: {
     user,
     app,
-    goods
+    goods,
+    storeCart
   },
   getters
 })

src/store/modules/store_cart.js

@@ -0,0 +1,130 @@
+import { http } from '@/utils/request'
+
+const CART = 'jiqu_library_store_cart'
+const SELECT_CART = 'jiqu_library_store_cart_selected'
+
+const getDefaultState = () => {
+  return {
+    cartList: [],
+    selectedCart: uni.getStorageSync(SELECT_CART) || []
+  }
+}
+
+const state = getDefaultState()
+
+const mutations = {
+  SET_CARTLIST(state, value) {
+    state.cartList = value
+  },
+  SET_SELECTED_CART(state, value) {
+    state.selectedCart = value
+  }
+}
+
+const actions = {
+  // 添加购物车
+  add({ dispatch,state }, params, custom) {
+    const { id, number } = params;
+    return new Promise((resolve, reject) => {
+      let cart = uni.getStorageSync(CART)
+      if (!cart) {
+        cart = []
+      }
+      let exists = false
+      cart = cart.map(item => {
+        if (item.id == id) {
+          exists = true
+          item.number += number
+        }
+
+        return item
+      })
+      if (!exists) {
+        cart.push({ id, number })
+      }
+      uni.setStorageSync(CART, cart)
+
+      resolve(cart)
+    })
+  },
+  // 更新购物车商品数量
+  update({ dispatch,state }, params) {
+    const { id, number } = params;
+    return new Promise((resolve, reject) => {
+      let cart = uni.getStorageSync(CART)
+      if (!cart) {
+        cart = []
+      }
+      let exists = false
+      cart = cart.map(item => {
+        if (item.id == id) {
+          exists = true
+          item.number = number
+        }
+
+        return item
+      })
+      uni.setStorageSync(CART, cart)
+
+      resolve(cart)
+    })
+  },
+  // 删除购物车商品
+  delete({}, params) {
+    const { id } = params;
+    return new Promise((resolve, reject) => {
+      let cart = uni.getStorageSync(CART)
+      if (!cart) {
+        cart = []
+      }
+      cart = cart.filter(item => id.indexOf(item.id) === -1)
+      uni.setStorageSync(CART, cart)
+
+      resolve(cart)
+    })
+  },
+  // 获取购物车列表
+  getCartList({ commit, rootGetters, state, dispatch }, params) {
+    const { mid } = params
+    return new Promise((resolve, reject) => {
+      const cart = uni.getStorageSync(CART)
+      if (!cart || cart.length == 0) {
+        resolve([])
+      }
+      const ids = cart.map(item => item.id).join(',')
+      const data = []
+      http.get(`/v1/store/${mid}/product-skus`, { params: { id: ids, per_page: -1 } }).then(res => {
+        const data = res.map(item => {
+          let cartItem = ''
+          cart.map(item1 => {
+            if (item1.id == item.id) {
+              cartItem = item1
+            }
+          })
+          item.is_online = true
+          return { id: item.id, quantity: cartItem ? cartItem.number : 1, sku: item }
+        })
+        resolve(data)
+      })
+    })
+  },
+  // 清空购物车
+  clear() {
+    return new Promise((resolve, reject) => {
+      uni.removeStorageSync(CART)
+      resolve()
+    })
+  },
+  setSelectedCart({commit},value){
+    const arr = Array.from(new Set(value))
+    uni.setStorageSync(SELECT_CART, arr)
+    commit('SET_SELECTED_CART',arr)
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}