zdxtDrillProgram/pages/my/my.vue

<template>
	<view class="wrap">
	  <view class="stabar"></view>
	  <view class="mainwrap">
	    <view class="perinfo"> <span class="type-name"><img :src="avatar"></img></span>
	      <view class="dycd"> <span class="myname" @click="checkMyInfo()">{{name}}</span>
	        <view class="myitem"> <span @click="showMedal()">勋章：{{medalNum}}<i :style="{'background-color':active == 0 ?'red':'none'}"></i></span> <span>挑战历史：{{challengeNum}}</span> </view>
	      </view>
	    </view>
	    <view class="banbox_sec">
			<swiper style="height: 100%;" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
				<swiper-item v-for="(item, i) in swiperList" :key="i">
					<navigator style="height: 100%;" class="swiper-item">
						<img :src="item.uploadPath"></img>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
	    <view class="mset">
	      <ul>
			  <li v-for="(item,i) in functionList" :key="i">
				  <span @click="navClickHandler(item)" :style="'background-image:url('+item.uploadPath+');'">{{item.name}}</span>
			  </li>
	      </ul>
	    </view>
	  </view>
	  <view class="footbox"> 
		<tabbar :page="page"></tabbar>
	  </view>
	</view>

</template>

<script>
	import tabbar from "@/components/tabbar/tabbar.vue";
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				active:1,
				medalNum:0,
				challengeNum:0,
				page: "",
				name:"",
				avatar: uni.$http.baseUrl + "/profile//2024/01/18/6147d64a3b94d7b3d3cc35aaf8cbfe06.png",
				//轮播图数据列表
				swiperList: [],
				//主页功能列表
				functionList: []
			};
		},
		onLoad() {
			this.name = this.userName;
			this.avatar = this.avatarUrl;
			this.getSwiperList()
			this.getFunctionList()
			this.getMyMedalList()
			this.getChallengeTotal()
			this.getStatus()
			this.page = "my"
			this.name = this.userName;
			this.avatar = this.avatarUrl;
			this.getSwiperList()
			this.getFunctionList()
			this.getMyMedalList()
			this.getChallengeTotal()
			this.getStatus()
		},
		onPullDownRefresh() {
			this.name = this.userName;
			this.avatar = this.avatarUrl;
			this.getSwiperList()
			this.getFunctionList()
			this.getMyMedalList()
			this.getChallengeTotal()
			this.getStatus()
		},
		computed: {
			...mapState('m_user', ['userinfo','userId','userName','avatarUrl'])
		},
		methods: {
			...mapMutations('m_user', ['updateAddress', 'updateUserInfo', 'updateToken']),
			async logout() {
				const [err, succ] = await uni.showModal({
					title: '提示',
					content: '确认退出登录吗？'
				}).catch(err => err)

				if (succ && succ.confirm) {
					this.updateAddress({})
					this.updateUserInfo({})
					this.updateToken('')
				}
			},
			async getMyMedalList() {
				
				const {
					data: res
				} = await uni.$http.post('/small/wechat/showMyMedal',{guid:this.userId})
				if (!res.success) return uni.$showMsg()
				this.medalNum = res.data.length;
				
				// uni.$showMsg('数据请求成功！')
			},
			async getStatus() {
				
				const {
					data: res
				} = await uni.$http.post('/small/wechat/getActiveStatus',{guid:this.userId})
				if (!res.success) return uni.$showMsg()
				if(res.data!=null){
					this.active = res.data.active;
				}
				// uni.$showMsg('数据请求成功！')
			},
			async getChallengeTotal() {
				
				const {
					data: res
				} = await uni.$http.post('/small/questionFre/listAll',{userId:this.userId})
				if (!res.success) return uni.$showMsg()
				this.challengeNum = res.data.length;
				
				// uni.$showMsg('数据请求成功！')
			},
			async getSwiperList() {

				const {
					data: res
				} = await uni.$http.post('/small/customImage/listAll', {
					page: "my"
				})
				if (!res.success) return uni.$showMsg()

				res.data.forEach(item => {
					item.uploadPath = uni.$http.baseUrl + item.uploadPath
				})
				this.swiperList = res.data
				// uni.$showMsg('数据请求成功！')
			},
			async getFunctionList() {

				const {
					data: res
				} = await uni.$http.post('/small/project/home/listAll')
				if (!res.success) return uni.$showMsg()

				res.data.forEach(item => {
					item.uploadPath = uni.$http.baseUrl + item.uploadPath
				})
				this.functionList = res.data;
				// uni.$showMsg('数据请求成功！')
			},
			async showMedal(){
				if (this.active == 0){
					const {
						data: res
					} = await uni.$http.post('/small/wechat/editActiveStatus',{guid:this.userId,active:1})
					if (!res.success) return uni.$showMsg()
					this.active = 1;
				}
				uni.navigateTo({
				  url:'/subpkg/medal/medal?medalNum='+this.medalNum+'&avatarUrl='+this.avatar+'&name='+this.name
				})
			},
			navClickHandler(item) {
				if(item !== ""){
					uni.navigateTo({
					  url: item.pagePath
					})
				}
			},
			checkMyInfo(){
				uni.navigateTo({
				  url:'/subpkg/userInfo/userInfo?avatarUrl='+this.avatar+'&name='+this.name
				})
			}
		},
		components: {
			tabbar
		}
	}
</script>

<style lang="scss">
	@import url("@/static/base_css.css");
	
	// .my-userinfo-container {
	// 	height: 100%;
	// 	background-color: #F4F4F4;

	// 	.top-box {
	// 		height: 400rpx;
	// 		background-color: #aba9d0;
	// 		display: flex;
	// 		justify-content: center;
	// 		align-items: center;
	// 		flex-direction: column;

	// 		.avatar {
	// 			width: 90px;
	// 			height: 90px;
	// 			border-radius: 45px;
	// 			border: 2px solid #FFF;
	// 			box-shadow: 0 1px 5px black;
	// 		}

	// 		.nickname {
	// 			font-size: 16px;
	// 			color: black;
	// 			font-family: Georgia, 'Times New Roman', Times, serif;
	// 			margin-top: 10px;
	// 		}
	// 	}
	// }

	// .panel-list {
	// 	padding: 0 10px;
	// 	position: relative;
	// 	top: -10px;

	// 	.panel {
	// 		background-color: white;
	// 		border-radius: 3px;
	// 		margin-bottom: 8px;

	// 		.panel-title {
	// 			line-height: 45px;
	// 			padding-left: 10px;
	// 			font-size: 15px;
	// 			border-bottom: 1px solid #F4F4F4;
	// 		}

	// 		.panel-body {
	// 			display: flex;
	// 			justify-content: space-around;

	// 			.panel-item {
	// 				display: flex;
	// 				flex-direction: column;
	// 				align-items: center;
	// 				justify-content: space-around;
	// 				padding: 10px 0;
	// 				font-size: 13px;

	// 				.icon {
	// 					width: 35px;
	// 					height: 35px;
	// 				}
	// 			}
	// 		}
	// 	}
	// }

	// .function-img {
	// 	width: 30px;
	// 	height: 30px;
	// }

	// .panel-list-item {
	// 	display: flex;
	// 	justify-content: space-between;
	// 	align-items: center;
	// 	font-size: 15px;
	// 	padding: 0 10px;
	// 	line-height: 45px;
	// }

	// swiper {
	// 	height: 230rpx;

	// 	.swiper-item,
	// 	image {
	// 		width: 100%;
	// 		height: 100%;
	// 		border-radius: 4px;
	// 	}
	// }
</style>