238 lines
7.7 KiB
Vue
238 lines
7.7 KiB
Vue
<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>
|