移动端——省市区三级联动

<template>

<view class="body">

<view class="information">

<u-form :model="form" ref="uForm" class="informations">

<u-form-item label="用户姓名" label-width="150rpx">

<u-input v-model="form.name" placeholder="请填写用户姓名" />

</u-form-item>

<u-form-item label="联系手机" label-width="150rpx">

<u-input v-model="form.phone" placeholder="请填写手机号码" />

</u-form-item>

<!-- <u-form-item label="选择地区" prop="adderss" label-width="150rpx" @click="show = true"> -->

<u-form-item label="选择地区" label-width="150rpx" >

<!-- <u-input v-model="form.adderss" placeholder="省、市、区、街道" @confirm="confirm"/> -->

<view @click="show = true" class="placeholder" :class="{'has-choosed':salesmantext !== '省、市、区'}">

{{salesmantext}}</view>

<u-icon name="arrow-right" color="#999999" size="30" class="icon"></u-icon>

</u-form-item>

<u-form-item label="详细地址" label-width="150rpx">

<u-input v-model="form.adder" placeholder="小区楼栋/乡村名称" />

</u-form-item>

</u-form>

</view>

<u-picker mode="region" ref="uPicker" v-model="show" @confirm="chooseAddress" />

<u-button class="button" @click="handleSetInfo">保 存</u-button>

</view>

</template>

<script>

import common from '../../common/common.js'

export default {

data() {

return {

form: {

name: '',

phone: '',

adder: '',

},

salesmantext: "省、市、区",

show: false,

}

},

onLoad() {

this.pages = getCurrentPages();

this.prevPage = this.pages[this.pages.length - 2]; //上一个页面

// #ifdef H5

console.log('this.prevPage.consignee', this.prevPage.consignee);

// #endif

// #ifdef MP-WEIXIN

console.log('this.prevPage.consignee', this.prevPage.consignee);

// #endif

},

methods: {

// 保存设置

handleSetInfo() {

if (!this.form.name) return common.showToast({

title: "请填写姓名"

})

if (!this.form.phone) return common.showToast({

title: "请填写手机号码"

})

if (this.salesmantext === '省、市、区') return common.showToast({

title: "请选择地区"

})

if (!this.form.adder) return common.showToast({

title: "请填写详细地址"

})

let addressObject = {

busAddress: this.salesmantext + this.form.adder,

busRecegName: this.form.name,

busRecePhone: this.form.phone,

}

//h5的写法

// #ifdef H5

this.prevPage.consignee = Object.assign(this.prevPage.consignee, addressObject);

this.prevPage.allready = true;

// #endif

//小程序的写法

// #ifdef MP-WEIXIN

this.prevPage.$vm.consignee = Object.assign(this.prevPage.$vm.consignee, addressObject);

this.prevPage.$vm.allready = true;

// #endif

uni.navigateBack({

delta: 1,

})

},

// 选择地区

chooseAddress(e) {

this.salesmantext = e.province.label + e.city.label + e.area.label;

},

}

}

</script>

<style lang="scss" scoped>

.body {

background: #F9FAF9;

// 地址详情

.information {

height: 585rpx;

background: #FFFFFF;

border-radius: 16rpx;

margin-left: 32rpx;

margin-right: 30rpx;

.informations {

margin-left: 20rpx;

}

.placeholder {

font: 400 30rpx "PingFangSC-Regular", "PingFang SC";

color: #CCCCCC;

margin-left: 20rpx;

width: 450rpx;

}

.has-choosed {

color: inherit;

}

}

// 保存按钮

.button {

width: 690rpx;

height: 68rpx;

background: linear-gradient(95deg, #B7EB8F 0%, #52C41A 100%);

border-radius: 34rpx;

font: 400 28rpx "PingFangSC-Regular", "PingFang SC";

color: #FFFFFF;

margin-top: 60rpx;

margin-left: 31rpx;

}

}

</style>