<template>
|
<view class="qualification-page">
|
<!-- <view class="type-tabs">
|
<view class="tab-item" :class="{ active: currentType === 'personal' }" @tap="currentType = 'personal'">个人资质</view>
|
<view class="tab-item" :class="{ active: currentType === 'company' }" @tap="currentType = 'company'">企业资质</view>
|
</view> -->
|
|
<view class="card base-card">
|
<view class="store-row">
|
<image class="store-cover" src="" mode="aspectFill"></image>
|
<view class="store-info">
|
<text class="store-name">中铁快运南站旗舰店</text>
|
<text class="store-line">联系人：苏眠眠</text>
|
<text class="store-line">联系电话：18155114565</text>
|
</view>
|
</view>
|
|
<view class="detail-block">
|
<view class="info-row">
|
<text class="info-label">省市区：</text>
|
<text class="info-value">安徽省合肥市经济技术开发区</text>
|
</view>
|
<view class="info-row">
|
<text class="info-label">门店地址：</text>
|
<text class="info-value">莲花路200号莲花产业园F栋401</text>
|
</view>
|
|
<template v-if="currentType === 'personal'">
|
<view class="info-row">
|
<text class="info-label">身份证号：</text>
|
<text class="info-value">3401823742786473267</text>
|
</view>
|
<view class="material-row top-align">
|
<text class="info-label">身份证：</text>
|
<view class="material-list double-list">
|
<image class="material-image id-card" src="" mode="aspectFill"></image>
|
<image class="material-image id-card" src="" mode="aspectFill"></image>
|
</view>
|
</view>
|
</template>
|
|
<template v-else>
|
<view class="material-row top-align license-row">
|
<text class="info-label">营业执照：</text>
|
<view class="material-list single-list">
|
<image class="material-image license-image" src="" mode="aspectFill"></image>
|
</view>
|
</view>
|
</template>
|
</view>
|
</view>
|
|
<view style="width: 100%; height: 20rpx; background-color: #F7F7F7;"></view>
|
|
<view v-if="currentType === 'personal'" class="card subject-card">
|
<text class="section-title">主体资质</text>
|
<view class="material-group">
|
<view class="material-row top-align">
|
<text class="info-label">有效劳动合同：</text>
|
<view class="material-list triple-list">
|
<image class="material-image contract-image" src="" mode="aspectFill"></image>
|
<image class="material-image contract-image" src="" mode="aspectFill"></image>
|
<image class="material-image contract-image" src="" mode="aspectFill"></image>
|
</view>
|
</view>
|
<view class="material-row top-align proof-row">
|
<text class="info-label">社保缴纳证明：</text>
|
<view class="material-list single-list">
|
<image class="material-image proof-image" src="" mode="aspectFill"></image>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view v-else class="card subject-card legal-card">
|
<text class="section-title">法人信息</text>
|
<view class="detail-block legal-block">
|
<view class="info-row">
|
<text class="info-label">法人姓名：</text>
|
<text class="info-value">张光宣</text>
|
</view>
|
<view class="info-row">
|
<text class="info-label">法人电话：</text>
|
<text class="info-value">181554462589</text>
|
</view>
|
<view class="info-row">
|
<text class="info-label">身份证号：</text>
|
<text class="info-value">3401823742786473267</text>
|
</view>
|
<view class="material-row top-align">
|
<text class="info-label">身份证：</text>
|
<view class="material-list double-list">
|
<image class="material-image id-card" src="" mode="aspectFill"></image>
|
<image class="material-image id-card" src="" mode="aspectFill"></image>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
currentType: 'personal'
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.qualification-page {
|
|
}
|
|
.type-tabs {
|
margin-bottom: 18rpx;
|
display: flex;
|
gap: 12rpx;
|
}
|
|
.tab-item {
|
min-width: 140rpx;
|
height: 56rpx;
|
padding: 0 22rpx;
|
border-radius: 28rpx;
|
background: #ffffff;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 24rpx;
|
color: #6b7280;
|
box-sizing: border-box;
|
}
|
|
.tab-item.active {
|
background: #ecf8ff;
|
color: #18aaf7;
|
box-shadow: inset 0 0 0 2rpx #18aaf7;
|
}
|
|
.card {
|
background: #ffffff;
|
padding: 30rpx;
|
box-sizing: border-box;
|
}
|
|
.base-card {
|
padding-bottom: 16rpx;
|
}
|
|
.legal-card {
|
padding-top: 18rpx;
|
}
|
|
.store-row {
|
display: flex;
|
align-items: center;
|
padding-bottom: 30rpx;
|
border-bottom: 1rpx solid #f0f1f4;
|
}
|
|
.store-cover {
|
width: 144rpx;
|
height: 144rpx;
|
border-radius: 8rpx;
|
background: #e8edf5;
|
flex-shrink: 0;
|
}
|
|
.store-info {
|
margin-left: 24rpx;
|
min-width: 0;
|
}
|
|
.store-name {
|
display: block;
|
font-weight: 500;
|
font-size: 32rpx;
|
color: #111111;
|
}
|
|
.store-line {
|
display: block;
|
margin-top: 10rpx;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #777777;
|
}
|
|
.detail-block,
|
.material-group {
|
padding-top: 30rpx;
|
}
|
|
.legal-block {
|
padding-top: 6rpx;
|
}
|
|
.info-row,
|
.material-row {
|
display: flex;
|
align-items: center;
|
margin-bottom: 20rpx;
|
}
|
|
.material-row.top-align {
|
align-items: flex-start;
|
}
|
|
.info-label {
|
width: 190rpx;
|
flex-shrink: 0;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #777777;
|
}
|
|
.info-value {
|
flex: 1;
|
font-weight: 400;
|
font-size: 26rpx;
|
color: #333333;
|
word-break: break-all;
|
}
|
|
.section-title {
|
display: block;
|
margin-bottom: 20rpx;
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #111111;
|
}
|
|
.material-list {
|
flex: 1;
|
display: flex;
|
align-items: flex-start;
|
flex-wrap: wrap;
|
gap: 14rpx;
|
}
|
|
.material-image {
|
background: #eef2f7;
|
border-radius: 10rpx;
|
flex-shrink: 0;
|
}
|
|
.id-card {
|
width: 200rpx;
|
height: 150rpx;
|
}
|
|
.contract-image {
|
width: 144rpx;
|
height: 144rpx;
|
}
|
|
.proof-image {
|
width: 144rpx;
|
height: 144rpx;
|
}
|
|
.license-image {
|
width: 220rpx;
|
height: 156rpx;
|
}
|
|
.proof-row {
|
margin-top: 4rpx;
|
}
|
|
.license-row {
|
margin-bottom: 8rpx;
|
}
|
</style>
|
