页面切图

This commit is contained in:
仲么了
2023-02-10 16:32:41 +08:00
parent 1e81b90b8f
commit 51f9add37c
12 changed files with 447 additions and 28 deletions

View File

@@ -222,6 +222,42 @@
"style": {
"navigationBarTitleText": "提交反馈"
}
},
{
"path": "pages/device/user",
"style": {
"navigationBarTitleText": "子用户"
}
},
{
"path": "pages/mine/user",
"style": {
"navigationBarTitleText": "子用户"
}
},
{
"path": "pages/mine/userDetail",
"style": {
"navigationBarTitleText": "用户设备"
}
},
{
"path": "pages/user/basic",
"style": {
"navigationBarTitleText": "个人信息"
}
},
{
"path": "pages/user/head",
"style": {
"navigationBarTitleText": "更换头像"
}
},
{
"path": "pages/user/changeName",
"style": {
"navigationBarTitleText": "修改昵称"
}
}
],
"tabBar": {

View File

@@ -72,12 +72,12 @@ export default {
}, {
text: 'I/O'
}],
content: [ {
iconPath: '/static/record.png',
text: '记录',
}, {
content: [{
iconPath: '/static/report.png',
text: '告警',
}, {
iconPath: '/static/record.png',
text: '记录',
}, {
iconPath: '/static/about.png',
text: '关于',
@@ -114,6 +114,8 @@ export default {
uni.navigateTo({ url: '/pages/device/transfer' })
} else if (e.item.text === '反馈') {
uni.navigateTo({ url: '/pages/device/feedback' })
} else if (e.item.text === '用户') {
uni.navigateTo({ url: '/pages/device/user' })
}
this.$refs.fab.close()
},
@@ -131,15 +133,19 @@ export default {
})
break;
case 4:
this.content.splice(0, 0, {
this.content.splice(1, 0, {
iconPath: '/static/share.png',
text: '分享',
}, {
iconPath: '/static/subordinate.png',
text: '用户',
}, {
iconPath: '/static/delate.png',
text: '删除',
})
break;
case 5:
this.content.splice(0, 0, {
this.content.push({
iconPath: '/static/feedback.png',
text: '反馈',
})

View File

@@ -63,15 +63,15 @@ export default {
text: '干接点'
}, {
text: '状态量'
},{
}, {
text: '其他'
}],
content: [{
iconPath: '/static/record.png',
text: '记录',
}, {
iconPath: '/static/report.png',
text: '告警',
}, {
iconPath: '/static/record.png',
text: '记录',
}, {
iconPath: '/static/about.png',
text: '关于',
@@ -108,6 +108,8 @@ export default {
uni.navigateTo({ url: '/pages/device/transfer' })
} else if (e.item.text === '反馈') {
uni.navigateTo({ url: '/pages/device/feedback' })
} else if (e.item.text === '用户') {
uni.navigateTo({ url: '/pages/device/user' })
}
this.$refs.fab.close()
},
@@ -119,7 +121,7 @@ export default {
console.log(userInfo.role);
switch (userInfo.role) {
case 3:
this.content.splice(0, 0, {
this.content.splice(1, 0, {
iconPath: '/static/transfer.png',
text: '移交',
})
@@ -128,12 +130,16 @@ export default {
this.content.splice(0, 0, {
iconPath: '/static/share.png',
text: '分享',
}, {
iconPath: '/static/subordinate.png',
text: '用户',
}, {
iconPath: '/static/delate.png',
text: '删除',
})
break;
case 5:
this.content.splice(0, 0, {
this.content.push({
iconPath: '/static/feedback.png',
text: '反馈',
})

48
pages/device/user.vue Normal file
View File

@@ -0,0 +1,48 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='index'>
<uni-list>
<uni-list-item title="张三" note="2023-02-10 14:55" thumb="/static/head.png" thumb-size="lg">
<template v-slot:footer>
<view class="footer-btn mt20" style="background:#e47470">移除</view>
</template>
</uni-list-item>
<uni-list-item title="李四" note="2023-02-10 14:55" thumb="/static/head.png" thumb-size="lg">
<template v-slot:footer>
<view class="footer-btn mt20" style="background:#e47470">移除</view>
</template>
</uni-list-item>
</uni-list>
<uni-load-more status="nomore"></uni-load-more>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false
}
},
methods: {
}
}
</script>
<style lang='scss'>
.index {
padding: 34rpx;
.footer-btn {
padding: 0 20rpx;
height: 50rpx;
background-color: #007aff;
font-size: 24rpx;
color: #fff;
text-align: center;
line-height: 50rpx;
border-radius: 10rpx;
}
}
</style>

View File

@@ -57,7 +57,4 @@ export default {
}
}
/deep/ .uni-list-item {
background-color: $uni-theme-white !important;
}
</style>

View File

@@ -5,7 +5,7 @@
<image mode="aspectFill" class="mine-header-head" src="/static/head.png" />
<view class="mine-header-name hide-txt">
<view>灿能电力</view>
<view class="tag">{{roleName}}</view>
<view class="tag">{{ roleName }}</view>
</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
@@ -14,7 +14,7 @@
<view class="mine-nav-label">角色升级</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view> -->
<view class="mine-nav" @click="jump('message')">
<view class="mine-nav" @click="jump('user')">
<image mode="aspectFill" class="mine-nav-icon" src="/static/subordinate.png" />
<view class="mine-nav-label">子用户列表</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
@@ -97,6 +97,12 @@ export default {
case 'upgrade':
this.$refs.inputDialog.open()
break;
case 'basic':
uni.navigateTo({
url: `/pages/user/basic`
})
break;
break;
default:
uni.navigateTo({
url: `/pages/mine/${type}`

55
pages/mine/user.vue Normal file
View File

@@ -0,0 +1,55 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='index'>
<uni-list>
<uni-list-item title="张三" note="2023-02-10 14:55" thumb="/static/head.png" thumb-size="lg">
<template v-slot:footer>
<view class="footer-btn mt20" style="background:#e47470">移除</view>
<view class="footer-btn mt20 ml10" @click="jump">查看</view>
</template>
</uni-list-item>
<uni-list-item title="李四" note="2023-02-10 14:55" thumb="/static/head.png" thumb-size="lg">
<template v-slot:footer>
<view class="footer-btn mt20" style="background:#e47470">移除</view>
<view class="footer-btn mt20 ml10" @click="jump">查看</view>
</template>
</uni-list-item>
</uni-list>
<uni-load-more status="nomore"></uni-load-more>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false
}
},
methods: {
jump () {
uni.navigateTo({
url: '/pages/mine/userDetail'
})
}
}
}
</script>
<style lang='scss'>
.index {
padding: 34rpx;
.footer-btn {
padding: 0 20rpx;
height: 50rpx;
background-color: #007aff;
font-size: 24rpx;
color: #fff;
text-align: center;
line-height: 50rpx;
border-radius: 10rpx;
}
}
</style>

73
pages/mine/userDetail.vue Normal file
View File

@@ -0,0 +1,73 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='index'>
<uni-card title="设备信息" sub-title="副标题" v-for="item in 3" :key="item"
thumbnail="/static/real_time_data.png">
<view class="footer">
<text>设备基础信息 </text>
<view class="footer-btn" @click="del">移除</view>
</view>
</uni-card>
<uni-load-more status="nomore"></uni-load-more>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false
}
},
methods: {
del(){
uni.showModal({
title: '提示',
content: '确定要移除该设备权限吗?',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
},
newDevice () {
uni.scanCode({
success: function (res) {
console.log('条码类型:' + res.scanType);
console.log('条码内容:' + res.result);
uni.navigateTo({
url: '/pages/gateway/newDevice'
})
}
});
},
}
}
</script>
<style lang='scss'>
.index {
.footer {
display: flex;
justify-content: space-between;
align-items: center;
.footer-btn {
padding: 0 20rpx;
height: 50rpx;
background-color: #e47470;
font-size: 24rpx;
color: #fff;
text-align: center;
line-height: 50rpx;
border-radius: 10rpx;
}
}
}
</style>

72
pages/user/basic.vue Normal file
View File

@@ -0,0 +1,72 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='index'>
<view class="mine-nav" @click="jump('head')" style=" box-shadow: 0 4rpx 8rpx #e7e7e74c;">
<view class="mine-nav-label">头像</view>
<image style="height: 120rpx;width: 120rpx;border-radius:12rpx" src="/static/head.png"
mode="scaleToFill" />
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
<view class="mine-nav" @click="jump('changeName')" style="border-bottom: none; ">
<view class="mine-nav-label">名字</view>
<view class="mine-nav-des">灿能电力</view>
<uni-icons type="forward" color="#aaa" size="20"></uni-icons>
</view>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false
}
},
methods: {
jump(type){
console.log(type);
uni.navigateTo({
url: `/pages/user/${type}`,
fail: (err) => {
console.log(err);
}
})
}
}
}
</script>
<style lang='scss'>
.index {
padding: 34rpx;
.mine-nav {
padding: 34rpx;
display: flex;
align-items: center;
background: $uni-theme-white;
border-bottom: 1rpx solid #e8e8e8;
&-icon {
margin-right: 30rpx;
height: 44rpx;
width: 44rpx;
border-radius: $uni-theme-radius;
overflow: hidden;
}
&-label {
margin-right: 30rpx;
flex: 1;
font-size: 28rpx;
color: #111;
}
&-des {
font-size: 28rpx;
color: #999;
}
}
}
</style>

61
pages/user/changeName.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='change-name'>
<view class="content">
<uni-easyinput type="text" v-model="name" placeholder="请输入昵称" />
</view>
<view class="btn-wrap">
<view class="btn-wrap-item " @click="submit"> 提交 </view>
</view>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false,
// 表单数据
name: '',
}
},
methods: {
submit () {
console.log(this.name)
uni.navigateBack()
},
}
}
</script>
<style lang='scss'>
.change-name {
padding: 34rpx;
.content {
margin-bottom: 20rpx;
padding: 34rpx;
background: $uni-theme-white;
border-radius: 12rpx;
}
.btn-wrap {
margin-top: 40rpx;
display: flex;
align-items: center;
justify-content: space-between;
.btn-wrap-item {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
background: $uni-theme-blue;
color: #fff;
height: 80rpx;
border-radius: 12rpx;
}
}
}
</style>

59
pages/user/head.vue Normal file
View File

@@ -0,0 +1,59 @@
<template>
<Cn-page :loading='loading'>
<view slot='body'>
<view class='head'>
<image class="head-img" src="/static/head.png"></image>
<view class="head-setup">
<view class="head-setup-item" @click="take('album')">从相册选一张</view>
<view class="head-setup-item" @click="take('camera')">拍一张照片</view>
</view>
</view>
</view>
</Cn-page>
</template>
<script>
export default {
data () {
return {
loading: false
}
},
methods: {
take (type) {
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: [type],
success: (res) => {
console.log(res)
}
})
}
}
}
</script>
<style lang='scss'>
.head {
.head-img {
height: 750rpx;
width: 750rpx;
}
.head-setup {
position: fixed;
bottom: 0;
left: 0;
width: 750rpx;
padding-bottom: 60rpx;
background-color: #fff;
.head-setup-item{
height: 100rpx;
line-height: 100rpx;
text-align: center;
border-top: 1rpx solid #e8e8e8;
}
}
}
</style>

View File

@@ -44,21 +44,21 @@
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
name: 'wx'
},
{
text: '支付宝',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
name: 'wx'
},
// {
// text: '支付宝',
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
// name: 'wx'
// },
{
text: 'QQ',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
name: 'qq'
},
{
text: '新浪',
icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
name: 'sina'
},
// {
// text: '新浪',
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/0dacdbe0-50bf-11eb-8ff1-d5dcf8779628.png',
// name: 'sina'
// },
// {
// text: '百度',
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',