You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

408 lines
11 KiB
Vue

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<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'}" label-position="top" >
<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 14rpx 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>