Client-Teapay/src/pages/xghc-addrress/userAddress.vue

<template>
    <uni-popup ref="popup" type="bottom">
        <view class="Address_container">
            <div class="tit flex_r flex_jb">
                <text class="cancel" v-if="isadd" @click="isadd = false">取消</text>
                <text v-else></text>
                <text class="close" @click="close">关闭</text>
            </div>
            <div class="s_con">
                <form @submit="formSubmit" v-if="isadd">
                    <view class='addAddress'>
                        <!-- <view class="pad30">
                            <view class='default acea-row borderRadius15'>
                                <textarea v-model="addressValue" placeholder="粘贴地址信息，自动拆分姓名、电话和地址" @blur="identify()" class="inputa-text" />
                            </view>
                        </view> -->
                        <view class="pad30 mt-22">
                            <view class='list borderRadius15'>
                                <view class='item acea-row row-between-wrapper'>
                                    <view class='name'>姓名</view>
                                    <input type='text' placeholder='请输入姓名' v-model="userAddress.name" class="inputa" />
                                </view>
                                <view class='item acea-row row-between-wrapper'>
                                    <view class='name'>联系电话</view>
                                    <input type='number' placeholder='请输入联系电话' v-model='userAddress.mobile' class="inputa" />
                                </view>
                                <view class='item acea-row row-between-wrapper'>
                                    <view class='name'>所在地区</view>
                                    <input type='text' placeholder='请填写具体地址' v-model='userAddress.region' @click="btnClick" disabled class="inputa" />
                                </view>
                                <view class='item acea-row row-between-wrapper'>
                                    <view class='name'>详细地址</view>
                                    <input type='text' placeholder='请填写具体地址' v-model='userAddress.address' class="inputa" />
                                </view>
                                <view class='item acea-row'>
                                    <view class='name'>默认地址</view>
                                    <uni-data-checkbox v-model="is_default" :localdata="range"></uni-data-checkbox>
                                </view>
                            </view>
                        </view>
                        <button class='keepBnt bg-color' form-type="submit">立即保存</button>
                    </view>
                </form>
                <div class="editaddress" v-else>
                    <view class="addbar" @click="onadd">
                        <text class="iconfont sp">&#xe760;</text>
                        <text class="sp">添加地址</text>
                    </view>
                    <uni-swipe-action class="swipeAction">
                        <uni-swipe-action-item class="swipeAction_item" v-for="(i,s) in addressList" :key="s">
                            <view class="addressLi clearfix" @click="onSelect(i,s)">
                                <view class="addressLi_l">
                                    <text v-if="i.id != presentId" class="iconfont">&#xe623;</text>
                                    <text v-else class="iconfont pitchOn">&#xe624;</text>
                                </view>
                                <view class="addressLi_r">
                                    <view class="user">
                                        <text class="name">{{i.name}}</text>
                                        <text>{{i.mobile}}</text>
                                        <text v-if="i.status == 1" class="defaultAddress">默认</text>
                                    </view>
                                    <view class="address">{{i.province + ' ' + i.city + ' ' + i.area + ' ' + i.street + ' ' + i.address}}</view>
                                </view>
                            </view>
                            <template v-slot:right>
                                <view class="btns clearfix">
                                    <view class="btn edit" @click="onedit(i)"><text class="iconfont">&#xe600;</text></view>
                                    <view class="btn del" @click="delAddress(i.id)"><text class="iconfont">&#xe601;</text></view>
                                </view>
                            </template>
                        </uni-swipe-action-item>
                    </uni-swipe-action>
                </div>
            </div>
        </view>
        <select-address :address.sync="address" ref='selectAddress' @change="changeAddress"/>
    </uni-popup>
</template>
<script>
import { post } from "@/request/api.js";
import selectAddress from "@/components/lcw-select-address/lcw-select-address.vue"
export default {
    components: {
        selectAddress
    },
    data() {
        return {
            userAddress: {}, //地址详情
            // addressValue: "",
            is_default: 0, //是否设为默认地址
            range: [{ "value": 0, "text": "否" }, { "value": 1, "text": "是" }],

            isadd: false,
            addressList: [],
            presentId: "", //当前选择地址的id

            address: {
                province: '',
                city: '',
                area: '',
                street: ''
            }
        }
    },
    created() {
        this.loadAddress();
    },
    methods: {
        btnClick() {
            this.$refs.selectAddress.open()
        },
        changeAddress(address){ //选择成功回调
            this.address = address;
            this.userAddress.region = ""
            for (const i in address) {
                if(i != "regional_code") this.userAddress.region += address[i] + " "
            }
        },

        // identify() {
        //     if (this.addressValue) {
        //         const da = smart(this.addressValue)
        //         let {province,city,county,street} = da
        //         street = street || ''
        //         let obj = {
        //             name: da.name,
        //             mobile: da.phone,
        //             address: da.address,
        //             region: province + ' ' + city + ' ' + county + ' ' + street
        //         }
        //         this.address = { province,city,area: county,street }
        //         this.$set(this,"userAddress",obj)
        //     }
        // },
        formSubmit() {
            let url;
            let { address, mobile, name } = this.userAddress
            let data = {
                ...this.address,
                address, mobile, name,
                is_default: this.is_default
            }
            if (this.userAddress.id) {
                url = "v1/user/editAddress";
                data.id = this.userAddress.id
            } else url = "v1/user/addAddress";
            post(url, data).then(res => {
                if (res.code === 0) {
                    this.$toast(res.msg);
                    this.loadAddress();
                    this.isadd = false;
                }
            })
        },
        // 获取用户地址
        loadAddress() {
            post("v1/user/addressList").then(res => {
                if (res.code === 0) {
                    this.addressList = res.data.data;
                }
            })
        },
        onSelect(i, s) {
            this.presentId = i.id;
            this.$emit('addressConfirm', i);
            this.close();
        },
        onadd() {
            this.isadd = true;
            this.userAddress = {};
        },
        onedit(da) {
            let {id,name,mobile,address,province,city,area,street,status, regional_code} = da
            this.userAddress = { id,name,mobile,address };
            this.address = { province,city,area,street, regional_code };
            this.userAddress.region = province + ' ' + city + ' ' + area + ' ' + street;
            this.is_default = status
            this.isadd = true
        },
        delAddress(id) {
            post("v1/user/delAddress", { id }).then(res => {
                if (res.code === 0) {
                    this.$toast(res.msg);
                    this.loadAddress();
                }
            })
        },
        open(da) {
            this.$refs.popup.open('bottom')
            if (da == "add") this.isadd = true
            else {
                this.isadd = false;
                this.presentId = da;
            }
        },
        close() {
            this.$refs.popup.close()
        }
    },
}
</script>
<style lang="scss" scoped>
.inputa-text{
    width: 100%;
    height: 160rpx;
    border: 1px solid #c0b5b5;
    border-radius: 16rpx;
    padding: 12rpx;
}
.Address_container {
    // height: 70vh;
    min-height: 70vh;
    background-color: #f5f5f5;
    border-radius: 30rpx 30rpx 0 0;
    overflow: hidden;
}

.tit {
    height: 100rpx;
    line-height: 100rpx;
    background: #fff;
    border-radius: 30rpx 30rpx 0 0;
    color: #333;

    .cancel {
        padding: 0 30rpx;
    }

    .close {
        // float: right;
        padding: 0 30rpx;
    }
}

.s_con {
    height: calc(100% - 100rpx);
    // overflow-y: auto;
    padding-top: 20rpx;

    .pad30 {
        padding: 0 30rpx
    }

    .p_center {
        text-align: center;
    }

    .acea-row {
        display: flex;
    }

    .row-middle {
        align-items: center
    }

    .row-between-wrapper {
        align-items: center;
        justify-content: space-between
    }

    .borderRadius15 {
        border-radius: 15rpx !important;
    }
}

.addAddress {
    width: 100%;

    .list {
        background-color: #fff;

        .item {
            padding: 30rpx;
            border-top: 1rpx solid #eee;

            // position: relative;
            .icon-dizhi {
                font-size: 36rpx !important;
            }

            .name {
                width: 180rpx;
                font-size: 30rpx;
                color: #333;
            }

            .address {
                flex: 1;
            }

            input {
                flex: 1;
                font-size: 0 30rpx;
            }
        }
    }

    .default {
        padding: 30rpx;
        background-color: #fff;
    }

    .keepBnt {
        width: 690rpx;
        height: 86rpx;
        border-radius: 50rpx;
        text-align: center;
        line-height: 86rpx;
        margin: 50rpx auto;
        font-size: 32rpx;
        color: #fff;
    }
}

.placeholder {
    color: #ccc;
}

.mt-22 {
    margin-top: 22rpx;
}

.bg-color {
    background-color: #2DB389;
}

.addbar {
    background: #fff;
    text-align: center;
    margin-bottom: 20rpx;
    padding: 36rpx 0;

    .iconfont {
        font-size: 46rpx;
        margin-right: 20rpx;
    }

    .sp {
        vertical-align: middle;
    }
}

.swipeAction {
    font-size: 28rpx;

    .addressLi {
        .addressLi_l {
            width: 80rpx;
            height: 80rpx;
            display: flex;
            align-items: center;

            .iconfont {
                color: #666;
                font-size: 38rpx;
            }

            .pitchOn {
                color: #1989fa;
            }
        }

        .addressLi_r {
            width: calc(100% - 80rpx);
        }

        .addressLi_l,
        .addressLi_r {
            float: left;
        }

        .user {
            margin-bottom: 10rpx;
        }

        .name {
            font-size: 32rpx;
            margin-right: 10rpx;
        }

        .address {
            font-size: 24rpx;
            color: #999;
            padding: 0;
        }
    }

    // .swipeAction_item {
    // background: #fff;
    // margin-bottom: 20rpx;
    // }

    .btns {
        .btn {
            float: left;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            padding: 0 30rpx;
            color: #fff;
            font-size: 36rpx;
        }

        .edit {
            background: rgba(25, 137, 250, 0.5);
        }

        .del {
            background: rgba(238, 10, 36, 0.5);
        }

        .iconfont {
            color: #fff;
        }
    }
}

::v-deep .uni-swipe_box {
    padding: 20rpx 30rpx;
    background: #fff;
    margin-bottom: 20rpx;
}

.defaultAddress {
    border: 1rpx solid #2DB389;
    color: #2DB389;
    border-radius: 6rpx;
    font-size: 18rpx;
    padding: 0 6rpx;
    margin-left: 20rpx;
}
</style>