uav-uniapp-240725/components/center/center.vue

<template>
	<u-popup :show="show" mode="left" width="70%" bgColor="#000" @close="$emit('close')" @open="open">
		
		<view style="justify-content: center;display: flex;width: 600rpx;" v-if="loading">
			<u-loading-icon
			mode="semicircle"
			size="30"></u-loading-icon>
		</view>
		
		<view class="center" v-if="!loading">
			
			<view class="line" style="margin-top: 30rpx;
			position: relative;">
				<view style="position: absolute;left: 20rpx;"
				@click="$emit('close')">
					x
				</view>
				<view class="">
					<img src="/static/center/20.png" width="120rpx" />
				</view>
			</view>
			<view class="line">
				<img src="/static/center/5.png" width="80rpx" />
			</view>
			<view style="font-size: 22rpx;font-weight: bold;" class="line">{{ userInfo.account }}</view>
			<view class="line">
				<view style="background-color: #6c7a25;padding: 5rpx 20rpx;">
					{{ $t('page.center.invtantion_code') }}:{{ userInfo.invitationCode }}
				</view>
				<view style="margin-left: 20rpx;" @click="copy(userInfo.invitationCode)">
					<img src="/static/center/2.png" width="23rpx" />
				</view>
			</view>
			<view class="line">
				<view style="color: #afc056;padding: 0 10rpx;font-size: 22rpx;font-weight: 600;">
					{{ $t('page.center.cradibiliy_value') }}：
				</view>
				<view style="flex: 1;padding-right: 20rpx;">
					<u-line-progress 
					:percentage="userInfo.contribution" 
					activeColor="#afc638" height="16"></u-line-progress>
				</view>
			<!-- 	<view style="flex: 1;">
					<view style="background-color: #afc056;
					text-align:center;border-radius: 20rpx;
					margin-right: 20rpx;
					">{{ userInfo.contribution }}%</view>
				</view> -->
			</view>
			<view class="line">
				<view class="box">
					<view style="color: #afc056;font-weight: 900;
					display: flex;justify-content: space-between;font-size: 28rpx;">
						<view class="">
							{{ $t('page.center.account_balance') }}
						</view>
						<view class="">
							USDT {{ userInfo.belece }}
						</view>
					</view>
					<view style="font-size: 22rpx;margin-top: 20rpx;">
						{{ $t('page.center.account_balance_info') }}
					</view>
				</view>
			</view>
			<view class="line">
				<view class="box">
					<view style="color: #afc056;font-weight: 900;
					display: flex;justify-content: space-between;font-size: 28rpx;">
						<view class="">
							{{ $t('page.center.wallet_amount') }}
						</view>
						<view class="">
							USDT {{ userInfo.money }}
						</view>
					</view>
				</view>
			</view>
			<!-- 充值 -->
			<u-cell @click="toPurse" color="#fff" isLink>
				<view slot="icon">
					<img src="/static/center/6.png" width="23rpx" />
				</view>
				<view slot="title" style="color: #eee;padding: 20rpx 0;">
					{{ $t('page.center.deposit') }}
				</view>
			</u-cell>
			<!-- 提现 -->
			<u-cell @click="toWithdraw" color="#fff" isLink>
				<view slot="icon">
					<img src="/static/center/7.png" width="23rpx" />
				</view>
				<view slot="title" style="color: #eee;padding: 20rpx 0;">
					{{ $t('page.center.withdraw') }}
				</view>
			</u-cell>
			<!-- 用户信息 -->
			<u-cell @click="toPersonalInfo" color="#fff" isLink>
				<view slot="icon">
					<img src="/static/center/8.png" width="23rpx" />
				</view>
				<view slot="title" style="color: #eee;padding: 20rpx 0;">
					{{ $t('page.center.personal_info') }}
				</view>
			</u-cell>
			<!-- 交易记录 -->
			<u-cell @click="toRunningWater" color="#fff" isLink>
				<view slot="icon">
					<img src="/static/center/9.png" width="23rpx" />
				</view>
				<view slot="title" style="color: #eee;padding: 20rpx 0;">
					{{ $t('page.center.Transaction') }}
				</view>
			</u-cell>
			<!-- 提现地址 -->
			<u-cell @click="revealAddress" color="#fff" isLink>
				<view slot="icon">
					<img src="/static/center/10.png" width="23rpx" />
				</view>
				<view slot="title" style="color: #eee;padding: 20rpx 0;">
					{{ $t('page.center.wallet') }}
				</view>
			</u-cell>
			<!-- 粉丝列表 -->
			<u-cell @click="toInvitationList" color="#fff" isLink>
				<view slot="icon">
					<img src="/static/center/fans.png" width="23rpx" />
				</view>
				<view slot="title" style="color: #eee;padding: 20rpx 0;">
					{{ $t('page.center.fanList') }}
				</view>
			</u-cell>
			<!-- 中奖记录 -->
			<u-cell @click="toWinningRecord" color="#fff" isLink>
				<view slot="icon">
					<img src="/static/center/winning-record.png" width="23rpx" />
				</view>
				<view slot="title" style="color: #eee;padding: 20rpx 0;">
					{{ $t('page.center.winningRecord') }}
				</view>
			</u-cell>
			<!-- 语言 -->
			<u-cell @click="showLanguage = true;$play()" color="#fff" isLink>
				<view slot="icon">
					<img src="/static/center/11.png" width="23rpx" />
				</view>
				<view slot="title" style="color: #eee;padding: 20rpx 0;">
					{{ $t('page.center.language') }}
				</view>
			</u-cell>
			<!-- 客服 -->
			<u-cell @click="revealServiceList" color="#fff" isLink>
				<view slot="icon">
					<img src="/static/center/12.png" width="23rpx" />
				</view>
				<view slot="title" style="color: #eee;padding: 20rpx 0;">
					{{ $t('page.center.customer_serivce') }}
				</view>
			</u-cell>
			<!-- 登录记录 -->
			<u-cell @click="toLoginRecord" color="#fff" isLink>
				<view slot="icon">
					<img src="/static/center/login.png" width="23rpx" />
				</view>
				<view slot="title" style="color: #eee;padding: 20rpx 0;">
					{{ $t('page.center.loginRecord') }}
				</view>
			</u-cell>
			
			<!-- 退出登录 -->
			<u-cell @click="logout" color="#fff" isLink>
				<view slot="icon">
					<img src="/static/center/13.png" width="23rpx" />
				</view>
				<view slot="title" style="color: #eee;padding: 20rpx 0;">
					{{ $t('page.center.logout') }}
				</view>
			</u-cell>
		</view>

		<!-- 填写地址弹框 -->
		<u-popup :show="showAddress" mode="center" bgColor="black" 
		@close="showAddress=false;$play()">
			<view class="address-content">
				<view class="address-top">
					<view class="title">{{ $t('page.center.Tips') }}</view>
					<uni-icons @click="showAddress=false;$play()" 
					class="close-icon" 
					color="#B0C73B" type="close"
						size="40rpx"></uni-icons>
				</view>
				<view class="address-detail">
					<view class="title">{{ $t('page.center.Address') }}:</view>
					<textarea v-model="moneyAddress" 
					:placeholder="$t('page.center.type-address')"></textarea>
				</view>
				<view @click="editMoneyAddress" 
				class="save">{{ $t('page.center.save') }}</view>
			</view>
		</u-popup>
		
		<!-- 选择语言弹框 -->
		<changeLanguage :show.sync="showLanguage" @close="closeLanguage"></changeLanguage>
		
		<!-- 客服列表 -->
		<serviceList :show="showService" :serverList="serverList" @close="closeServiceList"></serviceList>
	</u-popup>
</template>

<script>
	import changeLanguage from '@/components/changeLanguage/changeLanguage.vue'
	import serviceList from '@/components/serviceList/serviceList.vue'
	
	export default {
		name: "center",
		components : { changeLanguage , serviceList },
		data() {
			return {
				list: [{

				}],
				showAddress: false,
				showLanguage : false,
				showService : false,
				serverList : [],
				moneyAddress : '',
				loading : false,
			};
		},
		props : {
			userInfo : {
				type : Object,
				default : function() {
					return {}
				}
			},
			show : {
				type : Boolean,
				default : false
			}
		},
		methods: {
			open() {
				this.forgetPass()
				this.moneyAddress=this.userInfo.moneyAddress
			},

			//显示填写提现地址弹框
			revealAddress() {
				this.$play()
				this.showAddress = true;
			},
			
			//关闭语言选项
			closeLanguage(){
				this.$play()
				this.showLanguage = false;
			},
			
			//跳转充值页面
			toPurse(){
				this.$play()
				uni.navigateTo({
					url: '/pages/purse/purse'
				})
			},
			
			//跳转提现页面
			toWithdraw(){
				this.$play()
				uni.navigateTo({
					url: '/pages/withdraw/withdraw'
				})
			},
			
			//跳转用户信息
			toPersonalInfo(){
				this.$play()
				uni.navigateTo({
					url: '/pages/personalInfo/personalInfo'
				})
			},
			
			//跳转流水页面
			toRunningWater(){
				this.$play()
				uni.navigateTo({
					url: '/pages/runningWater/runningWater'
				})
			},
			
			//显示客服列表
			revealServiceList(){
				this.$play()
				this.showService = true;
			},
			
			//关闭客服列表
			closeServiceList(){
				this.$play()
				this.showService = false;
			},
			
			//退出登录
			logout(){
				this.$play()
				localStorage.removeItem('token')
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			
			//忘记密码(获取客服列表)
			forgetPass(){
				this.request('forgetPass').then(res => {
					if(res.code == 200){
						this.serverList = res.result
					}
				})
			},
			
			//修改钱包地址
			editMoneyAddress(){
				this.$play()
				if(this.userInfo.moneyAddress){
					return uni.showToast({ title: this.$t('page.center.cannotModified'), icon: 'none' })
				}
				this.request('editMoneyAddress',{},{moneyAddress : this.moneyAddress}).then(res => {
					if(res.code == 200){
						this.showAddress = false;
						uni.showToast({ title: this.$t('message.15'), icon: 'none' })
					}
				})
			},
			
			//复制内容
			copy(text){
				this.$play()
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: this.$t('success-operation'),
							icon: 'none',
						})
					}
				})
			},
			
			//跳转粉丝列表
			toInvitationList(){
				this.$play()
				uni.navigateTo({
					url: '/pages/invitationList/invitationList'
				})
			},
			
			//跳转登录记录列表
			toLoginRecord(){
				this.$play()
				uni.navigateTo({
					url: '/pages/loginRecord/loginRecord'
				})
			},
			
			//跳转中奖记录
			toWinningRecord(){
				this.$play()
				uni.navigateTo({
					url: '/pages/winningRecord/winningRecord'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.center {
		width: 600rpx;
		overflow: scroll;
		height: 100vh;

		.line {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 40rpx;
			flex-shrink: 1;

			.box {
				border: 1px solid #777;
				box-sizing: border-box;
				width: 100%;
				padding: 20rpx;
			}
		}
	}

	.address-content {
		box-sizing: border-box;
		border: 1px solid #ccc;
		padding: 15rpx;
		width: 700rpx;

		.address-top {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 10rpx;

			.title {
				font-size: 44rpx;
				color: #afc638;
				font-weight: bold;
			}

			.close-icon {
				position: absolute;
				top: 50%;
				right: 30rpx;
				transform: translateY(-50%);
			}
		}

		.address-detail {
			
			.title {
				color: #afc638;
				margin-bottom: 20rpx;
				font-size: 28rpx;
			}

			textarea {
				border: 1px solid #afc638;
				color: #afc638;
				border-radius: 25rpx;
				height: 150rpx;
				width: 100%;
				text-indent: 1em;
				font-size: 28rpx;
			}

		}
		
		.save{
			display: flex;
			align-items: center;
			justify-content: center;
			background: #afc638;
			height: 80rpx;
			margin: 20rpx auto;
			border-radius: 30rpx;
			color: black;
			font-size: 34rpx;
		}
	}
</style>