This commit is contained in:
parent
176067a7bf
commit
00567505c2
|
@ -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'
|
# VITE_BASE_URL = 'https://crmeb-test.shop.lihaink.cn'
|
|
@ -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)
|
||||||
|
}
|
|
@ -1,12 +1,5 @@
|
||||||
import request from '@/utils/axios.js'
|
import request from '@/utils/axios.js'
|
||||||
|
|
||||||
/**
|
|
||||||
* @description 商品列表
|
|
||||||
*/
|
|
||||||
export function storeListApi(id, data) {
|
|
||||||
return request.get(`server/${id}/product/lst`, { params: data })
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description 加入购物车
|
* @description 加入购物车
|
||||||
*/
|
*/
|
||||||
|
@ -22,7 +15,7 @@ export function cartListApi(data) {
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description 购物数量加减
|
* @description 编辑购物车数据
|
||||||
*/
|
*/
|
||||||
export function cartChangeApi(id, data) {
|
export function cartChangeApi(id, data) {
|
||||||
return request.post(`user/cart/change/${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)
|
return request.post(`v2/order/create`, data)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description 重新支付
|
||||||
|
*/
|
||||||
|
export function orderPayApi(id, data) {
|
||||||
|
return request.post(`order/pay/${id}`, data)
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description 订单状态
|
* @description 订单状态
|
||||||
*/
|
*/
|
||||||
export function orderStatusApi(id) {
|
export function orderStatusApi(data) {
|
||||||
return request.get(`micropay_query`, { params: { order_id: id } })
|
return request.get(`micropay_query`, { params: data })
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description 订单列表
|
* @description 订单列表
|
||||||
*/
|
*/
|
||||||
export function orderListApi(data) {
|
export function orderListApi(id, data) {
|
||||||
return request.get(`/order/list`, { params: data })
|
return request.get(`admin/${id}/order_list`, { params: data })
|
||||||
}
|
}
|
||||||
|
|
||||||
// /**
|
/**
|
||||||
// * @description 购物车数量
|
* @description 未支付订单列表
|
||||||
// */
|
*/
|
||||||
// export function cartListApi(id, data) {
|
export function groupOrderListApi(id, data) {
|
||||||
// return request.get(`count`, { params: data })
|
return request.get(`admin/${id}/group_order_list`, { params: data })
|
||||||
// }
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description 提单
|
||||||
|
*/
|
||||||
|
export function orderLadingApi(data) {
|
||||||
|
return request.get(`order_lading`, { params: data })
|
||||||
|
}
|
|
@ -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>
|
|
@ -1,6 +1,10 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import myHeader from "./myHeader.vue";
|
import myHeader from "./myHeader.vue";
|
||||||
import myAside from "./myAside.vue";
|
import myAside from "./myAside.vue";
|
||||||
|
import { initWS } from "@/utils/ws";
|
||||||
|
|
||||||
|
const ws = initWS('eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiIxMjcuMC4wLjE6ODMyNCIsImF1ZCI6IjEyNy4wLjAuMTo4MzI0IiwiaWF0IjoxNzEyMTI4NDczLCJuYmYiOjE3MTIxMjg0NzMsImV4cCI6MTcxMjE1MDA3MywianRpIjpbMzAsIm1lciJdfQ.1HO_Ax3wxW-gloTRn6Psy4KYEdv8kuEqlgTJSl4G4Wk');
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
|
@ -21,6 +21,10 @@ const navTo = (name) => {
|
||||||
<el-icon size="30"><DataLine /></el-icon>
|
<el-icon size="30"><DataLine /></el-icon>
|
||||||
<div>订单</div>
|
<div>订单</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -35,6 +39,7 @@ const navTo = (name) => {
|
||||||
width: 4.5rem;
|
width: 4.5rem;
|
||||||
height: 4.5rem;
|
height: 4.5rem;
|
||||||
border-radius: 0.7rem;
|
border-radius: 0.7rem;
|
||||||
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
|
@ -36,7 +36,7 @@ const onLogout = () => {
|
||||||
<template>
|
<template>
|
||||||
<div class="my-card">
|
<div class="my-card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<el-image
|
<el-image loading="lazy"
|
||||||
src="https://multi-store.crmeb.net/uploads/attach/store/2024/03/20240314/6cea2e0fd02480fc6fb62a9783a9ac43.png"
|
src="https://multi-store.crmeb.net/uploads/attach/store/2024/03/20240314/6cea2e0fd02480fc6fb62a9783a9ac43.png"
|
||||||
></el-image>
|
></el-image>
|
||||||
<div class="card-title">里海收银系统</div>
|
<div class="card-title">里海收银系统</div>
|
||||||
|
|
|
@ -19,7 +19,12 @@ const routes = [
|
||||||
path: '/order',
|
path: '/order',
|
||||||
name: 'order',
|
name: 'order',
|
||||||
component: () => import('@/views/order/index.vue'),
|
component: () => import('@/views/order/index.vue'),
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
path: '/shop',
|
||||||
|
name: 'shop',
|
||||||
|
component: () => import('@/views/shop/index.vue'),
|
||||||
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -27,6 +32,12 @@ const routes = [
|
||||||
name: 'login',
|
name: 'login',
|
||||||
component: () => import('@/views/login/index.vue'),
|
component: () => import('@/views/login/index.vue'),
|
||||||
},
|
},
|
||||||
|
// 注意:通配符路由要放在最后
|
||||||
|
{
|
||||||
|
path: '/:catchAll(.*)',
|
||||||
|
name: 'notFound',
|
||||||
|
component: () => import('@/views/notFound/index.vue') // 使用 404 页面组件
|
||||||
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
|
|
|
@ -5,7 +5,7 @@ import { useUserStore } from "../store/user";
|
||||||
|
|
||||||
const request = axios.create({
|
const request = axios.create({
|
||||||
baseURL: import.meta.env.VITE_BASE_URL + '/api',
|
baseURL: import.meta.env.VITE_BASE_URL + '/api',
|
||||||
timeout: 5000
|
timeout: 10000
|
||||||
})
|
})
|
||||||
|
|
||||||
// 请求拦截器
|
// 请求拦截器
|
||||||
|
@ -30,7 +30,7 @@ request.interceptors.request.use(
|
||||||
request.interceptors.response.use(
|
request.interceptors.response.use(
|
||||||
response => {
|
response => {
|
||||||
// 对响应数据做些什么,例如解析数据、统一处理错误等
|
// 对响应数据做些什么,例如解析数据、统一处理错误等
|
||||||
if (response.data.status === 401 || response.data.status === 4000) {
|
if (response.data.status === 401 || response.data.status === 40000) {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: response.data.message,
|
message: response.data.message,
|
||||||
|
@ -41,7 +41,7 @@ request.interceptors.response.use(
|
||||||
userStore.setUserInfo({});
|
userStore.setUserInfo({});
|
||||||
userStore.setToken('');
|
userStore.setToken('');
|
||||||
router.push('/login');
|
router.push('/login');
|
||||||
}, 1000);
|
}, 800);
|
||||||
}
|
}
|
||||||
if (response.data.status === 400) {
|
if (response.data.status === 400) {
|
||||||
ElMessage({
|
ElMessage({
|
||||||
|
@ -55,7 +55,7 @@ request.interceptors.response.use(
|
||||||
// 处理响应错误
|
// 处理响应错误
|
||||||
console.error(error);
|
console.error(error);
|
||||||
ElMessage({
|
ElMessage({
|
||||||
message: error,
|
message: error.response?.data?.message || error,
|
||||||
type: 'error',
|
type: 'error',
|
||||||
})
|
})
|
||||||
return Promise.reject(error);
|
return Promise.reject(error);
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
|
@ -43,7 +43,7 @@ const getList = () => {
|
||||||
};
|
};
|
||||||
getList();
|
getList();
|
||||||
|
|
||||||
const emit = defineEmits(["goPay"]);
|
const emit = defineEmits(["goPay","editAttr"]);
|
||||||
|
|
||||||
const goPay = () => {
|
const goPay = () => {
|
||||||
emit("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({
|
defineExpose({
|
||||||
getList,
|
getList,
|
||||||
list,
|
list,
|
||||||
|
editItem
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -79,7 +90,7 @@ defineExpose({
|
||||||
<div class="order-list">
|
<div class="order-list">
|
||||||
<el-empty v-if="list.length == 0" description="请点击右侧添加商品" />
|
<el-empty v-if="list.length == 0" description="请点击右侧添加商品" />
|
||||||
<div v-else class="order-item" v-for="(item, index) in list" :key="index">
|
<div v-else class="order-item" v-for="(item, index) in list" :key="index">
|
||||||
<el-image
|
<el-image loading="lazy"
|
||||||
class="order-item-img"
|
class="order-item-img"
|
||||||
:src="
|
:src="
|
||||||
(item.productAttr && item.productAttr.image) || item.product.image
|
(item.productAttr && item.productAttr.image) || item.product.image
|
||||||
|
@ -90,7 +101,9 @@ defineExpose({
|
||||||
<div class="title">{{ item.spu.store_name }}</div>
|
<div class="title">{{ item.spu.store_name }}</div>
|
||||||
<div class="delete" @click="deleteOne(item.cart_id)">删除</div>
|
<div class="delete" @click="deleteOne(item.cart_id)">删除</div>
|
||||||
</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 class="order-item-price">
|
||||||
<div>
|
<div>
|
||||||
¥<span>{{ item.productAttr.price }}</span>
|
¥<span>{{ item.productAttr.price }}</span>
|
||||||
|
@ -127,11 +140,11 @@ defineExpose({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="update-price">
|
<div class="update-price">
|
||||||
<el-button class="btn" type="primary">改价</el-button>
|
<!-- <el-button class="btn" type="primary">改价</el-button> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="order-btn">
|
<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
|
>立即结账</el-button
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
|
@ -203,6 +216,7 @@ defineExpose({
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.order-item-sku {
|
.order-item-sku {
|
||||||
|
cursor: pointer;
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
|
|
@ -1,6 +1,7 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
import { ElMessageBox } from 'element-plus'
|
import { ElMessageBox } from 'element-plus'
|
||||||
|
import { getAttrValue } from "@/api/shop.js"
|
||||||
|
|
||||||
const dialogVisible = ref(false)
|
const dialogVisible = ref(false)
|
||||||
|
|
||||||
|
@ -8,15 +9,50 @@ const show = (e)=>{
|
||||||
dialogVisible.value = 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 emit = defineEmits(['changeItem'])
|
||||||
|
|
||||||
const changeItem = ()=>{
|
const changeItem = ()=>{
|
||||||
emit('changeItem', item, change);
|
if(mode.value == 'add') emit('changeItem', form.value, active.value);
|
||||||
dialogVisible = false
|
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({
|
defineExpose({
|
||||||
show
|
show,
|
||||||
|
setForm
|
||||||
})
|
})
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
@ -27,30 +63,28 @@ defineExpose({
|
||||||
title="商品规格"
|
title="商品规格"
|
||||||
width="650"
|
width="650"
|
||||||
>
|
>
|
||||||
<div class="shop">
|
<div class="shop" v-loading="loading">
|
||||||
<div class="shop-info">
|
<div class="shop-info" v-if="form.sku">
|
||||||
<div class="shop-info-left">
|
<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>
|
||||||
<div class="shop-info-right">
|
<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-top">{{ form.store_name }}</div>
|
||||||
<div class="shop-info-right-center">库存100</div>
|
<div class="shop-info-right-center">库存{{ form.sku[active]?.stock || 0 }}</div>
|
||||||
<div class="shop-info-right-price">¥<span>{{0.10}}</span></div>
|
<div class="shop-info-right-price">¥<span>{{form.sku[active]?.price || form.price}}</span></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="shop-sku">
|
<div class="shop-sku">
|
||||||
<div class="title">产品</div>
|
<div class="title">产品</div>
|
||||||
<div class="sku">
|
<div class="sku">
|
||||||
<el-space wrap :size="20">
|
<el-space wrap :size="20">
|
||||||
<div class="sku-item sku-item_active">大</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>
|
||||||
<div class="sku-item">中</div>
|
|
||||||
<div class="sku-item">小</div>
|
|
||||||
</el-space>
|
</el-space>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<template #footer>
|
<template #footer v-if="!(mode != 'add' && form.attr && form.attr.length==1)">
|
||||||
<div class="dialog-footer">
|
<div class="dialog-footer">
|
||||||
<el-button class="ok-btn" type="primary" @click="changeItem">
|
<el-button class="ok-btn" type="primary" @click="changeItem">
|
||||||
确定
|
确定
|
||||||
|
@ -115,6 +149,7 @@ defineExpose({
|
||||||
}
|
}
|
||||||
.sku{
|
.sku{
|
||||||
.sku-item{
|
.sku-item{
|
||||||
|
cursor: pointer;
|
||||||
padding: 0.5rem 1rem;
|
padding: 0.5rem 1rem;
|
||||||
background-color: #f5f5f5;
|
background-color: #f5f5f5;
|
||||||
border-radius: 3rem;
|
border-radius: 3rem;
|
||||||
|
|
|
@ -2,30 +2,31 @@
|
||||||
import { ref, watch } from "vue";
|
import { ref, watch } from "vue";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
storeList:{
|
storeList: {
|
||||||
type:Array,
|
type: Array,
|
||||||
default:()=>[]
|
default: () => [],
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
const emit = defineEmits(['getStoreList'])
|
const emit = defineEmits(["getStoreList", "changeItem", "loadMore"]);
|
||||||
|
|
||||||
const bar_code = ref('');
|
const bar_code = ref("");
|
||||||
|
|
||||||
const loadMore = () => {
|
const loadMore = () => {
|
||||||
console.log("loadMore");
|
emit("loadMore", {
|
||||||
|
bar_code: bar_code.value,
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const changeItem = (item)=>{
|
const changeItem = (item) => {
|
||||||
emit('changeItem', item)
|
emit("changeItem", item);
|
||||||
}
|
};
|
||||||
|
|
||||||
const handleEnter = () => {
|
const handleEnter = () => {
|
||||||
emit('getStoreList', {
|
emit("getStoreList", {
|
||||||
bar_code: bar_code.value
|
bar_code: bar_code.value,
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
@ -54,14 +55,23 @@ const handleEnter = () => {
|
||||||
style="overflow: auto"
|
style="overflow: auto"
|
||||||
>
|
>
|
||||||
<el-space wrap :size="20">
|
<el-space wrap :size="20">
|
||||||
<div class="shop-item" v-for="(item, index) in storeList" :key="index" @click="changeItem(item)">
|
<div
|
||||||
<el-image
|
class="shop-item"
|
||||||
:src="item.image"
|
v-for="(item, index) in storeList"
|
||||||
></el-image>
|
: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-name">{{ item.store_name }}</div>
|
||||||
<div class="shop-price">
|
<div class="shop-price">
|
||||||
¥<span>{{ item.price }}</span>
|
¥<span>{{ item.price }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="no-stock" v-if="item.stock==0">
|
||||||
|
<div>
|
||||||
|
<span>暂无</span>
|
||||||
|
<span>库存</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-space>
|
</el-space>
|
||||||
</div>
|
</div>
|
||||||
|
@ -130,6 +140,8 @@ const handleEnter = () => {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
.el-image {
|
.el-image {
|
||||||
border-radius: 0.5rem;
|
border-radius: 0.5rem;
|
||||||
|
@ -161,6 +173,29 @@ const handleEnter = () => {
|
||||||
color: #fff;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,9 +3,10 @@ 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 pay from "./component/pay.vue";
|
import pay from "@/components/pay.vue";
|
||||||
import { ref, nextTick } from "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";
|
import { useUserStore } from "@/store/user.js";
|
||||||
|
|
||||||
const pupopRef = ref(null);
|
const pupopRef = ref(null);
|
||||||
|
@ -18,7 +19,7 @@ const storeList = ref([]);
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
|
|
||||||
const where = ref({
|
const where = ref({
|
||||||
page: 1,
|
page: 0,
|
||||||
limit: 30,
|
limit: 30,
|
||||||
});
|
});
|
||||||
const getStoreList = (data) => {
|
const getStoreList = (data) => {
|
||||||
|
@ -28,21 +29,30 @@ const getStoreList = (data) => {
|
||||||
...data,
|
...data,
|
||||||
};
|
};
|
||||||
storeListApi(userStore.userInfo.service.mer_id, where.value).then((res) => {
|
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);
|
item.attr = Object.keys(item.sku);
|
||||||
return item;
|
return item;
|
||||||
});
|
});
|
||||||
if (storeList.value.length == 1 && isAllDigits(data.bar_code)) {
|
storeList.value = storeList.value.concat(list);
|
||||||
changeItem(storeList.value[0], storeList.value[0].attr[0]);
|
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) {
|
function isAllDigits(str) {
|
||||||
return /^\d+$/.test(str);
|
return /^\d+$/.test(str);
|
||||||
}
|
}
|
||||||
|
|
||||||
const changeItem = (item, change = "") => {
|
const cartAddInfo = (item, change = "") => {
|
||||||
// console.log(item, change);
|
// console.log(item, change);
|
||||||
let q = {
|
let q = {
|
||||||
is_new: 0,
|
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 = () => {
|
const checkOut = () => {
|
||||||
let cart_id = orderRef.value.list.map((item) => item.cart_id);
|
let cart_id = orderRef.value.list.map((item) => item.cart_id);
|
||||||
|
@ -76,7 +104,7 @@ const checkOut = () => {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
getStoreList();
|
// getStoreList();
|
||||||
|
|
||||||
const goPay = () => {
|
const goPay = () => {
|
||||||
checkOut();
|
checkOut();
|
||||||
|
@ -87,14 +115,11 @@ const paySuccess = ()=>{
|
||||||
orderRef.value.getList();
|
orderRef.value.getList();
|
||||||
}
|
}
|
||||||
|
|
||||||
nextTick(() => {
|
|
||||||
// pupopRef.value.show(true);
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="my-card">
|
<div class="my-card">
|
||||||
<order ref="orderRef" @goPay="goPay" />
|
<order ref="orderRef" @goPay="goPay" @editPupop="editPupop"/>
|
||||||
<padding />
|
<padding />
|
||||||
<shop
|
<shop
|
||||||
ref="shopRef"
|
ref="shopRef"
|
||||||
|
@ -102,8 +127,9 @@ nextTick(() => {
|
||||||
:storeList="storeList"
|
:storeList="storeList"
|
||||||
@getStoreList="getStoreList"
|
@getStoreList="getStoreList"
|
||||||
@changeItem="changeItem"
|
@changeItem="changeItem"
|
||||||
|
@loadMore="loadMore"
|
||||||
/>
|
/>
|
||||||
<pupop ref="pupopRef" />
|
<pupop ref="pupopRef" @changeItem="changeItem" @editItem="editItem"/>
|
||||||
<pay ref="payRef" @paySuccess="paySuccess"/>
|
<pay ref="payRef" @paySuccess="paySuccess"/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -44,6 +44,12 @@ const onLogin = () => {
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
userStore.setToken(res.data.token);
|
userStore.setToken(res.data.token);
|
||||||
info().then(({data}) => {
|
info().then(({data}) => {
|
||||||
|
if(!data.service){
|
||||||
|
return ElMessage({
|
||||||
|
message: "请联系管理员开通服务",
|
||||||
|
type: "error",
|
||||||
|
})
|
||||||
|
}
|
||||||
userStore.setUserInfo(data);
|
userStore.setUserInfo(data);
|
||||||
router.push("/");
|
router.push("/");
|
||||||
});
|
});
|
||||||
|
|
|
@ -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>
|
|
@ -1,69 +1,196 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue'
|
import { ref } from "vue";
|
||||||
import { orderListApi } from "@/api/store.js"
|
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({
|
const where = ref({
|
||||||
page: 1,
|
page: 1,
|
||||||
limit: 20,
|
limit: 20,
|
||||||
status: -2
|
});
|
||||||
})
|
|
||||||
|
|
||||||
const loading = ref(false)
|
const loading = ref(false);
|
||||||
const total = ref(0)
|
const total = ref(0);
|
||||||
|
|
||||||
const getOrderList = () => {
|
const getOrderList = () => {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
orderListApi(where.value).then((res) => {
|
if (tabPosition.value == 1) where.value.paid = null;
|
||||||
orderList.value = res.data.list;
|
if (tabPosition.value == 2) where.value.paid = 0;
|
||||||
total.value = res.data.count;
|
orderListApi(userStore.userInfo.service.mer_id, where.value).then((res) => {
|
||||||
loading.value = false;
|
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) => {
|
const prevClick = (e) => {
|
||||||
where.value.page = e;
|
where.value.page = e;
|
||||||
getOrderList();
|
getOrderList();
|
||||||
}
|
};
|
||||||
|
|
||||||
const nextClick = (e) => {
|
const nextClick = (e) => {
|
||||||
where.value.page = e;
|
where.value.page = e;
|
||||||
getOrderList();
|
getOrderList();
|
||||||
}
|
};
|
||||||
|
|
||||||
const currentChange = (e) => {
|
const currentChange = (e) => {
|
||||||
where.value.page = e;
|
where.value.page = e;
|
||||||
getOrderList();
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div v-loading="loading" element-loading-text="加载中" class="my-order">
|
<div v-loading="loading" element-loading-text="加载中" class="my-order">
|
||||||
<el-table :data="orderList" stripe style="width: 100%">
|
<el-radio-group
|
||||||
<el-table-column prop="group_order_id" label="ID" width="100" />
|
v-model="tabPosition"
|
||||||
<el-table-column prop="order_sn" label="订单号" min-width="250" />
|
style="margin-bottom: 30px"
|
||||||
<el-table-column prop="total_price" label="订单金额" />
|
@change="changeTabPosition"
|
||||||
<el-table-column prop="paid" label="支付状态">
|
>
|
||||||
<template #default="scope">
|
<el-radio-button :value="1">全部</el-radio-button>
|
||||||
<span v-if="scope.row.paid==1">已支付</span>
|
<el-radio-button :value="2">未支付</el-radio-button>
|
||||||
<span v-else>未支付</span>
|
</el-radio-group>
|
||||||
</template>
|
<el-table :data="orderList" style="width: 100%">
|
||||||
</el-table-column>
|
<el-table-column prop="group_order_id" label="ID" width="100" />
|
||||||
<el-table-column prop="pay_time" label="支付时间" />
|
<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 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>
|
</el-table>
|
||||||
<el-pagination
|
<el-pagination
|
||||||
:page-size="where.limit"
|
:page-size="where.limit"
|
||||||
layout="prev, pager, next"
|
layout="prev, pager, next"
|
||||||
:total="total"
|
:total="total"
|
||||||
@prev-click="prevClick"
|
@prev-click="prevClick"
|
||||||
@next-click="nextClick"
|
@next-click="nextClick"
|
||||||
@current-change="currentChange"
|
@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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
@ -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>
|
Loading…
Reference in New Issue