dev
liudan
10 months ago
parent
bf3b3e0705
commit
827ea0d2e1
@ -0,0 +1,344 @@ |
||||
<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.name" /> |
||||
</u-form-item> |
||||
<u-form-item label="*主营类目" @click="typeShow = true"> |
||||
<u-input v-model="form.type" placeholder="请选择选择主营类目" type="select" @click="typeShow = true"/> |
||||
<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet> |
||||
</u-form-item> |
||||
</view> |
||||
<view class="formSection"> |
||||
<u-form-item label="*公司地址" @click="addrshow = true"> |
||||
<u-input v-model="form.addr" placeholder="请选择地级" type="select" @click="addrshow = true"/> |
||||
<u-picker mode="region" v-model="addrshow"></u-picker> |
||||
</u-form-item> |
||||
<u-form-item label="*合作品牌 "> |
||||
<u-input border placeholder="请输入" v-model="form.brand" /> |
||||
</u-form-item> |
||||
<u-form-item label="*自有品牌/代理入驻" @click="typeShow = true"> |
||||
<u-input v-model="form.agent" placeholder="代理入驻" type="select" @click="typeShow = true"/> |
||||
<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet> |
||||
</u-form-item> |
||||
<u-form-item label="*一级/二级授权" @click="typeShow = true"> |
||||
<u-input v-model="form.childAgent" placeholder="一级授权" type="select" @click="typeShow = true"/> |
||||
<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet> |
||||
</u-form-item> |
||||
<u-form-item label="*可否含税" @click="typeShow = true"> |
||||
<u-input v-model="form.rate" placeholder="请选择" type="select" @click="typeShow = true"/> |
||||
<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet> |
||||
</u-form-item> |
||||
</view> |
||||
<view class="formSection"> |
||||
<u-form-item label="*联系人姓名 "> |
||||
<u-input border placeholder="请输入姓名" v-model="form.contactName" /> |
||||
</u-form-item> |
||||
<u-form-item label="*联系人职位" @click="typeShow = true"> |
||||
<u-input v-model="form.contactPosition" placeholder="请选择" type="select" @click="typeShow = true"/> |
||||
<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet> |
||||
</u-form-item> |
||||
<u-form-item label="*联系人手机号"> |
||||
<u-input border placeholder="请输入手机号" v-model="form.contactPhone" /> |
||||
</u-form-item> |
||||
<u-form-item label="*联系人微信号"> |
||||
<u-input border placeholder="请输入微信号" v-model="form.contactwx" /> |
||||
</u-form-item> |
||||
<u-form-item label="*联系人邮箱"> |
||||
<u-input border placeholder="请输入邮箱" v-model="form.contactEmail" /> |
||||
</u-form-item> |
||||
|
||||
</view> |
||||
<view class="formSection"> |
||||
<u-form-item label="*仓储模式" @click="typeShow = true"> |
||||
<u-input v-model="form.mode" placeholder="请选择" type="select" @click="typeShow = true"/> |
||||
<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet> |
||||
</u-form-item> |
||||
<u-form-item label="*周末是否发货" @click="typeShow = true"> |
||||
<u-input v-model="form.weekend" placeholder="请选择" type="select" @click="typeShow = true"/> |
||||
<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet> |
||||
</u-form-item> |
||||
<u-form-item label="*是否自有工厂" @click="typeShow = true"> |
||||
<u-input v-model="form.company" placeholder="请选择" type="select" @click="typeShow = true"/> |
||||
<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet> |
||||
</u-form-item> |
||||
<u-form-item label="*是否有线下渠道" @click="typeShow = true"> |
||||
<u-input v-model="form.channel" placeholder="请选择" type="select" @click="typeShow = true"/> |
||||
<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet> |
||||
</u-form-item> |
||||
<u-form-item label="*是否有电商店铺" @click="typeShow = true"> |
||||
<u-input v-model="form.shop" placeholder="请选择" type="select" @click="typeShow = true"/> |
||||
<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></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="popShow=true"> |
||||
提交 |
||||
</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> |
||||
export default { |
||||
data() { |
||||
return { |
||||
form: { |
||||
name: '', |
||||
type: '', |
||||
addr:'', |
||||
brand:'', |
||||
agent:'', |
||||
childAgent:'', |
||||
rate:'', |
||||
contactName:'', |
||||
contactPosition:'', |
||||
contactPhone:'', |
||||
contactwx:'', |
||||
contactEmail:'', |
||||
mode:'', |
||||
weekend:'', |
||||
company:'', |
||||
channel:'', |
||||
shop:'', |
||||
}, |
||||
typeShow:false, |
||||
addrshow:false, |
||||
type: [ |
||||
{ |
||||
text: '一件代发' |
||||
} |
||||
], |
||||
btnList:[ |
||||
'京东店铺','拼多多店铺','苏宁店铺','唯品会店铺','淘宝店铺','天猫店铺','其他平台' |
||||
], |
||||
active:0, |
||||
popShow:false, |
||||
|
||||
} |
||||
}, |
||||
methods:{ |
||||
actionSheetCallback(index) { |
||||
|
||||
this.form.type = this.type[index].text; |
||||
}, |
||||
getShop(index){ |
||||
this.active = index; |
||||
} |
||||
} |
||||
} |
||||
</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> |
||||
@ -0,0 +1,273 @@ |
||||
<template> |
||||
<view class="huoyuan"> |
||||
<view class="process"> |
||||
|
||||
<view class="pItem" v-for="(item,index) in list" :key="index"> |
||||
<image :src="item.icon" mode="widthFix" class="icon"></image> |
||||
<view class="title">{{item.title}}</view> |
||||
<view class="subTitle">{{item.subTitle}}</view> |
||||
</view> |
||||
</view> |
||||
<view class="formContent"> |
||||
<u-form :model="form" ref="uForm"> |
||||
<u-form-item label="商品名称" label-width="150"><u-input placeholder="请填写您求购的商品名称" v-model="form.name" /></u-form-item> |
||||
<u-form-item label="产品描述" label-width="150"><u-input maxlength="200" placeholder="如品牌、型号、参数 、配置、规格等，可复制电商标题、链接。" v-model="form.intro" type="textarea"/></u-form-item> |
||||
<u-form-item label="求购类型" label-width="150" @click="typeShow = true"> |
||||
<u-input v-model="form.type" type="select" @click="typeShow = true"/> |
||||
<u-action-sheet :list="type" :cancel-btn="false" v-model="typeShow" @click="actionSheetCallback"></u-action-sheet> |
||||
</u-form-item> |
||||
<u-form-item label="交货日期" label-width="150" @click="timeShow = true"> |
||||
<u-input v-model="form.date" type="select" @click="timeShow = true"/> |
||||
<u-picker mode="time" v-model="timeShow" :params="timeParams"></u-picker> |
||||
</u-form-item> |
||||
<u-form-item label="求购数量" label-width="150"><u-input placeholder="请输入数量及单位" v-model="form.num" /></u-form-item> |
||||
<u-form-item label="预估单价" label-width="150"> |
||||
<view class=""> |
||||
<view class="qujian"> |
||||
<u-input placeholder="请输入价格区间" border v-model="form.startNum" /> |
||||
<text style="margin:0 10upx;">-</text> |
||||
<u-input placeholder="请输入价格区间" border v-model="form.endNum" /> |
||||
<text style="margin-left:10upx">元</text> |
||||
</view> |
||||
<u-checkbox-group> |
||||
<u-checkbox active-color="#FE483B" shape="circle" v-model="form.mianyi" v-for="(item, index) in radioList" :key="index" :name="item.name"> |
||||
{{ item.name }} |
||||
</u-checkbox> |
||||
</u-checkbox-group> |
||||
|
||||
</view> |
||||
</u-form-item> |
||||
<u-upload |
||||
:fileList="finishImageList" |
||||
:previewFullImage="true" |
||||
@afterRead="afterRead" |
||||
:maxCount="8" width="180" height="180" |
||||
upload-text="上传照片" |
||||
@delete="deletePic" |
||||
name="1" |
||||
multiple |
||||
></u-upload> |
||||
<u-form-item label="收货地址" label-width="150" @click="addrshow = true"> |
||||
<u-input v-model="form.addr" type="select" @click="addrshow = true"/> |
||||
<u-picker mode="region" v-model="addrshow"></u-picker> |
||||
</u-form-item> |
||||
<u-form-item label="备注" label-width="150" label-position="top"> |
||||
<u-input v-model="form.remark" class="remarkInput" placeholder="请填写您要补充的内容，如规格、包装和运输等要求" type="textarea"/> |
||||
</u-form-item> |
||||
</u-form> |
||||
<button class="submitBtn">确认发布</button> |
||||
</view> |
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
list:[ |
||||
{icon:'/static/news1/m1.png',title:'发采购询价单',subTitle:'填写所需信息一键发布询价'}, |
||||
{icon:'/static/news1/m2.png',title:'卖家实时报价',subTitle:'60分钟获取卖家报价'}, |
||||
{icon:'/static/news1/m3.png',title:'卖家上架商品',subTitle:'采购方案根据需要下单采购'}, |
||||
], |
||||
form: { |
||||
name: '', |
||||
intro: '', |
||||
type: '', |
||||
date:'', |
||||
num:'', |
||||
startNum:'', |
||||
endNum:'', |
||||
mianyi:true, |
||||
addr:'', |
||||
remark:'' |
||||
}, |
||||
typeShow:false, |
||||
timeShow:false, |
||||
addrshow:false, |
||||
type: [ |
||||
{ |
||||
text: '一件代发' |
||||
} |
||||
], |
||||
timeParams:{ |
||||
year: true, |
||||
month: true, |
||||
day: true, |
||||
hour: false, |
||||
minute: false, |
||||
second: false |
||||
}, |
||||
radioList: [ |
||||
{ |
||||
name: '面议' |
||||
}, |
||||
|
||||
], |
||||
radio: '', |
||||
//照片 |
||||
finishImageList:[] |
||||
} |
||||
}, |
||||
methods:{ |
||||
actionSheetCallback(index) { |
||||
|
||||
this.form.type = this.type[index].text; |
||||
}, |
||||
// 新增图片 |
||||
async afterRead(event) { |
||||
|
||||
let lists = [].concat(event.file) |
||||
let fileListLen = this[`fileList${event.name}`].length |
||||
lists.map((item) => { |
||||
this[`fileList${event.name}`].push({ |
||||
...item, |
||||
status: 'uploading', |
||||
message: '上传中' |
||||
}) |
||||
}) |
||||
for (let i = 0; i < lists.length; i++) { |
||||
const result = await this.uploadFilePromise(lists[i].url) |
||||
|
||||
if(JSON.parse(result).code==1){ |
||||
let item = this[`fileList${event.name}`][fileListLen] |
||||
this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, { |
||||
status: 'success', |
||||
message: '', |
||||
url: result |
||||
})) |
||||
fileListLen++ |
||||
}else{ |
||||
this[`fileList${event.name}`].splice(fileListLen, 1) |
||||
} |
||||
|
||||
} |
||||
|
||||
}, |
||||
//上传照片 |
||||
uploadFilePromise(url) { |
||||
return new Promise((resolve, reject) => { |
||||
// let a = uni.uploadFile({ |
||||
// url: this.baseUrl+'/api/common/upload', // 仅为示例，非真实的接口地址 |
||||
// filePath: url, |
||||
// name: 'file', |
||||
// formData: { |
||||
// user: 'test', |
||||
// token:getToken() |
||||
// }, |
||||
// success: (res) => { |
||||
// if(JSON.parse(res.data).code==1){ |
||||
// setTimeout(() => { |
||||
// this.finishImageList.push({url:JSON.parse(res.data).data.fullurl,path:JSON.parse(res.data).data.url}) |
||||
// resolve(res.data) |
||||
// }, 1000) |
||||
// }else{ |
||||
// uni.$u.toast(JSON.parse(res.data).msg) |
||||
|
||||
// resolve(res.data) |
||||
// } |
||||
// }, |
||||
// fail: (res) => { |
||||
// console.log(res,"rrr") |
||||
// } |
||||
// }); |
||||
}) |
||||
}, |
||||
//删除图片 |
||||
deletePic(event) { |
||||
|
||||
this.finishImageList.splice(event.index, 1) |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
page{ |
||||
min-height:100%; |
||||
padding-bottom:100upx; |
||||
} |
||||
.huoyuan{ |
||||
.process{ |
||||
height: 266upx; |
||||
background: #FFFFFF; |
||||
border-radius: 14upx; |
||||
opacity: 1; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
margin:0 30upx; |
||||
// padding:0 28upx; |
||||
position: relative; |
||||
|
||||
.pItem{ |
||||
flex: 1; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
image{ |
||||
width:56upx; |
||||
height: auto; |
||||
} |
||||
.title{ |
||||
font-size: 24upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 600; |
||||
color: #2D2D2D; |
||||
margin:16upx 0; |
||||
} |
||||
.subTitle{ |
||||
font-size: 24upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 400; |
||||
color: #8A8A8A; |
||||
width: 75%; |
||||
text-align: center; |
||||
|
||||
} |
||||
} |
||||
} |
||||
.formContent{ |
||||
margin:0 30upx; |
||||
background-color: #fff; |
||||
border-radius: 14upx; |
||||
margin-top:20upx; |
||||
padding:0 38upx; |
||||
::v-deep .u-form-item--left{ |
||||
align-items: flex-start; |
||||
} |
||||
::v-deep .u-form-item--left__content__label{ |
||||
color: #2D2D2D; |
||||
font-size: 28upx; |
||||
} |
||||
.qujian{ |
||||
width: 100%; |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
} |
||||
} |
||||
.remarkInput{ |
||||
width: 100%; |
||||
height: 246upx; |
||||
background: #F7F8FA; |
||||
border-radius: 3px 3px 3px 3px; |
||||
opacity: 1; |
||||
padding:20upx !important; |
||||
} |
||||
.submitBtn{ |
||||
height: 88upx; |
||||
margin:64upx 0; |
||||
line-height: 88upx; |
||||
// background: #FFAAA4; |
||||
background: #FE483B; |
||||
border-radius: 36px 36px 36px 36px; |
||||
opacity: 1; |
||||
font-size: 28upx; |
||||
font-family: PingFang SC, PingFang SC; |
||||
font-weight: 500; |
||||
color: #FFFFFF; |
||||
text-align: center; |
||||
} |
||||
</style> |
||||
|
After Width: | Height: | Size: 738 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 549 B |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
Loading…
Reference in new issue