maishidaSJ/pages/UserCenter/userInfoView.vue

<template>
	<view>
		<customNav :shownav="false" :title="$t('index.User')" titledetl=""></customNav>
		<view class="contentV">
			<view class="nodetail" @click="userIconsel">
				<view class="viewinrow" >
					<netImage class="userIcon" width="120" height="120" bradius="60" :mysrc="avatar" mymode="scaleToFill"></netImage>
					<!-- <myImage class="userIcon" :isIcon="true" :mysrc="avatar" mymode="scaleToFill"></myImage> -->
					<view class="">
						<view class="viewinrow">
							<image class="vipicon" src="/static/images/VIP@3x.png" mode="widthFix"></image>
							<view class="userName">{{nickName}}</view>
						</view>
						<text class="usernont">{{userName}}</text>
					</view>
				</view>
				<image class="fanhuiimg" src="/static/images/fanhui@3x.png" mode="widthFix"></image>
			</view>
			<view style="height: 80rpx;"></view>
			
		</view>
		<view class="contentInRowS dengjiView" @click="tixian">
			<text class="dengjiText">{{$t('zhanghu.yuer')}}：{{$formPr(ketixianJE)}}{{$t('locale.huobidw')}}</text>
			<view class="contentInRowL" style="align-items: center;margin-right: 30rpx;">
				<text class="dengjiText">{{$t('tixian.tixian')}}</text>
				<image class="jiantouImgS" src="/static/imags/fanhui@3x.png" mode="scaleToFill"></image>
			</view>
		</view>
		<!-- <scrollViewR class="actListView" style="margin-top: 30rpx;padding-top: 10rpx;padding-bottom: 10rpx;" :itemList="actList" v-on:EitemSelect="actIndex"></scrollViewR> -->
		
		<view class="contentColumnC actListView" style="margin-top: 30rpx;padding-top: 10rpx;padding-bottom: 10rpx;">
			<view class="contentInRowS" style="margin-top: 20rpx;">
				<view  v-for="(item,index) in actListA">
					<view class="contentColumnC" style="width: 200rpx;padding-right: 12rpx" @click="itemSelectA(index)">
						<image class="itemImage" :src="item.imagStr" mode="widthFix"></image>
						<text class="itemTitle">{{item.title}}</text>
					</view>
				</view>
			</view>
			<view class="contentInRowS" style="margin-top: 30rpx;">
				<view  v-for="(item,index) in actListB">
					<view class="contentColumnC" style="width: 200rpx;padding-right: 12rpx" @click="itemSelectB(index)">
						<image class="itemImage" :src="item.imagStr" mode="widthFix"></image>
						<text class="itemTitle">{{item.title}}</text>
					</view>
				</view>
			</view>
			<view class="contentInRowS" style="margin-top: 30rpx;">
				<view  v-for="(item,index) in actListC">
					<view class="contentColumnC" style="width: 200rpx;padding-right: 12rpx" @click="itemSelectC(index)">
						<image class="itemImage" :src="item.imagStr" mode="widthFix"></image>
						<text class="itemTitle">{{item.title}}</text>
					</view>
				</view>
				<view>
					<view class="contentColumnC" style="width: 200rpx;padding-right: 12rpx">
					</view>
				</view>
				<view>
					<view class="contentColumnC" style="width: 200rpx;padding-right: 12rpx" >
					</view>
				</view>
			</view>
		</view>
		<view class="contentInRowC" style="margin-top: 80rpx;width: 80%;margin-left: 10%;">
			<text class="zhuceBt" @click="listClick(6)">{{$t('user.tuichudl')}}</text>
		</view>
		
		<view class="contentInRowC" style="margin-top: 40rpx;">
			<text class="sanchuzh" @click="listClick(7)">{{$t('user.zhuxiaozhh')}}</text>
		</view>
		
		<view class="contentInRowC" style="margin-top: 30rpx;">
			<text class="dangqbb">{{$t('user.dangqianbb')}}: v{{appversionN}}</text>
		</view>
		<view style="height: 80rpx;"></view>
	</view>
	
</template>

<script>

import api from "@/pages/api/api.js"
	export default {
	data() {
		return {
			dataList: [{id: "1", name: 'A'}, {id: "2", name: 'B'}, {id: "3", name: 'C'}],
			goods:[],
			actListA:[],
			actListB:[],
			actListC:[],
			token:'',
			login:false,
			userInfo:[],
			phone:'',
			userType:'',
			nickName:'',
			userName:'',
			avatar:'',
			isShangjia:false,
			ketixianJE:0,
			appversionN:'',
		}
	},
	onLoad() {
		var info = uni.getSystemInfoSync();
		this.appversionN=info.appVersion;
		this.actListA=[
			{ imagStr:'/static/msdshj/bangzhu@3x.png', title: this.$t('zhanghu.zhanghumingxi') },
			{ imagStr:'/static/msdshj/yinhangqia.png', title: this.$t('zhanghu.yinhangka') },
			{ imagStr:'/static/msdshj/zaixiankf@3x.png', title: this.$t('index.kefuzhx') },
			
		];
		this.actListB=[
			{ imagStr:'/static/msdshj/yinsizhc@3x.png', title: this.$t('index.xiugaimima') },
			{ imagStr:'/static/msdshj/fuwutiaok@3x.png', title: this.$t('user.fuwutiaok')},
			{ imagStr:'/static/msdshj/yinsizhc@3x.png', title: this.$t('user.yinsizhc')},
			
		];
		this.actListC=[
			{ imagStr:'/static/msdshj/guanyuwomen.png', title: this.$t('user.guanyuwm') },
		];
	},
	onShow() {
		
		var that =this;
		try {//读取
			that.token = uni.getStorageSync("token");
			//console.log('2222',that.token)
			if(that.token == '' || that.token == undefined || that.token == null){
				that.login=false;
				that.phone='';
				that.nickName='';
				that.userName='';
				that.avatar='';
				return;
			}
			else{
				that.login=true;
				that.getUserMsg(that.token);
				that.getUsbalance();
				return;
			}
		} catch(e){//错误
			return;
		}
	},
	
	methods: {
		
		tixian(){
			
			if(!this.login){
				uni.navigateTo({
					url:'/pages/UserCenter/LoginView'
				})
				return;
			}
			
			uni.navigateTo({
				url:'/pages/tixian/Tixian'
			})
		},
		
		
		itemSelectA(index){
			if(index==0){
				this.gotoNextView('/pages/tixian/Zhanghumingxi')
			}
			if(index==1){
				this.gotoNextView('/pages/tixian/Wodeyanhangka?state=0')
			}
			if(index==2){
				var that = this;
				uni.showModal({
					title: that.$t('api.message'),
					content: that.$t('api.nqdbddh'),
					cancelText: that.$t('order.quxiao'), // 取消按钮的文字
					confirmText: that.$t('comp.queren'), // 确认按钮的文字 
					success: function (res) {
						if (res.confirm) { //这里是点击了确定以
							plus.device.dial('0938088913', false );
						} else { //这里是点击了取消以后
						  console.log('用户点击取消')
						}
					}
				})
				return;
			}
		},
		itemSelectB(index){
			if(index==0){
				this.listClick(5);
			}
			if(index==1){
				this.openWebView(2)
			}
			if(index==2){
				this.listClick(8)
			}
		},
		itemSelectC(index){
			if(index==0){
				this.openWebView(5)
			}
			
		},
		
		gotoNextView(url){
			if(this.login){
				uni.navigateTo({
					url:url
				})
			}
			else{
				uni.navigateTo({
					url:'/pages/UserCenter/LoginView'
				})
			}
		},
		listClick(e){
			
			switch(e){
				case 1:
				
				break;
				case 2:
				break;
				case 3:
				uni.navigateTo({
					url:'/pages/kefuzhongxin/fuwuleixing'
				})
				break;
				case 4://语言
				uni.navigateTo({
					url:'/pages/UserCenter/yonghushezhi/duoyuyan'
				})
				break;
				case 5://修改密码
				if(this.login){
					this.xiugaimima();
				}
				else{
					uni.navigateTo({
						url:'/pages/UserCenter/LoginView'
					})
				}
				
				break;
				case 6://退出登录
				 if(this.login){
					this.tuichudengl();
				 }
				 else{
					uni.navigateTo({
						url:'/pages/UserCenter/LoginView'
					})
				 }
				break;
				case 7://删除注销账号
				if(this.login){
					this.deleuser();
				}
				else{
					uni.navigateTo({
						url:'/pages/UserCenter/LoginView'
					})
				}
				break;
				case 8:
				uni.navigateTo({
					url:'/pages/index/mindex/yinszhengc'
				})
				break;
			}
		},
		userIconsel(){
			if(this.login){
				//用户信息编辑页
				uni.navigateTo({
					url:'/pages/UserCenter/userMsgMenager'
				})
			}else{
				uni.navigateTo({
					url:'/pages/UserCenter/LoginView'
				})
			}
		},
		xiugaimima(){
			uni.navigateTo({
				url:'/pages/UserCenter/yonghushezhi/Shezhixiugai?state='+1
			})
		},
		tuichudengl(){
			var that = this;
			uni.showModal({
				cancelText: that.$t('order.quxiao'), // 取消按钮的文字
				confirmText: that.$t('comp.queren'), // 确认按钮的文字 
				title: that.$t('api.message'),
				content: that.$t('user.querentcdq'),
				success: function (res) {
					if (res.confirm) { //这里是点击了确定以后
						uni.setStorageSync('userInfo','');
						uni.setStorageSync('token','');
						uni.navigateTo({
							url:'/pages/UserCenter/LoginView'
						})
					} else { //这里是点击了取消以后
					  console.log('用户点击取消')
					}
					
				}
			})
		},
		// async pushMsg(token){//消息推送
		// 	await this.$http.get(`${pushMsg}`, {
		// 			cid:'',
		// 			title:'qqqqqq',
		// 			content:'aaaaaaaa'
		// 		},false)
		// 	.then(async r => {
		// 		console.log(r)
		// 		})
		// 	.catch(err => {
		// 		console.log(err)
		// 		})
		// },
		
		getUserMsg(token){
			var that = this;
			api('getUserMsg',{},
			res=>{
				console.log(res)
				this.userInfo=res.data.data;
				this.phone=res.data.data.phone;
				this.nickName=res.data.data.nickName;
				this.userName=res.data.data.userName;
				
				this.avatar=res.data.data.avatar;
				//console.log('this.avatar',this.avatar)
				let items = JSON.stringify(res.data.data);
				uni.setStorageSync('userInfo',items);
				if(res.data.data.userType==1){
					this.isShangjia=true;
				}
			},failc=>{
				//console.log('getadvertis----',failc)
				
			});
			
		},
		
		
		getUsbalance(){
			//console.log('getUsbalance')
			api('getUsbalance',{
				type:'',
				page:1,
				size:10,
				sort:true
			},
			res=>{
				console.log(res)
				this.ketixianJE=res.data.data.sum;
			},failc=>{
				//console.log('getadvertis----',failc)
				
			});
			
		},
		deleuser(){
			var that = this;
			uni.showModal({
				cancelText: that.$t('order.quxiao'), // 取消按钮的文字
				confirmText: that.$t('comp.queren'), // 确认按钮的文字 
				title: that.$t('api.message'),
				content: that.$t('user.zhuxiaodqzh'),
				success: function (res) {
					if (res.confirm) { //这里是点击了确定以后
						that.updatazuxiao();
					} else { //这里是点击了取消以后
					  console.log('用户点击取消')
					}
					
				}
			})
		},
		updatazuxiao(){
			api('deleuser',{},
			res=>{
				console.log(res)
				uni.setStorageSync('userInfo','');
				uni.setStorageSync('token','');
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},failc=>{
				//console.log('getadvertis----',failc)
				
			});
		},
		openWebView(index){
			var url=''
			if(index==1){
				url='https://cityexpress168.com.vn/bao-mat-thong-tin'
			}
			if(index==2){
				url='https://cityexpress168.com.vn/dieu-khoan-su-dung'
			}
			if(index==3){
				url='https://cityexpress168.com.vn/quy-che-hoat-dong'
			}
			if(index==4){
				url='https://cityexpress168.com.vn/quy-trinh-giai-quyet-tranh-chap-khieu-nai'
			}
			if(index==5){
				url='https://cityexpress168.com.vn/dia-chi-cong-ty'
			}
			uni.navigateTo({
				url:'/pages/index/Openwebview?url='+url
			})
		},
	}
}
</script>

<style>
	page{
		background-color: #F2F3F7;
	}
	.contentV{
		width: 100%;
		background-color: #40AE36;
	}
	.viewinrow{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.nodetail{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		background-color: #40AE36;
		padding: 20rpx;
	}
	.userIcon{
		margin: 20rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		background-color: white;
	}
	.vipicon{
		width: 30rpx;
	}
	.userName{
		font-size: 30rpx;
		padding-left: 16rpx;
		color: white;
	}
	
	.nameText{
		font-size: 32rpx;
		color: white;
	}
	.titleText{
		color: white;
		font-size: 26rpx;
	}
	.usernont{
		font-size: 26rpx;
		color: white;
		padding-left: 16rpx;
	}

	.usernameCt{
		padding-left: 10rpx;
		text-align: left;
		font-size: 22rpx;
		line-height: 32rpx;
	}
	.fanhuiimg{
		width: 30rpx;
		height: 30rpx;
		margin-right: 50rpx;
		
	}
	.huiyuanxct{
		margin-top: 30rpx;
		width: 94%;
		margin-left: 3%;
	}
	
	.actBTVshang{
		width: 70%;
		padding-left: 15%;
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		align-items: center;
		background-color: #40AE36;	
	}
	
	.actBTV{
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		align-items: center;
		background-color: #40AE36;	
	}
	
	.actBTVn{
		margin-left: 3%;
		width: 94%;
		display: flex;
		flex-direction: row;
		justify-content:space-between;
		align-items: center;
		background-color: white;	
		border-radius: 10rpx;
		box-shadow: -2rpx 2rpx 5rpx lightgrey;
	}
	
	.actbt{
		width: 20%;
		height: 140rpx;
		margin-top: 10rpx;
		align-items: center;
		justify-content: center;
	}
	.bticon{
		width: 80rpx;
	}
	.bticonb{
		width: 70rpx;
	}
	.acttext{
		font-size: 24rpx;
		color: white;
		text-align: center;
	}
	.acttextw{
		font-size: 24rpx;
		color: black;
		text-align: center;
	}
	
	.dangdanrukouT{
		height: 62rpx;
		background-color: #40AE36;
	}
	.dingdantext{
		width: 100%;
		font-size: 30rpx;
		padding-left: 20rpx;
		padding-top: 20rpx;
		background-color: white;
	}
	.ddactbt{
		width: 20%;
		height: 120rpx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	
	}
	.ddbticon{
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.ddtext{
		text-align: center;
		font-size: 20rpx;
		color: black;
	}
	
	.listcontent{
		margin-top: 30rpx;
		margin-left: 3%;
		width: 94%;
		display: flex;
		box-shadow: -4rpx 6rpx 2rpx lightgrey;
	}
	
	.dengjiView{
		margin-top: -50rpx;
		width: 94%;
		margin-left: 3%;
		height: 100rpx;
		align-items: center;
		//background-color: #616A89;
		background-image: url('/static/images/huituceng@3x.png');
		background-size: 100% 100%;
	}
	
	.dengjiText{
		color: white;
		font-size: 28rpx;
		padding-left: 30rpx;
	}
	.jiantouImgS{
		width: 30rpx;
		height: 30rpx;
	}
	.actListView{
		width: 92%;
		margin-left: 4%;
		border-radius: 10rpx;
		box-shadow: 0px 0rpx 10rpx 0rpx darkgray;
		background-color: white;
	}
	.dangqbb{
		padding-top: 10rpx;
		font-size: 28rpx;
	}
	
	
	.itemImage{
		width: 50rpx;
	}
	.itemTitle{
		font-size: 26rpx;
		color: #1A1A1A;
		text-align: center;
		line-height: 36rpx;
	}
	
	.zhuceBt{
		margin-top: 30rpx;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		padding: 10rpx;
		border-radius: 20rpx;
		border: solid #40AE36;
		border-width: 0px 0px 6rpx 0px;
		text-align: center;
		justify-content: center;
		background-color: #40AE36;
		color: white;
		box-shadow: 0rpx 0rpx 10rpx 0rpx #40AE36;
	}
	
	.sanchuzh{
		width:80%;
		text-align: center;
		font-size: 36rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: white;
		background-color:crimson;
		border-radius: 10rpx;
	}

</style>