UNIAPP实战项目笔记42 购物车页面新增收货地址

news2024/11/14 11:22:06

UNIAPP实战项目笔记42 购物车页面新增收货地址

设置新增收货地址页面布局和功能

具体内容图片自己替换哈,随便找了个图片的做示例
用到了vuex的状态机,具体位置见目录结构

代码 my-add-path.vue 页面部分

my-add-path.vue 设置页面布局

用到了vuex的状态机

<template>
    <view class="my-add-path">
        <view class="path-item">
            <view class="">收件人</view>
            <input type="text" value="" placeholder="收件人姓名" v-model="pathObj.name"/>
        </view>
        <view class="path-item">
            <view class="">手机号</view>
            <input type="text" value="" placeholder="11位手机号" v-model="pathObj.tel"/>
        </view>
        <view class="path-item">
            <view class="">所在地址</view>
            <view class="" @tap="showCityPicker">{{pathObj.city}} </view>
            <mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm"/>
        </view>
        <view class="path-item">
            <view class="">详细地址</view>
            <input type="text" value="" placeholder="5到60个字符" v-model="pathObj.details"/>
        </view>
        <view class="path-item">
            <view class="">设为默认地址</view>
            <label class="radio">
                <radio :checked="pathObj.isDefault" color="#FF3333" /><text></text>
            </label>
        </view>
    </view>
</template>

<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
                }
                
            };
        },
        components:{
            mpvueCityPicker
        },
        // 页面生命周期
        onNavigationBarButtonTap() {
            this.createPathFn( this.pathObj ); //提交数据对象到state.list
            // 后退一页
            uni.navigateBack({
                delta:1
            })
        },
        methods:{
            ...mapActions(['createPathFn']), // 引入
            // 城市选择
            showCityPicker(){
                this.$refs.mpvueCityPicker.show()
            },
            onConfirm(e){
                this.pathObj.city = e.label;
                console.log(e);
            }
        }
    }
</script>

<style lang="scss">
.my-add-path{
    padding-left: 20rpx;
}
.path-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 0;
    width: 100%;
    border-bottom: 2rpx solid #ccc ;
}
.path-item input{
    flex: 1;
    text-align: left;
    padding: 0 10rpx;
}
</style>

代码 my-add-list.vue 页面部分

my-add-list.vue 设置页面布局

渲染状态机数据到页面

<template>
    <view class="my-path-list">
        <view class="path-list">
            <view class="path-item" v-for="(item,index) in list" :key="index">
                <view class="item-main">
                    <view class="item-name">
                        {{item.name}}
                    </view>
                    <view class="">
                        {{item.tel}}
                    </view>
                </view>
                <view class="item-main">
                    <view class="active" v-show="item.isDefault">
                        默认
                    </view>
                    <view class="">
                        {{item.city}} {{item.details}}
                    </view>
                </view>
            </view>
        </view>
        <view class="add-path">
            <view class="add-path-btn" @tap="goAddPath">
                新增地址
            </view>
        </view>
    </view>
</template>

<script>
    import {mapState} from 'vuex'
    export default {
        data() {
            return {
                
            };
        },
        computed:{
            ...mapState({
                list:state=>state.path.list
            })
        },
        methods:{
            goAddPath(){
                uni.navigateTo({
                    url:'../my-add-path/my-add-path'
                })
            }
        }
    }
</script>

<style lang="scss">
.add-path{
    padding: 20rpx 0;
    width: 100%;
    display: flex;
    justify-content: center;
}
.add-path-btn{
    border: 2rpx solid #49bdfb;
    color: #49bdfb;
    border-radius: 30rpx;
    padding: 6rpx 60rpx;
}
.path-list{
    padding: 0 20rpx;
}
.path-item{
    padding: 10rpx;
    border-bottom: 2rpx solid #ccc;
}
.item-main{
    padding: 8rpx 0;
    display: flex;
    align-items: center;
}
.item-name{
    padding-right: 10rpx;
}
.active{
    padding: 6rpx;
    background-color: #49bdfb;
    columns: #fff;
    border-radius: 20rpx;
    font-size: 24rpx;
    text-align: center;
}
</style>

代码 path.js 状态机对象部分

定义 path 对象

export default{
    state:{
        list:[
            {
                name:"张果老",
                tel:"18010101919",
                city:"北京市朝阳区建国路",
                details:"四惠东199号",
                isDefault:false
            },{
                name:"吕洞宾",
                tel:"18010102929",
                city:"北京市石景山区鲁谷",
                details:"中心西街199号",
                isDefault:true
            }
        ]
    },
    getters:{
        
    },
    mutations:{
        createPath( state, obj ){
            state.list.unshift( obj );
        }
    },
    actions:{
        createPathFn({commit}, obj){
            commit('createPath', obj);
        }
    }
}

index.js 代码

地址管理 path 状态机引入

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

// 购物车
import cart from './modules/cart.js'
// 地址管理
import path from './modules/path.js'

export default new Vuex.Store({
    modules:{
        cart,
        path
    }
})

实际案例图片

添加地址演示

添加完地址演示

目录结构

前端目录结构

  • manifest.json 配置文件: appid、logo…

  • pages.json 配置文件: 导航、 tabbar、 路由

  • main.js vue初始化入口文件

  • App.vue 全局配置:样式、全局监视

  • static 静态资源:图片、字体图标

  • page 页面

    • index
      • index.vue
    • list
      • list.vue
    • my
      • my.vue
    • my-config
      • my-config.vue
    • my-config
      • my-config.vue
    • my-add-path
      • my-add-path.vue
    • my-path-list
      • my-path-list.vue
    • search
      • search.vue
    • search-list
      • search-list.vue
    • shopcart
      • shopcart.vue
    • details
      • details.vue
  • components 组件

    • index
      • Banner.vue
      • Hot.vue
      • Icons.vue
      • indexSwiper.vue
      • Recommend.vue
      • Shop.vue
    • common
      • Card.vue
      • Commondity.vue
      • CommondityList.vue
      • Line.vue
      • ShopList.vue
    • uni
      • uni-number-box
        • uni-number-box.vue
      • uni-icons
        • uni-icons.vue
      • uni-nav-bar
        • uni-nav-bar.vue
      • mpvue-citypicker
        • mpvueCityPicker.vue
  • common 公共文件:全局css文件 || 全局js文件

    • api
      • request.js
    • common.css
    • uni.css
  • store vuex状态机文件

    • modules
      • cart.js
      • path.js
    • index.js

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/23410.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

steam搬砖副业,月入2万+,内含全套讲解

Steam平台是一款国外知名的数字游戏社交平台&#xff0c;steam游戏平台起初只是一个整合游戏的下载平台&#xff0c;随着软件的发展&#xff0c;逐渐演变为了游戏社交平台&#xff0c;steam是世界上目前最大的游戏平台之一&#xff0c;而「网易BUFF」是一款由网易公司推出&…

Unity3D简陋版跑酷游戏

目录 功能演示 功能简介 制作步骤 功能演示 链接&#xff1a;https://pan.baidu.com/s/1E_2JXWlVJNf3S5l-dH2UuQ提取码&#xff1a;dm5e 视频教学:Unity3D大作业 超级简陋版的跑酷游戏_哔哩哔哩_bilibili 功能简介 本次跑酷游戏主要从跑道&#xff0c;UI设计&#xff0c;…

[附源码]java毕业设计小区宠物管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

MyBatis--获取参数值

MyBatis获取参数值的两种方式 &#xff1a; ${} 和 #{} ${}的本质是字符串 &#xff0c;#{}的本质是占位符赋值 ${}使用字符串拼接的方式拼接sql &#xff0c;若为字符串类型或日期类型的字段进行赋值时&#xff0c;需要手动加单引号。 #{}使用占位符赋值的方式拼接sql &#x…

[附源码]java毕业设计小锅米线点餐管理系统

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

【Spring Cloud实战】Spring Cloud Bus消息总线

gitee地址&#xff1a;https://gitee.com/javaxiaobear/spring-cloud_study.git 在线阅读地址&#xff1a;https://javaxiaobear.gitee.io/ 1、概述 Spring Cloud Bus将分布式系统的节点与轻量级消息代理链接。这可以用于广播状态更改&#xff08;例如配置更改&#xff09;或其…

15.PyQt5中的事件系统之事件(QEvent)简介

PyQt5中的事件系统 一、什么是Qt中的事件 事件&#xff08;event&#xff09;是由窗口系统或者Qt自身产生的事情或动作的通称。当用户按下或者松开键盘或鼠标的按键时&#xff0c;就可以产生一个键盘或者鼠标事件&#xff1b;当某个窗口第一次显示的时候&#xff0c;就会产生一…

Pytorch的入门操作(二)

2、Pytorch 2.1 Pytorch的介绍和安装 目标&#xff1a; 知道如何安装Pytorch 2.1.1 Pytorch的介绍 Pytorch是Facebook发布的深度学习框架&#xff0c;由其易用性&#xff0c;友好性&#xff0c;深受广大用户青睐 2.1.2 Pytorch的版本 2.1.3 Pytorch的安装 安装地址介绍&…

Matlab论文插图绘制模板第65期—带等高线的曲面图(Surfc)

在之前的文章中&#xff0c;分享了Matlab曲面图的绘制模板&#xff1a; 这一次&#xff0c;再来分享一下带等高线的曲面图的绘制模板。 先来看一下成品效果&#xff1a; 特别提示&#xff1a;Matlab论文插图绘制模板系列&#xff0c;旨在降低大家使用Matlab进行科研绘图的门槛…

【数据结构与算法】最小生成树与最短路径

&#x1f525; 本文由 程序喵正在路上 原创&#xff0c;CSDN首发&#xff01; &#x1f496; 系列专栏&#xff1a;数据结构与算法 &#x1f320; 首发时间&#xff1a;2022年11月21日 &#x1f98b; 欢迎关注&#x1f5b1;点赞&#x1f44d;收藏&#x1f31f;留言&#x1f43e…

棋盘覆盖问题(Java)

文章目录棋盘覆盖问题&#xff08;Java&#xff09;1、问题描述2、算法设计思路3、代码实现4、复杂度分析5、参考棋盘覆盖问题&#xff08;Java&#xff09; 1、问题描述 在一个2k2k个方格组成的棋盘中,若恰有一个方格与其他方格不同,则称该方格为一特殊方格,且称该棋盘为一个…

D. Radio Towers(斐波那契+逆元)

Problem - 1452D - Codeforces 在一条坐标线上有n2个城镇&#xff0c;编号从0到n1。第i个城镇位于第i点。 你在1,2,......,n个镇上各建一座无线电塔&#xff0c;概率为12&#xff08;这些事件是独立的&#xff09;。之后&#xff0c;你想把每个塔的信号功率设置为1到n的某个整…

OpenGL 透明度

目录 一.OpenGL 透明度 1.IOS Object-C 版本1.Windows OpenGL ES 版本2.Windows OpenGL 版本 二.OpenGL 透明度 GLSL Shader三.猜你喜欢 零基础 OpenGL ES 学习路线推荐 : OpenGL ES 学习目录 >> OpenGL ES 基础 零基础 OpenGL ES 学习路线推荐 : OpenGL ES 学习目录 &…

轻松使用TomCat、Maven和Servlet

文章目录TomcatTomcat下载启动Tomcat启动Tomcat失败的原因使用TomcatMaven创建Maven项目Maven依赖管理Servlet1.创建Maven项目2.引入依赖3.构建目录结构4.编写Servlet代码5.程序打包6.程序部署7.验证程序使用IDEA上Tomcat插件简化步骤5和步骤6Tomcat Tomcat 就是基于 Java 实现…

单点登录等功能该用 Keycloak 这种开源框架实现吗?

Keycloak 是一个开源软件产品&#xff0c;旨在为现代的应用程序和服务&#xff0c;提供包含身份管理和访问管理功能的单点登录工具。 开源软件虽然能够定制和修改源代码&#xff0c;还可以降低开发成本&#xff0c;但是 Keycloak 实现起来还是有不少问题&#xff1a; 用户迁移…

python实现五子棋游戏(pygame版)(附零基础学习资料)

前言 使用python实现pygame版的五子棋游戏&#xff1b; 环境&#xff1a;Windows系统python3.8.0 &#xff08;文末送读者福利&#xff09; 游戏规则&#xff1a; 1、分两位棋手对战&#xff0c;默认黑棋先下&#xff1b;当在棋盘点击左键&#xff0c;即在该位置绘制黑棋&a…

APT 攻击溯源方法

概述&#xff1a; 当今世界正值百年未有之大变局&#xff0c;网络空间成为继陆、海、空、天之后的第五大疆域&#xff0c;安全威胁也随之延伸至网络空间。没有网络安全就没有国家安全&#xff0c;在新时代网络空间安全已经上升至国家安全的高度。高级持续性威胁(Advanced Pers…

yolov1模型

目录 一、机器视觉算法 二、yolov1 预测阶段&#xff08;向前推断&#xff09;​ 三、预测阶段的后处理 &#xff08;声明&#xff1a;本文章是在学习他人视频的学习笔记&#xff0c;图片出处均来自该up主&#xff0c;侵权删 视频链接&#xff1a;为什么要学YOLOV1_哔哩哔哩_b…

拿铁DHT-PHEV座舱智能程度体验笔记(超详细)

评测时间&#xff1a; •第一次 2022年10月1日-10月7日 •第二次 2022年10月25日 评测配置&#xff1a; •两驱超大杯 18.98万元好评功能盘点 座舱芯片及内存&#xff1a;高通骁龙 8155&#xff0c;算力8TOPS&#xff0c;存储8GB&#xff0c;内存12G&#xff0c;一流的配置。 四…

领悟《信号与系统》之 连续时间信号的时域分析法

连续时间信号的时域分析法一、LTI 连续系统的响应1. LTI 微分方程的建立与求解2. LTI 连续系统的零输入响应与零状态响应1. 零输入响应2. 零状态响应3. 全响应二、冲激响应和阶跃响应1. 冲激响应2. 阶跃响应三、卷积积分及其性质1. 任意信号的分解2. 任意信号作用下的零状态响应…