jzmall_verify_uni/pages/ucenter/addressAdd/addressAdd.vue

<template>
    <view>
        <view class="add-address">
            <view class="add-form">
                <view class="form-item">
                    <view class="label">联系人</view>
                    <view class="content special-content">
                        <input class="input" @input="bindinputName" placeholder="姓名" :value="address.name" auto-focus placeholder-style="color:#999;font-size:26rpx;" />
                        <view class="gender-wrapper">
                            <view class="male" @tap="maleSelect">
                                <image src="https://mall.zhaijieshi.cc/file/wx-dy/radio-select.png" mode="asceptFit" v-if="gender == 1"></image>
                                <image src="https://mall.zhaijieshi.cc/file/wx-dy/radio-unselect.png" mode="asceptFit" v-else></image>
                                <text>先生</text>
                            </view>
                            <view class="female" @tap="femaleSelect">
                                <image src="https://mall.zhaijieshi.cc/file/wx-dy/radio-select.png" mode="asceptFit" v-if="gender == 2"></image>
                                <image src="https://mall.zhaijieshi.cc/file/wx-dy/radio-unselect.png" mode="asceptFit" v-else></image>
                                <text>女士</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="form-item">
                    <view class="label">电 话</view>
                    <view class="content">
                        <input
                            class="input"
                            @input="bindinputMobile"
                            :value="address.tel"
                            type="number"
                            placeholder="手机号码"
                            maxlength="11"
                            placeholder-style="color:#999;font-size:26rpx;"
                        />
                    </view>
                </view>
                <!-- bindtap="chooseRegion" -->
                <view class="form-item" @tap="goMap">
                    <view class="label">省市区</view>
                    <view class="content">
                        <image src="/static/images/address.png" style="width: 24rpx; height: 30rpx; margin: 12rpx 10rpx 0rpx 0" mode="asceptFit"></image>
                        <input
                            class="input"
                            :value="address.province + address.city + address.county"
                            :disabled="true"
                            placeholder="省份、城市、区县"
                            placeholder-style="color:#999;font-size:26rpx;"
                        />

                        <image src="/static/images/arrow.png" style="width: 12rpx; height: 20rpx; margin-right: 10rpx"></image>
                    </view>
                </view>
                <!-- <view class="form-item" bindtap="goWebView">
      <view class="label">地址</view>
      <view class="content">
        <image src="/static/images/address.png" style="width: 24rpx;height: 30rpx;margin:12rpx 10rpx 0rpx 0;" mode="asceptFit"></image>
        <input class="input" value="{{address.addressname}}" disabled="true" placeholder="请选择地址"  placeholder-style="color:#999;font-size:26rpx;"/>

        <image src="/static/images/arrow.png" style="width: 12rpx;height: 20rpx;margin-right: 10rpx;"></image>
      </view>
    </view> -->
                <view class="form-item">
                    <view class="label">地址</view>
                    <view class="content">
                        <input class="input" :value="address.addressname" @input="bindAddressDetail" placeholder="请输入详细地址" placeholder-style="color:#999;font-size:26rpx;" />
                    </view>
                </view>
                <view class="des" style="color: red">如地图返回地址不详，请手动补全</view>
                <view class="form-item">
                    <view class="label">门牌号</view>
                    <view class="content">
                        <input class="input" @input="bindinputAddress" :value="address.detail" placeholder="例：9号楼1505室" placeholder-style="color:#999;font-size:26rpx;" />
                    </view>
                </view>
            </view>

            <view class="form-default">
                <view class="switch-wrapper">
                    <text class="title">设为默认地址</text>
                    <switch class="switch" color="#00C0FF" :checked="address.isDefault == 1" @change="bindIsDefault" />
                </view>
            </view>
            <view class="des">*每次下单会默认推荐使用该地址</view>

            <!-- <view class="form-item" wx:if="{{address.id>0}}">
      <button style="background: #19B3FF;color: white;" data-address-id="{{address.id}}" bindtap="deleteAddress">删除地址</button>
    </view> -->

            <view class="btns" v-if="address.id > 0">
                <!-- <button class="cannel" bindtap="cancelAddress">取消</button> -->
                <button class="cannel" :data-address-id="address.id" @tap="deleteAddress">删除地址</button>
                <button class="save" @tap="saveAddress">确认修改</button>
            </view>
            <view v-else class="btns add-btn">
                <button class="save" @tap="saveAddress">保存地址</button>
            </view>

            <view class="region-select" v-if="openSelectRegion">
                <view class="hd">
                    <view class="region-selected">
                        <view
                            :class="'item ' + (item.code == 0 ? 'disabled' : '') + ' ' + (regionType - 1 === index ? 'selected' : '')"
                            @tap="selectRegionType"
                            :data-region-type-index="index"
                            v-for="(item, index) in selectRegionList"
                            :key="index"
                        >
                            {{ item.name }}
                        </view>
                    </view>
                    <view :class="'done ' + (selectRegionDone ? '' : 'disabled')" @tap="doneSelectRegion">确定</view>
                </view>
                <view class="bd">
                    <scroll-view scroll-y class="region-list">
                        <view :class="'item ' + (item.selected ? 'selected' : '')" @tap="selectRegion" :data-region-index="index" v-for="(item, index) in regionList" :key="index">
                            {{ item.name }}
                        </view>
                    </scroll-view>
                </view>
            </view>
        </view>
        <view class="bg-mask" @tap="cancelSelectRegion" v-if="openSelectRegion"></view>

        <!-- 弹框地址超过2公里 -->
        <view class="goods-info-overlay" v-if="overDistinctTips1">
            <view class="goods-info-popup" cantap="onDiaClick">
                <view class="popup-title">提示</view>
                <view class="tips-title">您填写的详细地址不在选择的定位区域，请检查地图定位、小区名称、门牌号。</view>
                <view class="popup-bottom">
                    <view class="btn-cancel" @tap="continueModifyAddress">仍然提交</view>
                    <view class="btn-conf" @tap="onOverDiaClose">确定</view>
                </view>
            </view>
        </view>

        <!-- 弹框地址超过2公里 -->
        <view class="goods-info-overlay" v-if="overDistinctTips2">
            <view class="goods-info-popup">
                <view class="popup-title">提示</view>
                <view class="tips-title">地址有误，可能会影响您的服务体验，服务人员将再次与您电话核实，请注意接听来电。</view>
                <view class="popup-bottom">
                    <view class="btn-cancel" @tap="continueModifyAddress">仍然提交</view>
                    <view class="btn-conf" @tap="onOverDiaClose">返回修改</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
var check = require('../../../utils/check.js');
var area = require('../../../utils/area.js');
// const chooseLocation = requirePlugin('chooseLocation');
var app = getApp();
export default {
    data() {
        return {
            overDistinctTips1: false,
            overDistinctTips2: false,
            gender: '1',
            selectAddress: '',
            isChange: 0,

            address: {
                id: 0,
                areaCode: 0,
                address: '',
                name: '',
                tel: '',
                isDefault: 0,
                province: '',
                city: '',
                county: '',
                latitude: '',
                longitude: '',
                addressDetail: '',
                detail: '',
                addressname: ''
            },

            addressId: 0,
            openSelectRegion: false,

            selectRegionList: [
                {
                    code: 0,
                    name: '省份'
                },
                {
                    code: 0,
                    name: '城市'
                },
                {
                    code: 0,
                    name: '区县'
                }
            ],

            regionType: 1,
            regionList: [],
            selectRegionDone: false,
            addressShow: false
        };
    },
    onLoad: function (options) {
        // 页面初始化 options为页面跳转所带来的参数
        //console.log(options)
        if (options.id && options.id != 0) {
            this.setData({
                addressId: options.id
            });
            this.getAddressDetail();
        }
        app.globalData.mapSelectFinish = false;
        //初始化area
        //area.init();
    },
    onReady: function () {},
    onShow: function () {
        // if(app.globalData.webAddress!=null){
        //   this.setData({
        //     'address.addressname':app.globalData.webAddress.address
        //   })
        // }

        // 页面显示
        // const location = chooseLocation.getLocation();
        // address.province = location.province;
        // address.city = location.city;
        // address.county = location.district;
        // address.addressname = location.name;

        //  let that=this;
        //   wx.getLocation({
        //     success(location) {
        //       console.log(`经度${location.longitude}，维度${location.latitude}`);
        //       console.log(location);
        //       if (location != null) {
        //         let address = that.data.address;

        //         address.lat = location.latitude;
        //         address.lng = location.longitude;
        //         that.setData({
        //           address: address
        //         });
        //         console.log(that.data.address);
        //         that.getAreaCode();
        //       }

        //     },
        //     fail(res) {
        //       console.log(`getLocation调用失败`);
        //     },
        //   });

        if (app.globalData.mapSelectFinish) {
            let poi = app.globalData.mapSelectPoi;
            let location = poi.location;
            let address = this.address;
            address.lng = location.split(',')[0];
            address.lat = location.split(',')[1];
            address.addressname = poi.address;
            this.setData({
                address: address,
                selectAddress: poi.address
            });
            console.log(this.address);
            this.getAreaCode();
        }
    },
    onHide: function () {
        // 页面隐藏
    },
    onUnload: function () {
        // 页面关闭
        // chooseLocation.setLocation(null);
    },
    methods: {
        onOverDiaClose() {
            this.setData({
                overDistinctTips1: false,
                overDistinctTips2: false
            });
        },

        continueModifyAddress() {
            //继续修改地址
            console.info(this.overDistinctTips1);
            if (this.overDistinctTips1) {
                this.setData({
                    overDistinctTips1: false,
                    overDistinctTips2: true
                });
            } else {
                this.setData({
                    overDistinctTips2: false
                });
                this.submitAddress();
            }
        },

        bindinputMobile(event) {
            let address = this.address;
            address.tel = event.detail.value;
            this.setData({
                address: address
            });
        },

        bindinputName(event) {
            let address = this.address;
            address.name = event.detail.value;
            this.setData({
                address: address
            });
        },

        bindinputAddress(event) {
            let address = this.address;
            address.detail = event.detail.value.replace(/[,，]/g, '');
            this.setData({
                address: address
            });
            // return value.replace(/[,，]/g,'');
        },

        bindAddressDetail(event) {
            let address = this.address;
            address.addressname = event.detail.value.replace(/[,，]/g, '');
            this.setData({
                address: address
            });
        },

        bindIsDefault() {
            let address = this.address;
            address.isDefault = !address.isDefault;
            this.setData({
                address: address
            });
        },

        getAddressDetail() {
            let that = this;
            util.request(api.AddressDetail, {
                id: that.addressId
            }).then(function (res) {
                if (res.errno === 0) {
                    if (res.data) {
                        that.setData({
                            address: res.data,
                            gender: res.data.gender
                        });
                        let addressDetailList = res.data.addressDetail.split(',');
                        let address = that.address;
                        address.addressname = addressDetailList[0];
                        address.detail = addressDetailList.length > 1 ? addressDetailList[1] : '';
                        that.setData({
                            address: address,
                            selectAddress: addressDetailList[0]
                        });
                    }
                }
            });
        },

        setRegionDoneStatus() {
            let that = this;
            let doneStatus = that.selectRegionList.every((item) => {
                return item.code != 0;
            });
            that.setData({
                selectRegionDone: doneStatus
            });
        },

        chooseRegion() {
            let that = this;
            this.setData({
                openSelectRegion: !this.openSelectRegion
            });

            //设置区域选择数据
            let address = this.address;
            if (address.areaCode > 0) {
                let selectRegionList = this.selectRegionList;
                console.info(selectRegionList);
                selectRegionList[0].code = address.areaCode.slice(0, 2) + '0000';
                selectRegionList[0].name = address.province;
                selectRegionList[1].code = address.areaCode.slice(0, 4) + '00';
                selectRegionList[1].name = address.city;
                selectRegionList[2].code = address.areaCode;
                selectRegionList[2].name = address.county;
                let regionList = area.getList('county', address.areaCode.slice(0, 4));
                regionList = regionList.map((item) => {
                    //标记已选择的
                    if (address.areaCode === item.code) {
                        item.selected = true;
                    } else {
                        item.selected = false;
                    }
                    return item;
                });
                this.setData({
                    selectRegionList: selectRegionList,
                    regionType: 3,
                    regionList: regionList
                });
            } else {
                let selectRegionList = [
                    {
                        code: 0,
                        name: '省份'
                    },
                    {
                        code: 0,
                        name: '城市'
                    },
                    {
                        code: 0,
                        name: '区县'
                    }
                ];
                this.setData({
                    selectRegionList: selectRegionList,
                    regionType: 1,
                    regionList: area.getList('province')
                });
            }
            this.setRegionDoneStatus();
        },

        selectRegionType(event) {
            console.info('selectRegionType');
            let that = this;
            let regionTypeIndex = event.target.dataset.regionTypeIndex;
            let selectRegionList = that.selectRegionList;

            //判断是否可点击
            if (regionTypeIndex + 1 == this.regionType || (regionTypeIndex - 1 >= 0 && selectRegionList[regionTypeIndex - 1].code <= 0)) {
                return false;
            }
            let selectRegionItem = selectRegionList[regionTypeIndex];
            let code = selectRegionItem.code;
            let regionList;
            if (regionTypeIndex === 0) {
                // 点击省级，取省级
                regionList = area.getList('province');
            } else if (regionTypeIndex === 1) {
                // 点击市级，取市级
                regionList = area.getList('city', code.slice(0, 2));
            } else {
                // 点击县级，取县级
                console.info(code);
                regionList = area.getList('county', code.slice(0, 4));
                console.info(regionList);
            }
            regionList = regionList.map((item) => {
                //标记已选择的
                if (that.selectRegionList[regionTypeIndex].code == item.code) {
                    item.selected = true;
                } else {
                    item.selected = false;
                }
                return item;
            });
            this.setData({
                regionList: regionList,
                regionType: regionTypeIndex + 1
            });
            this.setRegionDoneStatus();
        },

        selectRegion(event) {
            let that = this;
            let regionIndex = event.target.dataset.regionIndex;
            let regionItem = this.regionList[regionIndex];
            let regionType = this.regionType;
            let selectRegionList = this.selectRegionList;
            selectRegionList[regionType - 1] = regionItem;
            if (regionType == 3) {
                this.setData({
                    selectRegionList: selectRegionList
                });
                let regionList = that.regionList.map((item) => {
                    //标记已选择的
                    if (that.selectRegionList[that.regionType - 1].code == item.code) {
                        item.selected = true;
                    } else {
                        item.selected = false;
                    }
                    return item;
                });
                this.setData({
                    regionList: regionList
                });
                this.setRegionDoneStatus();
                return;
            }

            //重置下级区域为空
            selectRegionList.map((item, index) => {
                if (index > regionType - 1) {
                    item.code = 0;
                    item.name = index == 1 ? '城市' : '区县';
                }
                return item;
            });

            //console.info(selectRegionList);

            this.setData({
                selectRegionList: selectRegionList,
                regionType: regionType + 1
            });
            let code = regionItem.code;
            let regionList = [];
            if (regionType === 1) {
                // 点击省级，取市级
                regionList = area.getList('city', code.slice(0, 2));
            } else {
                // 点击市级，取县级
                regionList = area.getList('county', code.slice(0, 4));
            }
            this.setData({
                regionList: regionList
            });
            this.setRegionDoneStatus();
        },

        doneSelectRegion() {
            if (this.selectRegionDone === false) {
                return false;
            }
            let address = this.address;
            let selectRegionList = this.selectRegionList;
            address.province = selectRegionList[0].name;
            address.city = selectRegionList[1].name;
            address.county = selectRegionList[2].name;
            address.areaCode = selectRegionList[2].code;
            this.setData({
                address: address,
                openSelectRegion: false
            });
        },

        cancelSelectRegion() {
            this.setData({
                openSelectRegion: false,
                regionType: this.regionDoneStatus ? 3 : 1
            });
        },

        cancelAddress() {
            uni.navigateBack();
        },

        saveAddress() {
            console.log(this.address);
            let address = this.address;
            if (address.name == '') {
                util.showErrorToast('请输入姓名');
                return false;
            }
            if (this.gender == null || this.gender == '') {
                util.showErrorToast('请选择性别');
                return false;
            }
            if (address.tel == '') {
                util.showErrorToast('请输入手机号码');
                return false;
            }
            if (address.areaCode == 0) {
                util.showErrorToast('请输入省市区');
                return false;
            }
            if (address.addressname == '') {
                util.showErrorToast('请输入详细地址');
                return false;
            }
            if (address.detail == '') {
                util.showErrorToast('请输入门牌号');
                return false;
            }
            if (!check.isValidPhone(address.tel)) {
                util.showErrorToast('手机号不正确');
                return false;
            }
            if (this.selectAddress != address.addressname) {
                this.setData({
                    isChange: 1
                });
            } else {
                this.setData({
                    isChange: 0
                });
            }
            if (this.isChange == 1) {
                util.request(api.AddressChcek, this.getAddressInfo(), 'POST').then((res) => {
                    if (res.errno == 601) {
                        this.setData({
                            overDistinctTips1: true
                        });
                    }
                });
            } else {
                this.submitAddress();
            }
        },

        submitAddress() {
            let that = this;
            util.request(api.AddressSave, this.getAddressInfo(), 'POST').then(function (res) {
                if (res.errno === 0) {
                    //返回之前，先取出上一页对象，并设置addressId
                    var pages = getCurrentPages();
                    var prevPage = pages[pages.length - 2];
                    console.log(prevPage);
                    if (prevPage.route == 'pages/index/index') {
                        var city = address.city.indexOf('市') < 0 ? address.province : address.city;
                        var addresInfo = {
                            city: city,
                            lng: res.data.lng,
                            lat: res.data.lat,
                            shopId: res.data.shopId,
                            address: res.data.addressDetail
                        };
                        uni.setStorageSync('addressInfo', addresInfo);
                    } else if (prevPage.route == 'pages/checkout/checkout') {
                        // ||prevPage.route == "pages/ucenter/appointOrder/appointOrder"
                        prevPage.setData({
                            addressId: res.data.id
                        });
                        try {
                            uni.setStorageSync('addressId', res.data);
                            uni.setStorageSync('addressName', addressString);
                        } catch (e) {
                            console.log('CatchClause', e);
                            console.log('CatchClause', e);
                        }
                        console.log('set address');
                    } else if (prevPage.route == 'pages/ucenter/appointOrder/appointOrder') {
                        prevPage.setData({
                            addressShow: true
                        });
                    }
                    uni.navigateBack();
                } else {
                    uni.showModal({
                        title: '提醒',
                        showCancel: false,
                        content: res.errmsg
                    });
                }
            });
        },

        getAddressInfo() {
            let address = this.address;
            let addressString = address.detail == '' ? address.addressname : address.addressname + ',' + address.detail;
            return {
                gender: this.gender,
                id: address.id,
                name: address.name,
                tel: address.tel,
                province: address.province,
                city: address.city,
                county: address.county,
                areaCode: address.areaCode,
                addressDetail: addressString,
                isDefault: address.isDefault,
                lat: Number(address.lat).toFixed(5),
                lng: Number(address.lng).toFixed(5),
                isChange: this.isChange
            };
        },

        deleteAddress(event) {
            console.log(event.target);
            let that = this;
            uni.showModal({
                title: '',
                content: '确定要删除地址？',
                success: function (res) {
                    if (res.confirm) {
                        let addressId = event.target.dataset.addressId;
                        util.request(
                            api.AddressDelete,
                            {
                                id: addressId
                            },
                            'POST'
                        ).then(function (res) {
                            if (res.errno === 0) {
                                uni.navigateBack({
                                    delta: 1,
                                    success: function () {}
                                });
                                // that.getAddressList();
                                // wx.removeStorage({
                                //   key: 'addressId',
                                //   success: function(res) {},
                                // })
                            }
                        });

                        console.log('用户点击确定');
                    }
                }
            });
            return false;
        },

        goMap() {
            // const key = "JA2BZ-XGOEU-UNZVD-46G64-S6MYJ-6BBF4";
            //使用在腾讯位置服务申请的key
            // const key = '6TRBZ-XXC6F-BWWJB-N75ME-BQNOF-YKFQY';
            // const referer = '鲸致生活LifePlus';

            // const category = '小区,生活服务,娱乐休闲';
            // wx.navigateTo({
            //   url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&category=' + category
            // });
            let that = this;
            // wx.authorize({
            //   scope: "scope.userLocation",
            //   success: (res) => {
            //     console.log("authorize", res);
            uni.chooseLocation({
                success: (location) => {
                    console.log('chooseLocation success: ', location);
                    console.log(`经度${location.longitude}，维度${location.latitude}`);
                    console.log(location);
                    if (location != null) {
                        let address = that.address;
                        address.lat = location.latitude;
                        address.lng = location.longitude;
                        address.addressname = location.address;
                        that.setData({
                            address: address,
                            selectAddress: location.address
                        });
                        console.log(that.address);
                        that.getAreaCode();
                    }
                },
                fail: (err) => {
                    console.log('chooseLocation fail: ' + err.errMsg);
                }
            });
            //   },
            //   fail: () => {
            //     wx.openSetting({});
            //   },
            // });
        },

        goMap() {
            console.log('gomap');
            app.globalData.mapSelectFinish = false;
            if (this.address.lng && this.address.lat) {
                let city = this.address.city == '市辖区' ? this.address.province : this.address.city;
                uni.navigateTo({
                    url: '/pages/map/mapContent/mapContent?lng=' + this.address.lng + '&lat=' + this.address.lat + '&addressname=' + this.address.addressname + '&city=' + city
                });
            } else {
                uni.navigateTo({
                    url: '/pages/map/mapContent/mapContent'
                });
            }
        },

        maleSelect() {
            this.setData({
                gender: 1
            });
        },

        femaleSelect() {
            this.setData({
                gender: 2
            });
        },

        getAreaCode() {
            let param = {
                location: this.address.lng + ',' + this.address.lat,
                extensions: 'all',
                key: api.gdKey,
                radius: 3000
            };
            uni.request({
                url: api.gdUrl,
                data: param,
                method: 'GET',
                header: {
                    'Content-Type': 'application/json'
                },
                success: (res) => {
                    console.log(res);
                    if (res.data.infocode == '10000') {
                        if (res.data.info == 'OK') {
                            let regeocode = res.data.regeocode.addressComponent;
                            let cityName = regeocode.city == null || regeocode.city.length == 0 ? regeocode.province : regeocode.city;
                            let district = regeocode.district == null || regeocode.district.length == 0 ? '' : regeocode.district;
                            this.setData({
                                ['address.areaCode']: regeocode.adcode,
                                ['address.province']: regeocode.province,
                                ['address.city']: cityName,
                                ['address.county']: district
                                // ['address.addressname']:res.data.result.address
                            });
                        } else {
                            uni.showToast({
                                title: '获取地区码失败',
                                icon: 'none',
                                duration: 3000
                            });
                        }
                    } else {
                        uni.showToast({
                            title: '获取地区码失败',
                            icon: 'none',
                            duration: 3000
                        });
                    }
                },
                fail: function (err) {
                    reject(err);
                }
            });
        },

        goWebView() {
            app.globalData.webAddress = null;
            uni.navigateTo({
                url: '/pages/ucenter/addressChoose/addressChoose'
            });
        }
    }
};
</script>
<style>
page {
    height: 100%;
    background: #f4f4f4;
    padding: 30rpx;
}

.add-address .add-form {
    background: #fff;
    width: 680rpx;
    height: auto;
    overflow: hidden;
    border-radius: 10rpx;
}

.add-address .form-item {
    height: 88rpx;
    padding-left: 30rpx;
    /* border-bottom: 1px solid #d9d9d9; */
    display: flex;
    align-items: center;
    padding-right: 28rpx;
}

.add-address .input {
    flex: 1;
    height: 44rpx;
    line-height: 44rpx;
    overflow: hidden;
    margin-top: 10rpx;
}
.add-address .label {
    font-size: 30rpx;
    color: #333;
    /* font-weight: bold; */
    margin-right: 28rpx;
    width: 126rpx;
    text-align: left;
    font-weight: 500;
}
.add-address .content {
    border-bottom: 2rpx solid #f2f2f2;
    height: 88rpx;
    line-height: 88rpx;
    align-content: center;
    /* padding: 40rpx 0 0; */
    width: 100%;
    display: flex;
    align-items: center;
}

.add-address .form-default {
    height: 100rpx;
    background: #fff;
    margin-top: 30rpx;
    border-radius: 10rpx;
    width: 680rpx;
}
.switch-wrapper {
    width: 680rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
}
.switch-wrapper .switch {
    font-size: 24rpx;
    /* width:82rpx;
  height: 44rpx; */
}

.add-address .form-default .title {
    font-size: 30rpx;
    /* font-weight: bold; */
    color: #333;
}
.add-address .des {
    color: #999;
    line-height: 44rpx;
    height: 44rpx;
    font-size: 22rpx;
    padding-left: 30rpx;
    margin-top: 10rpx;
}

.add-address .form-default .van-checkbox .van-icon {
    color: #fff;
}

.add-address .btns {
    position: fixed;
    bottom: 50rpx;
    left: 30rpx;
    right: 30rpx;
    overflow: hidden;
    display: flex;
    height: 88rpx;
    /* width: 100%; */
}

.add-address .cannel,
.add-address .save {
    flex: 1;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 30rpx;
    color: #fff;
    border: none;
    border-radius: 10rpx;
    outline: none;
    position: static;
}
.add-address .cannel::after,
.add-address .save::after {
    border: none;
}
.add-address .cannel {
    color: #333;
    margin-right: 18rpx;
    border: 2rpx solid #999999;
    border-radius: 10rpx;
}

.add-address .save {
    background: #00c0ff;
}

.region-select {
    width: 100%;
    height: 600rpx;
    background: #fff;
    position: fixed;
    z-index: 10;
    left: 0;
    bottom: 0;
}

.region-select .hd {
    height: 108rpx;
    width: 100%;
    border-bottom: 1px solid #f4f4f4;
    padding: 46rpx 30rpx 0 30rpx;
}

.region-select .region-selected {
    float: left;
    height: 60rpx;
    display: flex;
}

.region-select .region-selected .item {
    max-width: 140rpx;
    margin-right: 30rpx;
    text-align: left;
    line-height: 60rpx;
    height: 100%;
    color: #333;
    font-size: 28rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.region-select .region-selected .item.disabled {
    color: #999;
}

.region-select .region-selected .item.selected {
    color: #b4282d;
}

.region-select .done {
    float: right;
    height: 60rpx;
    width: 60rpx;
    border: none;
    background: #fff;
    line-height: 60rpx;
    text-align: center;
    color: #333;
    font-size: 28rpx;
}

.region-select .done.disabled {
    color: #999;
}

.region-select .bd {
    height: 492rpx;
    width: 100%;
    padding: 0 30rpx;
}

.region-select .region-list {
    height: 492rpx;
}

.region-select .region-list .item {
    width: 100%;
    height: 104rpx;
    line-height: 104rpx;
    text-align: left;
    color: #333;
    font-size: 28rpx;
}

.region-select .region-list .item.selected {
    color: #b4282d;
}

.bg-mask {
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8;
}
.add-address .form-item:last-child .content {
    border-bottom: none;
}
.add-address .btns.add-btn {
    height: 100rpx;
}
.add-address .btns.add-btn .save {
    height: 100rpx;
    border-radius: 100rpx;
    border: none;
    outline: none;
}
.add-address .btns.add-btn .save::after {
    border: none;
}
.gender-wrapper image {
    width: 26rpx;
    height: 26rpx;
    margin-right: 10rpx;
}
.gender-wrapper {
    display: flex;
    align-items: center;
    height: 96rpx;
    justify-content: space-between;
    width: 220rpx;
}
.male,
.female {
    display: flex;
    align-items: center;
    height: 96rpx;
}

/* 弹框地址超过2公里 */
.goods-info-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
}

.goods-info-popup {
    width: 622rpx;
    border-radius: 24rpx;
    background: #fff;
    overflow: hidden;
}

.popup-title {
    height: 94rpx;
    line-height: 94rpx;
    text-align: center;
    color: #ffffff;
    font-size: 34rpx;
    background: url('https://mall.zhaijieshi.cc/file/jzmall-dy/verify-dy-title.png') no-repeat center center;
    background-size: 100% 100%;
    background-color: #008dff;
}

.tips-title {
    height: 180rpx;
    line-height: 40rpx;
    padding: 34rpx 32rpx;
    font-weight: 600;
    color: #191919;
    font-size: 28rpx;
}

.goods-info-popup .goods {
    display: flex;
    padding: 24rpx 20rpx 22rpx 22rpx;
}

.goods .img image {
    height: 168rpx;
    width: 168rpx;
    overflow: hidden;
    border-radius: 8rpx;
}

.goods .info {
    height: 168rpx;
    flex: 1;
    padding-left: 18rpx;
}

.info-main {
    display: flex;
    height: 40rpx;
    align-items: center;
    justify-content: space-between;
}

.info .sku-name {
    color: #666666;
    font-size: 24rpx;
    margin: 12rpx 0;
    height: 34rpx;
    line-height: 34rpx;
}

.product-name {
    line-height: 40rpx;
    font-size: 28rpx;
    /* padding-left: 20rpx;
  text-indent: -16rpx; */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 310rpx;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.9);
}

.info-main .price {
    color: rgba(0, 0, 0, 0.9);
    font-size: 24rpx;
    font-weight: bold;
}

.info .other-info {
    font-size: 24rpx;
    color: rgba(0, 0, 0, 0.9);
    line-height: 34rpx;
}

.popup-bottom {
    height: 106rpx;
    padding: 14rpx 104rpx 34rpx;
    display: flex;
    justify-content: space-between;
}

.btn-cancel {
    height: 58rpx;
    line-height: 58rpx;
    border-radius: 58rpx;
    width: 162rpx;
    text-align: center;
    color: #0091ff;
    font-size: 24rpx;
    border: 2rpx solid #0091ff;
}

.btn-conf {
    height: 58rpx;
    line-height: 58rpx;
    border-radius: 58rpx;
    width: 162rpx;
    text-align: center;
    color: #fff;
    font-size: 24rpx;
    background: linear-gradient(270deg, #00baff 0%, #008dff 100%);
}
</style>