8mypage-地址管理

原创 已于 2022-09-04 20:02:40 修改 · 182 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #前端

于 2022-08-28 22:45:19 首次发布

文章目录

一、页面布局

vim my.vue

<template>
	<view class='my'>
		<!--头部-->
		<view class='my-header'>
			<view class='header-main'>
				<view class='header-config'>
					<image class='config-img' src="../../static/img/config.png" mode=""></image>
				</view>
				<view class='header-logo'>
					<image class='logo-img' src="../../static/img/Children.jpg" mode=""></image>
					<view class='logo-name'>用户昵称</view>
				</view>
			</view>
		</view>
		<!--我的订单-->
		<view class='order'>
			<view class='order-title'>
				<view>我的订单</view>
				<view>全部订单 > </view>
			</view>
			<view class='order-list'>
				<view class='order-item'>
					<image  class='order-img' src="../../static/img/order1.png" mode=""></image>
					<view>待付款</view>
				</view>
				<view class='order-item'>
					<image  class='order-img' src="../../static/img/order2.png" mode=""></image>
					<view>待付款</view>
				</view>
				<view class='order-item'>
					<image  class='order-img' src="../../static/img/order3.png" mode=""></image>
					<view>待付款</view>
				</view>
				<view class='order-item'>
					<image  class='order-img' src="../../static/img/order4.png" mode=""></image>
					<view>待付款</view>
				</view>
				<view class='order-item'>
					<image  class='order-img' src="../../static/img/order5.png" mode=""></image>
					<view>待付款</view>
				</view>
			</view>
		</view>
		<!--内容列表-->
		<view class='my-content'>
			
			<view class="my-content-item">
				<view>我的收藏</view>
				<view>></view>
			</view>
			<view class="my-content-item">
				<view>我的收藏</view>
				<view>></view>
			</view>
			<view class="my-content-item">
				<view>我的收藏</view>
				<view>></view>
			</view>
			<view class="my-content-item">
				<view>我的收藏</view>
				<view>></view>
			</view>
			<view class="my-content-item">
				<view>我的收藏</view>
				<view>></view>
			</view>
			<view class="my-content-item">
				<view>我的收藏</view>
				<view>></view>
			</view>
			<view class="my-content-item">
				<view>我的收藏</view>
				<view>></view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped>
.my-header{
	background: url(../../static/img/mybg.png) no-repeat;
	width: 100%;
	height: 400rpx;
}
.header-main{
	position: relative;
	top:120rpx;
}
.header-config{
	position: absolute;
	left:20rpx;
}
.header-logo{
	position: absolute;
	left:50%;
	margin-left:-60rpx;
	width:120rpx;
}
.config-img{
	width: 40rpx;
	height: 40rpx;
}
.logo-img{
	width: 120rpx;
	height: 120rpx;
	border:2rpx solid #CCCCCC;
	border-radius: 50%;
	background-color: #FFFFFF;
}
.logo-name{
	font-weight: bold;
	color:#FFFFFF;
}
.order-title{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx;
}
.order-list{
	padding: 20rpx;
	display: flex;
}
.order-item{
	flex:1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.order-img{
	width:66rpx;
	height: 66rpx;
}
.my-content{
	margin:20rpx 0;
	padding:0 20rpx;
}
.my-content-item{
	display: flex;
	justify-content: space-between;
	align-items:center;
	padding:20rpx 0; 
	border-bottom: 2px solid #CCCCCC;
}
</style>

二、设置地址管理页面

mkdir my-config

pages.json 配置

{
            "path" : "pages/my-config/my-config",
            "style" : {
				"navigationBarBackgroundColor":"#FFFFFF",
				"navigationBarTitleText": "设置"
			}
        }

vim my-config.vue

vim my-path-list.vue

点击跳转 uni.navigateTo

三、修改地址收货地址三级联动

mkdir my-add-path

使用插件解决三级联动

改变默认情况 获取插件返回数据

四、新增地址

store/moudles/path.js

export default {
	state:{
		list:[
			{
				name:"张三",
				tel:"18511773322",
				city:"北京市海淀区",
				details:'2号楼',
				isDefault:false
			},
			{
				name:"李四",
				tel:"18511773322",
				city:"北京市海淀区",
				details:'2号楼',
				isDefault:true
			}
		]
	},
	getters:{
		
	},
	mutations:{
		createPath( state, obj ){
			state.list.unshift( obj );
		},
		updatePath(state,{index,item}){
			
			for( let key in item){
				state.list[index][key] = item[key];
			}
			
		}
	},
	actions:{
		createPathFn({commit},obj){
			commit('createPath',obj)
		},
		updatePathFn({commit},obj){
			commit('updatePath',obj);
		}
	}
}

my-add-path.vue

<script>
	import mpvueCityPicker from '../../components/uni/mpvue-citypicker/mpvueCityPicker.vue'
	import {mapActions} from 'vuex'
	export default {
		data() {
			return {
				pickerValueDefault: [0, 0, 1],
				pathObj:{
					name:"",
					tel:"",
					city:"请选择",
					details:"",
					isDefault:false
				},
				i:-1,
				//是否修改的状态
				isStatus:false
			}
		},
		onLoad(e) {
			if(e.data){
				uni.setNavigationBarTitle({
					title:"修改地址"
				})
				let result = JSON.parse(e.data);
				this.pathObj = result.item;
				this.i = result.index;
				this.isStatus = true;
			}
		},
		components:{
			mpvueCityPicker
		},
		//页面生命周期
		onNavigationBarButtonTap() {
			
			if( this.isStatus ){
				//修改
				this.updatePathFn({
					index:this.i,
					item:this.pathObj
				})
				uni.navigateBack({
					delta:1
				})
			}else{
				//新增
				this.createPathFn(this.pathObj);
				uni.navigateBack({
					delta:1
				})
			}
		},
		methods: {
			...mapActions(["createPathFn",'updatePathFn']),
			showCityPicker() {
			  this.$refs.mpvueCityPicker.show();
			},
			onConfirm(e) {
			  this.city = e.label;
			}
		}
	}
</script>

五、修改地址

my-path-list.vue

template

<view class='path-item' 
				v-for='(item,index) in list' :key='index'
				@tap='toAddPath(index)'
			>
				<view class='item-main'>
					<view class='item-name'>{{item.name}}</view>
					<view>{{item.tel}}</view>
				</view>
				<view class='item-main'>
					<view class='active' v-if='item.isDefault'>默认</view>
					<view>{{item.city}} {{item.details}}</view>
				</view>
			</view>

methods

//修改
			toAddPath(index){
				
				let pathObj = JSON.stringify({
					index:index,
					item:this.list[index]
				})
				uni.navigateTo({
					url:"../my-add-path/my-add-path?data="+pathObj+""
				})
				
			},

my-add-path.vue

onLoad(e) {
			if(e.data){
				uni.setNavigationBarTitle({
					title:"修改地址"
				})
				let result = JSON.parse(e.data);
				this.pathObj = result.item;
				this.i = result.index;
				this.isStatus = true;
			}
		}

path,js

mutations:{
		createPath( state, obj ){
			state.list.unshift( obj );
		},
		updatePath(state,{index,item}){
			
			for( let key in item){
				state.list[index][key] = item[key];
			}
			
		}
	},
	actions:{
		createPathFn({commit},obj){
			commit('createPath',obj)
		},
		updatePathFn({commit},obj){
			commit('updatePath',obj);
		}
	}

六、订单
在这里插入图片描述
下划线选中 选中 index 对应的 active类

<view class='order-header'>
			<view 
				class='header-item'
				v-for='(item,index) in tabList'
				:key='index'
				:class=' tabIndex==index?"active":""  '
				@tap='changeTab(index)'
			>{{item.name}}</view>
		</view>

有数据的样式

构建订单数据

Flutter开发之导航与路由管理
xiangzhihong8的专栏
08-02 795
路由管理 Route 所谓路由管理，就是管理页面之间如何跳转，也被称为导航管理。这和原生开发类似，无论是Android还是iOS，导航管理都是通过维护一个路由栈来实现的，路由入栈(push)操作对应打开一个新页面，路由出栈(pop)操作对应页面关闭操作。在Flutter开发中，实现页面跳转需要同时使用Route 和 Navigator。 Route是一个应用程序抽象的屏幕或页面； Navigat...
基于JAVA的企业工资管理系统的设计与实现
goodtime1998的博客
12-18 2574
在系统开发设计完成后,测试也是十分重要的,它可以让开发人员的开发出来的系统更好地被用户所接受。我们知道在代码的运行过程中一点会出现bug,一套优秀的代码能够很好地避免运行时的错误和风险。在功能实现后,要对功能和模块进行集中测试,特别是严重的部分要加以维护。在测试前要确保代码的规范性,严谨性,这将提高代码的质量和测试的难度,在这里通过编写测试用例,用输出测试和输入测试测试代码数据。(1)登入测试：用户登录的测试过程展示登录成功和失败状态,如表 6.1所示:表 6.1 登录页面测试测试名称。
xwiki管理指南-认证
lovelife110的博客
05-22 4267
XWiki对于认证用户支持多种不同的身份认证机制 XWiki目前同一时间只允许启用一种认证方法。这可能在将来得到改善。 还要注意的是XWiki需要cookie被启用，来跟踪你的会话。 表单认证 表单认证是默认的方式。它需要用户和口令。 基本认证 XWIki支持html基本认证。基本认证是一种用来允许Web浏览器或其他客户端程序在请求时提供用户名和口令形式的身份凭证的一种登录验证方式。你...
JB3-8-Vue（三）
周航宇的博客
06-25 700
Java道经第3卷 - 第8阶 - Vue（三）
vue-router
weixin_45695200的博客
09-11 199
路由就是单页面应用的路径管理器。vue的单页面应用是基于路由和组件的，路径和组件有映射关系。 传统的页面应用，是用超链接来实现页面切换和跳转的。在vue单页面应用中，则是组件切换。 路由模块的本质就是建立起路径和页面之间的映射关系。 两种模式：Hash模式和History模式 默认为hash，但是这个模式页面地址会变成被加个#号比较难看： http://localhost:8080/#/HomePage 所以一般会采用 history模式，它会使得我们的地址像平常一样： http://localhost:8
31、深入了解Windows Server容器：从镜像获取到管理的全流程指南
berry的博客
11-30 8
本文深入介绍了Windows Server容器的全流程操作指南，涵盖从Docker Hub获取镜像、创建与运行容器、手动及自动化自定义镜像、本地注册表搭建，到容器网络配置、监控日志管理以及使用Docker Compose和Kubernetes进行容器编排与集群管理。同时提供了镜像版本控制、安全扫描和定期清理等最佳实践，帮助用户高效、安全地部署和管理Windows容器化应用。
鸿蒙PC UI控件库 - SearchInput 搜索输入框详解
红目香薰
12-14 1409
SearchInput 是一个专为搜索场景优化的输入框组件，支持多种实用功能： 核心功能：搜索图标、清除按钮、历史记录、搜索按钮、品牌标识 支持三种尺寸（small/medium/large）和多种状态（禁用/只读） 提供双向数据绑定和主题配置能力 包含历史记录功能，可过滤和复用搜索历史 适用于各类搜索、筛选和快速查找场景 该组件通过简洁API和灵活配置，可快速集成到项目中，提升搜索交互体验。
鸿蒙PC UI控件库 - PasswordInput 密码输入框详解
红目香薰
12-13 868
PasswordInput 是专为密码输入场景设计的组件，基于 TextInput 扩展，具有显示/隐藏切换、密码强度显示、验证等功能。核心特性包括安全优先设计、强度提示、多种尺寸和状态支持，左下角自动包含品牌标识。提供完整的 API 支持，如双向绑定、标签/提示文本、错误状态等，适用于登录、注册等场景。组件支持三种尺寸规格，所有样式均可通过代码配置，并附带详细的使用示例和最佳实践指导。
鸿蒙PC UI控件库 - TextButton 文本按钮详解
红目香薰
12-13 1053
TextButton是一款轻量级文本按钮组件，采用无背景设计，适用于链接和次要操作场景。核心特性包括：多种尺寸选择、图标支持、加载动画、禁用状态、下划线样式以及自定义颜色。组件自动包含品牌标识，所有样式均可通过代码配置。提供三种预设尺寸(small/medium/large)，支持左右图标位置，可设置为链接风格(带下划线)。与PrimaryButton和SecondaryButton形成完整的按钮体系，视觉权重最低，适合导航和跳转操作。
鸿蒙PC UI控件库 - IconButton 图标按钮详解
红目香薰
12-13 743
IconButton是一个纯图标按钮组件，适用于工具栏等场景。核心特性包括：仅显示图标无文字、支持圆形/方形两种形状、small/medium/large三种尺寸（large为80×80vp）、自动包含品牌标识。提供加载状态、禁用状态和自定义颜色功能，所有样式均可代码配置。推荐使用ASCII字符作为图标以确保兼容性，如S(设置)、U(用户)、+(添加)等。组件API支持图标资源或文字图标，并可通过@Builder处理点击事件。
全功能文件上传管理系统带进度条及个性化设置
8. 文件管理系统的发展趋势：在当今的IT环境中，除了基本的上传下载功能，现代的文件管理系统还会包含很多额外的功能，比如用户权限管理、版本控制、文件检索、数据备份与恢复等高级功能，以适应不断增长的企业级...
9、SELinux 安全管理与故障排查
Apple的专栏
08-24 48
本文详细介绍了如何通过调整 SELinux 布尔值来配置 Apache 服务从用户主目录发布网页内容，并深入探讨了 SELinux 日志分析与故障排查的方法。涵盖了使用 sealert、ausearch、semanage 和 restorecon 等关键工具解决 SELinux 相关访问控制问题的实践操作，帮助用户掌握 SELinux 安全策略的调整与维护技巧。
vue3中使用element-plus的el-scrollbar实现自动滚动（横向/纵横滚动）
qq_43730272的博客
12-31 155
vue3中使用element-plus的el-scrollbar实现自动滚动（横向/纵横滚动）
JavaScript 静态模块声明（静态分析、动态导入）
Irene1991的博客
12-29 478
JavaScript的静态模块声明（ES6 Modules）要求在代码执行前确定模块依赖关系。核心特点包括：1）导入/导出必须在顶层作用域，不能动态生成；2）支持编译时分析，实现Tree Shaking优化；3）提供循环依赖安全处理。与CommonJS的动态加载不同，ES6模块路径必须静态确定。动态导入（import()）作为补充允许运行时加载。优势包括提前错误检测、更好的代码优化和打包体积缩减。这种设计平衡了灵活性与性能，更适合大型应用开发。
基于java + vue校园跑腿便利平台系统(源码+数据库+文档)
JIngJaneIL的博客
12-30 428
本文介绍了一个基于SpringBoot+Vue的校园跑腿便利平台系统。系统采用前后端分离架构，后端使用SpringBoot框架简化开发流程，前端采用Vue.js实现响应式界面，数据库选用MySQL存储数据。文章详细说明了系统设计原则、技术选型理由，并提供了功能演示、代码示例和测试案例。该系统旨在优化校园服务体验，通过规范化设计确保信息清晰性和操作便捷性。文末还提供了源码获取方式和最新计算机毕业设计选题推荐。
vue2 基于虚拟dom的下拉选择框，保证大数据不卡顿，仿antd功能和样式
最新发布
licongmingli的博客
12-31 518
本文介绍了一个基于Vue2和Ant Design 1.7.8的虚拟列表下拉选择框组件的封装实现。由于Ant Design原生组件不支持虚拟列表功能，作者结合vue-virtual-scroller和vue-select封装了一个支持多选/单选/清除/搜索功能的选择框组件。文章详细说明了组件实现的技术难点：包括动态挂载DOM的方式解决模板渲染问题、样式适配Ant Design风格的改造过程，以及当前存在的待优化项（下拉列表脱离文档流问题）。组件通过计算属性和监听机制实现了数据同步，并提供了完整的代码示例展示核
Vue3中v-if与v-show的本质区别及动态组件状态保持的关键策略是什么？
https://blog.cmdragon.cn/
12-30 953
特性v-ifv-showDOM存在与否销毁/重建始终存在切换成本高（销毁重建）低（改CSS）初始渲染成本低（不满足则不渲染）高（必渲染）适用场景切换频率低（如权限控制）切换频率高（如tab切换）
测试框架介绍：Jest、Mocha 等对比 ### 工程化与模块化
专注技术分享
12-31 284
本文对比了几种常见 JavaScript 测试框架。核心如 Jest 零配置，内置多功能；Mocha 灵活，可结合多库。创新在于不同框架特性适配不同场景。适用于前端项目测试，能提升代码质量与可维护性。建议 React、Vue 项目用 Jest，需灵活配置选 Mocha，小型项目可选 Tape 或 Jasmine，未来将注重性能与集成。
vue v-for 列表渲染指令注意
KLW75
12-27 227
3、指令遍历的目标是一个正整数n时，其一般用于让当前模板在1～n的取值范围内重复产生n次，value为从1开始到n为止依次递增的数值。v-for指令可以遍历多种不同类型的数据，数组是较为常见的一种类型，当然类型还可以是对象或数值。value为被遍历的obj对象的属性值，name为属性名。令遍历一个对象时，遍历的是对象自身所有可遍历的属性。
hexo-generator-mypage：自定义页面生成插件
综上所述，hexo-generator-mypage 是一个轻量级但功能强大的 Hexo 插件，结合了 npm 包管理、YAML 配置语法、EJS 模板引擎和 Hexo Generator API 等多项现代 Web 开发技术，为静态博客系统提供了高度定制化的页面...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值