1

src/views/home/index.vue

@@ -8,8 +8,8 @@
           </el-icon>
           <el-text class="t">(1)</el-text>
         </div>
-        <div class="number">
-          <el-text class="t">#2</el-text>
+        <div class="number" @click="takeFoodCodeRef.show()">
+          <el-text class="t">{{ foodCode }}</el-text>
         </div>
         <div class="select_user" @click="membershow = true">
           <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,7 +72,7 @@
     </div>
     <div class="shop_manage card">
       <!-- 分类/商品列表 -->
-      <goods />
+      <goods @success="addCart" />
     </div>
   </div>
   <!-- 备注 -->
@@ -130,20 +82,101 @@
   <el-drawer v-model="membershow" :with-header="true" size="90%" title="选择会员" >
     <member></member>
   </el-drawer>
+  <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'
 import member from '@/views/home/components/member.vue'
 const membershow = ref(false)
+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">
@@ -230,6 +263,10 @@ const allSelected = ref(false)
       .item {
         padding: 20px;
 
+        &.active {
+          background-color: #f5f5f5;
+        }
+
         &:not(:last-child) {
           border-bottom: 1px solid #ececec;
         }
@@ -259,45 +296,6 @@ const allSelected = ref(false)
         }
       }
     }
-
-    .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;
-        }
-      }
-    }
   }
 }