wiki_enterprise_js/pages/tabBar/Recommend.vue

<template>
	<view>
		<view v-if="user" class="top-move">
			<view class="cu-load bg-grey">这是根据您的信息，为您推荐的政策...</view>
			<Policy :showModal="showModal"></Policy>
			<view class="yincang">1</view>
		</view>
		<view v-else class="cu-modal" :class="'show'">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">提示</view>
				</view>
				<view class="padding-xl">
					您当前为游客状态，请先绑定企业基本信息
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @click="jumpfirst">取消</button>
						<button class="cu-btn bg-green margin-left" @click="jumpedit">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		onShareAppMessage(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '',
				path: '/pages/tabBar/Recommend'
			}
		},
		created(){
			this.$store.state.policy.pagenum = 1
			console.log(this.$store.state.policy.pagenum)
		},
		data() {
			return {
				showModal: "-----推荐页面打开的政策-----",
				user: this.$store.state.user.bindMsg.bindStatus,
				modalName: null,
			}
		},
		onReachBottom: function () {
			this.$store.state.policy.pagenum ++
			console.log(this.$store.state.policy.pagenum)
		},
		methods:{
			jumpfirst(){
				uni.switchTab({
					url:'/pages/tabBar/HomePage'
				})
			},
			jumpedit(){
				uni.navigateTo({
					url:'/pages/Edit/Edit'
				})
			},
			jumpbinding(){
				uni.navigateTo({
					url:'/pages/Binding/Binding'
				})
			}
		},
		watch:{
			'$store.state.user.bindMsg'(val){
				const that = this
				that.user = val
				console.log(that.user)
			}
		}
	}
</script>

<style lang="scss">
.cu-load {
	display: block;
	line-height: 3em;
	text-align: center;
}

.top-move{
	animation:top-move 5s forwards;
}
@keyframes top-move{
	from{
		transform: translate3d(0,0,0);
	}
	to{
		transform: translate3d(0,-3em,0);
		margin-bottom: -3em;
	}
}
.yincang{
	margin-top: -100%;
}
.cu-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1110;
	opacity: 0;
	outline: 0;
	text-align: center;
	-ms-transform: scale(1.185);
	transform: scale(1.185);
	backface-visibility: hidden;
	perspective: 2000upx;
	background: rgba(0, 0, 0, 0.6);
	transition: all 0.3s ease-in-out 0s;
	pointer-events: none;
}
.cu-modal::before {
	content: "\200B";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
.cu-modal.show {
	opacity: 1;
	transition-duration: 0.3s;
	-ms-transform: scale(1);
	transform: scale(1);
	overflow-x: hidden;
	overflow-y: auto;
	pointer-events: auto;
}
.cu-dialog {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
	width: 680upx;
	max-width: 100%;
	background-color: #f8f8f8;
	border-radius: 10upx;
	overflow: hidden;
}
.cu-modal.bottom-modal::before {
	vertical-align: bottom;
}
.cu-modal.bottom-modal .cu-dialog {
	width: 100%;
	border-radius: 0;
}
.cu-modal.bottom-modal {
	margin-bottom: -1000upx;
}
.cu-modal.bottom-modal.show {
	margin-bottom: 0;
}
.cu-modal.drawer-modal {
	transform: scale(1);
	display: flex;
}
.cu-modal.drawer-modal .cu-dialog {
	height: 100%;
	min-width: 200upx;
	border-radius: 0;
	margin: initial;
	transition-duration: 0.3s;
}
.cu-modal.drawer-modal.justify-start .cu-dialog {
	transform: translateX(-100%);
}
.cu-modal.drawer-modal.justify-end .cu-dialog {
	transform: translateX(100%);
}
.cu-modal.drawer-modal.show .cu-dialog {
	transform: translateX(0%);
}
.cu-modal .cu-dialog>.cu-bar:first-child .action{
  min-width: 100rpx;
  margin-right: 0;
  min-height: 100rpx;
}
</style>