crm-mobile/pages_personal/setting.vue

<template>
  <view class="uni-app">
    <view class="status-bar" />
    <view class="main-container">
      <wk-nav-bar title="设置" />
			
      <view class="container">
        <view class="cell-box">
          <view class="cell">
            <button class="cell-body" @click="handleTo('/pages_personal/resetPwd')">
              <text class="cell-body__label">
                修改登录密码
              </text>
              <text class="wk wk-arrow-right" />
            </button>
          </view>
          <view class="cell">
            <button class="cell-body" @click="handleTo('/pages_personal/navConfig')">
              <text class="cell-body__label">
                底部导航栏设置
              </text>
              <text class="wk wk-arrow-right" />
            </button>
          </view>
        </view>
				
        <view v-if="showDelete" class="cell-box">
          <view class="cell">
            <button class="cell-body" @click="handleCancelAccount">
              <text class="cell-body__label">
                注销账户
              </text>
              <text class="delete-warning">
                请谨慎操作
              </text>
              <text class="wk wk-arrow-right" />
            </button>
          </view>
        </view>
			
        <view class="logout linear-gradient" @click="handleLogout">
          退出登录
        </view>
      </view>
    </view>

    <uni-popup ref="popup" type="dialog">
      <uni-popup-dialog
        :content="dialogMsg"
        :hiden-cancel="hidenCancel"
        :confirm-text="confirmText"
        type="warning"
        @confirm="handleConfirm" />
    </uni-popup>
  </view>
</template>

<script>
  import { logOut } from 'API/login'
  import { mapGetters, mapMutations } from 'vuex'

  export default {
    name: 'Setting',
    data() {
      return {
        dialogMsg: '',
        dialogType: '',
        hidenCancel: false,
        confirmText: '确定'
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'user/userInfo'
      }),
      showDelete() {
        return false
      }
    },
    methods: {
			...mapMutations({
				clearData: 'user/CLEAR_DATA'
			}),
			
      handleTo(path) {
				this.$Router.navigateTo(path)
      },
      /**
       * 退出登录
       */
      handleLogout() {
				this.dialogMsg = '您确定要退出登录吗？'
				this.dialogType = 'logout'
				this.hidenCancel = false
				this.confirmText = '确定'
				this.$refs.popup.open()
      },

      handleCancelAccount() {
				this.dialogMsg = '注销后您的个人数据将会被永久删除，您真的要注销当前登录账号吗？'
				this.dialogType = 'delete'
				this.hidenCancel = false
				this.confirmText = '确定'
				this.$refs.popup.open()
      },
			
			handleConfirm(next) {
				console.log('confirm: ', this.dialogType)
				if (this.dialogType === 'logout') {
					logOut().then(response => {
						next()
						let appid = uni.getStorageSync('appid') || null
						this.clearData()
						if (appid) {
							uni.setStorageSync('appid', appid)
						}
						this.clearCache()
					}).catch(() => {
						next()
						let appid = uni.getStorageSync('appid') || null
						this.clearData()
						if (appid) {
							uni.setStorageSync('appid', appid)
						}
						this.clearCache()
					})
				} else if (this.dialogType === 'delete') {
					this.dialogMsg = '您的账户正在申请注销，30天内请勿登录'
					this.hidenCancel = true
					this.confirmText = '好的，我知道了'
					this.dialogType = ''
				} else {
					next()
					this.clearData()
					this.clearCache()
				}
			},
			
			clearCache() {
				getApp().globalData = {
					imgDict: {},
					selectedValBridge: {},
					auditInfo: {} 
				}
				this.$Router.reLaunch('/pages/login/index')
			}
    }
  }
</script>

<style scoped lang="scss">
  .logout {
    width: 85%;
    height: 90rpx;
    text-align: center;
    font-size: 32rpx;
    line-height: 90rpx;
    color: white;
		border-radius: 45rpx;
    margin: 70rpx auto 0;
  }

  .delete-warning {
    font-size: 28rpx;
    color: #999;
    margin-right: 10rpx;
  }
	
	.main-container {
		.container {
			flex: 1;
			overflow: auto;
			
			.cell-box {
				margin-top: 20rpx;
				.cell {
					width: 100%;
					font-size: 32rpx;
					background-color: white;
					.cell-body {
						border-bottom: 1rpx solid $border-color;
						padding: 26rpx 30rpx;
						@include left;
						.cell-body__label {
							flex: 1;
							color: #666666;
							@include left;
						}
						.wk-arrow-right {
							font-size: 28rpx;
							color: #c8c8cd;
						}
					}
					
					&:last-child {
						.cell-body {
							border: 0 none;
						}
					}
				}
			}
		}
	}
</style>