<template> <view class="page-bottom-fixed backcor9"> <form @submit="form_submit" class="form-container"> <view class="pd-main border-box height100" :style="'overflow-y: auto;transform: translateY(-0px);'"> <view class="form-gorup backcolorfff"> <view class="dis-flex"> <view class="form-gorup-title marRight10">收货人: </view> <input type="text" name="name" v-model="userAddress.name" placeholder-class="corf6" class=" flex-1 bs-bb" placeholder="名字"> </view> <view class="width100 mart10 border-b"> </view> <view class="dis-flex"> <view class="form-gorup-title marRight10">手机号码: </view> <input type="number" name="tel" v-model="userAddress.tel" maxlength="11" placeholder-class="corf6" class=" flex-1" placeholder="手机号"> </view> <!-- --> </view> <view class="form-gorup backcolorfff"> <view class=""> <pick-regions @failureRegion="failureRegion" :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion"> <view class="dis-flex "> <view class=" form-gorup-title">所在地区:</view> <view class="dis-flex flex-1 flex-end"> <view class=" pickRes ">{{userAddress.region || '请选择'}}</view> <view class="icon-ymt to-right font14 fcor666"></view> </view> </view> </pick-regions> </view> <view class="width100 mart10 border-b"> </view> <!-- <view style="clear: both;"> --> <view class="dis-flex scrol-t mart10"> <view class="form-gorup-title marRight10 align-self" style="padding: 0;">详细地址:</view> <uni-combox :height="height" @focus="focusMethod" @blur="blurMethod" :cursorSpacing="50" placeholderClass="corf6" :candidates="candidates" class="flex-1" :isAddress="true" :isShowIcon="false" placeholder="请输入详细地址" v-model="userAddress.address"> <view class="selector-item" v-for="(item,index) in candidates" :key="index" @click="getSelect(item)"> <view class="text1 name"> {{item.name}} </view> <view class="text1 address mart5"> {{item.address}} </view> </view> </uni-combox> <!-- <input type="text" name="address" v-model="userAddress.address" maxlength="40" placeholder-class="corf6" :class="'fcor666 bs-bb flex-1'" placeholder="详细地址1~40个字符"> --> </view> <!-- </view> --> </view> <view class="default-checkbox " @click="defaultChange"> <radio :checked="userAddress.is_default" style="transform:scale(1.1)" color="#FF1A34" /> <text class="font18">设为默认地址</text> </view> </view> <view class="bottom-fixed "> <button class="btn " type="default" form-type="submit">保存</button> </view> </form> </view> </template> <script> import pickRegions from '@/components/pick-regions/pick-regions.vue' import UniCombox from '@/components/uni-combox/components/uni-combox/uni-combox.vue' import { insertDeliveryAddress, findDeliveryAddressById, updateDeliveryAddress, baiduApiMapSearch } from '@/Utils/physicalObject.js' let app = getApp(); export default { data() { return { userAddress: { name: "", tel: "", region: '', address: "", is_default: false, }, dataParams: null, // region: [], regionId: '', //没用上 // defaultRegion: ['北京市', '市辖区', '东城区'], defaultRegionCode: '', candidates: [ // {"name": "重庆国贸中心-东北门","address": "重庆市渝中区中华路189号",}, // {"name": "重庆国贸中心-东北门","address": "重庆市渝中区中华路189号",}, // {"name": "重庆国贸中心-东北门","address": "重庆市渝中区中华路189号",} ], top: 0, top1: 0, height: 0, }; }, components: { pickRegions, "uni-combox": UniCombox }, onLoad(params) { // console.log(params) this.dataParams = params }, watch: { 'userAddress.name': { handler(n) { if (n.length > 5) { setTimeout(() => { this.userAddress.name = this.userAddress.name.substr(0, 5) }, 0) } }, }, }, computed: { // regionName() { // // 转为字符串 // // console.log('==============='+this.region.map(item => item)) // // this.userAddress.region = this.region.map(item => item.name).join(',') // return this.region.map(item => item.name).join(',') // } }, onReady() { let str = "" if (this.dataParams && this.dataParams.id) { str = "地址编辑" } else { str = "地址添加" } uni.setNavigationBarTitle({ title: str, }); if (this.dataParams && this.dataParams.id) { this.findAddressById(this.dataParams.id) } }, async mounted() { await this.getRect('.scrol-t').then(res => { this.top = res.top; }) await this.getRect('.bottom-fixed').then(res => { this.top1 = res.top; }) this.height = this.top1 - this.top - 120; // console.log(this.top1,this.top,this.height) }, methods: { focusMethod() { }, blurMethod() { this.baiduApiMap(this.userAddress.address) }, getRect(selector, all) { return new Promise(resolve => { uni.createSelectorQuery() .in(this)[all ? 'selectAll' : 'select'](selector) .boundingClientRect(rect => { if (all && Array.isArray(rect) && rect.length) { resolve(rect); } if (!all && rect) { resolve(rect); } }) .exec(); }); }, findAddressById(id) { let params = { id: id } findDeliveryAddressById(params).then(res => { if (res.return_code == '000000') { let resData = res.return_data; this.userAddress = { name: resData.consignee, tel: resData.phone, region: resData.regionName, address: resData.address, is_default: resData.whetherDefault, } // console.log(this.defaultRegionCode) this.defaultRegionCode = resData.regionId; this.regionId = resData.regionId; // console.log(this.defaultRegionCode) } else { uni.showToast({ title: res.return_msg, icon: 'none', duration: 2000 }) } }) }, // 获取选择的地区 handleGetRegion(region) { // let region = JSON.parse(JSON.stringify(reg)) this.region = region; this.regionId = this.region[2].code; if (region[0].code == region[1].code && region[0].code == region[2].code) { this.userAddress.region = this.region[0].name } else { this.userAddress.region = this.region.map(item => item.name).join(','); } // console.log(this.userAddress.region, "获取选择的地区", this.regionId, this.region) }, // 获取数据 init() { }, // //监听详细地址的onInput事件 // location(n){ // // this.userAddress.address = this.userAddress.address.replace(/\s+/g, "") // }, baiduApiMap(query) { query = query.replace(/\s+/g, "") let params = { query: query } uni.showLoading({ title: '加载中', mask: true, }); // console.log(params,"params") baiduApiMapSearch(params).then(res => { uni.hideLoading(); console.log(res) if (res.return_code == '000000') { if (res.return_data && res.return_data.length > 0) { this.candidates = res.return_data; } else { this.candidates = [] } } else { this.candidates = [] uni.showToast({ title: res.return_msg, icon: 'none', duration: 2000 }) } }) }, // 点击获取的详细地址 getSelect(desc) { // console.log(desc) this.defaultRegionCode = desc.adcode; this.userAddress.address = desc.name + desc.address; uni.showToast({ icon: 'none', title: "所在地区同步修改", duration:2000 }) }, failureRegion() { this.defaultRegionCode = ""; this.regionId =""; this.userAddress.region = ""; this.region = []; uni.hideToast(); uni.showToast({ icon: 'none', title: "地区同步修改失败,请手动选择", duration:3000 }) }, // 默认地址设置改变 defaultChange(e) { this.userAddress.is_default = !this.userAddress.is_default }, // 数据提交 form_submit() { this.userAddress.name = this.userAddress.name.replace(/\s+/g, "") this.userAddress.tel = this.userAddress.tel.replace(/\s+/g, "") this.userAddress.address = this.userAddress.address.replace(/\s+/g, "") // 数据校验 var validation = [{ fields: "name", msg: "请填写联系人" }, { fields: "tel", msg: "请填写联系电话", vali: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/ }, { fields: "region", msg: "请选择省市区" }, { fields: "address", msg: "请填写详细地址" } ]; this.fields_check(this.userAddress, validation) let isVali = this.fields_check(this.userAddress, validation); if (isVali) { if (this.dataParams.id) { this.updateAddress(this.dataParams.id) } else { this.addAddress() } } }, updateAddress(id) { let _this = this; let params = { "id": id, "address": _this.userAddress.address, "consignee": _this.userAddress.name, "phone": _this.userAddress.tel, "regionId": _this.regionId, "regionName": _this.userAddress.region, "whetherDefault": _this.userAddress.is_default } updateDeliveryAddress(params).then(res => { let title; if (res.return_code == '000000') { title = res.return_data; } else { title = res.return_msg; } uni.showToast({ title: title, icon: 'none', duration: 2000 }) //调用上一个页面中的方法 this.backPageRefresh(); }) }, backPageRefresh() { uni.navigateBack({}) }, addAddress() { let _this = this; let params = { "address": _this.userAddress.address, "consignee": _this.userAddress.name, "phone": _this.userAddress.tel, "regionId": _this.regionId, "regionName": _this.userAddress.region, "whetherDefault": _this.userAddress.is_default } // console.log(params,this.userAddress) insertDeliveryAddress(params).then(res => { let title; if (res.return_code == '000000') { title = res.return_data; } else { title = res.return_msg; } uni.showToast({ title: title, icon: 'none', duration: 2000 }) //调用上一个页面中的方法 _this.backPageRefresh() }) }, /** * 字段数据校验 * data 待校验的数据, 一维json对象 * validation 待校验的字段, 格式 [{fields: 'mobile', msg: '请填写手机号码', is_can_zero: 1(是否可以为0)}, ...] */ fields_check(data, validation) { for (var i in validation) { var temp_value = data[validation[i]["fields"]]; if (!temp_value) { uni.showToast({ title: validation[i]['msg'], duration: 1000, icon: 'none' }); return false; } if (validation[i]["vali"]) { // console.log(validation[i]["vali"].test(this.userAddress.tel),this.userAddress.tel) if (!(validation[i]["vali"].test(this.userAddress.tel))) { uni.showToast({ title: "请输入正确格式的手机号码", duration: 1000, icon: 'none' }); return false; } } } return true; }, } }; </script> <style lang="scss" scoped> .padding-main { padding: 20rpx; } .bottom-fixed { position: fixed; left: 10%; bottom: var(--window-bottom); border: none; width: 80%; box-sizing: border-box; z-index: 2; .btn { height: 60px; border-radius: 30px; background-color: #3da7e7; margin-bottom: 15px; color: #ffffff; line-height: 60px; font-size: 18px; } } .page-bottom-fixed { height: calc(100vh - var(--window-top)); padding-bottom: 75px; box-sizing: border-box; overflow-y: auto; } /*表单*/ .form-container { height: 100%; /* display: flex; flex-direction: column; */ .form-gorup { padding: 20rpx; margin-bottom: 20rpx; border-radius: 20rpx; // overflow: auto; .pickRes, input { border-radius: 0; box-sizing: border-box; font-size: 18px; // height: 30px; // min-height: 60px; // line-height: 30px; // padding: 8px 0; } } .form-gorup-title { padding: 20rpx 0; margin-bottom: 5rpx; font-weight: 500; font-size: 18px; width: 74px; white-space: nowrap; text-align: right; } } .form-gorup-item-left { float: left; padding-right: 20rpx; } .form-group-tips-must { margin-left: 20rpx; font-size: 24rpx; color: #f00; } .selector-item { font-size: 16px; text-align: center; border-bottom: solid 1px #DDDDDD; padding: 10px; cursor: pointer; text-align: left; .name { height: 18px; line-height: 18px; color: #3da7e7; font-size: 16px; font-weight: bold; } .address { font-size: 14px; height: 16px; line-height: 16px; color: #666666; } } </style>