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/MerchantSupplier.vue

675 lines
16 KiB

<template>
<view class="park" :style="{backgroundImage:`url(${indexBackgroundImage})`}">
<view class="park-navbar">
<u-navbar title="供应商入驻" :border-bottom="false" :background="background"></u-navbar>
</view>
<view class="park-title">
诚招优质正品货源商家<br>入驻{{storeInfo.store_name}}
</view>
<view class="park-tips">
<view class="park-dui">
<image :src="$picUrl+'/static/shangjia/march.png'" mode=""></image>
<text>商品极速推广</text>
</view>
<view class="park-dui">
<image :src="$picUrl+'/static/shangjia/march.png'" mode=""></image>
<text>精准活跃用户</text>
</view>
<view class="park-dui">
<image :src="$picUrl+'/static/shangjia/march.png'" mode=""></image>
<text>成就品质店铺</text>
</view>
</view>
<view class="park-explain">
<view class="title">
入驻说明
</view>
<view class="content">
<view class="box">
<view class="box-img">
<image :src="$picUrl+'/static/shangjia/describe_1.png'" style="width: 66rpx;height: 55rpx;"
mode="">
</image>
</view>
<view class="name">
诚招对象
</view>
<view class="describe">
具有稳定商品库存能全国或者
区域一件代发快速出单号
</view>
</view>
<view class="box">
<view class="box-img">
<image :src="$picUrl+'/static/shangjia/describe_2.png'" style="width: 77rpx;height: 68rpx;"
mode="">
</image>
</view>
<view class="name">
入驻要求
</view>
<view class="describe">
品牌工厂授权代理电商平台
有货或有优质上游资源皆可
</view>
</view>
<view class="box">
<view class="box-img">
<image :src="$picUrl+'/static/shangjia/describe_3.png'" style="width: 94rpx;height: 90rpx;"
mode="">
</image>
</view>
<view class="name">
合作品类
</view>
<view class="describe" style="text-align: left;">
大小家电建材家具智能家居
灯饰卫浴家纺布艺电子教育
网红礼品电脑办公手机表环
个护清洁美妆护肤运动户外
</view>
</view>
<view class="box">
<view class="box-img">
<image :src="$picUrl+'/static/shangjia/describe_4.png'" style="width:84rpx;height: 58rpx;"
mode="">
</image>
</view>
<view class="name">
入驻要求
</view>
<view class="describe">
平台拥有注册用户超10万合作的私域电商平台超1000家流量裂变能力强
</view>
</view>
</view>
</view>
<view class="park-explain">
<view class="title">
新商专享
</view>
<view class="park-new">
<view class="new">
<image style="height: 64rpx;" :src="$picUrl+'/static/shangjia/describe_one.png'" mode=""></image>
<view class="name">
流量加权扶持
</view>
<view class="describe">
核心优选位流量曝光
</view>
</view>
<view class="new">
<image style="height: 64rpx;" :src="$picUrl+'/static/shangjia/describe_two.png'" mode=""></image>
<view class="name">
专属运营对接
</view>
<view class="describe">
官方定制快速成长计划
</view>
</view>
<view class="new">
<image style="height: 64rpx;" :src="$picUrl+'/static/shangjia/describe_there.png'" mode=""></image>
<view class="name">
0门槛活动推广
</view>
<view class="describe">
0门槛报名营销活动推广
</view>
</view>
</view>
</view>
<view class="park-card">
<view class="title">
<text style="color: #FF1F1F;font-size: 28rpx;">*</text>身份证照
</view>
<view class="tips">
请上传真实有效清晰无遮挡身份证照片
</view>
<view class="card">
<u-upload :action="action" :header="header" @on-uploaded="cardJustSuccess" @on-remove="cardJustRemove"
:file-list="justList" :custom-btn="true" max-count="1">
<template v-slot:addBtn>
<view class="card-box">
<image :src="$picUrl+'/static/shangjia/describe_photo.png'" style="height: 96rpx;" mode="">
</image>
<view class="card-tips">
身份证正面
</view>
</view>
</template>
</u-upload>
<u-upload :action="action" :header="header" @on-uploaded="cardBackSuccessve" @on-remove="cardBackRemove"
:file-list="backList" :custom-btn="true" max-count="1">
<template v-slot:addBtn>
<view class="card-box">
<image :src="$picUrl+'/static/shangjia/describe_photo.png'" style="height: 96rpx;" mode="">
</image>
<view class="card-tips">
身份证反面
</view>
</view>
</template>
</u-upload>
<u-upload :action="action" :header="header" @on-uploaded="cardHoldSuccess" @on-remove="cardholdRemove"
:file-list="holdList" :custom-btn="true" max-count="1">
<template v-slot:addBtn>
<view class="card-box">
<image :src="$picUrl+'/static/shangjia/describe_photo.png'" style="height: 96rpx;" mode="">
</image>
<view class="card-tips">
手持身份证
</view>
</view>
</template>
</u-upload>
</view>
</view>
<view class="park-card">
<view class="title">
<text style="color: #FF1F1F;font-size: 28rpx;">*</text>营业执照
</view>
<view class="tips">
请上传真实有效清晰无遮挡营业执照
</view>
<view class="card">
<u-upload :action="action" :header="header" @on-uploaded="proveSuccess" @on-remove="proveRemove"
:file-list="proveList" :custom-btn="true" max-count="1">
<template v-slot:addBtn>
<view class="card-box">
<image :src="$picUrl+'/static/shangjia/describe_photo.png'" style="height: 96rpx;" mode="">
</image>
<view class="card-tips">
营业执照
</view>
</view>
</template>
</u-upload>
</view>
</view>
<view class="agreement">
<u-checkbox active-color="#08CC57" v-model="isCheckout" style="margin-right: -20rpx"></u-checkbox>
已阅读并同意<text @click="toTextPage(1)">《商家入驻协议》</text>
</view>
<view class="park-button" v-if="card_just_imgage_ids.length>0&&card_back_imgage_ids.length>0&&card_hold_imgage_ids.length>0&&prove_imgage_ids.length>0" @click="nextStep">
下一步
</view>
<view class="park-button" v-else style="opacity:0.5" @click="nextStep">
下一步
</view>
<addShuiyin />
</view>
</template>
<script>
import * as help from '@/api/help'
import Config from '@/core/config'
export default {
data() {
return {
background: {
background: 'none'
},
indexBackgroundImage: 'https://www.amiami.com.cn/static/shangjia/supplier_bg.png',
action: '',
header: '',
justList: [],
backList: [],
holdList: [],
proveList: [],
card_just_imgage_ids: [],
card_back_imgage_ids: [],
card_hold_imgage_ids: [],
prove_imgage_ids: [],
isCheckout: false,
storeInfo: ''
}
},
onLoad(options) {
this.storeInfo = JSON.parse(uni.getStorageSync("storeInfo"));
console.log(this.storeInfo)
},
onShow() {
},
onReady() {
this.action = (Config.get('apiUrl') + 'upload/image').replace("index.php?s=/", "")
this.header = {
'Storeid': uni.getStorageSync('Store').storeInfo.store_id,
'Access-Token': uni.getStorageSync('AccessToken'),
'platform': "MP-WEIXIN",
}
},
/**
* 分享当前页面
*/
onShareAppMessage() {
// 构建页面参数
const params = this.$getShareUrlParams()
return {
title: '诚挚邀请,欢迎入驻!',
path: `/pages/news1/MerchantSupplier`
}
},
methods: {
toTextPage() {
uni.navigateTo({
url: '/pages/news1/text?pageFlag=' + 3
})
},
nextStep() {
let that = this
if (that.card_just_imgage_ids.length == 0) {
uni.showToast({
title: "请上传身份证正面",
icon: 'none'
})
return
}
if (that.card_back_imgage_ids.length == 0) {
uni.showToast({
title: "请上传身份证反面",
icon: 'none'
})
return
}
if (that.card_hold_imgage_ids.length == 0) {
uni.showToast({
title: "请上传手持身份证照片",
icon: 'none'
})
return
}
if (that.prove_imgage_ids.length == 0) {
uni.showToast({
title: "请上传营业执照",
icon: 'none'
})
return
}
if (!this.isCheckout) {
uni.showToast({
title: "请阅读商家入驻协议",
icon: 'none'
})
return
}
let cardId = [that.card_just_imgage_ids, that.card_back_imgage_ids, that
.card_hold_imgage_ids
]
console.log(cardId)
uni.navigateTo({
url: '/pages/news1/MerchantSettlement?cardId=' + encodeURIComponent(cardId) + '&business=' +
encodeURIComponent(that.prove_imgage_ids)
})
},
// 正面
cardJustSuccess(list) {
if (list.length > 0) {
const {
response
} = list[0];
if (response.status == 200) {
uni.showToast({
title: "上传成功"
})
let idList = []
list.forEach(item => {
idList.push(item.response.data.fileInfo.file_id)
});
this.card_just_imgage_ids = idList.join(',');
}
}
},
cardJustRemove(file, fileList) {
this.card_just_imgage_ids = this.handleRemove(file, fileList);
},
// 反面
cardBackSuccessve(list) {
if (list.length > 0) {
const {
response
} = list[0];
if (response.status == 200) {
uni.showToast({
title: "上传成功"
})
let idList = []
list.forEach(item => {
idList.push(item.response.data.fileInfo.file_id)
});
this.card_back_imgage_ids = idList.join(',');
}
}
},
cardBackRemove(file, fileList) {
this.card_back_imgage_ids = this.handleRemove(file, fileList);
},
// 手持
cardHoldSuccess(list) {
if (list.length > 0) {
const {
response
} = list[0];
if (response.status == 200) {
uni.showToast({
title: "上传成功"
})
let idList = []
list.forEach(item => {
idList.push(item.response.data.fileInfo.file_id)
});
this.card_hold_imgage_ids = idList.join(',');
}
}
},
cardholdRemove(file, fileList) {
this.card_hold_imgage_ids = this.handleRemove(file, fileList);
},
// 营业证
proveSuccess(list) {
if (list.length > 0) {
const {
response
} = list[0];
if (response.status == 200) {
uni.showToast({
title: "上传成功"
})
let idList = []
list.forEach(item => {
idList.push(item.response.data.fileInfo.file_id)
});
this.prove_imgage_ids = idList.join(',');
}
}
},
proveRemove(file, fileList) {
this.prove_imgage_ids = this.handleRemove(file, fileList);
},
handleRemove: function(file, fileList) {
let idList = []
fileList.forEach(item => {
idList.push(item.response.data.fileInfo.file_id)
});
return idList.join(',')
},
}
}
</script>
<style>
page {
background: #fff;
width: 100%;
}
</style>
<style lang="scss" scoped>
.park {
overflow: hidden;
width: 100%;
background-size: 100% auto;
min-height: 100vh;
padding-bottom: 68rpx;
background-size: cover;
.park-title {
padding: 40rpx 98rpx 24rpx 48rpx;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 56rpx;
color: #002280;
line-height: 80rpx;
text-align: left;
font-style: normal;
text-transform: none;
}
.park-tips {
display: flex;
justify-content: space-between;
padding: 0 50rpx 40rpx 48rpx;
.park-dui {
display: flex;
overflow: hidden;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 26rpx;
color: #002280;
line-height: 32rpx;
text-align: left;
font-style: normal;
text-transform: none;
image {
width: 32rpx;
height: 32rpx;
margin-right: 10rpx;
}
}
}
.park-button {
width: 686rpx;
height: 88rpx;
border-radius: 44rpx;
margin: 32rpx auto 0 auto;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #002280;
background: #D9E8FF;
line-height: 88rpx;
text-align: center;
font-style: normal;
text-transform: none;
}
.agreement {
font-size: 24rpx;
font-weight: 400;
color: #222222;
margin-left: 48rpx;
text {
color: #999;
}
::v-deep .u-checkbox__icon-wrap--square {
border-radius: 50% !important;
width: 17px !important;
height: 17px !important;
}
}
.park-card {
overflow: hidden;
background: #fff;
border-radius: 16rpx;
margin: 24rpx 32rpx 24rpx 32rpx;
padding: 24rpx 16rpx;
.card {
overflow: hidden;
display: flex;
justify-content: space-between;
.card-box {
width: 202rpx;
height: 192rpx;
padding-top: 24rpx;
background: #EEEEEE;
border-radius: 16rpx;
image {
display: block;
width: 96rpx !important;
width: 96rpx !important;
margin: 0rpx auto 16rpx auto;
}
.card-tips {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #999999;
text-align: center;
font-style: normal;
text-transform: none;
}
}
}
.title {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #222222;
text-align: left;
font-style: normal;
text-transform: none;
}
.tips {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #FF1F1F;
text-align: left;
font-style: normal;
text-transform: none;
margin: 8rpx 0 40rpx 0;
}
}
.park-explain {
overflow: hidden;
background: #fff;
border-radius: 16rpx;
margin: 0 32rpx 24rpx 32rpx;
.title {
text-align: center;
height: 104rpx;
width: 100%;
line-height: 104rpx;
font-family: PingFang SC, PingFang SC;
font-weight: bold;
font-size: 40rpx;
color: #222222;
font-style: normal;
text-transform: none;
}
.park-new {
overflow: hidden;
display: flex;
justify-content: space-between;
padding: 30rpx 0 40rpx 0;
.new {
overflow: hidden;
image {
display: block;
margin: 0 auto;
width: 64rpx !important;
width: 64rpx !important;
}
.name {
padding: 0 30rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #002280;
text-align: center;
font-style: normal;
text-transform: none;
margin: 16rpx 0;
overflow: hidden;
/* 确保内容超出容器时会被隐藏 */
display: -webkit-box;
/* 作为弹性伸缩盒子模型显示 */
-webkit-line-clamp: 1;
/* 限制在两行 */
-webkit-box-orient: vertical;
/* 垂直排列盒子 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
white-space: normal;
/* 使用正常的白空格处理方式,允许换行 */
}
.describe {
padding: 0 30rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 20rpx;
color: #999999;
line-height: 32rpx;
text-align: center;
font-style: normal;
text-transform: none;
}
}
}
.content {
overflow: hidden;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.box {
overflow: hidden;
width: 50%;
padding: 0 32rpx 40rpx 32rpx;
.box-img {
width: 100%;
height: 90rpx;
image {
display: block;
margin: 0 auto;
}
}
.name {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #222222;
text-align: center;
font-style: normal;
text-transform: none;
margin: 10rpx 0 16rpx 0;
overflow: hidden;
/* 确保内容超出容器时会被隐藏 */
display: -webkit-box;
/* 作为弹性伸缩盒子模型显示 */
-webkit-line-clamp: 1;
/* 限制在两行 */
-webkit-box-orient: vertical;
/* 垂直排列盒子 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
white-space: normal;
/* 使用正常的白空格处理方式,允许换行 */
}
.describe {
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 20rpx;
color: #222222;
line-height: 32rpx;
text-align: center;
font-style: normal;
text-transform: none;
}
}
}
}
}
</style>