This commit is contained in:
parent
3bb17db543
commit
fe019ae2ea
|
@ -4,5 +4,26 @@ import request from '@/utils/axios.js'
|
||||||
* @description 商品列表
|
* @description 商品列表
|
||||||
*/
|
*/
|
||||||
export function storeListApi(id, data) {
|
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>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
|
import { cartListApi } from "@/api/store.js";
|
||||||
|
|
||||||
const list = ref([])
|
const list = ref([])
|
||||||
|
|
||||||
|
@ -12,11 +13,19 @@ const deleteOne = (index)=>{
|
||||||
}
|
}
|
||||||
|
|
||||||
const getList = (item)=>{
|
const getList = (item)=>{
|
||||||
list.value.push({
|
cartListApi({
|
||||||
num: 1
|
source: 300
|
||||||
|
}).then(res=>{
|
||||||
|
list.value = res.data.list
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const emit = defineEmits(['goPay'])
|
||||||
|
|
||||||
|
const goPay = ()=>{
|
||||||
|
emit('goPay')
|
||||||
|
}
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
getList
|
getList
|
||||||
})
|
})
|
||||||
|
@ -56,7 +65,7 @@ defineExpose({
|
||||||
<div class="update-price"><el-button class="btn" type="primary">改价</el-button></div>
|
<div class="update-price"><el-button class="btn" type="primary">改价</el-button></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="order-btn">
|
<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>
|
</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;
|
dialogVisible.value = e;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const emit = defineEmits(['changeItem'])
|
||||||
|
|
||||||
|
const changeItem = ()=>{
|
||||||
|
emit('changeItem', item, change);
|
||||||
|
dialogVisible = false
|
||||||
|
}
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
show
|
show
|
||||||
})
|
})
|
||||||
|
@ -45,7 +52,7 @@ defineExpose({
|
||||||
</div>
|
</div>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<div class="dialog-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>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -11,13 +11,6 @@ const props = defineProps({
|
||||||
const emit = defineEmits(['getStoreList'])
|
const emit = defineEmits(['getStoreList'])
|
||||||
|
|
||||||
const bar_code = ref('');
|
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 = () => {
|
const loadMore = () => {
|
||||||
console.log("loadMore");
|
console.log("loadMore");
|
||||||
|
@ -27,6 +20,12 @@ const changeItem = (item)=>{
|
||||||
emit('changeItem', item)
|
emit('changeItem', item)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleEnter = () => {
|
||||||
|
emit('getStoreList', {
|
||||||
|
bar_code: bar_code.value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -38,9 +37,10 @@ const changeItem = (item)=>{
|
||||||
v-model="bar_code"
|
v-model="bar_code"
|
||||||
placeholder="搜索商品名称/ID/唯一码或点击聚焦扫码"
|
placeholder="搜索商品名称/ID/唯一码或点击聚焦扫码"
|
||||||
clearable
|
clearable
|
||||||
|
@keyup.enter="handleEnter"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-item-btn">
|
<div class="nav-item-btn" @click="handleEnter">
|
||||||
<el-button class="btn" type="primary"
|
<el-button class="btn" type="primary"
|
||||||
><el-icon><Search /></el-icon
|
><el-icon><Search /></el-icon
|
||||||
></el-button>
|
></el-button>
|
||||||
|
|
|
@ -1,76 +1,116 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import order from './component/order.vue';
|
import order from "./component/order.vue";
|
||||||
import shop from './component/shop.vue';
|
import shop from "./component/shop.vue";
|
||||||
import padding from './component/padding.vue';
|
import padding from "./component/padding.vue";
|
||||||
import pupop from './component/pupop.vue';
|
import pupop from "./component/pupop.vue";
|
||||||
import { ref, nextTick } from 'vue';
|
import pay from "./component/pay.vue";
|
||||||
import { storeListApi } from "@/api/store.js";
|
import { ref, nextTick } from "vue";
|
||||||
|
import { storeListApi, cartCreateApi } from "@/api/store.js";
|
||||||
import { useUserStore } from "@/store/user.js";
|
import { useUserStore } from "@/store/user.js";
|
||||||
|
|
||||||
const pupopRef = ref(null);
|
const pupopRef = ref(null);
|
||||||
const orderRef = ref(null);
|
const orderRef = ref(null);
|
||||||
const shopRef = ref(null);
|
const shopRef = ref(null);
|
||||||
|
const payRef = ref(null);
|
||||||
|
|
||||||
const storeList = ref([]);
|
const storeList = ref([]);
|
||||||
|
|
||||||
|
const userStore = useUserStore();
|
||||||
|
|
||||||
const where = ref({
|
const where = ref({
|
||||||
page: 1,
|
page: 1,
|
||||||
limit: 30,
|
limit: 30,
|
||||||
})
|
});
|
||||||
const getStoreList = (data)=>{
|
const getStoreList = (data) => {
|
||||||
where.value = {
|
where.value = {
|
||||||
|
source: 300,
|
||||||
...where.value,
|
...where.value,
|
||||||
...data
|
...data,
|
||||||
}
|
};
|
||||||
storeListApi(where.value).then(res=>{
|
storeListApi(userStore.userInfo.service.mer_id, where.value).then((res) => {
|
||||||
storeList.value = res.data.list;
|
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();
|
getStoreList();
|
||||||
|
|
||||||
const changeItem = (item)=>{
|
const goPay = () => {
|
||||||
orderRef.value.getList(item);
|
payRef.value.drawer = true;
|
||||||
}
|
};
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
// pupopRef.value.show(true);
|
// pupopRef.value.show(true);
|
||||||
})
|
});
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="my-card">
|
<div class="my-card">
|
||||||
<order ref="orderRef"/>
|
<order ref="orderRef" @goPay="goPay" />
|
||||||
<padding />
|
<padding />
|
||||||
<shop ref="shopRef" style="flex: 1" :storeList="storeList" @getStoreList="getStoreList" @changeItem="changeItem"/>
|
<shop
|
||||||
<pupop ref="pupopRef"/>
|
ref="shopRef"
|
||||||
</div>
|
style="flex: 1"
|
||||||
|
:storeList="storeList"
|
||||||
|
@getStoreList="getStoreList"
|
||||||
|
@changeItem="changeItem"
|
||||||
|
/>
|
||||||
|
<pupop ref="pupopRef" />
|
||||||
|
<pay ref="payRef" />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.my-card{
|
.my-card {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
}
|
||||||
|
/* 修改滚动条的样式 */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 5px; /* 设置滚动条的宽度 */
|
||||||
}
|
}
|
||||||
/* 修改滚动条的样式 */
|
|
||||||
::-webkit-scrollbar {
|
|
||||||
width: 5px; /* 设置滚动条的宽度 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 设置滚动条的轨道样式 */
|
/* 设置滚动条的轨道样式 */
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background-color: #f1f1f1; /* 设置轨道的背景色 */
|
background-color: #f1f1f1; /* 设置轨道的背景色 */
|
||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 设置滚动条的滑块样式 */
|
/* 设置滚动条的滑块样式 */
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background-color: #ccc; /* 设置滑块的背景色 */
|
background-color: #ccc; /* 设置滑块的背景色 */
|
||||||
border-radius: 5px; /* 设置滑块的圆角 */
|
border-radius: 5px; /* 设置滑块的圆角 */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 设置滚动条鼠标悬停时的滑块样式 */
|
/* 设置滚动条鼠标悬停时的滑块样式 */
|
||||||
::-webkit-scrollbar-thumb:hover {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
|
background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue