czg_team/cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

代客下单页面修改，增加店铺配置页面

Browse Source
This commit is contained in:
YeMingfei666
2025-02-25 13:37:24 +08:00
parent ffcaaf9e41
commit 4eb7744111
22 changed files with 2181 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

190
src/views/tool/Instead/components/order.vue Normal file
View File

@@ -0,0 +1,190 @@
<template>
<div class="order-box">
<div class="left">
<div class="user bg-fff u-p-20">
<div class="userinfo">
<el-avatar class="avatar" :size="50" />
<div class="u-m-l-12">
<p>
<span class="name u-font-16">hh</span>
<span class="vip">VIP1</span>
</p>
<p class="u-font-14 color-666 u-m-t-10">
<span class="money">余额：4.00</span>
<span class="score u-m-l-10">积分：0</span>
</p>
</div>
</div>
<div class="score">
<div class="u-flex u-col-center u-m-t-10">
<span class="u-font-14 font-bold u-m-r-20">积分抵扣</span>
<el-radio-group v-model="score.sel" size="small" class="">
<el-radio :value="0">
<span class="u-font-14">全部抵扣</span>
</el-radio>
<el-radio :value="1">
<span class="u-font-14">部分抵扣</span>
</el-radio>
</el-radio-group>
</div>
<p class="u-font-14 color-666 u-m-t-10">
<span class="color-red">*</span>
<span>积分不足或小于最低使用门槛1</span>
</p>
</div>
<div class="u-flex u-col-center u-m-t-20">
<span class="u-font-14 font-bold u-m-r-20">团购代金券</span>
<div class="u-flex my-select">
<span class="u-m-r-10">代金券名称</span>
<el-icon><ArrowDown /></el-icon>
</div>
<svg-icon iconClass="scan" size="30" class="u-m-l-10 cur-pointer"></svg-icon>
</div>
<div class="u-flex u-col-center u-m-t-20">
<span class="u-font-14 font-bold u-m-r-20">优惠券</span>
<div class="u-flex my-select">
<span class="u-m-r-10">选择优惠券</span>
<el-icon><ArrowDown /></el-icon>
</div>
</div>
</div>
<div class="u-m-t-30">
<el-button size="large" @click="discountShow">整单打折/减免</el-button>
</div>
<div class="u-m-t-30">
<p class="u-font-16 font-bold u-m-r-20 font-bold">选择支付方式</p>
<div class="u-m-t-20">
<el-button
v-for="(item, index) in payType.list"
:key="index"
size="large"
:type="index == payType.sel ? 'primary' : ''"
@click="changePayType(index)"
>
{{ item.label }}
</el-button>
</div>
<div class="u-m-t-20">
<el-button type="primary" size="large">立即支付</el-button>
</div>
</div>
</div>
<div class="right">
<h3>账单明细</h3>
<div class="order-info">
<div class="u-flex u-m-b-10 u-row-between">
<span class="title">订单号：</span>
<span class="u-m-l-10 value">202111111111111111</span>
</div>
<div class="u-flex u-m-b-10 u-row-between">
<span class="title">门店优惠</span>
<span class="u-m-l-10 value"></span>
</div>
<div class="u-flex u-m-b-10 u-row-between">
<span class="title">优惠券</span>
<span class="u-m-l-10 value"></span>
</div>
<div class="u-flex u-m-b-10 u-row-between">
<span class="title">积分抵扣</span>
<span class="u-m-l-10 value"></span>
</div>
<div class="u-flex u-m-b-10 u-row-between">
<span class="title">整单改价</span>
<span class="u-m-l-10 value"></span>
</div>
<div class="u-flex u-m-b-10 u-row-between">
<span class="title">餐位费/附加费</span>
<span class="u-m-l-10 value"></span>
</div>
<div class="u-flex u-m-b-10 u-row-between">
<span class="title">总价</span>
<span class="u-m-l-10 value"></span>
</div>
<div class="u-flex u-m-b-10 u-row-between">
<span class="title">抹零</span>
<span class="u-m-l-10 value"></span>
</div>
<div class="u-flex u-m-b-10 u-row-between">
<span class="title">应付金额</span>
<span class="u-m-l-10 value"></span>
</div>
</div>
</div>
</div>
</template>
<script setup>
const score = ref({
list: [],
sel: 0,
});
const emits = defineEmits(["discountShow"]);
function discountShow() {
emits("discountShow");
}
const payType = reactive({
list: [
{ label: "现金", value: "" },
{ label: "扫码支付", value: "" },
{ label: "会员支付", value: "" },
],
sel: 0,
});
function changePayType(i) {
payType.sel = i;
}
</script>
<style lang="scss" scoped>
.userinfo {
display: flex;
align-items: center;
line-height: 1;
}
.vip {
padding: 2px 5px;
background: #f7793d;
color: #fff;
border-radius: 4px;
margin-left: 10px;
font-size: 10px;
}
.order-box {
display: flex;
padding: 20px 20px;
background-color: #f7f7fa;
min-height: 100%;
.left,
.right {
flex: 1;
}
.left {
padding-right: 20px;
}
.right {
border-left: 1px solid #ebebeb;
padding-left: 20px;
.order-info {
font-size: 14px;
.title {
}
.value {
}
.price {
color: #fa5555;
font-size: 20px;
}
}
}
}
.my-select {
border: 1px solid #d9d9d9;
border-radius: 4px;
margin-left: 12px;
cursor: pointer;
font-size: 14px;
color: #666;
padding: 8px 10px 8px 20px;
}
</style>