uniapp 学习笔记三十三地图显示配置地址详情页搭建通过form表单录取地址数据提交到数据库

旧城等待， 2024-04-05 06:55 62阅读 0赞

uniapp 学习笔记三十三 地图显示配置地址详情页搭建 通过form表单录取地址数据提交到数据库

![8706d7e54d024175a5b32dae99da6856.png][]![367526f8caa646e7903dff0a055d0e27.png][]

address.vue

<template>
        <view>
            <view 
                v-for="(item,index) in addressList" 
                class="margin-sm u-border padding"
                :class="{'default':item.isdefault}"
            >
                <view class="default-cont">默</view>
                <view class="flex justify-between">
                    <view class="flex align-center">
                        <text 
                            class="iconfont icon-checkbox-xuanzhong margin-right"
                            :class="{'color-9898':checkedIdx==index||item.isdefault}"
                            @click="handleCheckAddress(index)"
                        ></text>
                        <view class="">
                           {
       {item.username}},{
       {item.phone}}
                            <view class="">
                                {
       {item.city}}
                                {
       {item.region}}
                                {
       {item.detail}}
                            </view>
                        </view>
                    </view>
                    <view class="edit margin-bottom-sm">
                        <text class="iconfont icon-bianjishuru"></text>
                    </view>
                </view>
                <view class="flex justify-around align-center margin-top">
                    <view v-if="item.isdefault" class="">
                        默认地址
                    </view>
                    <view v-else class="" @click="handleDefault(index)">
                        设为默认
                    </view>
                    <u-line length="15" direction="col"></u-line>
                    <view class="">
                        删除地址
                    </view>
                </view>
            </view>
            <view class="text-center">
                <button @click="handleAddAddress" class="cu-btn bg-brown">新增地址</button>
            </view>
        </view>
    </template>
    
    <script>
        import {mapState,mapMutations} from 'vuex'
        export default {
            data() {
                return {
                    
                };
            },
            computed: {
                ...mapState({
                    addressList:state=>state.address.addressList, 
                    checkedIdx:state=>state.address.checkedIdx 
                })
            },
            methods:{
                ...mapMutations({
                    'handleDefault':'address/addressDefaultMut',
                    'handleCheckAddress':'address/addressCheckMut'
                }),
                handleAddAddress(){
                    uni.navigateTo({
                        url:'address-detail'
                    })
                }
            }
        }
    </script>
    
    <style lang="scss">
    .edit{
        width: 80upx;
        height: 80upx;
        text-align: center;
        line-height: 80upx;
        background-color: #e6e6e6;
        border-radius: 50%;
    }
    .cu-btn.lg{
        width: 50%;
    }
    .fixed {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        box-shadow: 0 0 10upx 2upx rgba(0, 0, 0, 0.2);
    }
    .icon-checkbox-xuanzhong{
    	width: 50upx;
    	height: 50upx;
        font-size: 50upx;
    	text-align: center;
    	line-height: 50upx;
        color: #e6e6e6;
    	background-color: #e6e6e6;
    	border-radius: 20%;
    }
    .default{
        position: relative;
        overflow: hidden;
        .default-cont{
            padding: 20upx 10upx 10upx;
            width: 100upx;
            background-color: #fae456;
            font-size: 12upx;
            text-align: center;
            position: absolute;
            top: -20upx;
            right: -40upx;
            transform: rotate(45deg);
            display: block;
        }
    }
    .default-cont{
        display: none;
    }
    </style>

address.js

import {$post} from '@/utils/request.js'
    export default{
        namespaced:true,
        state(){
            return{
                checkedIdx:-1, //记录用户勾选的地址
                addressList:[
                    {
                        username:'曹国舅',
                        phone:'13010101010',
                        city:'北京',
                        region:'朝阳区',
                        detail:'朝阳路周家井',
                        isdefault:true
                    },{
                        username:'何仙姑',
                        phone:'13010101010',
                        city:'北京',
                        region:'海淀区',
                        detail:'中关村二街',
                        isdefault:false
                    },{
                        username:'吕洞宾',
                        phone:'13010101010',
                        city:'北京',
                        region:'门头沟',
                        detail:'黑山大街',
                        isdefault:false
                    }
                ]
            }
        },
        getters:{
            orderAddress(state){ // 订单中的地址
                // 根据 checkedIdx 与 isdefault 共同得到一个地址对象
                let {checkedIdx,addressList} = state
                if (checkedIdx!=-1) {
                    return addressList[checkedIdx]
                }
                let len = addressList.length
                for(let i=0;i<len;i++){
                    if(addressList[i].isdefault){
                        return addressList[i]
                    }
                }
            }
        },
        mutations:{
            addressDefaultMut(state,idx){ //设为默认
                state.addressList.forEach((item,i)=>{
                    if(i==idx){
                        item.isdefault = true
                    }else{
                        item.isdefault = false
                    }
                })
            },
            addressCheckMut(state,idx){
                //选取地址
                state.checkedIdx = idx
                //点选返回
                uni.navigateBack({
                    delta:1
                })
            },
            addressAddMut(state,addressObj){
                //新增地址
                state.addressList.push(addressObj)
            }
        },
        actions:{
            addressAddAct(context,addressObj){
                $post('/1.1/classes/address',addressObj).then(({objectId})=>{
                    // console.log(res);
                    context.commit('addressAddMut',{
                        ...addressObj,
                        objectId
                    })
                    uni.navigateBack({
                        delta:1
                    })
                })
            }
        }
    }

address-detail.vue

<template>
        <view>
            <map class="map"></map>
            
            <form @submit="handleSubmit">
                <view class="cu-form-group margin-top">
                    <view class="title">
                        <text class="cuIcon-friendfill"></text>
                    </view>
                    <input class="text-right" placeholder="请输入姓名" name="username"/>
                </view>
                <view class="cu-form-group">
                    <view class="title">
                        <text class="cuIcon-mobilefill"></text>
                    </view>
                    <input class="text-right" placeholder="请输入电话" name="phone"/>
                </view>
                <view class="cu-form-group">
                    <view class="title">
                        <text class="cuIcon-locationfill"></text>
                    </view>
                    <picker :range="regionArr" @change="handleRegion">
                        <view class="picker">
                            {
       {regionIdx==-1?'请选择区域':regionArr[regionIdx]}}
                        </view>
                    </picker>
                </view>
                <view class="cu-form-group">
                    <view class="title">
                        <text class="cuIcon-locationfill"></text>
                        </view>
                    <input class="text-right" placeholder="请输入详细地址" name="detail"/>
                </view>
                <view class="padding">
                    <button form-type="submit" class="cu-btn bg-brown block">确定</button>
                </view>
            
            </form>
        </view>
    </template>
    
    <script>
        import {mapState} from 'vuex'
        export default {
            data() {
                return {
                    regionArr:[
                        '东城区',
                        '西城区',
                        '朝阳区',
                        '海淀区',
                        '石景山区',
                        '大兴区',
                        '通州区',
                        '顺义区',
                        '房山区'
                    ],
                    regionIdx:-1
                };
            },
            computed:{
                ...mapState({
                    userInfo:state=>state.user.userInfo
                })
            },
            methods:{
               handleRegion(ev){
                    console.log(ev);
                    let {value} = ev.detail;
                    this.regionIdx = value
                },
                handleSubmit(ev){
                    let {value} = ev.detail
                    let {regionArr,regionIdx} = this
                    value.city = '北京市'
                    value.region = regionArr[regionIdx]
                    value.isdefault = false
                    value.userid = this.userInfo.objectId
                    this.$store.dispatch('address/addressAddAct',value)
                }
            }
            
        }
    </script>
    
    <style lang="scss">
        .map{
            height: 400upx;
            width: 100%;
        }
    </style>

[8706d7e54d024175a5b32dae99da6856.png]: https://img-blog.csdnimg.cn/8706d7e54d024175a5b32dae99da6856.png
[367526f8caa646e7903dff0a055d0e27.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/04/dabf059383bb4baebd4effb081686c72.png