This commit is contained in:
weipengfei 2024-04-02 13:33:53 +08:00
parent 3bb17db543
commit fe019ae2ea
6 changed files with 250 additions and 61 deletions

View File

@ -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 })
// }

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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(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(); 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"
style="flex: 1"
:storeList="storeList"
@getStoreList="getStoreList"
@changeItem="changeItem"
/>
<pupop ref="pupopRef" />
<pay ref="payRef" />
</div> </div>
</template> </template>
<style lang="scss"> <style lang="scss">
.my-card{ .my-card {
display: flex; display: flex;
} }
/* 修改滚动条的样式 */ /* 修改滚动条的样式 */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 5px; /* 设置滚动条的宽度 */ 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>