You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
yanzong_qianduan/pages/news1/MerchantSettlement.vue

545 lines
14 KiB

<template>
<view class="settlement">
<view class="topContent">
<view>商家入驻信息采集请认真填写提交</view>
<view style="margin-top:22upx">通过审核后会有专人联系</view>
</view>
<view class="formContent">
<u-form :model="form" ref="uForm">
<view class="formSection">
<u-form-item label="*主体公司名称 ">
<u-input border placeholder="请输入贵公司名称" v-model="form.store_name" />
</u-form-item>
<u-form-item label="*主营类目" @click="categoryShow = true">
<u-input v-model="form.store_cat" placeholder="请选择选择主营类目" type="select"
@click="categoryShow = true" />
<u-action-sheet :list="categoryList" :cancel-btn="false" v-model="categoryShow"
@click="actionSheetCallback(1,$event)"></u-action-sheet>
</u-form-item>
</view>
<view class="formSection">
<u-form-item label="*公司地址" @click="addrshow = true">
<u-input v-model="form.store_address" placeholder="请选择地级" type="select"
@click="addrshow = true" />
<u-picker mode="region" v-model="addrshow" @confirm="getAddress"></u-picker>
</u-form-item>
<u-form-item label="*合作品牌 ">
<u-input border placeholder="请输入" v-model="form.store_brand" />
</u-form-item>
<u-form-item label="*自有品牌/代理入驻" @click="bandShow = true">
<u-input v-model="brand_name" placeholder="代理入驻" type="select" @click="bandShow = true" />
<u-action-sheet :list="bandList" :cancel-btn="false" v-model="bandShow"
@click="actionSheetCallback(2,$event)"></u-action-sheet>
</u-form-item>
<u-form-item label="*一级/二级授权" @click="levelShow = true">
<u-input v-model="authorize_name" placeholder="一级授权" type="select" @click="levelShow = true" />
<u-action-sheet :list="leveList" :cancel-btn="false" v-model="levelShow"
@click="actionSheetCallback(3,$event)"></u-action-sheet>
</u-form-item>
<u-form-item label="*可否含税" @click="taxShow = true">
<u-input v-model="rate_name" placeholder="请选择" type="select" @click="taxShow = true" />
<u-action-sheet :list="taxList" :cancel-btn="false" v-model="taxShow"
@click="actionSheetCallback(4,$event)"></u-action-sheet>
</u-form-item>
</view>
<view class="formSection">
<u-form-item label="*联系人姓名 ">
<u-input border placeholder="请输入姓名" v-model="form.user_name" />
</u-form-item>
<u-form-item label="*联系人职位" @click="contactShow = true">
<u-input v-model="form.user_position" placeholder="请选择" type="select"
@click="contactShow = true" />
<u-action-sheet :list="contactsList" :cancel-btn="false" v-model="contactShow"
@click="actionSheetCallback(5,$event)"></u-action-sheet>
</u-form-item>
<u-form-item label="*联系人手机号">
<u-input border placeholder="请输入手机号" type="numer" v-model="form.user_mobile" />
</u-form-item>
<u-form-item label="*联系人微信号">
<u-input border placeholder="请输入微信号" v-model="form.user_wx" />
</u-form-item>
<u-form-item label="*联系人邮箱">
<u-input border placeholder="请输入邮箱" v-model="form.user_email" />
</u-form-item>
</view>
<view class="formSection">
<u-form-item label="*仓储模式" @click="modeShow = true">
<u-input v-model="form.store_model" placeholder="请选择" type="select" @click="modeShow = true" />
<u-action-sheet :list="modeList" :cancel-btn="false" v-model="modeShow"
@click="actionSheetCallback(6,$event)"></u-action-sheet>
</u-form-item>
<u-form-item label="*周末是否发货" @click="sendShow = true">
<u-input v-model="send_name" placeholder="请选择" type="select" @click="sendShow = true" />
<u-action-sheet :list="sendList" :cancel-btn="false" v-model="sendShow"
@click="actionSheetCallback(7,$event)"></u-action-sheet>
</u-form-item>
<u-form-item label="*是否自有工厂" @click="factoryShow = true">
<u-input v-model="factory_name" placeholder="请选择" type="select" @click="factoryShow = true" />
<u-action-sheet :list="yesNotList" :cancel-btn="false" v-model="factoryShow"
@click="actionSheetCallback(8,$event)"></u-action-sheet>
</u-form-item>
<u-form-item label="*是否有线下渠道" @click="yesnoShow = true">
<u-input v-model="offline_name" placeholder="请选择" type="select" @click="yesnoShow = true" />
<u-action-sheet :list="yesNotList" :cancel-btn="false" v-model="yesnoShow"
@click="actionSheetCallback(9,$event)"></u-action-sheet>
</u-form-item>
<u-form-item label="*是否有电商店铺" @click="storeShow = true">
<u-input v-model="shop_name" placeholder="请选择" type="select" @click="storeShow = true" />
<u-action-sheet :list="yesNotList" :cancel-btn="false" v-model="storeShow"
@click="actionSheetCallback(10,$event)"></u-action-sheet>
</u-form-item>
</view>
</u-form>
</view>
<view class="shop">
<view class="shopTitle">电商平台可多选</view>
<view class="shopItem">
<view :class="active==index?'active shopText':'shopText'" @click="getShop(index)"
v-for="(item,index) in btnList" :key="index">
<text>{{item}}</text>
<image v-if="active==index" src="/static/news1/selected.png" mode="widthFix"></image>
</view>
</view>
</view>
<view class="submitBtn" @click="sureSubmit">
提交
</view>
<u-popup v-model="popShow" mode="center" border-radius="12">
<view>
<view style="text-align: center;">
<image src="/static/news1/pop.png" class="popimg" mode="widthFix"></image>
</view>
<view class="popcontent">
<view class="poptitle">
您的入驻申请提交成功
</view>
<view class="poptext">
请您保持电话、微信畅通我们将在2个工作日内与您联系!顺祝商祺!
</view>
<view class="knowBtn" @click="popShow=false">
我知道了
</view>
</view>
</view>
</u-popup>
</view>
</template>
<script>
import * as help from '@/api/help'
export default {
data() {
return {
brand_name: '',
authorize_name: '',
rate_name: '',
shop_name: '',
offline_name: '',
factory_name: '',
send_name: '',
form: {
store_name: '',
store_cat: '',
store_address: '',
store_brand: '',
store_settle_type: '',
authorize: '',
has_tax: '',
user_name: '',
user_position: '',
user_mobile: '',
user_wx: '',
user_email: '',
store_model: '',
send_type: '',
has_factory: '',
has_offline: '',
has_online_shop: '',
},
categoryShow: false,
categoryList: [{
text: '3C数码',
id: 1
}, {
text: '家用电蒸',
id: 2
}, {
text: '家居家装',
id: 3
}, {
text: '家居生活',
id: 4
}, {
text: '美容个护',
id: 5
}, {
text: '服饰箱包',
id: 6
}, {
text: '母婴玩具',
id: 7
}, {
text: '运动广外',
id: 8
}, {
text: '食品饮料',
id: 9
}, {
text: '水果生鲜',
id: 10
}, {
text: '汽车用品',
id: 11
}, {
text: '虚拟商品',
id: 11
}],
bandShow: false,
bandList: [{
text: '自有品牌',
id: 1
}, {
text: '代理入驻',
id: 2
}],
levelShow: false,
leveList: [{
text: '一级授权',
id: 1
}, {
text: '二级授权',
id: 2
}],
modeShow: false,
modeList: [{
text: '自有仓库',
id: 1
}, {
text: '上游代发',
id: 2
}, {
text: '以上皆有',
id: 3
}],
contactShow: false,
contactsList: [{
text: '老板',
id: 1
}, {
text: '市场经理',
id: 2
}, {
text: '商务',
id: 3
}],
yesnoShow: false,
sendShow: false,
factoryShow: false,
taxShow: false,
taxList: [{
text: '不含',
id: 0
}, {
text: '含',
id: 1
}],
storeShow: false,
yesNotList: [{
text: '无',
id: 0
}, {
text: '有',
id: 1
}],
sendList: [{
text: '不发货',
id: 0
}, {
text: '发货',
id: 1
}],
addrshow: false,
btnList: [],
active: 0,
popShow: false,
}
},
onLoad() {
this.getStoreList()
},
methods: {
actionSheetCallback(type, index) {
console.log(type, index)
if (type == 1) { //类目
this.form.store_cat = this.categoryList[index].text
}
if (type == 2) { //自有品牌/代理入驻
this.brand_name = this.bandList[index].text
this.form.store_settle_type = this.bandList[index].id
}
if (type == 3) { //一级/二级授权
this.authorize_name = this.leveList[index].text
this.form.authorize = this.leveList[index].id
}
if (type == 4) { //是否含税
this.rate_name = this.taxList[index].text
this.form.has_tax = this.taxList[index].id
}
if (type == 5) { //职务
this.form.user_position = this.contactsList[index].text
}
if (type == 6) { //模式
this.form.store_model = this.modeList[index].text
}
if (type == 7) { //是否周末发货
this.send_name = this.sendList[index].text
this.form.send_type = this.sendList[index].id
}
if (type == 8) { //是否有工厂
this.factory_name = this.yesNotList[index].text
this.form.has_factory = this.yesNotList[index].id
}
if (type == 9) { //是否有线下渠道
this.offline_name = this.yesNotList[index].text
this.form.has_offline = this.yesNotList[index].id
}
if (type == 10) { //是否有电商店铺
this.shop_name = this.yesNotList[index].text
this.form.has_online_shop = this.yesNotList[index].id
}
},
getShop(index) {
this.active = index;
},
getAddress(e) {
this.form.store_address = e.province.name + e.city.name + e.area.name;
},
getStoreList() {
let that = this;
help.getStoreType()
.then(res => {
that.btnList = res.data
})
.finally()
},
sureSubmit() {
const that = this;
that.form.store_type = that.btnList[that.active]
console.log(that.form)
help.joinStore(that.form)
.then(res => {
if (res.status) {
that.popShow = true
} else {
uni.showToast({
title: '入驻失败',
icon: 'none',
duration: 2000
})
}
})
.finally()
},
}
}
</script>
<style lang="scss" scoped>
page {
min-height: 100%;
padding-bottom: 60upx;
}
.settlement {
height: 100%;
.topContent {
height: 232upx;
background: linear-gradient(180deg, #FE7E71 0%, #FF4434 100%);
border-radius: 0px 0px 0px 0px;
opacity: 1;
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.formContent {
.formSection {
padding: 0 38upx 0 30upx;
background: #fff;
margin-bottom: 16upx;
}
}
::v-deep .u-form-item--left {
width: auto !important;
}
::v-deep .u-form-item--left__content__label {
font-size: 26upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FF4C3C;
width: 236upx;
}
::v-deep .u-border-bottom:after {
border: none;
}
.shop {
margin-top: 12upx;
background-color: #fff;
padding: 34upx 50upx 70upx 50upx;
.shopTitle {
font-size: 26upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #4C4C4C;
margin-bottom: 24upx;
}
.shopItem {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
.shopText {
width: 240upx;
height: 72upx;
line-height: 72upx;
text-align: center;
background: #FFFFFF;
border-radius: 3px 3px 3px 3px;
opacity: 1;
border: 1px solid #D6D6D6;
position: relative;
margin-bottom: 24upx;
text {
font-size: 26upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #B6B6B6;
}
image {
position: absolute;
z-index: 9;
right: -8upx;
bottom: -8upx;
height: 0;
width: 50upx;
height: auto;
}
}
.active {
text {
color: #FF4F40;
}
border: 1px solid #FF4F40;
}
}
}
.submitBtn {
margin: 60upx 24upx 0 24upx;
height: 100upx;
background: linear-gradient(180deg, #FE7E71 0%, #FF4434 100%);
border-radius: 52px 52px 52px 52px;
opacity: 1;
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 100upx;
text-align: center;
}
}
.popcontent {
width: 520upx;
height: 460upx;
background: linear-gradient(180deg, #FFE4E4 0%, #FFFFFF 100%);
border-radius: 6px 6px 6px 6px;
opacity: 1;
display: flex;
flex-direction: column;
// justify-content: space-around;
padding: 100upx 40upx 0 40upx;
align-items: center;
position: relative;
z-index: 1;
top: -80upx;
.poptitle {
font-size: 32upx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #000000;
}
.poptext {
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #727272;
margin-top: 36upx;
line-height: 36upx;
}
.knowBtn {
width: 400upx;
height: 72upx;
line-height: 72upx;
text-align: center;
background: #F55349;
border-radius: 36px 36px 36px 36px;
opacity: 1;
font-size: 28upx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #FFFFFF;
margin-top: 60upx;
}
}
.popimg {
// position: absolute;
width: 120upx;
height: auto;
position: relative;
z-index: 2;
}
::v-deep .u-mode-center-box {
background: transparent;
}
</style>