uniApp and WeChat applet’s beautiful my page (with source code)
1. Sneak peek
Not logged in
Log in with
uniapp source code
<template>
<view class="content">
<view class="content_image">
<image :src="url" mode="aspectFill" @click="changImg"></image>
</view>
<!-- 内容 -->
<view class="content_botton">
<view class="content_info" v-if="userinfo">
<image :src="userinfo.avatarUrl" mode=""></image>
<view class="username">
{
{
userinfo.nickName}}
</view>
<view class="select">
<view >收藏店铺 12</view>
<view @click="myCollect">收藏商品 ({
{
collectNum}})</view>
</view>
</view>
<view v-else class="noLogin">
<image src="../../static/my/weixin.png" mode="widthFix" @click="login"></image>
<view class="">点击图片登录</view>
</view>
<!-- -->
<view class="my_order">
<view class="my_order_title">
我的订单
</view>
<view class="my_order_item" v-for="item in list">
<view class="my_order_content">
<image :src="item.url" mode="widthFix"></image>
<view class="">{
{
item.name}}</view>
</view>
</view>
</view>
<!-- -->
<view class="other">
<view class="other_addres" @click="addAdress">
<view >我的地址</view>
<image src="../../static/my/right.png" mode="widthFix"></image>
</view>
<view class="other_our">
<view>联系我们</view>
<image src="../../static/my/right.png" mode="widthFix"></image>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list:[
{
id:1,
url:'../../static/my/order.png',
name:"全部订单"
},
{
id:2,
url:'../../static/my/pay.png',
name:"待付款"
},
{
id:3,
url:'../../static/my/getShop.png',
name:"待发货"
},
{
id:4,
url:'../../static/my/gopay.png',
name:"退款"
}
],
url:'',
userinfo:[],
collectNum:0
}
},
onShow() {
this.userinfo=uni.getStorageSync('user')
this.url=uni.getStorageSync('url')
let collect=uni.getStorageSync('collect')
this.collectNum=collect.length;
},
methods: {
changImg(){
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths))
uni.setStorageSync('url',res.tempFilePaths[0])
}
});
this.onShow()
uni.usei
},
login(){
var that=this
// #ifdef MP-WEIXIN
wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
console.log(res)
that.userinfo=res.userInfo
wx.setStorageSync('user',res.userInfo);
}
})
// #endif
},
// 添加地址
addAdress(){
uni.chooseAddress({
success(res) {
console.log(res)
uni.setStorageSync("address",res);
}
})
},
myCollect(){
uni.navigateTo({
url:'/pages/myCollect/myCollect'
})
}
}
}
</script>
<style lang="scss">
page{
background-color:#eee;
}
.content_image{
image{
// 高斯模糊
filter: blur(3rpx);
width: 100%;
}
height: 300rpx;
position: relative;
}
.content_botton{
.noLogin{
position: absolute;
left: 45%;
transform: translate(-50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
margin-top: 15%;
margin-left: 5%;
border-radius: 20rpx;
width: 90%;
height: 250rpx;
background-color:#fff;
justify-content: center;
align-items: center;
position: relative;
image{
width: 100rpx;
height: 100rpx;
}
}
.content_info{
position: relative;
z-index: 999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
margin-top: 15%;
margin-left: 5%;
border-radius: 20rpx;
width: 90%;
height: 250rpx;
background-color:#fff;
image{
margin-top: -40rpx;
width: 130rpx;
height: 130rpx;
border-radius: 50%;
}
.username{
}
.select{
display: flex;
justify-content: space-between;
view{
padding: 0 40rpx;
}
}
}
.my_order{
width: 90%;
margin-top: 10rpx;
margin-left: 5%;
height: 280rpx;
border-radius: 20rpx;
background-color: #fff;
.my_order_title{
border-radius: 20rpx;
padding-left: 20rpx;
line-height: 80rpx;
height: 80rpx;
}
.my_order_item{
padding: 4.5%;
float: left;
.my_order_content{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
image{
width: 80rpx;
height: 50rpx;
}
}
}
}
}
.other{
margin: 10rpx 40rpx;
height: 190rpx;
width: 90%;
border-radius: 20rpx;
background-color: #fff;
.other_addres{
height: 60rpx;
padding: 20rpx 20rpx;
border-bottom: 1rpx dashed gainsboro;
display: flex;
justify-content: space-between;
image{
width: 50rpx;
}
}
.other_our{
height: 60rpx;
padding: 20rpx 20rpx;
display: flex;
justify-content: space-between;
image{
width: 50rpx;
}
}
}
</style>
Remember to like it