UNIAPP实战项目笔记64 当前用户修改收货地址的前端和后端

小灰灰 2024-03-22 15:02 13阅读 0赞

### UNIAPP实战项目笔记64 当前用户修改收货地址的前端和后端 ###

### 思路 ###

> 默认地址的修改，先清空当前id下的所有默认地址，再将新地址设为默认  
> 前端 将新值传给后端  
> 后端接受值后更新处理

### 实例截图 ###

![在这里插入图片描述][76e0361b879748a4a80f37d7a2269893.png]

### 代码 ###

#### 后端 index.js ####

#### 前端文件 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 == 1">
                                默认
                            </view>
                            <view class="">
                                {
        {
        item.province}} {
        {
        item.city}} {
        {
        item.district}} {
        {
        item.address}}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="add-path">
                <view class="add-path-btn" @tap="goAddPath">
                    新增地址
                </view>
            </view>
        </view>
    </template>
    
    <script>
        import $http from '@/common/api/request.js'
        import {
        mapState,mapMutations} from 'vuex'
        export default {
        
            data() {
        
                return {
        
                    isSelectedPath:false
                };
            },
            computed:{
        
                ...mapState({
        
                    list:state=>state.path.list
                })
            },
            onLoad(e) {
        
                if (e.type === 'selectedPath') {
        
                    this.isSelectedPath = true;
                }
                // 初始化拿到收货地址数据
                this.__initAddress();
            },
            methods:{
        
                ...mapMutations(['__initAddressList']),
                // 初始化 (请求收货地址接口)
                __initAddress(){
        
                    
                    $http.request({
        
                        url:'/selectAddress',
                        method:"POST",
                        header:{
        
                            token: true
                        }
                    }).then((res)=>{
        
                       console.log(res);
                       if(res){
        
                           this.__initAddressList(res);
                       }else{
        
                           uni.showToast({
        
                            title:res.msg,
                            icon:"none"
                           })
                       }
                        
                    }).catch(()=>{
        
                        uni.showToast({
        
                            title:'请求失败',
                            icon:'none'
                        })
                    })
                },
                // 修改
                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>

#### 前端文件 my-add-path.vue ####

<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">{
        {
        pathCity}} </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.address"/>
            </view>
            <view class="path-item">
                <view class="">设为默认地址</view>
                <radio-group name="" @change="radioChange">
                    <label class="radio">
                        <radio :checked="pathObj.isDefault == 1 ? true : false" color="#FF3333" /><text></text>
                    </label>
                </radio-group>
            </view>
        </view>
    </template>
    
    <script>
        import $http from '@/common/api/request.js'
        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
                    
                };
            },
            computed:{
        
                pathCity(){
        
                    if( this.pathObj.province ){
        
                        return `${
          this.pathObj.province}-${
          this.pathObj.city}-${
          this.pathObj.district}`
                    }else{
        
                        return '请选择';
                    }
                }
            },
            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 ){
        
                    
                    $http.request({
        
                        url:"/updateAddress",
                        method:"POST",
                        header:{
        
                            token:true
                        },
                        data:{
        
                            ...this.pathObj
                        }
                    }).then((res)=>{
        
                        this.createPathFn( this.pathObj ); //提交数据对象到state.list
                        // 后退一页
                        uni.navigateBack({
        
                            delta:1
                        })
                        
                    }).catch(()=>{
        
                        uni.showToast({
        
                            title:"请求失败",
                            icon:'none'
                        })
                    })
                    
                    
                    
                }else{
        
                    // 新增
                    $http.request({
        
                        url:"/addAddress",
                        method:"POST",
                        header:{
        
                            token:true
                        },
                        data:{
        
                            ...this.pathObj
                        }
                    }).then((res)=>{
        
                        // 修改
                        this.pathObj.isDefault = this.pathObj.isDefault == true ? 1 : 0;
                        this.updatePathFn({
        
                            index:this.i,
                            item:this.pathObj
                        })
                        uni.showToast({
        
                            title:'修改成功',
                            icon:'none'
                        })
                        // 后退一页
                        uni.navigateBack({
        
                            delta:1
                        })
                        
                    }).catch(()=>{
        
                        uni.showToast({
        
                            title:"请求失败",
                            icon:'none'
                        })
                    })
                }
            },
            methods:{
        
                ...mapActions(['createPathFn','updatePathFn']), // 引入
                // 城市选择
                showCityPicker(){
        
                    this.$refs.mpvueCityPicker.show()
                },
                onConfirm(e){
        
                    let lb = e.label.split('-');
                    this.pathObj.province = lb[0];
                    this.pathObj.city = lb[1];
                    this.pathObj.district = lb[2];
                    console.log(e);
                },
                radioChange(){
        
                    this.pathObj.isDefault = this.pathObj.isDefault == 1 ? true : false;
                    this.pathObj.isDefault = !this.pathObj.isDefault;
                }
            }
        }
    </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>

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

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

*  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
     *  payment
        
         *  payment.vue
     *  payment-success
        
         *  payment-success.vue
     *  login
        
         *  login.vue
     *  login-tel
        
         *  `login-tel.vue`
     *  login-code
        
         *  `login-code.vue`
 *  components 组件
    
     *  index
        
         *  Banner.vue
         *  Hot.vue
         *  Icons.vue
         *  indexSwiper.vue
         *  Recommend.vue
         *  Shop.vue
         *  `Tabbar.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
         *  user.js
     *  index.js

[76e0361b879748a4a80f37d7a2269893.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/55a3badd4be14ba4804c8136a7246ddd.png