techtron/pages/mine/index.vue

<template>
	<!-- <view class="mine-container" :style="'background: url('+this.imgUrl+'/index/mingbg.png) no-repeat 100% 100%;height:'+windowHeight+'px;background-position: 0 0;background-size: 100% 100%;'">
      <view style="position: fixed;right: 10px;z-index: 999999;top:30px" @click="changeLocale">
        {{ $t('login.language') }}：{{localeConfig[locale]}}<uni-icons type="gear" size="15"></uni-icons>
      </view> -->
	<view class="mine-container">
		<view style="height: 0vh;place-items: center;display: grid;">
			<image style="height: 3vh;width: 15vh;margin-top: 5vh;top: 3vh;"
				src="../../static/images/new/starts/login/backImg2.png"></image>
			<text @click="clickRight()" style="color: #ffffff;font-size: 15px;margin: 0 0 0 31vh;font-weight: bold;">· · ·</text>
			<view>
				<uni-drawer @change="changeDrawer" width="250" style="top:20vh;height: 24vh" ref="showRight" mode="right"
					:mask-click="true">
					<scroll-view  style="background: linear-gradient(#000000, #5a5a58);font-size: 20px;" scroll-y="true">
						<view class="prop-item" @click="handleLogout()">
							<!-- <view class="prop-item-image">
														<image :src="imgUrl+'/logout.png'" style="width: 30%;height:100%;" />
													</view> -->
							<view class="prop-item-right">{{i18('退出登录')}}</view>
							<view class="prop-item-left">
								<uni-icons type="forward" color="lightgray" size="16"></uni-icons>
							</view>
						</view>
						<u-divider/>
						<view class="prop-item" @click="skip(2)">
							<!-- <view class="prop-item-image">
														<image :src="imgUrl+'/logout.png'" style="width: 30%;height:100%;" />
													</view> -->
							<view class="prop-item-right">{{i18('关于我们')}}</view>
							<view class="prop-item-left">
								<uni-icons type="forward" color="lightgray" size="16"></uni-icons>
							</view>
						</view>
						<u-divider/>
						<view class="prop-item" @click="skip(3)">
							<!-- <view class="prop-item-image">
														<image :src="imgUrl+'/logout.png'" style="width: 30%;height:100%;" />
													</view> -->
							<view class="prop-item-right">{{i18('帮助')}}</view>
							<view class="prop-item-left">
								<uni-icons type="forward" color="lightgray" size="16"></uni-icons>
							</view>
						</view>
						<u-divider/>
					</scroll-view>
				</uni-drawer>
			</view>
		</view>
		<u-divider style="margin-top: 15vh;"></u-divider>
		<view style="margin-top: 5vh;justify-content: center;align-items: center;justify-content: center;display: grid;align-content: center;justify-items: center;line-height: 30px;">
			<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
			</image>
			<view style="font-size: 20px;font-weight: bold;color: #d0d0d0;">
			  {{ name }}
			</view>
			<view >
			 <image style="width: 40rpx;height: 40rpx;" src="../../static/images/new/starts/mine/start_light.png"></image>
			 <image style="width: 40rpx;height: 40rpx;" src="../../static/images/new/starts/mine/start_light.png"></image>
			 <image style="width: 40rpx;height: 40rpx;" src="../../static/images/new/starts/mine/start_light.png"></image>
			 <image style="width: 40rpx;height: 40rpx;" src="../../static/images/new/starts/mine/start_light.png"></image>
			 <image style="width: 40rpx;height: 40rpx;" src="../../static/images/new/starts/mine/start.png"></image>
			</view>
			<view style="color: #d0d0d0;">
			  {{ name }}
			</view>
		</view>
		<u-divider style="color: aqua;"/>
		<view class="menu-list">
		  <view class="list-cell list-cell-arrow" @click="handleToEditInfo">
		    <view class="menu-item-box">
		      <image :src="this.imgUrl+'/mine/symbol.png'" style="width: 18px;height: 18px;margin-right:5px"></image>
		      <view class="menu-text"> {{  i18('账户设置')}}</view>
		    </view>
		  </view>
		  <view class="list-cell list-cell-arrow" @click="handleAbout">
		    <view class="menu-item-box">
		      <image :src="this.imgUrl+'/mine/record.png'" style="width: 18px;height: 18px;margin-right:5px"></image>
		      <view class="menu-text">{{  i18('充电记录')}}</view>
		    </view>
		  </view>
		  <view class="list-cell list-cell-arrow" @click="handleToSetting">
		    <view class="menu-item-box">
		      <image :src="this.imgUrl+'/mine/symbol (1).png'" style="width: 18px;height: 18px;margin-right:5px"></image>
		      <view class="menu-text">{{  i18('预约记录')}}</view>
		    </view>
		  </view>
		  </view>
		<!--顶部个人信息栏-->
		<!-- <view class="header-section">
      <view class="flex padding justify-between">
        <view class="flex align-center">
          <view v-if="!avatar" class="cu-avatar xl round bg-white">
            <view class="iconfont icon-people text-gray icon"></view>
          </view>
          <image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
          </image>
          <view v-if="!name" @click="handleToLogin" class="login-tip">
          {{  i18('点击登录')}}
          </view>
          <view v-if="name" @click="handleToInfo" class="user-info">
            <view class="u_title" style="color: #8E8E8E">
               {{  i18('你好')}}！
            </view>
            <view class="u_title">
              {{ name }}
            </view>
          </view>
        </view>
      </view>
    </view>


      <view class="menu-list">
        <view class="list-cell list-cell-arrow" @click="handleToEditInfo">
          <view class="menu-item-box">
            <image :src="this.imgUrl+'/index/settingicon.png'" style="width: 18px;height: 18px;margin-right:5px"></image>
            <view class="menu-text"> {{  i18('账户设置')}}</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleAbout">
          <view class="menu-item-box">
            <image :src="this.imgUrl+'/index/chargeicon.png'" style="width: 18px;height: 18px;margin-right:5px"></image>
            <view class="menu-text">{{  i18('充电记录')}}</view>
          </view>
        </view>
        <view class="list-cell list-cell-arrow" @click="handleToSetting">
          <view class="menu-item-box">
            <image :src="this.imgUrl+'/index/planicon.png'" style="width: 18px;height: 18px;margin-right:5px"></image>
            <view class="menu-text">{{  i18('预约记录')}}</view>
          </view>
        </view>
      </view> -->
		<u-picker @cancel="cancelLocale" :confirmText="i18('确认')" :cancelText="i18('取消')" :show="showLocale"
			keyName="label" :columns="localeList" @confirm="changeLanguage"></u-picker>

	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import i18 from '@/utils/i18.js'
	export default {
		data() {
			return {
				showLocale: false,
				locale: "",
				localeList: [
					[{
						"label": "简体中文",
						"id": "zh-Hans"
					}, {
						"label": "英文",
						"id": "en"
					}]
				],
				localeConfig: {
					"zh-Hans": "简体中文",
					"en": "英文"
				},
				name: this.$store.state.user.name,
				version: getApp().globalData.config.appInfo.version,
				imgUrl: getApp().globalData.config.imgUrl,
				clickRightTag: 0
			}
		},
		computed: {
			avatar() {
				console.log(JSON.stringify(this.$store.state.user))
				
				if(this.$store.state.user.avatar==null||this.$store.state.user.avatar==''){
					return getApp().globalData.config.imgUrl + "/index/user.png"
				}else{
					return this.$store.state.user.avatar
				}
				
				
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		onLoad() {
			this.setLocale();
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('page.mine')
			})
		},
		methods: {
			handleLogout() {
			  this.$modal.confirm('确定注销并退出系统吗？').then(() => {
			    this.$store.dispatch('LogOut').then(() => {
			      this.$tab.reLaunch('/pages/index')
			    })
			  })
			},
			changeDrawer(event) {
				if (event) {
					// 抽屉打开时的逻辑
					
					this.clickRightTag = 1
				} else {
					// 抽屉关闭时的逻辑
					this.clickRightTag = 0
				}
			},
			//自定义头右操作函数
			clickRight() {
				//打开抽屉
				if (this.clickRightTag == 0) {
					this.$refs.showRight.open();
					this.clickRightTag = 1
				} else {
					this.$refs.showRight.close()
					this.clickRightTag = 0
				}
			},
			cancelLocale() {
				this.showLocale = false;
			},
			changeLanguage(e) {
				this.showLocale = false;
				console.log(e.value[0].id)
				uni.setLocale(e.value[0].id);
			},
			changeLocale() {
				this.showLocale = true;
			},
			setLocale() {
				this.locale = uni.getLocale()
				if (this.locale == "en") {
					this.localeList = [
						[{
							"label": "Chinese",
							"id": "zh-Hans"
						}, {
							"label": "English",
							"id": "en"
						}]
					];
					this.localeConfig = {
						"zh-Hans": "Chinese",
						"en": "English"
					};
				} else if (this.locale == "zh-Hans") {
					this.localeList = [
						[{
							"label": "简体中文",
							"id": "zh-Hans"
						}, {
							"label": "英文",
							"id": "en"
						}]
					];
					this.localeConfig = {
						"zh-Hans": "简体中文",
						"en": "英文"
					};
				}
			},
			i18(text) {
				return i18(text)
			},
			handleToEditInfo() {
				this.$tab.navigateTo('/pages/mine/pwd/index')
			},
			handleToSetting() {
				this.$tab.navigateTo('/pages/weitiandi/device/planrecord')
			},
			handleToLogin() {
				this.$tab.reLaunch('/pages/login')
			},
			handleLogout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/index')
					})
				})
			},
			handleAbout() {
				this.$tab.navigateTo('/pages/weitiandi/device/chargerecord')
			},
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #000000;
		background-image: url('../../static/images/new/starts/bg1.jpg');
		background-size: cover;
		background-repeat: no-repeat;
	}

	.mine-container {
		// width: 100%;
		// height: 102vh;
		

		.header-section {
			padding: 15px 15px 45px 15px;
			color: white;

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
			}

			.cu-avatar {
				border: 2px solid #eaeaea;

				.icon {
					font-size: 40px;
				}
			}

			.user-info {
				margin-left: 15px;

				.u_title {
					font-size: 18px;
					line-height: 30px;
					color: #000000;
				}
			}
		}

		.content-section {
			position: relative;
			top: -50px;

			.mine-actions {
				margin: 15px 15px;
				padding: 20px 0px;
				border-radius: 8px;

				.action-item {
					.icon {
						font-size: 28px;
					}

					.text {
						display: block;
						font-size: 13px;
						margin: 8px 0px;
					}
				}
			}
		}
	}

	.menu-list {

		box-shadow: 0px 2px 24px 0px rgba(54, 54, 54, 0.1);

		border-radius: 20px;
	}

	.list-cell {
		padding: 17px 15px;
		background-color: #555555;
	}

	.menu-text {
		color: #ffffff
	}

	.header {
		position: relative;
		padding-top: 4vh;
	}

	.prop-item {
		position: relative;
		display: flex;
		flex-direction: row;
		height: 40px;
		line-height: 40px;
		margin: 0 20rpx;
	}

	.prop-item-left {
		color: #BCBCBF;
		;
		width: 30%;
		font-size: 14px;
		//margin-left: 36px;
	}

	.prop-item-image {
		width: 15px;
		height: 15px;
		position: absolute;
		left: 2vw;
		top: 0.5vh;
	}

	.prop-item-right {
		position: absolute;
		right: 10rpx;
		top: 5rpx;
		color: #BCBCBF;
	}
</style>