对接添加购物车

2024-02-29 16:55:18 +08:00 · 2024-02-29 16:55:18 +08:00 · c198f81483
parent 1aa33cab00
commit c198f81483
8 changed files with 299 additions and 110 deletions
--- a/src/api/product.js
+++ b/src/api/product.js
@ -37,4 +37,44 @@ export function queryProductSku(params) {
        url: "product/queryProductSku",
        params
    });
-}
+}
+
+/**
+ * 添加购物车
+ * @param {*} params 
+ * @returns 
+ */
+export function createCart(data) {
+    return request({
+        method: "post",
+        url: "/order/createCart",
+        data
+    });
+}
+
+/**
+ * 获取购物车商品
+ * @param {*} params 
+ * @returns 
+ */
+export function queryCart(params) {
+    return request({
+        method: "get",
+        url: "order/queryCart",
+        params
+    });
+}
+
+/**
+ * 获取取件码
+ * @param {*} params 
+ * @returns 
+ */
+export function createCode(params) {
+    return request({
+        method: "get",
+        url: "/order/createCode",
+        params
+    });
+}
+
--- a/src/components/skuModal.vue
+++ b/src/components/skuModal.vue
@ -24,7 +24,8 @@
                    <el-button plain style="width: 100%;" @click="dialogVisible = false">取消</el-button>
                </div>
                <div class="btn">
-                    <el-button type="primary" style="width: 100%;" :disabled="!goodsInfo.id">确认</el-button>
+                    <el-button type="primary" style="width: 100%;" :disabled="!goodsInfo.id"
+                        @click="submitSku">确认</el-button>
                </div>
            </div>
        </div>
@ -34,10 +35,12 @@
 <script setup>
 import { ref } from 'vue'
 import { useUser } from "@/store/user.js"
-const store = useUser();
-
 import { queryProductSku } from '@/api/product'

+const store = useUser();
+const emit = defineEmits(['success'])
+
+
 const dialogVisible = ref(false)
 const goods = ref({})

@ -48,6 +51,12 @@ const goodsInfo = ref({})

 const loading = ref(false)

+// 确认选择规格
+function submitSku() {
+    dialogVisible.value = false
+    emit('success', goodsInfo.value)
+}
+
 // 选择规格
 function selectedSku(index, i) {
    goods.value.tbProductSpec.specList[index].value.map(item => {
--- a/src/components/takeFoodCode.vue
+++ b/src/components/takeFoodCode.vue
@ -1,7 +1,7 @@
 <!-- 取餐号组件 -->
 <template>
-    <el-dialog title="修改取餐号" width="600" v-model="dialogVisible" @open="opne">
-        <el-input v-model="number" placeholder="请输入取餐号" readonly></el-input>
+    <el-dialog :title="props.title" width="600" v-model="dialogVisible" @open="opne">
+        <el-input v-model="number" :placeholder="props.placeholder" readonly></el-input>
        <div class="keybord_wrap">
            <div v-for="item in 9" :key="item">
                <el-button plain type="info" style="width: 100%;" @click="inputHandle(item)">{{ item }}</el-button>
@ -25,6 +25,17 @@
 <script setup>
 import { ref } from 'vue';

+const props = defineProps({
+    title: {
+        type: String,
+        default: '标题'
+    },
+    placeholder: {
+        type: String,
+        default: '提示'
+    }
+})
+
 const dialogVisible = ref(false)
 const number = ref('')

--- a/src/views/home/components/cartOperation.vue
+++ b/src/views/home/components/cartOperation.vue
@ -0,0 +1,115 @@
+<template>
+    <div class="operation_wrap">
+        <div class="item">
+            <el-icon class="icon">
+                <SemiSelect />
+            </el-icon>
+        </div>
+        <div class="item number" @click="takeFoodCodeRef.show()">
+            <el-text class="num">{{ props.item.number || 1 }}</el-text>
+        </div>
+        <div class="item">
+            <el-icon class="icon add">
+                <CloseBold />
+            </el-icon>
+        </div>
+        <div class="item">
+            <el-icon class="icon">
+                <Filter />
+            </el-icon>
+            <el-text class="t">规格</el-text>
+        </div>
+        <div class="item">
+            <el-icon class="icon">
+                <ShoppingBag />
+            </el-icon>
+            <el-text class="t">赠送</el-text>
+        </div>
+        <div class="item">
+            <el-icon class="icon">
+                <Box />
+            </el-icon>
+            <el-text class="t">打包</el-text>
+        </div>
+        <div class="item">
+            <el-icon class="icon">
+                <Delete />
+            </el-icon>
+            <el-text class="t">删除</el-text>
+        </div>
+        <div class="item">
+            <el-icon class="icon">
+                <Sell />
+            </el-icon>
+            <el-text class="t">挂单</el-text>
+        </div>
+        <div class="item">
+            <el-icon class="icon">
+                <RefreshRight />
+            </el-icon>
+            <el-text class="t">清空</el-text>
+        </div>
+    </div>
+    <takeFoodCode ref="takeFoodCodeRef" title="修改商品数量" placeholder="请输入商品数量" @success="updateNumber" />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import takeFoodCode from '@/components/takeFoodCode.vue'
+const props = defineProps({
+    item: {
+        type: Object,
+        default: {}
+    }
+})
+const emit = defineEmits(['confirm'])
+
+const takeFoodCodeRef = ref(null)
+
+// 修改数量
+function updateNumber(num) {
+    props.item.number = num
+    emit('confirm', props.item)
+}
+</script>
+
+<style scoped lang="scss">
+.operation_wrap {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    .item {
+        width: 100px;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #efefef;
+        border-radius: 6px;
+
+        &.number {
+            background-color: transparent;
+            height: auto;
+        }
+
+        .num {
+            color: #333;
+            font-size: 18px;
+        }
+
+        .icon {
+            color: #333;
+        }
+
+        .add {
+            transform: rotate(-45deg);
+        }
+
+        .t {
+            margin-left: 4px;
+        }
+    }
+}
+</style>
--- a/src/views/home/components/goods.vue
+++ b/src/views/home/components/goods.vue
@ -51,7 +51,7 @@
        <el-empty description="空空如也~" v-if="!goodsList.length" />
    </div>
    <!-- 选择规格 -->
-    <skuModal ref="skuModalRef" />
+    <skuModal ref="skuModalRef" @success="skuConfirm" />
 </template>

 <script setup>
@ -60,9 +60,10 @@ import _ from 'lodash'

 import skuModal from '@/components/skuModal.vue'

-import { queryCategory, productqueryCommodityInfo } from '@/api/product'
+import { queryCategory, productqueryCommodityInfo, queryProductSku } from '@/api/product'
 import { useUser } from "@/store/user.js"
-const store = useUser();
+const store = useUser()
+const emit = defineEmits(['success'])

 const skuModalRef = ref(null)

@ -82,6 +83,11 @@ const inputChange = _.debounce(function () {
    productqueryCommodityInfoAjax()
 }, 500)

+// 确认选择规格回调
+function skuConfirm(params) {
+    emit('success', params)
+}
+
 // 显示全部分类
 function showMoreMenu() {
    showPopover.value = !showPopover.value
@ -90,9 +96,25 @@ function showMoreMenu() {
 // 显示sku
 function showSkuHandle(item) {
    if (item.typeEnum == 'sku') {
+        // 多规格
        skuModalRef.value.show({ ...item })
    } else {
+        // 单规格
+        queryProductSkuAjax(item)
+    }
+}

+// 通过选中的商品规格查询价格
+async function queryProductSkuAjax(goods) {
+    try {
+        const res = await queryProductSku({
+            shopId: store.userInfo.shopId,
+            productId: goods.id,
+            spec_tag: ''
+        })
+        emit('success', res)
+    } catch (error) {
+        console.log(error)
    }
 }

--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@ -9,7 +9,7 @@
          <el-text class="t">(1)</el-text>
        </div>
        <div class="number" @click="takeFoodCodeRef.show()">
-          <el-text class="t">#2</el-text>
+          <el-text class="t">{{ foodCode }}</el-text>
        </div>
        <div class="select_user">
          <el-icon class="icon">
@ -23,10 +23,11 @@
      </div>
      <div class="shop_operation">
        <div class="shop_list">
-          <div class="item" v-for="item in 3" :key="item">
+          <div class="item" :class="{ active: item.active }" v-for="item in cartList" :key="item.id"
+            @click="selectCartItemHandle(item)">
            <div class="name_wrap">
-              <span>鲜肉</span>
-              <span>￥1.00</span>
+              <span>{{ item.name }}</span>
+              <span>￥{{ item.salePrice }}</span>
            </div>
            <div class="sku_list">
              <div class="tag">默认1份</div>
@ -34,61 +35,12 @@
              <div class="tag">半糖</div>
            </div>
            <div class="num">
-              <el-text>X1</el-text>
+              <el-text>X{{ item.number }}</el-text>
            </div>
          </div>
        </div>
-        <div class="operation_wrap">
-          <div class="item">
-            <el-icon class="icon">
-              <SemiSelect />
-            </el-icon>
-          </div>
-          <div class="item number">
-            <el-text class="num">1</el-text>
-          </div>
-          <div class="item">
-            <el-icon class="icon add">
-              <CloseBold />
-            </el-icon>
-          </div>
-          <div class="item">
-            <el-icon class="icon">
-              <Filter />
-            </el-icon>
-            <el-text class="t">规格</el-text>
-          </div>
-          <div class="item">
-            <el-icon class="icon">
-              <ShoppingBag />
-            </el-icon>
-            <el-text class="t">赠送</el-text>
-          </div>
-          <div class="item">
-            <el-icon class="icon">
-              <Box />
-            </el-icon>
-            <el-text class="t">打包</el-text>
-          </div>
-          <div class="item">
-            <el-icon class="icon">
-              <Delete />
-            </el-icon>
-            <el-text class="t">删除</el-text>
-          </div>
-          <div class="item">
-            <el-icon class="icon">
-              <Sell />
-            </el-icon>
-            <el-text class="t">挂单</el-text>
-          </div>
-          <div class="item">
-            <el-icon class="icon">
-              <RefreshRight />
-            </el-icon>
-            <el-text class="t">清空</el-text>
-          </div>
-        </div>
+        <!-- 购物车操作栏 -->
+        <cartOperation :item="selectCartItem" @confirm="addCart" />
      </div>
      <div class="footer">
        <div class="top">
@ -120,33 +72,106 @@
    </div>
    <div class="shop_manage card">
      <!-- 分类/商品列表 -->
-      <goods />
+      <goods @success="addCart" />
    </div>
  </div>
  <!-- 备注 -->
  <remarkModal ref="remarkRef" />
  <!-- 修改取餐号 -->
-  <takeFoodCode ref="takeFoodCodeRef" @success="takeFoodCodeSuccess" />
+  <takeFoodCode ref="takeFoodCodeRef" title="修改取餐号" placeholder="请输入取餐号" @success="takeFoodCodeSuccess" />
 </template>

 <script setup>
-import { ref } from 'vue'
-
+import { onMounted, ref } from 'vue'
+import { useUser } from "@/store/user.js"
 import remarkModal from '@/components/remarkModal.vue'
 import takeFoodCode from '@/components/takeFoodCode.vue'
+import cartOperation from '@/views/home/components/cartOperation.vue'
+
+import { createCart, queryCart, createCode } from '@/api/product'

 // 商品列表
 import goods from '@/views/home/components/goods.vue'

+const store = useUser()
 const remarkRef = ref(null)
 const takeFoodCodeRef = ref(null)

 const allSelected = ref(false)

+const cartList = ref([])
+
+// 取餐码
+const foodCode = ref('#006')
+
 // 确认取餐号
 function takeFoodCodeSuccess(code) {
  console.log('取餐号===', code)
 }
+
+const selectCartItem = ref({})
+// 从购物车选择商品
+function selectCartItemHandle(item) {
+  cartList.value.map(val => {
+    val.active = false
+  })
+  item.active = true
+  selectCartItem.value = item
+}
+
+// 选择完规格开始添加购物车
+async function addCart(params) {
+  try {
+    const res = await createCart({
+      productId: params.productId,
+      maskerId: foodCode.value,
+      shopId: store.userInfo.shopId,
+      skuId: params.id,
+      number: params.number || 1
+    })
+    foodCode.value = res
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 获取购物车商品
+async function queryCartAjax() {
+  try {
+    const res = await queryCart({
+      masterId: foodCode.value,
+      shopId: store.userInfo.shopId
+    })
+    cartList.value = res.list.map((item, index) => {
+      if (index == 0) {
+        item.active = true
+        selectCartItem.value = item
+      } else {
+        item.active = false
+      }
+      return item
+    })
+    console.log(cartList.value)
+  } catch (error) {
+    console.log('获取购物车商品', error)
+  }
+}
+
+// 获取取件码
+async function createCodeAjax() {
+  try {
+    const res = await createCode({ shopId: store.userInfo.shopId })
+    foodCode.value = res
+    queryCartAjax()
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+onMounted(() => {
+  // createCodeAjax()
+  queryCartAjax()
+})
 </script>

 <style scoped lang="scss">
@ -233,6 +258,10 @@ function takeFoodCodeSuccess(code) {
      .item {
        padding: 20px;

+        &.active {
+          background-color: #f5f5f5;
+        }
+
        &:not(:last-child) {
          border-bottom: 1px solid #ececec;
        }
@ -262,45 +291,6 @@ function takeFoodCodeSuccess(code) {
        }
      }
    }
-
-    .operation_wrap {
-      padding: 20px;
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
-
-      .item {
-        width: 100px;
-        height: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: #efefef;
-        border-radius: 6px;
-
-        &.number {
-          background-color: transparent;
-          height: auto;
-        }
-
-        .num {
-          color: #333;
-          font-size: 18px;
-        }
-
-        .icon {
-          color: #333;
-        }
-
-        .add {
-          transform: rotate(-45deg);
-        }
-
-        .t {
-          margin-left: 4px;
-        }
-      }
-    }
  }
 }

--- a/src/views/login.vue
+++ b/src/views/login.vue
@ -32,7 +32,8 @@
        </el-form-item>
        <el-form-item>
          <el-button type="primary" style="width: 100%" :loading="loading" @click="submitHandle">
-            登录
+            <span v-if="!loading">登录</span>
+            <span v-else>登录中...</span>
          </el-button>
        </el-form-item>
        <el-form-item>
--- a/vite.config.js
+++ b/vite.config.js
@ -9,7 +9,8 @@ export default defineConfig({
  server: {
    proxy: {
      '/api': {
-        target: 'https://cashierclient.sxczgkj.cn/cashier-client',
+        // target: 'https://cashierclient.sxczgkj.cn/cashier-client', // 测试
+        target: 'http://192.168.2.87:10587/cashier-client', // 国成
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }