1630 lines
49 KiB
Vue

<template>
<view class="">
<view v-if="step === 1" class="container">
<view class="header white">
<view class="title">请填写基本信息</view>
<view class="item">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Frame2.png" mode="" />
<view class="label">所在区域</view>
</view>
<view class="item_right" @click="headerAreaPopupClick">
<input type="text" class="input" :value="area" disabled placeholder='请选择您所在的区域' />
<u-icon name="arrow-right" color="#D5AC66" />
</view>
</view>
<view class="item no_border">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Frame3.png" mode="" />
<view class="label">详细地址</view>
</view>
<view class="item_right">
<input type="text" class="input" @input="headerInputClick" data-name="address" :value="address"
placeholder='请输入详细地址' />
</view>
</view>
</view>
<view class="margin2 white">
<view class="item">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Vector8.png" mode="" />
<view class="label">商户类型</view>
</view>
<view class="item_right" @click="headerShopTypeClick">
<input type="text" class="input" :value="shopType.text" disabled placeholder='请选择商户类型' />
<u-icon name="arrow-right" color="#D5AC66" />
</view>
</view>
<view class="item" v-if="shopType.type === 2">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Vector8.png" mode="" />
<view class="label">商户类别</view>
</view>
<view class="item_right" @click="headerShopCategoryClick">
<input type="text" class="input" :value="shopCategory.cate_name" disabled placeholder='请选择商户类别' />
<u-icon name="arrow-right" color="#D5AC66" />
</view>
</view>
<view class="item">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Group_919.png"
mode="" />
<view class="label">商铺名称</view>
</view>
<view class="item_right" @click="chooseLocation">
<input type="text" class="input" :value="shopName" disabled placeholder='请选择您的商铺名称' />
</view>
</view>
<view class="upload_item">
<view class="upload_left">
<view class="left_top">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Vector8.png"
mode="" />
<view class="label">logo</view>
</view>
<view class="footer"></view>
</view>
<view class="item_right">
<u-upload :fileList="logoFileList" name="logoFileList" maxCount="1" @beforeRead="beforeRead"
@afterRead="beforeRead" @delete="deleteImg" uploadIcon="plus" imageMode="scaleToFill" />
</view>
</view>
<view class="upload_item">
<view class="upload_left">
<view class="left_top">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Group_924.png"
mode="" />
<view class="label">商铺图片</view>
</view>
<view class="footer"></view>
</view>
<view class="item_right">
<u-upload :fileList="shopFileList" name="shopFileList" maxCount="1" @beforeRead="beforeRead"
@afterRead="beforeRead" @delete="deleteImg" uploadIcon="plus" imageMode="scaleToFill" />
</view>
</view>
<view class="item">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Frame4.png" mode="" />
<view class="label">固定电话</view>
</view>
<view class="item_right">
<input type="text" class="input" @input="headerInputClick" data-name="shopTel" :value="shopTel"
placeholder='请输入商铺固定电话' />
</view>
</view>
<view class="item">
<view class="item_left">
<image class="item_pic" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/apply_icon6.png"
mode="" />
<view class="label">手机号码</view>
</view>
<view class="item_right">
<input type="number" class="input" maxlength="11" @input="headerInputClick" data-name="shopMobile"
:value="shopMobile" placeholder='请输入手机号码' />
</view>
</view>
<view class="item no_border">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Frame5.png" mode="" />
<view class="label">管理人姓名</view>
</view>
<view class="item_right">
<input type="text" class="input" @input="headerInputClick" data-name="ownerName" :value="ownerName"
placeholder='请输入管理人姓名' />
</view>
</view>
</view>
<view class="margin2 white">
<view class="item">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Vector9.png" mode="" />
<view class="label">开始营业时间</view>
</view>
<view class="item_right" @click="headerSelectTimeClick">
<input type="text" class="input" :value="startTime" disabled placeholder='请选择开始营业时间' />
<u-icon name="arrow-right" color="#D5AC66" />
</view>
</view>
<view class="item no_border">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Vector9.png" mode="" />
<view class="label">结束营业时间</view>
</view>
<view class="item_right" @click="headerSelectTimeClick2">
<input type="text" class="input" :value="endTime" disabled placeholder='请选择结束营业时间' />
<van-icon name="arrow" color="#D5AC66" />
</view>
</view>
</view>
<view class="margin2 white">
<view class="item">
<view class="label no_margin_left">是否营业</view>
<view class="radio_group">
<label class="radio" data-name='open' @click="headerRedioClick">
<radio value="open" :checked="radio === 'open'" />
<text>营业中</text>
</label>
<label class="radio" data-name='close' @click="headerRedioClick">
<radio value="close" :checked="radio === 'close'" />
<text>停业</text>
</label>
</view>
</view>
<view class="upload_item">
<view class="upload_left">
<view class="left_top">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Vector11.png"
mode="" />
<view class="label">微信客服二维码</view>
</view>
<view class="footer"></view>
</view>
<view class="item_right">
<u-upload :fileList="wxQrcodeFileList" name="wxQrcodeFileList" maxCount="1" @beforeRead="beforeRead"
@afterRead="beforeRead" @delete="deleteImg" uploadIcon="plus" />
</view>
</view>
<view class="item_end">
<view class="left_top">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Group_922.png"
mode="" />
<view class="label">商铺介绍</view>
</view>
<textarea class="text_area" :value="shopText" @input='headerTextClick' bconfirm-type="done" maxlength="255"
placeholder="请输入商铺介绍信息" />
<view class="text_count" id="charCount">{{shopText.length}}/255</view>
</view>
</view>
<view class="btn" @click="headerSubmitClick">提交申请</view>
</view>
<!-- 社区入驻 -->
<view v-if="step === 2">
<view class="container">
<view class="header white">
<view class="title">请填写基本信息</view>
<view class="item">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Frame2.png" mode="" />
<view class="label">所在区域</view>
</view>
<view class="item_right" @click="headerAreaPopupClick">
<input type="text" class="input" :value="area" disabled placeholder='请选择您所在的区域' />
<van-icon name="arrow" color="#D5AC66" />
</view>
</view>
<view class="item no_border">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Frame3.png" mode="" />
<view class="label">详细地址</view>
</view>
<view class="item_right">
<input type="text" class="input" @input="headerInputClick" data-name="address" :value="address"
placeholder='请输入详细地址' />
</view>
</view>
</view>
<view class="margin2 white">
<view class="item">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Vector8.png"
mode="" />
<view class="label">社区类型</view>
</view>
<view class="item_right" @click="headerShopTypeClick">
<input type="text" class="input" :value="shopType.text" disabled placeholder='请选择社区类型' />
<u-icon name="arrow-right" color="#D5AC66" />
</view>
</view>
<view class="item">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Group_919.png"
mode="" />
<view class="label">社区名称</view>
</view>
<view class="item_right">
<input type="text" class="input" @input="headerInputClick" data-name="communityName"
:value="communityName" placeholder='请输入社区名称' />
</view>
</view>
<view class="item">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/_assets/Group_50.png" mode="" />
<view class="label">社区位置</view>
</view>
<view class="item_right" data-name='community' @click="chooseLocation">
<text :class="['community_text', communityText && 'color_black']">{{communityText || '请选择社区位置'}}</text>
</view>
</view>
<view class="upload_item swiper">
<view class="upload_left">
<view class="left_top">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Vector8.png"
mode="" />
<view class="label">社区轮播图</view>
</view>
</view>
<view class="swiper_item">
<u-upload :fileList="communitySwiper" name="communitySwiper" maxCount="9" @beforeRead="beforeRead"
@afterRead="beforeRead" @delete="deleteImg" uploadIcon="plus" imageMode="scaleToFill" />
</view>
</view>
<view class="upload_item">
<view class="upload_left">
<view class="left_top">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Group_924.png"
mode="" />
<view class="label">社区图片</view>
</view>
<view class="footer"></view>
</view>
<view class="item_right">
<u-upload :fileList="communityPic" name="communityPic" maxCount="1" @beforeRead="beforeRead"
@afterRead="beforeRead" @delete="deleteImg" uploadIcon="plus" imageMode="scaleToFill" />
</view>
</view>
<view class="item">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Frame4.png" mode="" />
<view class="label">固定电话</view>
</view>
<view class="item_right">
<input type="text" class="input" @input="headerInputClick" data-name="communityTel" :value="communityTel"
placeholder='请输入固定电话号码' />
</view>
</view>
<view class="item no_border">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/apply_icon6.png" mode="" />
<view class="label">手机号码</view>
</view>
<view class="item_right">
<input type="number" class="input" maxlength="11" @input="headerInputClick" data-name="communityMobile"
:value="communityMobile" placeholder='请输入手机号码' />
</view>
</view>
</view>
<view class="btn" @click="headerSubmitClick3">提交申请</view>
</view>
</view>
<!-- 合伙人入驻 -->
<view v-if="step === 3">
<view class="container">
<view class="header white">
<view class="title">请填写补充信息</view>
<view class="item">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Frame2.png" mode="" />
<view class="label">所在区域</view>
</view>
<view class="item_right" @click="headerAreaPopupClick">
<input type="text" class="input" :value="area" disabled placeholder='请选择您所在的区域' />
<u-icon name="arrow-right" color="#D5AC66" />
</view>
</view>
<view class="item no_border">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Frame3.png" mode="" />
<view class="label">详细地址</view>
</view>
<view class="item_right">
<input type="text" class="input" @input="headerInputClick" data-name="address" :value="address"
placeholder='请输入详细地址' />
</view>
</view>
</view>
<view class="margin2 white">
<view class="item">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Group_938_jxs.png"
mode="" />
<view class="label">经销商名称</view>
</view>
<view class="item_right">
<input type="text" class="input" data-name="dealerName" @input="headerInputClick" :value="dealerName"
placeholder='请输入经销商名称' />
</view>
</view>
<view class="item">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Group_919.png"
mode="" />
<view class="label">客户中心电话</view>
</view>
<view class="item_right">
<input type="text" class="input" data-name="customerPhone" @input="headerInputClick"
:value="customerPhone" placeholder='请输入客户中心电话' />
</view>
</view>
<view class="upload_item swiper">
<view class="upload_left">
<view class="left_top">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Group_932_jxs.png"
mode="" />
<view class="label">经销商首页轮播</view>
</view>
</view>
<view class="swiper_item">
<!-- <van-uploader file-list="{{ dealerIndexBanner }}" max-count="9" before-read="beforeRead"
bind:after-read="beforeRead" data-name="dealerIndexBanner" bind:delete="deleteImg" upload-icon="plus"
deletable="{{ true }}" /> -->
<u-upload :fileList="dealerIndexBanner" name="dealerIndexBanner" maxCount="9" @beforeRead="beforeRead"
@afterRead="beforeRead" @delete="deleteImg" uploadIcon="plus" imageMode="scaleToFill" />
</view>
</view>
<view class="upload_item">
<view class="upload_left">
<view class="left_top">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Vector8.png"
mode="" />
<view class="label">经销商图标</view>
</view>
<view class="footer"></view>
</view>
<view class="item_right">
<!-- <van-uploader file-list="{{ dealerLogo }}" max-count="1" before-read="beforeRead"
bind:after-read="beforeRead" data-name="dealerLogo" bind:delete="deleteImg" upload-icon="plus"
deletable="{{ true }}" /> -->
<u-upload :fileList="dealerLogo" name="dealerLogo" maxCount="1" @beforeRead="beforeRead"
@afterRead="beforeRead" @delete="deleteImg" uploadIcon="plus" imageMode="scaleToFill" />
</view>
</view>
<view class="upload_item">
<view class="upload_left">
<view class="left_top">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Group_924.png"
mode="" />
<view class="label">经销商图片</view>
</view>
<view class="footer"></view>
</view>
<view class="item_right">
<!-- <van-uploader file-list="{{ dalerPic }}" max-count="1" before-read="beforeRead"
bind:after-read="beforeRead" data-name="dalerPic" bind:delete="deleteImg" upload-icon="plus"
deletable="{{ true }}" /> -->
<u-upload :fileList="dalerPic" name="dalerPic" maxCount="1" @beforeRead="beforeRead"
@afterRead="beforeRead" @delete="deleteImg" uploadIcon="plus" imageMode="scaleToFill" />
</view>
</view>
<view class="item">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Group_940_jxs.png"
mode="" />
<view class="label">邀请经销商编码 (可为空)</view>
</view>
<view class="item_right">
<input type="text" class="input" data-name="inviteDealerEncoding" @input="headerInputClick"
:value="inviteDealerEncoding" placeholder='请输入邀请经销商编码' />
</view>
</view>
<view class="item">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Group_939_jxs.png"
mode="" />
<view class="label">邀请经销商ID (可为空)</view>
</view>
<view class="item_right">
<input type="text" class="input" data-name="inviteDealerId" @input="headerInputClick"
:value="inviteDealerId" placeholder='请输入邀请经销商ID' />
</view>
</view>
<view class="item">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Group_942_jxs.png"
mode="" />
<view class="label">邀请经销商名称 (可为空)</view>
</view>
<view class="item_right">
<input type="text" class="input" data-name="inviteDealerName" @input="headerInputClick"
:value="inviteDealerName" placeholder='请输入邀请经销商名称' />
</view>
</view>
</view>
<view class="margin2 white">
<view class="item">
<view class="item_left">
<view class="label">联系人</view>
</view>
<view class="item_right">
<input type="text" class="input" data-name="contactName" @input="headerInputClick" :value="contactName"
placeholder='请输入联系人名称' />
</view>
</view>
<view class="item">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Frame4.png" mode="" />
<view class="label">联系人电话</view>
</view>
<view class="item_right">
<input type="number" class="input" maxlength="11" data-name="contactMobile" @input="headerInputClick"
:value="contactMobile" placeholder='请输入联系人电话' />
</view>
</view>
<view class="item">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Frame4.png" mode="" />
<view class="label">商户名称</view>
</view>
<view class="item_right">
<input type="text" class="input" :value="shopName" disabled placeholder='' />
</view>
</view>
<view class="item">
<view class="item_left">
<view class="label">法人名称</view>
</view>
<view class="item_right">
<input type="text" class="input" @input="headerInputClick" data-name="dealerOwnerName"
:value="dealerOwnerName" placeholder='请输入法人名称' />
</view>
</view>
<view class="item">
<view class="item_left">
<view class="label">法人身份证号</view>
</view>
<view class="item_right">
<input type="text" class="input" @input="headerInputClick" data-name="ownerCard" :value="ownerCard"
placeholder='请输入法人身份证号' />
</view>
</view>
<view class="item">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/community/apply_icon6.png" mode="" />
<view class="label">法人手机号</view>
</view>
<view class="item_right">
<input type="number" class="input" maxlength="11" @input="headerInputClick" data-name="ownerMobile"
:value="ownerMobile" placeholder='请输入法人手机号' />
</view>
</view>
<view class="upload_item">
<view class="upload_left">
<view class="left_top">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Group_936_jxs.png"
mode="" />
<view class="label">身份证正面照片</view>
</view>
<view class="footer"></view>
</view>
<view class="item_right">
<!-- <van-uploader file-list="{{ cardFront }}" max-count="1" before-read="beforeRead"
bind:after-read="beforeRead" data-name="cardFront" bind:delete="deleteImg" upload-icon="plus"
deletable="{{ true }}" /> -->
<u-upload :fileList="cardFront" name="cardFront" maxCount="1" @beforeRead="beforeRead"
@afterRead="beforeRead" @delete="deleteImg" uploadIcon="plus" imageMode="scaleToFill" />
</view>
</view>
<view class="upload_item">
<view class="upload_left">
<view class="left_top">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Group_936_jxs.png"
mode="" />
<view class="label">身份证背面照片</view>
</view>
<view class="footer"></view>
</view>
<view class="item_right">
<!-- <van-uploader file-list="{{ cardBack }}" max-count="1" before-read="beforeRead"
bind:after-read="beforeRead" data-name="cardBack" bind:delete="deleteImg" upload-icon="plus"
deletable="{{ true }}" /> -->
<u-upload :fileList="cardBack" name="cardBack" maxCount="1" @beforeRead="beforeRead"
@afterRead="beforeRead" @delete="deleteImg" uploadIcon="plus" imageMode="scaleToFill" />
</view>
</view>
<view class="upload_item">
<view class="upload_left">
<view class="left_top">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Group_933_jxs.png"
mode="" />
<view class="label">营业执照图片</view>
</view>
<view class="footer"></view>
</view>
<view class="item_right">
<!-- <van-uploader file-list="{{ business }}" max-count="2" before-read="beforeRead"
bind:after-read="beforeRead" data-name="business" bind:delete="deleteImg" upload-icon="plus"
deletable="{{ true }}" /> -->
<u-upload :fileList="business" name="business" maxCount="2" @beforeRead="beforeRead"
@afterRead="beforeRead" @delete="deleteImg" uploadIcon="plus" imageMode="scaleToFill" />
</view>
</view>
<view class="item no_border">
<view class="item_left">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Group_934_jxs.png"
mode="" />
<view class="label">统一社会信用代码</view>
</view>
<view class="item_right">
<input type="text" class="input" @input="headerInputClick" data-name="code" :value="code"
placeholder='请输入统一社会信用代码' />
</view>
</view>
</view>
<view class="margin2 white">
<view class="item_end">
<view class="left_top">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Group_922.png"
mode="" />
<view class="label">商户介绍</view>
</view>
<textarea class="text_area" :value="dealershopText" @input='headerInputClick' data-name="dealershopText"
bconfirm-type="done" maxlength="255" placeholder="请输入商户介绍信息" />
<view class="text_count" id="charCount">{{dealershopText.length}}/255</view>
</view>
<view class="item_end">
<view class="left_top">
<image class="item_pic"
src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/indexSubcontract/_assets/Group_943_jxs.png"
mode="" />
<view class="label">备注</view>
</view>
<textarea class="text_area" :value="dealershopRemark" @input='headerInputClick' data-name="dealershopRemark"
bconfirm-type="done" maxlength="255" placeholder="请输入备注信息" />
<view class="text_count" id="charCount">{{dealershopRemark.length}}/255</view>
</view>
</view>
<view class="btn" @click="headerSubmitClick2">提交申请</view>
</view>
</view>
<!-- 省市区选择器 -->
<areaPopup :show="show" @selectArea='headerAreaClick' @close='onClose' />
<!-- 商户类型选择器 -->
<u-picker :show="shopTypeShow" closeOnClickOverlay :columns="columns" keyName="text" @confirm='confirm'
@cancel="onClose" @close="onClose" />
<!-- 商户类别选择器 -->
<u-popup :show="shopCategoryShow" closeOnClickOverlay round="20rpx" @close="onClose">
<view class="popup_title">
<view class="popup_label" @click="onClose">取消</view>
<view class="popup_label color_blue" @click="onOk2">确认</view>
</view>
<picker-view indicator-style="height: 50px;" style="width: 100%; height: 500rpx;" :value="value"
@change="bindPickerChange">
<picker-view-column>
<view v-for="(item, index ) in shopCategoryColumns" :key="index"
style="line-height: 50px; text-align: center;">{{item.cate_name}}</view>
</picker-view-column>
<picker-view-column>
<view v-for="(item, index) in shopCategoryTwoColumns" :key="index"
style="line-height: 50px; text-align: center;">{{item.cate_name}}</view>
</picker-view-column>
</picker-view>
</u-popup>
<!-- 开始截止时间 -->
<u-datetime-picker :show="timeShow" mode="time" @confirm="onConfirm" @cancel="onClose" />
<!-- 结束截止时间 -->
<u-datetime-picker :show="endTimeShow" mode="time" @confirm="onConfirm2" @cancel="onClose" />
</view>
</template>
<script>
import {
apiArr
} from '../../../api/shopEnter';
import {
isPhone,
picUrl,
request,
upload
} from '../../../utils';
export default {
data() {
return {
shopId: '', // 商户id
step: 1, // 步进器, 如果是商铺入驻 则无变化,社区入驻 为2 净水入驻为3
cityList: [], // 接口返回省数据
areaList: [], // 接口返回市数据
businessList: [], // 接口返回区数据
newAreaList: [], // 默认展示的市区数据
newBusiness: [], // 默认展示的县/区数据
confirmCity: {}, // 默认选中省
confirmArea: {}, // 默认选中市
confirmBusiness: {}, // 默认选中区/县
// 以下字段为商家入驻使用
area: '', // 省市区
show: false, // 省市区选择器显示隐藏
address: '', // 详细地址
shopType: {}, // 商户类型
shopCategory: {}, // 商户类别
shopTypeShow: false, // 商户类型弹窗显示隐藏
shopCategoryShow: false, // 商户类别弹窗显示隐藏
columns: [],
shopCategoryColumns: [], // 全部商户类别
shopCategoryTwoColumns: [], // 默认商户类别第二列数据
shopCategoryChecked1: {},
shopCategoryChecked2: {},
shopColumns: [
[{
text: '物业',
type: 1,
},
{
text: '商铺',
type: 2
},
{
text: '净水',
type: 3
}
]
],
realColumns: [
[{
text: '社区',
type: 1,
},
{
text: '园区',
type: 2
},
{
text: '服务中心',
type: 3
}
]
],
shopName: '', // 商铺名称
logoFileList: [], // logo 图片
shopFileList: [], // 商铺图片
shopTel: '', // 固定电话
shopMobile: '', // 手机号
ownerName: '', // 管理人姓名
startTime: '', // 开始营业时间
endTime: '', // 结束营业时间
timeShow: false, // 营业时间弹窗显示隐藏
endTimeShow: false, // 营业结束时间弹窗显示隐藏
timeType: 'startTime', // 当前点击选择类型
radio: 'open',
wxQrcodeFileList: [], // 微信二维码图片
shopText: '', // 商铺介绍
latitude: 0,
longitude: 0,
// 以下字段为经销商入驻时使用
dealerName: '', // 经销商名称
customerPhone: '', // 客户端客户中心电话
dealerIndexBanner: [], // 经销商首页轮播图
dealerLogo: [], // 经销商图标
dalerPic: [], // 经销商图片
inviteDealerEncoding: '', // 邀请经销商编码
inviteDealerId: '', // 邀请经销商id
inviteDealerName: '', // 邀请经销商名称
contactName: '', // 联系人名称
contactMobile: '', // 联系人电话
dealerOwnerName: '', // 法人名称
ownerCard: '', // 法人身份证号
ownerMobile: '', // 法人手机号
cardFront: [], // 身份证正面照片
cardBack: [], // 身份证背面照片
business: [], // 营业执照照片
code: '', // 统一社会信用代码
dealershopText: '', // 商户介绍
dealershopRemark: '', // 备注信息
// 社区入驻使用字段
communityMobile: '', // 手机号码
communityName: '', // 社区名称
communityPic: [], // 图片
communityRegion: '', // 区域
communitySwiper: [], // 轮播图
communityTag: '', // 标签
communityTel: '', // 电话
communityText: '', //
}
},
methods: {
async init() {
const res = await request(apiArr.getTree, "POST", {});
console.log('12312312', res);
let defaultCol = res.tree[0].children;
this.shopCategoryColumns = res.tree;
this.shopCategoryTwoColumns = defaultCol;
console.log('this.columnsthis.columns', this.columns);
},
// 地区选择器打开
headerAreaPopupClick() {
this.show = true;
},
// 省市区选择器函数
headerAreaClick(data) {
console.log('接受参数值', data);
this.area = `${data.confirmProv.name}${data.confirmCity.area_name}${data.confirmDist.business_name}`;
this.confirmCity = data.confirmProv;
this.confirmArea = data.confirmCity;
this.confirmBusiness = data.confirmDist;
this.show = false;
},
// input输入框共用方法
headerInputClick(e) {
console.log('e', e)
const {
name
} = e.currentTarget.dataset;
this[name] = e.detail.value
},
// 商户类型选择器打开
headerShopTypeClick() {
this.shopTypeShow = true
},
// 商户类型选择器 点击确定
confirm(e) {
console.log('ee1ee', e);
this.shopType = e.value[0];
this.shopTypeShow = false;
},
// 商户类别选择器打开
headerShopCategoryClick() {
this.shopCategoryShow = true;
},
// 商户类型变换触发事件
bindPickerChange(e) {
console.log('123132132', e)
const {
value
} = e.detail;
const {
shopCategoryColumns
} = this;
console.log('shopCategoryColumns', shopCategoryColumns);
let newTwoCol = shopCategoryColumns[value[0]].children;
let checked = newTwoCol[value[1]];
console.log('newTwoCol', newTwoCol);
console.log('checked', checked);
this.shopCategoryTwoColumns = newTwoCol;
this.shopCategoryChecked2 = checked;
},
// 商户类型选择器确定 点击事件
onOk2() {
const {
shopCategoryChecked2,
shopCategoryColumns
} = this;
let checked;
if (!shopCategoryChecked2.cate_id) {
checked = shopCategoryColumns[0].children[0]
} else {
checked = shopCategoryChecked2
};
this.shopCategoryShow = false;
this.shopCategory = checked;
},
// 打开地图选择商铺名称
chooseLocation() {
uni.chooseLocation({
success: (res) => {
console.log('打开地图选择商铺名称', res);
if (!res.name) {
this.latitude = 0;
this.longitude = 0;
this.shopName = '';
this.communityText = '';
uni.showToast({
title: '请选择您的商铺名称',
icon: 'none'
});
return;
}
// 更新页面数据,如标记点等
this.latitude = res.latitude;
this.longitude = res.longitude;
this.shopName = res.name;
this.communityText = res.address;
},
fail: (err) => {
console.log('选择位置失败', err);
}
});
},
// 上传图片
beforeRead(e) {
console.log('12331', e);
uni.showLoading({
title: '上传中',
})
const {
file,
name
} = e;
let that = this
upload(file.url, (res) => {
uni.hideLoading();
let datas = JSON.parse(res)
console.log(datas.data);
let fileList = that[name];
let obj = {
url: picUrl + datas.data.path,
picUrl: datas.data.path,
name: 'avatar'
}
fileList.push(obj)
that[name] = fileList
})
},
// 删除图片
deleteImg(e) {
console.log('删除图[]', e);
const {
name,
file: {
picUrl
}
} = e;
const newList = this[name].filter((item) => item.picUrl !== picUrl);
this[name] = newList
},
// 关闭弹窗选择器
onClose() {
this.show = false;
this.timeShow = false;
this.endTimeShow = false;
this.shopTypeShow = false;
this.shopCategoryShow = false;
},
// 营业开始时间弹窗显示
headerSelectTimeClick(e) {
this.timeShow = true;
},
// 结束营业时间弹窗显示
headerSelectTimeClick2(e) {
this.endTimeShow = true;
},
onConfirm(e) {
this.timeShow = false;
this.startTime = e.value;
},
onConfirm2(e) {
this.endTimeShow = false;
this.endTime = e.value;
},
// 是否营业
headerRedioClick(e) {
const {
name
} = e.currentTarget.dataset;
this.radio = name;
},
// 富文本输入
headerTextClick(e) {
console.log('1231131311', e);
this.shopText = e.detail.value
},
mock() {
const res = {
"shop_id": 29,
"parent_id": 0,
"user_id": 0,
"cate_id": 0,
"merchant_no": "",
"term_no": "",
"grade_id": 0,
"wap_template_id": 0,
"pc_template_id": 0,
"area_id": 73,
"city_id": 3,
"type_id": 3,
"business_id": 1135,
"shop_name": "石家庄东站",
"logo": "/static/images/2025-05-13/d9uvaeq74w5ldp4kdt.png",
"photo": "/static/images/2025-05-13/d9uvao2kxg3wtb2gz6.png",
"service_weixin_qrcode": "",
"tel": "84778888",
"extension": "",
"qq": "",
"mobile": "15977777777",
"contact": "管理员1",
"addr": "河北省石家庄市桥东区石家庄东站",
"score": 0,
"score_num": 0,
"fans_num": 0,
"zan_num": 0,
"d_1": 0,
"d_2": 0,
"d_3": 0,
"panorama_url": "",
"orderby": 0,
"lng": "114.626212",
"lat": "38.050245",
"ding_num": 0,
"closed": 0,
"view": 0,
"audit": 1,
"recognition": 0,
"is_online": 0,
"is_tuan_pay": 0,
"is_hotel_pay": 0,
"is_mall_pay": 0,
"is_ele_pay": 0,
"is_ele_pei": 0,
"logistics": 0,
"is_market_pei": 0,
"is_store_pei": 0,
"is_goods_pei": 0,
"is_ding": 0,
"is_biz": 0,
"is_profit": 0,
"is_renzheng": 0,
"is_ele_print": 0,
"is_tuan_print": 0,
"is_goods_print": 0,
"is_booking_print": 0,
"is_appoint_print": 0,
"is_goods_backers": 0,
"is_ele_backers": 0,
"backers": "",
"is_restore_prestige": 0,
"tags": "",
"create_time": "2025-05-13 16:16:34",
"create_ip": "",
"tui_uid": 0,
"api_key": "",
"m_key": "",
"partner": "",
"machine_code": "",
"service": "",
"service_audit": 0,
"express_price": 0,
"shop_apply_price": 0,
"commission": 0,
"integral": "",
"bg_date": "",
"end_date": "",
"qrcode": "",
"gather_url": "",
"is_external": 0,
"mobile_external_url": "",
"pc_external_url": "",
"is_ding_print": 0,
"is_open_platform": 0,
"is_teamwork": 0,
"mini_appid": "",
"mini_appsecret": "",
"mini_qrcode_address": "",
"overdue": "",
"is_open": 1,
"is_open_mall": 0,
"is_open_booking": 0,
"is_open_hwbooking": 0,
"is_open_service": 0,
"is_open_cpbooking": 0,
"is_open_vem": 0,
"is_open_ele": 0,
"is_open_hotel": 0,
"is_open_community": 0,
"is_open_farm": 0,
"is_open_tuan": 0,
"is_open_recycle": 0,
"is_open_coupon": 0,
"is_open_platform_shop": 0,
"is_open_health": 0,
"is_open_digital": 0,
"is_platform_pay": 0,
"service_list_temp": "",
"mini_mchid": "",
"mini_key": "",
"mini_cert_pem": "",
"mini_key_pem": "",
"module_config": "",
"pay_config": "",
"is_open_douyin": 0,
"payment_method": "",
"tts_config": "",
"pc_pay_config": "",
"opening_time": "08:00",
"closing_time": "19:00",
"presentation": "净水机测试数据",
"is_fenzhang": 0,
"fen_cheng": 0
}
if (res.type_id === 2) {
uni.showToast({
title: '申请成功',
success() {
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 2000)
}
})
return
}
if (res.type_id === 1) {
this.step = 2;
this.columns = realColumns;
this.shopType = {};
this.shopId = res.shop_id;
this.shopName = '';
this.latitude = 0;
this.longitude = 0;
this.communityText = '';
}
if (res.type_id === 3) {
this.step = 3;
this.shopName = res.shop_name;
this.shopId = res.shop_id;
}
},
// 商家入驻
async headerSubmitClick() {
uni.showLoading({
title: '提交中',
mask: true
});
const {
area,
confirmCity,
confirmArea,
confirmBusiness,
address,
shopCategoryChecked2,
realColumns,
shopType,
shopName,
latitude,
longitude,
logoFileList,
shopFileList,
shopTel,
shopMobile,
ownerName,
startTime,
endTime,
radio,
wxQrcodeFileList,
shopText
} = this;
if (!area) {
uni.showToast({
title: '请选择所在区域',
icon: 'none'
})
return
}
if (!address) {
uni.showToast({
title: '请输入详细地址',
icon: 'none'
})
return
}
if (!shopType.text) {
uni.showToast({
title: '请选择商户类型',
icon: 'none'
})
return
}
if (shopType.type === 2 && !shopCategoryChecked2.cate_name) {
uni.showToast({
title: '请选择商户类别',
icon: 'none'
})
return
}
if (!shopName) {
uni.showToast({
title: '请选择您的商铺名称',
icon: 'none'
})
return
}
if (logoFileList.length === 0) {
uni.showToast({
title: '请上传您的商铺logo',
icon: 'none'
})
return
}
if (!shopTel) {
uni.showToast({
title: '请输入商铺固定电话',
icon: 'none'
})
return
}
if (!shopMobile || shopMobile.length !== 11) {
uni.showToast({
title: '请输入手机号码',
icon: 'none'
})
return
}
if (!isPhone(shopMobile)) {
uni.showToast({
title: '请填写正确电话',
icon: 'none'
})
return
}
if (!ownerName) {
uni.showToast({
title: '请输入管理人姓名',
icon: 'none'
})
return
}
if (!startTime) {
uni.showToast({
title: '请选择开始营业时间',
icon: 'none'
})
return
}
if (!endTime) {
uni.showToast({
title: '请选择结束营业时间',
icon: 'none'
})
return
}
if (!shopText) {
uni.showToast({
title: '请输入商铺介绍信息',
icon: 'none'
})
return
}
const res = await request(apiArr.settledShop, 'POST', {
addr: area + address,
city_id: confirmCity.city_id, // 省id
area_id: confirmArea.area_id, // 市id
business_id: confirmBusiness.business_id, // 区id
cate_id: shopCategoryChecked2.cate_id,
shop_name: shopName,
open_time: startTime,
close_time: endTime,
contact: ownerName,
is_open: radio === 'open' ? 1 : 2,
lat: String(latitude),
lng: String(longitude),
logo: logoFileList[0].picUrl,
mobile: shopMobile,
tel: shopTel,
photo: shopFileList.length !== 0 ? shopFileList[0].picUrl : '',
service_weixin_qrcode: wxQrcodeFileList.length !== 0 ? wxQrcodeFileList[0].picUrl : '',
type_id: shopType.type,
presentation: shopText,
}, {
silent: false
});
console.log('添加结果返回res', res);
uni.hideLoading();
if (res.type_id === 2) {
uni.showToast({
title: '申请成功',
success() {
setTimeout(() => {
uni.navigateBack({
delta: 1
})
}, 2000)
}
})
return
}
if (res.type_id === 1) {
this.step = 2;
this.columns = realColumns;
this.shopType = {};
this.shopId = res.shop_id;
this.shopName = '';
this.latitude = 0;
this.longitude = 0;
this.communityText = '';
}
if (res.type_id === 3) {
this.step = 3;
this.shopName = res.shop_name;
this.shopId = res.shop_id;
}
},
// 社区入驻
async headerSubmitClick3() {
const {
shopId,
area,
confirmCity,
confirmArea,
confirmBusiness,
address,
shopType,
communityMobile,
communityName,
communityPic,
latitude,
longitude,
communitySwiper,
communityTel,
communityText
} = this;
uni.showLoading({
title: '提交中',
mask: true
});
if (!area) {
uni.showToast({
title: '请选择所在区域',
icon: 'none'
})
return
}
if (!address) {
uni.showToast({
title: '请输入详细地址',
icon: 'none'
})
return
}
if (!shopType.text) {
uni.showToast({
title: '请选择社区类型',
icon: 'none'
})
return
}
if (!communityName) {
uni.showToast({
title: '请输入社区名称',
icon: 'none'
})
return
}
if (!communityText) {
uni.showToast({
title: '请选择您的社区位置',
icon: 'none'
})
return
}
if (communityPic.length === 0) {
uni.showToast({
title: '请上传社区图片',
icon: 'none'
})
return
}
if (!communityTel) {
uni.showToast({
title: '请输入固定电话号码',
icon: 'none'
})
return
}
if (!communityMobile || communityMobile.length !== 11) {
uni.showToast({
title: '请输入手机号码',
icon: 'none'
})
return
}
if (!isPhone(communityMobile)) {
uni.showToast({
title: '请填写正确电话',
icon: 'none'
})
return
}
const res = await request(apiArr.settledComm, 'POST', {
addr: area + address,
city_id: confirmCity.city_id, // 省id
area_id: confirmArea.area_id, // 市id
business_id: confirmBusiness.business_id, // 区id
lat: String(latitude),
lng: String(longitude),
tel: communityTel,
mobile: communityMobile,
name: communityName,
pic: communityPic[0].picUrl,
region: area,
shop_id: shopId,
swiper_img: communitySwiper.length !== 0 ? communitySwiper.map((item) => item.picUrl).join(',') : '',
tag: '', // 暂时传空
type: String(shopType.type),
}, {
silent: false
});
uni.hideLoading();
uni.showModal({
title: '提示',
content: res.info,
showCancel: false,
success: function(res) {
if (res.confirm) {
uni.navigateBack({
delta: 1
})
}
}
})
},
// 合伙人入驻
async headerSubmitClick2() {
uni.showLoading({
title: '提交中',
mask: true
});
const {
shopId,
area,
confirmCity,
confirmArea,
confirmBusiness,
address,
customerPhone,
dealerName,
dealerIndexBanner,
dealerLogo,
dalerPic,
inviteDealerEncoding,
inviteDealerId,
inviteDealerName,
contactName,
contactMobile,
shopName,
dealerOwnerName,
ownerCard,
ownerMobile,
cardFront,
cardBack,
business,
code,
dealershopText,
dealershopRemark
} = this;
if (!area) {
uni.showToast({
title: '请选择所在区域',
icon: 'none'
})
return
}
if (!address) {
uni.showToast({
title: '请输入详细地址',
icon: 'none'
})
return
}
if (!dealerName) {
uni.showToast({
title: '请输入经销商名称',
icon: 'none'
})
return
}
if (dealerIndexBanner.length === 0) {
uni.showToast({
title: '请上传轮播图',
icon: 'none'
})
return
}
if (dealerLogo.length === 0) {
uni.showToast({
title: '请上传经销商图标',
icon: 'none'
})
return
}
if (dalerPic.length === 0) {
uni.showToast({
title: '请上传经销商图片',
icon: 'none'
})
return
}
if (!contactName) {
uni.showToast({
title: '请输入联系人名称',
icon: 'none'
})
return
}
if (!contactMobile || contactMobile.length !== 11) {
uni.showToast({
title: '请输入联系人电话号码',
icon: 'none'
})
return
}
if (!isPhone(contactMobile)) {
uni.showToast({
title: '请填写正确联系人电话号码',
icon: 'none'
})
return
}
if (!dealerOwnerName) {
uni.showToast({
title: '请输入法人名称',
icon: 'none'
})
return
}
if (!ownerCard) {
uni.showToast({
title: '请输入法人身份证号',
icon: 'none'
})
return
}
if (!ownerMobile || contactMobile.length !== 11) {
uni.showToast({
title: '请输入法人手机号',
icon: 'none'
})
return
}
if (!isPhone(ownerMobile)) {
uni.showToast({
title: '请输入法人正确手机号',
icon: 'none'
})
return
}
if (business.length === 0 || business.length !== 2) {
uni.showToast({
title: '请上传营业执照照片',
icon: 'none'
})
return
}
if (!code) {
uni.showToast({
title: '请输入统一社会信用代码',
icon: 'none'
})
return
}
const res = await request(apiArr.settledDeal, 'POST', {
address: area + address,
city_id: confirmCity.city_id, // 省id
area_id: confirmArea.area_id, // 市id
business_id: confirmBusiness.business_id, // 区id
customer_phone: customerPhone, // 客户端客户中心电话
deal_name: dealerName, // 经销商名称
deal_icon: dealerLogo[0].picUrl, // 经销商图标
deal_img: dalerPic[0].picUrl, // 经销商图片
id_back: cardBack.length !== 0 ? cardBack[0].picUrl : '', // 身份证背面图片
id_front: cardFront.length !== 0 ? cardFront[0].picUrl : '', // 身份证正面图片
invite_dealer_code: inviteDealerEncoding, // 邀请经销商编码 可空
invite_dealer_id: inviteDealerId, // 邀请经销商ID 可空
invite_dealer_name: inviteDealerName, //邀请经销商名称 可空
legal: contactName, // 联系人
phone: contactMobile, // 联系人电话
merchant_name: shopName, // 商户名称 此处填写shop_name
owner: dealerOwnerName, // 法人名称
owner_id: ownerCard, // 法人身份证号
owner_phone: ownerMobile, // 法人手机号
region: area,
shop_id: shopId, // 商户id
swiper_img: dealerIndexBanner.length !== 0 ? dealerIndexBanner.map((item) => item.picUrl).join(',') :
'', // 经销商首页轮播
unique_code: business.length !== 0 ? business.map((item) => item.picUrl).join(',') : '', // 营业执照图片
unique_id: code, // 统一社会信用代码
remark: dealershopRemark, // 备注
introduction: dealershopText, // 商户介绍
}, {
silent: false
})
uni.hideLoading();
uni.showModal({
title: '提示',
content: res.message,
showCancel: false,
success: function(res) {
if (res.confirm) {
uni.navigateBack({
delta: 1
})
}
}
})
},
},
onLoad() {
this.columns = this.shopColumns;
this.init();
}
}
</script>
<style>
@import url("./index.css");
</style>