|
|
<template>
|
|
|
<view class="apply">
|
|
|
<u-navbar title="云拣仓代理申请" height="108rpx" :bgColor="background" placeholder="true" :titleStyle="{color: '#FFF', fontSize: '32rpx'}" leftIconColor="#FFF"></u-navbar>
|
|
|
<view class="shop-detail">
|
|
|
<shop-card-deatil></shop-card-deatil>
|
|
|
</view>
|
|
|
<view class="main-body">
|
|
|
<u-form :model='model' :rules="rules" ref="uForm" :label-style="{'color':'#000000',fontWeight:600,lineHeight:1.2,fontSize:'32rpx'}" >
|
|
|
<view class="item-con">
|
|
|
<u-form-item
|
|
|
label="姓名"
|
|
|
labelWidth="280rpx"
|
|
|
prop="name"
|
|
|
label-position="top"
|
|
|
required
|
|
|
:border-bottom="false"
|
|
|
>
|
|
|
<u-input placeholder="请输入您的姓名" maxlength="40" v-model="model.name" placeholderStyle="color:#999" border="none"></u-input>
|
|
|
</u-form-item>
|
|
|
</view>
|
|
|
<view class="item-con">
|
|
|
<u-form-item
|
|
|
label="手机号"
|
|
|
labelWidth="280rpx"
|
|
|
prop="phone"
|
|
|
label-position="top"
|
|
|
required
|
|
|
:border-bottom="false"
|
|
|
>
|
|
|
<u-input placeholder="请输入您的手机号" maxlength="40" v-model="model.phone" placeholderStyle="color:#999" border="none"></u-input>
|
|
|
</u-form-item>
|
|
|
</view>
|
|
|
<view class="item-con">
|
|
|
<u-form-item
|
|
|
label="身份证号"
|
|
|
labelWidth="280rpx"
|
|
|
prop="idCard"
|
|
|
label-position="top"
|
|
|
required
|
|
|
:border-bottom="false"
|
|
|
>
|
|
|
<u-input placeholder="请输入您的身份证号" maxlength="40" v-model="model.idCard" placeholderStyle="color:#999" border="none"></u-input>
|
|
|
</u-form-item>
|
|
|
<u-form-item
|
|
|
label="补充身份证照片"
|
|
|
labelWidth="280rpx"
|
|
|
prop="idCardImage"
|
|
|
label-position="top"
|
|
|
required
|
|
|
:border-bottom="false"
|
|
|
>
|
|
|
<view class="idCardCon">
|
|
|
<view class="idCardItem">
|
|
|
<u-upload
|
|
|
:fileList="idCardList"
|
|
|
@afterRead="afterRead"
|
|
|
@delete="deletePic"
|
|
|
name="idCardList"
|
|
|
:maxCount="1"
|
|
|
>
|
|
|
<image class="idCardImg" src="http://file.hecrab.com/crab-net/yxs-yxsSfzQ.png"></image>
|
|
|
</u-upload>
|
|
|
<text class="idCardText">点击上传头像面</text>
|
|
|
</view>
|
|
|
|
|
|
<view class="idCardItem">
|
|
|
<u-upload
|
|
|
:fileList="idCardUpList"
|
|
|
@afterRead="afterRead"
|
|
|
@delete="deletePic"
|
|
|
name="idCardUpList"
|
|
|
:maxCount="1"
|
|
|
>
|
|
|
<image class="idCardImg" src="http://file.hecrab.com/crab-net/yxs-yxsSfzH.png"></image>
|
|
|
</u-upload>
|
|
|
<text class="idCardText">点击上传国徽面</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-form-item>
|
|
|
|
|
|
<!-- <u-form-item
|
|
|
label="补充身份证照片"
|
|
|
labelWidth="280rpx"
|
|
|
prop="idCardImage"
|
|
|
label-position="top"
|
|
|
required
|
|
|
:border-bottom="false">
|
|
|
<view class="idCardCon">
|
|
|
<image class="idCardImg" src="http://file.hecrab.com/crab-net/yxs-yxsSfzQ.png"
|
|
|
mode="aspectFit"></image>
|
|
|
<file-upload :maxNum="1" uploadText="身份证人像面" v-model="idCardList"
|
|
|
:showTipsNumber="false" @okCallBack="uploadSuccess(1)"></file-upload>
|
|
|
</view>
|
|
|
<view class="idCardCon">
|
|
|
<image class="idCardImg" src="http://file.hecrab.com/crab-net/yxs-yxsSfzH.png"
|
|
|
mode="aspectFit"></image>
|
|
|
<file-upload :maxNum="1" uploadText="身份证国徽面" v-model="idCardUpList" :showTipsNumber="false"
|
|
|
@okCallBack="uploadSuccess(2)"></file-upload>
|
|
|
</view>
|
|
|
</u-form-item> -->
|
|
|
</view>
|
|
|
|
|
|
<view class="item-con">
|
|
|
<u-form-item
|
|
|
label="预计销量(万年/年)"
|
|
|
labelWidth="280rpx"
|
|
|
prop="sales"
|
|
|
label-position="top"
|
|
|
required
|
|
|
:border-bottom="false"
|
|
|
>
|
|
|
<u-input placeholder="请输入你的每年预计销量" maxlength="40" v-model="model.sales" placeholderStyle="color:#999" border="none"></u-input>
|
|
|
</u-form-item>
|
|
|
</view>
|
|
|
|
|
|
<view class="item-con">
|
|
|
<u-form-item
|
|
|
label="选择你的销售渠道(多选)"
|
|
|
labelWidth="630rpx"
|
|
|
prop=""
|
|
|
label-position="top"
|
|
|
required
|
|
|
:border-bottom="false"
|
|
|
>
|
|
|
<view class="Item" >
|
|
|
<view class="Con" v-for="(item,index) in channelList" :key="index" :class="item.checked?'checked':''" :data-id="item.num" @tap="selectChannel">{{item.name}}</view>
|
|
|
</view>
|
|
|
</u-form-item>
|
|
|
</view>
|
|
|
|
|
|
<view class="item-con">
|
|
|
<u-form-item
|
|
|
label="选择你的分销模式(多选)"
|
|
|
labelWidth="630rpx"
|
|
|
prop=""
|
|
|
label-position="top"
|
|
|
required
|
|
|
:border-bottom="false"
|
|
|
>
|
|
|
<view class="Item" >
|
|
|
<view class="Con" v-for="(item,index) in modelList" :key="index" :class="item.checked?'checked':''" :data-id="item.num" @tap="selectModel">{{item.name}}</view>
|
|
|
</view>
|
|
|
</u-form-item>
|
|
|
</view>
|
|
|
</u-form>
|
|
|
</view>
|
|
|
<view class="bottom">
|
|
|
<button class="saveBtn" @click="saveClick">提交申请</button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import list from "../../uni_modules/uview-ui/libs/config/props/list";
|
|
|
import shopCardDeatil from "./components/shopDetailCard.vue"
|
|
|
export default{
|
|
|
components:{shopCardDeatil},
|
|
|
data() {
|
|
|
return{
|
|
|
background:'transparent',
|
|
|
model:{
|
|
|
name:'',
|
|
|
phone:'',
|
|
|
idCard:'',
|
|
|
sales:'',
|
|
|
salesChannels:'',
|
|
|
salesModel:''
|
|
|
},
|
|
|
rules:{
|
|
|
name:[{
|
|
|
required:true,
|
|
|
message:'请输入代理商姓名',
|
|
|
trigger:['change','blur']
|
|
|
}],
|
|
|
phone:[{
|
|
|
required:true,
|
|
|
message:'请输入代理商手机号',
|
|
|
trigger:['change','blur']
|
|
|
},
|
|
|
{
|
|
|
validator:(rule,value,callback)=>{
|
|
|
//true表示通过验证,false表示不通过验证
|
|
|
return uni.$u.test.mobile(value);
|
|
|
},
|
|
|
message:'手机号码不正确',
|
|
|
trigger:['change'],
|
|
|
}],
|
|
|
idCard:[{
|
|
|
required:true,
|
|
|
message:"请输入代理商身份证号",
|
|
|
trigger:['change','blur']
|
|
|
},
|
|
|
{
|
|
|
validator:(rule,value,callback)=>{
|
|
|
return uni.$u.test.idCard(value);
|
|
|
},
|
|
|
message:'身份证号不正确',
|
|
|
trigger:['change']
|
|
|
}],
|
|
|
sales:[{
|
|
|
required:true,
|
|
|
message:"请输入预计年销量",
|
|
|
trigger:['change','blur']
|
|
|
}],
|
|
|
|
|
|
},
|
|
|
idCardList:[],
|
|
|
idCardUpList:[],
|
|
|
channelList:[{
|
|
|
name:"微信",
|
|
|
num:'1',
|
|
|
checked:false
|
|
|
},
|
|
|
{
|
|
|
name:"淘宝",
|
|
|
num:'2',
|
|
|
checked:false
|
|
|
},
|
|
|
{
|
|
|
name:"抖音",
|
|
|
num:'3',
|
|
|
checked:false
|
|
|
},
|
|
|
{
|
|
|
name:"京东",
|
|
|
num:'4',
|
|
|
checked:false
|
|
|
},
|
|
|
{
|
|
|
name:"实体店",
|
|
|
num:'5',
|
|
|
checked:false
|
|
|
}],
|
|
|
modelList:[{
|
|
|
name:"卡券代理",
|
|
|
num:'1',
|
|
|
checked:false
|
|
|
},
|
|
|
{
|
|
|
name:"批发",
|
|
|
num:'2',
|
|
|
checked:false
|
|
|
},
|
|
|
{
|
|
|
name:"一键代发（通用包装）",
|
|
|
num:'3',
|
|
|
checked:false
|
|
|
},
|
|
|
{
|
|
|
name:"一键代发（自有包装）",
|
|
|
num:'4',
|
|
|
checked:false
|
|
|
}]
|
|
|
}
|
|
|
},
|
|
|
onReady() {
|
|
|
this.$refs.uForm.setRules(this.rules)
|
|
|
},
|
|
|
methods:{
|
|
|
//删除图片
|
|
|
deletePic(event){
|
|
|
this['${event.name}'].splice(event.index,1)
|
|
|
},
|
|
|
//新增图片
|
|
|
async afterRead(event){
|
|
|
//当设置multiple为true时，file为数组格式，否则为对象格式
|
|
|
let lists = [].concat(event.file)
|
|
|
let fileListLen = this['${event.name}'].length
|
|
|
lists.map((item)=>{
|
|
|
this['${event.name}'].push({
|
|
|
...item,
|
|
|
status: 'uploading',
|
|
|
message: '上传中'
|
|
|
})
|
|
|
})
|
|
|
for (let i = 0; i < lists.length; i++) {
|
|
|
const result = await this.uploadFilePromise(lists[i].url)
|
|
|
console.log(result, '上传图像result');
|
|
|
let item = this[`${event.name}`][fileListLen]
|
|
|
this[`${event.name}`].splice(fileListLen, 1, Object.assign(item, {
|
|
|
status: result.status,
|
|
|
message: result.status == 'failed' ? '上传失败' : '',
|
|
|
url: result.url
|
|
|
}))
|
|
|
fileListLen++
|
|
|
}
|
|
|
},
|
|
|
//提交按钮
|
|
|
saveClick() {
|
|
|
this.$refs.uForm.validate(isOk => {
|
|
|
if (isOk) {
|
|
|
if (!this.idCardList.length) return this.$u.toast("请上传身份证人像面！")
|
|
|
if (!this.idCardUpList.length) return this.$u.toast("请上传身份证国徽面！")
|
|
|
// if (!this.channelChecked.length) return this.$u.toast("请至少选择一个销售渠道！")
|
|
|
// if (!this.distributionChecked.length) return this.$u.toast("请至少选择一个分销模式！")
|
|
|
this.request()
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
//事件点击
|
|
|
selectChannel:function(e){
|
|
|
var this_checked = e.currentTarget.dataset.id //获取对应的条目id
|
|
|
var parameterList = this.channelList //获取Json数组
|
|
|
console.log(this_checked)
|
|
|
if(parameterList[this_checked-1].checked){
|
|
|
parameterList[this_checked-1].checked = false
|
|
|
}else{
|
|
|
parameterList[this_checked-1].checked=true;
|
|
|
}
|
|
|
this.channelList=parameterList;
|
|
|
},
|
|
|
selectModel:function(e){
|
|
|
var this_checked = e.currentTarget.dataset.id //获取对应的条目id
|
|
|
var parameterList = this.modelList //获取Json数组
|
|
|
console.log(this_checked)
|
|
|
if(parameterList[this_checked-1].checked){
|
|
|
parameterList[this_checked-1].checked = false
|
|
|
}else{
|
|
|
parameterList[this_checked-1].checked=true;
|
|
|
}
|
|
|
this.modelList=parameterList;
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.apply{
|
|
|
height: 100vh;
|
|
|
background: linear-gradient( 270deg, #3975F1 0%, #4AA4F5 100%);
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
.shop-detail{
|
|
|
border-radius: 20rpx;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
margin-bottom: 24rpx;
|
|
|
}
|
|
|
.main-body{
|
|
|
box-sizing: border-box;
|
|
|
background: #F5F6FA;
|
|
|
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
|
|
padding: 36rpx;
|
|
|
flex: 1;
|
|
|
overflow: auto;
|
|
|
.item-con{
|
|
|
background: #FFFFFF;
|
|
|
border-radius: 20rpx;
|
|
|
padding: 4rpx 24rpx;
|
|
|
margin-bottom: 16rpx;
|
|
|
}
|
|
|
.idCardCon{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
width: 100%;
|
|
|
margin-top: 12rpx;
|
|
|
.idCardImg{
|
|
|
width: 300rpx;
|
|
|
height: 200rpx;
|
|
|
border-radius: 8rpx;
|
|
|
object-fit: cover;
|
|
|
}
|
|
|
.idCardText{
|
|
|
font-weight: 400;
|
|
|
font-size: 24rpx;
|
|
|
color: #999999;
|
|
|
margin-left: 58rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.bottom{
|
|
|
height: 180rpx;
|
|
|
background: #FFFFFF;
|
|
|
.saveBtn{
|
|
|
width: 678rpx;
|
|
|
height: 92rpx;
|
|
|
background: linear-gradient( 91deg, #43A1FF 0%, #2F80F9 100%);
|
|
|
border-radius: 24rpx;
|
|
|
font-size: 28rpx;
|
|
|
color: #FFFFFF;
|
|
|
padding-top: 12rpx;
|
|
|
}
|
|
|
}
|
|
|
.Item{
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
flex-wrap: wrap;
|
|
|
.Con{
|
|
|
width: 284rpx;
|
|
|
height: 84rpx;
|
|
|
background: #F7F7F7;
|
|
|
border-radius: 8rpx;
|
|
|
margin-top: 16rpx;
|
|
|
font-weight: 400;
|
|
|
font-size: 28rpx;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
padding-left: 24rpx;
|
|
|
|
|
|
}
|
|
|
.checked{
|
|
|
background: #E9F0FE;
|
|
|
color: #2E6BF6;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style> |