activitys-uniapp/pages/mine/mine.vue

<template>
	<view :style="vuex_skin">
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar title-color="#000000" :is-back="false" title="我的"></u-navbar>
		<!-- #endif -->
		<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">{{userHeatAndPoint.userVoteCount || 0}}</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">{{userHeatAndPoint.userPufaPoint || 0}}</view>
							<view class="text-gray text-sm margin-top-10">积分</view>
						</view>
						<view class="padding-left">
							<button class="cu-btn sm line-black round center"
								@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">
			<button :open-type="item.name=='联系我们'?'contact':''" v-if="item.show" class="u-reset-button"
				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;z-index: 99;">
								{{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>
			</button>
		</view>
		<toast ref="toast"></toast>
		<login ref="login" @signIn="signIn" @phoneSuccess="phoneSuccess"></login>

		<u-tabbar :bg-color="tabbar.bgColor" :icon-size="tabbar.iconSize" :height="100" :border-top="tabbar.borderTop"
			:inactive-color="tabbar.inactiveColor" :active-color="tabbar.activeColor" :list="tabbar.list">
		</u-tabbar>
	</view>
</template>
<script>
	import {
		tabbar
	} from "@/assets/http/tabbar.js"
	import config from '../../assets/http/config.js'
	export default {
		data() {
			return {
				//tabbar
				tabbar: {},

				userId: '',
				userData: {},
				userHeatAndPoint: {},
				//更换主题
				themeChecked: true,
				iconList: [{
						name: '我的兑换',
						icon: '/static/mine/duihuan.png',
						url: '/pages/mine/order/order',
						auth: true, //是否登录验证
						show: true
					},
					{
						name: '我的作品',
						icon: '/static/mine/publish.png',
						url: '/pages/mine/my-product/my-product',
						auth: true, //是否登录验证
						show: true
					},
					{
						name: '我的助力',
						icon: '/static/mine/zhuli.png',
						url: '/pages/mine/my-help/my-help',
						auth: true, //是否登录验证
						show: true
					},
					{
						name: '分割线',
						icon: '',
						url: '',
						auth: false, //是否登录验证
						show: true
					},
					{
						name: '更多活动',
						icon: '/static/mine/huodong.png',
						url: '/pages/activity/list',
						auth: false, //是否登录验证
						show: true
					},
					{
						name: '积分兑换规则',
						icon: '/static/mine/guize.png',
						url: '/pages/introduce/notice?title=积分规则',
						auth: false,
						show: false
					},
					{
						name: '联系我们',
						icon: '/static/mine/kefu.png',
						url: 'kefu',
						auth: false, //是否登录验证
						show: true
					},
					{
						name: '更换主题',
						icon: '/static/mine/theme.png',
						url: 'theme',
						auth: false,
						show: false
					},
					{
						name: '设置',
						icon: '/static/mine/mine-setting.png',
						url: '/pages/mine/setting/setting',
						auth: false,
						show: true
					},
				],
			}
		},
		onLoad() {
			this.fetchTabbar()
			// #ifdef MP-WEIXIN
			uni.hideShareMenu()
			// #endif
		},
		methods: {
			/**
			 * 更换主题
			 */
			async fetchTabbar() {
				this.tabbar = tabbar
				if (this.vuex_theme.bgColor) {
					this.tabbar.activeColor = this.vuex_theme.bgColor
				} else {
					this.tabbar.activeColor = this.$config.themeRed.theme.bgColor
				}
			},
			init() {
				this.fetchUserInfo()
				this.fetchHeatValueAndPoint()
			},
			jump(url, auth) {
				if (url == 'kefu') {
					this.$dialog.showModal('是否添加客服微信？', true, this.vuex_theme.bgColor).then(res => {
						this.$util.copy('guoxinshuzi')
					})
					return
				}
				if (url == '/pages/shop/shop') {
					uni.switchTab({
						url
					})
					return
				}
				if (auth && this.$isEmpty(this.vuex_userId)) {
					this.showLogin()
					return
				}
				uni.navigateTo({
					url
				})
			},
			async fetchUserInfo() {
				let params = {
					id: this.vuex_userId
				}
				let res = await this.$api.loginUser.detail(params)
				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)
				} else {
					this.$cache.clear()
					this.$u.vuex('vuex_userId', null)
					this.$u.vuex('vuex_phone', null)
					this.showLogin()
				}
			},
			fetchHeatValueAndPoint() {
				if (!this.vuex_phone) {
					return
				}
				let params = {
					phone: this.vuex_phone
				}
				this.$api.loginUser.userHeatValueAndPufaPoint(params).then(res => {
					this.userHeatAndPoint = res.data.data
				})
			},
			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>