uni-events-helper-wx/pages/index/index.vue

<template>
	<view class="content">
		
		<view class="login-box flex_col flex_start">
			<image class="bg" src="../../static/images/index/index_bg.png" mode="aspectFit"></image>
			
			<view class="login-info flex_col" v-if="hasLogin">
				<text>{{userInfo.mobile||"-"}}</text>
				<text>您好!</text>
			</view>
			<view class="button-login " v-else @click="jumpPage('login')">前往登录</view>
		</view>
		
		<view class="item flex_row flex_start bg-white padding solid-bottom" @click="jumpPage('messageList')">
			<image src="../../static/images/index/index_bell.png" mode=""></image>
			<view class="text-m text-left">消息中心</view>
			<view class="bandage" v-if="unReadNum">{{unReadNum}}</view>
			<image src="../../static/images/index/arrow_right.png" mode=""></image>
		</view>
		
		<view class="item flex_row flex_start bg-white padding solid-bottom" @click="clickEvent">
			<image src="../../static/images/index/index_cup.png" mode=""></image>
			<view class="text-m text-left">活动赛事</view>
			<image src="../../static/images/index/arrow_right.png" mode=""></image>
		</view>
		
		<view class="item flex_row flex_start bg-white padding solid-bottom" v-if="hasLogin" @click="logout">
			<image src="../../static/images/index/index_logout.png" mode=""></image>
			<view class="text-m text-left" >退出登录</view>
			<image src="../../static/images/index/arrow_right.png" mode=""></image>
		</view>
		
		 <!-- <canvas style="width: 300px; height: 300px;" canvas-id="testcanvasId" id="testcanvasId"></canvas> -->
	</view>
</template>
<script>
	import { mapState,mapActions,mapGetters } from 'vuex'
	import {msgNum} from "../../nxTemp/apis/userAPI.js"
	export default {
		data() {
			return {
				address:"",
				login:false,
				unReadNum:""
			};
		},
		computed:{
			...mapState(['userInfo']),
			...mapGetters(['hasLogin']),
		},
		onShow() {
			this.updateMsgNum()
			this.testImage()
		},
		onLoad(opt) {
		},
		onUnload() {
			
		},
		methods: {
			...mapActions(['getUserInfo','logoutUser']),
			jumpPage(name){
				this.$Router.push({name:name})
			},
			testImage(){
				var that =this
				let canvasId ="testcanvasId"
				// let imgPath = "/static/images/logo_main.png"
				let imgPath = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F8c39725605bf4e80e9763c58dbfb02482f98d87711069-qXPaNI_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650531435&t=6f1744c5f84585eaef5dd1be6f83ae24"
				const ctx = uni.createCanvasContext(canvasId)
				
				ctx.drawImage(imgPath, 0, 0, 300, 300)
				ctx.draw(false, () => {
				  uni.canvasGetImageData({
				    canvasId: canvasId,
				    x: 150,
				    y: 150,
				    width: 50,
				    height: 50,
				    success: (res) => {
				      console.log(res.data[0] +'  ' + res.data[1] +'  ' + res.data[2])
					  console.log("canvasGetImageData return:",res.data);
				    },
				    fail: res => {
				      console.log(res)
				    },
				  }, that)
				})
			},
			updateMsgNum(){
				if(!this.hasLogin) return console.log("该用户还未登录");
				msgNum(this.postData).then(res => {
					this.unReadNum = res
				}).catch(e=>{
					// this.$tools.showNone(e.errMsg)
				})
			},
			async clickEvent(){
				if(this.hasLogin)this.jumpPage('eventList');
				else await this.$tools.showModal("该功能需要登录后才能查看,是否跳转去登录界面?",()=>{this.jumpPage('login')})
			},
			async logout(){
				await this.$tools.showModal("真的要退出登录?",this.logoutUser)
			},
		}
	}
</script>

<style lang="less" scoped>
.content{
	.login-box{
		position: relative;
		width: 750rpx;
		height: 480rpx;
		> image ,.bg{
			width: 100%;height: 100%;
			position: absolute;
			z-index: 1;
		}
		.button-login{
			margin-top: 132rpx;
			color: #009874;
			z-index: 20;
			width: 240rpx;
			height: 96rpx;
			background: #FFFFFF;
			border-radius: 48rpx;
			text-align: center;
			line-height: 96rpx;
			font-weight: 900;
			font-size: 36rpx;
			letter-spacing: -0.2rpx;
		}
		.login-info{
			margin-top: 132rpx;
			z-index: 20;
			font-size: 40rpx;
			color: #FFFFFF;
			font-weight: 900;
		}
	}
	.item{
		color: #333333;
		position: relative;
		> image:first-child{
			width: 52rpx;
			height: 52rpx;
			margin-right: 14rpx;
		}
		> image:last-child{
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			right: 20rpx;
		}
		.bandage{
			width: 34rpx;
			height: 34rpx;
			position: absolute;
			right: 60rpx;
			background: #EA5061;
			border-radius: 50%;
			font-size: 24rpx;
			color: white;
			text-align: center;
			line-height: 34rpx;
		}
	}
}
</style>