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

新增团购券

This commit is contained in:
gyq 2024-05-21 17:11:10 +08:00
parent 5c56f5a277
commit 443f9ed305
6 changed files with 812 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/api/group.js Normal file
View File

@ -0,0 +1,40 @@
import request from "@/utils/request.js";
/**
* 团购卷订单列表(分页)
* @param {*} data
* @returns
*/
export function groupOrderlist(data) {
return request({
method: "post",
url: "/groupOrder/list",
data,
});
}
/**
* 团购卷核销前回显
* @param {*} params
* @returns
*/
export function groupOrderorderInfo(params) {
return request({
method: "get",
url: "/groupOrder/orderInfo",
params,
});
}
/**
* 团购卷核销(仅核销待使用订单)
* @param {*} params
* @returns
*/
export function groupOrdergroupScan(params) {
return request({
method: "get",
url: "/groupOrder/groupScan",
params,
});
}

7
src/components/leftMenu.vue
View File

@ -42,6 +42,11 @@ const menus = ref([
path: '/table',
icon: 'Reading'
},
{
label: '团购',
path: '/group_buy',
icon: 'Handbag'
},
{
label: '订单',
path: '/order',
@ -184,7 +189,7 @@ const menus = ref([
}
&.more {
margin-top: 150px;
margin-top: 120px;
}
.icon {

16
src/router/index.js
View File

@ -1,6 +1,6 @@
import { createRouter, createWebHashHistory } from "vue-router"
import home from "@/views/home/index.vue"
import test from "@/views/home/test.vue"
import { createRouter, createWebHashHistory } from "vue-router";
import home from "@/views/home/index.vue";
import test from "@/views/home/test.vue";
const routes = [
{
@ -24,6 +24,14 @@ const routes = [
},
component: () => import("@/views/register.vue"),
},
{
path: "/group_buy",
name: "group_buy",
meta: {
index: 1,
},
component: () => import("@/views/group_buy/index.vue"),
},
{
path: "/table",
name: "table",
@ -78,7 +86,7 @@ const routes = [
path: "/add_label",
name: "add_label",
component: () => import("@/views/device/add_label.vue"),
}
},
];
const router = createRouter({

428
src/views/group_buy/components/scanGroup.vue Normal file
View File

@ -0,0 +1,428 @@
<!-- 扫码弹窗 -->
<template>
<div class="dialog">
<el-dialog title="核销团购券" width="600" v-model="dialogVisible" @open="reset">
<div class="content">
<div class="left">
<el-image :src="icon" style="width: 60px; height: 60px"></el-image>
</div>
<div class="right" v-if="!userPayWait">
<div class="amount">
<span class="t">扫码核销</span>
<!-- <span class="n">{{ props.amount }}</span> -->
</div>
<div class="input">
<el-input ref="inputRef" v-model="scanCode"
style="height: calc(var(--el-component-size-large) + 30px)" placeholder="请扫描团购券" clearable
@change="inputChange"></el-input>
<div class="tips">注意：扫码支付请保证输入框获得焦点，输入内容结束后会自动核销，请勿重复操作</div>
</div>
<!-- <div class="number_warp">
<div class="item" v-for="item in 9" :key="item" @click="inputHandle(item)">{{ item }}</div>
<div class="item disabled">.</div>
<div class="item" @click="inputHandle(0)">0</div>
<div class="item" @click="delHandle">
<el-icon>
<CloseBold />
</el-icon>
</div>
</div> -->
<div class="btn">
<el-button type="primary" style="width: 100%" v-loading="loading">立即核销</el-button>
</div>
</div>
<div class="pay_wait" v-else>
<div class="loading" v-loading="loading" element-loading-text="用户支付中..."></div>
<div class="btn">
<el-button type="primary" style="width: 100%" v-loading="checkPayStatusLoading"
@click="checkPayStauts">
<span v-if="!checkPayStatusLoading">查询用户支付状态</span>
<span v-else>查询中...</span>
</el-button>
</div>
<div class="btn">
<el-button style="width: 100%" @click="resetScanCode">
重新扫码
</el-button>
</div>
</div>
</div>
</el-dialog>
<el-dialog title="团购券详情" width="600" v-model="detailVisible">
<div class="group_detil">
<div class="shop_info">
<el-image :src="groupDetail.images[0]" style="width: 50px;height: 50px;"></el-image>
<div class="info">
<div class="name">{{ groupDetail.productName }}</div>
<div class="price">
<span class="p">￥{{ groupDetail.salePrice }}</span>
<span class="o">￥{{ groupDetail.originPrice }}</span>
</div>
</div>
</div>
<div class="table">
<el-table :data="groupDetail.productList" border>
<el-table-column label="名称" prop="title"></el-table-column>
<el-table-column label="数量" prop="number"></el-table-column>
<el-table-column label="商品信息">
<template v-slot="scope">
<div class="shop_list">
<div class="item" v-for="(item, index) in scope.row.goods" :key="item.id">
<span class="dot"></span>
<div class="name">
<div class="t">{{ item.name }}</div>
<div class="t">x{{ item.groupNum }}</div>
</div>
</div>
</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="footer">
<el-button style="width: 100%;">取消</el-button>
<el-button type="primary" style="width: 100%;" :loading="groupDetailLoading"
@click="groupOrdergroupScanHandle">确认核销</el-button>
</div>
</el-dialog>
</div>
</template>
<script setup>
import _ from "lodash";
import { ref } from "vue";
import icon from "@/assets/icon_scan.png";
import { groupOrderorderInfo, groupOrdergroupScan } from '@/api/group'
import { useUser } from "@/store/user.js";
const store = useUser();
import {
queryMembermember,
createMembermember,
membermemberScanPay,
accountPaymember,
} from "@/api/member/index.js";
import { ElMessage } from "element-plus";
const emits = defineEmits(["success"]);
const props = defineProps({
amount: {
type: [Number, String],
default: 0,
},
selecttype: {
type: Number,
default: 0,
},
orderId: {
type: [Number, String],
default: "",
},
fast: {
type: Boolean,
default: false,
},
});
const dialogVisible = ref(false);
const scanCode = ref("");
const inputRef = ref(null);
const loading = ref(false);
const userPayWait = ref(false);
const checkPayStatusLoading = ref(false);
const fastOrder = ref('')
const groupDetailLoading = ref(false)
const groupDetail = ref({})
const detailVisible = ref(false)
// 团购卷核销(仅核销待使用订单)
async function groupOrdergroupScanHandle() {
try {
groupDetailLoading.value = true
const res = await groupOrdergroupScan({
id: groupDetail.value.id
})
groupDetailLoading.value = false
detailVisible.value = false
scanCode.value = ''
inputRef.value.focus();
ElMessage.success('核销成功')
emits('succcess')
} catch (error) {
groupDetailLoading.value = false
console.log(error);
}
}
// 提交扫码支付
async function submitHandle() {
try {
loading.value = true
const res = await groupOrderorderInfo({
coupon: scanCode.value,
});
loading.value = false
groupDetail.value = res
detailVisible.value = true
} catch (error) {
console.log(error);
}
}
// 重新扫码
function resetScanCode() {
userPayWait.value = false;
loading.value = false;
scanCode.value = "";
inputRef.value.focus();
}
// 输入
function inputHandle(n) {
scanCode.value += n;
inputRef.value.focus();
}
// 删除
function delHandle() {
if (!scanCode.value) return;
scanCode.value = scanCode.value.substring(0, scanCode.value.length - 1);
inputRef.value.focus();
}
// 监听扫码枪回车事件
// function enterHandle() {
// inputRef.value.focus()
// }
const inputChange = _.debounce(function (e) {
// console.log(e);
if (scanCode.value) {
submitHandle();
}
}, 500);
function show() {
dialogVisible.value = true;
setTimeout(() => {
inputRef.value.focus();
}, 500);
}
function close() {
dialogVisible.value = false;
}
function reset() {
loading.value = false;
scanCode.value = "";
}
defineExpose({
show,
close,
loading,
});
</script>
<style scoped lang="scss">
.footer {
display: flex;
padding: 0 14px 14px;
}
.group_detil {
padding: 14px;
.shop_info {
display: flex;
.info {
flex: 1;
padding-left: 10px;
.name {
font-size: 18px;
font-weight: bold;
color: #000;
}
.price {
.p {
font-size: 20px;
font-weight: bold;
color: red;
}
.o {
color: #999;
text-decoration: line-through;
margin-left: 10px;
}
}
}
}
.table {
padding-top: 14px;
}
.shop_list {
.item {
display: flex;
align-items: center;
&:not(:first-child) {
margin-top: 6px;
}
.dot {
$size: 6px;
width: $size;
height: $size;
border-radius: 50%;
background-color: #1890FF;
}
.name {
flex: 1;
display: flex;
margin-left: 10px;
align-items: center;
.t {
color: #333;
font-size: 14px;
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-right: 10px;
}
}
.del {
font-size: 14px;
color: #999;
&:hover {
cursor: pointer;
color: #555;
}
}
}
}
}
.tips {
padding-top: 10px;
color: #999;
}
.dialog :deep(.el-dialog__body) {
padding: 0 !important;
}
.content {
display: flex;
.left {
width: 200px;
display: flex;
align-items: center;
justify-content: center;
background-color: #efefef;
}
.right {
flex: 1;
padding: var(--el-font-size-base);
.amount {
display: flex;
height: calc(var(--el-component-size-large) + 20px);
display: flex;
align-items: center;
justify-content: space-between;
color: var(--primary-color);
background-color: #555;
border-radius: 6px;
padding: 0 var(--el-font-size-base);
font-size: calc(var(--el-font-size-base) + 10px);
}
.input {
padding: var(--el-font-size-base) 0;
:deep(.el-input__inner) {
font-size: calc(var(--el-font-size-base) + 10px);
}
}
.number_warp {
--h: 50px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: var(--h) var(--h) var(--h) var(--h);
gap: 8px;
.item {
background-color: #dddddd;
display: flex;
align-items: center;
justify-content: center;
font-size: calc(var(--el-font-size-base) + 10px);
border-radius: 4px;
&.disabled {
color: #999;
background-color: #efefef;
&:active {
background-color: #efefef;
}
}
&:active {
background-color: #b9b9b9;
}
}
}
// .btn {
// padding-top: 20px;
// }
}
.pay_wait {
flex: 1;
padding: 0 var(--el-font-size-base);
height: 400px;
padding-bottom: 100px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.loading {
width: 200px;
height: 200px;
--el-loading-spinner-size: 100px;
:deep(.el-loading-text) {
font-size: 20px;
}
}
.btn {
width: 200px;
padding-top: var(--el-font-size-base);
}
}
}
</style>

324
src/views/group_buy/index.vue Normal file
View File

@ -0,0 +1,324 @@
<template>
<div class="content">
<div class="cart_wrap card">
<div class="header">
<div class="left">
<el-input placeholder="搜索订单" v-model="tableData.proName"></el-input>
<el-select v-model="tableData.status" placeholder="订单状态">
<el-option v-for="item in statusList" :key="item.value" :value="item.value"
:label="item.label"></el-option>
</el-select>
<div class="btn">
<el-button type="primary" :icon="Search" @click="groupOrderlistAjax">搜索</el-button>
<el-button :icon="RefreshRight" :loading="tableData.resetLoading"
@click="resetHandle">重置</el-button>
</div>
</div>
<el-button type="warning" :icon="MagicStick" @click="scanGroupRef.show()">核销团购券</el-button>
</div>
<div class="tab_container">
<el-table :data="tableData.list" height="540px" v-loading="tableData.loading">
<el-table-column label="订单号" prop="orderNo" width="150px"></el-table-column>
<el-table-column label="优惠卷" prop="proImg" width="220px">
<template v-slot="scope">
<div class="info_wrap">
<el-image :src="scope.row.proImg" style="width: 40px;height: 40px;flex-shrink: 0;" />
<div class="t">{{ scope.row.proName }}</div>
</div>
</template>
</el-table-column>
<el-table-column label="支付方式" prop="payType">
<template v-slot="scope">
{{ payTypeFilter(scope.row.payType) }}
</template>
</el-table-column>
<el-table-column label="订单金额" prop="orderAmount">
<template v-slot="scope">
￥{{ scope.row.orderAmount }}
</template>
</el-table-column>
<el-table-column label="实付金额" prop="payAmount">
<template v-slot="scope">
￥{{ scope.row.payAmount }}
</template>
</el-table-column>
<el-table-column label="下单数量" prop="number">
<template v-slot="scope">
{{ scope.row.number }}
</template>
</el-table-column>
<el-table-column label="状态" prop="status" fixed="right">
<template v-slot="scope">
{{ statusFilter(scope.row.status) }}
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination">
<el-pagination @current-change="paginationChange" :current-page="tableData.page"
:page-size="tableData.size" layout="total, prev, pager, next, jumper" :total="tableData.total"
background>
</el-pagination>
</div>
</div>
<scanGroup ref="scanGroupRef" @succcess="groupOrderlistAjax" />
</div>
</template>
<script setup>
import { groupOrderlist } from '@/api/group'
import { Search, RefreshRight, MagicStick } from '@element-plus/icons-vue'
import { ref, onMounted, reactive } from 'vue'
import scanGroup from './components/scanGroup.vue'
import { useUser } from "@/store/user.js"
const store = useUser()
const scanGroupRef = ref(null)
const tableData = reactive({
resetLoading: false,
proName: '',
status: '',
loading: false,
list: [],
page: 1,
size: 10,
total: 0
})
// 支付方式类型
function payTypeFilter(t) {
const m = {
wechatPay: '微信支付',
aliPay: '支付宝支付'
}
return m[t]
}
const statusList = reactive([
{
value: 'unpaid',
label: '待付款'
},
{
value: 'unused',
label: '待使用'
},
{
value: 'closed',
label: '已完成'
},
{
value: 'refunding',
label: '退款中'
},
{
value: 'refund',
label: '已退款'
},
{
value: 'cancelled',
label: '已取消'
}
])
// 状态
function statusFilter(t) {
return statusList.find(item => item.value == t)?.label
}
// 分页变化
function paginationChange(e) {
tableData.page = e
groupOrderlistAjax()
}
// 重置
function resetHandle() {
tableData.proName = ''
tableData.status = ''
tableData.page = 1
tableData.resetLoading = true
groupOrderlistAjax()
}
// 获取团购订单数据
async function groupOrderlistAjax() {
try {
tableData.loading = true
const res = await groupOrderlist({
shopId: store.userInfo.shopId,
proName: tableData.proName,
status: tableData.status,
page: tableData.page,
size: tableData.size
})
tableData.resetLoading = false
tableData.loading = false
tableData.list = res.list
tableData.total = res.total
} catch (error) {
tableData.loading = false
console.log(error);
}
}
onMounted(() => {
groupOrderlistAjax()
})
</script>
<style scoped lang="scss">
.pagination {
display: flex;
padding: 0 14px;
}
.info_wrap {
display: flex;
align-items: flex-start;
.t {
width: 100px;
margin-left: 10px;
}
}
.cart_wrap {
flex: 2;
}
.right_card {
flex: 1;
height: 100%;
margin-left: var(--el-font-size-base);
}
.header {
display: flex;
padding: 14px;
justify-content: space-between;
border-bottom: 1px solid #ececec;
.left {
display: flex;
gap: 10px;
.btn {
display: flex;
}
}
.menus {
display: flex;
padding: 0 10px;
.item {
padding: 0 10px;
display: flex;
align-items: center;
position: relative;
span {
font-size: var(--el-font-size-base);
}
&.active {
&::after {
content: "";
width: 70%;
height: 4px;
border-radius: 4px;
position: absolute;
bottom: 0;
left: 15%;
background-color: var(--primary-color);
}
span {
color: var(--primary-color);
}
}
}
}
.all {
display: flex;
align-items: center;
}
}
.tab_container {
padding: 0 var(--el-font-size-base) var(--el-font-size-base);
.tab_head {
padding-bottom: var(--el-font-size-base);
}
.overflow_y {
height: calc(100vh - 225px);
overflow-y: auto;
}
.tab_list {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
gap: var(--el-font-size-base);
.item {
background-color: #efefef;
border-radius: 6px;
overflow: hidden;
border: 2px solid #fff;
&.active {
border-color: var(--primary-color);
}
&:hover {
cursor: pointer;
}
.tab_title {
height: var(--el-component-size-large);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
color: #fff;
&.subscribe {
background-color: var(--el-color-success);
}
&.closed {
background-color: #999;
}
&.opening {
background-color: var(--primary-color);
}
&.cleaning {
background-color: var(--el-color-danger);
}
}
.tab_cont {
height: 120px;
display: flex;
align-items: center;
justify-content: center;
.icon {
color: #555;
font-size: 30px;
transform: rotate(45deg);
}
}
}
}
}
</style>

3
vite.config.js
View File

@ -9,10 +9,11 @@ export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://192.168.2.96:10587/cashier-client', // 阿伟
// target: 'https://cashierclient.sxczgkj.cn/cashier-client', // 线上
// target: 'http://192.168.2.116:10587/cashier-client', // 国成
// target: 'http://192.168.2.171:10587/cashier-client', // 鹏辉
target: 'https://cashier-client.sxczgkj.cn/cashier-client', // 测试
// target: 'https://cashier-client.sxczgkj.cn/cashier-client', // 测试
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}