commit
5c5591d581
49 changed files with 5205 additions and 0 deletions
@ -0,0 +1,24 @@ |
|||||
|
# Logs |
||||
|
logs |
||||
|
*.log |
||||
|
npm-debug.log* |
||||
|
yarn-debug.log* |
||||
|
yarn-error.log* |
||||
|
pnpm-debug.log* |
||||
|
lerna-debug.log* |
||||
|
|
||||
|
node_modules |
||||
|
dist |
||||
|
dist-ssr |
||||
|
*.local |
||||
|
|
||||
|
# Editor directories and files |
||||
|
.vscode/* |
||||
|
!.vscode/extensions.json |
||||
|
.idea |
||||
|
.DS_Store |
||||
|
*.suo |
||||
|
*.ntvs* |
||||
|
*.njsproj |
||||
|
*.sln |
||||
|
*.sw? |
||||
@ -0,0 +1,3 @@ |
|||||
|
{ |
||||
|
"recommendations": ["Vue.volar"] |
||||
|
} |
||||
@ -0,0 +1,5 @@ |
|||||
|
# Vue 3 + Vite |
||||
|
|
||||
|
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. |
||||
|
|
||||
|
Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support). |
||||
@ -0,0 +1,20 @@ |
|||||
|
<!doctype html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"/> |
||||
|
<link rel="icon" type="image/svg+xml" href="/public/favicon.ico"/> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
||||
|
<title>广西体育中心</title> |
||||
|
</head> |
||||
|
<body> |
||||
|
<div id="app"></div> |
||||
|
<script type="module" src="/src/main.js"></script> |
||||
|
</body> |
||||
|
</html> |
||||
|
|
||||
|
<style> |
||||
|
html, body { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,28 @@ |
|||||
|
{ |
||||
|
"name": "gxtyzx-front", |
||||
|
"private": true, |
||||
|
"version": "0.0.0", |
||||
|
"type": "module", |
||||
|
"scripts": { |
||||
|
"dev": "vite --mode=dev", |
||||
|
"build": "vite build --mode=build", |
||||
|
"preview": "vite preview" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"@element-plus/icons-vue": "^2.3.1", |
||||
|
"axios": "^1.7.9", |
||||
|
"dayjs": "^1.11.13", |
||||
|
"element-plus": "^2.9.3", |
||||
|
"pinia": "^2.3.0", |
||||
|
"vite-plugin-compression": "^0.5.1", |
||||
|
"vue": "^3.5.13", |
||||
|
"vue-router": "4" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@vitejs/plugin-vue": "^5.2.1", |
||||
|
"autoprefixer": "^10.4.20", |
||||
|
"postcss": "^8.4.49", |
||||
|
"tailwindcss": "^3.4.17", |
||||
|
"vite": "^6.0.5" |
||||
|
} |
||||
|
} |
||||
File diff suppressed because it is too large
@ -0,0 +1,6 @@ |
|||||
|
module.exports = { |
||||
|
plugins: { |
||||
|
tailwindcss: {}, |
||||
|
autoprefixer: {}, |
||||
|
} |
||||
|
} |
||||
|
After Width: | Height: | Size: 6.7 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
@ -0,0 +1,21 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<Login v-if="currentPage === '/Login'"/> |
||||
|
<Home v-else/> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import {ref, watch} from 'vue' |
||||
|
import {useRoute} from 'vue-router' |
||||
|
import Login from '@/views/Login.vue' |
||||
|
import Home from '@/views/Home.vue' |
||||
|
|
||||
|
const route = useRoute() |
||||
|
|
||||
|
let currentPage = ref('/Index') |
||||
|
watch(route, (path) => { |
||||
|
currentPage.value = path.path |
||||
|
}) |
||||
|
|
||||
|
</script> |
||||
@ -0,0 +1,5 @@ |
|||||
|
import post, {SERVER_API} from "@/api/base.js"; |
||||
|
|
||||
|
export const loginReq = data => post(`${SERVER_API}/login`, data) |
||||
|
|
||||
|
export const changePwdReq = data => post(`${SERVER_API}/system/user/password`, data) |
||||
@ -0,0 +1,86 @@ |
|||||
|
import axios from "axios"; |
||||
|
import {getUserInfo, clearUserInfo} from "./common.js"; |
||||
|
import router from "@/router/index.js"; |
||||
|
import {ElMessage} from "element-plus"; |
||||
|
|
||||
|
export const SERVER_API = process.env.VUE_APP_SERVER_API |
||||
|
|
||||
|
axios.defaults.baseURL = process.env.VUE_APP_BASE_API |
||||
|
axios.interceptors.request.use( |
||||
|
config => { |
||||
|
const token = getUserInfo().token |
||||
|
if (token && token !== 'undefined') { |
||||
|
config.headers['Authorization'] = 'Bearer ' + token |
||||
|
} else { |
||||
|
if (config.url !== '/login') { |
||||
|
clearUserInfo() |
||||
|
router.push('Login') |
||||
|
} |
||||
|
} |
||||
|
config.headers.tenantId = 10150 |
||||
|
return config |
||||
|
}, |
||||
|
) |
||||
|
|
||||
|
axios.interceptors.response.use( |
||||
|
res => { |
||||
|
if (parseInt(res.data.code) !== 0) { |
||||
|
ElMessage.closeAll() |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: res.data.message ?? '未知错误' |
||||
|
}) |
||||
|
if (parseInt(res.data.code) === 401) { |
||||
|
clearUserInfo() |
||||
|
router.push('Login') |
||||
|
} |
||||
|
} |
||||
|
return res |
||||
|
}, |
||||
|
error => { |
||||
|
if (parseInt(error.response.status) === 1) { |
||||
|
ElMessage.closeAll() |
||||
|
ElMessage({ |
||||
|
type: 'error', |
||||
|
message: error.response.data.error ?? error.response.data.message |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
) |
||||
|
|
||||
|
const post = (url, formData) => { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
axios.post(url, formData).then(res => { |
||||
|
if (res.data.code === 0) resolve(res.data) |
||||
|
else reject(res.data.message) |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export const put = (url, formData) => { |
||||
|
return new Promise((resolve, reject) => { |
||||
|
axios.put(url, formData).then(res => { |
||||
|
if (res.data.code === 0) resolve(res.data) |
||||
|
else reject(res.data.message) |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export const get = (url, params = null) => { |
||||
|
if (params) { |
||||
|
url += '?' |
||||
|
for (let key in params) { |
||||
|
if (params[key] !== null && params[key] !== '') url += `${key}=${params[key]}&` |
||||
|
} |
||||
|
} |
||||
|
const lastChar = url.charAt(url.length - 1); |
||||
|
if (lastChar === '&' || lastChar === '?') url = url.slice(0, -1) |
||||
|
return new Promise((resolve, reject) => { |
||||
|
axios.get(url).then(res => { |
||||
|
if (res.data.code === 0) resolve(res.data) |
||||
|
else reject(res.data.message) |
||||
|
}) |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
export default post |
||||
@ -0,0 +1,25 @@ |
|||||
|
import post from "@/api/base.js"; |
||||
|
|
||||
|
export const indexUrl = process.env.VUE_APP_RESOURCE_URL |
||||
|
|
||||
|
//保存用户信息
|
||||
|
export const setUserInfo = (user) => { |
||||
|
console.log(user) |
||||
|
if (user.user) window.localStorage.setItem("uid", user.user.userId); |
||||
|
if (user.user) window.localStorage.setItem("username", user.user.realName); |
||||
|
if (user.access_token) window.localStorage.setItem("token", user.access_token); |
||||
|
} |
||||
|
//获取用户信息
|
||||
|
export const getUserInfo = () => { |
||||
|
return { |
||||
|
uid: window.localStorage.uid, |
||||
|
username: window.localStorage.username, |
||||
|
token: window.localStorage.token, |
||||
|
}; |
||||
|
} |
||||
|
//清空用户信息
|
||||
|
export const clearUserInfo = () => { |
||||
|
window.localStorage.removeItem("uid"); |
||||
|
window.localStorage.removeItem("username"); |
||||
|
window.localStorage.removeItem("token"); |
||||
|
} |
||||
@ -0,0 +1,7 @@ |
|||||
|
import post, {get, SERVER_API} from "@/api/base.js"; |
||||
|
|
||||
|
export const pageDeposit = data => get(`think/think-deposit/page`, data) |
||||
|
|
||||
|
export const addDeposit = data => post(`think/think-deposit`, data) |
||||
|
|
||||
|
export const listDepositItem = data => get(`think/think-deposit-item`, data) |
||||
@ -0,0 +1,4 @@ |
|||||
|
import post, {get, SERVER_API} from "@/api/base.js"; |
||||
|
|
||||
|
export const listThinkField = data => get(`think/think-field`, data) |
||||
|
export const listThinkFieldWithTimeList = data => post(`think/think-field/withTimeList`, data) |
||||
@ -0,0 +1,10 @@ |
|||||
|
import post, {put, get, SERVER_API} from "@/api/base.js"; |
||||
|
|
||||
|
export const listThinkCard = data => get(`think/think-card`, data) |
||||
|
export const thinkCardInfo = id => get(`think/think-card/${id}`) |
||||
|
export const updateThinkCard = data => put(`think/think-card`, data) |
||||
|
export const pageCard = data => get(`think/think-card/page`, data) |
||||
|
export const addThinkCard = data => post('think/think-card', data) |
||||
|
export const addThinkCardLog = data => post('think/think-card-log', data) |
||||
|
export const thinkCardCodePay = (id, data) => post(`/think/think-card/codePay/${id}`, data) |
||||
|
export const thinkCardOfflinePayCheckReq = id => post(`/think/think-card/checkWechatPayRes/${id}`) |
||||
@ -0,0 +1,10 @@ |
|||||
|
import post, {get, put, SERVER_API} from "@/api/base.js"; |
||||
|
|
||||
|
export const pageOrder = data => get(`/think/think-order/page`, data) |
||||
|
|
||||
|
export const getThinkOrder = id => get(`/think/think-order/${id}`) |
||||
|
|
||||
|
export const addThinkOrder = data => post(`/think/think-order/add-from-device`, data) |
||||
|
export const thinkOrderCodePay = (id, data) => post(`/think/think-order/codePay/${id}`, data) |
||||
|
export const updateThinkOrder = data => put(`/think/think-order`, data) |
||||
|
export const offlinePayCheckReq = id => post(`/think/think-order/checkWechatPayRes/${id}`) |
||||
@ -0,0 +1,3 @@ |
|||||
|
import post, {get, SERVER_API} from "@/api/base.js"; |
||||
|
|
||||
|
export const printReq = data => post(`/print`, data) |
||||
@ -0,0 +1,4 @@ |
|||||
|
import post, {get, SERVER_API} from "@/api/base.js"; |
||||
|
|
||||
|
export const listThinkSite = data => get(`think/think-site`, data) |
||||
|
export const listThinkSiteTime = data => get(`think/think-site-time`, data) |
||||
@ -0,0 +1,3 @@ |
|||||
|
import post, {get} from "@/api/base.js"; |
||||
|
|
||||
|
export const listThinkVip = data => get('think/think-vip', data) |
||||
@ -0,0 +1,3 @@ |
|||||
|
import post, {get, SERVER_API} from "@/api/base.js"; |
||||
|
|
||||
|
export const pageUsersVip = data => get(`think/think-users-vip/page`, data) |
||||
|
After Width: | Height: | Size: 827 KiB |
|
After Width: | Height: | Size: 496 B |
@ -0,0 +1,68 @@ |
|||||
|
<template> |
||||
|
<el-dialog title="修改密码" v-model="showDialog" top="10px"> |
||||
|
<el-form label-width="100"> |
||||
|
<el-form-item label="原密码"> |
||||
|
<el-input v-model="oldPwd" type="password"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="新密码"> |
||||
|
<el-input v-model="newPwd" type="password"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="确认密码"> |
||||
|
<el-input v-model="confirmPwd" type="password"/> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="showDialog = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="changePwd">确 定</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import {ref, watch} from 'vue' |
||||
|
import {ElMessage} from "element-plus"; |
||||
|
import {changePwdReq} from "@/api/admin.js"; |
||||
|
import {getUserInfo} from "@/api/common.js"; |
||||
|
|
||||
|
let showDialog = defineModel() |
||||
|
let oldPwd = ref(null) |
||||
|
let newPwd = ref(null) |
||||
|
let confirmPwd = ref(null) |
||||
|
const changePwd = async () => { |
||||
|
if (!oldPwd.value) { |
||||
|
ElMessage.error({ |
||||
|
message: '请输入原密码' |
||||
|
}); |
||||
|
return |
||||
|
} |
||||
|
if (!newPwd.value) { |
||||
|
ElMessage.error({ |
||||
|
message: '请输入新密码' |
||||
|
}); |
||||
|
return |
||||
|
} |
||||
|
if (!confirmPwd.value) { |
||||
|
ElMessage.error({ |
||||
|
message: '请输入确认密码' |
||||
|
}); |
||||
|
return |
||||
|
} |
||||
|
if (confirmPwd.value !== newPwd.value) { |
||||
|
ElMessage.error({ |
||||
|
message: '新密码与确认密码不一致' |
||||
|
}); |
||||
|
return |
||||
|
} |
||||
|
const res = await changePwdReq({ |
||||
|
userId: getUserInfo().uid, |
||||
|
password: newPwd.value, |
||||
|
}) |
||||
|
if (res) { |
||||
|
ElMessage.success({ |
||||
|
message: '修改成功' |
||||
|
}); |
||||
|
showDialog.value = false |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</script> |
||||
@ -0,0 +1,136 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
v-model="dialogVisible" |
||||
|
title="收取押金" |
||||
|
width="80%" |
||||
|
:before-close="reload" |
||||
|
> |
||||
|
<el-form label-width="120px"> |
||||
|
<el-form-item label="场馆"> |
||||
|
<el-select size="large" v-model="sid" placeholder="请选择场馆" @change="getDepositItem"> |
||||
|
<el-option |
||||
|
v-for="item in siteList" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="抵押物品"> |
||||
|
<el-select size="large" v-model="formData.itemId" placeholder="请选择抵押物品" @change="selectItem"> |
||||
|
<el-option |
||||
|
v-for="item in depositItemList" |
||||
|
:key="item.value" |
||||
|
:label="item.title" |
||||
|
:value="item.id"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="抵押物品备注"> |
||||
|
<el-input size="large" v-model="formData.remark"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="押金金额"> |
||||
|
<el-input size="large" v-model="formData.money" disabled></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="付款方式" required> |
||||
|
<el-select size="large" v-model="formData.moneyType" placeholder="支付方式选择" style="width: 160px;" clearable> |
||||
|
<el-option :value="1" label="微信支付"/> |
||||
|
<el-option :value="2" label="支付宝"/> |
||||
|
<el-option :value="3" label="现金"/> |
||||
|
<el-option :value="4" label="POS机"/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="支付凭证" required> |
||||
|
<el-input size="large" v-model="formData.money" disabled></el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div class="flex justify-center items-center"> |
||||
|
<el-button size="large" @click="save" type="success" round style="width: 300px">收取</el-button> |
||||
|
<el-button size="large" @click="reload" type="danger" plain round style="width: 200px">关闭</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
|
||||
|
import {onMounted, reactive, ref} from "vue"; |
||||
|
import {listThinkVip} from "@/api/thinkVip.js"; |
||||
|
import {ElMessage} from "element-plus"; |
||||
|
import {addThinkCard, addThinkCardLog, listThinkCard, pageCard} from "@/api/icCard.js"; |
||||
|
import {reloadFlagStore} from "@/store/index.js"; |
||||
|
import dayjs from "dayjs"; |
||||
|
import {listThinkSite} from "@/api/site.js"; |
||||
|
import {addDeposit, listDepositItem} from "@/api/deposit.js"; |
||||
|
|
||||
|
const dialogVisible = defineModel() |
||||
|
|
||||
|
const defaultData = { |
||||
|
itemId: null, |
||||
|
type: 1, |
||||
|
money: null, |
||||
|
moneyType: null, |
||||
|
siteName: '', |
||||
|
name: '-', |
||||
|
phone: '-', |
||||
|
info: '', |
||||
|
remark: '', |
||||
|
isAdmin: true, |
||||
|
} |
||||
|
|
||||
|
let formData = reactive({...defaultData}) |
||||
|
|
||||
|
const save = async () => { |
||||
|
if (formData.remark) { |
||||
|
formData.info = `${formData.info}(${formData.remark})` |
||||
|
} |
||||
|
if (formData.moneyType !== 1) formData.status = 1 |
||||
|
const res = await addDeposit(formData) |
||||
|
if (res) { |
||||
|
ElMessage.success('记录成功') |
||||
|
formData = {...defaultData} |
||||
|
reload() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const sid = ref(null) |
||||
|
const siteList = ref([]) |
||||
|
const getSiteList = async () => { |
||||
|
const res = await listThinkSite({}) |
||||
|
if (res) { |
||||
|
siteList.value = res.data.map(item => { |
||||
|
return { |
||||
|
value: item.id, |
||||
|
label: item.name |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const depositItemList = ref([]) |
||||
|
const getDepositItem = async () => { |
||||
|
const site = siteList.value.find(item => item.value === sid.value) |
||||
|
formData.siteName = site.label |
||||
|
const {data} = await listDepositItem({ |
||||
|
sid: sid.value |
||||
|
}) |
||||
|
depositItemList.value = data |
||||
|
} |
||||
|
|
||||
|
const selectItem = () => { |
||||
|
const item = depositItemList.value.find(item => item.id === formData.itemId) |
||||
|
formData.money = item.amount |
||||
|
} |
||||
|
|
||||
|
const store = reloadFlagStore() |
||||
|
const reload = () => { |
||||
|
store.setData(true) |
||||
|
dialogVisible.value = false |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
store.setData(false) |
||||
|
getSiteList() |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,80 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
v-model="dialogVisible" |
||||
|
title="IC卡详情" |
||||
|
width="60%" |
||||
|
:before-close="reload" |
||||
|
> |
||||
|
<el-descriptions :column="2" v-if="cardInfo" border> |
||||
|
<el-descriptions-item label="卡名称">{{ cardInfo.name }}</el-descriptions-item> |
||||
|
<el-descriptions-item label="卡号">{{ cardInfo.code }}</el-descriptions-item> |
||||
|
<el-descriptions-item label="姓名"> |
||||
|
<el-input v-model="cardInfo.username" @blur="changeField($event, 'username')"></el-input> |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item label="手机号"> |
||||
|
<el-input v-model="cardInfo.phone" @blur="changeField($event, 'phone')"></el-input> |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item label="身份证号">{{ cardInfo.idcard }}</el-descriptions-item> |
||||
|
<el-descriptions-item label="过期时间">{{ |
||||
|
dayjs(cardInfo.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') |
||||
|
}} |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item label="剩余次数">{{ cardInfo.num }}</el-descriptions-item> |
||||
|
<el-descriptions-item label="剩余金额">{{ cardInfo.remainingMoney }}元</el-descriptions-item> |
||||
|
<el-descriptions-item label="可用场馆"> |
||||
|
{{ |
||||
|
cardInfo.siteList.map(item => item.name).join() |
||||
|
}} |
||||
|
</el-descriptions-item> |
||||
|
</el-descriptions> |
||||
|
<template #footer> |
||||
|
<el-space> |
||||
|
<el-button @click="reload" size="large">关闭</el-button> |
||||
|
</el-space> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
|
||||
|
import {reloadFlagStore} from "@/store/index.js"; |
||||
|
import {onMounted, ref} from "vue"; |
||||
|
import dayjs from "dayjs"; |
||||
|
import {pageCard, thinkCardInfo, updateThinkCard} from "@/api/icCard.js"; |
||||
|
import {ElMessage} from "element-plus"; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
id: Number |
||||
|
}) |
||||
|
|
||||
|
const dialogVisible = defineModel() |
||||
|
|
||||
|
const cardInfo = ref(null) |
||||
|
const getInfo = async () => { |
||||
|
const {data} = await thinkCardInfo(props.id) |
||||
|
cardInfo.value = data |
||||
|
} |
||||
|
|
||||
|
const changeField = async (e, field) => { |
||||
|
const res = await updateThinkCard({ |
||||
|
id: props.id, |
||||
|
[field]: e.target.value |
||||
|
}) |
||||
|
if (res && res.code === 0) ElMessage.success('修改成功') |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
store.setData(false) |
||||
|
getInfo() |
||||
|
}) |
||||
|
|
||||
|
const emits = defineEmits(['close']) |
||||
|
|
||||
|
const store = reloadFlagStore() |
||||
|
const reload = () => { |
||||
|
store.setData(true) |
||||
|
dialogVisible.value = false |
||||
|
emits('close') |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,296 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
v-model="dialogVisible" |
||||
|
title="开卡" |
||||
|
width="80%" |
||||
|
:before-close="reload" |
||||
|
> |
||||
|
<el-form label-width="120px"> |
||||
|
<el-row :gutter="10"> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="卡名称" required> |
||||
|
<el-select size="large" v-model="formData.vid" placeholder="请选择VIP卡" @change="selectCard" filterable> |
||||
|
<el-option |
||||
|
v-for="item in vipList" |
||||
|
:key="item.id" |
||||
|
:label="item.name" |
||||
|
:value="item.id"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="VIP卡金额"> |
||||
|
<el-input size="large" v-model="formData.price" disabled placeholder="请选择VIP卡"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="VIP卡月限"> |
||||
|
<el-input size="large" v-model="formData.month" disabled placeholder="请选择VIP卡"> |
||||
|
<template #append>月</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="VIP卡年限"> |
||||
|
<el-input size="large" v-model="formData.term" disabled placeholder="请选择VIP卡"> |
||||
|
<template #append>年</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="VIP卡折扣"> |
||||
|
<el-input size="large" v-model="formData.discount" disabled placeholder="请选择VIP卡"> |
||||
|
<template #append>折</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="VIP卡类型"> |
||||
|
<el-select size="large" v-model="formData.type" placeholder="请选择VIP卡" disabled> |
||||
|
<el-option label="年卡" :value="1"/> |
||||
|
<el-option label="次卡" :value="2"/> |
||||
|
<el-option label="月卡" :value="3"/> |
||||
|
<el-option label="会员IC卡" :value="4"/> |
||||
|
<el-option label="充值卡" :value="5"/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="使用次数"> |
||||
|
<el-input size="large" v-model="formData.count" disabled placeholder="请选择VIP卡"> |
||||
|
<template #append>次</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="每次减少"> |
||||
|
<el-input size="large" v-model="formData.eachMoney" disabled placeholder="请选择VIP卡"> |
||||
|
<template #append>元</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="手机号"> |
||||
|
<el-input size="large" v-model="formData.phone" placeholder="请输入手机号"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="身份证号"> |
||||
|
<el-input size="large" v-model="formData.idcard" placeholder="请输入身份证号"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="用户姓名"> |
||||
|
<el-input size="large" v-model="formData.username" placeholder="请输入用户姓名"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="支付方式" required> |
||||
|
<el-select size="large" v-model="formData.payType" placeholder="请选择支付方式"> |
||||
|
<el-option label="微信支付" :value="1"/> |
||||
|
<el-option label="支付宝支付" :value="2"/> |
||||
|
<el-option label="现金" :value="3"/> |
||||
|
<el-option label="POS机刷卡" :value="4"/> |
||||
|
<el-option label="平安健康卡" :value="5"/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="支付凭证" required v-if="formData.payType !== 1"> |
||||
|
<el-input size="large" v-model="formData.wechatOrder" placeholder="请输入微信支付号/支付凭证号/收据单号"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="支付密码"> |
||||
|
<el-input size="large" v-model="formData.password" placeholder="可留空"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="确认支付密码"> |
||||
|
<el-input size="large" v-model="formData.confirmPassword" placeholder="可留空"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="紧急联系人"> |
||||
|
<el-input size="large" v-model="formData.urgentName" placeholder="请输入紧急联系人"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="紧急联系人电话"> |
||||
|
<el-input size="large" v-model="formData.urgentPhone" placeholder="请输入紧急联系人电话"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button size="large" type="primary" :disabled="!formData.vid || !formData.payType" style="width: 100%" |
||||
|
@click="save"> |
||||
|
确认开卡 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div> |
||||
|
<el-button @click="reload">关闭</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
<el-dialog v-model="showAuthCodeInput" title="扫码支付" append-to-body :close-on-click-modal="false" |
||||
|
@close="close"> |
||||
|
<p class="mt-2">扫码/输入微信支付码</p> |
||||
|
<el-input class="mt-2" v-model="authCode" ref="authCodeInput" @input="onCodeInput" @keyup.enter.native="doPay"/> |
||||
|
<div slot="footer" class="text-center mt-2"> |
||||
|
<el-space> |
||||
|
<el-button type="success" size="large" @click="doPay" |
||||
|
:disabled="!authCode"> |
||||
|
确认支付 |
||||
|
</el-button> |
||||
|
<el-button @click="showAuthCodeInput = false" size="large">关闭</el-button> |
||||
|
</el-space> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
|
||||
|
import {nextTick, onMounted, reactive, ref} from "vue"; |
||||
|
import {listThinkVip} from "@/api/thinkVip.js"; |
||||
|
import {ElLoading, ElMessage} from "element-plus"; |
||||
|
import {addThinkCard, addThinkCardLog, thinkCardCodePay, thinkCardOfflinePayCheckReq} from "@/api/icCard.js"; |
||||
|
import {reloadFlagStore} from "@/store/index.js"; |
||||
|
import {offlinePayCheckReq, thinkOrderCodePay} from "@/api/order.js"; |
||||
|
|
||||
|
const dialogVisible = defineModel() |
||||
|
|
||||
|
const defaultData = { |
||||
|
sid: null, |
||||
|
uid: null, |
||||
|
vid: null, |
||||
|
aid: null, |
||||
|
wechatOrder: null, |
||||
|
code: null, |
||||
|
name: null, |
||||
|
username: '', |
||||
|
phone: '', |
||||
|
price: null, |
||||
|
desc: null, |
||||
|
info: null, |
||||
|
discount: null, |
||||
|
count: null, |
||||
|
eachMoney: null, |
||||
|
remainingMoney: null, |
||||
|
number: null, |
||||
|
num: null, |
||||
|
status: 2, |
||||
|
term: null, |
||||
|
month: null, |
||||
|
type: null, |
||||
|
cardType: null, |
||||
|
vipType: null, |
||||
|
pic: null, |
||||
|
prices: null, |
||||
|
payType: null, |
||||
|
isIntegral: null, |
||||
|
isInvoice: null, |
||||
|
expireTime: null, |
||||
|
makeNum: null, |
||||
|
urgentName: null, |
||||
|
urgentPhone: null, |
||||
|
cardNum: null, |
||||
|
password: null, |
||||
|
useTime: null, |
||||
|
createTime: null, |
||||
|
idcard: null, |
||||
|
confirmPassword: null, |
||||
|
payVoucher: null, |
||||
|
|
||||
|
} |
||||
|
|
||||
|
const selectCard = id => { |
||||
|
const card = vipList.value.find(item => item.id === id) |
||||
|
formData.name = card.name |
||||
|
formData.price = card.price |
||||
|
formData.month = card.month |
||||
|
formData.term = card.term |
||||
|
formData.discount = card.discount |
||||
|
formData.type = card.type |
||||
|
formData.cardType = card.cardType |
||||
|
formData.vipType = card.vipType |
||||
|
formData.prices = card.prices |
||||
|
formData.eachMoney = card.eachMoney |
||||
|
formData.desc = card.desc |
||||
|
formData.info = card.info |
||||
|
formData.num = card.count |
||||
|
formData.count = card.count |
||||
|
formData.sort = card.sort |
||||
|
formData.sid = card.sid |
||||
|
formData.uid = 0 |
||||
|
|
||||
|
} |
||||
|
|
||||
|
let formData = reactive({...defaultData}) |
||||
|
|
||||
|
const newCardId = ref(null) |
||||
|
const save = async () => { |
||||
|
if (formData.password && !formData.confirmPassword) { |
||||
|
ElMessage.error('请输入确认密码') |
||||
|
return |
||||
|
} |
||||
|
if (formData.password && formData.password !== formData.confirmPassword) { |
||||
|
ElMessage.error('两次密码不一致') |
||||
|
return |
||||
|
} |
||||
|
if (formData.payType !== 1 && !formData.wechatOrder) { |
||||
|
ElMessage.error('请输入支付凭证') |
||||
|
return |
||||
|
} |
||||
|
if (formData.payType !== 1) { |
||||
|
formData.status = 1 |
||||
|
} |
||||
|
const res = await addThinkCard(formData) |
||||
|
if (res) { |
||||
|
if (formData.payType === 1) { |
||||
|
newCardId.value = res.data |
||||
|
authCode.value = '' |
||||
|
showAuthCodeInput.value = true |
||||
|
setTimeout(() => { |
||||
|
nextTick(() => { |
||||
|
authCodeInput.value.focus() |
||||
|
}) |
||||
|
}, 0) |
||||
|
} else { |
||||
|
ElMessage.success('开卡成功') |
||||
|
formData = {...defaultData} |
||||
|
reload() |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const showAuthCodeInput = ref(false) |
||||
|
const authCode = ref('') |
||||
|
const authCodeInput = ref(null) |
||||
|
|
||||
|
const onCodeInput = e => { |
||||
|
if (e.length === 18) doPay() |
||||
|
} |
||||
|
|
||||
|
const doPay = async () => { |
||||
|
const loadingInstance = ElLoading.service({fullscreen: true, text: '支付中'}) |
||||
|
const pay_method = parseInt(authCode.value.substring(0, 2)) < 20 ? 0 : 1 |
||||
|
if (pay_method === 1) { |
||||
|
ElMessage.error({message: '不支持支付宝'}) |
||||
|
return |
||||
|
} |
||||
|
await thinkCardCodePay(newCardId.value, {code: authCode.value}).catch(() => { |
||||
|
loadingInstance.close() |
||||
|
}) |
||||
|
await checkPayRes() |
||||
|
loadingInstance.close() |
||||
|
} |
||||
|
|
||||
|
const checkPayRes = async () => { |
||||
|
const loadingInstance = ElLoading.service({fullscreen: true, text: '等待用户输入支付密码'}) |
||||
|
const {data} = await thinkCardOfflinePayCheckReq(newCardId.value) |
||||
|
if (data.state === 'SUCCESS') { |
||||
|
loadingInstance.close() |
||||
|
ElMessage.success({message: '支付成功'}) |
||||
|
setTimeout(() => { |
||||
|
reload() |
||||
|
}, 1000) |
||||
|
}else if (data.state === 'PAYERROR') { |
||||
|
loadingInstance.close() |
||||
|
ElMessage.error({message: '支付失败'}) |
||||
|
setTimeout(() => { |
||||
|
reload() |
||||
|
}, 1000) |
||||
|
} else await checkPayRes() |
||||
|
} |
||||
|
|
||||
|
|
||||
|
const vipList = ref([]) |
||||
|
const getVipList = async () => { |
||||
|
const {data} = await listThinkVip() |
||||
|
vipList.value = data |
||||
|
} |
||||
|
|
||||
|
const store = reloadFlagStore() |
||||
|
const reload = () => { |
||||
|
store.setData(true) |
||||
|
dialogVisible.value = false |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
store.setData(false) |
||||
|
getVipList() |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,349 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
v-model="dialogVisible" |
||||
|
title="订单详情" |
||||
|
width="60%" |
||||
|
:before-close="reload" |
||||
|
> |
||||
|
<el-descriptions :column="2" v-if="orderInfo"> |
||||
|
<el-descriptions-item label="订单号">{{ orderInfo.orderNo }}</el-descriptions-item> |
||||
|
<el-descriptions-item label="微信订单号">{{ orderInfo.wechatOrder }}</el-descriptions-item> |
||||
|
<el-descriptions-item label="姓名">{{ orderInfo.name }}</el-descriptions-item> |
||||
|
<el-descriptions-item label="手机号">{{ orderInfo.phone }}</el-descriptions-item> |
||||
|
<el-descriptions-item label="场馆名称">{{ orderInfo.siteName }}</el-descriptions-item> |
||||
|
<el-descriptions-item label="下单时间">{{ |
||||
|
dayjs(orderInfo.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') |
||||
|
}} |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item label="订单状态"> |
||||
|
<span v-if="orderInfo.orderStatus === 1" class="text-green-500" |
||||
|
>已完成</span> |
||||
|
<span v-if="orderInfo.orderStatus === 2" class="ele-text-placeholder" |
||||
|
>未使用</span> |
||||
|
<span v-if="orderInfo.orderStatus === 3" class="text-gray-400" |
||||
|
>已取消</span> |
||||
|
<span v-if="orderInfo.orderStatus === 4" class="ele-text-warning" |
||||
|
>退款申请中</span> |
||||
|
<span v-if="orderInfo.orderStatus === 5">退款被拒绝</span> |
||||
|
<span v-if="orderInfo.orderStatus === 6">退款成功</span> |
||||
|
<span v-if="orderInfo.orderStatus === 7">客户端申请退款</span> |
||||
|
<span v-if="orderInfo.orderStatus === 9">未完成</span> |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item label="微信昵称">{{ orderInfo.username ?? '无' }}</el-descriptions-item> |
||||
|
<el-descriptions-item label="优惠说明">{{ orderInfo.desc }}</el-descriptions-item> |
||||
|
<el-descriptions-item label="支付状态"> |
||||
|
<span class="text-green-500" v-if="orderInfo.payStatus === 1">已支付</span> |
||||
|
<span class="text-red-500" v-if="orderInfo.payStatus === 2">未支付</span> |
||||
|
<span v-if="orderInfo.payStatus === 0 || orderInfo.payStatus === 3">未付款,占场中</span> |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item label="订单金额"> |
||||
|
<span class="text-xl font-bold">{{ orderInfo.totalPrice }}元</span> |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item label="支付方式"> |
||||
|
<!-- <el-tag v-if="orderInfo.payType === 0">余额支付</el-tag>--> |
||||
|
<el-tag v-if="orderInfo.payType === 1" type="success"> |
||||
|
微信支付 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="orderInfo.payType === 2">积分</el-tag> |
||||
|
<el-tag v-if="orderInfo.payType === 3"> |
||||
|
支付宝 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="orderInfo.payType === 4"> |
||||
|
现金 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="orderInfo.payType === 5"> |
||||
|
POS机 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="orderInfo.payType === 6" type="warning"> |
||||
|
VIP月卡 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="orderInfo.payType === 7" type="warning"> |
||||
|
VIP年卡 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="orderInfo.payType === 8" type="warning"> |
||||
|
VIP次卡 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="orderInfo.payType === 9" type="danger"> |
||||
|
IC月卡 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="orderInfo.payType === 10" type="danger"> |
||||
|
IC年卡 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="orderInfo.payType === 11" type="danger"> |
||||
|
IC次卡 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="orderInfo.payType === 12"> |
||||
|
免费 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="orderInfo.payType === 13" type="warning"> |
||||
|
VIP充值卡 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="orderInfo.payType === 14" type="danger"> |
||||
|
IC充值卡 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="orderInfo.payType === 15"> |
||||
|
积分支付 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="orderInfo.payType === 16" type="warning"> |
||||
|
VIP季卡 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="orderInfo.payType === 17" type="danger"> |
||||
|
IC季卡 |
||||
|
</el-tag> |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item label="实付金额"> |
||||
|
<span class="text-xl font-bold">{{ orderInfo.payPrice }}元</span> |
||||
|
</el-descriptions-item> |
||||
|
</el-descriptions> |
||||
|
<el-table v-if="orderInfo" :data="orderInfo.thinkOrderInfos" style="width: 100%" stripe border |
||||
|
:header-cell-style="{backgroundColor: '#22C55E', color: '#FFF'}" |
||||
|
:cell-style="{backgroundColor: '#e2ffec'}"> |
||||
|
<el-table-column prop="fieldName" label="场地名称" fixed width="200"/> |
||||
|
<el-table-column prop="price" label="成人价"/> |
||||
|
<el-table-column prop="childrenPrice" label="儿童价"/> |
||||
|
<el-table-column prop="dateTime" label="场地预约时间" width="300"/> |
||||
|
<el-table-column prop="adultNum" label="成人数"/> |
||||
|
<el-table-column prop="childrenNum" label="儿童数"/> |
||||
|
<el-table-column label="是否支持儿童票" v-slot="scope"> |
||||
|
<span>{{ scope.row.isChildren === 1 ? '支持' : '不支持' }}</span> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<template #footer> |
||||
|
<el-space> |
||||
|
<el-button type="success" size="large" v-if="orderInfo && orderInfo.payStatus !== 1" @click="showPay = true"> |
||||
|
立即支付 |
||||
|
</el-button> |
||||
|
<el-button type="primary" size="large" @click.native="print" :disabled="disablePrint" |
||||
|
v-if="orderInfo && orderInfo.payStatus !== 2">打印 |
||||
|
</el-button> |
||||
|
<el-button @click="reload" size="large">关闭</el-button> |
||||
|
</el-space> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
<el-dialog |
||||
|
v-model="showPay" |
||||
|
title="订单支付" |
||||
|
width="50%" |
||||
|
> |
||||
|
<el-form label-width="80px"> |
||||
|
<el-form-item label="支付方式"> |
||||
|
<el-select v-model="formData.payType" required> |
||||
|
<el-option label="微信支付" :value="1"/> |
||||
|
<el-option label="现金" :value="4"/> |
||||
|
<el-option label="POS(银行卡/支付宝)" :value="5"/> |
||||
|
<el-option label="IC卡" :value="-1"/> |
||||
|
<el-option label="免费" :value="12"/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="IC卡选择" required v-if="formData.payType === -1"> |
||||
|
<el-select v-model="formData.cid" placeholder="姓名/手机号/卡号搜索" filterable |
||||
|
:remote-method="searchCard" |
||||
|
@change="selectUserCard" remote> |
||||
|
<el-option |
||||
|
v-for="item in userCard" |
||||
|
:key="item.id" |
||||
|
:label="item.title" |
||||
|
:value="item.id"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="支付凭证" required v-if="formData.payType === 4 || formData.payType === 5"> |
||||
|
<el-input v-model="formData.wechatOrder" placeholder="请输入支付凭证"></el-input> |
||||
|
</el-form-item> |
||||
|
|
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<el-space> |
||||
|
<el-button type="success" size="large" @click="selectPay" |
||||
|
:disabled="(formData.payType === -1 && !formData.cid) || ((formData.payType === 4 || formData.payType === 5) && !formData.wechatOrder)"> |
||||
|
确认支付 |
||||
|
</el-button> |
||||
|
<el-button @click="closePay" size="large">关闭</el-button> |
||||
|
</el-space> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
<el-dialog v-model="showAuthCodeInput" title="扫码支付" append-to-body :close-on-click-modal="false" |
||||
|
@close="close"> |
||||
|
<p class="mt-2">扫码/输入微信支付码</p> |
||||
|
<el-input class="mt-2" v-model="authCode" ref="authCodeInput" @input="onCodeInput" @keyup.enter.native="doPay"/> |
||||
|
<div slot="footer" class="text-center mt-2"> |
||||
|
<el-space> |
||||
|
<el-button type="success" size="large" @click="doPay" |
||||
|
:disabled="!authCode || disabledPay"> |
||||
|
确认支付 |
||||
|
</el-button> |
||||
|
<el-button @click="showAuthCodeInput = false" size="large">关闭</el-button> |
||||
|
</el-space> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
|
||||
|
import {reloadFlagStore} from "@/store/index.js"; |
||||
|
import {getThinkOrder, offlinePayCheckReq, thinkOrderCodePay, updateThinkOrder} from "@/api/order.js"; |
||||
|
import {nextTick, onMounted, ref} from "vue"; |
||||
|
import dayjs from "dayjs"; |
||||
|
import {pageCard, updateThinkCard} from "@/api/icCard.js"; |
||||
|
import {printReq} from "@/api/print.js"; |
||||
|
import {ElLoading, ElMessage} from "element-plus"; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
orderId: Number |
||||
|
}) |
||||
|
|
||||
|
const dialogVisible = defineModel() |
||||
|
|
||||
|
const orderInfo = ref(null) |
||||
|
const getOrderInfo = async () => { |
||||
|
const {data} = await getThinkOrder(props.orderId) |
||||
|
console.log(data) |
||||
|
orderInfo.value = data |
||||
|
} |
||||
|
|
||||
|
const showPay = ref(false) |
||||
|
const formData = ref({ |
||||
|
payType: 1, |
||||
|
cid: null, |
||||
|
wechatOrder: null, |
||||
|
}) |
||||
|
|
||||
|
const userCard = ref([]) |
||||
|
const searchCard = async (value) => { |
||||
|
if (!value) return |
||||
|
const {data} = await pageCard({ |
||||
|
page: 1, |
||||
|
limit: 100, |
||||
|
keywords: value, |
||||
|
forAdmin: true |
||||
|
}) |
||||
|
userCard.value = data.list.map(item => { |
||||
|
const expiredTime = dayjs(item.expireTime * 1000).format('YYYY-MM-DD HH:mm:ss') |
||||
|
let siteList = (item.siteList && item.siteList.length) ? item.siteList.map(item => item.name).join() : null |
||||
|
if (siteList) siteList = ` -- ${siteList}` |
||||
|
item.title = `有效期:${expiredTime} -- ${item.username} -- ${item.phone} -- ${item.name}${siteList}` |
||||
|
return item |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
const selectUserCard = async (id) => { |
||||
|
const card = userCard.value.find(item => item.id === id) |
||||
|
if (card) { |
||||
|
for (const key in formData) { |
||||
|
formData[key] = card[key] |
||||
|
} |
||||
|
formData.wechatOrder = null |
||||
|
formData.payType = null |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const closePay = () => { |
||||
|
showPay.value = false |
||||
|
formData.value = { |
||||
|
payType: 1, |
||||
|
cid: null, |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const showAuthCodeInput = ref(false) |
||||
|
const authCode = ref('') |
||||
|
const authCodeInput = ref(null) |
||||
|
const selectPay = async () => { |
||||
|
if (formData.value.payType === 1) { |
||||
|
authCode.value = '' |
||||
|
showAuthCodeInput.value = true |
||||
|
setTimeout(() => { |
||||
|
nextTick(() => { |
||||
|
authCodeInput.value.focus() |
||||
|
}) |
||||
|
}, 0) |
||||
|
} else await changePayStatus() |
||||
|
} |
||||
|
|
||||
|
const onCodeInput = e => { |
||||
|
// if (e.length === 18) doPay() |
||||
|
} |
||||
|
|
||||
|
const disabledPay = ref(false) |
||||
|
const doPay = async () => { |
||||
|
disabledPay.value = true |
||||
|
const loadingInstance = ElLoading.service({fullscreen: true, text: '支付中'}) |
||||
|
const pay_method = parseInt(authCode.value.substring(0, 2)) < 20 ? 0 : 1 |
||||
|
if (pay_method === 1) { |
||||
|
ElMessage.error({message: '不支持支付宝'}) |
||||
|
disabledPay.value = false |
||||
|
return |
||||
|
} |
||||
|
await thinkOrderCodePay(props.orderId, {code: authCode.value}).catch(() => { |
||||
|
disabledPay.value = false |
||||
|
loadingInstance.close() |
||||
|
}) |
||||
|
await checkPayRes() |
||||
|
loadingInstance.close() |
||||
|
} |
||||
|
|
||||
|
const checkPayRes = async () => { |
||||
|
const loadingInstance = ElLoading.service({fullscreen: true, text: '等待用户输入支付密码'}) |
||||
|
const {data} = await offlinePayCheckReq(props.orderId) |
||||
|
if (data.state === 'SUCCESS') { |
||||
|
disabledPay.value = false |
||||
|
loadingInstance.close() |
||||
|
ElMessage.success({message: '支付成功'}) |
||||
|
setTimeout(() => { |
||||
|
reload() |
||||
|
}, 1000) |
||||
|
} else if (data.state === 'PAYERROR') { |
||||
|
disabledPay.value = false |
||||
|
loadingInstance.close() |
||||
|
ElMessage.error({message: '支付失败'}) |
||||
|
setTimeout(() => { |
||||
|
reload() |
||||
|
}, 1000) |
||||
|
} else await checkPayRes() |
||||
|
} |
||||
|
|
||||
|
const changePayStatus = async () => { |
||||
|
await updateThinkOrder({ |
||||
|
id: props.orderId, |
||||
|
payStatus: 1, |
||||
|
payTime: dayjs().unix(), |
||||
|
}) |
||||
|
ElMessage.success('支付成功') |
||||
|
reload() |
||||
|
} |
||||
|
|
||||
|
const disablePrint = ref(false) |
||||
|
const print = async () => { |
||||
|
disablePrint.value = true |
||||
|
ElLoading.service({ |
||||
|
lock: true, |
||||
|
text: '正在打印...', |
||||
|
background: 'rgba(0, 0, 0, 0.7)' |
||||
|
}) |
||||
|
const res = await printReq({ |
||||
|
orderId: props.orderId |
||||
|
}).catch(() => { |
||||
|
disablePrint.value = false |
||||
|
ElLoading.service().close() |
||||
|
}) |
||||
|
disablePrint.value = false |
||||
|
ElLoading.service().close() |
||||
|
console.log(res) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
onMounted(() => { |
||||
|
getOrderInfo() |
||||
|
}) |
||||
|
|
||||
|
const emits = defineEmits(['close']) |
||||
|
|
||||
|
const store = reloadFlagStore() |
||||
|
const reload = () => { |
||||
|
store.setData(true) |
||||
|
showPay.value = false |
||||
|
showAuthCodeInput.value = false |
||||
|
dialogVisible.value = false |
||||
|
emits('close') |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,38 @@ |
|||||
|
<template> |
||||
|
<el-pagination |
||||
|
class="mt-4 justify-center" |
||||
|
background |
||||
|
layout="prev, pager, next, total, sizes, jumper" |
||||
|
@size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentChange" |
||||
|
:page-size="perPage" |
||||
|
:page-sizes="[5, 10, 20, 50, 100, 200, 500, 1000, 2000, 5000, 10000]" |
||||
|
:total="total"/> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
defineProps({ |
||||
|
perPage: { |
||||
|
type: Number, |
||||
|
default: 50 |
||||
|
}, |
||||
|
total: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
}, |
||||
|
currentPage: { |
||||
|
type: Number, |
||||
|
default: 1 |
||||
|
}, |
||||
|
|
||||
|
}) |
||||
|
|
||||
|
const emits = defineEmits(['change-size', 'change-page']) |
||||
|
const handleSizeChange = size =>{ |
||||
|
emits('change-size', {size}) |
||||
|
} |
||||
|
|
||||
|
const handleCurrentChange = page =>{ |
||||
|
emits('change-page', {page}) |
||||
|
} |
||||
|
</script> |
||||
@ -0,0 +1,229 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
v-model="dialogVisible" |
||||
|
title="续卡" |
||||
|
width="80%" |
||||
|
:before-close="reload" |
||||
|
> |
||||
|
<el-form label-width="120px"> |
||||
|
<el-row :gutter="10"> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="IC卡搜索"> |
||||
|
<el-select size="large" v-model="selectedCard" placeholder="姓名/手机号/卡号搜索" filterable :remote-method="searchCard" |
||||
|
@change="selectUserCard" remote> |
||||
|
<el-option |
||||
|
v-for="item in userCard" |
||||
|
:key="item.id" |
||||
|
:label="item.title" |
||||
|
:value="item.id"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="IC卡名称"> |
||||
|
<el-input size="large" v-model="formData.name" disabled placeholder="请选择IC卡"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="IC卡可用场馆"> |
||||
|
<template v-if="formData.siteList && formData.siteList.length">{{ |
||||
|
formData.siteList.map(item => item.name).join() |
||||
|
}}</template> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="IC卡年限"> |
||||
|
<el-input size="large" v-model="formData.term" disabled placeholder="请选择IC卡"> |
||||
|
<template #append>年</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="IC卡月限"> |
||||
|
<el-input size="large" v-model="formData.month" disabled placeholder="请选择IC卡"> |
||||
|
<template #append>月</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="IC卡折扣"> |
||||
|
<el-input size="large" v-model="formData.discount" disabled placeholder="请选择IC卡"> |
||||
|
<el-input v-model="formData.term" disabled placeholder="请选择IC卡"> |
||||
|
<template #append>折</template> |
||||
|
</el-input> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="IC卡类型"> |
||||
|
<el-select size="large" v-model="formData.type" placeholder="请选择VIP卡" disabled> |
||||
|
<el-option label="年卡" :value="1"/> |
||||
|
<el-option label="次卡" :value="2"/> |
||||
|
<el-option label="月卡" :value="3"/> |
||||
|
<el-option label="会员IC卡" :value="4"/> |
||||
|
<el-option label="充值卡" :value="5"/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="使用次数"> |
||||
|
<el-input size="large" v-model="formData.count" disabled placeholder="请选择IC卡"> |
||||
|
<template #append>次</template> |
||||
|
</el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="12"> |
||||
|
<el-form-item label="手机号"> |
||||
|
<el-input size="large" v-model="formData.phone" disabled placeholder="请选择VIP卡"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="身份证号"> |
||||
|
<el-input size="large" v-model="formData.idcard" disabled placeholder="请选择VIP卡"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="用户姓名"> |
||||
|
<el-input size="large" v-model="formData.username" disabled placeholder="请选择VIP卡"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="支付方式" required> |
||||
|
<el-select size="large" v-model="formData.payType" placeholder="请选择支付方式"> |
||||
|
<el-option label="微信支付" :value="1"/> |
||||
|
<el-option label="支付宝支付" :value="2"/> |
||||
|
<el-option label="现金" :value="3"/> |
||||
|
<el-option label="POS机刷卡" :value="4"/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="支付凭证" required> |
||||
|
<el-input size="large" v-model="formData.wechatOrder" placeholder="请输入微信支付号/支付凭证号/收据单号"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="付款金额"> |
||||
|
<span v-if="formData.price" class="text-xl text-red-500">{{ formData.price }}元</span> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="充值次数"> |
||||
|
<span v-if="formData.count" class="text-xl text-red-500">{{ formData.count }}次</span> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button size="large" type="primary" :disabled="!formData.vid || !formData.payType" style="width: 100%" @click="save"> |
||||
|
确认充值 |
||||
|
</el-button> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div> |
||||
|
<el-button @click="reload">关闭</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
|
||||
|
import {onMounted, reactive, ref} from "vue"; |
||||
|
import {listThinkVip} from "@/api/thinkVip.js"; |
||||
|
import {ElMessage} from "element-plus"; |
||||
|
import {addThinkCard, addThinkCardLog, listThinkCard, pageCard} from "@/api/icCard.js"; |
||||
|
import {reloadFlagStore} from "@/store/index.js"; |
||||
|
import dayjs from "dayjs"; |
||||
|
|
||||
|
const dialogVisible = defineModel() |
||||
|
|
||||
|
const defaultData = { |
||||
|
sid: null, |
||||
|
uid: null, |
||||
|
vid: null, |
||||
|
aid: null, |
||||
|
wechatOrder: null, |
||||
|
code: null, |
||||
|
name: null, |
||||
|
username: null, |
||||
|
phone: null, |
||||
|
price: null, |
||||
|
desc: null, |
||||
|
info: null, |
||||
|
discount: null, |
||||
|
count: null, |
||||
|
eachMoney: null, |
||||
|
remainingMoney: null, |
||||
|
number: null, |
||||
|
num: null, |
||||
|
status: null, |
||||
|
term: null, |
||||
|
month: null, |
||||
|
type: null, |
||||
|
cardType: null, |
||||
|
vipType: null, |
||||
|
pic: null, |
||||
|
prices: null, |
||||
|
payType: null, |
||||
|
isIntegral: null, |
||||
|
isInvoice: null, |
||||
|
expireTime: null, |
||||
|
makeNum: null, |
||||
|
urgentName: null, |
||||
|
urgentPhone: null, |
||||
|
cardNum: null, |
||||
|
password: null, |
||||
|
useTime: null, |
||||
|
createTime: null, |
||||
|
idcard: null, |
||||
|
confirmPassword: null, |
||||
|
payVoucher: null, |
||||
|
siteList: [], |
||||
|
} |
||||
|
|
||||
|
let formData = reactive({...defaultData}) |
||||
|
|
||||
|
const save = async () => { |
||||
|
if (formData.payType !== 1 && !formData.wechatOrder) { |
||||
|
ElMessage.error('请输入支付凭证') |
||||
|
return |
||||
|
} |
||||
|
const logData = { |
||||
|
code: formData.code, |
||||
|
payType: formData.payType, |
||||
|
money: formData.price, |
||||
|
wechatOrder: formData.wechatOrder, |
||||
|
count: formData.count, |
||||
|
createTime: dayjs().unix(), |
||||
|
} |
||||
|
const res = await addThinkCardLog(logData) |
||||
|
if (res) { |
||||
|
ElMessage.success('续费成功') |
||||
|
formData = {...defaultData} |
||||
|
reload() |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const selectedCard = ref() |
||||
|
const userCard = ref([]) |
||||
|
const searchCard = async (value) => { |
||||
|
if (!value) return |
||||
|
const {data} = await pageCard({ |
||||
|
page:1, |
||||
|
limit: 100, |
||||
|
keywords: value, |
||||
|
forAdmin: true |
||||
|
}) |
||||
|
userCard.value = data.list.map(item => { |
||||
|
const expiredTime = dayjs(item.expireTime * 1000).format('YYYY-MM-DD HH:mm:ss') |
||||
|
let siteList = (item.siteList && item.siteList.length) ? item.siteList.map(item => item.name).join() : null |
||||
|
if (siteList) siteList = ` -- ${siteList}` |
||||
|
item.title = `有效期:${expiredTime} -- ${item.username} -- ${item.phone} -- ${item.name}${siteList}` |
||||
|
return item |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
const selectUserCard = async (id) => { |
||||
|
const card = userCard.value.find(item => item.id === id) |
||||
|
if (card) { |
||||
|
for (const key in formData) { |
||||
|
formData[key] = card[key] |
||||
|
} |
||||
|
formData.wechatOrder = null |
||||
|
formData.payType = null |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const vipList = ref([]) |
||||
|
const getVipList = async () => { |
||||
|
const {data} = await listThinkVip() |
||||
|
vipList.value = data |
||||
|
} |
||||
|
|
||||
|
const store = reloadFlagStore() |
||||
|
const reload = () => { |
||||
|
store.setData(true) |
||||
|
dialogVisible.value = false |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
store.setData(false) |
||||
|
getVipList() |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,397 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
v-model="dialogVisible" |
||||
|
:title="mode === 'select' ? '场地选择' : `场地预定 -- ${siteName}`" |
||||
|
width="80%" |
||||
|
top="10px" |
||||
|
:before-close="reload" |
||||
|
:close-on-click-modal="false" |
||||
|
> |
||||
|
<div class="flex justify-start items-start flex-wrap" v-if="mode === 'select'"> |
||||
|
<div v-for="(item, index) in siteList" |
||||
|
class="w-1/4 p-2 cursor-pointer" |
||||
|
:key="index"> |
||||
|
<div style="height: 100px" |
||||
|
@click="selectSite(item)" |
||||
|
class="rounded-xl flex justify-center items-center bg-gradient-to-b from-cyan-500 to-blue-500 text-white w-full h-full"> |
||||
|
{{ item.name }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-else> |
||||
|
<div class="flex justify-start items-start flex-wrap"> |
||||
|
<div v-for="(item, index) in siteList" |
||||
|
class="p-2 cursor-pointer" |
||||
|
style="flex: 0 0 15%" |
||||
|
:key="index"> |
||||
|
<div style="height: 50px" |
||||
|
@click="selectSite(item)" |
||||
|
:class="[item.id === sid ? 'bg-gradient-to-b from-cyan-500 to-blue-500 text-white' : 'border']" |
||||
|
class="rounded-xl flex justify-center items-center w-full h-full"> |
||||
|
{{ item.name }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-divider/> |
||||
|
<div class="flex justify-start items-start overflow-y-auto"> |
||||
|
<div v-for="(item, index) in dateList" |
||||
|
class="p-2 cursor-pointer" |
||||
|
style="flex: 0 0 10%" |
||||
|
:key="index"> |
||||
|
<div style="height: 50px" |
||||
|
@click="selectDate(item)" |
||||
|
:class="[item === date ? 'bg-gradient-to-b from-cyan-300 to-green-500 text-white' : 'border']" |
||||
|
class="rounded-xl flex justify-center items-center w-full h-full"> |
||||
|
{{ chDateStr(item) }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-divider/> |
||||
|
<div class="flex justify-start items-start mb-2"> |
||||
|
<div class="flex justify-center items-center" v-if="fieldList.length && fieldList[0].isHalf === 1"> |
||||
|
<el-switch v-model="formData.type" active-color="#13ce66" inactive-color="#ff4949" active-text="全场" |
||||
|
:active-value="1" :inactive-value="2" |
||||
|
inactive-text="半场"></el-switch> |
||||
|
</div> |
||||
|
<div class="flex justify-center items-center mx-2"> |
||||
|
<span>可预约</span> |
||||
|
<div style="width: 30px; height: 30px " class="border ml-2"></div> |
||||
|
</div> |
||||
|
<div class="flex justify-center items-center mx-2"> |
||||
|
<span>选中</span> |
||||
|
<div style="width: 30px; height: 30px " class="border ml-2 bg-blue-400"></div> |
||||
|
</div> |
||||
|
<div class="flex justify-center items-center mx-2"> |
||||
|
<span>已预约半场</span> |
||||
|
<div style="width: 30px; height: 30px " class="border ml-2 bg-green-300"></div> |
||||
|
</div> |
||||
|
<div class="flex justify-center items-center mx-2"> |
||||
|
<span>已出售</span> |
||||
|
<div style="width: 30px; height: 30px " class="border ml-2 bg-red-400"></div> |
||||
|
</div> |
||||
|
<div class="flex justify-center items-center mx-2"> |
||||
|
<span>已使用</span> |
||||
|
<div style="width: 30px; height: 30px " class="border ml-2 bg-gray-300"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class=" overflow-x-auto"> |
||||
|
<div class="flex justify-start items-start"> |
||||
|
<div style="height: 40px; flex: 0 0 200px" |
||||
|
class="flex justify-center items-center w-full h-full bg-emerald-400 text-white border sticky left-0"> |
||||
|
时间 |
||||
|
</div> |
||||
|
<div v-for="(item, index) in fieldList" |
||||
|
style="height: 40px; flex: 0 0 200px" |
||||
|
class="cursor-pointer" |
||||
|
:key="index"> |
||||
|
<div |
||||
|
class="flex justify-center items-center w-full h-full bg-emerald-400 text-white border"> |
||||
|
{{ item.name }} |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="flex justify-start items-start flex-col"> |
||||
|
<div v-for="(item, index) in periodList" |
||||
|
class="cursor-pointer flex justify-start items-start" |
||||
|
:key="index"> |
||||
|
<div |
||||
|
style="height: 40px; width: 200px" |
||||
|
@click="selectTime(item.timePeriod)" |
||||
|
:class="[selectedTimeList.includes(item.timePeriod) ? 'bg-cyan-300' : '']" |
||||
|
class="flex justify-center items-center w-full h-full border sticky left-0 bg-white"> |
||||
|
{{ item.timePeriod }} |
||||
|
</div> |
||||
|
<div v-for="field in fieldList" |
||||
|
style="height: 40px; width: 200px" |
||||
|
class="cursor-pointer" |
||||
|
:key="field.id"> |
||||
|
<div |
||||
|
@click="selectField(item, field)" |
||||
|
:class="[(selectedTimeList.includes(item.timePeriod)) ? 'bg-cyan-50' : '', |
||||
|
selectedFieldTimeList.includes(`${field.id}_${item.id}`) ? 'bg-blue-400 text-white' : '', |
||||
|
checkSold(item, field) ? 'bg-gray-300 text-white' : '', |
||||
|
checkSoldButNotUsed(item, field) ? 'bg-red-400 text-white' : '', |
||||
|
]" |
||||
|
class="flex justify-center items-center w-full h-full border"> |
||||
|
{{ item.price }}元 |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<template #footer> |
||||
|
<div class="flex justify-center items-center border-t pt-2"> |
||||
|
<el-button :disabled="!selectedFieldTimeList.length" type="success" size="large" @click="openConfirm" round |
||||
|
style="width: 200px" v-if="mode === 'site'">预定 |
||||
|
</el-button> |
||||
|
<el-button type="danger" plain size="large" @click="reload" round style="width: 200px">关闭</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
<el-dialog |
||||
|
v-model="showConfirm" |
||||
|
title="场地确认" |
||||
|
width="60%" |
||||
|
top="20px" |
||||
|
:close-on-click-modal="false" |
||||
|
> |
||||
|
<el-form label-width="140px"> |
||||
|
<el-form-item label="姓名" required> |
||||
|
<el-input v-model="formData.name" placeholder="请输入姓名"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="手机号码" required> |
||||
|
<el-input v-model="formData.phone" placeholder="请输入姓名"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="场馆"> |
||||
|
<el-input v-model="formData.siteName" readonly/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="合计金额"> |
||||
|
<el-input v-model="formData.price" readonly/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="场地"> |
||||
|
<el-space direction="vertical"> |
||||
|
<el-button type="primary" v-for="(item, index) in selectedFieldList" :key="index">{{ item }}</el-button> |
||||
|
</el-space> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<div class="flex justify-center items-center border-t pt-2"> |
||||
|
<el-button @click.native="action(-1)" type="primary" plain size="large" round |
||||
|
:disabled="!formData.name || !formData.phone" |
||||
|
style="width: 200px">确认预定(暂不支付) |
||||
|
</el-button> |
||||
|
<el-button @click.native="action(3)" type="success" :disabled="!formData.name || !formData.phone" size="large" |
||||
|
round style="width: 200px"> |
||||
|
确认预定并支付 |
||||
|
</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
<OrderInfo v-model="showInfo" v-if="showInfo" :order-id="orderId" @close="getFieldList"></OrderInfo> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
|
||||
|
import {onMounted, reactive, ref} from "vue"; |
||||
|
import {listThinkSite, listThinkSiteTime} from "@/api/site.js"; |
||||
|
import {reloadFlagStore} from "@/store/index.js"; |
||||
|
import dayjs from "dayjs"; |
||||
|
import {listThinkFieldWithTimeList} from "@/api/field.js"; |
||||
|
import {ElMessage} from "element-plus"; |
||||
|
import {addThinkOrder} from "@/api/order.js"; |
||||
|
import OrderInfo from "@/components/OrderInfo.vue"; |
||||
|
|
||||
|
const siteList = ref([]) |
||||
|
const getSiteList = async () => { |
||||
|
const {data} = await listThinkSite() |
||||
|
siteList.value = data |
||||
|
} |
||||
|
|
||||
|
const chDateStr = (date) => { |
||||
|
const week = ['日', '一', '二', '三', '四', '五', '六'] |
||||
|
return `${date} 星期${week[dayjs(date).day()]}` |
||||
|
} |
||||
|
|
||||
|
const dateList = ref([]) |
||||
|
const date = ref() |
||||
|
const week = ref() |
||||
|
const setDateList = async () => { |
||||
|
const dayNum = 180 |
||||
|
dateList.value = [] |
||||
|
for (let i = 0; i < dayNum; i++) { |
||||
|
dateList.value.push(dayjs().add(i, 'day').format('YYYY-MM-DD')) |
||||
|
} |
||||
|
selectDate(dateList.value[0]) |
||||
|
} |
||||
|
|
||||
|
const selectDate = (item) => { |
||||
|
date.value = item |
||||
|
week.value = dayjs(item).format('d') === '0' ? '7' : dayjs().format('d') |
||||
|
makeTimeList() |
||||
|
} |
||||
|
|
||||
|
const dialogVisible = defineModel() |
||||
|
const mode = ref('select') |
||||
|
const sid = ref(null) |
||||
|
const siteName = ref('') |
||||
|
|
||||
|
const selectSite = (item) => { |
||||
|
sid.value = item.id |
||||
|
siteName.value = item.name |
||||
|
mode.value = 'site' |
||||
|
getSiteTimeList() |
||||
|
} |
||||
|
|
||||
|
|
||||
|
const siteTimeList = ref([]) |
||||
|
const getSiteTimeList = async () => { |
||||
|
const {data} = await listThinkSiteTime({ |
||||
|
sid: sid.value, |
||||
|
date: date.value |
||||
|
}) |
||||
|
siteTimeList.value = data |
||||
|
siteTimeList.value = siteTimeList.value.filter(item => { |
||||
|
return JSON.parse(item.week).map(Number).includes(parseInt(week.value)) |
||||
|
}) |
||||
|
makeTimeList() |
||||
|
} |
||||
|
|
||||
|
const periodList = ref([]) |
||||
|
const makeTimeList = () => { |
||||
|
periodList.value = [] |
||||
|
selectedTimeList.value = [] |
||||
|
selectedFieldTimeList.value = [] |
||||
|
siteTimeList.value.forEach(item => { |
||||
|
const weekList = JSON.parse(item.week) |
||||
|
if (parseInt(sid.value) === 37) { |
||||
|
const today = dayjs().format('YYYY-MM-DD') |
||||
|
if (dayjs().isBefore(dayjs(today + ' 21:00:00'))) periodList.value.push(item) |
||||
|
} else { |
||||
|
if (weekList.includes(week.value)) periodList.value.push(item) |
||||
|
} |
||||
|
}) |
||||
|
// console.log(periodList.value) |
||||
|
getFieldList() |
||||
|
} |
||||
|
|
||||
|
const fidList = ref([]) |
||||
|
const fieldList = ref([]) |
||||
|
const getFieldList = async () => { |
||||
|
if (!periodList.value.length) return |
||||
|
const periodVoList = [] |
||||
|
periodList.value.forEach(item => { |
||||
|
const timestamp = dayjs(date.value + ' ' + item.timePeriod.split(' - ')[0]).unix() |
||||
|
periodVoList.push({ |
||||
|
timestamp, |
||||
|
period: item.timePeriod, |
||||
|
id: item.id |
||||
|
}) |
||||
|
}) |
||||
|
const res = await listThinkFieldWithTimeList({ |
||||
|
sid: sid.value, |
||||
|
periodVoList |
||||
|
}) |
||||
|
if (res) fieldList.value = res.data |
||||
|
console.log(fieldList.value) |
||||
|
console.log(periodList.value) |
||||
|
} |
||||
|
|
||||
|
const selectedTimeList = ref([]) |
||||
|
const selectTime = (item) => { |
||||
|
if (selectedTimeList.value.includes(item)) { |
||||
|
selectedTimeList.value = selectedTimeList.value.filter(i => i !== item) |
||||
|
} else { |
||||
|
selectedTimeList.value.push(item) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const selectedFieldTimeList = ref([]) |
||||
|
const selectField = (time, field) => { |
||||
|
const period = field.periodVoList.find(item => item.id === time.id) |
||||
|
if (sid.value === 37) { |
||||
|
const today = dayjs().format('YYYY-MM-DD') |
||||
|
if (dayjs().isAfter(dayjs(today + ' 21:00:00'))) return ElMessage.error('已超时,无法订场'); |
||||
|
} else { |
||||
|
if (dayjs().unix() > period.timestamp) return ElMessage.error('已超时,无法订场'); |
||||
|
} |
||||
|
if (period.sold || period.took) return |
||||
|
const item = `${field.id}_${time.id}` |
||||
|
if (selectedFieldTimeList.value.includes(item)) { |
||||
|
selectedFieldTimeList.value = selectedFieldTimeList.value.filter(i => i !== item) |
||||
|
} else { |
||||
|
selectedFieldTimeList.value.push(item) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const checkSold = (time, field) => { |
||||
|
const item = field.periodVoList.find(item => item.id === time.id) |
||||
|
if (item) return item.sold |
||||
|
return false |
||||
|
} |
||||
|
|
||||
|
const checkSoldButNotUsed = (time, field) => { |
||||
|
const item = field.periodVoList.find(item => item.id === time.id) |
||||
|
if (item) return item.took |
||||
|
return false |
||||
|
} |
||||
|
|
||||
|
const selectedFieldList = ref([]) |
||||
|
const showConfirm = ref(false) |
||||
|
const openConfirm = () => { |
||||
|
showConfirm.value = true |
||||
|
selectedFieldList.value = [] |
||||
|
formData.price = selectedFieldTimeList.value.map(item => { |
||||
|
const [fid, tid] = item.split('_') |
||||
|
const field = fieldList.value.find(i => i.id === parseInt(fid)) |
||||
|
const period = periodList.value.find(i => i.id === parseInt(tid)) |
||||
|
selectedFieldList.value.push(`${date.value} ${period.timePeriod} ${field.name}`) |
||||
|
return period.price |
||||
|
}).reduce((a, b) => a + b, 0) |
||||
|
const site = siteList.value.find(item => item.id === parseInt(sid.value)) |
||||
|
formData.siteName = site.name |
||||
|
formData.sid = site.id |
||||
|
} |
||||
|
|
||||
|
const formData = reactive({ |
||||
|
name: '', |
||||
|
phone: '', |
||||
|
siteName: '', |
||||
|
price: '', |
||||
|
sid: '', |
||||
|
type: 1, |
||||
|
payType: 0, |
||||
|
isChildren: 2, |
||||
|
thinkOrderInfos: [] |
||||
|
}) |
||||
|
|
||||
|
|
||||
|
const showInfo = ref(false) |
||||
|
const orderId = ref() |
||||
|
const action = async (payStatus) => { |
||||
|
formData.thinkOrderInfos = [] |
||||
|
let formStartTime = '' |
||||
|
selectedFieldTimeList.value.forEach((item, index) => { |
||||
|
const [fid, tid] = item.split('_') |
||||
|
const field = fieldList.value.find(i => i.id === parseInt(fid)) |
||||
|
const period = periodList.value.find(i => i.id === parseInt(tid)) |
||||
|
const [start, end] = period.timePeriod.split(' - ') |
||||
|
let startTime = dayjs(`${date.value} ${start}:00`).unix() |
||||
|
if (index === 0) formStartTime = startTime |
||||
|
formData.thinkOrderInfos.push({ |
||||
|
sid: formData.sid, |
||||
|
fid, |
||||
|
siteTimeId: tid, |
||||
|
siteName: formData.siteName, |
||||
|
fieldName: field.name, |
||||
|
dateTime: `${date.value}(${chDateStr(date.value).split(' ')[1]})${period.timePeriod}`, |
||||
|
payStatus: 3, |
||||
|
type: formData.type, |
||||
|
mergeData: `${date.value}${start}${end}${formData.sid}${fid}`, |
||||
|
startTime, |
||||
|
isChildren: formData.isChildren, |
||||
|
adultNum: 1, |
||||
|
childrenNum: 0, |
||||
|
}) |
||||
|
}) |
||||
|
formData.startTime = formStartTime |
||||
|
formData.payStatus = 3 |
||||
|
const {data} = await addThinkOrder(formData) |
||||
|
orderId.value = data |
||||
|
showConfirm.value = false |
||||
|
showInfo.value = true |
||||
|
selectedFieldTimeList.value = [] |
||||
|
selectedTimeList.value = [] |
||||
|
} |
||||
|
|
||||
|
const store = reloadFlagStore() |
||||
|
const reload = () => { |
||||
|
store.setData(true) |
||||
|
dialogVisible.value = false |
||||
|
} |
||||
|
|
||||
|
onMounted(() => { |
||||
|
getSiteList() |
||||
|
setDateList() |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,11 @@ |
|||||
|
const hostUrl = 'https://gxtyzx-api2.websoft.top/api' |
||||
|
|
||||
|
export default { |
||||
|
define: { |
||||
|
'process.env': { |
||||
|
'VUE_APP_SERVER_API': 'https://gxtyzx-server.websoft.top/api', |
||||
|
'VUE_APP_RESOURCE_URL': hostUrl, |
||||
|
'VUE_APP_BASE_API': hostUrl, |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,14 @@ |
|||||
|
const hostUrl = 'https://gxtyzx-api2.websoft.top/api' |
||||
|
// const hostUrl = 'http://localhost:9099/api'
|
||||
|
|
||||
|
|
||||
|
export default { |
||||
|
define: { |
||||
|
'process.env': { |
||||
|
'VUE_APP_SERVER_API': 'https://gxtyzx-server.websoft.top/api', |
||||
|
'VUE_APP_RESOURCE_URL': hostUrl, |
||||
|
'VUE_APP_BASE_API': hostUrl, |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
export {hostUrl} |
||||
@ -0,0 +1,25 @@ |
|||||
|
import {createApp} from 'vue' |
||||
|
import App from './App.vue' |
||||
|
import './style.css' |
||||
|
|
||||
|
import ElementPlus from 'element-plus' |
||||
|
import zhCn from 'element-plus/dist/locale/zh-cn.mjs' |
||||
|
import 'element-plus/dist/index.css' |
||||
|
import * as ElementPlusIconsVue from '@element-plus/icons-vue' |
||||
|
import Page from './components/Page.vue' |
||||
|
import { createPinia } from 'pinia' |
||||
|
|
||||
|
import router from './router' |
||||
|
|
||||
|
const app = createApp(App) |
||||
|
|
||||
|
app.use(ElementPlus, {locale: zhCn}).use(router).component('page', Page) |
||||
|
|
||||
|
const pinia = createPinia() |
||||
|
app.use(pinia) |
||||
|
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { |
||||
|
app.component(key, component) |
||||
|
} |
||||
|
|
||||
|
|
||||
|
app.mount('#app') |
||||
@ -0,0 +1,118 @@ |
|||||
|
<template> |
||||
|
<div class="w-full"> |
||||
|
<div class=" m-6 rounded-xl"> |
||||
|
<div class="p-3 w-full bg-white rounded-xl"> |
||||
|
<el-space alignment="flex-end"> |
||||
|
<div class="flex flex-col justify-start items-start"> |
||||
|
<span class="text-sm text-gray-500">物品名称</span> |
||||
|
<el-input size="large" style="width: 300px" v-model="keywords" placeholder="物品名称筛选" |
||||
|
@keyup.enter.native="getList(true)" |
||||
|
clearable/> |
||||
|
</div> |
||||
|
<div class="flex flex-col justify-start items-start"> |
||||
|
<span class="text-sm text-gray-500">下单时间</span> |
||||
|
<el-date-picker size="large" v-model="createTimeRange" type="daterange" placeholder="下单时间筛选"></el-date-picker> |
||||
|
</div> |
||||
|
<el-button size="large" icon="Search" @click.native="getList(true)" type="primary"> |
||||
|
搜索 |
||||
|
</el-button> |
||||
|
<el-button size="large" icon="RefreshRight" @click.native="init" type="warning" |
||||
|
margin-left="mx-4">重置 |
||||
|
</el-button> |
||||
|
</el-space> |
||||
|
</div> |
||||
|
<div class="p-3 w-full rounded-xl mt-4 bg-white"> |
||||
|
<el-table size="large" :data="list" stripe v-loading="loading" :height="tableHeight"> |
||||
|
<el-table-column prop="money" label="押金"/> |
||||
|
<el-table-column prop="info" label="抵押物名称"/> |
||||
|
<el-table-column label="押金类型" v-slot="scope"> |
||||
|
<span v-if="scope.row.type === 1">收取押金</span> |
||||
|
<span v-if="scope.row.type === 2">退押金</span> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="siteName" label="场馆名称"/> |
||||
|
<el-table-column label="支付方式" v-slot="scope"> |
||||
|
<el-tag v-if="scope.row.moneyType === 1" type="success"> |
||||
|
微信支付 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="scope.row.moneyType === 2"> |
||||
|
支付宝 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="scope.row.moneyType === 3"> |
||||
|
现金 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="scope.row.moneyType === 4"> |
||||
|
POS机 |
||||
|
</el-tag> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="押金状态" v-slot="scope"> |
||||
|
<span class="text-green-500" v-if="scope.row.status === 1">已付</span> |
||||
|
<span class="text-blue-500" v-if="scope.row.status === 2">已退</span> |
||||
|
<span class="text-gray-300" v-if="scope.row.status === 0">未付</span> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="支付时间" v-slot="scope"> |
||||
|
<div>{{ dayjs(scope.row.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<page :per-page="perPage" :current-page="currentPage" :total="total" @change-size="changeSize" |
||||
|
@change-page="changePage"/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import {onMounted, ref} from 'vue' |
||||
|
import dayjs from "dayjs"; |
||||
|
import {pageDeposit} from "@/api/deposit.js"; |
||||
|
|
||||
|
const list = ref([]) |
||||
|
const loading = ref(true) |
||||
|
const perPage = ref(20) |
||||
|
const total = ref(0) |
||||
|
const currentPage = ref(1) |
||||
|
|
||||
|
const changeSize = ({size}) => { |
||||
|
perPage.value = size |
||||
|
getList(true) |
||||
|
} |
||||
|
|
||||
|
const changePage = ({page}) => { |
||||
|
currentPage.value = page |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
const keywords = ref('') |
||||
|
const payType = ref(null) |
||||
|
const createTimeRange = ref([]) |
||||
|
const getList = async (reload = false) => { |
||||
|
let createTimeStart = null, createTimeEnd = null, orderTimeStart = null, orderTimeEnd = null |
||||
|
if (reload) { |
||||
|
currentPage.value = 1 |
||||
|
loading.value = true |
||||
|
} |
||||
|
loading.value = true |
||||
|
if (createTimeRange.value && createTimeRange.value.length) { |
||||
|
createTimeStart = dayjs(createTimeRange.value[0]).unix() |
||||
|
createTimeEnd = dayjs(createTimeRange.value[1] + ' 23:59:59').unix() |
||||
|
} |
||||
|
|
||||
|
const res = await pageDeposit({ |
||||
|
page: currentPage.value, |
||||
|
limit: perPage.value, |
||||
|
keywords: keywords.value ?? null, |
||||
|
createTimeStart: createTimeStart ?? null, |
||||
|
createTimeEnd: createTimeEnd ?? null, |
||||
|
forAdmin: true |
||||
|
}) |
||||
|
loading.value = false |
||||
|
total.value = res.data.count |
||||
|
list.value = res.data.list |
||||
|
} |
||||
|
|
||||
|
const tableHeight = ref(1080) |
||||
|
onMounted(async () => { |
||||
|
tableHeight.value = document.body.clientHeight - 260 |
||||
|
await getList() |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,142 @@ |
|||||
|
<template> |
||||
|
<div class="w-full"> |
||||
|
<div class=" m-6 rounded-xl"> |
||||
|
<div class="p-3 w-full bg-white rounded-xl"> |
||||
|
<el-space alignment="flex-end"> |
||||
|
<div class="flex flex-col justify-start items-start"> |
||||
|
<span class="text-sm text-gray-500">关键词</span> |
||||
|
<el-input size="large" style="width: 300px" v-model="keywords" placeholder="姓名/手机号/身份证/IC卡号筛选" |
||||
|
@keyup.enter.native="getList(true)" |
||||
|
clearable/> |
||||
|
</div> |
||||
|
<div class="flex flex-col justify-start items-start"> |
||||
|
<span class="text-sm text-gray-500">开卡时间</span> |
||||
|
<el-date-picker size="large" v-model="createTimeRange" type="daterange" placeholder="开卡时间筛选"></el-date-picker> |
||||
|
</div> |
||||
|
<el-button size="large" icon="Search" @click.native="getList(true)" type="primary"> |
||||
|
搜索 |
||||
|
</el-button> |
||||
|
<el-button size="large" icon="RefreshRight" @click.native="init" type="warning" |
||||
|
margin-left="mx-4">重置 |
||||
|
</el-button> |
||||
|
</el-space> |
||||
|
</div> |
||||
|
<div class="p-3 w-full rounded-xl mt-4 bg-white"> |
||||
|
<el-table size="large" :data="list" stripe v-loading="loading" :height="tableHeight" @row-click="openInfo"> |
||||
|
<el-table-column prop="id" label="IC卡号" fixed width="100"/> |
||||
|
<el-table-column prop="code" label="IC卡编号" width="130"/> |
||||
|
<el-table-column label="用户" v-slot="scope" width="130"> |
||||
|
<div>{{ scope.row.username }}</div> |
||||
|
<div>{{ scope.row.phone }}</div> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="name" label="卡名称" width="160"/> |
||||
|
<el-table-column prop="name" label="卡类型" v-slot="scope"> |
||||
|
<el-tag v-if="scope.row.type === 1">年卡</el-tag> |
||||
|
<el-tag v-if="scope.row.type === 2">次卡</el-tag> |
||||
|
<el-tag v-if="scope.row.type === 3">月卡</el-tag> |
||||
|
<el-tag v-if="scope.row.type === 4">会员IC卡</el-tag> |
||||
|
<el-tag v-if="scope.row.type === 5">充值卡</el-tag> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="remainingMoney" label="余额"/> |
||||
|
<el-table-column prop="price" label="购买价格"/> |
||||
|
<el-table-column prop="num" label="剩余次数"/> |
||||
|
<el-table-column prop="count" label="总次数"/> |
||||
|
<el-table-column prop="discount" label="折扣"/> |
||||
|
<el-table-column prop="month" label="月限"/> |
||||
|
<el-table-column prop="term" label="年限"/> |
||||
|
<el-table-column label="付款方式" v-slot="scope" width="100"> |
||||
|
<el-tag type="success" v-if="scope.row.payType === 1">微信支付</el-tag> |
||||
|
<el-tag type="success" v-if="scope.row.payType === 2">支付宝支付</el-tag> |
||||
|
<el-tag type="success" v-if="scope.row.payType === 3">现金</el-tag> |
||||
|
<el-tag type="success" v-if="scope.row.payType === 4">POS机刷卡</el-tag> |
||||
|
<el-tag type="success" v-if="scope.row.payType === 5">平安健康卡</el-tag> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="支付状态" v-slot="scope"> |
||||
|
<span class="text-green-500" v-if="scope.row.status === 1">已支付</span> |
||||
|
<span class="text-red-500" v-if="scope.row.status === 2">未支付</span> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="时间" v-slot="scope" width="300"> |
||||
|
<div>开卡时间:{{ dayjs(scope.row.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div> |
||||
|
<div class="text-blue-500"> |
||||
|
过期时间:{{ dayjs(scope.row.expireTime * 1000).format('YYYY-MM-DD HH:mm:ss') }} |
||||
|
</div> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="remark" label="备注"/> |
||||
|
</el-table> |
||||
|
|
||||
|
<page :per-page="perPage" :current-page="currentPage" :total="total" @change-size="changeSize" |
||||
|
@change-page="changePage"/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<IcCardInfo v-model="showInfo" v-if="showInfo" :id="clickedId"/> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import {onMounted, ref, watch} from 'vue' |
||||
|
import dayjs from "dayjs"; |
||||
|
import {pageCard} from "@/api/icCard.js"; |
||||
|
import {reloadFlagStore} from "@/store/index.js"; |
||||
|
import IcCardInfo from "@/components/IcCardInfo.vue"; |
||||
|
|
||||
|
const list = ref([]) |
||||
|
const loading = ref(true) |
||||
|
const perPage = ref(20) |
||||
|
const total = ref(0) |
||||
|
const currentPage = ref(1) |
||||
|
|
||||
|
const changeSize = ({size}) => { |
||||
|
perPage.value = size |
||||
|
getList(true) |
||||
|
} |
||||
|
|
||||
|
const changePage = ({page}) => { |
||||
|
currentPage.value = page |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
const keywords = ref('') |
||||
|
const createTimeRange = ref([]) |
||||
|
const getList = async (reload = false) => { |
||||
|
let createTimeStart = null, createTimeEnd = null, orderTimeStart = null, orderTimeEnd = null |
||||
|
if (reload) { |
||||
|
currentPage.value = 1 |
||||
|
loading.value = true |
||||
|
} |
||||
|
loading.value = true |
||||
|
if (createTimeRange.value && createTimeRange.value.length) { |
||||
|
createTimeStart = dayjs(createTimeRange.value[0]).unix() |
||||
|
createTimeEnd = dayjs(createTimeRange.value[1] + ' 23:59:59').unix() |
||||
|
} |
||||
|
const res = await pageCard({ |
||||
|
page: currentPage.value, |
||||
|
limit: perPage.value, |
||||
|
keywords: keywords.value ?? null, |
||||
|
createTimeStart: createTimeStart ?? null, |
||||
|
createTimeEnd: createTimeEnd ?? null, |
||||
|
forAdmin: true, |
||||
|
}) |
||||
|
loading.value = false |
||||
|
total.value = res.data.count |
||||
|
list.value = res.data.list |
||||
|
} |
||||
|
|
||||
|
const showInfo = ref(false) |
||||
|
const clickedId = ref() |
||||
|
const openInfo = row => { |
||||
|
clickedId.value = row.id |
||||
|
console.log(clickedId.value) |
||||
|
showInfo.value = true |
||||
|
} |
||||
|
|
||||
|
const tableHeight = ref(1080) |
||||
|
onMounted(async () => { |
||||
|
tableHeight.value = document.body.clientHeight - 260 |
||||
|
await getList() |
||||
|
}) |
||||
|
|
||||
|
const store = reloadFlagStore() |
||||
|
store.$subscribe(mutation => { |
||||
|
if (mutation.events.newValue) getList(true) |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,237 @@ |
|||||
|
<template> |
||||
|
<div class="w-full"> |
||||
|
<div class=" m-6 rounded-xl"> |
||||
|
<div class="p-3 w-full bg-white rounded-xl"> |
||||
|
<el-space alignment="flex-end"> |
||||
|
<div class="flex flex-col justify-start items-start"> |
||||
|
<span class="text-sm text-gray-500">关键词</span> |
||||
|
<el-input size="large" style="width: 300px" v-model="keywords" placeholder="姓名/手机号/订单号/IC卡号筛选" |
||||
|
@keyup.enter.native="getList(true)" |
||||
|
clearable/> |
||||
|
</div> |
||||
|
<div class="flex flex-col justify-start items-start"> |
||||
|
<span class="text-sm text-gray-500">支付方式</span> |
||||
|
<el-select size="large" v-model="payType" placeholder="支付方式筛选" style="width: 160px;" clearable> |
||||
|
<el-option :value="1" label="微信支付"/> |
||||
|
<el-option :value="2" label="余额支付"/> |
||||
|
<el-option :value="3" label="支付宝"/> |
||||
|
<el-option :value="4" label="现金"/> |
||||
|
<el-option :value="5" label="POS机"/> |
||||
|
<el-option :value="6" label="VIP月卡"/> |
||||
|
<el-option :value="7" label="VIP年卡"/> |
||||
|
<el-option :value="8" label="VIP次卡"/> |
||||
|
<el-option :value="9" label="IC月卡"/> |
||||
|
<el-option :value="10" label="IC年卡"/> |
||||
|
<el-option :value="11" label="IC次卡"/> |
||||
|
<el-option :value="12" label="免费"/> |
||||
|
<el-option :value="13" label="VIP充值卡"/> |
||||
|
<el-option :value="14" label="IC充值卡"/> |
||||
|
<el-option :value="15" label="积分支付"/> |
||||
|
<el-option :value="16" label="VIP季卡"/> |
||||
|
<el-option :value="17" label="IC季卡"/> |
||||
|
</el-select> |
||||
|
</div> |
||||
|
<div class="flex flex-col justify-start items-start"> |
||||
|
<span class="text-sm text-gray-500">下单时间</span> |
||||
|
<el-date-picker size="large" v-model="createTimeRange" type="daterange" placeholder="下单时间筛选"></el-date-picker> |
||||
|
</div> |
||||
|
<div class="flex flex-col justify-start items-start"> |
||||
|
<span class="text-sm text-gray-500">使用场地时间</span> |
||||
|
<el-date-picker size="large" v-model="orderTimeRange" type="daterange" placeholder="使用场地时间筛选"></el-date-picker> |
||||
|
</div> |
||||
|
<el-button size="large" icon="Search" @click.native="getList(true)" type="primary"> |
||||
|
搜索 |
||||
|
</el-button> |
||||
|
<el-button size="large" icon="RefreshRight" @click.native="init" type="warning" |
||||
|
margin-left="mx-4">重置 |
||||
|
</el-button> |
||||
|
</el-space> |
||||
|
</div> |
||||
|
<div class="p-3 w-full rounded-xl mt-4 bg-white"> |
||||
|
<el-table size="large" :data="list" stripe v-loading="loading" :height="tableHeight" @row-dblclick="openInfo"> |
||||
|
<el-table-column prop="orderNum" label="订单号" fixed width="200"/> |
||||
|
<el-table-column prop="title" label="场地名称" v-slot="scope" fixed width="280"> |
||||
|
<div>{{ scope.row.siteName }}</div> |
||||
|
<div>{{ scope.row.dateTime }}</div> |
||||
|
<div>￥{{ scope.row.totalPrice }}元</div> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="code" label="IC卡号"/> |
||||
|
<el-table-column label="用户" v-slot="scope"> |
||||
|
<div>{{ scope.row.name }}</div> |
||||
|
<div>{{ scope.row.phone }}</div> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="订单金额" v-slot="scope"> |
||||
|
<div>￥{{ scope.row.totalPrice }}</div> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="实付金额" v-slot="scope"> |
||||
|
<div>￥{{ scope.row.payPrice }}</div> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="支付方式" v-slot="scope"> |
||||
|
<!-- <el-tag v-if="scope.row.payType === 0">余额支付</el-tag>--> |
||||
|
<el-tag v-if="scope.row.payType === 1" type="success"> |
||||
|
微信支付 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="scope.row.payType === 2">积分</el-tag> |
||||
|
<el-tag v-if="scope.row.payType === 3"> |
||||
|
支付宝 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="scope.row.payType === 4"> |
||||
|
现金 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="scope.row.payType === 5"> |
||||
|
POS机 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="scope.row.payType === 6" type="warning"> |
||||
|
VIP月卡 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="scope.row.payType === 7" type="warning"> |
||||
|
VIP年卡 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="scope.row.payType === 8" type="warning"> |
||||
|
VIP次卡 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="scope.row.payType === 9" type="danger"> |
||||
|
IC月卡 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="scope.row.payType === 10" type="danger"> |
||||
|
IC年卡 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="scope.row.payType === 11" type="danger"> |
||||
|
IC次卡 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="scope.row.payType === 12"> |
||||
|
免费 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="scope.row.payType === 13" type="warning"> |
||||
|
VIP充值卡 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="scope.row.payType === 14" type="danger"> |
||||
|
IC充值卡 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="scope.row.payType === 15"> |
||||
|
积分支付 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="scope.row.payType === 16" type="warning"> |
||||
|
VIP季卡 |
||||
|
</el-tag> |
||||
|
<el-tag v-if="scope.row.payType === 17" type="danger"> |
||||
|
IC季卡 |
||||
|
</el-tag> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="支付状态" v-slot="scope"> |
||||
|
<span class="text-green-500" v-if="scope.row.payStatus === 1">已支付</span> |
||||
|
<span class="text-red-500" v-if="scope.row.payStatus === 2">未支付</span> |
||||
|
<span v-if="scope.row.payStatus === 0 || scope.row.payStatus === 3">未付款,占场中</span> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="订单状态" v-slot="scope"> |
||||
|
<span v-if="scope.row.orderStatus === 1" class="text-green-500" |
||||
|
>已完成</span> |
||||
|
<span v-if="scope.row.orderStatus === 2" class="ele-text-placeholder" |
||||
|
>未使用</span> |
||||
|
<span v-if="scope.row.orderStatus === 3" class="text-gray-400" |
||||
|
>已取消</span> |
||||
|
<span v-if="scope.row.orderStatus === 4" class="ele-text-warning" |
||||
|
>退款申请中</span> |
||||
|
<span v-if="scope.row.orderStatus === 5">退款被拒绝</span> |
||||
|
<span v-if="scope.row.orderStatus === 6">退款成功</span> |
||||
|
<span v-if="scope.row.orderStatus === 7">客户端申请退款</span> |
||||
|
<span v-if="scope.row.orderStatus === 9">未完成</span> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="时间" v-slot="scope" width="300"> |
||||
|
<div>下单时间:{{ dayjs(scope.row.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div> |
||||
|
<div class="text-green-500">更新时间:{{ |
||||
|
dayjs(scope.row.updateTime * 1000).format('YYYY-MM-DD HH:mm:ss') |
||||
|
}} |
||||
|
</div> |
||||
|
<div class="text-blue-500" v-if="scope.row.payTime"> |
||||
|
支付时间:{{ dayjs(scope.row.payTime * 1000).format('YYYY-MM-DD HH:mm:ss') }} |
||||
|
</div> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作"> |
||||
|
<template v-slot="scope"> |
||||
|
<el-button type="text" @click="openInfo(scope.row)">详情</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<page :per-page="perPage" :current-page="currentPage" :total="total" @change-size="changeSize" |
||||
|
@change-page="changePage"/> |
||||
|
</div> |
||||
|
</div> |
||||
|
<OrderInfo v-model="showInfo" v-if="showInfo" :order-id="orderId" @close="getList(true)"></OrderInfo> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import {onMounted, ref} from 'vue' |
||||
|
import {pageOrder} from "@/api/order.js"; |
||||
|
import dayjs from "dayjs"; |
||||
|
import OrderInfo from "@/components/OrderInfo.vue"; |
||||
|
|
||||
|
const list = ref([]) |
||||
|
const loading = ref(true) |
||||
|
const perPage = ref(20) |
||||
|
const total = ref(0) |
||||
|
const currentPage = ref(1) |
||||
|
|
||||
|
const changeSize = ({size}) => { |
||||
|
perPage.value = size |
||||
|
getList(true) |
||||
|
} |
||||
|
|
||||
|
const changePage = ({page}) => { |
||||
|
currentPage.value = page |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
const keywords = ref('') |
||||
|
const payType = ref(null) |
||||
|
const createTimeRange = ref([]) |
||||
|
const orderTimeRange = ref([]) |
||||
|
const getList = async (reload = false) => { |
||||
|
let createTimeStart = null, createTimeEnd = null, orderTimeStart = null, orderTimeEnd = null |
||||
|
if (reload) { |
||||
|
currentPage.value = 1 |
||||
|
loading.value = true |
||||
|
} |
||||
|
loading.value = true |
||||
|
if (createTimeRange.value && createTimeRange.value.length) { |
||||
|
createTimeStart = dayjs(createTimeRange.value[0]).unix() |
||||
|
createTimeEnd = dayjs(createTimeRange.value[1] + ' 23:59:59').unix() |
||||
|
} |
||||
|
console.log(orderTimeRange.value) |
||||
|
console.log(dayjs(orderTimeRange.value[1] + ' 23:59:59').unix()) |
||||
|
if (orderTimeRange.value && orderTimeRange.value.length) { |
||||
|
orderTimeStart = dayjs(orderTimeRange.value[0]).unix() |
||||
|
orderTimeEnd = dayjs(orderTimeRange.value[1] + ' 23:59:59').unix() |
||||
|
} |
||||
|
const res = await pageOrder({ |
||||
|
page: currentPage.value, |
||||
|
limit: perPage.value, |
||||
|
keywords: keywords.value ?? null, |
||||
|
payType: payType.value ?? null, |
||||
|
createTimeStart: createTimeStart ?? null, |
||||
|
createTimeEnd: createTimeEnd ?? null, |
||||
|
orderTimeStart: orderTimeStart ?? null, |
||||
|
orderTimeEnd: orderTimeEnd ?? null, |
||||
|
forAdmin: true |
||||
|
}) |
||||
|
loading.value = false |
||||
|
total.value = res.data.count |
||||
|
list.value = res.data.list |
||||
|
} |
||||
|
|
||||
|
const showInfo = ref(false) |
||||
|
const orderId = ref() |
||||
|
const openInfo = (row) => { |
||||
|
console.log(row) |
||||
|
orderId.value = row.id |
||||
|
showInfo.value = true |
||||
|
} |
||||
|
|
||||
|
const tableHeight = ref(1080) |
||||
|
onMounted(async () => { |
||||
|
tableHeight.value = document.body.clientHeight - 260 |
||||
|
await getList() |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,130 @@ |
|||||
|
<template> |
||||
|
<div class="w-full"> |
||||
|
<div class=" m-6 rounded-xl"> |
||||
|
<div class="p-3 w-full bg-white rounded-xl"> |
||||
|
<el-space alignment="flex-end"> |
||||
|
<div class="flex flex-col justify-start items-start"> |
||||
|
<span class="text-sm text-gray-500">关键词</span> |
||||
|
<el-input size="large" style="width: 300px" v-model="keywords" placeholder="姓名/手机号/身份证/IC卡号筛选" |
||||
|
@keyup.enter.native="getList(true)" |
||||
|
clearable/> |
||||
|
</div> |
||||
|
<div class="flex flex-col justify-start items-start"> |
||||
|
<span class="text-sm text-gray-500">开卡时间</span> |
||||
|
<el-date-picker size="large" v-model="createTimeRange" type="daterange" placeholder="开卡时间筛选"></el-date-picker> |
||||
|
</div> |
||||
|
<el-button size="large" icon="Search" @click.native="getList(true)" type="primary"> |
||||
|
搜索 |
||||
|
</el-button> |
||||
|
<el-button size="large" icon="RefreshRight" @click.native="init" type="warning" |
||||
|
margin-left="mx-4">重置 |
||||
|
</el-button> |
||||
|
</el-space> |
||||
|
</div> |
||||
|
<div class="p-3 w-full rounded-xl mt-4 bg-white"> |
||||
|
<el-table :data="list" stripe v-loading="loading" :height="tableHeight" size="large"> |
||||
|
<el-table-column prop="id" label="IC卡号"/> |
||||
|
<el-table-column prop="code" label="IC卡编号"/> |
||||
|
<el-table-column label="用户" v-slot="scope"> |
||||
|
<div>{{ scope.row.username }}</div> |
||||
|
<div>{{ scope.row.phone }}</div> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="name" label="卡名称"/> |
||||
|
<el-table-column prop="number" label="续卡次数"/> |
||||
|
<el-table-column prop="name" label="卡类型" v-slot="scope"> |
||||
|
<el-tag v-if="scope.row.type === 1">年卡</el-tag> |
||||
|
<el-tag v-if="scope.row.type === 2">次卡</el-tag> |
||||
|
<el-tag v-if="scope.row.type === 3">月卡</el-tag> |
||||
|
<el-tag v-if="scope.row.type === 4">会员IC卡</el-tag> |
||||
|
<el-tag v-if="scope.row.type === 5">充值卡</el-tag> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="remainingMoney" label="余额"/> |
||||
|
<el-table-column prop="price" label="购买价格"/> |
||||
|
<el-table-column label="可用场馆" v-slot="scope"> |
||||
|
<span>{{ scope.row.siteList.map(item => item.name).join() }}</span> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="num" label="剩余次数"/> |
||||
|
<el-table-column prop="count" label="总次数"/> |
||||
|
<el-table-column prop="discount" label="折扣"/> |
||||
|
<el-table-column prop="month" label="月限"/> |
||||
|
<el-table-column prop="term" label="年限"/> |
||||
|
<el-table-column label="付款方式" v-slot="scope"> |
||||
|
<el-tag type="success" v-if="scope.row.payType === 1">微信支付</el-tag> |
||||
|
<el-tag type="success" v-if="scope.row.payType === 2">支付宝支付</el-tag> |
||||
|
<el-tag type="success" v-if="scope.row.payType === 3">现金</el-tag> |
||||
|
<el-tag type="success" v-if="scope.row.payType === 4">POS机刷卡</el-tag> |
||||
|
<el-tag type="success" v-if="scope.row.payType === 5">平安健康卡</el-tag> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="支付状态" v-slot="scope"> |
||||
|
<span class="text-green-500" v-if="scope.row.status === 1">已支付</span> |
||||
|
<span class="text-red-500" v-if="scope.row.status === 2">未支付</span> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="时间" v-slot="scope"> |
||||
|
<div>开卡时间:{{ dayjs(scope.row.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div> |
||||
|
<div class="text-blue-500"> |
||||
|
过期时间:{{ dayjs(scope.row.expireTime * 1000).format('YYYY-MM-DD HH:mm:ss') }} |
||||
|
</div> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="remark" label="备注"/> |
||||
|
</el-table> |
||||
|
|
||||
|
<page :per-page="perPage" :current-page="currentPage" :total="total" @change-size="changeSize" |
||||
|
@change-page="changePage"/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import {onMounted, ref} from 'vue' |
||||
|
import dayjs from "dayjs"; |
||||
|
import {pageCard} from "@/api/icCard.js"; |
||||
|
|
||||
|
const list = ref([]) |
||||
|
const loading = ref(true) |
||||
|
const perPage = ref(20) |
||||
|
const total = ref(0) |
||||
|
const currentPage = ref(1) |
||||
|
|
||||
|
const changeSize = ({size}) => { |
||||
|
perPage.value = size |
||||
|
getList(true) |
||||
|
} |
||||
|
|
||||
|
const changePage = ({page}) => { |
||||
|
currentPage.value = page |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
const keywords = ref('') |
||||
|
const createTimeRange = ref([]) |
||||
|
const getList = async (reload = false) => { |
||||
|
let createTimeStart = null, createTimeEnd = null, orderTimeStart = null, orderTimeEnd = null |
||||
|
if (reload) { |
||||
|
currentPage.value = 1 |
||||
|
loading.value = true |
||||
|
} |
||||
|
loading.value = true |
||||
|
if (createTimeRange.value && createTimeRange.value.length) { |
||||
|
createTimeStart = dayjs(createTimeRange.value[0]).unix() |
||||
|
createTimeEnd = dayjs(createTimeRange.value[1] + ' 23:59:59').unix() |
||||
|
} |
||||
|
const res = await pageCard({ |
||||
|
page: currentPage.value, |
||||
|
limit: perPage.value, |
||||
|
keywords: keywords.value ?? null, |
||||
|
createTimeStart: createTimeStart ?? null, |
||||
|
createTimeEnd: createTimeEnd ?? null, |
||||
|
notZeroNumber: true, |
||||
|
}) |
||||
|
loading.value = false |
||||
|
total.value = res.data.count |
||||
|
list.value = res.data.list |
||||
|
} |
||||
|
|
||||
|
const tableHeight = ref(1080) |
||||
|
onMounted(async () => { |
||||
|
tableHeight.value = document.body.clientHeight - 260 |
||||
|
await getList() |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,126 @@ |
|||||
|
<template> |
||||
|
<div class="w-full"> |
||||
|
<div class=" m-6 rounded-xl"> |
||||
|
<div class="p-3 w-full bg-white rounded-xl"> |
||||
|
<el-space alignment="flex-end"> |
||||
|
<div class="flex flex-col justify-start items-start"> |
||||
|
<span class="text-sm text-gray-500">关键词</span> |
||||
|
<el-input size="large" style="width: 300px" v-model="keywords" placeholder="姓名/手机号/身份证/IC卡号筛选" |
||||
|
@keyup.enter.native="getList(true)" |
||||
|
clearable/> |
||||
|
</div> |
||||
|
<div class="flex flex-col justify-start items-start"> |
||||
|
<span class="text-sm text-gray-500">开卡时间</span> |
||||
|
<el-date-picker size="large" v-model="createTimeRange" type="daterange" placeholder="开卡时间筛选"></el-date-picker> |
||||
|
</div> |
||||
|
<el-button size="large" icon="Search" @click.native="getList(true)" type="primary"> |
||||
|
搜索 |
||||
|
</el-button> |
||||
|
<el-button size="large" icon="RefreshRight" @click.native="init" type="warning" |
||||
|
margin-left="mx-4">重置 |
||||
|
</el-button> |
||||
|
</el-space> |
||||
|
</div> |
||||
|
<div class="p-3 w-full rounded-xl mt-4 bg-white"> |
||||
|
<el-table :data="list" stripe v-loading="loading" :height="tableHeight" size="large"> |
||||
|
<el-table-column prop="id" label="IC卡号"/> |
||||
|
<el-table-column prop="code" label="IC卡编号"/> |
||||
|
<el-table-column label="用户" v-slot="scope"> |
||||
|
<div>{{ scope.row.username }}</div> |
||||
|
<div>{{ scope.row.phone }}</div> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="name" label="卡名称"/> |
||||
|
<el-table-column prop="name" label="卡类型" v-slot="scope"> |
||||
|
<el-tag v-if="scope.row.type === 1">年卡</el-tag> |
||||
|
<el-tag v-if="scope.row.type === 2">次卡</el-tag> |
||||
|
<el-tag v-if="scope.row.type === 3">月卡</el-tag> |
||||
|
<el-tag v-if="scope.row.type === 4">会员IC卡</el-tag> |
||||
|
<el-tag v-if="scope.row.type === 5">充值卡</el-tag> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="remainingMoney" label="余额"/> |
||||
|
<el-table-column prop="price" label="购买价格"/> |
||||
|
<el-table-column prop="siteNames" label="可用场馆"/> |
||||
|
<el-table-column prop="num" label="剩余次数"/> |
||||
|
<el-table-column prop="count" label="总次数"/> |
||||
|
<el-table-column prop="discount" label="折扣"/> |
||||
|
<el-table-column prop="month" label="月限"/> |
||||
|
<el-table-column prop="term" label="年限"/> |
||||
|
<el-table-column label="支付状态" v-slot="scope"> |
||||
|
<span class="text-green-500" v-if="scope.row.status === 1">已支付</span> |
||||
|
<span class="text-red-500" v-if="scope.row.status === 2">未支付</span> |
||||
|
<span class="text-red-500" v-if="scope.row.status === 3">已退款</span> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="是否已开具发票" v-slot="scope"> |
||||
|
<span class="text-green-500" v-if="scope.row.isInvoice === 1">已开</span> |
||||
|
<span class="text-red-500" v-if="scope.row.isInvoice === 2">未开</span> |
||||
|
<span class="text-gray-500" v-if="scope.row.isInvoice === 3">不可未开</span> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="时间" v-slot="scope"> |
||||
|
<div>开卡时间:{{ dayjs(scope.row.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div> |
||||
|
<div class="text-blue-500"> |
||||
|
过期时间:{{ dayjs(scope.row.expireTime * 1000).format('YYYY-MM-DD HH:mm:ss') }} |
||||
|
</div> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="remark" label="备注"/> |
||||
|
</el-table> |
||||
|
|
||||
|
<page :per-page="perPage" :current-page="currentPage" :total="total" @change-size="changeSize" |
||||
|
@change-page="changePage"/> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import {onMounted, ref} from 'vue' |
||||
|
import dayjs from "dayjs"; |
||||
|
import {pageUsersVip} from "@/api/usersVip.js"; |
||||
|
|
||||
|
const list = ref([]) |
||||
|
const loading = ref(true) |
||||
|
const perPage = ref(20) |
||||
|
const total = ref(0) |
||||
|
const currentPage = ref(1) |
||||
|
|
||||
|
const changeSize = ({size}) => { |
||||
|
perPage.value = size |
||||
|
getList(true) |
||||
|
} |
||||
|
|
||||
|
const changePage = ({page}) => { |
||||
|
currentPage.value = page |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
const keywords = ref('') |
||||
|
const createTimeRange = ref([]) |
||||
|
const getList = async (reload = false) => { |
||||
|
let createTimeStart = null, createTimeEnd = null |
||||
|
if (reload) { |
||||
|
currentPage.value = 1 |
||||
|
loading.value = true |
||||
|
} |
||||
|
loading.value = true |
||||
|
if (createTimeRange.value && createTimeRange.value.length) { |
||||
|
createTimeStart = dayjs(createTimeRange.value[0]).unix() |
||||
|
createTimeEnd = dayjs(createTimeRange.value[1] + ' 23:59:59').unix() |
||||
|
} |
||||
|
const res = await pageUsersVip({ |
||||
|
page: currentPage.value, |
||||
|
limit: perPage.value, |
||||
|
keywords: keywords.value ?? null, |
||||
|
createTimeStart: createTimeStart ?? null, |
||||
|
createTimeEnd: createTimeEnd ?? null, |
||||
|
forAdmin: true, |
||||
|
}) |
||||
|
loading.value = false |
||||
|
total.value = res.data.count |
||||
|
list.value = res.data.list |
||||
|
} |
||||
|
|
||||
|
const tableHeight = ref(1080) |
||||
|
onMounted(async () => { |
||||
|
tableHeight.value = document.body.clientHeight - 260 |
||||
|
await getList() |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,163 @@ |
|||||
|
<template> |
||||
|
<div class="w-full"> |
||||
|
<div class=" m-6 rounded-xl"> |
||||
|
<div class="p-3 w-full bg-white rounded-xl"> |
||||
|
<el-space alignment="flex-end"> |
||||
|
<div class="flex flex-col justify-start items-start"> |
||||
|
<span class="text-sm text-gray-500">关键词</span> |
||||
|
<el-input style="width: 300px" v-model="keywords" placeholder="姓名/手机号/订单号/IC卡号筛选" |
||||
|
@keyup.enter.native="getList(true)" |
||||
|
clearable/> |
||||
|
</div> |
||||
|
<div class="flex flex-col justify-start items-start"> |
||||
|
<span class="text-sm text-gray-500">下单时间</span> |
||||
|
<el-date-picker v-model="createTimeRange" type="daterange" placeholder="下单时间筛选"></el-date-picker> |
||||
|
</div> |
||||
|
<div class="flex flex-col justify-start items-start"> |
||||
|
<span class="text-sm text-gray-500">使用场地时间</span> |
||||
|
<el-date-picker v-model="orderTimeRange" type="daterange" placeholder="使用场地时间筛选"></el-date-picker> |
||||
|
</div> |
||||
|
<el-button icon="Search" @click.native="getList(true)" type="primary"> |
||||
|
搜索 |
||||
|
</el-button> |
||||
|
<el-button icon="RefreshRight" @click.native="init" type="warning" |
||||
|
margin-left="mx-4">重置 |
||||
|
</el-button> |
||||
|
</el-space> |
||||
|
</div> |
||||
|
<div class="p-3 w-full rounded-xl mt-4 bg-white"> |
||||
|
<el-table :data="list" stripe v-loading="loading" :height="tableHeight" @row-dblclick="openInfo"> |
||||
|
<el-table-column prop="orderNum" label="订单号"/> |
||||
|
<el-table-column prop="title" label="场地名称" v-slot="scope"> |
||||
|
<div>{{ scope.row.siteName }}</div> |
||||
|
<div>{{ scope.row.dateTime }} ￥{{ scope.row.totalPrice }}元</div> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="VIP卡" v-slot="scope"> |
||||
|
<p>{{ scope.row.thinkVip.name }}</p> |
||||
|
<p>{{ scope.row.thinkVip.code }}</p> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="用户" v-slot="scope"> |
||||
|
<div>{{ scope.row.name }}</div> |
||||
|
<div>{{ scope.row.phone }}</div> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="订单金额" v-slot="scope"> |
||||
|
<div>￥{{ scope.row.totalPrice }}</div> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="实付金额" v-slot="scope"> |
||||
|
<div>￥{{ scope.row.payPrice }}</div> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="支付状态" v-slot="scope"> |
||||
|
<span class="text-green-500" v-if="scope.row.payStatus === 1">已支付</span> |
||||
|
<span class="text-red-500" v-if="scope.row.payStatus === 2">未支付</span> |
||||
|
<span v-if="scope.row.payStatus === 0 || scope.row.payStatus === 3">未付款,占场中</span> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="订单状态" v-slot="scope"> |
||||
|
<span v-if="scope.row.orderStatus === 1" class="text-green-500" |
||||
|
>已完成</span> |
||||
|
<span v-if="scope.row.orderStatus === 2" class="ele-text-placeholder" |
||||
|
>未使用</span> |
||||
|
<span v-if="scope.row.orderStatus === 3" class="text-gray-400" |
||||
|
>已取消</span> |
||||
|
<span v-if="scope.row.orderStatus === 4" class="ele-text-warning" |
||||
|
>退款申请中</span> |
||||
|
<span v-if="scope.row.orderStatus === 5">退款被拒绝</span> |
||||
|
<span v-if="scope.row.orderStatus === 6">退款成功</span> |
||||
|
<span v-if="scope.row.orderStatus === 7">客户端申请退款</span> |
||||
|
<span v-if="scope.row.orderStatus === 9">未完成</span> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="时间" v-slot="scope"> |
||||
|
<div>下单时间:{{ dayjs(scope.row.createTime * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div> |
||||
|
<div class="text-green-500">更新时间:{{ |
||||
|
dayjs(scope.row.updateTime * 1000).format('YYYY-MM-DD HH:mm:ss') |
||||
|
}} |
||||
|
</div> |
||||
|
<div class="text-blue-500" v-if="scope.row.payTime"> |
||||
|
支付时间:{{ dayjs(scope.row.payTime * 1000).format('YYYY-MM-DD HH:mm:ss') }} |
||||
|
</div> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作"> |
||||
|
<template v-slot="scope"> |
||||
|
<el-button type="text" @click="openInfo(scope.row)">详情</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<page :per-page="perPage" :current-page="currentPage" :total="total" @change-size="changeSize" |
||||
|
@change-page="changePage"/> |
||||
|
</div> |
||||
|
</div> |
||||
|
<OrderInfo v-model="showInfo" v-if="showInfo" :order-id="orderId"></OrderInfo> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import {onMounted, ref} from 'vue' |
||||
|
import {pageOrder} from "@/api/order.js"; |
||||
|
import dayjs from "dayjs"; |
||||
|
import OrderInfo from "@/components/OrderInfo.vue"; |
||||
|
|
||||
|
const list = ref([]) |
||||
|
const loading = ref(true) |
||||
|
const perPage = ref(20) |
||||
|
const total = ref(0) |
||||
|
const currentPage = ref(1) |
||||
|
|
||||
|
const changeSize = ({size}) => { |
||||
|
perPage.value = size |
||||
|
getList(true) |
||||
|
} |
||||
|
|
||||
|
const changePage = ({page}) => { |
||||
|
currentPage.value = page |
||||
|
getList() |
||||
|
} |
||||
|
|
||||
|
const keywords = ref('') |
||||
|
const payType = ref(null) |
||||
|
const createTimeRange = ref([]) |
||||
|
const orderTimeRange = ref([]) |
||||
|
const getList = async (reload = false) => { |
||||
|
let createTimeStart = null, createTimeEnd = null, orderTimeStart = null, orderTimeEnd = null |
||||
|
if (reload) { |
||||
|
currentPage.value = 1 |
||||
|
loading.value = true |
||||
|
} |
||||
|
loading.value = true |
||||
|
if (createTimeRange.value && createTimeRange.value.length) { |
||||
|
createTimeStart = dayjs(createTimeRange.value[0]).unix() |
||||
|
createTimeEnd = dayjs(createTimeRange.value[1] + ' 23:59:59').unix() |
||||
|
} |
||||
|
if (orderTimeRange.value && orderTimeRange.value.length) { |
||||
|
orderTimeStart = dayjs(orderTimeRange.value[0]).unix() |
||||
|
orderTimeEnd = dayjs(orderTimeRange.value[1] + ' 23:59:59').unix() |
||||
|
} |
||||
|
const res = await pageOrder({ |
||||
|
page: currentPage.value, |
||||
|
limit: perPage.value, |
||||
|
keywords: keywords.value ?? null, |
||||
|
createTimeStart: createTimeStart ?? null, |
||||
|
createTimeEnd: createTimeEnd ?? null, |
||||
|
orderTimeStart: orderTimeStart ?? null, |
||||
|
orderTimeEnd: orderTimeEnd ?? null, |
||||
|
forAdmin: true, |
||||
|
useVip: true, |
||||
|
}) |
||||
|
loading.value = false |
||||
|
total.value = res.data.count |
||||
|
list.value = res.data.list |
||||
|
} |
||||
|
|
||||
|
const showInfo = ref(false) |
||||
|
const orderId = ref() |
||||
|
const openInfo = (row) => { |
||||
|
console.log(row) |
||||
|
orderId.value = row.id |
||||
|
showInfo.value = true |
||||
|
} |
||||
|
|
||||
|
const tableHeight = ref(1080) |
||||
|
onMounted(async () => { |
||||
|
tableHeight.value = document.body.clientHeight - 260 |
||||
|
await getList() |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,59 @@ |
|||||
|
<template> |
||||
|
<div class="flex justify-center items-center flex-col" style="height: calc(100vh - 80px)"> |
||||
|
<div class="flex justify-center items-center w-1/3"> |
||||
|
<div class="flex justify-center items-center rounded-xl item-bg m-4 w-1/3" @click="showNewCard = true"> |
||||
|
开卡 |
||||
|
</div> |
||||
|
<div class="flex justify-center items-center rounded-xl item-bg m-4 w-1/3" @click="showReNewCard = true"> |
||||
|
续卡 |
||||
|
</div> |
||||
|
<div class="flex justify-center items-center rounded-xl item-bg m-4 w-1/3" @click="showSiteList = true"> |
||||
|
预定场地 |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="flex justify-center items-center w-1/3"> |
||||
|
<div class="flex justify-center items-center rounded-xl item-bg m-4 w-1/2" @click="showDeposit = true"> |
||||
|
收取押金 |
||||
|
</div> |
||||
|
<div class="flex justify-center items-center rounded-xl item-bg m-4 w-1/2" @click="deving"> |
||||
|
我的报表 |
||||
|
</div> |
||||
|
<!-- <div class="flex justify-center items-center rounded-xl item-bg m-4 w-1/3">--> |
||||
|
<!-- 转卡服务--> |
||||
|
<!-- </div>--> |
||||
|
</div> |
||||
|
</div> |
||||
|
<NewCard v-model="showNewCard" v-if="showNewCard"></NewCard> |
||||
|
<ReNewCard v-model="showReNewCard" v-if="showReNewCard"></ReNewCard> |
||||
|
<SelectSite v-model="showSiteList" v-if="showSiteList"></SelectSite> |
||||
|
<Deposite v-model="showDeposit" v-if="showDeposit"></Deposite> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import {onMounted, reactive, ref} from 'vue' |
||||
|
import NewCard from "@/components/NewCard.vue"; |
||||
|
import ReNewCard from "@/components/ReNewCard.vue"; |
||||
|
import SelectSite from "@/components/SelectSite.vue"; |
||||
|
import Deposite from "@/components/Deposite.vue"; |
||||
|
import {ElMessage} from "element-plus"; |
||||
|
|
||||
|
const showNewCard = ref(false) |
||||
|
const showReNewCard = ref(false) |
||||
|
const showSiteList = ref(false) |
||||
|
const showDeposit = ref(false) |
||||
|
|
||||
|
const deving = () => { |
||||
|
ElMessage.info('开发中，暂未开放') |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scope> |
||||
|
.item-bg { |
||||
|
background: linear-gradient(to bottom, #27ABAB, #27AB49); |
||||
|
height: 10rem; |
||||
|
flex-shrink: 0; |
||||
|
color: white; |
||||
|
cursor: pointer; |
||||
|
font-size: 1.25rem; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,17 @@ |
|||||
|
import * as VueRouter from "vue-router"; |
||||
|
import Home from '@/views/Home.vue' |
||||
|
|
||||
|
const routes = [ |
||||
|
{ |
||||
|
path: '/:page', |
||||
|
name: 'home', |
||||
|
component: Home |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
const router = VueRouter.createRouter({ |
||||
|
history: VueRouter.createWebHashHistory(), |
||||
|
routes, |
||||
|
}) |
||||
|
|
||||
|
export default router |
||||
@ -0,0 +1,10 @@ |
|||||
|
import {defineStore} from 'pinia' |
||||
|
import {computed, ref} from "vue"; |
||||
|
|
||||
|
|
||||
|
export const reloadFlagStore = defineStore('reloadFlag', () => { |
||||
|
const data = ref(null) |
||||
|
const getData = computed(() => data.value) |
||||
|
const setData = (value) => data.value = value |
||||
|
return {getData, setData, data} |
||||
|
}) |
||||
@ -0,0 +1,10 @@ |
|||||
|
@tailwind base; |
||||
|
@tailwind components; |
||||
|
@tailwind utilities; |
||||
|
|
||||
|
|
||||
|
@layer components { |
||||
|
.card { |
||||
|
@apply shadow-md rounded-lg p-4 bg-white; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,205 @@ |
|||||
|
<template> |
||||
|
<el-container class="w-screen h-screen relative"> |
||||
|
<div class="w-screen h-screen absolute left-0 top-0 bg"/> |
||||
|
<el-header class="z-10"> |
||||
|
<div class="flex justify-between items-center bg-white w-full px-4 rounded-full mt-2"> |
||||
|
<el-space> |
||||
|
<div class="flex flex-col justify-start items-start z-10 text-sm"> |
||||
|
<span>欢迎您, {{ username }}</span> |
||||
|
<span class="mt-2">{{ time }}</span> |
||||
|
</div> |
||||
|
<div class="ml-4 flex justify-start items-center" v-if="activeIndex !== 'Index'"> |
||||
|
<div |
||||
|
class="cursor-pointer flex flex-col justify-center items-center p-1 rounded my-0.5 mx-2 bg-emerald-400 text-white" |
||||
|
style="width: 100px" @click="showNewCard = true"> |
||||
|
<el-icon size="32"> |
||||
|
<CreditCard></CreditCard> |
||||
|
</el-icon> |
||||
|
<span class="text-sm">开卡</span> |
||||
|
</div> |
||||
|
<div |
||||
|
class="cursor-pointer flex flex-col justify-center items-center p-1 rounded my-0.5 mx-2 bg-emerald-400 text-white" |
||||
|
style="width: 100px" @click="showReNewCard = true"> |
||||
|
<el-icon size="32"> |
||||
|
<Money></Money> |
||||
|
</el-icon> |
||||
|
<span class="text-sm">续卡</span> |
||||
|
</div> |
||||
|
<div |
||||
|
class="cursor-pointer flex flex-col justify-center items-center p-1 rounded my-0.5 mx-2 bg-emerald-400 text-white" |
||||
|
style="width: 100px" @click="showSiteList = true"> |
||||
|
<el-icon size="32"> |
||||
|
<Football></Football> |
||||
|
</el-icon> |
||||
|
<span class="text-sm">预定场地</span> |
||||
|
</div> |
||||
|
<div |
||||
|
class="cursor-pointer flex flex-col justify-center items-center p-1 rounded my-0.5 mx-2 bg-emerald-400 text-white" |
||||
|
style="width: 100px" @click="showDeposit = true"> |
||||
|
<el-icon size="32"> |
||||
|
<Sell></Sell> |
||||
|
</el-icon> |
||||
|
<span class="text-sm">收取押金</span> |
||||
|
</div> |
||||
|
<!-- <el-button round plain type="primary" @click="showNewCard = true">开卡</el-button>--> |
||||
|
<!-- <el-button round plain type="primary" @click="showReNewCard = true">续卡</el-button>--> |
||||
|
<!-- <el-button round plain type="primary" @click="showSiteList = true">预定场地</el-button>--> |
||||
|
<!-- <el-button round plain type="success" @click="showDeposit = true">收取押金</el-button>--> |
||||
|
<!-- <el-button round plain type="success">我的报表</el-button>--> |
||||
|
<!-- <el-button round plain type="success">转卡服务</el-button>--> |
||||
|
</div> |
||||
|
</el-space> |
||||
|
<div class="rounded-full pr-10"> |
||||
|
<el-menu |
||||
|
:default-active="activeIndex" |
||||
|
class="el-menu-demo" |
||||
|
mode="horizontal" |
||||
|
:ellipsis="false" |
||||
|
@select="selectMenu" |
||||
|
active-text-color="#27AB49" |
||||
|
> |
||||
|
<el-menu-item index="Index">主页</el-menu-item> |
||||
|
<el-menu-item index="IcCard">卡号列表</el-menu-item> |
||||
|
<el-menu-item index="ReNewIcCard">续卡列表</el-menu-item> |
||||
|
<el-menu-item index="Order">订单列表</el-menu-item> |
||||
|
<el-menu-item index="UsersVip">VIP购卡记录列表</el-menu-item> |
||||
|
<!-- <el-sub-menu index="4">--> |
||||
|
<!-- <template #title>电子卡列表</template>--> |
||||
|
<!-- <el-menu-item index="UsersVip">VIP购卡记录列表</el-menu-item>--> |
||||
|
<!-- <el-menu-item index="VipCardLog">VIP卡消费流水</el-menu-item>--> |
||||
|
<!-- </el-sub-menu>--> |
||||
|
<el-menu-item index="Deposit">押金列表</el-menu-item> |
||||
|
<el-menu-item index="ChangePwd">修改密码</el-menu-item> |
||||
|
<el-menu-item index="Logout"> |
||||
|
<el-button type="danger" size="large" round>退出登录</el-button> |
||||
|
</el-menu-item> |
||||
|
<el-menu-item> |
||||
|
<span class="text-sm">当前版本:{{ version }}</span> |
||||
|
</el-menu-item> |
||||
|
</el-menu> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-header> |
||||
|
<el-main class="flex flex-col z-20" style="padding: 0"> |
||||
|
<keep-alive> |
||||
|
<component ref="ComponentRef" :is="activeIndex" :keep-alive="true" class="w-full"/> |
||||
|
</keep-alive> |
||||
|
</el-main> |
||||
|
</el-container> |
||||
|
<NewCard v-model="showNewCard" v-if="showNewCard"></NewCard> |
||||
|
<ReNewCard v-model="showReNewCard" v-if="showReNewCard"></ReNewCard> |
||||
|
<SelectSite v-model="showSiteList" v-if="showSiteList"></SelectSite> |
||||
|
<ChangePwd v-model="showChangePwd" v-if="showChangePwd"></ChangePwd> |
||||
|
<Deposite v-model="showDeposit" v-if="showDeposit"></Deposite> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import Index from '@/pages/index/Index.vue' |
||||
|
import Order from '@/pages/Order.vue' |
||||
|
import IcCard from '@/pages/IcCard.vue' |
||||
|
import ReNewIcCard from '@/pages/ReNewIcCard.vue' |
||||
|
import Deposit from '@/pages/Deposit.vue' |
||||
|
import UsersVip from '@/pages/UsersVip.vue' |
||||
|
import VipCardLog from '@/pages/VipCardLog.vue' |
||||
|
|
||||
|
export default { |
||||
|
components: { |
||||
|
Index, |
||||
|
Order, |
||||
|
IcCard, |
||||
|
ReNewIcCard, |
||||
|
Deposit, |
||||
|
UsersVip, |
||||
|
VipCardLog, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<script setup> |
||||
|
import {ref, watch, onMounted, nextTick, reactive} from 'vue' |
||||
|
import {clearUserInfo, getUserInfo} from '@/api/common.js' |
||||
|
import {useRoute, useRouter} from 'vue-router' |
||||
|
import {ElMessageBox} from "element-plus"; |
||||
|
import dayjs from "dayjs"; |
||||
|
import NewCard from "@/components/NewCard.vue"; |
||||
|
import ReNewCard from "@/components/ReNewCard.vue"; |
||||
|
import SelectSite from "@/components/SelectSite.vue"; |
||||
|
import ChangePwd from "@/components/ChangePwd.vue"; |
||||
|
import Deposite from "@/components/Deposite.vue"; |
||||
|
|
||||
|
const version = ref('250119') |
||||
|
|
||||
|
const route = useRoute() |
||||
|
const router = useRouter() |
||||
|
|
||||
|
const currentView = ref(null) |
||||
|
const activeIndex = ref('Index') |
||||
|
const username = getUserInfo().username |
||||
|
|
||||
|
const time = ref() |
||||
|
const setCurrentTime = () => { |
||||
|
time.value = dayjs().format('YYYY-MM-DD HH:mm:ss') |
||||
|
setTimeout(() => { |
||||
|
setCurrentTime() |
||||
|
}, 1000) |
||||
|
} |
||||
|
setCurrentTime() |
||||
|
|
||||
|
watch(route, (path) => { |
||||
|
currentView.value = path.path |
||||
|
activeIndex.value = currentView.value.split('/')[1] |
||||
|
console.log(activeIndex.value) |
||||
|
// getDotData() |
||||
|
}) |
||||
|
|
||||
|
const showChangePwd = ref(false) |
||||
|
|
||||
|
const selectMenu = menu => { |
||||
|
switch (menu) { |
||||
|
case 'Logout' : { |
||||
|
ElMessageBox.confirm('您确定要退出登录吗？', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
clearUserInfo() |
||||
|
router.push(`/Login`) |
||||
|
}).catch(() => { |
||||
|
// console.log('取消'); |
||||
|
}); |
||||
|
} |
||||
|
break; |
||||
|
case 'ChangePwd' : { |
||||
|
showChangePwd.value = true |
||||
|
} |
||||
|
break; |
||||
|
default : { |
||||
|
router.push(`/${menu}`) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const showNewCard = ref(false) |
||||
|
const showReNewCard = ref(false) |
||||
|
const showSiteList = ref(false) |
||||
|
const showDeposit = ref(false) |
||||
|
|
||||
|
onMounted(async () => { |
||||
|
if (!getUserInfo().token) { |
||||
|
await clearUserInfo() |
||||
|
await router.push(`/Login`) |
||||
|
} |
||||
|
const urlArr = window.location.href.split('/') |
||||
|
activeIndex.value = urlArr[urlArr.length - 1] |
||||
|
if (!activeIndex.value) await router.push(`/Index`) |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
|
||||
|
<style scoped> |
||||
|
.bg { |
||||
|
z-index: 0; |
||||
|
background: linear-gradient(to bottom, #27ABAB44, #27AB4944), url("@/assets/bg.jpg") no-repeat 100% 100%; |
||||
|
opacity: .9; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,57 @@ |
|||||
|
<template> |
||||
|
<div class="flex w-screen h-screen justify-center items-center bg "> |
||||
|
<div class="w-1/4 flex justify-center items-center rounded-xl bg-white"> |
||||
|
<!-- <img src="@/assets/images/login-icon.png" alt="" class="mr-1 w-2/4">--> |
||||
|
<div class="flex justify-center items-center flex-col w-full p-4 shadow-xl rounded-xl"> |
||||
|
<!-- <img src="@/assets/images/logo.jpg" alt="" style="height: 5rem">--> |
||||
|
<span class="text-center my-3 text-2xl font-bold">营业端管理登录</span> |
||||
|
<el-form class="w-full flex flex-col items-end" label-width="80"> |
||||
|
<el-form-item label="用户名" class="w-full"> |
||||
|
<el-input v-model="username" placeholder="请输入用户名"/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="密码" class="w-full"> |
||||
|
<el-input v-model="password" type="password" @keyup.enter.native="login" |
||||
|
placeholder="请输入密码"/> |
||||
|
</el-form-item> |
||||
|
<el-button @click.native="login" type="primary" class="w-11/12" color="#27AB49">登录</el-button> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import {ref} from 'vue' |
||||
|
import {useRouter} from 'vue-router' |
||||
|
import {loginReq} from '@/api/admin.js' |
||||
|
import {setUserInfo} from '@/api/common.js' |
||||
|
import {ElMessage} from 'element-plus' |
||||
|
|
||||
|
const router = useRouter() |
||||
|
|
||||
|
let username = ref(null) |
||||
|
let password = ref(null) |
||||
|
|
||||
|
const login = async () => { |
||||
|
const res = await loginReq({username: username.value, password: password.value}) |
||||
|
if (res.data) { |
||||
|
ElMessage.success({ |
||||
|
message: '登陆成功' |
||||
|
}); |
||||
|
setUserInfo(res.data) |
||||
|
await router.push('/Index') |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
|
||||
|
<style scope> |
||||
|
.bg { |
||||
|
background-image: url("@/assets/bg.jpg"); |
||||
|
background-size: cover; |
||||
|
background-repeat: no-repeat; |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,8 @@ |
|||||
|
/** @type {import('tailwindcss').Config} */ |
||||
|
module.exports = { |
||||
|
content: ["./src/**/*.vue"], |
||||
|
theme: { |
||||
|
extend: {}, |
||||
|
}, |
||||
|
plugins: [], |
||||
|
} |
||||
@ -0,0 +1,15 @@ |
|||||
|
import {defineConfig} from 'vite' |
||||
|
import vue from '@vitejs/plugin-vue' |
||||
|
// gzip
|
||||
|
import viteCompression from 'vite-plugin-compression' |
||||
|
|
||||
|
import {resolve} from "path"; |
||||
|
|
||||
|
export default defineConfig({ |
||||
|
plugins: [vue(), viteCompression()], |
||||
|
resolve: { |
||||
|
alias: { |
||||
|
'@': resolve(__dirname, "src") |
||||
|
} |
||||
|
}, |
||||
|
}) |
||||
@ -0,0 +1,19 @@ |
|||||
|
import viteBaseConfig from './vite.base.config.js' |
||||
|
import viteDevConfig from './src/config/vite.dev.js' |
||||
|
import viteBuildConfig from './src/config/vite.build.js' |
||||
|
import {defineConfig} from "vite"; |
||||
|
|
||||
|
|
||||
|
export default defineConfig(({mode}) => { |
||||
|
if (mode === "dev") { |
||||
|
return { |
||||
|
...viteBaseConfig, |
||||
|
...viteDevConfig, |
||||
|
}; |
||||
|
} else { |
||||
|
return { |
||||
|
...viteBaseConfig, |
||||
|
...viteBuildConfig, |
||||
|
}; |
||||
|
} |
||||
|
}); |
||||
Loading…
Reference in new issue