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">
				<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> -->
			<!-- <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 class="user">
				<view class="image">
					<image src="/static/center/5.png" mode=""></image>
				</view>
				<view class="text">
					<view class="">
						{{ $t('page.center.phone') }} : {{ userInfo.account }}
					</view>
					<view class="">
						{{ $t('page.center.invitationCode') }} : {{ userInfo.invitationCode }}
					</view>
				</view>
			</view>

			<view class="Balance">
				<view class="price">
					<view class="">
						{{ $t('page.center.balance') }}
					</view>
					<view style="font-size: 36rpx;">
						{{ userInfo.belece }}
					</view>
				</view>
				<view class="btn1" @click="toPurse">
					{{ $t('page.center.recharge') }}
				</view>
				<view class="btn2" @click="toWithdraw">
					{{ $t('page.center.withdrawal') }}
				</view>
			</view>

			<view class="grid-box">
				<view class="title">
					{{ $t('page.center.services') }}
				</view>
				<view class="grid">
					<u-grid :border="false">
						<u-grid-item v-for="(item,baseListIndex) in baseList" 
						@click="toPath(item)"
						:key="baseListIndex">
							<img :src="item.image" width="50rpx" />
							<text class="grid-text">{{ $t('page.center.' + item.title) }}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</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'

	export default {
		name: "center",
		components: {
			changeLanguage,
			// serviceList,
		},
		data() {
			return {
				baseList: [
					{
						image : '/static/center/1.png',
						title: 'detailed',
						path : '/runningWater/runningWater',
					},
					{
						image : '/static/center/2.png',
						title: 'wallet',
						path : '/modifyUser/modifyUser?type=2',
					},
					{
						image : '/static/center/3.png',
						title: 'password',
						path : '/modifyUser/modifyUser?type=1',
					},
					{
						image : '/static/center/4.png',
						title: 'payment',
						path : '/modifyUser/modifyUser?type=0',
					},
					{
						image : '/static/center/6.png',
						title: 'rule',
						path : '/instructions/instructions?key=Rule',
					},
					{
						image : '/static/center/7.png',
						title: 'aboutUs',
						path : '/instructions/instructions?key=About',
					},
					{
						image : '/static/center/8.png',
						title: 'logout',
						path : '',
					},
				],
				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'
				})
			},
			
			// 跳转路径
			toPath(item){
				if('logout' == item.title){
					return this.logout()
				}
				
				if(item.path){
					uni.navigateTo({
						url: '/pages' + item.path
					})
				}
			},

			//跳转中奖记录
			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;
		// 		}
		// 	}
		// }

		.center {
			.user {
				display: flex;
				margin: 40rpx 3%;
				height: 170rpx;
				border-radius: 30rpx;
				border: 1px solid #000;
				align-items: center;
				box-sizing: border-box;
				padding-left: 30rpx;
				font-weight: 900;
				font-size: 28rpx;

				.image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					overflow: hidden;
					border: 1px solid #000;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.text {
					padding-left: 20rpx;
				}
			}

			.Balance {
				display: flex;
				margin: 40rpx 3%;
				height: 140rpx;
				border-radius: 30rpx;
				border: 1px solid #000;
				align-items: center;
				box-sizing: border-box;
				padding-left: 30rpx;
				font-weight: 900;
				font-size: 28rpx;
				.price {
					line-height: 45rpx;
				}

				.btn1,
				.btn2 {
					margin-right: 20rpx;
					border: 1px solid #000;
					padding: 15rpx 30rpx;
					border-radius: 10rpx;
				}

				.btn1 {
					margin-left: auto;
					background-color: #000;
					color: #fff;
				}
			}

			.grid-box {
				padding: 40rpx 60rpx;

				.title {
					font-size: 36rpx;
					font-weight: 900;
					margin-bottom: 40rpx;
				}
				.grid-text{
					padding-top: 10rpx;
					padding-bottom: 80rpx;
				}
			}
		}

		.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>