<template>
|
<view>
|
<stepLine :active="1" :steps="steps" />
|
<view class="form-conyainer">
|
<view class="upload-card">
|
<view class="introduce-title">上传营业执照</view>
|
<view class="upload-container">
|
<view class="card-container">
|
<uni-file-picker limit="1" :image-styles="imageStyles">
|
<view class="model">
|
上传营业执照
|
</view>
|
</uni-file-picker>
|
</view>
|
|
</view>
|
</view>
|
<view class="upload-card">
|
<view class="introduce-title">上传身份证</view>
|
<view class="upload-container">
|
<view class="card-container">
|
<uni-file-picker limit="1" :image-styles="imageStyles">
|
<view class="model">
|
上传身份证人像面
|
</view>
|
</uni-file-picker>
|
</view>
|
<view class="card-container">
|
<uni-file-picker limit="1" :image-styles="imageStyles">
|
<view class="model">
|
上传身份证国徽面
|
</view>
|
</uni-file-picker>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="agreement">
|
<view class="protocl">
|
<view class="agree-btn"></view>
|
已详细阅读并同意
|
<view class="protocl-btn">《哇咖哇咖创作者协议》</view>
|
</view>
|
<view class="tips">
|
<view class="agree-btn"></view>
|
<view class="tips-message">
|
经审慎考虑，同意提供本人真实姓名、手机号及证件号码，以核实本人身份，保障账号安全；同意提供其他信息（包括邮箱、个人介绍）
|
</view>
|
</view>
|
</view>
|
<view class="actions">
|
<view class="last-step action-btn" @click="lastStep">上一步</view>
|
<view class="submit-not action-btn" :class="canSubmit&&'submit'" @click="submit">提交审核</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
import stepLine from '@/components/common/stepLine.vue'
|
export default {
|
components: {
|
stepLine
|
},
|
data() {
|
return {
|
imageStyles:{
|
width:312,
|
height:120,
|
},
|
steps: [
|
{ title: '基本信息' },
|
{ title: '资质认证' },
|
{ title: '提交审核' }
|
],
|
canSubmit: false
|
};
|
},
|
methods: {
|
lastStep() {
|
uni.navigateBack()
|
},
|
submit() {
|
uni.navigateTo({
|
url: '/pages/merchant/applyMerchant/merchantSubmit'
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.form-conyainer {
|
background-color: #FFFFFF;
|
padding: 32rpx;
|
}
|
.upload-card {
|
.introduce-title {
|
font-size: 32rpx;
|
font-family: PingFang SC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #333333;
|
padding-top: 28rpx;
|
}
|
.upload-container {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 28rpx;
|
|
.card-container {
|
width: 312rpx;
|
// height: 200rpx;
|
.uni-file-picker {
|
width: 100%;
|
height: 100%;
|
}
|
.model {
|
width: 100%;
|
height: 100%;
|
background-color: rgba(0, 0, 0, 0.35);
|
color: #FFFFFF;
|
text-align: center;
|
line-height: 100px;
|
}
|
}
|
}
|
}
|
.agreement {
|
// margin-top: 28rpx;
|
padding: 32rpx;
|
font-size: 24rpx;
|
font-weight: 400;
|
color: #999999;
|
line-height: 32rpx;
|
.agree-btn {
|
border: 2rpx solid #999999;
|
width: 28rpx;
|
height: 28rpx;
|
border-radius: 16rpx;
|
margin-right: 16rpx;
|
}
|
.protocl {
|
display: flex;
|
|
.protocl-btn {
|
color: #D20A0A;
|
}
|
}
|
.tips {
|
margin-top: 20rpx;
|
display: flex;
|
.tips-message {
|
flex: 1;
|
}
|
}
|
}
|
.actions {
|
display: flex;
|
padding: 0 58rpx env(safe-area-inset-bottom);
|
margin-top: 120rpx;
|
.action-btn {
|
flex: 1;
|
text-align: center;
|
box-sizing: border-box;
|
height: 72rpx;
|
line-height: 72rpx;
|
border-radius: 36rpx;
|
margin-bottom: 20rpx;
|
}
|
.last-step {
|
border: 2rpx solid #D20A0A;
|
color: #D20A0A;
|
font-size: 32rpx;
|
margin-right: 20rpx;
|
}
|
.submit-not {
|
color: #FFFFFF;
|
background: #D9D9D9;
|
}
|
.submit {
|
background: linear-gradient(90deg, #D95A5A 0%, #D20A0A 100%);
|
}
|
}
|
</style>
|
