caimei-applets-caimei/pages/goods/components/cm-product-modal.vue

<template name="cm-product-modal">
	<!-- 商品详情可见度弹窗提醒 -->
	<view>
		<tui-modal
			:show="showModal"
			@click="handleClick"
			@cancel="hideMobel"
			:content="contentModalText"
			:button="modalButton"
			color="#333"
			:size="32"
			shape="circle"
			:maskClosable="false"
		>
		</tui-modal>
	</view>
</template>

<script>
import { mapState } from 'vuex'
export default {
	name: 'cm-product-modal',
	props: {
		showModal: {
			type: Boolean,
			default: false
		},
		commodityDetailsFlag: {
			type: Number
		},
		userIdentity: {
			type: Number
		},
		firstClubType: {
			type: Number
		},
		isShareType:{
			type:String
		}
	},
	data() {
		return {
			contentModalText: '',
			modalButton: [],
			
		}
	},
	computed: {
		...mapState(['hasLogin'])
	},
	created() {
		// 根据商品详情可见度显示弹窗 product.commodityDetailsFlag 1.所有人可见 2.所有机构可见 3.仅会员机构可见 4.仅医美机构可见
		this.initModal(this.commodityDetailsFlag, this.userIdentity, this.firstClubType)
	},
	methods: {
		initModal(flag, identity, clubType) {
			this.contentModalText = this.setModalText(flag, identity, clubType, this.hasLogin)
			this.modalButton = this.setModalButton(flag, identity, clubType, this.hasLogin)
		},
		setModalText(flag = '', identity = '', clubType = '', hasLogin) {
			const map = {
				'2': '该商品仅限已注册机构查看，请注册机构账户后继续查看。有采美账号的，请直接登录',
				'3': '该商品仅限资质机构查看，请注册资质机构后继续查看。有采美账号的，请直接登录。',
				'4': '该商品仅限医美类机构查看，请注册医美机构后继续查看。有采美账号的，请直接登录。',
				'34': '该商品仅限资质机构查看，请升级为资质机构后继续查看。',
				'44': '该商品仅限医美类机构查看，请升级为医美机构后继续查看。',
				'42': '该商品仅限医美类机构查看，您暂无权限。您可去机构资料页面查看机构类型。'
			}
			// 游客提示语
			if (!hasLogin) {
				return map[flag]
			}
			const code = flag === 4 && identity === 2 && clubType !== 1 ? '42' : `${flag}${identity}`
			return map[code]
		},
		setModalButton(flag = '', identity = '', clubType = '', hasLogin) {
			const customStyle = { color: '#fff', bgColor: 'linear-gradient(90deg, #F28F31 0%, #FF5B00 100%)' }
			const btnMap = {
				'22': [
					{ text: '关闭', type: 'gray', plain: true },
					{
						text: '去注册/登录',
						customStyle: customStyle,
						plain: false
					}
				],
				'34': [
					{ text: '关闭', type: 'gray', plain: true },
					{
						text: '去升级',
						customStyle: customStyle,
						plain: false
					}
				],
				'44': [
					{ text: '关闭', type: 'gray', plain: true },
					{
						text: '去升级',
						customStyle: customStyle,
						plain: false
					}
				],
				'42': [
					{ text: '关闭', type: 'gray', plain: true },
					{
						text: '去查看资料',
						customStyle: customStyle,
						plain: false
					}
				]
			}
			if (!hasLogin) {
				// 游客按钮
				return btnMap['22']
			} 
			const code = flag === 4 && identity === 2 && clubType !== 1 ? '42' : `${flag}${identity}`
			console.log('code',code)
			return btnMap[code]
		},
		handleClick(e) {
			// 医美
			if (e.index == 1) {
				if (!this.hasLogin) {
					//游客跳转登录页
					this.$api.navigateTo('/pages/login/login')
				} else {
					if (this.userIdentity === 4) {
						// 个人机构跳转升级页面
						this.$api.navigateTo('/pages/login/apply')
					} else if (this.userIdentity === 2) {
						//会员机构
						if (this.firstClubType != 1) {
							// 会员非医美机构跳转资料页
							this.$api.navigateTo('/pages/login/information')
						}
					}
				}
				this.$parent.showModal = false
			} else {
				this.$parent.showModal = false
				if (this.isShareType == 'share') {
					this.$api.switchTabTo('/pages/tabBar/home/index')
				} else {
					this.$api.navigateBack(1)
				}
			}
		},
		hideMobel() {
			this.$parent.showModal = false
		}
	}
}
</script>

<style lang="scss"></style>