first/pages/menu/My/index.vue

<template>
	<view class="content">
		<view class="my-head">
			<view class="my-info">
				<view class="my-a">
					<view class="my-img">
						<!-- <img :src=`http://openweathermap.org/img/w/${item.weather[0].icon}.png`> -->
						<image :src="'https://apitest.luck-work.com/'+MyInfo.headImgPath" mode=""></image>
					</view>
					<view class="my-nameid">
						<view class="my-name">
							{{MyInfo.nickname}}
						</view>
						<text class="my-id">
							ID: {{MyInfo.userId}}
						</text>
						<text class="my-id">
							Sex: 
							<text v-if="MyInfo.sex==-1">unknown</text>
							<text v-if="MyInfo.sex==1">male</text>
							<text v-if="MyInfo.sex==2">female</text>
						</text>
					</view>
				</view>
				<view class="my-b">
					<view class="my-tel">
						Mobile: +{{areaCode}} {{MyInfo.mobile}}
					</view>
					<view class="my-bal flex">
						<view>Available Balance: {{currentBalance}}</view>
						<!-- <view class="my-ap">
						A+ Plan
					</view> -->
					</view>
				</view>
				<view class="my-c flex">
					<view class="my-btn1" @click="goRecharge()">
						recharge
					</view>
					<view class="my-btn2" @click="goWithdraw">
						Withdraw
					</view>
				</view>
			</view>

		</view>

		<view class="my-bg">
			<view class="my-body">
				<view class="my-body-item" v-for="(item,index) in myAList" :key="item.id" @click="go(item.id)">
					{{item.text}}
				</view>

			</view>
			<view class="my-body-out" @click="logout">
				logout
			</view>
			<cont></cont>

		</view>

		<u-mask :show="transferCode==mCode" :z-index="888"></u-mask>
		<view class="tc" v-show="transferCode==1">
			<view class="title">
				change name
			</view>
			<view class="tc_body">
				<view class="body_item ">
					<input type="text" value="" placeholder="New user name"
						placeholder-style="color: #BFC2CC;font-size:14px;text-transform: capitalize;padding-left:24rpx"
						v-model="newName" />
				</view>
			</view>
			<view class="anniu_con flex">
				<view class="cancel" @click="transferCode=0">
					cancel
				</view>
				<view class="cancel pupler" @click="changeName()">
					confirm
				</view>
			</view>
		</view>

<!-- 修改性别 -->
		<view class="tc" v-show="transferCode==2">
			<view class="title">
				change sex
			</view>
			<view class="tc_body">
					<u-radio-group v-model="newSex">
							<u-radio 
								v-for="(item, index) in list" :key="index" 
								:name="item.value"
								:disabled="item.disabled"
							>
								{{item.name}}
							</u-radio>
						</u-radio-group>
			</view>
			<view class="anniu_con flex">
				<view class="cancel" @click="transferCode=0">
					cancel
				</view>
				<view class="cancel pupler" @click="changeSex()">
					confirm
				</view>
			</view>
		</view>




	</view>
</template>

<script>
	import api from '@/utils/api'
	import utils from '@/utils'
	import cont from "@/components/cont/cont.vue"
	export default {
		data() {
			return {
				// 动态显示mask
				mCode:-1,
					list: [
								{
									name: 'male',
									value:1,
									disabled: false
								},
								{
									name: 'female',
									value:2,
									disabled: false
								},
							],
				newName: '',
				newSex: '1',
				MyInfo: {},
				transferCode: 0,
				currentBalance: '',
				areaCode: '',
				androidUrl: '',
				myAList: [{
						id: '3',
						text: 'Change Nick Name'
					},
					{
						id:'0',
						text:'Change Sex'
					},
					{
						id: '1',
						text: 'Bank card'
					},
					{
						id: '2',
						text: 'Address'
					},
					{
						id: '4',
						text: 'Reset password'
					},
					{
						id: '5',
						text: 'Android download'
					},
				],
			}
		},

		onLoad() {
			this.areaCode = uni.getStorageSync('siteInfo').areaCode;
			this.androidUrl = uni.getStorageSync('siteInfo').androidUrl;
			this.currentBalance = uni.getStorageSync('currentBalance');
			this.currencySymbol = uni.getStorageSync('siteInfo').currencySymbol;
			const post = api.userInfo({
				"ticket": uni.getStorageSync('logInfo').data,
			})
			post.then(res => {
					this.MyInfo = res.data;
					console.log(this.MyInfo, 9990);
					uni.setStorage({
						key: 'MyInfo',
						data: res.data,
						success: function() {
							console.log('success')
						}
					});
					console.log(res.data)
				})
				.catch(e => {
					uni.showToast({
						title: e,
						icon: 'none',
						duration: 2500
					})
				})
		},
		methods: {
			radioChange(){
				  console.log(this.newSex,33333)
			},
			// 前往不同页面
			go(i) {
				if (i == 3) {
					this.transferCode = 1
					this.mCode=1
				}
				if (i == 0) {
					this.transferCode = 2
					this.mCode=2
				}
				if (i == 4) {
					uni.navigateTo({
						url: '../../login/resetPassword/index'
					})
				}
				if (i == 2) {
					uni.navigateTo({
						url: '../bankCard/addAddress/index'
					})
				}
				if (i == 1) {
					uni.navigateTo({
						url: '../bankCard/index'
					})
				}
				if (i == 5) {
					console.log(this.androidUrl)
					// #ifdef H5
					window.location.href = this.androidUrl;
					// #endif
					// #ifdef APP-PLUS
					plus.runtime.openURL(this.androidUrl);
					// #endif

				}
			},
			changeName() {
				uni.showLoading({
					title: "loading"
				})
				if (this.newName == '') {
					uni.showToast({
						title: 'The new user name cannot be empty',
						icon: 'none',
						duration: 1500
					})
					return;
				}
				const post = api.updateNickname({
					"ticket": uni.getStorageSync('logInfo').data,
					"nickname": this.newName,
				})
				post.then(res => {
						if (res.success == true) {
							uni.showToast({
								title: 'Modified successfully',
								icon: 'success',
								duration: 1500
							})
							setTimeout(function() {
								location.reload();
							}, 1000)
						} else {
							uni.showToast({
								title: 'Modification failed',
								icon: 'none',
								duration: 1500
							})
						}
					})
					.catch(e => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 2500
						})
					})

			},
			
			
			changeSex() {
				console.log(this.newSex)
				uni.showLoading({
					title: "loading"
				})
				const post = api.updateGender({
					"ticket": uni.getStorageSync('logInfo').data,
					"gender": this.newSex,
				})
				post.then(res => {
						if (res.success == true) {
							uni.showToast({
								title: 'Modified successfully',
								icon: 'success',
								duration: 1500
							})
							setTimeout(function() {
								location.reload();
							}, 1000)
						} else {
							uni.showToast({
								title: 'Modification failed',
								icon: 'none',
								duration: 1500
							})
						}
					})
					.catch(e => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 2500
						})
					})
			
			},
			goRecharge() {
				uni.navigateTo({
					url: '../recharge/index'
				})
			},
			goWithdraw() {
				uni.navigateTo({
					url: '../withdrawl/index'
				})
			},
			logout() {
				const param = {
					"ticket": uni.getStorageSync('logInfo').data,
				}
				const post = api.loginOut(param)
				post.then(res => {

						uni.showLoading({
							title: 'loading'
						})
						if (res.success == true) {
							uni.showToast({
								title: 'Log out successfully',
								icon: 'success',
								duration: 1500
							})
							uni.removeStorageSync('logInfo');
							uni.removeStorageSync('ticket')
							setTimeout(function() {
								uni.navigateTo({
									url: '../../login/index'
								})
							}, 2000)


						} else {
							uni.showToast({
								title: 'Exit failed',
								icon: 'none',
								duration: 1500
							})
						}
						console.log(res.data, 9990);

					})
					.catch(e => {
						console.log(e)
					})

			}

		},
	}
</script>

<style>
	@import './index.css';
</style>