This commit is contained in:
weipengfei 2024-04-05 13:44:36 +08:00
parent 176067a7bf
commit 00567505c2
19 changed files with 933 additions and 301 deletions

View File

@ -1,2 +1,2 @@
VITE_BASE_URL = 'http://192.168.1.16:8324'
VITE_BASE_URL = 'http://192.168.1.22:8324'
# VITE_BASE_URL = 'https://crmeb-test.shop.lihaink.cn'

22
src/api/shop.js Normal file
View File

@ -0,0 +1,22 @@
import request from '@/utils/axios.js'
/**
* @description 商品列表
*/
export function storeListApi(id, data) {
return request.get(`server/${id}/product/lst`, { params: data })
}
/**
* @description 商品详情
*/
export function getAttrValue(id, data) {
return request.get(`store/product/detail/${id}`, { params: data })
}
/**
* @description 免审编辑
*/
export function userFreeTrialApi(id, data) {
return request.post(`user_free_trial/${id}`, data)
}

View File

@ -1,12 +1,5 @@
import request from '@/utils/axios.js'
/**
* @description 商品列表
*/
export function storeListApi(id, data) {
return request.get(`server/${id}/product/lst`, { params: data })
}
/**
* @description 加入购物车
*/
@ -22,7 +15,7 @@ export function cartListApi(data) {
}
/**
* @description 购物数量加减
* @description 编辑购物车数据
*/
export function cartChangeApi(id, data) {
return request.post(`user/cart/change/${id}`, data)
@ -50,23 +43,37 @@ export function orderCreateApi(data) {
return request.post(`v2/order/create`, data)
}
/**
* @description 重新支付
*/
export function orderPayApi(id, data) {
return request.post(`order/pay/${id}`, data)
}
/**
* @description 订单状态
*/
export function orderStatusApi(id) {
return request.get(`micropay_query`, { params: { order_id: id } })
export function orderStatusApi(data) {
return request.get(`micropay_query`, { params: data })
}
/**
* @description 订单列表
*/
export function orderListApi(data) {
return request.get(`/order/list`, { params: data })
export function orderListApi(id, data) {
return request.get(`admin/${id}/order_list`, { params: data })
}
// /**
// * @description 购物车数量
// */
// export function cartListApi(id, data) {
// return request.get(`count`, { params: data })
// }
/**
* @description 未支付订单列表
*/
export function groupOrderListApi(id, data) {
return request.get(`admin/${id}/group_order_list`, { params: data })
}
/**
* @description 提单
*/
export function orderLadingApi(data) {
return request.get(`order_lading`, { params: data })
}

288
src/components/pay.vue Normal file
View File

@ -0,0 +1,288 @@
<script setup>
import { ref, watch, nextTick } from "vue";
import { orderCreateApi, orderStatusApi, orderPayApi } from "@/api/store.js";
import { ElMessage } from "element-plus";
const drawer = ref(false);
const active = ref(1);
const input = ref("");
const codeRef = ref("");
const cancelClick = () => {
beforeClose();
};
const open = () => {
nextTick(() => {
setTimeout(() => {
loading.value = false;
input.value = "";
reLoad.value = true;
codeRef.value.focus();
}, 300);
});
};
const form = ref({});
const cart_id = ref([]);
const setForm = (e) => {
form.value = e.data;
cart_id.value = e.cart_id;
};
const setRePay = (e) => {
form.value.total_price = e.price;
order_id.value = e.order_id;
};
const emit = defineEmits(["paySuccess"]);
const reLoad = ref(false);
let timeout = 0; //
const order_id = ref("");
//
const handleEnter = () => {
loading.value = true;
codeRef.value.blur();
if (order_id.value) orderPay(order_id.value);
else
orderCreateApi({
address_id: "",
key: form.value.key,
cart_id: cart_id.value,
pay_type: "micropay",
auth_code: input.value,
source: 300,
})
.then((res) => {
if (res.status==200&& res.message=='支付成功') {
drawer.value = false;
ElMessage({
message: res.message,
type: "success",
});
beforeClose();
} else {
order_id.value = res.data.group_order_id;
count.value = 0;
timeout = 0;
getOrderStatus(res.data.group_order_sn);
}
})
.catch((err) => {
loading.value = false;
nextTick(() => {
codeRef.value.focus();
});
});
};
const orderPay = (id) => {
orderPayApi(id, {
type: "micropay",
auth_code: input.value,
})
.then((res) => {
if (res.data.status == "success") {
drawer.value = false;
ElMessage({
message: res.message,
type: "success",
});
beforeClose();
} else {
order_id.value = res.data.group_order_id;
count.value = 0;
timeout = 0;
getOrderStatus(res.data.group_order_sn);
}
})
.catch((err) => {
input.value = "";
loading.value = false;
nextTick(() => {
codeRef.value.focus();
});
});
};
const count = ref(0); // 3, 3,
const getOrderStatus = (id) => {
count.value++;
timeout+=5000;
orderStatusApi({
order_sn: id,
})
.then((res) => {
if (res.data.paid == 1 || res.message == "支付成功") {
ElMessage({
message: res.message,
type: "success",
});
beforeClose();
} else {
ElMessage({
message: res.message,
type: "error",
});
input.value = "";
loading.value = false;
nextTick(() => {
codeRef.value.focus();
});
}
})
.catch((err) => {
if (reLoad.value && count.value < 3)
setTimeout(() => {
getOrderStatus(id);
}, timeout);
else {
input.value = "";
loading.value = false;
nextTick(() => {
codeRef.value.focus();
});
}
});
};
const beforeClose = () => {
reLoad.value = false;
loading.value = false;
input.value = "";
codeRef.value.blur();
emit("paySuccess");
drawer.value = false;
};
const loading = ref(false);
defineExpose({
drawer,
setForm,
setRePay
});
</script>
<template>
<el-drawer
:size="800"
v-model="drawer"
direction="rtl"
@open="open"
:before-close="beforeClose"
>
<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">{{ form.total_price }}</span>
</div>
<div
v-loading="loading"
element-loading-text="支付中"
class="card1"
v-if="active == 1"
>
<el-input
ref="codeRef"
v-model="input"
autofocus
class="code-input"
placeholder="请点击输入框聚焦扫码或输入编码号"
@keyup.enter="handleEnter"
/>
<div class="tips"></div>
</div>
<div class="card2" v-else>
<div>现金收款正在开发中</div>
<!-- <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>
<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

@ -1,6 +1,10 @@
<script setup>
import myHeader from "./myHeader.vue";
import myAside from "./myAside.vue";
import { initWS } from "@/utils/ws";
const ws = initWS('eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiIxMjcuMC4wLjE6ODMyNCIsImF1ZCI6IjEyNy4wLjAuMTo4MzI0IiwiaWF0IjoxNzEyMTI4NDczLCJuYmYiOjE3MTIxMjg0NzMsImV4cCI6MTcxMjE1MDA3MywianRpIjpbMzAsIm1lciJdfQ.1HO_Ax3wxW-gloTRn6Psy4KYEdv8kuEqlgTJSl4G4Wk');
</script>
<template>

View File

@ -21,6 +21,10 @@ const navTo = (name) => {
<el-icon size="30"><DataLine /></el-icon>
<div>订单</div>
</div>
<div class="list-item" :class="{'active': route.name=='shop'}" @click="navTo('shop')">
<el-icon size="30"><ShoppingBag /></el-icon>
<div>商品</div>
</div>
</div>
</template>
@ -35,6 +39,7 @@ const navTo = (name) => {
width: 4.5rem;
height: 4.5rem;
border-radius: 0.7rem;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;

View File

@ -36,7 +36,7 @@ const onLogout = () => {
<template>
<div class="my-card">
<div class="card-header">
<el-image
<el-image loading="lazy"
src="https://multi-store.crmeb.net/uploads/attach/store/2024/03/20240314/6cea2e0fd02480fc6fb62a9783a9ac43.png"
></el-image>
<div class="card-title">里海收银系统</div>

View File

@ -19,6 +19,11 @@ const routes = [
path: '/order',
name: 'order',
component: () => import('@/views/order/index.vue'),
},
{
path: '/shop',
name: 'shop',
component: () => import('@/views/shop/index.vue'),
}
]
},
@ -27,6 +32,12 @@ const routes = [
name: 'login',
component: () => import('@/views/login/index.vue'),
},
// 注意:通配符路由要放在最后
{
path: '/:catchAll(.*)',
name: 'notFound',
component: () => import('@/views/notFound/index.vue') // 使用 404 页面组件
}
];
const router = createRouter({

View File

@ -5,7 +5,7 @@ import { useUserStore } from "../store/user";
const request = axios.create({
baseURL: import.meta.env.VITE_BASE_URL + '/api',
timeout: 5000
timeout: 10000
})
// 请求拦截器
@ -30,7 +30,7 @@ request.interceptors.request.use(
request.interceptors.response.use(
response => {
// 对响应数据做些什么,例如解析数据、统一处理错误等
if (response.data.status === 401 || response.data.status === 4000) {
if (response.data.status === 401 || response.data.status === 40000) {
const router = useRouter();
ElMessage({
message: response.data.message,
@ -41,7 +41,7 @@ request.interceptors.response.use(
userStore.setUserInfo({});
userStore.setToken('');
router.push('/login');
}, 1000);
}, 800);
}
if (response.data.status === 400) {
ElMessage({
@ -55,7 +55,7 @@ request.interceptors.response.use(
// 处理响应错误
console.error(error);
ElMessage({
message: error,
message: error.response?.data?.message || error,
type: 'error',
})
return Promise.reject(error);

32
src/utils/ws.js Normal file
View File

@ -0,0 +1,32 @@
export const initWS = (token)=>{
let ws = new WebSocket('ws://192.168.1.22:8324?type=mer&token='+token);
ws.onopen = function (e) {
console.log('WebSocket 连接已建立');
// 开始发送心跳
startHeartbeat();
}
ws.onclose = () => {
console.log('WebSocket 连接已关闭');
// 停止发送心跳
stopHeartbeat();
};
let heartbeatTimer = null;
// 开始发送心跳
const startHeartbeat = () => {
heartbeatTimer = setInterval(() => {
console.log('发送心跳消息');
ws.send(JSON.stringify({ type: 'heartbeat' }));
}, 30*1000);
}
// 停止发送心跳
const stopHeartbeat = () => {
clearInterval(heartbeatTimer);
}
return ws;
}

View File

@ -43,7 +43,7 @@ const getList = () => {
};
getList();
const emit = defineEmits(["goPay"]);
const emit = defineEmits(["goPay","editAttr"]);
const goPay = () => {
emit("goPay");
@ -60,9 +60,20 @@ const changeCartNum = (val, old) => {
});
};
const editAttr = (data)=>{
emit("editPupop", data);
}
const editItem = (id, data)=>{
cartChangeApi(id, data).then((res) => {
getList()
});
}
defineExpose({
getList,
list,
editItem
});
</script>
@ -79,7 +90,7 @@ defineExpose({
<div class="order-list">
<el-empty v-if="list.length == 0" description="请点击右侧添加商品" />
<div v-else class="order-item" v-for="(item, index) in list" :key="index">
<el-image
<el-image loading="lazy"
class="order-item-img"
:src="
(item.productAttr && item.productAttr.image) || item.product.image
@ -90,7 +101,9 @@ defineExpose({
<div class="title">{{ item.spu.store_name }}</div>
<div class="delete" @click="deleteOne(item.cart_id)">删除</div>
</div>
<div class="order-item-sku">设备规格</div>
<div class="order-item-sku">
<span style="display: flex;align-items: center;" @click="editAttr(item)">商品规格: {{ item.productAttr.sku || '默认规格' }}<el-icon size="16" style="margin-left: 0.2rem;"><ArrowDown /></el-icon></span>
</div>
<div class="order-item-price">
<div>
¥<span>{{ item.productAttr.price }}</span>
@ -127,11 +140,11 @@ defineExpose({
</div>
</div>
<div class="update-price">
<el-button class="btn" type="primary">改价</el-button>
<!-- <el-button class="btn" type="primary">改价</el-button> -->
</div>
</div>
<div class="order-btn">
<el-button class="btn" type="primary" @click="goPay"
<el-button class="btn" type="primary" @click="goPay" :disabled="list.length == 0"
>立即结账</el-button
>
</div>
@ -203,6 +216,7 @@ defineExpose({
}
}
.order-item-sku {
cursor: pointer;
font-size: 0.8rem;
color: #999;
}

View File

@ -1,182 +0,0 @@
<script setup>
import { ref, watch, nextTick } from "vue";
import { orderCreateApi, orderStatusApi } from "@/api/store.js";
import { ElMessage} from 'element-plus';
const drawer = ref(false);
const active = ref(1);
const input = ref("");
const codeRef = ref("");
const cancelClick = () => {
codeRef.value.blur();
drawer.value = false;
};
const open = ()=>{
nextTick(()=>{
setTimeout(()=>{
loading.value = false;
input.value = "";
codeRef.value.focus();
},300)
})
}
const form = ref({});
const cart_id = ref([]);
const setForm = (e) => {
form.value = e.data;
cart_id.value = e.cart_id;
console.log(e, cart_id.value);
}
const emit = defineEmits(['paySuccess']);
//
const handleEnter = ()=>{
loading.value = true;
codeRef.value.blur();
orderCreateApi({
address_id: "",
key: form.value.key,
cart_id: cart_id.value,
pay_type: 'micropay',
auth_code: input.value,
source: 300
}).then(res=>{
if(res.data.status=='success'){
drawer.value = false;
ElMessage({
message: '支付成功',
type: 'success',
})
loading.value = false;
input.value = "";
emit('paySuccess');
}else {
getOrderStatus(res.data.result.order_id)
}
})
}
const getOrderStatus = (id)=>{
orderStatusApi(id).then(res=>{
if(res.data.paid==1){
ElMessage({
message: '支付成功',
type: 'success',
})
loading.value = false;
}else {
ElMessage({
message: '支付失败',
type: 'error',
})
loading.value = false;
}
}).catch(err=>{
setTimeout(()=>{
getOrderStatus(id);
}, 5000)
})
}
const loading = ref(false);
defineExpose({
drawer,
setForm
});
</script>
<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;">{{ form.total_price }}</span></div>
<div v-loading="loading" element-loading-text="支付中" class="card1" v-if="active==1">
<el-input ref="codeRef" v-model="input" autofocus class="code-input" placeholder="请点击输入框聚焦扫码或输入编码号" @keyup.enter="handleEnter"/>
<div class="tips"></div>
</div>
<div class="card2" v-else>
<div>现金收款正在开发中</div>
<!-- <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>
<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

@ -1,6 +1,7 @@
<script setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'
import { getAttrValue } from "@/api/shop.js"
const dialogVisible = ref(false)
@ -8,15 +9,50 @@ const show = (e)=>{
dialogVisible.value = e;
}
const form = ref({});
const active = ref(null);
const loading = ref(false);
const mode = ref('add');
const editForm = ref({});
const setForm = (data, type='add')=>{
mode.value = type;
if(type == 'add'){
form.value = data;
active.value = data.attr[0];
}
else {
loading.value = true;
editForm.value = data;
getAttrValue(data.product_id).then(res=>{
res.data.attrValue = JSON.parse(JSON.stringify(res.data.attr))
res.data.attr = Object.keys(res.data.sku)
form.value = res.data;
active.value = res.data.attr[0];
loading.value = false;
}).catch(err=>{
loading.value = false;
})
}
}
const emit = defineEmits(['changeItem'])
const changeItem = ()=>{
emit('changeItem', item, change);
dialogVisible = false
if(mode.value == 'add') emit('changeItem', form.value, active.value);
else emit('editItem', editForm.value.cart_id, {
cart_num: editForm.value.cart_num,
product_attr_unique: form.value.sku[active.value].unique,
});
dialogVisible.value = false
}
const changeActive = (item)=>{
active.value = item;
}
defineExpose({
show
show,
setForm
})
</script>
@ -27,30 +63,28 @@ defineExpose({
title="商品规格"
width="650"
>
<div class="shop">
<div class="shop-info">
<div class="shop" v-loading="loading">
<div class="shop-info" v-if="form.sku">
<div class="shop-info-left">
<el-image src="https://multi-store.crmeb.net/uploads/attach/2024/03/01/8149b6d6bfc22ad622ec478528310c43.jpg"></el-image>
<el-image loading="lazy" :src="form.sku[active]?.image || form.image"></el-image>
</div>
<div class="shop-info-right">
<div class="shop-info-right-top">香奈儿Chanel五号香水经典50ml礼盒装送女 香奈儿Chanel五号香水经典50ml礼盒装送女 香奈儿Chanel五号香水经典50ml礼盒装送女香奈儿Chanel五号香水经典50ml礼盒装送女</div>
<div class="shop-info-right-center">库存100</div>
<div class="shop-info-right-price">¥<span>{{0.10}}</span></div>
<div class="shop-info-right-top">{{ form.store_name }}</div>
<div class="shop-info-right-center">库存{{ form.sku[active]?.stock || 0 }}</div>
<div class="shop-info-right-price">¥<span>{{form.sku[active]?.price || form.price}}</span></div>
</div>
</div>
<div class="shop-sku">
<div class="title">产品</div>
<div class="sku">
<el-space wrap :size="20">
<div class="sku-item sku-item_active"></div>
<div class="sku-item"></div>
<div class="sku-item"></div>
<div class="sku-item " :class="{'sku-item_active': active==item}" @click="changeActive(item)" v-for="(item, index) in form.attr" :key="index">{{ item || '默认规格' }}</div>
</el-space>
</div>
</div>
</div>
<template #footer>
<template #footer v-if="!(mode != 'add' && form.attr && form.attr.length==1)">
<div class="dialog-footer">
<el-button class="ok-btn" type="primary" @click="changeItem">
确定
@ -115,6 +149,7 @@ defineExpose({
}
.sku{
.sku-item{
cursor: pointer;
padding: 0.5rem 1rem;
background-color: #f5f5f5;
border-radius: 3rem;

View File

@ -4,28 +4,29 @@ import { ref, watch } from "vue";
const props = defineProps({
storeList: {
type: Array,
default:()=>[]
}
})
default: () => [],
},
});
const emit = defineEmits(['getStoreList'])
const emit = defineEmits(["getStoreList", "changeItem", "loadMore"]);
const bar_code = ref('');
const bar_code = ref("");
const loadMore = () => {
console.log("loadMore");
emit("loadMore", {
bar_code: bar_code.value,
});
};
const changeItem = (item) => {
emit('changeItem', item)
}
emit("changeItem", item);
};
const handleEnter = () => {
emit('getStoreList', {
bar_code: bar_code.value
})
}
emit("getStoreList", {
bar_code: bar_code.value,
});
};
</script>
<template>
@ -54,14 +55,23 @@ const handleEnter = () => {
style="overflow: auto"
>
<el-space wrap :size="20">
<div class="shop-item" v-for="(item, index) in storeList" :key="index" @click="changeItem(item)">
<el-image
:src="item.image"
></el-image>
<div
class="shop-item"
v-for="(item, index) in storeList"
:key="index"
@click="changeItem(item)"
>
<el-image loading="lazy" :src="item.image"></el-image>
<div class="shop-name">{{ item.store_name }}</div>
<div class="shop-price">
¥<span>{{ item.price }}</span>
</div>
<div class="no-stock" v-if="item.stock==0">
<div>
<span>暂无</span>
<span>库存</span>
</div>
</div>
</div>
</el-space>
</div>
@ -130,6 +140,8 @@ const handleEnter = () => {
display: flex;
justify-content: space-between;
flex-direction: column;
position: relative;
overflow: hidden;
.el-image {
border-radius: 0.5rem;
@ -161,6 +173,29 @@ const handleEnter = () => {
color: #fff;
}
}
.no-stock {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba($color: #000000, $alpha: 0.2);
display: flex;
justify-content: center;
align-items: center;
div{
background-color: #4e4e4e;
color: #fff;
border-radius: 50%;
width: 5rem;
height: 5rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
}
}
}

View File

@ -3,9 +3,10 @@ import order from "./component/order.vue";
import shop from "./component/shop.vue";
import padding from "./component/padding.vue";
import pupop from "./component/pupop.vue";
import pay from "./component/pay.vue";
import pay from "@/components/pay.vue";
import { ref, nextTick } from "vue";
import { storeListApi, cartCreateApi, orderCheckApi } from "@/api/store.js";
import { cartCreateApi, orderCheckApi } from "@/api/store.js";
import { storeListApi } from "@/api/shop.js";
import { useUserStore } from "@/store/user.js";
const pupopRef = ref(null);
@ -18,7 +19,7 @@ const storeList = ref([]);
const userStore = useUserStore();
const where = ref({
page: 1,
page: 0,
limit: 30,
});
const getStoreList = (data) => {
@ -28,21 +29,30 @@ const getStoreList = (data) => {
...data,
};
storeListApi(userStore.userInfo.service.mer_id, where.value).then((res) => {
storeList.value = res.data.list.map((item) => {
if(res.data.list.length < where.value.limit) loadEnd.value = true;
let list = 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]);
storeList.value = storeList.value.concat(list);
if (data.bar_code && storeList.value.length == 1 && isAllDigits(data.bar_code)) {
cartAddInfo(storeList.value[0], storeList.value[0].attr[0]);
}
});
};
const loadEnd = ref(false);
const loadMore = (data)=>{
if(loadEnd.value) return;
where.value.page++;
getStoreList(data);
}
function isAllDigits(str) {
return /^\d+$/.test(str);
}
const changeItem = (item, change = "") => {
const cartAddInfo = (item, change = "") => {
// console.log(item, change);
let q = {
is_new: 0,
@ -60,6 +70,24 @@ const changeItem = (item, change = "") => {
});
};
const changeItem = (item, change) => {
if(!item.attr || item.attr.length == 0 || item.attr.length==1) return cartAddInfo(item, item.attr[0] ? item.attr[0] : '');
else if(change) return cartAddInfo(item, change);
else {
pupopRef.value.setForm(item, 'add');
pupopRef.value.show(true);
}
}
const editItem = (id, data) => {
orderRef.value.editItem(id, data);
}
const editPupop = (item) => {
pupopRef.value.setForm(item, 'edit');
pupopRef.value.show(true);
}
//
const checkOut = () => {
let cart_id = orderRef.value.list.map((item) => item.cart_id);
@ -76,7 +104,7 @@ const checkOut = () => {
});
};
getStoreList();
// getStoreList();
const goPay = () => {
checkOut();
@ -87,14 +115,11 @@ const paySuccess = ()=>{
orderRef.value.getList();
}
nextTick(() => {
// pupopRef.value.show(true);
});
</script>
<template>
<div class="my-card">
<order ref="orderRef" @goPay="goPay" />
<order ref="orderRef" @goPay="goPay" @editPupop="editPupop"/>
<padding />
<shop
ref="shopRef"
@ -102,8 +127,9 @@ nextTick(() => {
:storeList="storeList"
@getStoreList="getStoreList"
@changeItem="changeItem"
@loadMore="loadMore"
/>
<pupop ref="pupopRef" />
<pupop ref="pupopRef" @changeItem="changeItem" @editItem="editItem"/>
<pay ref="payRef" @paySuccess="paySuccess"/>
</div>
</template>

View File

@ -44,6 +44,12 @@ const onLogin = () => {
.then((res) => {
userStore.setToken(res.data.token);
info().then(({data}) => {
if(!data.service){
return ElMessage({
message: "请联系管理员开通服务",
type: "error",
})
}
userStore.setUserInfo(data);
router.push("/");
});

View File

@ -0,0 +1,24 @@
<script setup>
const back = () => {
window.location = "/"
}
</script>
<template>
<div style="width: 100vw; height: 100vh">
<div style="display: flex; justify-content: center; padding-top: 20vh">
<el-image loading="lazy"
style="width: 30rem; height: 20rem"
src="https://file.iviewui.com/iview-pro/icon-404-color.svg"
></el-image>
<div style="display: flex;flex-direction: column;justify-content: center;padding-left: 3rem;">
<div style="font-size: 5rem; font-weight: bold">404</div>
<div style="padding-bottom: 1rem">您的页面没有找到</div>
<el-button type="primary" @click="back">返回首页</el-button>
</div>
</div>
</div>
</template>
<style scoped lang="scss"></style>

View File

@ -1,60 +1,169 @@
<script setup>
import { ref } from 'vue'
import { orderListApi } from "@/api/store.js"
import { ref } from "vue";
import {
orderListApi,
groupOrderListApi,
orderStatusApi,
orderLadingApi,
} from "@/api/store.js";
import { useUserStore } from "@/store/user.js";
import pay from "@/components/pay.vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const orderList = ref([])
const userStore = useUserStore();
const orderList = ref([]);
const router = useRouter();
const tabPosition = ref(1); // 1-, 2-
const payRef = ref(null);
const where = ref({
page: 1,
limit: 20,
status: -2
})
});
const loading = ref(false)
const total = ref(0)
const loading = ref(false);
const total = ref(0);
const getOrderList = () => {
loading.value = true;
orderListApi(where.value).then((res) => {
if (tabPosition.value == 1) where.value.paid = null;
if (tabPosition.value == 2) where.value.paid = 0;
orderListApi(userStore.userInfo.service.mer_id, where.value).then((res) => {
orderList.value = res.data.list;
total.value = res.data.count;
loading.value = false;
})
}
});
};
getOrderList()
getOrderList();
const changeTabPosition = (e) => {
where.value.page = 1;
getOrderList();
};
const prevClick = (e) => {
where.value.page = e;
getOrderList();
}
};
const nextClick = (e) => {
where.value.page = e;
getOrderList();
}
};
const currentChange = (e) => {
where.value.page = e;
getOrderList();
};
const paySuccess = () => {
getOrderList();
};
const rePay = (row) => {
payRef.value.setRePay({
price: row.pay_price,
order_id: row.group_order_id,
});
payRef.value.drawer = true;
};
const getOrderStatus = (id) => {
orderStatusApi({
order_sn: id,
})
.then((res) => {
if (res.data.paid == 1 || res.message == "支付成功") {
ElMessage({
message: res.message,
type: "success",
});
getOrderList();
} else {
ElMessage({
message: res.message,
type: "error",
});
}
})
.catch((err) => {});
};
const orderLadingSn = ref('')
const orderLading = () => {
dialogVisible.value = false;
orderLadingApi({
order_sn: orderLadingSn.value,
}).then((res) => {
ElMessage({
message: res.message,
type: "success",
});
router.push({
name: "home",
});
});
};
const dialogVisible = ref(false);
const orderLadingComfirm = (order_sn)=>{
orderLadingSn.value = order_sn;
dialogVisible.value = true;
}
const goHome = ()=>{
router.push({
name: "home",
});
}
</script>
<template>
<div v-loading="loading" element-loading-text="加载中" class="my-order">
<el-table :data="orderList" stripe style="width: 100%">
<el-radio-group
v-model="tabPosition"
style="margin-bottom: 30px"
@change="changeTabPosition"
>
<el-radio-button :value="1">全部</el-radio-button>
<el-radio-button :value="2">未支付</el-radio-button>
</el-radio-group>
<el-table :data="orderList" style="width: 100%">
<el-table-column prop="group_order_id" label="ID" width="100" />
<el-table-column prop="order_sn" label="订单号" min-width="250" />
<el-table-column prop="order_sn" label="订单号" width="260" />
<el-table-column prop="total_price" label="订单金额" />
<el-table-column prop="paid" label="支付状态">
<template #default="scope">
<span v-if="scope.row.paid == 1">已支付</span>
<span v-else>未支付</span>
<span v-else style="color: #ff4a00">未支付</span>
</template>
</el-table-column>
<el-table-column prop="create_time" label="订单创建时间" />
<el-table-column prop="pay_time" label="订单支付时间">
<template #default="scope">
<span v-if="scope.row.pay_time">{{ scope.row.pay_time }}</span>
<div v-else class="flex">
<el-button type="primary" link @click="rePay(scope.row)"
>重新支付</el-button
>
<el-button
type="primary"
link
@click="getOrderStatus(scope.row.order_sn)"
>检测状态</el-button
>
<el-button
type="primary"
link
@click="orderLadingComfirm(scope.row.order_sn)"
>提单</el-button
>
</div>
</template>
</el-table-column>
<el-table-column prop="pay_time" label="支付时间" />
</el-table>
<el-pagination
:page-size="where.limit"
@ -64,6 +173,24 @@ const currentChange = (e) => {
@next-click="nextClick"
@current-change="currentChange"
/>
<pay ref="payRef" @paySuccess="paySuccess" />
<el-dialog
v-model="dialogVisible"
title="提示"
width="500"
>
<span>提单前请清空购物车, 避免提单的商品与购物车商品混合, 请确保购物车内无数据后再进行提单</span>
<template #footer>
<div class="dialog-footer">
<el-button @click="goHome">
前去查看购物车
</el-button>
<el-button type="primary" @click="orderLading">
确认提单
</el-button>
</div>
</template>
</el-dialog>
</div>
</template>

178
src/views/shop/index.vue Normal file
View File

@ -0,0 +1,178 @@
<script setup>
import { ref } from "vue";
import { storeListApi, userFreeTrialApi } from "@/api/shop.js";
import { useUserStore } from "@/store/user.js";
import { ElMessage } from "element-plus";
const orderList = ref([]);
const userStore = useUserStore();
const where = ref({
page: 1,
limit: 15,
});
const loading = ref(false);
const total = ref(0);
const getOrderList = () => {
loading.value = true;
storeListApi(userStore.userInfo.service.mer_id, where.value).then((res) => {
orderList.value = res.data.list;
total.value = res.data.count;
loading.value = false;
});
};
getOrderList();
const prevClick = (e) => {
where.value.page = e;
getOrderList();
};
const nextClick = (e) => {
where.value.page = e;
getOrderList();
};
const currentChange = (e) => {
where.value.page = e;
getOrderList();
};
const dialogFormVisible = ref(false);
const form = ref({});
const edit = (row) => {
form.value = row;
dialogFormVisible.value = true;
};
const submitUpdate = () => {
let obj = {
attr: form.value.attr||[],
attrValue: form.value.attrValue,
mer_cate_id: form.value.merCateId || [],
spec_type: form.value.spec_type,
is_stock: 1,
};
userFreeTrialApi(form.value.product_id, obj).then((res) => {
ElMessage({
message: res.message,
type: "success",
})
dialogFormVisible.value = false;
getOrderList();
}).catch(err=>{
ElMessage({
message: err,
type: "error",
})
});
};
</script>
<template>
<div v-loading="loading" element-loading-text="加载中" class="my-shop">
<el-table :data="orderList" style="width: 100%">
<el-table-column prop="product_id" label="ID" width="100" />
<el-table-column prop="image" label="图片" width="120">
<template #default="scope">
<el-image loading="lazy"
style="width: 60px; height: 60px"
:src="scope.row.image"
></el-image>
</template>
</el-table-column>
<el-table-column prop="store_name" label="商品名称" width="500" />
<el-table-column prop="price" label="售价" />
<el-table-column prop="stock" label="库存" />
<el-table-column label="操作" width="120">
<template #default="scope">
<el-button type="primary" link @click="edit(scope.row)"
>编辑</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
:page-size="where.limit"
layout="prev, pager, next"
:total="total"
@prev-click="prevClick"
@next-click="nextClick"
@current-change="currentChange"
/>
<el-dialog v-model="dialogFormVisible" title="编辑商品库存" width="800">
<el-table
v-if="form.attrValue"
:data="form.attrValue"
stripe
style="width: 100%"
>
<el-table-column prop="image" label="图片" width="180">
<template #default="scope">
<el-image loading="lazy"
style="width: 5rem; height: 5rem"
:src="scope.row.image || form.image"
/>
</template>
</el-table-column>
<el-table-column prop="sku" label="名称" width="180">
<template #default="scope">
<span>{{ scope.row.sku || form.store_name }}</span>
</template>
</el-table-column>
<el-table-column prop="price" label="价格" />
<el-table-column prop="stock" label="库存">
<template #default="scope">
<el-input-number
v-model="scope.row.stock"
step-strictly
:min="0"
:step="1"
/>
</template>
</el-table-column>
</el-table>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button type="primary" @click="submitUpdate"> 确定 </el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<style lang="scss" scoped>
.my-shop {
background-color: #fff;
border-radius: 1.2rem;
box-sizing: border-box;
padding: 1rem;
overflow-y: scroll;
}
/* 修改滚动条的样式 */
::-webkit-scrollbar {
width: 5px; /* 设置滚动条的宽度 */
}
/* 设置滚动条的轨道样式 */
::-webkit-scrollbar-track {
background-color: #f1f1f1; /* 设置轨道的背景色 */
margin: 20px 0;
}
/* 设置滚动条的滑块样式 */
::-webkit-scrollbar-thumb {
background-color: #ccc; /* 设置滑块的背景色 */
border-radius: 5px; /* 设置滑块的圆角 */
}
/* 设置滚动条鼠标悬停时的滑块样式 */
::-webkit-scrollbar-thumb:hover {
background-color: #999; /* 设置鼠标悬停时滑块的背景色 */
}
</style>