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'
|
||||
|
|
@ -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'
|
||||
|
||||
/**
|
||||
* @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 })
|
||||
}
|
||||
|
|
@ -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>
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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("/");
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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,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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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