This commit is contained in:
parent
3bb17db543
commit
fe019ae2ea
|
|
@ -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 })
|
||||
// }
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
storeListApi(where.value).then(res=>{
|
||||
storeList.value = res.data.list;
|
||||
})
|
||||
...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]);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
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);
|
||||
})
|
||||
|
||||
// pupopRef.value.show(true);
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
<template>
|
||||
<div class="my-card">
|
||||
<order ref="orderRef"/>
|
||||
<padding />
|
||||
<shop ref="shopRef" style="flex: 1" :storeList="storeList" @getStoreList="getStoreList" @changeItem="changeItem"/>
|
||||
<pupop ref="pupopRef"/>
|
||||
</div>
|
||||
<div class="my-card">
|
||||
<order ref="orderRef" @goPay="goPay" />
|
||||
<padding />
|
||||
<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{
|
||||
display: flex;
|
||||
.my-card {
|
||||
display: flex;
|
||||
}
|
||||
/* 修改滚动条的样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 5px; /* 设置滚动条的宽度 */
|
||||
}
|
||||
/* 修改滚动条的样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 5px; /* 设置滚动条的宽度 */
|
||||
}
|
||||
|
||||
/* 设置滚动条的轨道样式 */
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #f1f1f1; /* 设置轨道的背景色 */
|
||||
margin: 20px 0;
|
||||
}
|
||||
/* 设置滚动条的轨道样式 */
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: #f1f1f1; /* 设置轨道的背景色 */
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/* 设置滚动条的滑块样式 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #ccc; /* 设置滑块的背景色 */
|
||||
border-radius: 5px; /* 设置滑块的圆角 */
|
||||
}
|
||||
/* 设置滚动条的滑块样式 */
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #ccc; /* 设置滑块的背景色 */
|
||||
border-radius: 5px; /* 设置滑块的圆角 */
|
||||
}
|
||||
|
||||
/* 设置滚动条鼠标悬停时的滑块样式 */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
|
||||
}
|
||||
</style>
|
||||
/* 设置滚动条鼠标悬停时的滑块样式 */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue