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

<template>
	<view class="container club-info">
		<tui-skeleton
			v-if="skeletonShow"
			backgroundColor="#fafafa"
			borderRadius="10rpx"
			:isLoading="true"
			:loadingType="5"
		/>
		<template v-else>
			<view class="info-header-path" @click="handlePathVisit">
				<view class="path-text">客户访问采美商城全部记录</view>
				<view class="path-icon"><text class="iconfont icon-xiayibu"></text></view>
			</view>
			<view class="info-header clearfix" v-if="clubInfo.ipAddress">
				<view class="pp"
					>注册地：<text>{{ clubInfo.ipAddress }}</text></view
				>
			</view>
			<view class="info-header clearfix" v-if="clubInfo.describe">
				<view class="pp"
					>描述：<text>{{ clubInfo.describe }}</text></view
				>
			</view>
			<view class="info-content clearfix">
				<view class="info-title">
					<view class="info-title-left">
						<view
							>机构资料：<text>{{ clubInfo.userIdentity === 2 ? '资质机构' : '个人机构' }}</text></view
						>
					</view>
					<view class="info-title-right">
						<view v-if="clubInfo.spType === 0">待分配销售</view>
						<view v-else>已分配销售：{{ saleName }}</view>
					</view>
				</view>
				<view class="info-main">
					<view class="info-h1">注册信息</view>
					<view class="info-p"
						>联系人：<text>{{ clubInfo.linkMan }}</text></view
					>
					<view class="info-p"
						>手机号：<text>{{ clubInfo.contractMobile }}</text></view
					>
				</view>
				<view class="info-main" v-if="clubInfo.userIdentity === 2 || (clubInfo.userIdentity === 4 && (clubInfo.status == 1 || clubInfo.status == 92))">
					<view class="info-h1"
						>升级信息
						<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.name }}</text></view
					>
					<view class="info-p"
						>机构简称：<text>{{ clubInfo.shortName }}</text></view
					>
					<view class="info-p"
						>邮箱：<text>{{ clubInfo.contractEmail }}</text></view
					>
					<view class="info-p"
						>联系地址：<text>{{ clubInfo.provincialAddress }}{{ clubInfo.address }}</text></view
					>
					<view class="info-p"
						>营业执照编号：<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.shopPhoto">门头照:</view>
					<view class="info-img" v-if="clubInfo.shopPhoto"><image :src="clubInfo.shopPhoto" alt=""/></view>
					<view class="info-p"
						>机构类型：<text>{{ clubInfo.firstClubType | FirstFormat }}</text></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 class="info-p" v-if="clubInfo.secondClubType" 
						>科室：<text>{{ clubInfo.secondClubType | TwoFormat }}</text></view
					>
					<view class="info-p"
						>主营内容：<text>{{ clubInfo.mainProduct }}</text></view
					>
				</view>
				<view class="info-main" v-if="clubInfo.contractPhone || clubInfo.fax || clubInfo.profile">
					<view class="info-h1">其他信息</view>
					<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
					>
				</view>
			</view>
		</template>
		<!-- 按钮 -->
<!-- 	<template v-if="clubInfo.spType === 0 && isManage">
			<tui-bottom-popup :radius="false" :mask="false" :show="true">
				<view class="tui-popup-box clearfix">
					<view
						class="tui-right-flex tui-popup-btn"
						:style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }"
					>
						<view class="tui-flex-1">
							<view class="tui-button" @click="handleShowSellerpopup">分配销售</view>
						</view>
					</view>
				</view>
			</tui-bottom-popup>
		</template> -->
		<!-- 选择弹窗 -->
		<cm-seller-popup
			ref="cmresellerpopup"
			v-if="isSellerpopup"
			:show="isSellerpopup"
			@handleChoiceaSeller="handleChoiceaSellerData"
		>
		</cm-seller-popup>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/common/config/wxLogin.js'
import cmSellerPopup from '../components/cm-seller-popup'

export default {
	components: {
		cmSellerPopup
	},
	data() {
		return {
			skeletonShow: true,
			saleName: '',
			clubInfo: {},
			isSellerpopup: false,
			isIphoneX: this.$store.state.isIphoneX,
			salesParams: {
				choseServiceId:0,
				clubId: 0,
				spId: 0,
			}
		}
	},
	onLoad(option) {
		wxLogin.wxLoginAuthorize()
		this.salesParams.clubId = option.clubId
		this.userClubRecordLinkage({ clubId: this.salesParams.clubId })
	},
	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]
		},
		statusFilters(value) {
			// 状态
			const map = {
				1: '待审核',
				90: '审核通过',
				92: '审核未通过'
			}
			return map[value]
		}
	},
	computed: {
		...mapState(['isManage'])
	},
	methods: {
		async userClubRecordLinkage(param) {
			//查询机构信息
			const userInfo = await this.$api.getStorage()
			this.salesParams.choseServiceId = userInfo.serviceProviderId ? userInfo.serviceProviderId : 0
			this.SellerService.userClubRecordLinkage(param)
				.then(response => {
					this.clubInfo = response.data.club
					this.saleName = response.data.saleName
					setTimeout(() => {
						this.skeletonShow = false
					}, 1000)
				})
				.catch(error => {
					this.isInvalid = true
				})
		},
		userClubChoseSales(param) {
			//分配或更换协销
			this.SellerService.userClubChoseSales(param)
				.then(response => {
					this.$util.msg('分配成功', 2000, true, 'success')
					setTimeout(() => {
						this.userClubRecordLinkage({ clubId: this.salesParams.clubId })
					}, 1000)
				})
				.catch(error => {
					console.log('分配协销异常')
				})
		},
		handleChoiceaSellerData(data) {
			// 确定搜索
			this.salesParams.spId = data.serviceProviderId
			this.userClubChoseSales(this.salesParams)
		},
		handleShowSellerpopup() {
			//显示选择协销弹窗
			this.isSellerpopup = true
		},
		handlePathVisit(){
			// 跳转商城访问记录
			this.$api.navigateTo(`/pages/seller/club/club-visit?clubId=${this.salesParams.clubId}`)
		}
	},
	onShow() {}
}
</script>

<style lang="scss">
page {
	height: auto;
}
.club-info {
	width: 100%;
	.info-header-path{
		width: 100%;
		height: 90rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
		background-color: #FEF6F3;
		line-height: 90rpx;
		.path-text{
			float: left;
			font-size: 28rpx;
			color: #FF5B00;
			font-weight: bold;
		}
		.path-icon{
			width: 90rpx;
			height: 90rpx;
			float: right;
			text-align: right;
			font-size: 30rpx;
			color: #FF5B00;
		}
	}
	.info-header {
		width: 100%;
		height: auto;
		padding:10rpx 24rpx;
		float: left;
		box-sizing: border-box;
		background-color: #ffffff;
		.pp {
			width: 100%;
			font-size: 26rpx;
			line-height: 44rpx;
			font-weight: bold;
			color: #333333;
			text {
				font-size: 26rpx;
				color: #666666;
				font-weight: normal;
				line-height: 66rpx;
			}
		}
	}
	.info-content {
		width: 100%;
		height: auto;
		float: left;
		box-sizing: border-box;
		padding: 0 24rpx;
		background-color: #ffffff;
		.info-title {
			width: 100%;
			height: 68rpx;
			border-bottom: 1px solid #f0f0f0;
			.info-title-left {
				width: 50%;
				height: 68rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				float: left;
				line-height: 68rpx;
				text {
					display: inline-block;
					padding: 0 16rpx;
					line-height: 40rpx;
					background-color: #fff2d5;
					font-size: 24rpx;
					border-radius: 20rpx;
					color: #e4aa43;
					text-align: center;
					margin-left: 16rpx;
					font-weight: normal;
				}
			}
			.info-title-right {
				width: 50%;
				height: 68rpx;
				float: right;
				line-height: 68rpx;
				font-size: 24rpx;
				color: #999999;
				text-align: right;
				text-overflow: ellipsis;
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
		.info-main {
			width: 100%;
			height: auto;
			.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-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;
					}
				}
			}
			.info-p {
				width: 100%;
				box-sizing: border-box;
				padding: 0 24rpx;
				position: relative;
				line-height: 66rpx;
				font-size: 30rpx;
				color: #999999;
				text {
					color: #333333;
				}
			}
			.info-img {
				width: 200rpx;
				height: 200rpx;
				image {
					width: 200rpx;
					height: 200rpx;
					display: block;
					margin-left: 24rpx;
					border: 1px dashed #e2e2e2;
				}
			}
		}
	}
}
.tui-popup-box {
	position: relative;
	box-sizing: border-box;
	min-height: 100rpx;
	padding: 6rpx 24rpx;
	.tui-popup-content {
		padding-top: 30rpx;
	}
}
.tui-popup-btn {
	width: 100%;
	height: auto;
	float: left;
	box-sizing: border-box;
	margin-top: 30rpx;
	.tui-flex-1 {
		width: 100%;
		height: 84rpx;
		display: flex;
		.tui-button {
			flex: 1;
			line-height: 84rpx;
			font-size: $font-size-28;
			text-align: center;
			border-radius: 42rpx;
			padding: 0;
			margin: 0 15rpx;
			box-sizing: border-box;
			background: $btn-confirm;
			color: #ffffff;
		}
	}
}
</style>