UNIAPP实战项目笔记47 显示默认收货地址和修改收货地址页面的布局

￡神魔★判官ぃ 2024-03-31 15:52 102阅读 0赞

### UNIAPP实战项目笔记47 显示默认收货地址和修改收货地址页面的布局 ###

#### 实际案例图片 ####

*  显示默认地址  
    ![显示默认地址][91339941c7954341b8415c9d51803f39.png]
 *  修改收货地址后  
    ![修改后][8428357dcb0d465da6dfbcaf329c05f2.png]
 *  地址列表  
    ![地址列表][e9d106bd34a7439ca65d8936d2daaad8.png]

显示默认地址页面

> 具体内容图片自己替换哈，随便找了个图片的做示例  
> 具体位置见目录结构  
> 完善布局页面和样式  
> 用到了页面间传值 uni. o n u n i . on uni. onuni.off uni.$emit

#### 代码 confirm-order.vue部分 ####

confirm-order.vue 确认订单页面布局和渲染

<template>
        <view class="confirm-order bg-active-color">
            <Lines></Lines>
            
            
            <view class="order-map" @tap="goPathList">
                <block v-if="path">
                    <view class="map-title">
                        <view class="map-name">收件人:{
        {
        path.name}}</view>
                        <view class="">{
        {
        path.tel}}</view>
                    </view>
                    <view class="map-add">
                        收货地址:{
        {
        path.city}} {
        {
        path.detail}}
                    </view>
                </block>
                <block v-else>
                    <view class="map-title">
                        <view class="map-name">请选择地址</view>
                    </view>
                </block>
                
            </view>
            
            
            <view class="goods-list" v-for="(item,index) in 2">
                    
                <view class="goods-content bg-active-color">
                    <image class="goods-img" src="../../static/logo.png" mode=""></image>
                    <view class="goods-text">
                        <view class="goods-name">
                            一大串文字介绍一大串文字介绍一大串文字介绍一大串文字介绍一大串文字介绍
                        </view>
                        <view class="goods-size f-color">
                            颜色分类:黑色
                        </view>
                        <view class="f-active-color">
                            7天无理由
                        </view>
                    </view>
                    <view class="">
                        <view class="">
                             ￥299.00
                        </view>
                        <view class="goods-size">
                            x 1
                        </view>
                    </view>
                </view>
                
            </view>
        
            
            <view class="order-foot">
                <view class="total-price">
                    合计: <text class="f-active-color">$3999.00</text>
                </view>
                <view class="confirm">
                    提交订单
                </view>
            </view>
        </view>
    </template>
    
    <script>
        import Lines from '@/components/common/Lines.vue'
        import {
        mapGetters} from 'vuex'
        export default {
        
            data() {
        
                return {
        
                    path:false
                };
            },
            computed:{
        
                ...mapGetters(['defaultPath'])
            },
            onLoad() {
        
                // 如果默认地址的一个赋值
                if(this.defaultPath.length){
        
                    this.path = this.defaultPath[0];
                }
                
                // 如果出发自定义事件,on去接收值
                uni.$on('selectPathItem',(res)=>{
        
                    // console.log(res);
                    this.path = res;
                })
            },
            onUnload() {
        
              uni.$off('selectPathItem',()=>{
        
                  console.log('移除了selectPathItem');
              })  
            },
            components:{
        
                Lines
            },
            methods:{
        
                goPathList(){
        
                    uni.navigateTo({
        
                        url:'/pages/my-path-list/my-path-list?type=selectedPath'
                    })
                },
            }
        }
    </script>
    
    <style lang="less">
    .confirm-order{
        
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
    .order-map{
        
        margin-bottom: 10rpx;
        padding: 20rpx;
        background-color: #fff;
        line-height: 50rpx;
    }
    .map-title{
        
        display: flex;
        justify-content: space-between;
    }
    .map-name{
        
        font-weight: bold;
    }
    .goods-list{
        
        background-color: #fff;
        padding: 10rpx 0;
    }
    
    .goods-content{
        
        padding: 10rpx 20rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .goods-text{
        
        width: 360rpx;
        padding: 0 10rpx;
        font-size: 26rpx;
    }
    .goods-img{
        
        width: 160rpx;
        height: 160rpx;
    }
    .goods-size{
        
        font-size: 24rpx;
    }
    
    .order-foot{
        
        width: 100%;
        height: 80rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        background-color: #fff;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    .confirm{
        
        color: #fff;
        background-color: #49bdfb;
        padding: 10rpx 30rpx;
    }
    .total-price{
        
        padding: 0 20rpx;
    }
    
    
    </style>

#### my-path-list.vue 文件代码 ####

> 地址列表

<template>
        <view class="my-path-list">
            <view class="path-list">
                <view  
                    v-for="(item,index) in list" 
                    :key="index"
                    @tap="toAddPath(index)"
                >
                
                    <view class="path-item" @tap="goConfirmOrder(item)" >
                        <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>
            <view class="add-path">
                <view class="add-path-btn" @tap="goAddPath">
                    新增地址
                </view>
            </view>
        </view>
    </template>
    
    <script>
        import {
        mapState} from 'vuex'
        export default {
        
            data() {
        
                return {
        
                    isSelectedPath:false
                };
            },
            computed:{
        
                ...mapState({
        
                    list:state=>state.path.list
                })
            },
            onLoad(e) {
        
                if (e.type === 'selectedPath') {
        
                    this.isSelectedPath = true;
                }
            },
            methods:{
        
                // 修改
                toAddPath(index){
        
                    let pathObj = JSON.stringify({
        
                        index:index,
                        item:this.list[index]
                    });
                    uni.navigateTo({
        
                        url:'../my-add-path/my-add-path?data='+pathObj
                    })
                },
                // 新增
                goAddPath(){
        
                    uni.navigateTo({
        
                        url:'../my-add-path/my-add-path'
                    })
                },
                // 返回确认订单
                goConfirmOrder(item){
        
                    // 如果是从确认订单过来的执行
                    if(this.isSelectedPath){
        
                        // 自定义事件:页面通信
                        uni.$emit('selectPathItem',item);
                        // 返回上一页
                        uni.navigateBack();
                    }
                }
            }
        }
    </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文件代码 ####

export default{
        
        state:{
        
            list:[
                {
        
                    name:"张果老",
                    tel:"18010101919",
                    city:"北京市朝阳区建国路",
                    details:"四惠东199号",
                    isDefault:false
                },{
        
                    name:"吕洞宾",
                    tel:"18010102929",
                    city:"北京市石景山区鲁谷",
                    details:"中心西街199号",
                    isDefault:true
                }
            ]
        },
        getters:{
        
            defaultPath(state){
        
                return state.list.filter(v=>v.isDefault)
            }
        },
        mutations:{
        
            createPath( state, obj ){
        
                state.list.unshift( obj );
            },
            updatePath( state, {
         index,item} ){
        
                for(let key in item){
        
                    state.list[index][key] = item[key];
                }
            },
            // 把之前选中默认的改完未选中
            removePath(state){
        
                state.list.forEach(v=>{
        
                    if(v.isDefault){
        
                        v.isDefault = false;
                    }
                })
            }
        },
        actions:{
        
            createPathFn({
         commit}, obj){
        
                if(obj.isDefault){
        
                    commit('removePath')
                }
                commit('createPath', obj);
            },
            updatePathFn({
         commit}, obj){
        
                if(obj.item.isDefault){
        
                    commit('removePath')
                }
                commit('updatePath', obj);
            }
        }
    }

#### 目录结构 ####

##### 前端目录结构 #####

*  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
     *  my-order
        
         *  my-order.vue
     *  confirm-order
        
         *  `confirm-order.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
     *  order
        
         *  `order-list.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

[91339941c7954341b8415c9d51803f39.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/caccc7b1df2e4729acab06c715a976ca.png
[8428357dcb0d465da6dfbcaf329c05f2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/4eacaf1edb9c4eb1928846b20d6a5ffd.png
[e9d106bd34a7439ca65d8936d2daaad8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/87291c6515c042f8bddac3c44e316de6.png