This commit is contained in:
parent
0613c96862
commit
0788b36218
|
|
@ -1,10 +1,14 @@
|
|||
VITE_NOW_TYPE = 'dist'
|
||||
|
||||
VITE_PUSH_URL = 'ws://192.168.1.22:8787'
|
||||
VITE_BASE_URL = 'http://192.168.1.22:8545'
|
||||
|
||||
# VITE_PUSH_URL ='wss://test-multi-store.lihaink.cn/pull'
|
||||
# VITE_BASE_URL = 'https://test-multi-store.lihaink.cn'
|
||||
# VITE_PUSH_URL = 'ws://192.168.1.201:8787'
|
||||
# VITE_BASE_URL = 'http://192.168.1.201:8545'
|
||||
|
||||
# VITE_PUSH_URL = 'ws://192.168.1.22:8787'
|
||||
# VITE_BASE_URL = 'http://192.168.1.22:8545'
|
||||
|
||||
VITE_PUSH_URL ='wss://test-multi-store.lihaink.cn/pull'
|
||||
VITE_BASE_URL = 'https://test-multi-store.lihaink.cn'
|
||||
|
||||
# VITE_PUSH_URL ='wss://multi-store.lihaink.cn/pull'
|
||||
# VITE_BASE_URL = 'https://multi-store.lihaink.cn'
|
||||
|
|
@ -177,3 +177,10 @@ export function subOrdersListApi(data) {
|
|||
export function merchantOrderCountApi(data) {
|
||||
return request.get(`/order/retailOrder/merchant_order_count`, { params: data })
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 发送短信验证(采购款)
|
||||
*/
|
||||
export function storeOrderCheckSmsApi(data) {
|
||||
return request.post(`/store_order/StoreOrder/checkSms`, data)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,8 +30,8 @@ export function logout() {
|
|||
/**
|
||||
* @description 会员类型
|
||||
*/
|
||||
export function userShipApi() {
|
||||
return request.get(`/user/UserShip/lists`)
|
||||
export function userShipApi(data) {
|
||||
return request.get(`/user/UserShip/lists`, { params: data })
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -44,6 +44,34 @@ export function userAddApi(data) {
|
|||
/**
|
||||
* @description 会员列表
|
||||
*/
|
||||
export function userListsApi() {
|
||||
return request.get(`/user/user/lists`)
|
||||
export function userListsApi(data) {
|
||||
return request.get(`/user/user/lists`, { params: data })
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 用户详情
|
||||
*/
|
||||
export function userDetailApi(data) {
|
||||
return request.get(`/user/user/detail`, { params: data })
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 地址详情
|
||||
*/
|
||||
export function userAddressDetailApi(data) {
|
||||
return request.get(`/user/Address/detail`, { params: data })
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 修改地址
|
||||
*/
|
||||
export function userAddressEditApi(data) {
|
||||
return request.post(`/user/Address/edit`, data)
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 充值
|
||||
*/
|
||||
export function userRechangeAmountApi(data) {
|
||||
return request.post(`/store_order/StoreOrder/rechange_amount`, data)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup>
|
||||
import { ref, watch, nextTick, computed, onMounted, onUnmounted } from "vue";
|
||||
import {orderCreateApi, orderStatusApi, orderPayApi} from "@/api/store.js";
|
||||
import { orderCreateApi, orderStatusApi, orderPayApi, storeOrderCheckSmsApi } from "@/api/store.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { audioplay } from "@/utils/audio.js";
|
||||
import mitt from "@/utils/mitt.js";
|
||||
|
|
@ -45,10 +45,13 @@ const changeActive = (e) => {
|
|||
|
||||
const form = ref({});
|
||||
const cart_id = ref([]);
|
||||
const uid = ref('');
|
||||
const isRePay = ref(false);
|
||||
const setForm = (e) => {
|
||||
form.value = e.data;
|
||||
cart_id.value = e.cart_id;
|
||||
uid.value = e.uid;
|
||||
console.log('选择了用户==', uid.value||'游客');
|
||||
isRePay.value = e.isRePay || false;
|
||||
};
|
||||
|
||||
|
|
@ -397,17 +400,48 @@ const keyboard = (event) => {
|
|||
}
|
||||
};
|
||||
|
||||
const getSms = () => {
|
||||
storeOrderCheckSmsApi({
|
||||
cart_id: cart_id.value,
|
||||
uid: uid.value
|
||||
}).then(res => {
|
||||
ElMessage({
|
||||
message: '发送成功',
|
||||
type: "success",
|
||||
});
|
||||
})
|
||||
}
|
||||
const smsCode = ref('');
|
||||
// 提交验证码/支付
|
||||
const handlecodeEnter = () => {
|
||||
orderCreateApi({
|
||||
pay_type: 18, //余额/采购款支付
|
||||
sms_code: smsCode.value,
|
||||
cart_id: cart_id.value,
|
||||
uid: uid.value
|
||||
}).then(res => {
|
||||
drawer.value = false;
|
||||
ElMessage({
|
||||
message: res.msg,
|
||||
type: "success",
|
||||
});
|
||||
changeActive(1);
|
||||
beforeClose();
|
||||
})
|
||||
}
|
||||
|
||||
// 条码输入框是否聚焦
|
||||
const isFocus = ref(false);
|
||||
|
||||
// 键盘事件
|
||||
const aleft = () => {
|
||||
if (!drawer.value || (isFocus.value && input.value.length > 0)) return;
|
||||
if (active.value == 2) return changeActive(1);
|
||||
if (active.value == 3) return changeActive(2);
|
||||
};
|
||||
const aright = () => {
|
||||
if (!drawer.value || (isFocus.value && input.value.length > 0)) return;
|
||||
if (active.value == 1) return changeActive(2);
|
||||
if (active.value == 2) return changeActive(3);
|
||||
};
|
||||
onMounted(() => {
|
||||
mitt.on("left", aleft);
|
||||
|
|
@ -431,9 +465,12 @@ onUnmounted(() => {
|
|||
<div class="left" :class="{ active: active == 1 }" @click="changeActive(1)">
|
||||
微信/支付宝
|
||||
</div>
|
||||
<div class="right" :class="{ active: active == 2 }" @click="changeActive(2)">
|
||||
<div class="center" :class="{ active: active == 2 }" @click="changeActive(2)">
|
||||
现金收款
|
||||
</div>
|
||||
<div class="right" :class="{ active: active == 3 }" @click="changeActive(3)">
|
||||
采购款
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="form.activities == 1" style="display: inline-block;margin-right: 20px">
|
||||
|
|
@ -460,12 +497,11 @@ onUnmounted(() => {
|
|||
</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="请点击输入框聚焦扫码或输入编码号"
|
||||
<el-input ref="codeRef" v-model="input" autofocus class="code-input" placeholder="请点击输入框聚焦扫码或输入编码号"
|
||||
@keyup.enter="handleEnter" @focus="isFocus = true" @blur="isFocus = false" />
|
||||
<div class="tips"></div>
|
||||
</div>
|
||||
<div class="card2" v-else>
|
||||
<div class="card2" v-else-if="active == 2">
|
||||
<div class="drawer-body">
|
||||
<div class="counter">
|
||||
<div class="received">
|
||||
|
|
@ -505,6 +541,15 @@ onUnmounted(() => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card3" v-else>
|
||||
<div class="codes">
|
||||
<el-input v-model="smsCode" autofocus class="code-input" placeholder="请输入验证码"
|
||||
@keyup.enter="handlecodeEnter" @focus="isFocus = true" @blur="isFocus = false" />
|
||||
<el-button type="primary" @click="getSms" class="get-code-btn">获取验证码</el-button>
|
||||
</div>
|
||||
<el-button type="primary" @click="handlecodeEnter" class="code-pay">确认支付</el-button>
|
||||
<!-- <div class="tips"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #footer>
|
||||
|
|
@ -557,6 +602,7 @@ onUnmounted(() => {
|
|||
.code-input {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.tips {
|
||||
|
|
@ -567,6 +613,32 @@ onUnmounted(() => {
|
|||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.card3 {
|
||||
.codes {
|
||||
width: 38rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.code-input {
|
||||
flex: 1;
|
||||
height: 3rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.get-code-btn {
|
||||
height: 3rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.code-pay {
|
||||
margin-top: 4rem;
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
border-radius: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,665 @@
|
|||
<script setup>
|
||||
import { ref, watch, nextTick, computed, onMounted, onUnmounted } from "vue";
|
||||
import { orderCreateApi, orderStatusApi, orderPayApi } from "@/api/store.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { audioplay } from "@/utils/audio.js";
|
||||
import mitt from "@/utils/mitt.js";
|
||||
import { useUserStore } from "@/store/user.js";
|
||||
import { userAddressDetailApi, userAddressEditApi, userRechangeAmountApi } from "@/api/user"
|
||||
|
||||
const drawer = ref(false);
|
||||
const active = ref(1);
|
||||
const input = ref("");
|
||||
const codeRef = ref("");
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
const cancelClick = () => {
|
||||
beforeClose();
|
||||
};
|
||||
|
||||
const open = () => {
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
loading.value = false;
|
||||
input.value = "";
|
||||
reLoad.value = true;
|
||||
codeRef.value?.focus();
|
||||
changeActive(active.value);
|
||||
}, 300);
|
||||
});
|
||||
};
|
||||
|
||||
const changeActive = (e) => {
|
||||
active.value = e;
|
||||
if (active.value == 2) {
|
||||
active.value = 1;
|
||||
return ElMessage.error('暂不支持现金收款');
|
||||
// 添加键盘事件监听器
|
||||
window.addEventListener("keydown", keyboard);
|
||||
} else {
|
||||
window.removeEventListener("keydown", keyboard);
|
||||
nextTick(() => {
|
||||
input.value = "";
|
||||
codeRef.value?.focus();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const form = ref({
|
||||
price: 0,
|
||||
uid: ''
|
||||
});
|
||||
const cart_id = ref([]);
|
||||
const isRePay = ref(false);
|
||||
const setForm = (e) => {
|
||||
form.value = e.data;
|
||||
cart_id.value = e.cart_id;
|
||||
isRePay.value = e.isRePay || false;
|
||||
};
|
||||
|
||||
const setRePay = (e) => {
|
||||
form.value.total = e.price;
|
||||
order_id.value = e.order_id;
|
||||
};
|
||||
|
||||
const emit = defineEmits(["paySuccess"]);
|
||||
|
||||
const reLoad = ref(false);
|
||||
|
||||
const numList = ref([
|
||||
"1",
|
||||
"2",
|
||||
"3",
|
||||
"4",
|
||||
"5",
|
||||
"6",
|
||||
"7",
|
||||
"8",
|
||||
"9",
|
||||
"0",
|
||||
"00",
|
||||
".",
|
||||
]);
|
||||
|
||||
let timecount = 0; //刷新间隔
|
||||
|
||||
const regexWechat = /^(10|11|12|13|14|15)\d{16}$/; //微信条码正则 10-15开头18位
|
||||
const regexPay = /^(25|26|27|28|29|30)\d{14,22}$/; //支付宝条码正则 25-30开头16-24位
|
||||
|
||||
const order_id = ref("");
|
||||
// 支付
|
||||
const handleEnter = () => {
|
||||
loading.value = true;
|
||||
codeRef.value.blur();
|
||||
|
||||
if (isRePay.value) orderPay();
|
||||
else {
|
||||
let pay_type;
|
||||
if (regexWechat.test(input.value)) pay_type = "9"; // 微信
|
||||
else if (regexPay.test(input.value)) pay_type = "13"; // 支付宝
|
||||
else {
|
||||
loading.value = false;
|
||||
input.value = "";
|
||||
codeRef.value.focus();
|
||||
return ElMessage.error("请输入正确的支付码");
|
||||
}
|
||||
userRechangeAmountApi({
|
||||
uid: form.value.uid,
|
||||
price: form.value.price,
|
||||
pay_type: pay_type,
|
||||
auth_code: input.value,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data.out_trade_no && res.msg == "支付成功") {
|
||||
drawer.value = false;
|
||||
ElMessage({
|
||||
message: "支付成功",
|
||||
type: "success",
|
||||
});
|
||||
// if(res.data.message) audioplay(res.data.message);
|
||||
beforeClose(res.data);
|
||||
} else {
|
||||
if (res.msg == "用户支付中" && res.code == 1) {
|
||||
ElMessage.warning(res.msg);
|
||||
mitt.on("pay_success", (e) => {
|
||||
ElMessage({
|
||||
message: "支付成功",
|
||||
type: "success",
|
||||
});
|
||||
setTimeout(() => {
|
||||
mitt.off("pay_success");
|
||||
}, 200);
|
||||
drawer.value = false;
|
||||
beforeClose(e);
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
loading.value = false;
|
||||
nextTick(() => {
|
||||
codeRef.value?.focus();
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const orderPay = () => {
|
||||
let query;
|
||||
let pay_type = 17;
|
||||
if (active.value == 1) {
|
||||
if (regexWechat.test(input.value)) pay_type = "9"; // 微信
|
||||
else if (regexPay.test(input.value)) pay_type = "13"; // 支付宝
|
||||
else {
|
||||
loading.value = false;
|
||||
input.value = "";
|
||||
codeRef.value.focus();
|
||||
return ElMessage.error("请输入正确的支付码");
|
||||
}
|
||||
}
|
||||
orderPayApi({
|
||||
order_id: form.value.order_id,
|
||||
pay_type: pay_type,
|
||||
auth_code: input.value
|
||||
}).then((res) => {
|
||||
if (res.msg?.includes('成功')) {
|
||||
drawer.value = false;
|
||||
ElMessage({
|
||||
message: "支付成功",
|
||||
type: "success",
|
||||
});
|
||||
// if(res.data.message) audioplay(res.data.message);
|
||||
beforeClose();
|
||||
} else {
|
||||
if (res.msg == "用户支付中" && res.code == 1) {
|
||||
ElMessage.warning(res.msg);
|
||||
mitt.on("pay_success", (e) => {
|
||||
ElMessage({
|
||||
message: "支付成功",
|
||||
type: "success",
|
||||
});
|
||||
setTimeout(() => {
|
||||
mitt.off("pay_success");
|
||||
}, 200);
|
||||
drawer.value = false;
|
||||
beforeClose(e);
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
input.value = "";
|
||||
loading.value = false;
|
||||
nextTick(() => {
|
||||
codeRef.value?.focus();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const count = ref(0); // 累计请求3次, 如果3次都失败, 则只能重新支付
|
||||
const getOrderStatus = (id) => {
|
||||
if (!id) return;
|
||||
count.value++;
|
||||
timecount += 5000;
|
||||
orderStatusApi({
|
||||
order_sn: id,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.data.trade_state == "SUCCESS") {
|
||||
ElMessage({
|
||||
message: res.message,
|
||||
type: "success",
|
||||
});
|
||||
// if(res.data.message) audioplay(res.data.message);
|
||||
beforeClose();
|
||||
} else {
|
||||
ElMessage({
|
||||
message:
|
||||
res.data.trade_state == "USERPAYING"
|
||||
? "用户正在支付中"
|
||||
: res.message,
|
||||
type: "error",
|
||||
});
|
||||
input.value = "";
|
||||
loading.value = false;
|
||||
nextTick(() => {
|
||||
codeRef.value?.focus();
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
if (reLoad.value && count.value < 3)
|
||||
setTimeout(
|
||||
() => {
|
||||
getOrderStatus(id);
|
||||
},
|
||||
15000 - timecount > 0 ? 15000 - timecount : 0
|
||||
);
|
||||
else {
|
||||
input.value = "";
|
||||
loading.value = false;
|
||||
nextTick(() => {
|
||||
codeRef.value?.focus();
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const beforeClose = (data) => {
|
||||
window.removeEventListener("keydown", keyboard);
|
||||
reLoad.value = false;
|
||||
loading.value = false;
|
||||
input.value = "";
|
||||
collection.value = "";
|
||||
collectionArray.value = [];
|
||||
codeRef.value?.blur();
|
||||
emit("paySuccess", data);
|
||||
drawer.value = false;
|
||||
};
|
||||
|
||||
const loading = ref(false);
|
||||
|
||||
defineExpose({
|
||||
drawer,
|
||||
setForm,
|
||||
setRePay,
|
||||
beforeClose,
|
||||
});
|
||||
|
||||
const collectionArray = ref([]);
|
||||
const collection = ref(""); //输入的金额
|
||||
const changePrice = computed(() => {
|
||||
// 找零
|
||||
if (+collection.value > 0) {
|
||||
return (collection.value - form.value.total).toFixed(2);
|
||||
}
|
||||
return -1;
|
||||
});
|
||||
const defaultcalc = ref(false);
|
||||
|
||||
//清除计算机输入的数字
|
||||
const delNum = (type) => {
|
||||
if (type === -1) {
|
||||
collectionArray.value = [];
|
||||
} else {
|
||||
collectionArray.value.pop();
|
||||
}
|
||||
collection.value = collectionArray.value.length
|
||||
? collectionArray.value.join("")
|
||||
: 0;
|
||||
};
|
||||
//输入实际收款金额
|
||||
const numTap = (item) => {
|
||||
if (defaultcalc.value === false) {
|
||||
collection.value = "";
|
||||
defaultcalc.value = true;
|
||||
}
|
||||
let x = String(collection.value).indexOf(".") + 1;
|
||||
let y = String(collection.value).length - x;
|
||||
console.log(x, y);
|
||||
if (x === 0 || y < 2) {
|
||||
if (collectionArray.value.join("") <= 9999999) {
|
||||
collectionArray.value.push(item);
|
||||
}
|
||||
collection.value =
|
||||
collectionArray.value.join("") > 99999999
|
||||
? 99999999
|
||||
: collectionArray.value.join("");
|
||||
}
|
||||
};
|
||||
// 现金结算
|
||||
const cashBnt = () => {
|
||||
if (
|
||||
changePrice.value === "" ||
|
||||
changePrice.value === null ||
|
||||
changePrice.value === undefined ||
|
||||
+collection.value < +form.value.total
|
||||
)
|
||||
return ElMessage.error("收款金额应该大于等于应收金额");
|
||||
if (isRePay.value) orderPay();
|
||||
else
|
||||
userRechangeAmountApi({
|
||||
uid: form.value.uid,
|
||||
price: form.value.price,
|
||||
pay_type: pay_type,
|
||||
pay_type: "17", //现金支付 17
|
||||
})
|
||||
.then((res) => {
|
||||
drawer.value = false;
|
||||
ElMessage({
|
||||
message: res.msg,
|
||||
type: "success",
|
||||
});
|
||||
changeActive(1);
|
||||
beforeClose();
|
||||
})
|
||||
.catch((err) => {
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// 监听键盘函数
|
||||
const keyboard = (event) => {
|
||||
let e = event || window.event;
|
||||
let key = e.keyCode;
|
||||
if (key == 37) return changeActive(2);
|
||||
if (key == 120) return mitt.emit("F9");
|
||||
if (key == 27) return beforeClose();
|
||||
event.stopPropagation(); // 阻止事件冒泡传递
|
||||
event.preventDefault(); // 阻止默认事件原有功能
|
||||
switch (key) {
|
||||
case 96:
|
||||
case 48:
|
||||
numTap(0);
|
||||
break;
|
||||
case 97:
|
||||
case 49:
|
||||
numTap(1);
|
||||
break;
|
||||
case 98:
|
||||
case 50:
|
||||
numTap(2);
|
||||
break;
|
||||
case 99:
|
||||
case 51:
|
||||
numTap(3);
|
||||
break;
|
||||
case 100:
|
||||
case 52:
|
||||
numTap(4);
|
||||
break;
|
||||
case 101:
|
||||
case 53:
|
||||
numTap(5);
|
||||
break;
|
||||
case 102:
|
||||
case 54:
|
||||
numTap(6);
|
||||
break;
|
||||
case 103:
|
||||
case 55:
|
||||
numTap(7);
|
||||
break;
|
||||
case 104:
|
||||
case 56:
|
||||
numTap(8);
|
||||
break;
|
||||
case 105:
|
||||
case 57:
|
||||
numTap(9);
|
||||
break;
|
||||
case 110:
|
||||
numTap(".");
|
||||
break;
|
||||
case 190:
|
||||
numTap(".");
|
||||
break;
|
||||
case 8:
|
||||
delNum();
|
||||
break;
|
||||
case 13:
|
||||
cashBnt();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
// 条码输入框是否聚焦
|
||||
const isFocus = ref(false);
|
||||
|
||||
// 键盘事件
|
||||
const aleft = () => {
|
||||
if (!drawer.value || (isFocus.value && input.value.length > 0)) return;
|
||||
if (active.value == 2) return changeActive(1);
|
||||
};
|
||||
const aright = () => {
|
||||
if (!drawer.value || (isFocus.value && input.value.length > 0)) return;
|
||||
if (active.value == 1) return changeActive(2);
|
||||
};
|
||||
onMounted(() => {
|
||||
mitt.on("left", aleft);
|
||||
mitt.on("right", aright);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
mitt.off("left", aleft);
|
||||
mitt.off("right", aright);
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-drawer size="60rem" 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="changeActive(1)">
|
||||
微信/支付宝
|
||||
</div>
|
||||
<div class="right" :class="{ active: active == 2 }" @click="changeActive(2)">
|
||||
现金收款
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: inline-block ">
|
||||
<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?.price }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</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" @focus="isFocus = true" @blur="isFocus = false" />
|
||||
<div class="tips"></div>
|
||||
</div>
|
||||
<div class="card2" v-else>
|
||||
<div class="drawer-body">
|
||||
<div class="counter">
|
||||
<div class="received">
|
||||
<span v-if="collection">{{ collection }}</span>
|
||||
<span v-else style="font-size: 1rem; color: #999">按下键盘输入客户支付金额</span>
|
||||
</div>
|
||||
<div class="balance" v-if="changePrice >= 0">
|
||||
<div>
|
||||
需找零(元)：<span class="money">￥{{ changePrice }}</span>
|
||||
</div>
|
||||
<div class="tips">按回车(Enter)确认支付</div>
|
||||
</div>
|
||||
<div class="balance" v-else>
|
||||
<div>不够找零, 请支付更多金额</div>
|
||||
<div class="tips">按下小键盘输入金额</div>
|
||||
</div>
|
||||
<div class="keypad">
|
||||
<div class="left">
|
||||
<el-button v-for="item in numList" :key="item" @click="numTap(item)">{{
|
||||
item
|
||||
}}
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button @click="delNum">
|
||||
<el-icon>
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-button @click="delNum(-1)">C</el-button>
|
||||
<el-button class="enter" :class="{ 'enter-disable': +collection < +form.total }"
|
||||
:disabled="+collection < +form.total" @click="cashBnt">
|
||||
确认
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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("@/assets/pay.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;
|
||||
}
|
||||
|
||||
.drawer-body {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.counter {
|
||||
padding: 1.25rem;
|
||||
border-radius: 1.25rem;
|
||||
background-color: #f3f9ff;
|
||||
|
||||
.received {
|
||||
height: 3rem;
|
||||
padding: 0 1.25rem;
|
||||
border: 1px solid #1890ff;
|
||||
box-shadow: 0 0 0.18rem #1890ff;
|
||||
border-radius: 0.5rem;
|
||||
background-color: #ffffff;
|
||||
font-size: 1.62rem;
|
||||
line-height: 3rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.balance {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 1.12rem 0 1.12rem 0.625rem;
|
||||
text-align: start;
|
||||
font-size: 0.95rem;
|
||||
color: #303133;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.money {
|
||||
color: #ff4a00;
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 0.8rem;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.keypad {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto auto;
|
||||
grid-gap: 0.625rem;
|
||||
|
||||
.left {
|
||||
grid-column-end: span 3;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
grid-gap: 0.625rem;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: grid;
|
||||
grid-template-columns: auto;
|
||||
grid-gap: 0.625rem;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
height: 3.875rem;
|
||||
width: 8.125rem;
|
||||
margin: 0 !important;
|
||||
border: 0;
|
||||
border-radius: 0.5rem;
|
||||
font-weight: 500;
|
||||
font-size: 1.75rem !important;
|
||||
line-height: 3.87rem;
|
||||
color: #1890ff;
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.enter {
|
||||
grid-row-end: span 4;
|
||||
height: 8.37rem;
|
||||
line-height: 8.37rem;
|
||||
background-color: #1890ff;
|
||||
font-weight: 500;
|
||||
font-size: 1.35rem !important;
|
||||
color: #ffffff;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.enter-disable {
|
||||
background-color: #ccc;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import {
|
||||
userListsApi
|
||||
} from "@/api/user.js";
|
||||
import { useUserStore } from "@/store/user.js";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
import mitt from "@/utils/mitt.js";
|
||||
import moment from "moment";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const dialogVisible = ref(false);
|
||||
|
||||
const where = ref({
|
||||
page_no: 1,
|
||||
page_size: 20,
|
||||
mobile: "",
|
||||
});
|
||||
|
||||
const emit = defineEmits(['setUser'])
|
||||
const loading = ref(false);
|
||||
const total = ref(0);
|
||||
|
||||
const loadEnd = ref(false);
|
||||
const orderList = ref([]);
|
||||
const getOrderList = (reload = false) => {
|
||||
if (reload) where.value.page_no = 1;
|
||||
else if (loadEnd.value || loading.value) return;
|
||||
loading.value = true;
|
||||
userListsApi(where.value)
|
||||
.then((res) => {
|
||||
if (reload) orderList.value = res.data.lists;
|
||||
else orderList.value = [...orderList.value, ...res.data.lists];
|
||||
if (res.data.lists.length < where.value.page_size) loadEnd.value = true;
|
||||
else where.value.page_no++;
|
||||
total.value = res.data.count;
|
||||
loading.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
loadEnd.value = true;
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
const setForm = (item, index) => {
|
||||
emit("setUser", item);
|
||||
dialogVisible.value = false;
|
||||
};
|
||||
|
||||
const open = () => {
|
||||
dialogVisible.value = true;
|
||||
getOrderList(true);
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
open
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog v-model="dialogVisible" title="选择用户" width="800">
|
||||
<div class="check-user-list">
|
||||
<div class="header-input">
|
||||
<el-input v-model="where.mobile" placeholder="搜索手机号/ID" @keydown.enter="getOrderList(true)"
|
||||
@clear="getOrderList(true)" clearable>
|
||||
<template #append>
|
||||
<el-button type="primary" style="
|
||||
background-color: #1890ff;
|
||||
color: #fff;
|
||||
border-radius: 0 0.315rem 0.315rem 0;
|
||||
" @click="getOrderList(true)">搜索</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="order-lists" v-loading="loading" v-infinite-scroll="getOrderList"
|
||||
:infinite-scroll-distance="300" :infinite-scroll-delay="500" style="overflow: auto">
|
||||
<div class="item" v-for="(item, index) in orderList" :key="index" @click="setForm(item, index)">
|
||||
<el-avatar class="avatar" :src="item.avatar" />
|
||||
<div style="display: flex; flex-direction: column; justify-content: space-around;flex:1;">
|
||||
<div class="top flex">
|
||||
<div class="r-1"><span class="bold">{{ item.nickname }}</span><span>{{ ' (ID:' + item.id
|
||||
+ ')' }}</span>
|
||||
</div>
|
||||
<div>手机号: {{ item.account }}</div>
|
||||
</div>
|
||||
<div class="bottom flex" style="justify-content: space-between;">
|
||||
<!-- <div class="r-1">积分: <span class="red">55</span></div> -->
|
||||
<div>采购款: <span class="red">{{ item.purchase_funds }}</span></div>
|
||||
<div>
|
||||
<el-tag type="primary" v-if="item.user_ship != 1">{{ item.user_ship_name }}</el-tag>
|
||||
<el-tag type="success" v-else>{{ item.user_ship_name }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="loadEnd" class="load-end">没有更多了</div>
|
||||
<div v-if="loading" class="load-end">加载中...</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.check-user-list {
|
||||
border-radius: 1.2rem;
|
||||
height: 70vh;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
|
||||
span {
|
||||
color: #ff4a00;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.header-input {
|
||||
padding: 1rem;
|
||||
padding-top: 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.order-lists {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
width: 45%;
|
||||
height: auto;
|
||||
border-radius: 0.5rem;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
margin: 0.5rem;
|
||||
background-color: #F5F5F5;
|
||||
display: flex;
|
||||
|
||||
.avatar {
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
border-radius: 50%;
|
||||
margin-right: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.r-1 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.bottom {}
|
||||
|
||||
.red {
|
||||
color: #ff4a00;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.item-active {
|
||||
background-color: #efefef;
|
||||
}
|
||||
}
|
||||
|
||||
.load-end {
|
||||
text-align: center;
|
||||
padding: 1rem;
|
||||
color: #333;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -71,12 +71,12 @@ const list = ref([
|
|||
ico: "FullScreen",
|
||||
count: 0,
|
||||
},
|
||||
{
|
||||
name: "statistics",
|
||||
title: "盈收统计",
|
||||
ico: "TrendCharts",
|
||||
count: 0,
|
||||
},
|
||||
// {
|
||||
// name: "statistics",
|
||||
// title: "盈收统计",
|
||||
// ico: "TrendCharts",
|
||||
// count: 0,
|
||||
// },
|
||||
{
|
||||
name: "putStorage",
|
||||
title: "入库登记",
|
||||
|
|
|
|||
|
|
@ -89,13 +89,13 @@ const testObj = {
|
|||
"reservation_time": null,
|
||||
"is_writeoff": 1,
|
||||
"is_remind": 0,
|
||||
"create_time": "2024-06-08 16:04:16",
|
||||
"update_time": "2024-06-08 16:56:23",
|
||||
"create_time": "2024-00-08 16:04:16",
|
||||
"update_time": "2024-00-08 16:56:23",
|
||||
"delete_time": null,
|
||||
"system_store_name": "店铺名称",
|
||||
"system_store_phone": "15699996666",
|
||||
"system_store_phone": "156****6666",
|
||||
"staff_name": "新店阿萨",
|
||||
"staff_phone": "15699996666",
|
||||
"staff_phone": "156****6666",
|
||||
"nickname": "",
|
||||
"user_mobile": "",
|
||||
"info": [
|
||||
|
|
|
|||
|
|
@ -0,0 +1,95 @@
|
|||
import {
|
||||
ElMessage,
|
||||
ElMessageBox,
|
||||
ElNotification,
|
||||
ElLoading,
|
||||
type ElMessageBoxOptions
|
||||
} from 'element-plus'
|
||||
import type { LoadingInstance } from 'element-plus/es/components/loading/src/loading'
|
||||
|
||||
export class Feedback {
|
||||
private loadingInstance: LoadingInstance | null = null
|
||||
static instance: Feedback | null = null
|
||||
static getInstance() {
|
||||
return this.instance ?? (this.instance = new Feedback())
|
||||
}
|
||||
// 消息提示
|
||||
msg(msg: string) {
|
||||
ElMessage.info(msg)
|
||||
}
|
||||
// 错误消息
|
||||
msgError(msg: string) {
|
||||
if(msg!=='Network Error') ElMessage.error(msg)
|
||||
}
|
||||
// 成功消息
|
||||
msgSuccess(msg: string) {
|
||||
ElMessage.success(msg)
|
||||
}
|
||||
// 警告消息
|
||||
msgWarning(msg: string) {
|
||||
ElMessage.warning(msg)
|
||||
}
|
||||
// 弹出提示
|
||||
alert(msg: string) {
|
||||
ElMessageBox.alert(msg, '系统提示')
|
||||
}
|
||||
// 错误提示
|
||||
alertError(msg: string) {
|
||||
ElMessageBox.alert(msg, '系统提示', { type: 'error' })
|
||||
}
|
||||
// 成功提示
|
||||
alertSuccess(msg: string) {
|
||||
ElMessageBox.alert(msg, '系统提示', { type: 'success' })
|
||||
}
|
||||
// 警告提示
|
||||
alertWarning(msg: string) {
|
||||
ElMessageBox.alert(msg, '系统提示', { type: 'warning' })
|
||||
}
|
||||
// 通知提示
|
||||
notify(msg: string) {
|
||||
ElNotification.info(msg)
|
||||
}
|
||||
// 错误通知
|
||||
notifyError(msg: string) {
|
||||
ElNotification.error(msg)
|
||||
}
|
||||
// 成功通知
|
||||
notifySuccess(msg: string) {
|
||||
ElNotification.success(msg)
|
||||
}
|
||||
// 警告通知
|
||||
notifyWarning(msg: string) {
|
||||
ElNotification.warning(msg)
|
||||
}
|
||||
// 确认窗体
|
||||
confirm(msg: string) {
|
||||
return ElMessageBox.confirm(msg, '温馨提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
// 提交内容
|
||||
prompt(content: string, title: string, options?: ElMessageBoxOptions) {
|
||||
return ElMessageBox.prompt(content, title, {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
...options
|
||||
})
|
||||
}
|
||||
// 打开全局loading
|
||||
loading(msg: string) {
|
||||
this.loadingInstance = ElLoading.service({
|
||||
lock: true,
|
||||
text: msg
|
||||
})
|
||||
}
|
||||
// 关闭全局loading
|
||||
closeLoading() {
|
||||
this.loadingInstance?.close()
|
||||
}
|
||||
}
|
||||
|
||||
const feedback = Feedback.getInstance()
|
||||
|
||||
export default feedback
|
||||
|
|
@ -8,7 +8,8 @@ const orderList = ref([]);
|
|||
const where = ref({
|
||||
page_no: 1,
|
||||
page_size: 20,
|
||||
loadend: false
|
||||
loadend: false,
|
||||
type: 1
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
|
|
@ -18,7 +19,8 @@ const getOrderList = () => {
|
|||
loading.value = true;
|
||||
storeStorageInfoListsApi({
|
||||
page_no: where.value.page_no,
|
||||
page_size: where.value.page_size
|
||||
page_size: where.value.page_size,
|
||||
type: where.value.type
|
||||
}).then((res) => {
|
||||
orderList.value = [...orderList.value, ...res.data.lists];
|
||||
if (res.data.lists.length < where.value.page_size) where.value.loadend = true;
|
||||
|
|
@ -29,6 +31,17 @@ const getOrderList = () => {
|
|||
|
||||
getOrderList();
|
||||
|
||||
const reload = ()=>{
|
||||
where.value.page_no = 1;
|
||||
where.value.loadend = false;
|
||||
orderList.value = [];
|
||||
getOrderList();
|
||||
};
|
||||
|
||||
// 入库
|
||||
const handlePutStorage = (data) => {
|
||||
}
|
||||
|
||||
// 编辑
|
||||
const handleEdit = async (data) => {
|
||||
storeStorageInfoEditApi({
|
||||
|
|
@ -43,14 +56,12 @@ const handleEdit = async (data) => {
|
|||
|
||||
<template>
|
||||
<div class="my-card put-storage">
|
||||
<div
|
||||
class="order-lists"
|
||||
v-loading="loading"
|
||||
v-infinite-scroll="getOrderList"
|
||||
:infinite-scroll-distance="300"
|
||||
:infinite-scroll-delay="500"
|
||||
:infinite-scroll-immediate="false"
|
||||
style="overflow: auto">
|
||||
<el-radio-group style="margin-bottom: 20px" v-model="where.type" @change="reload">
|
||||
<el-radio-button :label="1" :value="1">售卖库存</el-radio-button>
|
||||
<el-radio-button :label="2" :value="2">兑换库存</el-radio-button>
|
||||
</el-radio-group>
|
||||
<div class="order-lists" v-loading="loading" v-infinite-scroll="getOrderList" :infinite-scroll-distance="300"
|
||||
:infinite-scroll-delay="500" :infinite-scroll-immediate="false" style="overflow: auto">
|
||||
<el-table :data="orderList">
|
||||
<el-table-column label="导入人员" prop="admin_name" />
|
||||
<el-table-column label="门店确认人员" prop="staff_name" />
|
||||
|
|
@ -71,8 +82,7 @@ const handleEdit = async (data) => {
|
|||
<el-table-column label="备注" prop="mark" />
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button v-if="row.status == 0"
|
||||
type="success" @click="handleEdit(row)">
|
||||
<el-button v-if="row.status == 0" type="success" @click="handleEdit(row)">
|
||||
确认入库
|
||||
</el-button>
|
||||
</template>
|
||||
|
|
@ -89,14 +99,17 @@ const handleEdit = async (data) => {
|
|||
box-sizing: border-box;
|
||||
padding: 1rem;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
||||
.image {
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
|
||||
.order-lists {
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import { cartListApi, cartDeleteApi, cartCreateApi } from "@/api/store.js";
|
|||
import price from "./price.vue";
|
||||
import mitt from "@/utils/mitt.js";
|
||||
import { useUserStore } from "@/store/user.js";
|
||||
import userList from "@/components/userList.vue";
|
||||
|
||||
const list = ref([]);
|
||||
const allPrice = ref(0); //商品总价
|
||||
|
|
@ -11,6 +12,7 @@ const costPrice = ref(0); //商品原价
|
|||
const discounts = ref(0); //优惠金额
|
||||
|
||||
const userStore = useUserStore();
|
||||
const userListRef = ref(null);
|
||||
|
||||
const clearAll = () => {
|
||||
let id = [];
|
||||
|
|
@ -91,11 +93,20 @@ const showPrice = (type = true) => {
|
|||
priceRef.value.show(type, costPrice.value);
|
||||
};
|
||||
|
||||
const userInfo = ref({
|
||||
uid: ''
|
||||
})
|
||||
const setUser = (row)=>{
|
||||
userInfo.value = row;
|
||||
userInfo.value.uid = row.id;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
getList,
|
||||
list,
|
||||
discounts,
|
||||
allPrice,
|
||||
userInfo
|
||||
});
|
||||
|
||||
// 键盘事件
|
||||
|
|
@ -119,6 +130,28 @@ onUnmounted(() => {
|
|||
|
||||
<template>
|
||||
<div class="my-order">
|
||||
<div class="user-nav">
|
||||
<div class="user-info">
|
||||
<el-avatar class="avatar" :src="userInfo.avatar" />
|
||||
<div class="info" v-if="userInfo.uid">
|
||||
<div class="flex-bewteen">
|
||||
<div>手机号: {{ userInfo.account }}</div>
|
||||
<el-button type="primary" link class="change-user" @click="userListRef.open()">切换用户<el-icon><ArrowRight /></el-icon></el-button>
|
||||
</div>
|
||||
<div class="flex-bewteen" style="align-items: flex-end;">
|
||||
<div>采购款: {{ userInfo.purchase_funds }}</div>
|
||||
<el-button link @click="userInfo.uid=''">重置<el-icon><RefreshLeft /></el-icon></el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info" v-else style="align-items: center;display:flex;justify-content: space-between;">
|
||||
<div class="flex-bewteen" style="width:100%;">
|
||||
<div style="font-size: 1.2rem;">游客</div>
|
||||
<el-button type="primary" link class="change-user" @click="userListRef.open()">切换用户<el-icon><ArrowRight /></el-icon></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<userList ref="userListRef" @setUser="setUser" />
|
||||
</div>
|
||||
<div class="header-nav">
|
||||
<div class="nav-item">
|
||||
已选购 <span>{{ list.length }}</span> 款
|
||||
|
|
@ -206,6 +239,37 @@ onUnmounted(() => {
|
|||
width: 30rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.user-nav{
|
||||
.user-info{
|
||||
padding: 1rem;
|
||||
margin: 1rem;
|
||||
margin-bottom: 0;
|
||||
border: 2px solid #f70;
|
||||
background-color: rgba($color: #f70, $alpha: 0.1);
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
.avatar {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.info{
|
||||
flex: 1;
|
||||
margin-left: 1rem;
|
||||
color: #666;
|
||||
.flex-bewteen{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.change-user{
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-nav {
|
||||
display: flex;
|
||||
|
|
@ -225,8 +289,9 @@ onUnmounted(() => {
|
|||
}
|
||||
}
|
||||
.order-list {
|
||||
height: calc(100vh - 100px - 14rem);
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding-bottom: 10rem;
|
||||
.order-item {
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
|
|
@ -273,8 +338,10 @@ onUnmounted(() => {
|
|||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 20;
|
||||
width: 100%;
|
||||
box-shadow: 0 -1px 0.625rem #eee;
|
||||
background-color: #fff;
|
||||
|
||||
.order-total {
|
||||
height: 2.5rem;
|
||||
|
|
|
|||
|
|
@ -104,6 +104,7 @@ const checkOut = () => {
|
|||
payRef.value.setForm({
|
||||
data: res.data.order,
|
||||
cart_id: cart_id,
|
||||
uid: orderRef.value?.userInfo?.uid || ""
|
||||
});
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import { apiProvince, apiCity, apiArea, apiStreet, apiVillage, apiBrigade } from
|
|||
import { userShipApi, userAddApi } from "@/api/user"
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
const options = ref([]);
|
||||
|
||||
const formDataRef = ref(null);
|
||||
const formDataInfo = reactive({
|
||||
|
|
@ -26,6 +25,7 @@ const formDataRules = reactive({
|
|||
]
|
||||
})
|
||||
|
||||
const options = ref([]);
|
||||
// 异步加载数据的方法
|
||||
const loadOptions = async (node, resolve) => {
|
||||
const level = node.level;
|
||||
|
|
@ -110,7 +110,7 @@ const props = {
|
|||
const userShip = ref([])
|
||||
const getUserShip = () => {
|
||||
userShipApi().then(res => {
|
||||
userShip.value = res.data.lists
|
||||
userShip.value = res.data.lists;
|
||||
})
|
||||
}
|
||||
getUserShip()
|
||||
|
|
@ -150,7 +150,7 @@ defineExpose({
|
|||
</el-form-item>
|
||||
<el-form-item label="会员类型" prop="user_ship">
|
||||
<el-select v-model="formDataInfo.user_ship" placeholder="请选择会员类型" style="width: 100%;">
|
||||
<el-option v-for="item in userShip" :key="item.id" :label="item.title" :value="item.id" />
|
||||
<el-option v-for="item in userShip" :key="item.id" :label="item.title" :value="item.id" :disabled="item.id==1" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户地址" prop="selectedValues">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,9 @@ import { useUserStore } from "@/store/user.js";
|
|||
import { ElMessage } from "element-plus";
|
||||
import { useRouter } from "vue-router";
|
||||
import mitt from "@/utils/mitt.js";
|
||||
import pay from "@/components/pay.vue";
|
||||
import payUser from "@/components/payUser.vue";
|
||||
import { userAddressDetailApi, userAddressEditApi, userDetailApi } from "@/api/user"
|
||||
import { apiProvince, apiCity, apiArea, apiStreet, apiVillage, apiBrigade } from '@/api/public'
|
||||
|
||||
const userStore = useUserStore();
|
||||
const router = useRouter();
|
||||
|
|
@ -13,14 +15,171 @@ const formData = ref({
|
|||
id: "",
|
||||
});
|
||||
|
||||
const payInfo = ref({
|
||||
price: '',
|
||||
type: 1,
|
||||
})
|
||||
|
||||
const payRef = ref(null);
|
||||
const toPay = () => {
|
||||
if (payInfo.value.type == 1) payInfo.value.price = '1000';
|
||||
else if (payInfo.value.type == 2) payInfo.value.price = '2000';
|
||||
else if (payInfo.value.type == 3) payInfo.value.price = '5000';
|
||||
// if (Number(payInfo.value.price) < 1000 && formData.value.user_ship != 1) return ElMessage.error('至少购买1000元礼包');
|
||||
if (payInfo.value.type == 0) payInfo.value.price = Number(payInfo.value.price).toFixed(2);
|
||||
console.log('支付', payInfo.value);
|
||||
payRef.value.setForm({
|
||||
data: {
|
||||
uid: formData.value.id,
|
||||
price: payInfo.value.price,
|
||||
}
|
||||
});
|
||||
payRef.value.drawer = true;
|
||||
}
|
||||
const paySuccess = () => {
|
||||
console.log('支付成功');
|
||||
mitt.emit('re-load-user-list');
|
||||
}
|
||||
|
||||
const addressInfo = ref({
|
||||
id: '',
|
||||
province: '',
|
||||
city: '',
|
||||
area: '',
|
||||
street: '',
|
||||
brigade: ''
|
||||
})
|
||||
const selectedValues = ref([])
|
||||
const selectedEd = ref([])
|
||||
const getAddress = () => {
|
||||
userAddressDetailApi({
|
||||
uid: formData.value.id
|
||||
}).then(res => {
|
||||
if (res.data.village) {
|
||||
selectedValues.value = [res.data.city, res.data.area, res.data.street, res.data.village, +res.data.brigade];
|
||||
selectedEd.value = JSON.parse(JSON.stringify(selectedValues.value));
|
||||
addressInfo.value = Object.assign(addressInfo.value, res.data);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const options = ref([]);
|
||||
// 异步加载数据的方法
|
||||
const loadOptions = async (node, resolve) => {
|
||||
const level = node.level;
|
||||
let response;
|
||||
if (level !== 0 && !node.data.code) return resolve([]);
|
||||
// if (level === 0) {
|
||||
// response = await apiProvince();
|
||||
// response = response.data.map((item) => {
|
||||
// return {
|
||||
// code: item.province_code,
|
||||
// name: item.province_name
|
||||
// }
|
||||
// })
|
||||
// } else
|
||||
if (level === 0) {
|
||||
response = await apiCity({
|
||||
province_code: 510000 // 四川省
|
||||
});
|
||||
response = response.data.map((item) => {
|
||||
return {
|
||||
code: item.city_code,
|
||||
name: item.city_name
|
||||
}
|
||||
})
|
||||
} else if (level === 1) {
|
||||
response = await apiArea({
|
||||
city_code: node.data.code
|
||||
});
|
||||
response = response.data.map((item) => {
|
||||
return {
|
||||
code: item.area_code,
|
||||
name: item.area_name
|
||||
}
|
||||
})
|
||||
}
|
||||
else if (level === 2) {
|
||||
response = await apiStreet({
|
||||
area_code: node.data.code
|
||||
});
|
||||
response = response.data.map((item) => {
|
||||
return {
|
||||
code: item.street_code,
|
||||
name: item.street_name,
|
||||
}
|
||||
})
|
||||
}
|
||||
else if (level === 3) {
|
||||
response = await apiVillage({
|
||||
street_code: node.data.code
|
||||
});
|
||||
response = response.data.map((item) => {
|
||||
return {
|
||||
code: item.village_code,
|
||||
name: item.village_name,
|
||||
}
|
||||
})
|
||||
}
|
||||
else if (level === 4) {
|
||||
response = await apiBrigade({
|
||||
village_code: node.data.code
|
||||
});
|
||||
response = response.data.map((item) => {
|
||||
return {
|
||||
code: item.id,
|
||||
name: item.brigade_name,
|
||||
leaf: true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
resolve(response);
|
||||
};
|
||||
const props = {
|
||||
value: 'code',
|
||||
label: 'name',
|
||||
children: 'children',
|
||||
multiple: false,
|
||||
lazy: true,
|
||||
lazyLoad: loadOptions
|
||||
};
|
||||
|
||||
const updateAddress = async () => {
|
||||
addressInfo.value.city = selectedValues.value[0]
|
||||
addressInfo.value.area = selectedValues.value[1]
|
||||
addressInfo.value.street = selectedValues.value[2]
|
||||
addressInfo.value.village = selectedValues.value[3]
|
||||
addressInfo.value.brigade = selectedValues.value[4]
|
||||
if (!addressInfo.value.phone) addressInfo.value.phone = formData.value.account;
|
||||
if (!addressInfo.value.real_name) addressInfo.value.real_name = formData.value.real_name || formData.value.nickname;
|
||||
userAddressEditApi({
|
||||
...addressInfo.value,
|
||||
uid: formData.value.id
|
||||
}).then(res => {
|
||||
ElMessage.success('编辑成功')
|
||||
isDisabled.value = true;
|
||||
})
|
||||
}
|
||||
|
||||
const cancelUpdate = () => {
|
||||
selectedValues.value = JSON.parse(JSON.stringify(selectedEd.value))
|
||||
isDisabled.value = true;
|
||||
}
|
||||
|
||||
const isDisabled = ref(true);
|
||||
|
||||
onMounted(() => {
|
||||
mitt.on("set-user-detail", (res) => {
|
||||
console.log("===", res);
|
||||
formData.value = res;
|
||||
where.value.page_no = 1;
|
||||
where.value.loadend = false;
|
||||
where.value.loading = false;
|
||||
goods_list.value = [];
|
||||
userDetailApi({
|
||||
id: res.id
|
||||
}).then(({ data }) => {
|
||||
formData.value = Object.assign(res, data);
|
||||
console.log(formData.value);
|
||||
})
|
||||
getAddress();
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -35,6 +194,18 @@ onUnmounted(() => {
|
|||
<div class="table">
|
||||
<div class="table-title">用户信息</div>
|
||||
<div class="table-info">
|
||||
<div class="info-item">
|
||||
<div class="info-item-title">用户余额:</div>
|
||||
<div class="info-item-info red">¥{{ formData.now_money }}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-title">采购款:</div>
|
||||
<div class="info-item-info red">¥{{ formData.purchase_funds }}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-title">待返还金额:</div>
|
||||
<div class="info-item-info red">¥{{ formData.number }}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-title">头像:</div>
|
||||
<div class="info-item-info">
|
||||
|
|
@ -61,23 +232,67 @@ onUnmounted(() => {
|
|||
<div class="info-item-title">创建时间:</div>
|
||||
<div class="info-item-info">{{ formData.create_time }}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item" style="width: 100%;flex-shrink: 0;align-items: center;">
|
||||
<div class="info-item-title">用户类型:</div>
|
||||
<div class="info-item-info">
|
||||
<el-tag type="primary" v-if="formData.user_ship==0">{{ formData.user_ship_name }}</el-tag>
|
||||
<template v-if="updateShip == false">
|
||||
<el-tag type="primary" v-if="formData.user_ship == 0">{{ formData.user_ship_name
|
||||
}}</el-tag>
|
||||
<el-tag type="success" v-else>{{ formData.user_ship_name }}</el-tag>
|
||||
<el-button v-if="isDisabled" type="primary" style="margin-left: 1rem;" size="small"
|
||||
@click="isDisabled = false">修改</el-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-select v-model="formDataInfo.user_ship" placeholder="请选择会员类型" style="width: 100%;">
|
||||
<el-option v-for="item in userShip" :key="item.id" :label="item.title"
|
||||
:value="item.id" :disabled="item.id == 1" />
|
||||
</el-select>
|
||||
<el-button v-if="!isDisabled" type="primary" style="margin-left: 1rem;"
|
||||
@click="updateAddress">确认</el-button>
|
||||
<el-button v-if="!isDisabled" style="margin-left: 1rem;"
|
||||
@click="cancelUpdate">取消</el-button>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-item-title">用户余额:</div>
|
||||
<div class="info-item-info">¥{{ formData.user_money }}</div>
|
||||
<div class="info-item" style="width: 100%;flex-shrink: 0;align-items: center;">
|
||||
<div class="info-item-title">用户地址:</div>
|
||||
<el-cascader :key="formData.id" style="flex: 1;" v-model="selectedValues" :options="options"
|
||||
:props="props" :load="loadOptions" class="w-full" :disabled="isDisabled" />
|
||||
<el-button v-if="isDisabled" type="primary" style="margin-left: 1rem;"
|
||||
@click="isDisabled = false">修改</el-button>
|
||||
<el-button v-if="!isDisabled" type="primary" style="margin-left: 1rem;"
|
||||
@click="updateAddress">确认</el-button>
|
||||
<el-button v-if="!isDisabled" style="margin-left: 1rem;" @click="cancelUpdate">取消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-title">供销经营礼包<span class="tips">首次购买1000元以上成为行业会员</span></div>
|
||||
<div class="table-info">
|
||||
<div class="pay-btn">
|
||||
<div class="pay-item" :class="{ 'pay-item-active': payInfo.type == 1 }"
|
||||
@click="payInfo.type = 1">
|
||||
<div>¥1000.00</div>
|
||||
</div>
|
||||
<div class="pay-item" :class="{ 'pay-item-active': payInfo.type == 2 }"
|
||||
@click="payInfo.type = 2">
|
||||
<div>¥2000.00</div>
|
||||
</div>
|
||||
<div class="pay-item" :class="{ 'pay-item-active': payInfo.type == 3 }"
|
||||
@click="payInfo.type = 3">
|
||||
<div>¥5000.00</div>
|
||||
</div>
|
||||
<div class="pay-item" :class="{ 'pay-item-active': payInfo.type == 0 }"
|
||||
@click="payInfo.type = 0">
|
||||
<input type="number" class="input" v-model="payInfo.price" placeholder="自定义金额">
|
||||
</div>
|
||||
</div>
|
||||
<el-button type="primary" size="large" class="pay" @click="toPay">立即支付</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-empty></el-empty>
|
||||
</div>
|
||||
<payUser ref="payRef" @paySuccess="paySuccess"></payUser>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -104,6 +319,13 @@ onUnmounted(() => {
|
|||
|
||||
.table-title {
|
||||
font-weight: bold;
|
||||
|
||||
.tips {
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
font-size: 0.8rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.table-info {
|
||||
|
|
@ -124,11 +346,67 @@ onUnmounted(() => {
|
|||
display: flex;
|
||||
padding-top: 1rem;
|
||||
|
||||
.red {
|
||||
color: #ff4a00;
|
||||
}
|
||||
|
||||
.info-item-title {
|
||||
flex-shrink: 0;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pay-btn {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
.pay-item {
|
||||
flex: 1;
|
||||
min-width: 10rem;
|
||||
margin: 1rem 0.5rem 0 0.5rem;
|
||||
height: 5rem;
|
||||
background-color: rgba($color: #67c23a, $alpha: 0.1);
|
||||
color: #67c23a;
|
||||
border-radius: 1rem;
|
||||
border: 2px solid #67c23a;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.input {
|
||||
font-size: 1.5rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
&-active {
|
||||
background-color: #67c23a;
|
||||
color: #fff;
|
||||
|
||||
.input {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.pay {
|
||||
width: 100%;
|
||||
border-radius: 3rem;
|
||||
margin: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -147,5 +425,23 @@ onUnmounted(() => {
|
|||
border-top: 1px solid #eee;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
/* 移除边框 */
|
||||
border: none;
|
||||
/* 移除内边距 */
|
||||
padding: 0;
|
||||
/* 移除默认背景颜色 */
|
||||
background-color: transparent;
|
||||
/* 移除聚焦时的轮廓 */
|
||||
outline: none;
|
||||
/* 重置文本填充色，防止某些浏览器对自动填充的文本颜色有特殊样式 */
|
||||
-webkit-text-fill-color: inherit;
|
||||
/* 适用于Webkit内核浏览器 */
|
||||
-webkit-appearance: none;
|
||||
/* 针对Webkit内核，移除一些特殊样式 */
|
||||
/* 防止输入框在聚焦时出现阴影或特殊样式 */
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -24,15 +24,10 @@ const props = defineProps({
|
|||
|
||||
const lists = ref([]);
|
||||
|
||||
|
||||
|
||||
const where = ref({
|
||||
page_no: 1,
|
||||
page_size: 20,
|
||||
order_id: "",
|
||||
start_time: "",
|
||||
end_time: "",
|
||||
is_sashier: 2, // 1-收银订单, 2-小程序订单
|
||||
mobile: "",
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
|
|
@ -72,6 +67,20 @@ const addRef = ref(null);
|
|||
const addUser = ()=>{
|
||||
addRef.value?.addUser();
|
||||
}
|
||||
|
||||
const addSuccess = ()=>{
|
||||
dialogVisible.value = false;
|
||||
getOrderList(true);
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
mitt.on('re-load-user-list', ()=>{
|
||||
getOrderList(true);
|
||||
})
|
||||
})
|
||||
onUnmounted(()=>{
|
||||
mitt.off('re-load-user-list');
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -85,7 +94,7 @@ const addUser = ()=>{
|
|||
</el-icon> 添加用户</el-button>
|
||||
</div>
|
||||
<div class="header-input">
|
||||
<el-input v-model="where.order_id" placeholder="搜索手机号/ID" @keydown.enter="getOrderList(true)"
|
||||
<el-input v-model="where.mobile" placeholder="搜索手机号/ID" @keydown.enter="getOrderList(true)"
|
||||
@clear="getOrderList(true)" clearable>
|
||||
<template #append>
|
||||
<el-button type="primary" style="
|
||||
|
|
@ -108,9 +117,11 @@ const addUser = ()=>{
|
|||
</div>
|
||||
<div class="bottom flex" style="justify-content: space-between;">
|
||||
<!-- <div class="r-1">积分: <span class="red">55</span></div> -->
|
||||
<div>余额: <span class="red">{{item.user_money}}</span></div>
|
||||
<div>余额: <span class="red">{{item.now_money}}</span></div>
|
||||
<div>采购款: <span class="red">{{item.purchase_funds}}</span></div>
|
||||
<div>待返还: <span class="red">{{item.return_money}}</span></div>
|
||||
<div>
|
||||
<el-tag type="primary" v-if="item.user_ship==0">{{ item.user_ship_name }}</el-tag>
|
||||
<el-tag type="primary" v-if="item.user_ship!=1">{{ item.user_ship_name }}</el-tag>
|
||||
<el-tag type="success" v-else>{{ item.user_ship_name }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -120,7 +131,7 @@ const addUser = ()=>{
|
|||
<div v-if="loading" class="load-end">加载中...</div>
|
||||
</div>
|
||||
<el-dialog v-model="dialogVisible" title="添加用户" width="600">
|
||||
<add ref="addRef" @close="dialogVisible = false"></add>
|
||||
<add ref="addRef" @close="addSuccess"></add>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
|
|
|
|||
Loading…
Reference in New Issue