jiuyiUniapp/jiuyi/pages/mine/delivery-address/index.vue

<template>
    <view class="jy-address-list">
        <!-- 头部 -->
        <JyCommonHead title="收获地址" :isRight="false"></JyCommonHead>
        <JyAddress :addressData="listProperty.list" @setDefault="setDefault"></JyAddress>
        <JyBottomBtn @click="openPopup">添加地址</JyBottomBtn>
    </view>
    <JyPopup ref="addressPopup" title="添加收货地址" type="center">
        <view class="p25">
            <uni-forms :modelValue="formData">
                <uni-forms-item label="收货人" name="recipientName">
                    <input type="text" v-model="formData.recipientName" placeholder="请输入姓名" />
                </uni-forms-item>
                <uni-forms-item label="手机号" name="phoneNumber">
                    <input type="text" v-model="formData.phoneNumber" placeholder="请输入手机号" />
                </uni-forms-item>
                <uni-forms-item label="邮编" name="postalCode">
                    <input type="text" v-model="formData.postalCode" placeholder="请输入邮编" />
                </uni-forms-item>
                <uni-forms-item label="地区" name="areas">
                    <input @click="onhideShow" type="text" v-model="formData.areas" placeholder="请输入地区" />
                </uni-forms-item>
                <uni-forms-item label="详细地址" name="addressDetail">
                    <uni-easyinput type="textarea" autoHeight v-model="formData.addressDetail"
                        placeholder="如街道，门牌号，小区，乡镇，村等"></uni-easyinput>
                </uni-forms-item>
            </uni-forms>
            <pickRegions :province="add.province" :city="add.city" :area="add.area" :show="show"
                @changeClick="changeClick" @sureSelectArea="onsetCity" @hideShow="onhideShow"></pickRegions>
            <button class="add-address-btn" @click="saveApi">保存</button>
        </view>
    </JyPopup>
</template>
<script>
import {
    ref, getCurrentInstance, reactive
} from 'vue'
import JyPopup from '@/components/public/jy-popup'
import JyCommonHead from '@/components/public/jy-common-head'
import JyAddress from '../components/jy-address'
import pickRegions from './components/jy-pick-regions'
import JyBottomBtn from '@/components/public/jy-bottom-button'
import apiMixins from '@/components/public/apiMixins.js'

export default {
    components: {
        JyCommonHead,
        JyAddress,
        pickRegions,
        JyBottomBtn,
        JyPopup
    },
    mixins: [apiMixins],
    mounted() {
        this.init()
    },
    methods: {
        openPopup() {
            this.$refs.addressPopup.open()
        },
        init() {
            this.getData({
                api: 'address',
                fn: 'list'
            }, {});
            console.log('====================================');
            console.log(this.listProperty);
            console.log('====================================');
        },
        onReachBottomHandler() {
            this.listProperty.params.pageNum++;
            this.init();
        },
        onPullDownRefreshHandler() {
            this.listProperty.params.pageNum = 1
            this.getData({
                api: 'address',
                fn: 'list'
            }, {}, true);
        },
    },
    setup() {
        const { proxy } = getCurrentInstance()
        const show = ref(false)
        // 打开弹窗
        const onhideShow = () => {
            show.value = true
        }
        const changeClick = (value, value2, value3, value4) => {
            console.log('地址选择器 = ' + value + value2 + value3 + value4);
        }
        //选中省市区
        const onsetCity = (e) => {
            console.log('====================================');
            console.log(e);
            console.log('====================================');
            show.value = false
        }
        const formData = reactive({
            recipientName: undefined,
            phoneNumber: undefined,
            district: undefined,
            postalCode: undefined,
            city: undefined,
            province: undefined,
            addressDetail: undefined,
        })
        const setDefault = () => {
            console.log('setDefault')
        }
        const add = () => {
            uni.navigateTo({
                url: '/pages/mine/address-add'
            })
        }
        const validateForm = () => {
            if (!formData.recipientName) {
                uni.showToast({ title: '请输入收货人', icon: 'none' });
                return false;
            }
            if (!formData.phoneNumber || !/^1[3-9]\d{9}$/.test(formData.phoneNumber)) {
                uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
                return false;
            }
            // 其他字段验证...
            return true;
        }
        // 保存方法
        const saveApi = () => {
            if (validateForm()) {
                // 实现保存逻辑
                console.log('保存地址:', formData);
            }
        }
        const addressData = ref([{
            name: '上官婉儿',
            phone: '13800138000',
            address: '北京市海淀区中关村软件园',
            isDefault: false,
            isCompany: true,
            id: Math.random().toString(36).substring(2, 9),
        },
        {
            name: '司空震',
            phone: '13800138000',
            address: '江西省吉安市吉水县东山中央首府11栋',
            isDefault: true,
            isHome: true,
            id: Math.random().toString(36).substring(2, 9),
        },
        {
            name: '苏烈',
            phone: '13800138000',
            address: '广东省深圳市南山区粤海街道109号6楼601',
            isDefault: false,
            id: Math.random().toString(36).substring(2, 9),
        },

        ])
        return {
            addressData,
            formData,
            setDefault,
            add,
            show,
            add,
            changeClick,
            onsetCity,
            onhideShow, saveApi
        }
    }
}
</script>
<style lang="scss" scoped>
.jy-pay-popup {
    width: 100%;
    height: 800rpx;
    border-radius: 30rpx;

    .title {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20rpx 0;
        // 底部边框显示
        color: #3D3D3D;
        font-size: 32rpx;
        border-bottom: 1px solid #E5E5E5;
    }

    .close-btn {
        position: absolute;
        top: 0;
        right: 0;
        height: 52rpx;
        line-height: 52rpx;
        width: 52rpx;
        background: #D8D8D8;
        font-size: 30rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        transform: translate(50%, -50%);
    }
}

.add-address-btn {
    background: linear-gradient(270deg, #FF9B27 20%, #FDC123 103%);
    font-size: 32rpx;
    color: #FFFFFF;
    width: 100%;
}
</style>