question_uniapp/pages/Setting/index.vue

<template>
	<view class="page">
		<uni-nav-bar @clickLeft="goto(1, 1)" left-icon="back"  :border="false" :shadow="false" :fixed="true"
		:title="$t('setIndex.title')" backgroundColor="#fff"></uni-nav-bar>
		
		<view class="cell_list" @click="onPageJump('/pages/Setting/setPin')">
			<view class="cell_left txt">{{this.$t('setIndex.text1')}}</view>
			<view class="cell_right arrow"></view>
		</view>
		<view class="cell_list" @click="onPageJump('/pages/Setting/setPasswork')">
			<view class="cell_left txt">{{this.$t('setIndex.text2')}}</view>
			<view class="cell_right arrow"></view>
		</view>
		<view class="cell_list" @click="onPageJump('/pages/Setting/languages')">
			<view class="cell_left txt">{{this.$t('setIndex.text3')}}</view>
			<view class="cell_right arrow"></view>
		</view>

		<view style="bottom: 0rpx; position: absolute; width:100vw; height: 60rpx; ">
			<button type="primary" @click="open" class="b">{{this.$t('setIndex.text6')}}</button>
		</view>
		
		<uni-popup ref="popup" type="dialog" :is-mask-click="true" background-color="#fff" borderRadius="40rpx">
			<view class="dialog">
				<view class="title">{{$t('setIndex.text5')}}</view>
				<view style="border-bottom: 2rpx solid #ddd; padding-bottom: 40rpx;">{{$t('setIndex.text4')}}</view>
			    <view class="dialog-footer" style="margin: 20rpx;">
				  <view style="width: 50%; float: left; text-align: center;" @click="handleClose">{{$t('buttonCancel')}}</view>
				  <view style="width: 50%; float: left; text-align: center; color: #1D61E7;" @click="logout()">{{$t('buttonConfirm')}}</view>
				  <view style="clear: both;"></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import zPrompt from '@/components/common/prompt';
	import Popup from '@/components/common/popup';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		components: {
			Popup,
			zPrompt
		},
		data() {
			return {
				popupOptions: {
					placeholder: ''
				},
				avatar: '',
				nickname: '',
				phone: "",
				dialogVisible: false
			};
		},
		computed: {
		},
		//第一次加载
		onLoad(e) {
			
		},
		//页面显示
		onShow() {},
		//方法
		methods: {
			...mapMutations(['emptyUserInfo']),
			open(){
				this.$refs.popup.open('dialog');
			},
			goto(url, type) {
			    if (type == 2) {
			        return uni.switchTab({ url: url })
			    }
			    if (type == 1) {
			        return uni.navigateBack({ delta: url });
			    }
			    uni.navigateTo({
			        url: url
			    })
			},
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			onTokenJump(url) {
				this.judgeLogin(() => {
					uni.navigateTo({
						url: url
					});
				});
			},
			logout(){
				this.emptyUserInfo();
				uni.navigateTo({
					url: '/pages/mine/login'
				});
			}
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	body{background-color: #F8F8F8;}
	.page{min-height: 100vh;position: relative; background-color: #F8F8F8;}
	.cell_list {
		padding: 40rpx 30rpx;
		margin: 20rpx 30rpx 0 30rpx;
		border-radius: 8rpx;
		
	}
	.txt{
		font-weight: 500;
		font-size: 32rpx;
		color: #3d3d3d
	}
	.cell_right image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
	}
	.b{
		width: 100%; 
		border-radius: 20rpx; 
		border: 2rpx solid #fff; 
		bottom: 40rpx; 
		background-color: #fff; 
		color:#FF2525; 
		font-weight: bold;
	}
	.dialog{
		width: 80vw; padding: 20rpx 30rpx; border-radius: 40rpx; line-height: 50rpx;
	}
	.dialog .title{
		font-size: 36rpx; font-weight: bold; text-align: center; margin-bottom: 30rpx;
	}
	.dialog .v1{
		font-weight: 600;font-size: 32rpx;color: #1D61E7; float:left;
	}
</style>