uniapp-ZHSQ/packages/shop/addAddress/index.vue

<template>
    <view class="container">
        <div class="row">
            <div class="row_label"><span>*</span>收货人</div>
            <div class="row_con">
                <u--input placeholder="请输入姓名" clearable border="none" v-model="value" @change="change"></u--input>
            </div>
        </div>

        <div class="row">
            <div class="row_label"><span>*</span>手机号</div>
            <div class="row_con">
                <u--input placeholder="请输入手机号" clearable border="none" v-model="value" @change="change"></u--input>
            </div>
        </div>

        <div class="tabList">
            <div class="tabItem" :class="{ 'active': tab == 0 }" @click="changeTab(0)">地图选址</div>
            <div class="tabItem" :class="{ 'active': tab == 1 }" @click="changeTab(1)">地区选择</div>
        </div>

        <div class="tabItems" v-if="tab == 0">
            <div class="row">
                <div class="row_label">地址</div>
                <div class="row_con">
                    <div class="choseAddress" @click="chooseAddress">
                        请选择地址
                    </div>

                    <div class="currentAddress">
                        <div class="currentAddress1">
                            <div class="currentAddress1_left">当前定位：和平里社区综合 服务站</div>
                            <div class="currentAddress1_right">使用</div>
                        </div>
                        <div class="currentAddress2">河北衡水市桃城区</div>
                    </div>

                </div>
            </div>
            <div class="row">
                <div class="row_label">门牌号</div>
                <div class="row_con noneborder">
                    <u--input placeholder="例：6栋201室" clearable border="none" v-model="value"
                        @change="change"></u--input>
                    <!-- <div class="tips">记得完善门牌号</div> -->
                </div>
            </div>
        </div>

        <div class="tabItems" v-if="tab == 1">
            <view>
                <picker-view indicator-style="height: 50px;" style="width: 100%; height: 400rpx;" :value="id"
                    @change="bindChange">
                    <picker-view-column>
                        <view v-for="(item, index) in provList" :key="index"
                            style="line-height: 50px; text-align: center;">{{ item.short_name }}</view>
                    </picker-view-column>
                    <picker-view-column>
                        <view v-for="(item, index) in defaultCity" :key="index"
                            style="line-height: 50px; text-align: center;">{{ item.short_name }}</view>
                    </picker-view-column>
                    <picker-view-column>
                        <view v-for="(item, index) in defaultDist" :key="index"
                            style="line-height: 50px; text-align: center;">{{ item.short_name }}</view>
                    </picker-view-column>
                </picker-view>
            </view>

            <div class="row">
                <div class="row_label"><span>*</span>详细地址</div>
                <div class="row_con">
                    <u--input placeholder="小区、门牌号" clearable border="none" v-model="value" @change="change"></u--input>
                </div>
            </div>
        </div>

        <div class="line"></div>
        <div class="isdef">
            <div class="isdef_left">
                <div class="isdef_left1">设置默认地址</div>
                <div class="isdef_left2">提醒：下单时会优先选择</div>
            </div>
            <div class="isdef_right">
                <img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check1.png" alt="" />
                <!-- <img src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_check2.png" alt=""  /> -->
            </div>
        </div>

        <div class="btn">确定</div>

    </view>
</template>

<script>
import {
    apiArr
} from '../../../api/area';
import {
    picUrl,
    menuButtonInfo,
    request,
    NavgateTo
} from '../../../utils';
export default {
    data() {
        return {
            top: "",
            localHeight: "",
            value: '',
            type: "error",
            tab: 0,

            provList: [], // 省
            cityList: [], //市
            distList: [], // 区
            defaultCity: [],  // 默认展示的市区数据
            defaultDist: [], // 默认展示的县/区数据
            confirmProv: {}, // 默认选中省
            confirmProv1: {},
            confirmCity: {}, // 默认选中市
            confirmDist: {}, // 默认选中区/县
            sf: true,
            xsq: {},
            value2: '',
        }
    },
    methods: {
        changeTab(e) {
            this.tab = e;
        },
        chooseAddress() {
            console.log(123);
            NavgateTo("/pages/shopcity/shopcity")
        },
        /////////////////////////////////// 省市区方法///////////////////////////////////////////
        // 获取省份信息
        async getProvList() {
            const res = await request(apiArr.getArea, 'POST', {}, { silent: false });
            this.provList = res.rows;
            this.confirmProv1 = res.rows[0]
            // 缓存省市区数据
            this.getCityList();
        },

        // 获取市区信息
        async getCityList(sq, x) {
            console.log('11swq', sq);
            if (!this.sf) {
                console.log('省份没变，查市跟区', this.cityList)
                let newDist = this.cityList[sq];
                console.log('新的市信息', newDist);
                if (this.xsq.ad_code !== newDist.ad_code) {
                    console.log('新市区跟旧市区不一直')
                    this.xsq = newDist;
                    this.getDistList(newDist, x);
                }
                return
            }
            const res = await request(apiArr.getArea, 'POST', { parent_ad_code: this.confirmProv1.ad_code }, { silent: false });
            this.cityList = res.rows;
            let newDist;

            this.defaultCity = res.rows;
            this.confirmCity = res.rows[0]; // 拿市的第一条区查区
            this.getDistList(newDist, x);
        },
        // 获取 县/区 信息
        async getDistList(xsq, x) {
            const res = await request(apiArr.getArea, 'POST', { parent_ad_code: xsq ? xsq.ad_code : this.confirmCity.ad_code }, { silent: false });
            this.distList = res.rows;
            this.defaultDist = res.rows;
            this.confirmDist = res.rows[0] // 区的第一条信息
        },
        async init() {
            uni.showLoading({
                title: '加载中',
                mask: true
            });
            try {
                this.getProvList()
                uni.hideLoading();
            } catch (error) {
                uni.hideLoading();
                console.log('获取省市区信息异常', error);
            }
        },
        // 切换省市区时联动改变参数值
        bindChange(e) {
            console.log('[1231331], e', e);
            const { value } = e.detail;
            // // 每次切换时，根据当前点击的省过滤出所属市区，并且变化县/区
            let newCrty = this.provList[value[0]];
            console.log('新的省份信息', newCrty);
            console.log('旧的省信息', this.confirmProv1);
            if (newCrty.ad_code === this.confirmProv1.ad_code) {
                console.log('省份信息没变');
                this.sf = false;
            } else {
                this.sf = true;
            }
            console.log('this.cityListthis.cityList', this.cityList);
            this.confirmProv1 = newCrty
            this.getCityList(value[1], value[2])
        },
        /////////////////////////////////// 省市区方法///////////////////////////////////////////
    },
    onLoad(options) {
        const meun = menuButtonInfo();
        this.top = meun.top;
        this.localHeight = meun.height;
        this.init()
    },
    onReachBottom() {

    },
}
</script>

<style>
@import url("./index.css");
</style>