activitys-uniapp/pages/mine/mine.vue

<template>
	<view :style="vuex_skin">
		<view class="container" :style="vuex_skin">
			<view class="flex justify-between align-center" style="padding: 40rpx 30rpx;" v-if="vuex_userId">
				<view class="padding-left">
					<view class="text-black text-bold text-xl padding-bottom-20">
						{{userData.nickName}}
					</view>
					<view class="flex align-center padding-top-sm">
						<view>
							<view class="text-black text-bold center">{{userData.heatValue}}</view>
							<view class="text-gray text-sm margin-top-10">热力</view>
						</view>
						<view style="height: 60upx;border: #D2D2D2 1px solid; margin: 0 30upx;"></view>
						<view>
							<view class="text-black text-bold center">{{userData.pufaPoint}}</view>
							<view class="text-gray text-sm margin-top-10">积分</view>
						</view>
						<view class="padding-left">
							<button class="cu-btn sm line-black round"
								@click="jump('/pages/mine/info/info?edit=true',true)">
								<text class="cuIcon-post " style="font-size: 26rpx;margin-right: 4rpx;"></text>
								<text>修改资料</text>
							</button>
						</view>
					</view>
				</view>
				<view class="flex align-center" @click="$jump('/pages/mine/info/info',true)">
					<view class="padding-right-10">
						<u-avatar :src="userData.avatar" size="100"></u-avatar>
					</view>
					<view class="">
						<text class="cuIcon-right" style="color: #C4C4C4;"></text>
					</view>
				</view>
			</view>
			<view class="text-center flex" style="padding: 30rpx;" v-else>
				<view class="">
					<u-avatar src="/static/icon/unlogin.png" size="110"></u-avatar>
				</view>
				<view class="center margin-left-20 " @click="showLogin">
					<view class="cu-btn sm round line-black">
						<text>点击授权登录</text>
					</view>
				</view>
			</view>
			<view class="flex justify-around align-center" style="padding: 10rpx 40rpx 30rpx;">
				<view class="flex" @click="jump('/pages/mine/points/pointsDetail',true)">
					<image src="../../static/mine/points.png" style="width: 80upx;height: 80upx;"></image>
					<view class="padding-left-sm">
						<view class="text-bold text-lg">积分明细</view>
						<view class="text-gray text-sm" style="font-weight: 400;">消费赚积分</view>
					</view>
				</view>
				<view class="flex" @click="jump('/pages/mine/my-help/help-records',true)">
					<image src="../../static/mine/hot-value.png" style="width: 80upx;height: 80upx;"></image>
					<view class="padding-left-sm">
						<view class="text-bold text-lg">热力明细</view>
						<view class="text-gray text-sm" style="font-weight: 400;">助力奖赏</view>
					</view>
				</view>
			</view>
		</view>
		<view class="container">
			<view v-for="(item, index) in iconList" :key="index" @click="jump(item.url,item.auth)">
				<block v-if="item.name == '分割线'">
					<view style="padding: 10rpx 20rpx;">
						<u-line ></u-line>
					</view>
				</block>
				<block v-else>
					<view class="flex justify-between align-center" style="padding: 38rpx;">
						<view class="flex align-center">
							<view class="flex align-center">
								<image :src="item.icon" style="width: 38rpx;height: 38rpx;"></image>
							</view>
							<view class="text-black text-bold  padding-left-20" style="font-size: 30rpx;">{{item.name}}
							</view>
						</view>
						<view class="">
							<text v-if="item.name!='更换主题'" class="cuIcon-right" style="color: #C4C4C4;"></text>
							<u-switch @change="themeChange" v-else v-model="themeChecked" size="40"
								active-color="#e72226" inactive-color="#6b4ff2"></u-switch>
						</view>
					</view>
				</block>
			</view>
		</view>
		<login ref="login" @signIn="signIn" @phoneSuccess="phoneSuccess"></login>
	</view>
</template>
<script>
	import config from '../../assets/http/config.js'
	export default {
		data() {
			return {
				userId: '',
				userData: {},
				//更换主题
				themeChecked: true,
				iconList: [{
						name: '我的兑换',
						icon: '/static/mine/duihuan.png',
						url: '',
						auth: true //是否登录验证
					},
					{
						name: '我的助力',
						icon: '/static/mine/zhuli.png',
						url: '/pages/mine/my-help/my-help',
						auth: true //是否登录验证
					},
					{
						name: '分割线',
						icon: '',
						url: '',
						auth: false //是否登录验证
					},
					{
						name: '花积分',
						icon: '/static/mine/huajifen.png',
						url: '/pages/shop/shop',
						auth: false //是否登录验证
					},
					{
						name: '更多活动',
						icon: '/static/mine/huodong.png',
						url: '',
						auth: false //是否登录验证
					},
					{
						name: '活动规则',
						icon: '/static/mine/guize.png',
						url: '',
						auth: false //是否登录验证
					},
					{
						name: '更换主题',
						icon: '/static/mine/theme.png',
						url: '',
						auth: false //是否登录验证
					},
				],
			}
		},
		onLoad() {
			
		},
		methods: {
			init() {
				this.fetchUserInfo()
			},
			jump(url,auth){
				if (this.$isEmpty(url)) {
					this.$u.toast('暂未开放')
					return
				}
				if (url=='/pages/shop/shop') {
					uni.switchTab({
						url
					})
					return
				}
				if (auth && this.$isEmpty(this.vuex_userId)) {
					this.showLogin()
					return
				}
				uni.navigateTo({
					url
				})
			},
			fetchUserInfo() {
				let params = {
					id: this.vuex_userId
				}
				this.$api.loginUser.detail(params).then(res => {
					if (this.$isNotEmpty(res.data.data)) {
						this.userData=res.data.data
						let userInfo=this.userData
						userInfo.sessionKey=this.$cache.get('userInfo').sessionKey
						this.$cache.put('userInfo',userInfo)
						this.$u.vuex('vuex_phone',this.userData.phone)
					}
				})
			},
			themeChange() {
				if (!this.themeChecked) {
					this.$u.vuex('vuex_skin', config.themeBlue.skin)
					this.$u.vuex('vuex_theme', config.themeBlue.theme)
				} else {
					this.$u.vuex('vuex_skin', config.themeRed.skin)
					this.$u.vuex('vuex_theme', config.themeRed.theme)
				}
			},
		}
	}
</script>

<style>
	.container {
		margin: 26upx;
		background-color: #ffffff;
		border-radius: 20upx;
	}

	.custom-style {
		width: 100upx;
		height: 50upx;
		color: #ffffff;
		font-size: 28rpx;
	}
</style>