weapp-v3/pages/other/other.vue

<template>
	<view>
		<custom-nav title="其他" showIndex></custom-nav>
		<view class="other-container" >
				<view
					v-for="(item, i) in moduleList"
					:key="i"
					class="module"
					:style="{ background: `url(${require('../../static/new_other/bg.png')}) no-repeat bottom, ${item.style}`, backgroundSize: '100% 126rpx' }"
					@click="toModuleLink(item.name)"
				>
					<view class="name">{{ item.name }}</view>
					<view
						class="icon"
						:style="{ backgroundImage: `url(${require('../../static/new_other/'+item.icon)})` }"
					></view>
				</view>
			
		
		</view>
	</view>
	
</template>

<script>
	import { rankDay } from "@/api.js"
	import { mapState } from "vuex";
	export default {
		computed: {
			...mapState([
				"userServerInfo"
			])
		},
		data() {
			return {
				moduleList: [
					{ name: '数据统计', style: 'linear-gradient(95deg, #FE5C51 0%, #FF7B5A 100%)', icon: '1.png' },
					{ name: '培训课程表', style: 'linear-gradient(95deg, #FA924F 0%, #FF7B39 100%)', icon: '2.png' },
					//{ name: '礼品兑换', style: 'linear-gradient(95deg, #FB6FAC 0%, #FFAACF 100%)', icon: '3.png' },
					{ name: '每日排行', style: 'linear-gradient(270deg, #FFBF51 0%, #FF5E58 100%)', icon: '4.png' },
					{ name: '荣誉殿堂', style: 'linear-gradient(90deg, #E28EFF 0%, #EDBAFF 100%)', icon: '6.png' },
					{ name: '荣誉榜单', style: 'linear-gradient(90deg, #FCC616 0%, #FED476 100%)', icon: '7.png' },
					{ name: '地址填写', style: 'linear-gradient(90deg, #928EFF 0%, #BACAFF 100%)', icon: '8.png' },
					{ name: '设置', style: 'linear-gradient(90deg, #5380FF 0%, #769FFE 100%)', icon: '5.png' }
				],
			}
		},
		onLoad() {
			if (this.userServerInfo.upload_status) {
				this.moduleList.splice(6, 0, { name: '图片上传', style: 'linear-gradient(90deg, #FCC616, #FED476)', icon: '2.png' })
			}
		},
		methods: {
			toModuleLink(name) {
				let m = new Map([
					['数据统计', () => this.tostatistics],
					['培训课程表', () => this.toCourse],
					['礼品兑换', () => this.toexchange],
					['每日排行', () => this.toRankDay],
					['设置', () => this.tosetting],
					['荣誉殿堂', () => this.tohonour],
					['荣誉榜单', () => this.toHotList],
					['图片上传', () => this.toUpload],
					['地址填写', () => this.toAddress],
				])
				m.get(name)()()
			},
			toHotList(){
				uni.navigateTo({
					url: '../hot/hot'
				})
			},
			toRankDay(){ // 每日排行
				uni.removeStorageSync('rankDay')
				uni.showLoading()
				this.$ajax.get(rankDay).then(([, { data: res }]) => {
					uni.hideLoading()
					if(res.code === 200) {
						uni.setStorage({
							key: 'rankDay',
							data: res.data.path,
							success() {
								uni.navigateTo({
									url: '../rank-day/rank-day'
								})
							}
						})
					} else {
						uni.showModal({
							content: res.msg || '查看每日排行失败',
							showCancel: false
						})
					}
				}).catch(() => {
					uni.hideLoading()
					uni.showModal({
						content: '查看每日排行失败',
						showCancel: false
					})
				})
				let status=this.userServerInfo.signuped;
				if(status){
						uni.removeStorageSync('rankDay')
						uni.showLoading()
						this.$ajax.get(rankDay).then(([, { data: res }]) => {
							uni.hideLoading()
							if(res.code === 200) {
								uni.setStorage({
									key: 'rankDay',
									data: res.data.path,
									success() {
										uni.navigateTo({
											url: '../rank-day/rank-day'
										})
									}
								})
							} else {
								uni.showModal({
									content: res.msg || '查看每日排行失败',
									showCancel: false
								})
							}
						}).catch(() => {
							uni.hideLoading()
							uni.showModal({
								content: '查看每日排行失败',
								showCancel: false
							})
						})
				}else{
					uni.showModal({
						content: '请先报名',
						showCancel: false
					})
				}
			},
			toAddress(){
				uni.navigateTo({ url: '../addAddress/addAddress' })
			},
			// 数据统计
			tostatistics () {
				uni.navigateTo({ url: '../statistics/statistics' })
			},
			// 礼品兑换
			toexchange () {
				uni.navigateTo({ url: '../exchange/exchange' })
			},
			// 图片上传
			toUpload() {
				uni.navigateTo({ url: '../upload/upload' })
			},
			// 点击荣誉殿堂
			tohonour () {
				//普通用户直接跳转到荣誉殿堂页面
				if (this.userServerInfo.type === 1 || this.userServerInfo.type === 2) {
					uni.navigateTo({ url: '../honorList/index' })
				} else {
					//批发商和客服不可参赛，所以提示无参赛记录
					uni.showModal({
						content: "无参赛记录",
						showCancel: false
					})
				}
			},
			// 设置
			tosetting () {
				uni.navigateTo({ url: '../setting/setting' })
			},
			// 课程
			toCourse() {
				let now = Date.now()
				let { end_time, start_time } = this.userServerInfo
				let week
				if(now > end_time) {
					week = 3
				} else if (now < start_time) {
					week = 0
				} else {
					week = Math.ceil((now - start_time) / (7 * 24 * 60 * 60 * 1000))
				}
				uni.navigateTo({
					url: '../course/list?week='+week
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.custom-nav {
		position: fixed;
		z-index: 2;
		top: 0;
		width: 100%;
		height: calc(44px + var(--status-bar-height));
		box-sizing: border-box;
		padding-top: var(--status-bar-height);
		display: flex;
		align-items: center;
		font-size: 40rpx;
		line-height: 40rpx;
		color: #2A2A2A;
		background: #FFFFFF;
		.back {
			font-size: 42rpx;
			line-height: 42rpx;
			margin-right: 8rpx;
		}
	}
	page {
		display: flex;
		flex-direction: column;
		.status_bar {
			  // position: fixed;
			  // top: 0;
			  // padding-top: 40rpx;
			  // left: 25rpx;
			  height: 128rpx;
			  z-index: 1000;
			  line-height: 88rpx;
			  background-color: #fff;
		      width: 100%;
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
		  }
		.other-container {
			width: 100%;
			// margin-top: 20rpx;
			padding: 20rpx;
			// padding-top: calc(44px + var(--status-bar-height) + 20rpx);
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
			box-sizing: border-box;
			// margin-top: 128rpx;
			.module {
				width: calc(50% - 20rpx);
				// width: 330rpx;
				height: 220rpx;
				margin-right: 15rpx;
				margin-bottom: 30rpx;
				border-radius: 16rpx;
				&:nth-of-type(2n){
					margin-left: 15rpx;
					margin-right: 0;
				}
				padding-top: 60rpx;
				box-sizing: border-box;
				.name {
					color: #FFFFFF;
					font-size: 48rpx;
					line-height: 66rpx;
					text-align: center;
				}
				position: relative;
				overflow: hidden;
				.icon {
					width: 90rpx;
					height: 90rpx;
					position: absolute;
					background-position: bottom;
					background-repeat: no-repeat;
					background-size: 100% auto;
					right: 18rpx;
					bottom: -14rpx;
				}
			}
		}
	}
</style>