分支自 mobile/lbdry-uniapp
pages/tabBar/me.vue
@@ -1,14 +1,15 @@ <!-- 个人中心 --> <template> <view class="components-theme"> <!-- 弹窗确认 --> <view class="cu-modal" :class="modalName=='Modal'?'show':''"> <view class="cu-dialog" style="padding: 300rpx 0 70rpx;"> <view class="modal_bg"></view> <view class="modal_main"> <view class='nav-list margin-top'> <view :class="'nav-li bg-zt' + (index+1)" v-for="(item, index) in inter" :key="index" @click="switchImage(index,item.name)"> <view :class="'nav-li bg-zt' + (index+1)" v-for="(item, index) in inter" :key="index" @click="switchImage(index,item.name)"> <view class="nav-name">{{item.name}}</view> </view> </view> @@ -16,7 +17,8 @@ </view> </view> <!-- 顶部背景 --> <view class='UCenter-bg' :style="'background-image: url(' + pic[topBackGroupImageIndex].link + ');margin-top:' + 0 + 'px;'"> <view class='UCenter-bg' :style="'background-image: url(' + pic[topBackGroupImageIndex].link + ');margin-top:' + 0 + 'px;'"> <view class='space' v-show="spaceShow"> <view class="stars "> <view class="star "></view> @@ -30,70 +32,71 @@ <view class='text-center'> <view class="cu-avatar2 round xl margin-right-sm shadow-blur-lg bg-img open-data" style="overflow: hidden;"> <image src="../../static/logo.png" style="width: 100%; height: 100%;"></image> <image style="width: 100%; height: 100%;"></image> </view> <view class="padding text-blue text-xl text-bold"> 你好，xxx！ 你好，{{userinfo.realname == null ? '--' : userinfo.realname}}！ </view> </view> </block> </view> <block> <view class='padding flex text-center text-grey bg-white shadow-warp-my'> <view class='flex flex-sub flex-direction solid-right'> <view class="text-xxl text-orange">10</view> <view class="text-xxl text-orange">-</view> <view class="margin-top-sm"> 设备总数</view> 设备总数</view> </view> <view class='flex flex-sub flex-direction solid-right'> <view class="text-xxl text-blue">6</view> <view class="text-xxl text-blue">-</view> <view class="margin-top-sm"> 运行设备</view> 运行设备</view> </view> <view class='flex flex-sub flex-direction'> <view class="text-xxl text-red">1</view> <view class="text-xxl text-red">-</view> <view class="margin-top-sm"> 报警次数 </view> </view> </view> <view class="cu-list menu card-menu margin-top-lg shadow-shop bg-white text-black my-radius sm-border"> </view> <view class="cu-list menu card-menu margin-top-lg margin-bottom-lg shadow-shop bg-white text-black my-radius sm-border"> <view class="cu-item" @tap="showModal" data-target="Modal"> <view class='content'> <image src='../../static/me/icon/zhuti.png' class='png' mode='aspectFit'></image> <text class='text-lg margin-sm'>主题切换</text> </view> <view class='action'> <view class="cu-capsule radius"> <view class='cu-tag bg-gradual-blue'> <view style="clear: both;"></view> </view> <view class="cu-tag line-blue"> {{picName}} </view> </view> </view> </view> <view class="cu-list menu card-menu margin-top-lg margin-bottom-lg shadow-shop bg-white text-black my-radius sm-border"> <view class="cu-item" @tap="showModal" data-target="Modal"> <view class='content'> <image src='../../static/me/icon/zhuti.png' class='png' mode='aspectFit'></image> <text class='text-lg margin-sm'>主题切换</text> </view> <view class='action'> <view class="cu-capsule radius"> <view class='cu-tag bg-gradual-blue'> <view style="clear: both;"></view> </view> <view class="cu-tag line-blue"> {{picName}} </view> </view> </view> </view> <view class="cu-item"> @@ -107,7 +110,7 @@ </view> <view class="cu-item"> <button class='content cu-btn' open-type="feedback"> <button class='content cu-btn'> <image src='../../static/me/icon/chucuo.png' class='png' mode='aspectFit'></image> <text class='text-lg margin-sm'>问题反馈</text> </button> @@ -118,25 +121,34 @@ <text class='text-lg margin-sm'>关于</text> </button> </view> <view class="cu-item"> <button class='content cu-btn' @click="exit"> <image src='../../static/me/icon/diannao.png' class='png' mode='aspectFit'></image> <text class='text-lg margin-sm'>退出登录</text> </button> </view> </view> </block> <view style="height: 110rpx;width: 1rpx;"></view> </block> <u-modal title="提示" content='确认退出登录吗？' :show="show" @confirm="confirm" @cancel="cancel" ref="uModal" showCancelButton></u-modal> <view style="height: 110rpx;width: 1rpx;"></view> </view> </template> <script> <script> var videoAd = null export default { data() { return { show: false, // Custom: this.Custom, // CustomBar: this.CustomBar, spaceShow:true, spaceShow: true, modalName: null, picName: '流星之夜', picName: '流星之夜', userinfo:{}, pic: [{ link: 'https://cdn.zhoukaiwen.com/zjx_me_bg1.jpeg', name: '春天' @@ -183,6 +195,12 @@ color: '' }] } }, onReady() { const userinfo = uni.getStorageSync('userinfo'); if(userinfo){ this.userinfo = userinfo } }, // 分享小程序 onShareAppMessage(res) { @@ -191,28 +209,32 @@ imageUrl: 'https://cdn.zhoukaiwen.com/qdpz_share.jpg', }; }, watch:{ watch: { topBackGroupImageIndex(val) { console.log(val) if (val == 4 || val == 5 ) { if (val == 4 || val == 5) { this.spaceShow = true; }else{ } else { this.spaceShow = false; } } }, mounted() { mounted() { }, methods: { getGitee(){ uni.setClipboardData({ data: 'https://gitee.com/kevin_chou', success: function () { console.log('success'); } }); methods: { exit() { this.show = true }, confirm() { this.show = false uni.removeStorageSync('token'); uni.removeStorageSync('userinfo'); uni.reLaunch({ url: '/pages/login/login' }); }, cancel() { this.show = false }, switchImage(index, name) { this.topBackGroupImageIndex = index; @@ -221,23 +243,22 @@ }, showModal(e) { this.modalName = e.currentTarget.dataset.target }, showGitee(e){ this.modalName = e.currentTarget.dataset.target }, hideModal(e) { this.modalName = null }, showGitee(e) { this.modalName = e.currentTarget.dataset.target }, hideModal(e) { this.modalName = null }, } } </script> <style lang="scss" scoped> .UCenter-bg { background: #fff; background-size: 100% 100%; @@ -401,12 +422,14 @@ .margin-bottom-my { margin-bottom: 150rpx; } .giteeClass{ margin-top: 30rpx; font-size: 34rpx; color: #2440B3; text-decoration: underline; .giteeClass { margin-top: 30rpx; font-size: 34rpx; color: #2440B3; text-decoration: underline; } .cu-dialog { background: #FFFFFF; overflow: visible; @@ -451,7 +474,7 @@ color: #fff; background: #152e9d; } .bg-zt6 { color: #fff; background: #0f1358; @@ -469,7 +492,7 @@ border-radius: 12upx; width: 45%; margin: 0 2.5% 40upx; background-image: url(../../static/me/NyU04x.png); //background-image: url(../../static/me/NyU04x.png); background-size: cover; background-position: center; position: relative; @@ -543,7 +566,7 @@ line-height: 60upx; } .star { .star { display: block; width: 5rpx; height: 5rpx; @@ -639,6 +662,4 @@ -moz-transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0); } } </style> </style>
