xmhjc-applet/pages/myinfo/address.vue

<template>
	<view class="bg">
        <view v-for="(item,index) in list" :key="index" class="address">
            <view @click="selectAddressToPage(item)" class="address_text">
                <view class="text1">
                    <view>{{item.contact}}</view>
                    <view style="margin-left:8rpx">{{item.contactPhone}}</view>
                    <view v-if="item.defaultAddress == '1'" class="mr">默认</view>
                </view>
                <view class="text2">
                    {{item.address}}
                </view>
            </view>
            <view @click="openPopup(item)">
                <u--image width="40rpx" height="40rpx" src="/static/myinfo/iconm_bianj.png" ></u--image>
            </view>
        </view>

        <view class="btnbox">
            <view @click="openPopup()" class="btn">
                新增
            </view>
        </view>

        <u-popup :closeable='true' :round="10" :show="popupShow" @close="close" @open="open">
            <view class="popupView">
                <view class="scrollview">
                    <u--form :rules="rules" labelPosition="left" :model="form"  ref="uForm">
                        <u-form-item prop="contact" :labelWidth="labelWidth" label="姓名"  borderBottom >
                            <u--input placeholder="请输入姓名" v-model="form.contact" border="none" ></u--input>
                        </u-form-item>
                        <u-form-item prop="contactPhone" :labelWidth="labelWidth" label="手机号" borderBottom >
                            <u--input placeholder="请输入手机号" v-model="form.contactPhone" border="none" ></u--input>
                        </u-form-item>
                        <u-form-item prop="address" :labelWidth="labelWidth" label="详细地址"   borderBottom >
                            <u--textarea maxlength="100" v-model="form.address" border="none" placeholder="请输入详细地址" ></u--textarea>
                            <!-- <u--input placeholder="请输入详细地址" v-model="form.address" border="none" ></u--input> -->
                        </u-form-item>
                        
                        <u-form-item prop="switch" :labelWidth="labelWidth" label="设为默认地址" borderBottom >
                            <u-switch v-model="defaultAddress" ></u-switch>
                        </u-form-item>
                    </u--form>

                    <view style="color: red;" @click="deladdress()" v-if="ismodify">
                        删除
                    </view>
                </view>
            </view>
            
            <view class="btnbox" style="left: 24rpx;">
                <view @click="submit" class="btn">
                    保存
                </view>
            </view>
		</u-popup>
    </view>
</template>

<script>
import {
    deliveryAddressList,
        addDeliveryAddress,
        delDeliveryAddressList,
        modifyDeliveryAddress
    } from '@/http/api/common.js'
import * as util from '@/pages/util/util.js'
export default {

data() {
    return {
        list:[],
        defaultAddress:true,
        ismodify:false,
        form:{
            contact:'',
            contactPhone:'',
            address:'',
            defaultAddress:'0'
        },
        labelWidth:100,
        popupShow:false,
        rules: {
            'contact': {
                type: 'string',
                required: true,
                message: '请填写姓名',
                trigger: ['blur', 'change']
            },
            'contactPhone':[ 
                {
                    type: 'string',
                    required: true,
                    message: '请输入手机号',
                    trigger: ['blur', 'change']
                },
                {
                    validator: (rule, value, callback) => {
                        return uni.$u.test.mobile(value);
                    },
                    message: '手机号码格式不正确',
                    // 触发器可以同时用blur和change
                    trigger: ['blur'],
                }
            ],
            'address': {
                type: 'string',
                required: true,
                message: '请输入详细地址',
                trigger: ['blur', 'change']
            },
            selectAddress:false
        },
    }
},
components: {
    // appitem,
},
onLoad(e) {
    if (e?.selectAddress == '1') {
        this.selectAddress = true
    }
    //获取地址列表
    this.getdeliveryAddressList()
},
onReady() {
    //如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    this.$refs.uForm?.setRules(this.rules)
},

methods: {
    selectAddressToPage(item){
        if (this.selectAddress) {
            uni.setStorageSync('selectAddress', JSON.stringify(item))
            uni.navigateBack({
                 delta: 1
            });
        }
    },
    async getdeliveryAddressList(){
        let res = await deliveryAddressList()

        if (res.data.code == 200) {
            this.list = res.data.data
        }
        
    },
    async deladdress(){
        if (this.form?.id != '') {
            let res = await delDeliveryAddressList(this.form?.id)

            if (res.data.code == 200) {
                util.toastFunc('删除成功',()=>{
                    this.getdeliveryAddressList()
                    this.popupShow = false
                })
            }
            
        }
        
    },
    async submit(){
        this.$refs.uForm.validate().then(async uFormRes => {
            this.form.defaultAddress = this.defaultAddress ? '1' : '0'
            let res = {
                data:{
                    code:500
                }
            }
            if (this.ismodify) {
                //修改
                res = await modifyDeliveryAddress(this.form,this.form.id)
            }else{
                //新增
                res = await addDeliveryAddress(this.form)
            }
            
            let msg = this.ismodify ? '修改成功' : '添加成功'
            if (res.data.code == 200) {
                util.toastFunc(msg,()=>{
                    this.getdeliveryAddressList()
                    this.popupShow = false
                })
            }
            
        }).catch(errors => {
            
        })
    },
    open() {
        // console.log('open');
    },
    close() {
        this.popupShow = false
        // console.log('close');
    },
    openPopup(data=null){
        if (data) {
            this.ismodify = true //是否修改 true为修改模式
            this.form = data
            this.defaultAddress = data.defaultAddress=='1'?true:false
            
            this.popupShow = true
        }else{
            //新增 置空表单数据
            this.form = {
                contact:'',
                contactPhone:'',
                address:'',
                defaultAddress:'0'
            }
            this.ismodify = false
            this.popupShow = true
        }
    }

}
}
</script>

<style lang="scss">
.bg{
    width: 750rpx;
    height: auto;
    min-height: 100vh;
    background: #F1F1F1;
    border-radius: 0rpx 0rpx 0rpx 0rpx;

    display: flex;
    flex-direction: column;
    align-items: center;
}
.address{
    width: 702rpx;
    min-height: 180rpx;
    background: #FFFFFF;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;

    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 24rpx;

    padding: 20rpx 0;
}
.address_text{
    display: flex;
    flex-direction: column;
}
.text1{
    display: flex;
    align-items: center;

    min-height: 45rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
}
.text2{
    width: 547rpx;
    min-height: 80rpx;
    font-size: 28rpx;
    font-weight: 500;
    color: #666666;
}
.btnbox{
    position: fixed;
    bottom: 20rpx;
}
.btn{
    width: 702rpx;
    height: 80rpx;
    background: #46A6FF;
    border-radius: 64rpx 64rpx 64rpx 64rpx;
    opacity: 1;

    font-size: 28rpx;
    font-weight: 500;
    color: #FFFFFF;
    line-height: 80rpx;
    text-align: center;
}
.mr{
    width: 64rpx;
    height: 32rpx;
    background: #FF8C33;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    opacity: 1;

    font-size: 24rpx;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;

    margin-left: 12rpx;
}
</style>