uniApp和微信小程序好看的我的页面（有源码）

1.先睹为快

未登录状态

以登录

uniapp源码

<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, //默认9sizeType: ['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-WEIXINwx.getUserProfile({desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success: (res) => {console.log(res)that.userinfo=res.userInfowx.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>

记得点赞哦

uniApp和微信小程序好看的我的页面（有源码）相关推荐

hbuilderx 小程序分包_基于uniapp的微信小程序之分包
0. 缘由最近工作在接触uni-app,用它来开发微信小程序,也是第一次接触,找了很久,还有大佬用自己写的函数做的,俺觉得我不会也不配,刚好看到下面评论是官方也支持了,所以就用官方的了,这里记录一下 ...
uniapp 实现微信小程序全局分享及自定义分享按钮样式
uniapp 实现微信小程序的全局转发给好友/分享到朋友圈的功能.主要使用 Vue.js 的全局混入概念. 下面直接上实现步骤和代码: 创建全局分享内容文件 1.创建一个全局分享的 js 文 ...
uniapp开发微信小程序-软考刷题小程序
记录一次基于uniapp的微信小程序开发前言计算机科学与技术辅修学士的课程设计最终决定做微信小程序(比较简单) 刷题小程序方向题库是软考内容开发语言前端uniapp开发后端django开 ...
uniapp开发微信小程序设置分包，简单易学（图解）
我们使用uniapp开发微信小程序的时候,当我们的包体积过大的时候,无法真机模拟因为小程序单个包只支持2MB,所以这时候我们要选择去分包. 有人要问了分包难吗?分包很简单.但是最重要的来了,分包这 ...
uni-app开发微信小程序使用微信小程序的插件
假如使用uni-app开发微信小程序需要用到官方插件----OCR插件, 插件地址如下: OCR插件申请方式见插件地址介绍.本文主要记录调用方式 1.在manifest.json的"mp- ...
计算机毕业设计Python+uniapp基于微信小程序某企业考勤系统(小程序+源码+LW)
计算机毕业设计Python+uniapp基于微信小程序某企业考勤系统(小程序+源码+LW) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: Pychram社区版+ ...
Uni-app开发微信小程序使用本地图片做背景图
Uni-app开发微信小程序使用本地图片做背景图 <view class="content" :style="{backgroundImage:'url(' + i ...
使用uniapp做微信小程序，在小程序编辑器运行时编译报错：appid不合法，导致启用不了。
使用uniapp做微信小程序,在小程序编辑器运行时编译报错:appid不合法,导致启用不了.这个好坑爹啊,我这么淑女的小可爱都想骂人了,我好累,写个博客发泄发泄吧! 复现我的问题:神操作--代码跟别人 ...
uni-app开发经验分享十九： uni-app对接微信小程序直播
uni-app对接微信小程序直播 1.登录微信小程序后台-点击>设置->第三方设置->添加直播插件 2.添加直播组件后->点击<详情> 记录这两个参数直播 ...

uniApp和微信小程序好看的我的页面（有源码）

uniApp和微信小程序好看的我的页面（有源码）

1.先睹为快

uniApp和微信小程序好看的我的页面（有源码）相关推荐

最新文章

热门文章