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="     margin-top: -1vh;
    place-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    height: 7vh;
    width: 100vw;
    background-color: #25282A;">
			<image style="height: 3vh;width: 35vw;margin-left: 25vw;"
				src="../../static/images/new/starts/login/backImg2.png"></image>
			<text @click="clickRight()" style="font-size: 15px;font-weight: bold;z-index: 9999;height: 3vh;"><uni-icons
					v-show="!show" style="color: #ffffff;" size="30" type="more-filled"></uni-icons><uni-icons size="30"
					v-show="show" style="color: #57B03D;" type="more-filled"></uni-icons></text>
			<!-- <view >
				<u-popup :show="show" mode="right" customStyle="top:14vh;" :overlayOpacity="0" :closeOnClickOverlay="true" :zIndex="1" ref="showRight" :overlay="false" >
				           
						</u-popup>
			</view> -->
		</view>
		<view style=";margin-top: 0vh;position: relative;" v-if="show">
			<view style="width: 100vw;height: 70vh;background: black;" v-if="aboutShow==false && helpShow==false">
				<scroll-view style="background: linear-gradient(#161616, #000000);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="skipPage(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 />
					<view class="prop-item" @click="skipPage(4)">
						<!-- <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>
				<view style="position: absolute;bottom: 0;left:5px;color: #b8b8bb">Version:1.10</view>
				<view @click="handleToEditInfo" style="position: absolute;bottom: 0 ;right: 5px;color: #b8b8bb">Delete Account</view>
			</view>
			<view v-if="aboutShow==true && show==true && helpShow==false" style="width: 100vw;">
				<scroll-view style="background: linear-gradient(#161616, #000000);font-size: 16px;color: aliceblue;"
					scroll-y="true">
					<!-- 关于我们 -->
					<view class="textMsg">
						
						<view style="font-size: 20px;font-weight:bold; margin-bottom: 3vh;">About Us</view>
						<view style="font-size: 18px;font-weight:bold">Welcome to techtron®</view>
						<view style="color: #d8d8d8;">we combine passion, drive and intellect
						</view><view style="color: #d8d8d8;">with market leading research and
						</view><view style="color: #d8d8d8;;margin-bottom: 2vh;">cutting-edge technology.</view>
						<view style="color: #d8d8d8">We innovate and deliver premium quality
						</view><view style="color: #d8d8d8;">products that excite, inspire and challenge
						</view><view style="color: #d8d8d8;margin-bottom: 2vh;">the sector.</view>
						<view style="font-size: 18px;font-weight:bold;">We are focused on reducing our</view>
						<view style="font-size: 18px;font-weight:bold;">environmental impact, whilst improving</view>
						<view style="font-size: 18px;font-weight:bold;">the Health & Wellbeing of our</view>
						<view style="font-size: 18px;font-weight:bold;margin-bottom: 2vh;">customers.</view>
					
					</view>
				</scroll-view>
			</view>
			<view v-if="helpShow==true&& show==true && aboutShow==false" style="width: 100vw;">
				<scroll-view style="background: linear-gradient(#161616, #000000);font-size: 16px;color: aliceblue;"
					scroll-y="true">
					<!-- 帮助 -->
					<view class="textMsg">
						<view style="margin-bottom: 3vh;font-size: 20px;font-weight:bold;">Help</view>
						<view  style="color: #d8d8d8;">Visit the<span style=" font-weight: 600;color: aliceblue;margin: 0 4px;"> techtron® </span> website
							</view><view style="color: #d8d8d8;">where you will find product user manuals,
							informative blogs, video guides and a
							</view><view style="color: #d8d8d8;">questions and answers section regarding
							</view><view style="color: #d8d8d8;">the most common issues. If you cannot
							</view><view style="color: #d8d8d8;">resolve your problem here, e-mail our
							</view><view style="color: #d8d8d8;">customer services on the techtron® website
							</view><view style="color: #d8d8d8;margin-bottom: 2vh;">customer contact page.</view>
						<view style="font-size: 18px;font-weight:bold;">www.techtron.co</view>
					</view>
				</scroll-view>
			</view>
			
		</view>

		<!-- <u-divider style="margin-top: 15vh;border-width: 5px;"></u-divider> -->
		<view style=";margin-top: 10vh;" v-else>
			<view
				style=";margin-top: 10vh;justify-content: center;align-items: center;justify-content: center;display: grid;align-content: center;justify-items: center;line-height: 50px;">
				<image :src="avatar" class="cu-avatar xl round" mode="widthFix" style="margin-top: 5vh;">
					<!-- <image v-if="avatar" :src="avatar" class="cu-avatar xl round" mode="widthFix"> -->
					<!--</image>
			<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;font-weight: bold;font-size: 15px;">
						{{ name }}
					</view>
			</view>
			<view class="menu-list" style="width: 100vw;line-height: 40px;">
				<u-divider style=";width: 100vw;" />
				<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;"></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;"></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;"></image>
						<view class="menu-text">{{ i18('预约记录')}}</view>
					</view>
				</view>
			</view>
		</view>
		<view
			style="position:fixed;bottom:10px;display: flex;align-items: center;justify-content: center;text-align: center;left:0px;right:0px;">
			<!-- <image style="height: 3vh;width: 35vw;position: absolute;bottom: 13vh;left: 32.5vw;" src="../../static/images/new/starts/login/backImg2.png"></image> -->
			<view @click="skipPage(0)" style="margin:0px 10px;">
				<image src="@/static/images/new/starts/tabbar/one_off.png"
					style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
			</view>
			<view @click="skipPage(1)" style="margin:0px 10px;">
				<image src="@/static/images/new/starts/tabbar/two_off.png"
					style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
			</view>
			<view @click="skipPage(2)" style="margin:0px 10px;">
				<image src="@/static/images/new/starts/tabbar/three_on.png"
					style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
			</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,
				show: false,
				aboutShow: false,
				helpShow: false
			}
		},
		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: {
			skipPage(type) {
				if (type == 0) {
					uni.reLaunch({
						url: '/pages/index'
					})
				} else if (type == 1) {
					uni.reLaunch({
						url: '/pages/weitiandi/deviceList'
					})
				} else if (type == 2) {
					uni.reLaunch({
						url: '/pages/mine/index'
					})
				} else if (type == 3) {
					//关于我们
					this.aboutShow = true;
				} else if (type == 4) {
					//帮助
					this.helpShow = true
				}
			},
			skip() {
				this.$modal.showToast("功能开发中..");
			},
			handleLogout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						uni.setStorageSync("loginInfo", '');
						this.$tab.reLaunch('/pages/index')
					})
				})
			},
			changeDrawer(event) {
				if (event) {
					// 抽屉打开时的逻辑

					this.clickRightTag = 1
				} else {
					// 抽屉关闭时的逻辑
					this.clickRightTag = 0
				}
			},
			//自定义头右操作函数
			clickRight() {
				//打开抽屉
				this.show = !this.show
				this.aboutShow = false,
					this.helpShow = false
				// 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')
			},
			handleAbout() {
				this.$tab.navigateTo('/pages/weitiandi/device/chargerecord')
			},
		}
	}
</script>

<style lang="scss">
	page {
		// background-color: #000000;
		background-color: #000000;
		background-image: url('../../static/images/new/starts/bg2.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(0, 0, 0, 0.1);
		border-radius: 20px;
		margin: 0 0 0 0;
	}

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

	.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: 10px 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;
	}

	.textMsg {
		      width: 88vw;
		      text-align: center;
		      margin: 10vh auto;
		      line-height: 2.5vh;
	}
</style>