activitys-uniapp/pages/mine/mine.vue

<template>
	<view>
		<view class="container">
			<view class="flex justify-between align-center" style="padding: 40rpx 30rpx;" v-if="isLogin">
				<view class="padding-left">
					<view class="text-black text-bold text-xl padding-bottom-20">
						薯条汉堡
					</view>
					<view class="flex align-center padding-top-sm">
						<view>
							<view class="text-black text-bold">400</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">236</view>
							<view class="text-gray text-sm margin-top-10">积分</view>
						</view>
						<view class="padding-left">
							<button class="cu-btn sm line-black round">
								<text class="cuIcon-post " style="font-size: 26rpx;margin-right: 4rpx;"></text>
								<text v-if="true">修改资料</text>
								<text v-else>完善个人信息</text>
							</button>
						</view>
					</view>
				</view>
				<view class="flex align-center">
					<view class="padding-right">
						<u-avatar src="/static/test/avatar.png" size="120"></u-avatar>
					</view>
				</view>
			</view>
			<view class="text-center padding-sm" v-else>
				<view class="margin-bottom">
					<u-avatar size="120"></u-avatar>
				</view>
				<u-button class="custom-style" shape="circle">授权登录</u-button>
			</view>
			<view class="flex justify-around align-center" style="padding: 10rpx 40rpx 30rpx;">
				<view class="flex">
					<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">
					<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">
			<block v-for="(item, index) in iconList" :key="index">
				<block v-if="item.name == '分割线'">
					<view class="padding-20">
						<u-line color="#F5F5F5"></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>
			</block>
		</view>
	</view>
</template>
<script>
	import config from '../../assets/http/config.js'
	export default {
		data() {
			return {
				userId: '',
				userData: {},
				isLogin: true,
				isAgency: false,
				//更换主题
				themeChecked: true,
				iconList: [{
						name: '我的兑换',
						icon: '/static/mine/duihuan.png',
						url: '',
						show: true
					},
					{
						name: '我的助力',
						icon: '/static/mine/zhuli.png',
						url: '',
					},
					{
						name: '我的作品',
						icon: '/static/mine/zhuli.png',
						url: '',
					},
					{
						name: '分割线',
						icon: '',
						url: ''
					},
					{
						name: '花积分',
						icon: '/static/mine/huajifen.png',
						url: '',
					},
					{
						name: '更多活动',
						icon: '/static/mine/huodong.png',
						url: '',
					},
					{
						name: '活动规则',
						icon: '/static/mine/guize.png',
						url: '',
					},
					{
						name: '更换主题',
						icon: '/static/mine/theme.png',
						url: '',
					},
				],
			}
		},
		methods: {
			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 {
		background-color: #5b3ee7;
		width: 200upx;
		height: 60upx;
		color: #ffffff;
	}
</style>