deming/pageC/merchant/details.vue

<template>
	<view class="details">
		<view class="top">
			<image :src="info.store_avatar"></image>
			<view class="name">{{info.store_name}}</view>
			<view class="info">创建时间：{{ info.store_addtime | date('yyyy年mm月dd日') }} | {{ info.live_store_address || '暂无地址' }}</view>
			<view class="num">
				<view>
					<view class="value">{{info.store_collect}}</view>
					<view class="title">粉丝数</view>
				</view>
				<view>
					<view class="value">{{ info.evaluatecount }}</view>
					<view class="title">评价</view>
				</view>
				<view>
					<view class="value">{{info.store_credit}}</view>
					<view class="title">信用等级</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="title">
				<view>工商执照</view>
				<u-icon name="arrow-down" color="#999999" size="28"></u-icon>
			</view>
			<view class="image-list" v-if="info.business_licence_number_electronic">
				<image :src="info.business_licence_number_electronic"></image>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			info:{}
		}
	},
	onLoad(option){
		this.$u.api.getStoreInfo({id: option.id}).then((res)=>{
			// console.log(res)
			this.info = res.data
		})
	}
};
</script>
<style lang="scss" scoped>
.details {
	min-height: calc(100vh - var(--window-top));
	background-color: #ECECEC;
	.top {
		margin-top: 1rpx;
		padding: 40rpx 80rpx;
		text-align: center;
		background-color: #ffffff;
		> image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 70rpx;
			margin-bottom: 29rpx;
			background-color: aqua;
		}
		.name {
			font-size: 28rpx;
			font-weight: 500;
			color: rgba(51,51,51,1);
			margin-bottom: 29rpx;
		}
		.info {
			font-size: 24rpx;
			color: rgba(51,51,51,1);
			margin-bottom: 37rpx;
		}
		.num {
			display: flex;
			justify-content: space-between;
			> view {
				text-align: center;
				color: rgba(51,51,51,1);
				position: relative;
				&:not(:last-child)::after {
					content: "";
					position: absolute;
					right: -77rpx;
					top: 50%;
					transform: translate(0, -50%);
					width: 2rpx;
					height: 60rpx;
					background: rgba(51,51,51,1);
				}
				.value {
					font-size: 32rpx;
					font-weight: 500;
					margin-bottom: 20rpx;
				}
				.title {
					font-size: 24rpx;
				}
			}
		}
	}
	.bottom {
		.title {
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #ffffff;
			margin-bottom: 1rpx;
			> view {
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(51,51,51,1);
			}
		}
		.image-list {
			background-color: #ffffff;
			padding: 20rpx 30rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			> image {
				width: 239rpx;
				height: 170rpx;
				flex-shrink: 0;
				background-color: aqua;
			}
		}
	}
}
</style>