feat(custom): i
This commit is contained in:
7
src/views/business/mer_list/api.js
Normal file
7
src/views/business/mer_list/api.js
Normal file
@@ -0,0 +1,7 @@
|
||||
import { request } from '@/utils'
|
||||
|
||||
export default {
|
||||
getList: (data) => request.post('/store', data),
|
||||
addMer: (data) => request.post('/store/edit', data),
|
||||
getMerType: () => request.post('/store/getOther'),
|
||||
}
|
||||
434
src/views/business/mer_list/index.vue
Normal file
434
src/views/business/mer_list/index.vue
Normal file
@@ -0,0 +1,434 @@
|
||||
<template>
|
||||
<CommonPage show-footer :title="$route.title">
|
||||
<!-- {{ formValue }} -->
|
||||
<n-button type="primary" @click="handleAdd(1)">新增商户</n-button>
|
||||
<n-grid class="mb-10" x-gap="12" cols="6" collapsed>
|
||||
<n-gi>
|
||||
<div class="flex items-center">
|
||||
<div class="w-150">商户名称：</div>
|
||||
<n-input v-model:value="QuryVal.StoreName" type="text" placeholder="请输入商户名称" />
|
||||
</div>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<div class="flex items-center">
|
||||
<div class="w-150">商户状态：</div>
|
||||
<n-select
|
||||
v-model:value="QuryVal.Status"
|
||||
placeholder="请选择商户状态"
|
||||
clearable
|
||||
:options="[
|
||||
{
|
||||
label: '正常',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '禁用',
|
||||
value: 2,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
</n-gi>
|
||||
<n-gi>
|
||||
<n-button type="primary" @click="getList">查询</n-button>
|
||||
<n-button class="ml10" @click="clearQuryVal">重置</n-button>
|
||||
</n-gi>
|
||||
</n-grid>
|
||||
|
||||
<n-data-table
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:pagination="pagination"
|
||||
:bordered="false"
|
||||
/>
|
||||
|
||||
<n-drawer v-model:show="showModal" :width="502" placement="right">
|
||||
<n-drawer-content :title="drawerTitle" closable>
|
||||
<n-form
|
||||
ref="formRef"
|
||||
label-placement="left"
|
||||
label-align="left"
|
||||
label-width="120px"
|
||||
:model="formValue"
|
||||
:rules="rules"
|
||||
size="medium"
|
||||
>
|
||||
<!-- <n-form-item label="商户头像:" path="img">
|
||||
<n-upload
|
||||
v-model:file-list="formValue.img"
|
||||
action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
||||
list-type="image-card"
|
||||
>
|
||||
点击上传
|
||||
</n-upload>
|
||||
</n-form-item> -->
|
||||
<n-form-item label="商户名称:" path="name">
|
||||
<n-input v-model:value="formValue.name" placeholder="请输入商户名称" />
|
||||
</n-form-item>
|
||||
<n-form-item label="负责人姓名:" path="username">
|
||||
<n-input v-model:value="formValue.username" placeholder="请输入负责人姓名" />
|
||||
</n-form-item>
|
||||
<n-form-item label="商户手机号:" path="phone">
|
||||
<n-input v-model:value="formValue.phone" placeholder="请输入商户手机号" />
|
||||
</n-form-item>
|
||||
<n-form-item label="商户座机:" path="mobile">
|
||||
<n-input v-model:value="formValue.mobile" placeholder="请输入商户座机" />
|
||||
</n-form-item>
|
||||
<n-form-item label="商户地址:" path="address">
|
||||
<n-input v-model:value="formValue.address" placeholder="请输入商户地址" />
|
||||
</n-form-item>
|
||||
<n-form-item label="经营类目:" path="classId">
|
||||
<n-select
|
||||
v-model:value="formValue.classId"
|
||||
label-field="name"
|
||||
value-field="ID"
|
||||
clearable
|
||||
placeholder="请选择经营类目"
|
||||
:options="classOptions"
|
||||
/>
|
||||
</n-form-item>
|
||||
<!-- <n-form-item label="商户经纬度:" path="local">
|
||||
<n-input v-model:value="formValue.local" placeholder="请输入商户地址" />
|
||||
<div ref="wrapRef" class="h-300 w-300"></div>
|
||||
</n-form-item> -->
|
||||
<n-form-item label="商户密码:" path="password">
|
||||
<n-input v-model:value="formValue.password" placeholder="请输入商户密码" />
|
||||
</n-form-item>
|
||||
<n-form-item label="商户类型:" path="bType">
|
||||
<n-select
|
||||
v-model:value="formValue.bType"
|
||||
label-field="name"
|
||||
value-field="ID"
|
||||
placeholder="请选择商户类型"
|
||||
clearable
|
||||
:options="typeOptions"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="手续费收取类型:" path="scaleType">
|
||||
<n-select
|
||||
v-model:value="formValue.scaleType"
|
||||
placeholder="请选择手续费收取类型"
|
||||
clearable
|
||||
:options="[
|
||||
{
|
||||
label: '百分比',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '数值',
|
||||
value: 2,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="手续费比例:" path="scale">
|
||||
<n-input-number v-model:value="formValue.scale" placeholder="请输入手续费比例" />
|
||||
</n-form-item>
|
||||
<n-form-item label="商户状态:" path="status">
|
||||
<n-switch v-model:value="formValue.status" :checked-value="1" :unchecked-value="2" />
|
||||
</n-form-item>
|
||||
<n-form-item>
|
||||
<n-button
|
||||
class="m-auto w-200"
|
||||
attr-type="button"
|
||||
type="primary"
|
||||
@click="handleValidateClick"
|
||||
>
|
||||
提交
|
||||
</n-button>
|
||||
<n-button class="m-auto w-200" @click="handleClearValidateClick">重置</n-button>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</n-drawer-content>
|
||||
</n-drawer>
|
||||
</CommonPage>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, ref, h, unref, nextTick } from 'vue'
|
||||
import { NButton } from 'naive-ui'
|
||||
import api from './api'
|
||||
import { useScript } from '@/hooks/useScript'
|
||||
|
||||
const columns = ref([
|
||||
{
|
||||
title: '商户名称',
|
||||
align: 'center',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '商户类型',
|
||||
align: 'center',
|
||||
key: 'type',
|
||||
render(row) {
|
||||
return h('span', row.bType === 1 ? '供应商' : '兑换商')
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
align: 'center',
|
||||
key: 'status',
|
||||
render(row) {
|
||||
return h('span', row.status === 1 ? '正常' : '禁用')
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
slot: 'action',
|
||||
render(row) {
|
||||
return [
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
type: 'primary',
|
||||
size: 'small',
|
||||
onClick: () => {
|
||||
formValue.value = row
|
||||
handleAdd(2)
|
||||
},
|
||||
},
|
||||
() => '编辑'
|
||||
),
|
||||
]
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
const data = ref([])
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
const showModal = ref(false)
|
||||
|
||||
const formRef = ref(null)
|
||||
|
||||
const drawerTitle = ref('')
|
||||
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
onChange: (page) => {
|
||||
pagination.value.page = page
|
||||
getList()
|
||||
},
|
||||
onUpdatePageSize: (pageSize) => {
|
||||
pagination.value.pageSize = pageSize
|
||||
pagination.value.page = 1
|
||||
getList()
|
||||
},
|
||||
})
|
||||
|
||||
const QuryVal = ref({
|
||||
StoreName: '',
|
||||
Status: null,
|
||||
})
|
||||
|
||||
// const defaultValueRef = () => ({
|
||||
// name: '',
|
||||
// username: '',
|
||||
// phone: '',
|
||||
// mobile: '',
|
||||
// address: '',
|
||||
// classId: null,
|
||||
// local: '',
|
||||
// password: '',
|
||||
// bType: null,
|
||||
// scaleType: null,
|
||||
// scale: null,
|
||||
// status: 2,
|
||||
// })
|
||||
|
||||
let formValue = ref({
|
||||
name: '',
|
||||
username: '',
|
||||
phone: '',
|
||||
mobile: '',
|
||||
address: '',
|
||||
classId: null,
|
||||
local: '',
|
||||
password: '',
|
||||
bType: null,
|
||||
scaleType: null,
|
||||
scale: null,
|
||||
status: 2,
|
||||
})
|
||||
|
||||
const rules = {
|
||||
name: {
|
||||
required: true,
|
||||
message: '请输入商户名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
username: {
|
||||
required: true,
|
||||
message: '请输入负责人姓名',
|
||||
trigger: 'blur',
|
||||
},
|
||||
phone: {
|
||||
required: true,
|
||||
message: '请输入商户手机号',
|
||||
trigger: 'blur',
|
||||
},
|
||||
mobile: {
|
||||
required: true,
|
||||
message: '请输入商户座机',
|
||||
trigger: 'blur',
|
||||
},
|
||||
address: {
|
||||
required: true,
|
||||
message: '请输入商户地址',
|
||||
trigger: 'blur',
|
||||
},
|
||||
local: {
|
||||
required: true,
|
||||
message: '请搜索商户经纬度',
|
||||
trigger: 'blur',
|
||||
},
|
||||
classId: {
|
||||
required: true,
|
||||
type: 'number',
|
||||
message: '请选择经营类目',
|
||||
trigger: 'change',
|
||||
},
|
||||
// password: {
|
||||
// required: true,
|
||||
// message: '请输入商户密码',
|
||||
// trigger: 'blur',
|
||||
// },
|
||||
bType: {
|
||||
required: true,
|
||||
type: 'number',
|
||||
message: '请选择商户类型',
|
||||
trigger: 'change',
|
||||
},
|
||||
scaleType: {
|
||||
required: true,
|
||||
type: 'number',
|
||||
message: '请选择手续费收取类型',
|
||||
trigger: 'change',
|
||||
},
|
||||
scale: {
|
||||
required: true,
|
||||
type: 'number',
|
||||
message: '请输入手续费比例',
|
||||
trigger: 'blur',
|
||||
},
|
||||
status: {
|
||||
type: 'number',
|
||||
message: '请选择商户状态',
|
||||
trigger: 'change',
|
||||
},
|
||||
}
|
||||
|
||||
const wrapRef = ref(null)
|
||||
const MapUrl =
|
||||
'https://map.qq.com/api/gljs?v=1.exp&key=S3GBZ-WR26O-IXNW2-SXBOD-LZXV6-WAFNO&callback=initMap'
|
||||
|
||||
const { toPromise } = useScript({ src: MapUrl })
|
||||
|
||||
onMounted(() => {
|
||||
initMap()
|
||||
getList()
|
||||
getMertype()
|
||||
})
|
||||
|
||||
const initMap = async () => {
|
||||
await toPromise()
|
||||
await nextTick()
|
||||
const wrapEl = unref(wrapRef.value)
|
||||
if (!wrapEl) return
|
||||
const TMap = window?.TMap
|
||||
const center = new TMap.Map.LatLng(39.984104, 116.307503)
|
||||
const map = new TMap.Map.Map(wrapEl, {
|
||||
rotation: 20, //设置地图旋转角度
|
||||
pitch: 30, //设置俯仰角度（0~45）
|
||||
zoom: 12, //设置地图缩放级别
|
||||
center: center, //设置地图中心点坐标
|
||||
})
|
||||
console.log(map)
|
||||
}
|
||||
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
const res = await api.getList({
|
||||
...QuryVal.value,
|
||||
PageNum: pagination.value.current,
|
||||
PageSize: pagination.value.pageSize,
|
||||
})
|
||||
data.value = res.data.data
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
const classOptions = ref([])
|
||||
const typeOptions = ref([])
|
||||
|
||||
const getMertype = async () => {
|
||||
const res = await api.getMerType()
|
||||
classOptions.value = res.data.class
|
||||
typeOptions.value = res.data.type
|
||||
}
|
||||
|
||||
const clearQuryVal = () => {
|
||||
QuryVal.value = {
|
||||
StoreName: '',
|
||||
Status: '',
|
||||
}
|
||||
getList()
|
||||
}
|
||||
|
||||
const handleAdd = (e) => {
|
||||
drawerTitle.value = e === 1 ? '新增商户' : '编辑商户'
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
// const onPositiveClick = () => {
|
||||
// showModal.value = false
|
||||
// }
|
||||
|
||||
// const onNegativeClick = () => {
|
||||
// showModal.value = false
|
||||
// }
|
||||
|
||||
const handleValidateClick = (e) => {
|
||||
e.preventDefault()
|
||||
formRef.value?.validate(async (errors) => {
|
||||
if (!errors) {
|
||||
try {
|
||||
await api.addMer(formValue.value)
|
||||
$message.success('成功')
|
||||
handleClearValidateClick()
|
||||
getMertype()
|
||||
getList()
|
||||
showModal.value = false
|
||||
} catch (error) {
|
||||
$message.error(error.msg)
|
||||
}
|
||||
} else {
|
||||
$message.error('Invalid')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const handleClearValidateClick = () => {
|
||||
formRef.value?.restoreValidation()
|
||||
formValue.value = {
|
||||
name: '',
|
||||
username: '',
|
||||
phone: '',
|
||||
mobile: '',
|
||||
address: '',
|
||||
classId: null,
|
||||
local: '',
|
||||
password: '',
|
||||
bType: null,
|
||||
scaleType: null,
|
||||
scale: null,
|
||||
status: 2,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
6
src/views/business/mer_type/api.js
Normal file
6
src/views/business/mer_type/api.js
Normal file
@@ -0,0 +1,6 @@
|
||||
import { request } from '@/utils'
|
||||
|
||||
export default {
|
||||
getMerType: (data) => request.post('/typesof', data),
|
||||
addMerType: (data) => request.post('/typesof/edit', data),
|
||||
}
|
||||
182
src/views/business/mer_type/index.vue
Normal file
182
src/views/business/mer_type/index.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<CommonPage show-footer :title="$route.title">
|
||||
<n-button type="primary" @click="handleAdd(1)">新增商户类型</n-button>
|
||||
<!-- {{ formValue }} -->
|
||||
<n-data-table
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:pagination="pagination"
|
||||
:bordered="false"
|
||||
/>
|
||||
<n-modal v-model:show="showModal">
|
||||
<n-card
|
||||
style="width: 400px"
|
||||
:title="modelTitle"
|
||||
:bordered="false"
|
||||
size="huge"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<n-form ref="formRef" label-placement="left" :model="formValue" :rules="rules">
|
||||
<n-form-item label="商户类型：" path="name">
|
||||
<n-input v-model:value="formValue.name" placeholder="请输入商户类型" />
|
||||
</n-form-item>
|
||||
<n-form-item label="商户状态：" path="status">
|
||||
<n-switch v-model:value="formValue.status" :checked-value="1" :unchecked-value="2" />
|
||||
</n-form-item>
|
||||
<n-form-item>
|
||||
<div class="m-auto">
|
||||
<n-button
|
||||
class="m-auto"
|
||||
type="primary"
|
||||
attr-type="button"
|
||||
@click="handleValidateClick"
|
||||
>
|
||||
提交
|
||||
</n-button>
|
||||
<n-button class="ml-10" @click="clear">取消</n-button>
|
||||
</div>
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</n-card>
|
||||
</n-modal>
|
||||
</CommonPage>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { onMounted, h } from 'vue'
|
||||
import api from './api'
|
||||
import { NButton } from 'naive-ui'
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
const columns = ref([
|
||||
{
|
||||
title: 'ID',
|
||||
align: 'center',
|
||||
key: 'ID',
|
||||
},
|
||||
{
|
||||
title: '商户类型',
|
||||
align: 'center',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
align: 'center',
|
||||
slot: 'status',
|
||||
render(row) {
|
||||
return h('span', row.status === 1 ? '正常' : '禁用')
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
slot: 'action',
|
||||
render(row) {
|
||||
return [
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
type: 'primary',
|
||||
size: 'small',
|
||||
onClick: () => {
|
||||
formValue.value = row
|
||||
handleAdd(2)
|
||||
},
|
||||
},
|
||||
() => '编辑'
|
||||
),
|
||||
]
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
const data = ref([])
|
||||
|
||||
const formRef = ref(null)
|
||||
|
||||
const rules = {
|
||||
name: {
|
||||
required: true,
|
||||
message: '请输入商户分类名称',
|
||||
},
|
||||
}
|
||||
|
||||
const formValue = ref({
|
||||
name: '',
|
||||
status: 1,
|
||||
})
|
||||
|
||||
const showModal = ref(false)
|
||||
|
||||
const pagination = ref({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
onChange: (page) => {
|
||||
pagination.value.page = page
|
||||
getList()
|
||||
},
|
||||
onUpdatePageSize: (pageSize) => {
|
||||
pagination.value.pageSize = pageSize
|
||||
pagination.value.page = 1
|
||||
getList()
|
||||
},
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
getList()
|
||||
})
|
||||
|
||||
const getList = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await api.getMerType({
|
||||
pageNum: pagination.value.current,
|
||||
pageSize: pagination.value.pageSize,
|
||||
})
|
||||
console.log(res)
|
||||
data.value = res.data.data
|
||||
} catch (error) {
|
||||
$message.error(error.msg)
|
||||
}
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
const modelTitle = ref('')
|
||||
|
||||
const handleAdd = (e) => {
|
||||
modelTitle.value = e === 1 ? '新增商户类型' : '编辑商户类型'
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
const clear = () => {
|
||||
formValue.value = {
|
||||
name: '',
|
||||
status: 1,
|
||||
}
|
||||
showModal.value = false
|
||||
}
|
||||
|
||||
const handleValidateClick = async (e) => {
|
||||
e.preventDefault()
|
||||
formRef.value?.validate(async (errors) => {
|
||||
if (!errors) {
|
||||
try {
|
||||
await api.addMerType(formValue.value)
|
||||
$message.success('成功')
|
||||
clear()
|
||||
getList()
|
||||
} catch (error) {
|
||||
$message.error(error.msg)
|
||||
}
|
||||
} else {
|
||||
$message.error('Invalid')
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
0
src/views/business/mer_verify/api.js
Normal file
0
src/views/business/mer_verify/api.js
Normal file
7
src/views/business/mer_verify/index.vue
Normal file
7
src/views/business/mer_verify/index.vue
Normal file
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<CommonPage show-footer :title="$route.title"></CommonPage>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
40
src/views/business/route.js
Normal file
40
src/views/business/route.js
Normal file
@@ -0,0 +1,40 @@
|
||||
const Layout = () => import('@/layout/index.vue')
|
||||
|
||||
export default {
|
||||
name: '商户管理',
|
||||
path: '/merchant',
|
||||
component: Layout,
|
||||
redirect: '/mer_list',
|
||||
children: [
|
||||
{
|
||||
name: 'Merlist',
|
||||
path: 'mer_list',
|
||||
component: () => import('./mer_list/index.vue'),
|
||||
meta: {
|
||||
title: '商户列表',
|
||||
icon: 'mdi:account-multiple',
|
||||
order: 10,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Mertype',
|
||||
path: 'mer_type',
|
||||
component: () => import('./mer_type/index.vue'),
|
||||
meta: {
|
||||
title: '商户类型',
|
||||
icon: 'mdi:account-multiple',
|
||||
order: 10,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Merverify',
|
||||
path: 'mer_verify',
|
||||
component: () => import('./mer_verify/index.vue'),
|
||||
meta: {
|
||||
title: '入驻审核',
|
||||
icon: 'mdi:account-multiple',
|
||||
order: 10,
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
Reference in New Issue
Block a user