juliancheng/pages/index/mytuijian.vue

<template>
	<view class="main">
		<view class="" style="width: 100%;">
			<view class=" nav text-center">
				<view :class="index==TabCur?'cu-item text_style cur':'cu-item textstyle'" v-for="(item,index) in list" :key="index"
				 @click="tabSelect" :data-id="index">
					{{item}}
				</view>
			</view>
			<view class="tabs margin-top-sm flex flex-wrap justify-between">
				<view class="tab margin-top-sm" @click="gotoinfo(item.id)" style="box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);"
				 v-for="(item,index) in DynamicList" :key="index">
					<image :src="item.image" style="width: 320rpx;height: 212rpx;" ></image>
					<view class="padding-xs text-cut">
						{{item.title}}
					</view>
				</view>
			</view>
		</view>
		<view class="flex justify-center" style="position: fixed;bottom: 145rpx;z-index: 9999;">
			<button class="cu-btn round lg" @click="jiameng" style="width: 600rpx;background-color:rgb(251, 198, 0);box-shadow: 0 0 50rpx 0 rgba(0, 0, 0, 0.1);">
				<text class="cuIcon-profilefill text-black margin-right-xs"></text>
				<text>我想合作</text>
			</button>
		</view>
		<view class="cu-tabbar-height"></view>
		<view class="cu-tabbar-height"></view>
	</view>
</template>

<script>
	import {
		envHost
	} from '@/common/env';
	var user = require('../../common/user.js');
	import {
		mapState,
		mapMutations,
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapGetters({
				hasLogin: 'verifyJwt'
			}),
			...mapState(['user'])
		},
		data() {
			return {
				TabCur: 0,
				list: [
					"行业动态",
					"热门推广",
					"人才培训"
				],
				DynamicList: [],
				index: 2,
				mineshow:false
			}
		},
		onLoad(option) {

		},
		mounted() {
			this.dynamicList(this.index)
		},
		methods: {
			...mapActions({
				getUser: 'getUser' // 将 `this.getUser()` 映射为 `this.$store.dispatch('getUser')`
			}),
			...mapMutations({
				setJwt: 'setJwt',
				login: 'login'
			}),
			jiameng() {
				if (this.mineshow) {
					uni.showModal({
						title: "提示",
						content: "系统维护请等待通知",
						showCancel: false,
						success: (res) => {}
					})
					return false
				}
				// 请求接口返回数据判断是否为推广人
				// 是推荐人直接跳转到pages/tuijian/tuijian 页面
				if (this.hasLogin) {
					uni.navigateTo({
						url: '/pages/index/joinInfo'
					});
				} else {
					this.toUrl = '/pages/index/joinInfo';
					uni.navigateTo({
						url: "../login/login",
						fail: (err) => {
							console.log(err)
						}
					})
				}
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id
				this.dynamicList(this.index + parseInt(this.TabCur))
				console.log(this.index + parseInt(this.TabCur))
			},
			dynamicList: async function(cate_id) {
				let res = await this.$request.get('/api/Article/articleList?page=1&size=10&cate_id=' + cate_id);
				if (res.code == 200) {
					this.DynamicList = res.data.data;
					console.log(this.DynamicList);
				} else {
					uni.showToast({
						icon: 'none',
						title: res.message
					});
				}
			},
			gotoinfo(id) {
				if (this.mineshow) {
					uni.showModal({
						title: "提示",
						content: "系统维护请等待通知",
						showCancel: false,
						success: (res) => {}
					})
					return false
				}
				uni.navigateTo({
					url: '/pages/index/articleDetails?id=' + id
				});
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #fff;
		/* height: 100%; */
	}

	.main {
		margin: 10vw 5vw 0 5vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 100%;
	}

	.text_style {
		color: rgb(251, 198, 0);
	}

	.textstyle {
		color: rgb(152, 152, 152);
	}

	.tab {
		width: 42.5vw;
		height: auto;
		border-radius: 10rpx;
		background: #fff;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
</style>