页面切图

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

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>