完善用户信息

Signed-off-by: YangWork <yang@xixingwl.cn>
This commit is contained in:
YangWork
2023-02-11 18:05:07 +08:00
parent a68042fc67
commit 1d507ee53a
4 changed files with 120 additions and 148 deletions

66
App.vue
View File

@@ -1,5 +1,8 @@
<script> <script>
import {mapState,mapMutations} from 'vuex' import {
mapState,
mapMutations
} from 'vuex'
export default { export default {
onLaunch: function() { onLaunch: function() {
let that = this; let that = this;
@@ -11,8 +14,10 @@
if (resLogin.errMsg === "login:ok") { if (resLogin.errMsg === "login:ok") {
// 获取jsCode成功通过jsCode调用微信api获取用户openId // 获取jsCode成功通过jsCode调用微信api获取用户openId
console.log(resLogin) console.log(resLogin)
that.$ajax("Demo/test",{code:resLogin.code}) that.$ajax("Demo/test", {
.then(res=>{ code: resLogin.code
})
.then(res => {
console.log(res) console.log(res)
if (res.code == 1) { if (res.code == 1) {
that.saveOpenIdSession(res.data) that.saveOpenIdSession(res.data)
@@ -40,13 +45,13 @@
}) })
}, },
methods:{ methods: {
...mapMutations(['saveOpenIdSession']) ...mapMutations(['saveOpenIdSession'])
} }
} }
</script> </script>
<style> <style lang="scss">
/* #ifndef APP-PLUS-NVUE */ /* #ifndef APP-PLUS-NVUE */
/* uni.css - 通用组件、模板样式库可以当作一套ui库应用 */ /* uni.css - 通用组件、模板样式库可以当作一套ui库应用 */
@import './common/uni.css'; @import './common/uni.css';
@@ -69,6 +74,7 @@
background-color: #F5F5F5 !important; background-color: #F5F5F5 !important;
min-height: 100% !important; min-height: 100% !important;
height: auto !important; height: auto !important;
background: linear-gradient(to bottom right, pink, #a900ff7a, pink);
} }
.uni-top-window uni-tabbar .uni-tabbar { .uni-top-window uni-tabbar .uni-tabbar {
@@ -121,4 +127,54 @@
} }
/* #endif*/ /* #endif*/
.warp {
margin: 10rpx 15rpx;
}
.Grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
background: #f7f7f7;
border-radius: 15rpx;
padding-top: 10rpx;
padding-bottom: 10rpx;
.Grid-Item {
width: 25%;
.Grid-Item-1 {
margin-left: 10rpx;
margin-right: 10rpx;
text-align: center;
border: 1rpx solid #efeded;
border-radius: 25rpx;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
flex-direction: column;
align-items: center;
padding-top: 20rpx;
padding-bottom: 5rpx;
background-color: #fff;
}
.GSimg {
width: 81rpx;
height: 81rpx;
}
.GStitle {
width: 100%;
height: 34rpx;
line-height: 34rpx;
color: #06121e;
font-size: 24rpx;
margin-top: 10rpx;
}
}
}
</style> </style>

View File

@@ -1,36 +1,56 @@
<template> <template>
<view class="warp"> <view>
<uni-search-bar @confirm="search" v-model="searchValue" @input="input" clearButton="always" cancelButton="none" <view class="warp">
@clear="scan"> <uni-search-bar @confirm="search" v-model="searchValue" @input="input" clearButton="always"
<template v-slot:clearIcon> cancelButton="none" @clear="scan">
<uni-icons color="#999999" size="18" type="scan" /> <template v-slot:clearIcon>
</template> <uni-icons color="#999999" size="18" type="scan" />
</uni-search-bar> </template>
<!-- 个人中心页方格列表数据 --> </uni-search-bar>
<view class="Grid"> <!-- 个人中心页方格列表数据 -->
<view class="Grid-Item" v-for="item in List" :key="item.id"> <view class="Grid">
<view class="GSimg"> <view class="Grid-Item">
<image class="Image" :src="item.img"></image> <view class="Grid-Item-1">
</view> <image class="GSimg" src="../../../static/logo.png"></image>
<view class="GStitle">{{ item.title }}</view> <view class="GStitle">测试功能</view>
</view>
</view>
<view class="MsgList">
<view class="MlSon" v-for="item in List1" :key="item.id">
<view class="MlSonvBox">
<view class="SonOfImg">
<image class="Img" :src="item.img"></image>
</view> </view>
<view class="SonOfName"> </view>
<view class="SNTop"> <view class="Grid-Item">
{{item.title}} <view class="Grid-Item-1">
<image class="GSimg" src="../../../static/logo.png"></image>
<view class="GStitle">测试功能</view>
</view>
</view>
<view class="Grid-Item">
<view class="Grid-Item-1">
<image class="GSimg" src="../../../static/logo.png"></image>
<view class="GStitle">测试功能</view>
</view>
</view>
<view class="Grid-Item">
<view class="Grid-Item-1">
<image class="GSimg" src="../../../static/logo.png"></image>
<view class="GStitle">测试功能</view>
</view>
</view>
</view>
<view class="MsgList">
<view class="MlSon" v-for="item in List1" :key="item.id">
<view class="MlSonvBox">
<view class="SonOfImg">
<image class="Img" :src="item.img"></image>
</view> </view>
<view class="SNBom"> <view class="SonOfName">
<view class="SBleft"> <view class="SNTop">
左边信息 {{item.title}}
</view> </view>
<view class="SBright"> <view class="SNBom">
右边信息 <view class="SBleft">
左边信息
</view>
<view class="SBright">
右边信息
</view>
</view> </view>
</view> </view>
</view> </view>
@@ -45,27 +65,6 @@
data() { data() {
return { return {
searchValue: '123123', searchValue: '123123',
List: [{
id: 1,
img: '../../../static/logo.png',
title: '九宫格布局1'
},
{
id: 2,
img: '../../../static/logo.png',
title: '九宫格布局2'
},
{
id: 3,
img: '../../../static/logo.png',
title: '九宫格布局3'
},
{
id: 4,
img: '../../../static/logo.png',
title: '九宫格布局4'
}
],
List1: [{ List1: [{
id: 1, id: 1,
img: '../../../static/logo.png', img: '../../../static/logo.png',
@@ -150,54 +149,9 @@
</script> </script>
<style lang="scss"> <style lang="scss">
.Grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
background: #f7f7f7;
padding: 10rpx 15rpx;
.Grid-Item {
width: 25%;
text-align: center;
border: 1rpx solid #ccc;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
flex-direction: column;
align-items: center;
padding-top: 15rpx;
padding-bottom: 15rpx;
.GSimg {
width: 96rpx;
height: 96rpx;
.Image {
width: 96rpx;
height: 96rpx;
}
}
.GStitle {
width: 100%;
height: 34rpx;
line-height: 34rpx;
color: #06121e;
font-size: 24rpx;
margin-top: 20rpx;
}
}
}
$max:100%; $max:100%;
.MsgList { .MsgList {
width: 92%;
margin-left: 4%;
max-width: 690rpx;
height: auto; height: auto;
.MlSon { .MlSon {

View File

@@ -1,7 +1,6 @@
<template> <template>
<view> <view>
<page-head title="view"></page-head> <view class="warp warp1" style="">
<view class="warp" style="margin: 10rpx 15rpx;">
<view class="user" style=""> <view class="user" style="">
<image class="user-avatar" mode="aspectFit" :src="userInfo.avatar" <image class="user-avatar" mode="aspectFit" :src="userInfo.avatar"
style="background-image: ../../../static/avatar.png;"></image> style="background-image: ../../../static/avatar.png;"></image>
@@ -113,6 +112,7 @@
</script> </script>
<style lang="scss"> <style lang="scss">
.warp1{ }
.user { .user {
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
@@ -125,7 +125,9 @@
/* #endif */ /* #endif */
padding-left: 15rpx; padding-left: 15rpx;
padding-bottom: 25rpx; padding-bottom: 25rpx;
// background-image: url(/static/user/back.jpg);
// background-size: 100% 100%;
// background: linear-gradient(pink,#a900ff7a, pink);
.user-avatar { .user-avatar {
width: 138rpx; width: 138rpx;
height: 138rpx; height: 138rpx;
@@ -140,47 +142,4 @@
padding-left: 45rpx; padding-left: 45rpx;
} }
} }
.Grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
background: #f7f7f7;
.Grid-Item {
width: 25%;
.Grid-Item-1 {
margin-left: 10rpx;
margin-right: 10rpx;
text-align: center;
border: 1rpx solid #efeded;
border-radius: 25rpx;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
flex-direction: column;
align-items: center;
padding-top: 20rpx;
padding-bottom: 5rpx;
background-color: #fff;
}
.GSimg {
width: 81rpx;
height: 81rpx;
}
.GStitle {
width: 100%;
height: 34rpx;
line-height: 34rpx;
color: #06121e;
font-size: 24rpx;
margin-top: 10rpx;
}
}
}
</style> </style>

View File

@@ -31,6 +31,9 @@ export default {
return state.openId; return state.openId;
}, },
getUserInfo(state){ getUserInfo(state){
let userinfo = state.userinfo;
if ( userinfo.avatar=== "undefined" || userinfo.avatar=== "null" || userinfo.avatar=== "")
userinfo.avatar = "/static/avatar1.png"
return state.userinfo; return state.userinfo;
} }
}, },