1

src/api/store.js

@@ -4,5 +4,26 @@ import request from '@/utils/axios.js'
   * @description 商品列表
   */
 export function storeListApi(id, data) {
-    return request.get(`server/${30}/product/lst`, { params: data })
+    return request.get(`server/${id}/product/lst`, { params: data })
 }
+
+/**
+  * @description 加入购物车
+  */
+export function cartCreateApi(data) {
+  return request.post(`user/cart/create`, data)
+}
+
+/**
+  * @description 购物车
+  */
+export function cartListApi(data) {
+  return request.get(`user/cart/lst`, { params: data })
+}
+
+// /**
+//   * @description 购物车数量
+//   */
+// export function cartListApi(id, data) {
+//   return request.get(`count`, { params: data })
+// }

src/views/home/component/order.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue';
+import { cartListApi } from "@/api/store.js";
 
 const list = ref([])
 
@@ -12,11 +13,19 @@ const deleteOne = (index)=>{
 }
 
 const getList = (item)=>{
-    list.value.push({
-        num: 1
+    cartListApi({
+        source: 300
+    }).then(res=>{
+        list.value = res.data.list
     })
 }
 
+const emit = defineEmits(['goPay'])
+
+const goPay = ()=>{
+    emit('goPay')
+}
+
 defineExpose({
     getList
 })
@@ -56,7 +65,7 @@ defineExpose({
                 <div class="update-price"><el-button class="btn" type="primary">改价</el-button></div>
             </div>
             <div class="order-btn">
-                <el-button class="btn" type="primary">立即结账</el-button>
+                <el-button class="btn" type="primary" @click="goPay">立即结账</el-button>
             </div>
         </div>
     </div>

src/views/home/component/pay.vue

@@ -0,0 +1,112 @@
+<template>
+  <el-drawer :size="800" v-model="drawer" direction="rtl" @open="open">
+    <template #header>
+      <h4>选择支付方式</h4>
+    </template>
+    <template #default>
+      <div class="dra-body">
+        <div class="header">
+            <div class="left" :class="{'active': active==1}" @click="active=1">微信</div>
+            <div class="right" :class="{'active': active==2}" @click="active=2">现金收款</div>
+        </div>
+        <div style="color: #999;padding: 2rem 0 0.3rem 0;">应收金额(元): </div>
+        <div style="color: #f5222d;padding-bottom: 2rem;">¥<span style="font-size: 1.6rem;">{{ '0.00' }}</span></div>
+        <div class="card1" v-if="active==1">
+            <el-input ref="codeRef" v-model="input" autofocus class="code-input" placeholder="请点击输入框聚焦扫码或输入编码号" />
+            <div class="tips"></div>
+        </div>
+        <div class="card2" v-else>
+            <el-input ref="codeRef" v-model="input" autofocus class="code-input" placeholder="请点击输入框输入金额" />
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <div style="width: 100%;display: flex;justify-content: center;">
+        <el-button class="cancel-btn" @click="cancelClick">取消收款</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+
+<script setup>
+import { ref, watch, nextTick } from "vue";
+
+const drawer = ref(false);
+const active = ref(1);
+const input = ref("");
+const codeRef = ref("");
+
+const cancelClick = () => {
+  drawer.value = false;
+};
+
+const open = ()=>{
+    nextTick(()=>{
+        setTimeout(()=>{
+            codeRef.value.focus();
+        },300)
+    })
+}
+
+defineExpose({
+  drawer,
+});
+</script>
+
+<style lang="scss" scoped>
+.dra-body {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+    text-align: center;
+  .header{
+    width: 25rem;
+    display: flex;
+    &>div{
+        flex: 1;
+        border: 1px solid #ccc;
+        text-align: center; 
+        padding: 0.6rem 0;
+        cursor: pointer;
+    }
+    .left{
+        border-right: none;
+        border-radius: 5rem 0 0 5rem;
+    }
+    .right{
+        border-left: none;
+        border-radius: 0 5rem 5rem 0;
+    }
+    .active{
+        background-color: #1890ff;
+        color: #fff;
+        transition: 300ms;
+        border-color: #1890ff;
+    }
+  }
+  .card1{
+    .code-input{
+        width: 100%;
+        height: 3rem;
+    }
+    .tips {
+        width: 38rem;
+        height: 16rem;
+        background: url("https://multi-store.crmeb.net/view_cashier/img/alipay.d0e0aa1f.png");
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+    }
+  }
+  
+}
+
+.cancel-btn{
+    width: 60%;
+    border-color: #1890ff;
+    color: #1890ff;
+    border-radius: 5rem;
+    height: 3rem;
+    font-size: 1.2rem;
+}
+</style>

src/views/home/component/pupop.vue

@@ -8,6 +8,13 @@ const show = (e)=>{
     dialogVisible.value = e;
 }
 
+const emit = defineEmits(['changeItem'])
+
+const changeItem = ()=>{
+    emit('changeItem', item, change);
+    dialogVisible = false
+}
+
 defineExpose({
     show
 })
@@ -45,7 +52,7 @@ defineExpose({
     </div>
     <template #footer>
       <div class="dialog-footer">
-        <el-button class="ok-btn" type="primary" @click="dialogVisible = false">
+        <el-button class="ok-btn" type="primary" @click="changeItem">
           确定
         </el-button>
       </div>

src/views/home/component/shop.vue

@@ -11,13 +11,6 @@ const props = defineProps({
 const emit = defineEmits(['getStoreList'])
 
 const bar_code = ref('');
-watch(bar_code, (val, old) => {
-  console.log(val,old);
-  if(val.length - old.length>5) console.log('扫码枪输入');
-  // emit('getStoreList', {
-  //   bar_code: val
-  // })
-})
 
 const loadMore = () => {
   console.log("loadMore");
@@ -27,6 +20,12 @@ const changeItem = (item)=>{
   emit('changeItem', item)
 }
 
+const handleEnter = () => {
+  emit('getStoreList', {
+    bar_code: bar_code.value
+  })
+}
+
 </script>
 
 <template>
@@ -38,9 +37,10 @@ const changeItem = (item)=>{
           v-model="bar_code"
           placeholder="搜索商品名称/ID/唯一码或点击聚焦扫码"
           clearable
+          @keyup.enter="handleEnter"
         />
       </div>
-      <div class="nav-item-btn">
+      <div class="nav-item-btn" @click="handleEnter">
         <el-button class="btn" type="primary"
           ><el-icon><Search /></el-icon
         ></el-button>

src/views/home/index.vue

@@ -1,76 +1,116 @@
 <script setup>
-import order from './component/order.vue';
-import shop from './component/shop.vue';
-import padding from './component/padding.vue';
-import pupop from './component/pupop.vue';
-import { ref, nextTick } from 'vue';
-import { storeListApi } from "@/api/store.js";
+import order from "./component/order.vue";
+import shop from "./component/shop.vue";
+import padding from "./component/padding.vue";
+import pupop from "./component/pupop.vue";
+import pay from "./component/pay.vue";
+import { ref, nextTick } from "vue";
+import { storeListApi, cartCreateApi } from "@/api/store.js";
 import { useUserStore } from "@/store/user.js";
 
 const pupopRef = ref(null);
 const orderRef = ref(null);
 const shopRef = ref(null);
+const payRef = ref(null);
 
 const storeList = ref([]);
 
+const userStore = useUserStore();
+
 const where = ref({
   page: 1,
   limit: 30,
-})
-const getStoreList = (data)=>{
+});
+const getStoreList = (data) => {
   where.value = {
+    source: 300,
     ...where.value,
-    ...data
+    ...data,
+  };
+  storeListApi(userStore.userInfo.service.mer_id, where.value).then((res) => {
+    storeList.value = res.data.list.map((item) => {
+      item.attr = Object.keys(item.sku);
+      return item;
+    });
+    if (storeList.value.length == 1 && isAllDigits(data.bar_code)) {
+      changeItem(storeList.value[0], storeList.value[0].attr[0]);
     }
-  storeListApi(where.value).then(res=>{
-    storeList.value = res.data.list;
-  })
+  });
+};
+
+function isAllDigits(str) {
+  return /^\d+$/.test(str);
 }
+
+const changeItem = (item, change = "") => {
+  // console.log(item, change);
+  let q = {
+    is_new: 0,
+    product_id: item.product_id,
+    cart_num: 1,
+    product_attr_unique:
+      item.sku[change] !== undefined ? item.sku[change].unique : "",
+    source: 300, //收银
+    product_type: 0,
+    // spread_id: this.currSpid,
+    // sale_type: 1
+  };
+  cartCreateApi(q).then((res) => {
+    console.log(res);
+    orderRef.value.getList(item);
+  });
+};
+
 getStoreList();
 
-const changeItem = (item)=>{
-  orderRef.value.getList(item);
-}
+const goPay = () => {
+  payRef.value.drawer = true;
+};
 
 nextTick(() => {
   // pupopRef.value.show(true);
-})
-
+});
 </script>
 
-
 <template>
   <div class="my-card">
-        <order ref="orderRef"/>
+    <order ref="orderRef" @goPay="goPay" />
     <padding />
-        <shop ref="shopRef" style="flex: 1" :storeList="storeList" @getStoreList="getStoreList" @changeItem="changeItem"/>
-        <pupop ref="pupopRef"/>
+    <shop
+      ref="shopRef"
+      style="flex: 1"
+      :storeList="storeList"
+      @getStoreList="getStoreList"
+      @changeItem="changeItem"
+    />
+    <pupop ref="pupopRef" />
+    <pay ref="payRef" />
   </div>
 </template>
 
 <style lang="scss">
-.my-card{
+.my-card {
   display: flex;
 }
-  /* 修改滚动条的样式 */
-  ::-webkit-scrollbar {
+/* 修改滚动条的样式 */
+::-webkit-scrollbar {
   width: 5px; /* 设置滚动条的宽度 */
-  }
+}
 
-  /* 设置滚动条的轨道样式 */
-  ::-webkit-scrollbar-track {
+/* 设置滚动条的轨道样式 */
+::-webkit-scrollbar-track {
   background-color: #f1f1f1; /* 设置轨道的背景色 */
   margin: 20px 0;
-  }
+}
 
-  /* 设置滚动条的滑块样式 */
-  ::-webkit-scrollbar-thumb {
+/* 设置滚动条的滑块样式 */
+::-webkit-scrollbar-thumb {
   background-color: #ccc; /* 设置滑块的背景色 */
   border-radius: 5px; /* 设置滑块的圆角 */
-  }
+}
 
-  /* 设置滚动条鼠标悬停时的滑块样式 */
-  ::-webkit-scrollbar-thumb:hover {
+/* 设置滚动条鼠标悬停时的滑块样式 */
+::-webkit-scrollbar-thumb:hover {
   background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
-  }
+}
 </style>