veterans_H5/h5_web/pages/setting/setting.vue

<!-- 设置 -->
<template>
	<view class="setting">
		<u-navbar back-text="" title="" back-icon-color="#FFFFFF" :background="{ background: '#3D5D4C' }" :border-bottom="false"></u-navbar>
		<u-cell-group :border="false" :title-style="{'color': '#333333', 'font-size': '24rpx'}">
			<u-cell-item icon="" title="退出登录" @click="	logoutModal = true"/>
			<u-cell-item icon="" title="版本信息" :arrow="false" :value="`当前版本${ config.version }，已更新`"/>
		</u-cell-group>
		<!-- 退出登录提示框 -->
		<u-modal
			v-model="logoutModal"
			width="70%"
			@confirm="logout" 
			content="您确认退出登录吗?"
			:show-cancel-button="true"
		/>
	</view>
</template>

<script>
	export default {
		name: 'Setting',
		data() {
			return {
				// 登出提示框
				logoutModal: false
			}
		},
		methods: {
			/**
			 * 退出登录
			 */
			logout() {
				this.$u.api.logoutApi().then(res => {
					if (res.code === 200) {
						this.$u.vuex('vuex_hasLogin', false);
						this.$u.vuex('vuex_token', '');
						this.$u.vuex('vuex_user', '');
						this.$u.route('/pages/phoneLogin/phoneLogin');
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
					}
				}).catch(() => {
					uni.showToast({
						title: '退出登录失败!',
						icon: 'error'
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.setting {
	padding: 20rpx 30rpx;
}
</style>