czg_team/cashierdesktop
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增请求配置，对接登录接口

Browse Source
This commit is contained in:
gyq
2024-02-26 11:46:21 +08:00
parent 5298ff2569
commit 9744a968bb
13 changed files with 457 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
src/views/home/components/goods.vue Normal file
View File

@@ -0,0 +1,221 @@
<!-- 商品列表 -->
<template>
<div class="header">
<div class="menus">
<div class="item" :class="{ active: categorysActive == index }" v-for="(item, index) in categorys"
:key="item.id" @click="categorysActive = index">
<el-text>{{ item.name }}</el-text>
</div>
</div>
<div class="all">
<el-icon class="icon">
<Menu />
</el-icon>
</div>
</div>
<div class="search_wrap">
<div class="input">
<el-input placeholder="商品名称或首字母简称" prefix-icon="Search"></el-input>
</div>
<el-button :icon="shopListType == 'text' ? 'PictureRounded' : 'PriceTag'" @click="changeShopListType"></el-button>
</div>
<div class="shop_list" :class="{ img: shopListType == 'img' }">
<div class="item_wrap" v-for="item in 7" :key="item">
<div class="item">
<div class="dot">2</div>
<div class="cover" v-if="shopListType == 'img'">
<el-image
src="https://img1.baidu.com/it/u=2183780444,2807225961&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400"
style="width: 100%;height: 100%;" fit="cover"></el-image>
</div>
<div class="name"><el-text>酱香拿铁</el-text></div>
<div class="empty" v-if="shopListType == 'text'"></div>
<div class="price">
<el-text>￥0.03</el-text>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { queryCategory } from '@/api/product'
import { ref, onMounted } from 'vue'
import { useUser } from "@/store/user.js"
const store = useUser();
const shopListType = ref('text')
const categorys = ref([])
const categorysActive = ref(0)
// 切换商品显示模式
function changeShopListType() {
if (shopListType.value == 'text') {
shopListType.value = 'img'
} else {
shopListType.value = 'text'
}
}
// 查询分类信息
async function queryCategoryAjax() {
try {
const res = await queryCategory({
shopId: store.userInfo.shopId,
page: 1,
pageSize: 100
})
categorys.value = res.list
} catch (error) {
console.log(error)
}
}
onMounted(() => {
queryCategoryAjax()
})
</script>
<style scoped lang="scss">
.header {
display: flex;
height: 80px;
justify-content: space-between;
border-bottom: 1px solid #ececec;
}
.menus {
display: flex;
padding: 0 10px;
.item {
padding: 0 10px;
display: flex;
align-items: center;
position: relative;
span {
font-size: 24px;
}
&.active {
&::after {
content: "";
width: 70%;
height: 2px;
border-radius: 4px;
position: absolute;
bottom: 0;
left: 15%;
background-color: var(--primary-color);
}
span {
color: #333;
}
}
}
}
.all {
width: 80px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
&::before {
content: "";
height: 60%;
border-left: 1px solid #ececec;
position: absolute;
left: 0;
top: 20%;
}
.icon {
color: #555;
font-size: 20px;
}
}
.search_wrap {
display: flex;
justify-content: flex-end;
gap: 10px;
padding: 20px;
}
.shop_list {
max-height: calc(100vh - 40px - 80px - 80px);
overflow-y: auto;
display: flex;
flex-wrap: wrap;
padding: 0 10px;
&.img {
.item_wrap {
width: 25%;
}
}
.item_wrap {
width: 20%;
padding: 0 10px;
padding-bottom: 20px;
}
.item {
border: 1px solid #ececec;
border-radius: 10px;
overflow: hidden;
position: relative;
&:hover {
cursor: pointer;
}
.dot {
padding: 0 8px;
background-color: var(--el-color-danger);
color: #fff;
border-radius: 20px;
position: absolute;
top: 4px;
right: 4px;
z-index: 1;
font-size: 12px;
}
.cover {
width: 100%;
height: 300px;
}
.name {
padding: 14px 10px;
span {
font-weight: bold;
font-size: 18px;
}
}
.empty {
height: 50px;
}
.price {
padding: 10px 20px;
background-color: var(--primary-color);
span {
color: #fff;
font-weight: bold;
font-size: 18px;
}
}
}
}
</style>

382
src/views/home/index.vue Normal file
View File

@@ -0,0 +1,382 @@
<template>
<div class="content">
<div class="cart_wrap card">
<div class="menu_top">
<div class="menu">
<el-icon class="icon">
<TakeawayBox />
</el-icon>
<el-text class="t">(1)</el-text>
</div>
<div class="number">
<el-text class="t">#2</el-text>
</div>
<div class="select_user">
<el-icon class="icon">
<UserFilled />
</el-icon>
<el-text class="t">选择会员</el-text>
<el-icon class="arrow">
<ArrowRight />
</el-icon>
</div>
</div>
<div class="shop_operation">
<div class="shop_list">
<div class="item" v-for="item in 3" :key="item">
<div class="name_wrap">
<span>鲜肉</span>
<span>￥1.00</span>
</div>
<div class="sku_list">
<div class="tag">默认1份</div>
<div class="tag">热</div>
<div class="tag">半糖</div>
</div>
<div class="num">
<el-text>X1</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>
</div>
<div class="footer">
<div class="top">
<div class="left" @click="allSelected = !allSelected">
<div class="selected">
<div class="selected_round" v-if="!allSelected"></div>
<el-icon class="icon" v-else>
<CircleCheckFilled />
</el-icon>
</div>
<el-text class="t">打包(￥0.00)</el-text>
</div>
<div class="num-wrap">
<el-text>共6种商品，7件</el-text>
</div>
</div>
<div class="btm">
<el-button icon="Edit" @click="remarkRef.show()"></el-button>
<div class="button">
<el-button type="primary" style="width: 100%;">
<div class="js">
<el-text class="t">￥3.09</el-text>
<el-text class="t" style="margin-left: 250px;">结算</el-text>
</div>
</el-button>
</div>
</div>
</div>
</div>
<div class="shop_manage card">
<!-- 分类/商品列表 -->
<goods />
</div>
</div>
<!-- 选择规格 -->
<skuModal />
<!-- 备注 -->
<remarkModal ref="remarkRef" />
<!-- 修改取餐号 -->
<takeFoodCode />
</template>
<script setup>
import { ref } from 'vue'
import skuModal from '@/components/skuModal.vue'
import remarkModal from '@/components/remarkModal.vue'
import takeFoodCode from '@/components/takeFoodCode.vue'
// 商品列表
import goods from '@/views/home/components/goods.vue'
const remarkRef = ref(null)
const allSelected = ref(false)
</script>
<style scoped lang="scss">
.cart_wrap {
width: 550px;
height: 100%;
display: flex;
flex-direction: column;
.menu_top {
flex-shrink: 0;
display: flex;
height: 60px;
$fs: 20px;
.menu {
background-color: var(--el-color-warning);
color: #fff;
width: 100px;
display: flex;
align-items: center;
justify-content: center;
.icon {
font-size: 24px;
position: relative;
top: 2px;
}
.t {
color: #fff;
margin-left: 4px;
font-size: $fs;
}
}
.number {
flex: 1;
display: flex;
align-items: center;
background-color: var(--el-color-info-light-7);
padding-left: 20px;
.t {
font-size: $fs;
}
}
.select_user {
display: flex;
align-items: center;
background-color: var(--el-color-info-light-8);
padding: 0 20px;
.icon {
color: var(--el-color-primary);
font-size: 24px;
}
.t {
font-size: $fs;
padding: 0 10px;
}
.arrow {
color: #999;
font-size: 20px;
position: relative;
top: 2px;
}
}
}
.shop_operation {
flex: 1;
display: flex;
.shop_list {
flex: 1;
height: calc(100vh - 40px - 60px - 130px);
overflow-y: auto;
border-right: 1px solid #ececec;
.item {
padding: 20px;
&:not(:last-child) {
border-bottom: 1px solid #ececec;
}
.name_wrap {
display: flex;
justify-content: space-between;
font-size: 20px;
}
.sku_list {
display: flex;
padding-top: 10px;
.tag {
padding: 4px 10px;
background-color: var(--el-color-danger);
color: #fff;
margin-right: 10px;
}
}
.num {
padding-top: 10px;
display: flex;
justify-content: flex-end;
}
}
}
.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;
}
}
}
}
}
.footer {
padding: 20px;
border-top: 1px solid #ececec;
.left {
display: flex;
align-items: center;
.selected {
width: 20px;
height: 20px;
display: flex;
align-items: center;
position: relative;
top: 1px;
.icon {
display: block;
font-size: 20px;
color: var(--primary-color);
}
.selected_round {
width: 100%;
height: 100%;
border-radius: 50%;
border: 1px solid #ddd;
}
}
.t {
margin-left: 6px;
}
}
.top {
display: flex;
justify-content: space-between;
}
.btm {
$h: 70px;
display: flex;
height: $h;
padding-top: 20px;
gap: 20px;
.editor {
width: $h;
border: 1px solid #ececec;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: #555;
font-size: 22px;
}
.button {
flex: 1;
.js {
.t {
color: #fff;
font-size: 20px;
}
}
}
}
}
.shop_manage {
flex: 1;
margin-left: 20px;
height: 100%;
}
</style>