gas-cylinder-app/pages/mine/system.vue

<template>
	<!-- 系统设置 -->
	<view>
		<u-navbar title="系统设置" autoBack placeholder></u-navbar>
		<view class="card_system">
			<view class="space_between card_mine_option" @click="logOut">
				<view class="option_title">退出登录</view>
				<u-icon name="arrow-right" size="20"></u-icon>
			</view>
			<u-modal :show="logoutShow" showCancelButton :title="title" :content='content' @cancel="cancel"
				@confirm="confirm"></u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logoutShow: false,
				title: '确定退出？',
				content: '退出登录后将无法查看订单，重新登录后即可查看'
			}
		},
		methods: {
			// 退出登录
			logOut() {
				this.logoutShow = true
			},
			// 确定退出登录
			confirm() {
				this.$api.post('/api/logout').then(res => {
					if (res.code == 200) {
						this.$cache.removeToken()
						this.$cache.removeCache('userInfo')
						this.logoutShow = false
						uni.reLaunch({
							url: '/pages/login'
						})
					}
				})
			},
			// 取消
			cancel() {
				this.logoutShow = false
			},
		}
	}
</script>

<style lang="scss">
	.card_system {
		margin: 30rpx 30rpx 30rpx 30rpx;
	}

	.card_mine_option {
		margin: 40rpx 0rpx;
		border-bottom: 2rpx solid #E4E7ED;
		padding-bottom: 30rpx;
	}

	.option_title {
		font-size: 32rpx;
		font-weight: bold;
	}
</style>