caimei-applets-caimei/pages/seller/club/club-detail.vue

<template>
	<view class="container club-info">
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		></tui-skeleton>
		<template v-else>
			<view class="info-content clearfix">
				<view class="info-main border">
					<view class="info-p"
						>机构名称：<text>{{ clubInfo.name }}</text></view
					>
					<view class="info-p"
						>状态：<text
							class="info-h1-tag"
							:class="{
								orange: clubInfo.status == 1,
								grey: clubInfo.status == 90,
								warn: clubInfo.status == 92
							}"
						>
							{{ clubInfo.status | statusFilters }}
						</text></view
					>
					<view class="info-p"
						>机构级别：<text>{{ clubInfo.userIdentity === 2 ? '资质机构' : '个人机构' }}</text></view
					>
					<view class="info-p"
						>机构类型：<text
							>{{ clubInfo.firstClubType | FirstFormat }}-{{ clubInfo.secondClubType | TwoFormat }}</text
						></view
					>
					<view class="info-p"
						>联系人：<text>{{ clubInfo.linkMan }}</text></view
					>
					<view class="info-p"
						>手机号：<text>{{ clubInfo.contractMobile }}</text></view
					>
					<view class="info-p"
						>联系人身份：<text>{{ clubInfo.linkManIdentity | linkManFormat }}</text></view
					>
					<view class="info-p"
						>注册时间：<text>{{ clubInfo.addTime }}</text></view
					>
					<view class="info-p"
						>联系地址：<text>{{ clubInfo.provincialAddress }}{{ clubInfo.address }}</text></view
					>
					<view class="info-p"
						v-if="clubInfo.socialCreditCode" >营业执照编号：<text>{{ clubInfo.socialCreditCode }}</text></view
					>
					<view class="info-p">营业执照:</view>
					<view class="info-img"><image :src="clubInfo.businessLicense" alt=""/></view>
					<view class="info-p" v-if="clubInfo.medicalPracticeLicense">医疗许可证：</view>
					<view class="info-img" v-if="clubInfo.medicalPracticeLicense"
						><image :src="clubInfo.medicalPracticeLicense" alt=""
					/></view>
				</view>
				<view class="info-main">
					<view class="info-p"
						v-if="clubInfo.shortName">机构简称：<text>{{ clubInfo.shortName }}</text></view
					>
					<view class="info-p"
						v-if="clubInfo.contractEmail">邮箱：<text>{{ clubInfo.contractEmail }}</text></view
					>
					<view class="info-p" v-if="clubInfo.shopPhoto">门头照:</view>
					<view class="info-img" v-if="clubInfo.shopPhoto"><image :src="clubInfo.shopPhoto" alt=""/></view>
					<view class="info-p"
						>主营内容：<text>{{ clubInfo.mainProduct }}</text></view
					>
					<template v-if="clubInfo.contractPhone || clubInfo.fax || clubInfo.profile">
						<view class="info-p" v-if="clubInfo.contractPhone"
							>固定电话：<text>{{ clubInfo.contractPhone ? clubInfo.contractPhone : '无' }}</text></view
						>
						<view class="info-p" v-if="clubInfo.fax"
							>传真：<text>{{ clubInfo.fax ? clubInfo.fax : '无' }}</text></view
						>
						<view class="info-p" v-if="clubInfo.profile"
							>公司介绍：<text>{{ clubInfo.profile ? clubInfo.profile : '无' }}</text></view
						>
					</template>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/common/config/wxLogin.js'

export default {
	data() {
		return {
			skeletonShow: true,
			clubInfo: {},
			isSellerpopup: false
		}
	},
	onLoad(option) {
		wxLogin.wxLoginAuthorize()
		this.userClubRecordLinkage({ userId: option.userId })
	},
	filters: {
		FirstFormat(value) {
			//处理格式
			const map = {
				1: '医美',
				2: '生美',
				3: '项目公司',
				4: '个人',
				5: '其他'
			}
			return map[value]
		},
		TwoFormat(value) {
			const map = {
				1: '诊所',
				2: '门诊',
				3: '医院',
				4: '其他',
				5: '美容院',
				6: '养生馆',
				7: '其他',
			}
			return map[value]
		},
		linkManFormat(value) {
			const map = {
				1: '老板',
				2: '采购',
				3: '运营',
				4: '其他'
			}
			return map[value]
		},
		statusFilters(value) {
			// 状态
			const map = {
				1: '待审核',
				90: '已上线',
				92: '审核未通过'
			}
			return map[value]
		}
	},
	computed: {
		...mapState(['isManage'])
	},
	methods: {
		async userClubRecordLinkage(param) {
			//查询机构信息
			const userInfo = await this.$api.getStorage()
			this.UserService.OrganizationUpdateModifyInfo(param)
				.then(response => {
					this.clubInfo = response.data.club
					setTimeout(() => {
						this.skeletonShow = false
					}, 1000)
				})
				.catch(error => {
					this.isInvalid = true
				})
		}
	},
	onShow() {}
}
</script>

<style lang="scss">
page {
	height: auto;
}
.club-info {
	width: 100%;
	.info-content {
		width: 100%;
		height: auto;
		float: left;
		box-sizing: border-box;
		.info-main {
			width: 100%;
			height: auto;
			padding: 24rpx 0;
			margin-bottom: 24rpx;
			&.border{
				border-bottom: 30rpx solid #F5F5F5;
			}
			.info-h1 {
				width: 100%;
				box-sizing: border-box;
				padding: 0 24rpx;
				position: relative;
				line-height: 80rpx;
				font-size: 30rpx;
				color: #333333;
				&:before {
					content: '';
					width: 6rpx;
					height: 24rpx;
					background-color: #FF5B00;
					position: absolute;
					left: 0;
					top: 30rpx;
				}
			}
			.info-p {
				width: 100%;
				box-sizing: border-box;
				padding: 0 24rpx;
				position: relative;
				line-height: 66rpx;
				font-size: 30rpx;
				color: #999999;
				.info-h1-tag {
					display: inline-block;
					padding: 0 16rpx;
					line-height: 40rpx;
					background-color: #fff2d5;
					font-size: 24rpx;
					border-radius: 20rpx;
					color: #ffffff;
					text-align: center;
					margin-left: 16rpx;
					&.orange {
						background-color: #fff2d5;
						color: #e4aa43;
					}
					&.grey {
						background-color: #0db26d;
					}
					&.warn {
						background-color: #f94b4b;
					}
				}
				text {
					color: #333333;
				}
			}
			.info-img {
				width: 200rpx;
				height: 200rpx;
				image {
					width: 200rpx;
					height: 200rpx;
					display: block;
					margin-left: 24rpx;
					border: 1px dashed #e2e2e2;
				}
			}
		}
	}
}
</style>