2024-09-14 18:15:03 +08:00
|
|
|
<!-- 商家入驻 -->
|
|
|
|
<template>
|
|
|
|
<pb-layout title="修改信息" navbar="inner" :bgStyle="{ color: 'rgb(245,28,19)' }" color="#fff">
|
|
|
|
<view class="page-bg" :style="[{ marginTop: '-' + Number(statusBarHeight + 88) + 'rpx' }]"> </view>
|
|
|
|
<view class="apply-form">
|
|
|
|
<uni-forms ref="formRef" v-model="formData" :rules="rules" label-position="top" label-width="160">
|
|
|
|
<uni-forms-item label="店铺名称" name="name" required>
|
|
|
|
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入店铺名称" />
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="门店LOGO" name="logo" required>
|
|
|
|
<p-uploader
|
|
|
|
v-model:url="formData.logo"
|
|
|
|
fileMediatype="image"
|
|
|
|
limit="1"
|
|
|
|
mode="grid"
|
|
|
|
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
|
|
|
/>
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="营业时间" name="timezone" required @tap="showTime">
|
|
|
|
<uni-easyinput
|
|
|
|
v-model="formData.timezone"
|
|
|
|
disabled
|
|
|
|
:styles="{ disableColor: '#fff', color: '#333', borderColor: '#dcdfd6 !important' }"
|
|
|
|
placeholder="请选择营业时间"
|
|
|
|
>
|
|
|
|
<template v-slot:right>
|
|
|
|
<uni-icons type="right" />
|
|
|
|
</template>
|
|
|
|
</uni-easyinput>
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="营业执照" name="tradeImg" required>
|
|
|
|
<p-uploader
|
|
|
|
v-model:url="formData.tradeImg"
|
|
|
|
fileMediatype="image"
|
|
|
|
limit="1"
|
|
|
|
mode="grid"
|
|
|
|
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
|
|
|
/>
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item name="areaName" label="省市区" @tap="regionPickerRef.onOpen()" required>
|
|
|
|
<uni-easyinput
|
|
|
|
v-model="formData.areaName"
|
|
|
|
disabled
|
|
|
|
:styles="{ disableColor: '#fff', color: '#333', borderColor: '#dcdfd6 !important' }"
|
|
|
|
placeholder="请选择省市区"
|
|
|
|
>
|
|
|
|
<template v-slot:right>
|
|
|
|
<uni-icons type="right" />
|
|
|
|
</template>
|
|
|
|
</uni-easyinput>
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item name="detailAddress" label="详细地址" required>
|
|
|
|
<uni-easyinput type="textarea" v-model="formData.detailAddress" placeholder="请输入详细地址" clearable />
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item name="contactName" label="联系人" required>
|
|
|
|
<uni-easyinput type="text" v-model="formData.contactName" placeholder="请输入联系人" clearable />
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="联系电话" name="contactPhone" required>
|
|
|
|
<uni-easyinput type="number" v-model="formData.contactPhone" placeholder="请输入联系电话" />
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="身份证号" name="idCard" required>
|
|
|
|
<uni-easyinput type="idcard" v-model="formData.idCard" placeholder="请输入省份证号" />
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="身份证正面" name="idCardFront" required>
|
|
|
|
<p-uploader
|
|
|
|
v-model:url="formData.idCardFront"
|
|
|
|
fileMediatype="image"
|
|
|
|
limit="1"
|
|
|
|
mode="grid"
|
|
|
|
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
|
|
|
/>
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="身份证反面" name="idCardBack" required>
|
|
|
|
<p-uploader
|
|
|
|
v-model:url="formData.idCardBack"
|
|
|
|
fileMediatype="image"
|
|
|
|
limit="1"
|
|
|
|
mode="grid"
|
|
|
|
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
|
|
|
/>
|
|
|
|
</uni-forms-item>
|
|
|
|
|
|
|
|
<uni-forms-item label="支付宝账号" name="alipayLogonId" required>
|
|
|
|
<uni-easyinput type="text" v-model="formData.alipayLogonId" placeholder="请输入支付宝账号" />
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="收款人姓名" name="payee" required>
|
|
|
|
<uni-easyinput type="text" v-model="formData.payee" placeholder="请输入收款人姓名" />
|
|
|
|
</uni-forms-item>
|
|
|
|
|
|
|
|
<uni-forms-item label="银行名称" name="bankName" required>
|
|
|
|
<uni-easyinput type="text" v-model="formData.bankName" placeholder="请输入银行名称" />
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="开户行" name="bankBranchName" required>
|
|
|
|
<uni-easyinput type="text" v-model="formData.bankBranchName" placeholder="请输入开户行" />
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="银行卡号" name="bankNo" required>
|
|
|
|
<uni-easyinput type="number" v-model="formData.bankNo" placeholder="请输入银行卡号" />
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="开户人" name="bankOpenContact" required>
|
|
|
|
<uni-easyinput type="text" v-model="formData.bankOpenContact" placeholder="请输入开户人姓名" />
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="银行卡正面" name="bankCardFront" required>
|
|
|
|
<p-uploader
|
|
|
|
v-model:url="formData.bankCardFront"
|
|
|
|
fileMediatype="image"
|
|
|
|
limit="1"
|
|
|
|
mode="grid"
|
|
|
|
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
|
|
|
/>
|
|
|
|
</uni-forms-item>
|
|
|
|
<uni-forms-item label="银行卡反面" name="bankCardBack" required>
|
|
|
|
<p-uploader
|
|
|
|
v-model:url="formData.bankCardBack"
|
|
|
|
fileMediatype="image"
|
|
|
|
limit="1"
|
|
|
|
mode="grid"
|
|
|
|
:imageStyles="{ width: '168rpx', height: '168rpx' }"
|
|
|
|
/>
|
|
|
|
</uni-forms-item>
|
|
|
|
</uni-forms>
|
|
|
|
|
|
|
|
<view class="footer-box">
|
|
|
|
<button class="ss-reset-button save-btn ui-Shadow-Main" @tap="onSubmit">修改</button>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
<!-- 省市区弹窗 -->
|
|
|
|
<p-region-picker ref="regionPickerRef" @confirm="onRegionConfirm" />
|
|
|
|
</pb-layout>
|
|
|
|
|
|
|
|
<!-- 时间弹窗 -->
|
|
|
|
<timeSlot ref="timeSlotRef" :title="'选择时间段'" @confirm="confirmTime"></timeSlot>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
import { ref } from 'vue'
|
|
|
|
import { onLoad } from '@dcloudio/uni-app'
|
2024-09-19 16:23:19 +08:00
|
|
|
import peach from '@/peach'
|
2024-09-14 18:15:03 +08:00
|
|
|
import $store from '@/peach/store'
|
|
|
|
import UserApi from '@/peach/api/member/user'
|
|
|
|
import { mobile, idCard, bankName, bankCode } from '@/peach/validate/form'
|
|
|
|
import timeSlot from '@/components/wanghexu-timeslot/wanghexu-timeslot.vue'
|
|
|
|
import _ from 'lodash'
|
|
|
|
|
|
|
|
const userStore = $store('user')
|
|
|
|
const formData = ref({
|
|
|
|
name: '',
|
|
|
|
logo: '',
|
|
|
|
timezone: '',
|
|
|
|
tradeImg: '',
|
|
|
|
idCard: '',
|
|
|
|
idCardFront: '',
|
|
|
|
idCardBack: '',
|
|
|
|
contactPhone: '',
|
|
|
|
areaName: '',
|
|
|
|
detailAddress: '',
|
|
|
|
contactName: '',
|
|
|
|
bankNo: '',
|
|
|
|
bankName: '',
|
|
|
|
bankBranchName: '',
|
|
|
|
bankCardFront: '',
|
|
|
|
bankCardBack: '',
|
|
|
|
bankOpenContact: '',
|
|
|
|
})
|
|
|
|
|
|
|
|
const regionPickerRef = ref(null)
|
|
|
|
|
|
|
|
const rules = {
|
|
|
|
name: {
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
errorMessage: '请输入店铺名称',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
logo: {
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
errorMessage: '请上传店铺LOGO',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
timezone: {
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
errorMessage: '请选择营业时间',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
tradeImg: {
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
errorMessage: '请上传营业执照',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
idCard: idCard,
|
|
|
|
idCardFront: {
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
errorMessage: '请上传身份证正面',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
idCardBack: {
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
errorMessage: '请上传身份证反面',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
alipayLogonId: {
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
errorMessage: '请输入支付宝账号',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
payee: {
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
errorMessage: '请输入收款人姓名',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
areaName: {
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
errorMessage: '请选择省市区',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
contactName: {
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
errorMessage: '请输入联系人',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
detailAddress: {
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
errorMessage: '请输入详细地址',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
contactPhone: mobile,
|
|
|
|
bankNo: bankCode,
|
|
|
|
bankName: bankName,
|
|
|
|
bankBranchName: {
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
errorMessage: '请输入开户行名称',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
bankCardFront: {
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
errorMessage: '请上传银行卡正面',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
bankCardBack: {
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
errorMessage: '请上传银行卡反面',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
bankOpenContact: {
|
|
|
|
rules: [
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
errorMessage: '请输入开户人姓名',
|
|
|
|
},
|
|
|
|
],
|
|
|
|
},
|
|
|
|
}
|
|
|
|
|
2024-09-19 16:23:19 +08:00
|
|
|
const statusBarHeight = peach.$platform.device.statusBarHeight * 2
|
2024-09-14 18:15:03 +08:00
|
|
|
|
|
|
|
const timeSlotRef = ref(null)
|
|
|
|
const formRef = ref(null)
|
|
|
|
|
|
|
|
function onSubmit() {
|
|
|
|
formRef.value
|
|
|
|
.validate()
|
|
|
|
.then(async (res) => {
|
|
|
|
let tempObj = { ...res }
|
|
|
|
tempObj.id = formData.value.id
|
|
|
|
tempObj.memberUserId = userStore.userInfo.id
|
|
|
|
tempObj.address = tempObj.areaName.replace(/ /g, '/') + '/' + tempObj.detailAddress
|
|
|
|
tempObj.openingTime = tempObj.timezone.split('~')[0]
|
|
|
|
tempObj.closingTime = tempObj.timezone.split('~')[1]
|
|
|
|
|
|
|
|
delete tempObj.areaName
|
|
|
|
delete tempObj.detailAddress
|
|
|
|
delete tempObj.timezone
|
|
|
|
|
|
|
|
await UserApi.editUserInfo(tempObj)
|
|
|
|
|
|
|
|
peach.$router.go('/pages/user/info/detail', {
|
|
|
|
redirect: true,
|
|
|
|
})
|
|
|
|
})
|
|
|
|
.catch((err) => {
|
|
|
|
console.log('err', err)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
// 选择时间段
|
|
|
|
function showTime() {
|
|
|
|
timeSlotRef.value.open()
|
|
|
|
}
|
|
|
|
|
|
|
|
// 确认时间
|
|
|
|
function confirmTime(time) {
|
|
|
|
formData.value.timezone = time.start.hour + ':' + time.start.min + '~' + time.end.hour + ':' + time.end.min
|
|
|
|
}
|
|
|
|
|
|
|
|
// 确认选择地区
|
|
|
|
function onRegionConfirm(e) {
|
|
|
|
formData.value.areaName = `${e.province_name}/${e.city_name}/${e.district_name}`
|
|
|
|
}
|
|
|
|
|
|
|
|
// 获取申请详情
|
|
|
|
function getMerchantInfo() {
|
|
|
|
UserApi.getUserDetail().then((data) => {
|
|
|
|
formData.value = data.data
|
|
|
|
|
|
|
|
let index = data.data.address.lastIndexOf('/')
|
|
|
|
formData.value.areaName = data.data.address.substring(0, index)
|
|
|
|
formData.value.detailAddress = data.data.address.substring(index + 1)
|
|
|
|
|
|
|
|
formData.value.timezone =
|
|
|
|
data.data.openingTime[0].toString().padStart(2, '0') +
|
|
|
|
':' +
|
|
|
|
data.data.openingTime[1].toString().padStart(2, '0') +
|
|
|
|
'~' +
|
|
|
|
data.data.closingTime[0].toString().padStart(2, '0') +
|
|
|
|
':' +
|
|
|
|
data.data.closingTime[1].toString().padStart(2, '0')
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
// 获取区域列表
|
|
|
|
async function getAreaList() {
|
|
|
|
let res = await UserApi.getAreaList()
|
|
|
|
uni.setStorageSync('areaData', res.data)
|
|
|
|
}
|
|
|
|
|
|
|
|
onLoad(async () => {
|
|
|
|
getMerchantInfo()
|
|
|
|
await getAreaList()
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.page-bg {
|
|
|
|
width: 100%;
|
|
|
|
height: 458rpx;
|
|
|
|
background: url('/static/merchant3.jpg') no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
.apply-form {
|
|
|
|
margin: -100rpx 16px;
|
|
|
|
padding: 20rpx;
|
|
|
|
background: #fff;
|
|
|
|
border-radius: 16rpx;
|
|
|
|
margin-bottom: 40px;
|
|
|
|
padding-bottom: 40rpx;
|
|
|
|
box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.04);
|
|
|
|
.shake {
|
|
|
|
animation: shake 0.05s linear 4 alternate;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes shake {
|
|
|
|
from {
|
|
|
|
transform: translateX(-10rpx);
|
|
|
|
}
|
|
|
|
to {
|
|
|
|
transform: translateX(10rpx);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
:deep() {
|
|
|
|
.uni-easyinput__content-input {
|
|
|
|
font-size: 28rpx !important;
|
|
|
|
color: #333333 !important;
|
|
|
|
line-height: normal !important;
|
|
|
|
padding-left: 10px !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.uni-easyinput__placeholder-class {
|
|
|
|
font-size: 14px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.is-disabled {
|
|
|
|
color: #333333;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.footer-box {
|
|
|
|
.save-btn {
|
|
|
|
height: 80rpx;
|
|
|
|
border-radius: 40rpx;
|
|
|
|
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
|
|
|
|
color: $white;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.agreement-box {
|
|
|
|
margin: -10px auto 10px;
|
|
|
|
.protocol-check {
|
|
|
|
transform: scale(0.7);
|
|
|
|
}
|
|
|
|
.agreement-text {
|
|
|
|
font-size: 26rpx;
|
|
|
|
font-weight: 500;
|
|
|
|
color: #999999;
|
|
|
|
.tcp-text {
|
|
|
|
color: var(--ui-BG-Main);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|