187 lines
4.4 KiB
Vue
187 lines
4.4 KiB
Vue
<template>
|
|
<view class="set">
|
|
<view
|
|
class="list-cell b-b"
|
|
:class="{ 'm-t': item.class === 'mT' }"
|
|
v-for="item in setList"
|
|
:key="item.title"
|
|
@tap="navTo(item.url)"
|
|
hover-class="cell-hover"
|
|
:hover-stay-time="50"
|
|
>
|
|
<text class="cell-tit">{{ item.title }}</text>
|
|
<text class="cell-tip">{{ item.content }}</text>
|
|
<text class="cell-more iconfont iconyou"></text>
|
|
</view>
|
|
<!-- #ifdef APP-PLUS -->
|
|
<view class="list-cell m-t">
|
|
<text class="cell-tit">消息推送</text>
|
|
<switch :checked="notifyChecked" :color="themeColor.color" />
|
|
</view>
|
|
<!-- #endif -->
|
|
<view class="cu-list menu sm-border card-menu" v-if="styleUserIsOpen">
|
|
<view class="cu-item">
|
|
<view class="content flex align-center">
|
|
<text
|
|
class="cuIcon-colorlens"
|
|
:class="'text-' + themeColor.name"
|
|
></text>
|
|
<view
|
|
class="padding solid radius shadow-blur"
|
|
:class="'bg-' + themeColor.name"
|
|
></view>
|
|
<view class="title"
|
|
>主题色:<text :class="'text-' + themeColor.name">{{
|
|
themeColor.title
|
|
}}</text></view
|
|
>
|
|
</view>
|
|
<view class="action">
|
|
<button
|
|
class="cu-btn round shadow"
|
|
@click="showColorModal"
|
|
:class="'bg-' + themeColor.name"
|
|
>
|
|
<text class="cuIcon-colorlens"></text> 选择主题
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
class="list-cell log-out-btn"
|
|
:class="'text-' + themeColor.name"
|
|
@tap="toLogout"
|
|
>
|
|
<text class="cell-tit">退出登录</text>
|
|
</view>
|
|
<!-- modal -->
|
|
<!-- 选择颜色模态框 -->
|
|
<view class="cu-modal" :class="{ show: colorModal }">
|
|
<view class="cu-dialog">
|
|
<view class="cu-bar justify-end solid-bottom">
|
|
<view class="content">选择颜色</view>
|
|
<view class="action" @tap="colorModal = false">
|
|
<text class="cuIcon-close text-red"></text>
|
|
</view>
|
|
</view>
|
|
<view class="grid col-5 padding">
|
|
<view
|
|
class="padding-xs"
|
|
v-for="(item, index) in themeList"
|
|
:key="index"
|
|
@tap="SetColor(item)"
|
|
:data-color="item.name"
|
|
>
|
|
<view class="padding-tb radius" :class="'bg-' + item.name">
|
|
{{ item.title }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { logout } from '@/api/login';
|
|
export default {
|
|
data() {
|
|
return {
|
|
isVersionUpgradeShow: false,
|
|
loadProgress: 0,
|
|
CustomBar: this.CustomBar,
|
|
user: {},
|
|
setList: this.$mConstDataConfig.setList,
|
|
styleUserIsOpen: this.$mSettingConfig.styleUserIsOpen,
|
|
notifyChecked: false,
|
|
isNewVersion: false,
|
|
colorModal: false,
|
|
themeList: this.$mConstDataConfig.themeList
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.initData();
|
|
// #ifdef APP-PLUS
|
|
if (uni.getSystemInfoSync().platform === 'ios') {
|
|
this.CustomBar = 0;
|
|
}
|
|
// #endif
|
|
},
|
|
methods: {
|
|
// 初始化数据
|
|
initData() {
|
|
this.user = uni.getStorageSync('userInfo');
|
|
// 缓存大小
|
|
this.setList[5].content = this.user.id;
|
|
// this.setList[5].content = `${uni.getStorageInfoSync().currentSize} kb`;
|
|
// #ifdef APP-PLUS
|
|
// eslint-disable-next-line
|
|
this.setList[8].content = `当前版本 ${plus.runtime.version}`;
|
|
// #endif
|
|
},
|
|
// 通用跳转
|
|
navTo(route) {
|
|
if (!route) return;
|
|
if (route === 'clearCache') {
|
|
uni.showModal({
|
|
content: '确定要清除缓存吗',
|
|
success: e => {
|
|
if (e.confirm) {
|
|
uni.clearStorageSync();
|
|
// this.setList[5].content = '0 kb';
|
|
this.$mStore.commit('login', this.user);
|
|
this.$mHelper.toast('清除缓存成功');
|
|
}
|
|
}
|
|
});
|
|
return;
|
|
} else if (route === 'versionUpgrade') {
|
|
this.isVersionUpgradeShow = true;
|
|
if (this.isNewVersion) {
|
|
this.$mHelper.toast('已经是最新版本');
|
|
}
|
|
return;
|
|
}
|
|
this.$mRouter.push({ route });
|
|
},
|
|
// 退出登录
|
|
toLogout() {
|
|
|
|
uni.showModal({
|
|
content: '确定要退出登录么',
|
|
success: e => {
|
|
if (e.confirm) {
|
|
|
|
uni.reLaunch({
|
|
url: '/pages/profile/profile'
|
|
});
|
|
this.$mStore.commit('logout');
|
|
}
|
|
}
|
|
});
|
|
},
|
|
showColorModal() {
|
|
this.colorModal = true;
|
|
},
|
|
SetColor(item) {
|
|
this.colorModal = false;
|
|
this.themeColor = item;
|
|
this.$mStore.commit('setThemeColor', item);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
page {
|
|
background: $page-color-base;
|
|
}
|
|
.set {
|
|
padding: $spacing-base 0;
|
|
}
|
|
.cu-list.card-menu {
|
|
margin: $spacing-base 0;
|
|
.title {
|
|
margin-left: $spacing-base;
|
|
}
|
|
}
|
|
</style>
|