release(custom): i
This commit is contained in:
15
src/views/sys/api.js
Normal file
15
src/views/sys/api.js
Normal file
@@ -0,0 +1,15 @@
|
||||
import { request } from '@/utils'
|
||||
|
||||
export default {
|
||||
getList: (data) => request.post('/staff/list', data),
|
||||
// 查找用户
|
||||
findUser: (data) => request.post('/find/user', data),
|
||||
// 绑定核销人员
|
||||
bindUser: (data) => request.post('/staff/user/set', data),
|
||||
// 获取商家信息
|
||||
getMerchantInfo: () => request.post('/info'),
|
||||
// 更新商家信息
|
||||
updateMerchantInfo: (data) => request.post('/edit', data),
|
||||
// 取消核销人员
|
||||
delVerifyUser: (data) => request.post('/staff/user/delete', data),
|
||||
}
|
||||
237
src/views/sys/index/index.vue
Normal file
237
src/views/sys/index/index.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<script setup>
|
||||
import api from '../api'
|
||||
import Upload from '@/components/Upload.vue'
|
||||
|
||||
onMounted(() => {
|
||||
getInfo()
|
||||
})
|
||||
|
||||
const infoData = ref({})
|
||||
|
||||
const model = ref({})
|
||||
|
||||
const formRef = ref(null)
|
||||
|
||||
const showModal = ref(false)
|
||||
|
||||
const rules = {
|
||||
name: {
|
||||
required: true,
|
||||
message: '请输入店铺名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
head_photo: {
|
||||
required: true,
|
||||
type: 'array',
|
||||
message: '请输入上传店铺封面图',
|
||||
trigger: 'blur',
|
||||
},
|
||||
bank: {
|
||||
required: true,
|
||||
message: '请输入银行名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
bank_card: {
|
||||
required: true,
|
||||
message: '请输入银行卡号',
|
||||
trigger: 'blur',
|
||||
},
|
||||
bank_name: {
|
||||
required: true,
|
||||
message: '请输入账户名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
bank_user: {
|
||||
required: true,
|
||||
message: '请输入法定代表人',
|
||||
trigger: 'blur',
|
||||
},
|
||||
img: {
|
||||
required: true,
|
||||
type: 'array',
|
||||
message: '请输入上传店铺轮播图',
|
||||
trigger: 'blur',
|
||||
},
|
||||
address: {
|
||||
required: true,
|
||||
message: '请输入店铺详细地址',
|
||||
trigger: 'blur',
|
||||
},
|
||||
lt: {
|
||||
required: true,
|
||||
message: '请查找店铺经纬度',
|
||||
},
|
||||
week: {
|
||||
required: true,
|
||||
type: 'array',
|
||||
message: '请选择营业日期',
|
||||
},
|
||||
week_start: {
|
||||
required: true,
|
||||
message: '请选择营业开始时间',
|
||||
},
|
||||
week_end: {
|
||||
required: true,
|
||||
message: '请选择营业结束时间',
|
||||
},
|
||||
mobile: {
|
||||
required: true,
|
||||
message: '请输入店铺手机号',
|
||||
},
|
||||
}
|
||||
|
||||
const days = ref([
|
||||
{ label: '周一', value: '1' },
|
||||
{ label: '周二', value: '2' },
|
||||
{ label: '周三', value: '3' },
|
||||
{ label: '周四', value: '4' },
|
||||
{ label: '周五', value: '5' },
|
||||
{ label: '周六', value: '6' },
|
||||
{ label: '周日', value: '7' },
|
||||
])
|
||||
|
||||
const getInfo = async () => {
|
||||
const res = await api.getMerchantInfo()
|
||||
infoData.value = res.data.data
|
||||
console.log((!res.data.data.week_start && 1) || '00:00:00')
|
||||
model.value = {
|
||||
...res.data.data,
|
||||
head_photo: [{ url: res.data.data.head_photo, status: 'finished', id: 1 }],
|
||||
img: res.data.data.img
|
||||
.split(',')
|
||||
.map((item, index) => ({ url: item, status: 'finished', id: index })),
|
||||
lt: `${res.data.data.lat},${res.data.data.lon}`,
|
||||
week: res.data.data.week.length === 0 ? [] : res.data.data.week.split(','),
|
||||
week_start: res.data.data.week_start.length === 0 ? '00:00:00' : res.data.data.week_start,
|
||||
week_end: res.data.data.week_end.length === 0 ? '00:00:00' : res.data.data.week_end,
|
||||
}
|
||||
}
|
||||
|
||||
// 选中位置触发该函数
|
||||
window.addEventListener('message', (res) => {
|
||||
model.value.lt = `${res.data?.latlng?.lat},${res.data?.latlng?.lng}`
|
||||
model.value.lat = res.data?.latlng?.lat
|
||||
model.value.lon = res.data.latlng?.lng
|
||||
showModal.value = false
|
||||
})
|
||||
|
||||
const submit = () => {
|
||||
formRef.value?.validate(async (errors) => {
|
||||
if (!errors) {
|
||||
const data = {
|
||||
...model.value,
|
||||
head_photo: model.value.head_photo[0].url,
|
||||
img: model.value.img.map((item) => item.url).join(','),
|
||||
lat: model.value.lat.toString(),
|
||||
lon: model.value.lon.toString(),
|
||||
week: model.value.week.join(','),
|
||||
}
|
||||
delete data.lt
|
||||
const res = await api.updateMerchantInfo(data)
|
||||
$message.success(res.msg)
|
||||
getInfo()
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CommonPage show-footer :title="$route.title">
|
||||
<n-tabs type="line" animated>
|
||||
<n-tab-pane name="1" tab="基本信息">
|
||||
<div>商户名称: {{ infoData.name }}</div>
|
||||
<div>负责人手机号码: {{ infoData.phone }}</div>
|
||||
<div>商户类型: {{ infoData.bType === 1 ? '供应商' : '兑换商' }}</div>
|
||||
<!-- <div>经营类目: {{ infoData.scope }}</div> -->
|
||||
<div>入驻时间: {{ infoData.add_time }}</div>
|
||||
</n-tab-pane>
|
||||
<n-tab-pane name="2" tab="店铺信息">
|
||||
<!-- {{ model }} -->
|
||||
<n-form ref="formRef" :model="model" :rules="rules" label-placement="left">
|
||||
<n-grid :cols="24" :x-gap="24">
|
||||
<n-form-item-gi :span="24" label="店铺封面图：" path="head_photo">
|
||||
<Upload v-model:list="model.head_photo" :max="1" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="24" label="店铺轮播图：" path="img">
|
||||
<Upload v-model:list="model.img" :max="5" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="15" label="店铺号码：" path="mobile">
|
||||
<n-input v-model:value="model.mobile" placeholder="请输入店铺号码" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="15" label="法定代表人：" path="bank_user">
|
||||
<n-input v-model:value="model.bank_user" placeholder="请输入法定代表人" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="15" label="账户名称：" path="bank_name">
|
||||
<n-input v-model:value="model.bank_name" placeholder="请输入账户名称" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="15" label="开户银行：" path="bank">
|
||||
<n-input v-model:value="model.bank" placeholder="请输入开户银行" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="15" label="银行卡号：" path="bank_card">
|
||||
<n-input v-model:value="model.bank_card" placeholder="请输入银行卡号" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="15" label="营业日期：" path="week">
|
||||
<n-select v-model:value="model.week" multiple :options="days" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="15" label="营业开始时间：" path="week_start">
|
||||
<n-time-picker
|
||||
v-model:formatted-value="model.week_start"
|
||||
value-format="HH:mm:ss"
|
||||
clearable
|
||||
/>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="15" label="营业结束时间：" path="week_end">
|
||||
<n-time-picker
|
||||
v-model:formatted-value="model.week_end"
|
||||
value-format="HH:mm:ss"
|
||||
clearable
|
||||
/>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="15" label="店铺名称：" path="name">
|
||||
<n-input v-model:value="model.name" placeholder="请输入店铺名称" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="15" label="店铺详细地址：" path="address">
|
||||
<n-input v-model:value="model.address" placeholder="请输入店铺详细地址" />
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="15" label="店铺经纬度：" path="lt">
|
||||
<n-input-group>
|
||||
<n-input
|
||||
v-model:value="model.lt"
|
||||
placeholder="请查找店铺经纬度"
|
||||
:style="{ width: '100%' }"
|
||||
/>
|
||||
<n-button type="primary" @click="showModal = true">查找位置</n-button>
|
||||
</n-input-group>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi :span="15">
|
||||
<div class="m-auto">
|
||||
<n-button type="primary" w-100 @click="submit">提交</n-button>
|
||||
</div>
|
||||
</n-form-item-gi>
|
||||
</n-grid>
|
||||
</n-form>
|
||||
</n-tab-pane>
|
||||
<!-- <n-tab-pane name="3" tab="功能信息">开发中</n-tab-pane> -->
|
||||
</n-tabs>
|
||||
<!-- h5地图 -->
|
||||
<n-modal v-if="showModal" v-model:show="showModal">
|
||||
<n-card
|
||||
style="width: 600px; height: 600px"
|
||||
title="查找地图位置"
|
||||
:bordered="false"
|
||||
size="huge"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<iframe
|
||||
src="https://apis.map.qq.com/tools/locpicker?type=1&key=S3GBZ-WR26O-IXNW2-SXBOD-LZXV6-WAFNO&referer=myapp"
|
||||
width="100%"
|
||||
height="100%"
|
||||
frameborder="0"
|
||||
></iframe>
|
||||
</n-card>
|
||||
</n-modal>
|
||||
</CommonPage>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
35
src/views/sys/route.js
Normal file
35
src/views/sys/route.js
Normal file
@@ -0,0 +1,35 @@
|
||||
const Layout = () => import('@/layout/index.vue')
|
||||
|
||||
export default {
|
||||
name: '商户设置',
|
||||
path: '/sys',
|
||||
component: Layout,
|
||||
redirect: '/sys_info',
|
||||
meta: {
|
||||
title: '商户设置',
|
||||
icon: 'mdi:account-multiple',
|
||||
order: 10,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
name: 'SysInfo',
|
||||
path: 'sys_info',
|
||||
component: () => import('./index/index.vue'),
|
||||
meta: {
|
||||
title: '商户信息',
|
||||
icon: 'mdi:account-multiple',
|
||||
order: 10,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'SysVerify',
|
||||
path: 'sys_verify',
|
||||
component: () => import('./verify/index.vue'),
|
||||
meta: {
|
||||
title: '核销人员',
|
||||
icon: 'mdi:account-multiple',
|
||||
order: 10,
|
||||
},
|
||||
},
|
||||
],
|
||||
}
|
||||
242
src/views/sys/verify/index.vue
Normal file
242
src/views/sys/verify/index.vue
Normal file
@@ -0,0 +1,242 @@
|
||||
<script setup>
|
||||
import api from '../api.js'
|
||||
import { NAvatar, NButton, NPopconfirm } from 'naive-ui'
|
||||
|
||||
const loading = ref(false)
|
||||
|
||||
const columns = ref([
|
||||
{
|
||||
title: '头像',
|
||||
slot: 'avatarUrl',
|
||||
align: 'center',
|
||||
render: (row) => {
|
||||
return h(NAvatar, { src: row.avatarUrl, round: true, size: 50 })
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '昵称',
|
||||
key: 'nickName',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '手机号',
|
||||
key: 'phone',
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
slot: 'action',
|
||||
align: 'center',
|
||||
render: (row) => {
|
||||
console.log(row)
|
||||
return [
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
text: true,
|
||||
size: 'small',
|
||||
type: 'primary',
|
||||
onClick: () => {
|
||||
addUser(2, row)
|
||||
},
|
||||
},
|
||||
{
|
||||
default: () => '编辑',
|
||||
}
|
||||
),
|
||||
h(
|
||||
NPopconfirm,
|
||||
{
|
||||
onPositiveClick: () => {
|
||||
delVerifyUser(row)
|
||||
},
|
||||
},
|
||||
{
|
||||
default: () => '删除无法撤销，请谨慎！',
|
||||
trigger: () =>
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
text: true,
|
||||
class: 'ml-10',
|
||||
size: 'small',
|
||||
type: 'error',
|
||||
},
|
||||
{
|
||||
default: () => '删除',
|
||||
}
|
||||
),
|
||||
}
|
||||
),
|
||||
]
|
||||
},
|
||||
},
|
||||
])
|
||||
|
||||
const data = ref([])
|
||||
|
||||
const showModal = ref(false)
|
||||
|
||||
const showModalTitle = ref('')
|
||||
|
||||
const pagination = ref({
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
itemCount: 0,
|
||||
onChange: (page) => {
|
||||
pagination.value.page = page
|
||||
get_list()
|
||||
},
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
get_list()
|
||||
})
|
||||
|
||||
const get_list = async () => {
|
||||
loading.value = true
|
||||
const res = await api.getList({
|
||||
PageNum: pagination.value.page,
|
||||
PageSize: pagination.value.pageSize,
|
||||
})
|
||||
data.value = res.data.data || []
|
||||
pagination.value.itemCount = res.data.total
|
||||
loading.value = false
|
||||
}
|
||||
|
||||
const addUser = (type, row = {}) => {
|
||||
showModalTitle.value = type === 1 ? '添加核销人员' : '编辑核销人员'
|
||||
if (type === 2) {
|
||||
model.value = {
|
||||
inputValue: row.phone,
|
||||
id: row.uid,
|
||||
url: row.avatarUrl,
|
||||
name: row.nickName,
|
||||
}
|
||||
}
|
||||
showModal.value = true
|
||||
}
|
||||
|
||||
const formRef = ref(null)
|
||||
|
||||
const model = ref({
|
||||
inputValue: '',
|
||||
url: '',
|
||||
id: null,
|
||||
name: '',
|
||||
})
|
||||
|
||||
const search = async () => {
|
||||
const res = await api.findUser({
|
||||
phone: model.value.inputValue,
|
||||
})
|
||||
model.value = {
|
||||
...model.value,
|
||||
id: res.data.data.uid,
|
||||
url: res.data.data.avatarUrl,
|
||||
name: res.data.data.nickName,
|
||||
}
|
||||
}
|
||||
|
||||
const submit = async () => {
|
||||
if (!model.value.id) return $message.error('请绑定核销人员')
|
||||
const res = await api.bindUser({
|
||||
uid: model.value.id,
|
||||
})
|
||||
$message.success(res.msg)
|
||||
clear()
|
||||
}
|
||||
|
||||
const clear = () => {
|
||||
model.value = {
|
||||
inputValue: '',
|
||||
url: '',
|
||||
id: null,
|
||||
name: '',
|
||||
}
|
||||
showModal.value = false
|
||||
get_list()
|
||||
}
|
||||
|
||||
const delVerifyUser = async (row) => {
|
||||
const res = await api.delVerifyUser({
|
||||
uid: row.uid,
|
||||
})
|
||||
$message.success(res.msg)
|
||||
get_list()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CommonPage show-footer :title="$route.title">
|
||||
<n-button type="primary" @click="addUser(1)">添加核销人员</n-button>
|
||||
<n-data-table
|
||||
class="mt-10"
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:pagination="pagination"
|
||||
:bordered="false"
|
||||
remote
|
||||
/>
|
||||
<!-- 添加对话框 -->
|
||||
<n-modal v-model:show="showModal">
|
||||
<n-card
|
||||
style="width: 600px"
|
||||
:title="showModalTitle"
|
||||
:bordered="false"
|
||||
size="huge"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
>
|
||||
<n-form ref="formRef" :model="model" label-placement="left">
|
||||
<n-grid :cols="1" :x-gap="24">
|
||||
<n-form-item-gi class="flex items-center" label="查找用户" :span="20">
|
||||
<n-input-group>
|
||||
<n-input
|
||||
v-model:value="model.inputValue"
|
||||
placeholder="请输入用户手机号"
|
||||
:style="{ width: '90%' }"
|
||||
/>
|
||||
<n-button type="primary" ghost @click="search">搜索</n-button>
|
||||
</n-input-group>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi class="flex items-center" label="绑定用户" :span="12">
|
||||
<div v-if="model.url !== '' && model.id !== null" class="text-center">
|
||||
<img class="h-100 w-100 border rounded-5" :src="model.url || ''" />
|
||||
<div>{{ model.name }}</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="checkBox">+</div>
|
||||
</n-form-item-gi>
|
||||
<n-form-item-gi>
|
||||
<div m-auto>
|
||||
<n-button type="primary" @click="submit">提交</n-button>
|
||||
<n-button ml-10 @click="clear">取消</n-button>
|
||||
</div>
|
||||
</n-form-item-gi>
|
||||
</n-grid>
|
||||
</n-form>
|
||||
</n-card>
|
||||
</n-modal>
|
||||
</CommonPage>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.checkBox {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: rgb(250, 250, 252);
|
||||
border: 1px dashed rgb(224, 224, 230);
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
font-size: 30px;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
border: 1px dashed #18a058;
|
||||
transition: 1s all;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user