uav-uniapp-demo-24-8-18/pages/center/center.vue

<template>
	<view class="user-center">
		<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="logo">
					Tiktok
				</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: #000;padding: 5rpx 20rpx;color: #fff;">
					{{ $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: #000;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="#000"
						height="16"></u-line-progress>
				</view>
				<!-- 	<view style="flex: 1;">
						<view style="background-color: #000;
						text-align:center;border-radius: 20rpx;
						margin-right: 20rpx;
						">{{ userInfo.contribution }}%</view>
					</view> -->
			</view>
			<view class="line">
				<view class="box">
					<view style="color: #000;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: #000;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: #000;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: #000;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: #000;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: #000;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: #000;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: #000;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: #000;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: #000;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: #000;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: #000;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: #000;padding: 20rpx 0;">
					{{ $t('page.center.logout') }}
				</view>
			</u-cell>
		</view>

		<!-- 填写地址弹框 -->
		<u-popup :show="showAddress" mode="center" bgColor="fff" @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>

		<sTabbar select="4" />

		<!-- 选择语言弹框 -->
		<changeLanguage :show.sync="showLanguage" @close="closeLanguage"></changeLanguage>

		<!-- 客服列表 -->
		<serviceList :show="showService" :serverList="serverList" @close="closeServiceList"></serviceList>
	</view>
</template>

<script>
	import changeLanguage from '@/components/changeLanguage/changeLanguage.vue'
	import serviceList from '@/components/serviceList/serviceList.vue'
	import sTabbar from '@/components/base/tabBar.vue'

	export default {
		name: "center",
		components: {
			changeLanguage,
			serviceList,
			sTabbar
		},
		data() {
			return {
				list: [{

				}],
				showAddress: false,
				showLanguage: false,
				showService: false,
				serverList: [],
				moneyAddress: '',
				loading: false,
				userInfo: {}
			};
		},
		onShow() {
			this.getUserInfo()
			this.forgetPass()
		},
		methods: {
			// open() {
			// 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'
				})
			},

			//获取用户信息
			getUserInfo() {
				this.request('userInfo').then(res => {
					if (res.code == 200) {
						this.userInfo = res.result.userInfo
						this.vipInfo = res.result.vip
						this.moneyAddress = this.userInfo.moneyAddress
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.user-center {
		padding-bottom: 120rpx;
		.center {
			overflow: scroll;

			.logo {
				color: uni-bg-color-app;
				font-weight: bold;
				font-size: 32rpx;
			}

			.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: $uni-text-color;
					font-weight: bold;
				}

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

			.address-detail {

				.title {
					color: $uni-text-color;
					margin-bottom: 20rpx;
					font-size: 28rpx;
				}

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

			}

			.save {
				display: flex;
				align-items: center;
				justify-content: center;
				background: $uni-bg-color-app;
				color: $uni-text-color-inverse !important;
				height: 80rpx;
				margin: 20rpx auto;
				border-radius: 30rpx;
				color: black;
				font-size: 34rpx;
			}
		}
	}
</style>