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

这篇具有很好参考价值的文章主要介绍了uniApp和微信小程序好看的我的页面(有源码)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

1.先睹为快

未登录状态

uniapp 我的页面,微信小程序开发,微信小程序,uni-app,小程序
以登录

uniapp 我的页面,微信小程序开发,微信小程序,uni-app,小程序

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, //默认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>

记得点赞哦文章来源地址https://www.toymoban.com/news/detail-638744.html

到了这里,关于uniApp和微信小程序好看的我的页面(有源码)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp:h5和微信小程序文件下载方式

    一、h5浏览器端下载方式,直接使用a标签 download属性指定下载文件的文件名,也可以不加 注意:记得一定要加ifdef注释,不然其他端也会显示a标签 二、微信小程序下载方式,通过uniapp的downloadFile和wx小程序的saveFile保存文件 wx保存文件的api只是临时保存图片文件,可以通过微

    2024年02月07日
    浏览(112)
  • 采用uniapp实现的银行卡卡片, 支持H5和微信小程序

    采用uniapp-vue3实现的银行卡卡片 支持H5、微信小程序(其他小程序未测试过,可自行尝试) 可用于参考学习 可到插件市场下载尝试: https://ext.dcloud.net.cn/plugin?id=16736 使用示例

    2024年02月22日
    浏览(76)
  • uniapp新建项目后,如何在浏览器和微信小程序运行

    第一步:新建项目 参考uni-app官网提供了HBuilderX可视化创建和vue cli命令两种方式创建项目,由于HBuilder和它都是DCloud公司的产品,使用它创建项目可以很方便的下载插件什么的。 新建项目很简单: https://uniapp.dcloud.net.cn/quickstart-hx.html 下载HBuilderX,然后参照这个文档点两下选择

    2024年02月03日
    浏览(61)
  • 【微信小程序】个人信息页面/我的页面

    hello,小伙伴们大家好,小编是后端开发,没有系统接触过前端学习,最近公司要求开发小程序,斗胆承接,其中有个人信息页面比较常用,现记录下来,供初学者参考,有不符合规范的地方,希望各位大佬包含,评论区指点!废话不多说,直接上代码。 样式使用了flex布局

    2024年02月11日
    浏览(77)
  • 基于uniapp开发 微信小程序登陆页面一

     此微信登陆页面是参考uniapp开发文档 uniapp一键登录和button组件中的@getphonenumber方法 代码展示  成品展示      

    2024年02月12日
    浏览(51)
  • uniapp 微信小程序:页面+组件的生命周期顺序

    这个uniapp的微信小程序项目使用的是 VUE2 首页只提供了一个跳转按钮。 虽然文档中将页面与组件的生命周期分开罗列,但是我们在页面和组件中所有的生命周期函数都加上,看下效果: uniap 页面生命周期 uniapp 组件生命周期

    2024年02月15日
    浏览(40)
  • 基于uniapp的微信小程序如何刷新页面(绝对有效)

    由于我的毕业设计就是用uniapp写的微信小程序。 碰到了这样的问题,查了许多资料,最终找到了这样的方法。 现在写出来给大家节约时间和精力。 就是用uni.redirectTo 实现页面跳转从而实现页面刷新 注意:这不能刷新tabBar页面 不要傻乎乎的用在tabBar上 跳转到tabBar页面只能使

    2024年02月11日
    浏览(57)
  • uniapp微信小程序中跳转页面的方法

    在 UniApp 中,有多种方法可以实现页面跳转,以下是其中几种常用的方法及其区别: uni.navigateTo : 使用该方法进行页面跳转时,会关闭当前页面,跳转到指定的页面。 可以在目标页面中获取传递的数据,通过  data-url  或  data-object  传递。 通常用于跳转到新页面并关闭当前

    2024年02月03日
    浏览(49)
  • uniapp微信小程序切换到tabber页面没有自动刷新

    前言 通过uni.switchTab跳转到tabber页面比如个人中心页面,更新的数据没有刷新。导致页面的数据还是修改之前的 解决方法 在uni.switchTab()加入回调函数; uni.switchTab成功跳转后调用success,此时可以拿到跳转后页面的page对象,从而调用页面onLoad方法重载页面。 或者 两种方法只是

    2024年02月11日
    浏览(60)
  • uniapp微信小程序全局分享和自定义页面分享

    uniapp 实现微信小程序的全局 转发给好友/分享到朋友圈 的功能。主要使用 Vue.js 的 全局混入 概念。 1.在项目根目录创建mixins文件夹,然后创建全局分享的 js 文件。mixins/share.js  2.在项目的 main.js 文件中引入该 share.js 文件并使用 Vue.mixin() 方法将之全局混入: 3.自定义页

    2024年02月13日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包