<template> <view class="container"> <!-- 门店信息 --> <view class="store" :style="{background: $config('topBarBackground')}"> <view class="storeInfo"> <image :src="personIcon" class="personImg"></image> <view class="storeName"> <view>{{ pageData ? pageData.userNameCN : '-' }}</view> </view> </view> </view> <!-- 列表 --> <view class="list"> <view hover-class="navigator-hover" v-for="(item, index) in list" :key="index" @click="goToInfo(item)" :class="item.type != 'line' ? 'listItem' : 'lineItem'" v-if="item.auth" > <view class="listItemLeft" v-if="item.type != 'line'"> <view class="leftImg"> <u-icon custom-prefix="xd-icon" :name="item.icon" size="45" :color="item.color"></u-icon> </view> <text>{{ item.title }}</text> </view> <view v-if="item.type != 'line'"> <text class="number">{{ item.number }}</text> <text class="banbenhao">{{ item.banbenhao }}</text> <u-icon name="icon-xian-11" custom-prefix="xd-icon" size="32" color="#888888"></u-icon> </view> </view> </view> </view> </template> <script> import { logout } from '@/api/user.js'; import { getSysVersion } from '@/api/data.js' import { checkVersionToLoadUpdate, clzConfirm } from '@/libs/tools'; import market from "@/js_sdk/dc-market/market.js" export default { data() { const curVer = getApp().globalData.version; return { list: [ { title: '个人信息', auth: this.$hasPermissions("M_userInfoView_mobile"), url: '/pages/userCenter/personInfo', icon: 'tarenxundian', color: '#55aaff' }, { title: '修改密码', auth: this.$hasPermissions("M_editUserPws_mobile"), url: '/pages/userCenter/changePwd', icon: 'mimaxiugai', color: '#ff5500' }, { type: 'line', auth: true }, { title: '关于我们', auth: true, url: '/pages/userCenter/aboutUs', icon: 'guanyuwomen1', color: '#00aaff' }, { title: '用户协议及隐私保护政策', auth: true, url: '/pages/login/userAuthYs', icon: 'xieyi1', color: '#07b584' }, { title: '版本检查', auth: true, banbenhao: curVer.version, fun: 'getVersion', icon: 'banben', color: '#ff8c57' }, { type: 'line', auth: true }, { title: '退出登录', auth: true, fun: 'quitOutSys', icon: 'tuichuxitong', color: '#ff0000' } ], pageData: null, // 门店信息 personIcon: '/static/defaultMe.png' // 默认门店图片 }; }, onShow() { this.pageData = this.$store.state.vuex_userData }, methods: { // 拨打电话 call() { console.log('联系公司'); }, // 点击我的页面列表 goToInfo(item) { if (item.url && item.url != '') { uni.navigateTo({ url: item.url }); } if (item.fun) { this[item.fun](); } }, // 退出登录确认弹框 quitOutSys() { const _this = this; clzConfirm({ title: '提示', content: '确定退出登录?', success: function(res) { if (res.confirm || res.index == 0) { _this.quitSys(); } } }); }, // 退出登录,返回登录页 quitSys() { logout().then(res => { console.log(res); uni.showToast({ icon: 'none', title: res.message }); if (res.status == 200) { this.$store.commit("$closeWebsocket") this.$store.state.vuex_token = ''; this.$store.state.vuex_userData = ''; uni.setStorageSync('setStatusIndexFunc', 0); setTimeout(function() { uni.reLaunch({ url: '/pages/login/login' }); }, 1000); } }); }, // 获取最新版本信息 getVersion() { //最新版本 getSysVersion().then(ret => { console.log(JSON.stringify(ret)) if(ret.status == 200){ console.log(ret.data) this.$store.state.vuex_versionInfo = ret.data //进行版本型号的比对 以及下载更新请求 checkVersionToLoadUpdate(ret.data, 1, market); } }) } } }; </script> <style lang="less"> .container { background: #fff; font-size: 28rpx; box-sizing: border-box; height: calc(100vh - var(--window-top) - var(--window-bottom) - 55px); overflow: auto; color: #666; // 头部门店信息 .store { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 30rpx; background: rgb(11, 108, 224); color: #fff; .storeInfo { display: flex; align-items: center; font-size: 32rpx; .storeName { view { padding: 6upx 0; &:first-child { font-weight: bold; } } .font28 { color: #666; } } .personImg { width: 100rpx; height: 100rpx; margin-right: 20rpx; border-radius: 100rpx; } .storeRightIcon { line-height: 58rpx; } } } // 我的页面列表 .lineItem { padding: 10upx; background-color: #f8f8f8; } .listItem { display: flex; flex-direction: row; justify-content: space-between; padding: 20rpx 30rpx; border-bottom: 1px solid #efefef; align-items: center; color: #666; .listItemLeft { display: flex; align-items: center; } .leftImg { flex-grow: 1; padding: 10upx; } .number { display: inline-block; width: 32rpx; border-radius: 50%; color: #ffffff; font-size: 24rpx; background-color: red; text-align: center; line-height: 32rpx; position: relative; bottom: 8rpx; right: 20rpx; } .banbenhao { position: relative; bottom: 8rpx; right: 20rpx; } } .listItem:last-child { margin-bottom: 40rpx; } // logo 联系方式 .logoContent { margin: 100upx 0; text-align: center; .logoImg { .logo { width: 300rpx; height: 105rpx; } } .phone { margin-top: 20upx; color: #989898; .phoneImg { position: relative; bottom: 8rpx; } } } } </style>