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

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

实际案例图片

• 显示默认地址
  

• 修改收货地址后
  

• 地址列表
  

显示默认地址页面

具体内容图片自己替换哈，随便找了个图片的做示例
具体位置见目录结构
完善布局页面和样式
用到了页面间传值 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