You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
351 lines
7.6 KiB
351 lines
7.6 KiB
2 years ago
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
|
||
|
|
<view class='addAddress'>
|
||
|
|
<!-- <view class="pad30">
|
||
|
|
<view class='default acea-row row-middle borderRadius15'>
|
||
|
|
<input v-model="addressValue" type="text" placeholder="粘贴地址信息，自动拆分姓名、电话和地址"
|
||
|
|
placeholder-class='placeholder' style="width:100%;"
|
||
|
|
@blur="identify()">
|
||
|
|
</view>
|
||
|
|
</view> -->
|
||
|
|
<view class="pad30 mt-22">
|
||
|
|
<view class='list borderRadius15'>
|
||
|
|
<uni-forms ref="form" label-position="left" :modelValue="userAddress">
|
||
|
|
<uni-forms-item label="姓名" name="real_name" class='item acea-row row-between-wrapper'>
|
||
|
|
|
||
|
|
<input type='text' placeholder='请输入姓名' name='real_name' :value="userAddress.real_name"
|
||
|
|
placeholder-class='placeholder' class="width100"></input>
|
||
|
|
</uni-forms-item>
|
||
|
|
|
||
|
|
<uni-forms-item label="联系电话" name="phone" class='item acea-row row-between-wrapper'>
|
||
|
|
|
||
|
|
<input type='number' placeholder='请输入联系电话' name="phone" v-model='userAddress.phone'
|
||
|
|
placeholder-class='placeholder' pattern="\d*"></input>
|
||
|
|
</uni-forms-item>
|
||
|
|
|
||
|
|
<uni-forms-item label="所在地区" name="region" class='item acea-row row-between-wrapper'>
|
||
|
|
|
||
|
|
<view class="address acea-row row-between height100" @click="chooseAddress">
|
||
|
|
<input type='text' placeholder='请选择地址' :disabled="true" name='region' placeholder-class='placeholder'
|
||
|
|
v-model='userAddress.region' class="detail"></input>
|
||
|
|
<view class="icon-ymt to-right font14 fcor666">
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</uni-forms-item>
|
||
|
|
|
||
|
|
<uni-forms-item label="详细地址" name="detail" class='item acea-row row-between-wrapper'>
|
||
|
|
|
||
|
|
|
||
|
|
<input type='text' placeholder='请填写具体地址' name='detail' placeholder-class='placeholder'
|
||
|
|
v-model='userAddress.detail' class="detail"></input>
|
||
|
|
|
||
|
|
</uni-forms-item>
|
||
|
|
</uni-forms>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<button class='keepBnt bg-color' @click="formSubmit">立即保存</button>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<AddressPicker ref="AddressPicker" @getAddress="getAddress"></AddressPicker>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import uniForms from '@/components/uni-forms/components/uni-forms/uni-forms.vue'
|
||
|
|
import uniFormsItem from '@/components/uni-forms/components/uni-forms-item/uni-forms-item.vue'
|
||
|
|
|
||
|
|
import AddressPicker from '@/pages/address/addNewAddress/addressPicker.vue'
|
||
|
|
let dataList = require('./address.json')
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
userAddress: {
|
||
|
|
real_name:"",
|
||
|
|
phone:"",
|
||
|
|
region:"",
|
||
|
|
detail:"",
|
||
|
|
}, //地址详情
|
||
|
|
addressValue:"",
|
||
|
|
addressId:null,
|
||
|
|
/* rulesObject:{
|
||
|
|
real_name:{
|
||
|
|
rules:[
|
||
|
|
// 校验 name 不能为空
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
errorMessage: '请填写姓名',
|
||
|
|
},
|
||
|
|
// 对name字段进行长度验证
|
||
|
|
{
|
||
|
|
minLength: 2,
|
||
|
|
maxLength: 5,
|
||
|
|
errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符',
|
||
|
|
}
|
||
|
|
],
|
||
|
|
},
|
||
|
|
phone:{
|
||
|
|
rules:[
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
errorMessage: '请输入手机号',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
validateFunction: function(rule, value, data, callback) {
|
||
|
|
let iphoneReg = /^1[0-9]{10}$/
|
||
|
|
if (!iphoneReg.test(value)) {
|
||
|
|
callback('手机号码格式不正确，请重新填写')
|
||
|
|
}
|
||
|
|
return true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
],
|
||
|
|
},
|
||
|
|
region:{
|
||
|
|
rules:[
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
errorMessage: '请选择地址',
|
||
|
|
},
|
||
|
|
|
||
|
|
],
|
||
|
|
},
|
||
|
|
detail:{
|
||
|
|
rules:[
|
||
|
|
{
|
||
|
|
required: true,
|
||
|
|
errorMessage: '请填写详细地址',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
minLength: 5,
|
||
|
|
|
||
|
|
errorMessage: '{label}长度不能少于{minLength}个字符',
|
||
|
|
}
|
||
|
|
|
||
|
|
],
|
||
|
|
},
|
||
|
|
|
||
|
|
}
|
||
|
|
*/
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
components:{
|
||
|
|
AddressPicker,
|
||
|
|
"uni-forms":uniForms,
|
||
|
|
"uni-forms-item":uniFormsItem
|
||
|
|
// uniForms,
|
||
|
|
// uniFormsItem
|
||
|
|
},
|
||
|
|
onReady() {
|
||
|
|
// 需要在onReady中设置规则
|
||
|
|
// this.$refs.form.setRules(this.rulesObject)
|
||
|
|
|
||
|
|
// if(this.addressId){
|
||
|
|
// uni.setNavigationBarTitle({
|
||
|
|
// title: '编辑地址'
|
||
|
|
// });
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
onLoad(options){
|
||
|
|
|
||
|
|
if(options.id){
|
||
|
|
this.addressId = options.id
|
||
|
|
uni.setNavigationBarTitle({
|
||
|
|
title: '编辑地址'
|
||
|
|
});
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
identify(){
|
||
|
|
const options = {
|
||
|
|
type: 0, // 哪种方式解析，0：正则，1：树查找
|
||
|
|
textFilter: [], // 预清洗的字段
|
||
|
|
nameMaxLength: 4, // 查找最大的中文名字长度
|
||
|
|
}
|
||
|
|
// type参数0表示使用正则解析，1表示采用树查找, textFilter地址预清洗过滤字段。
|
||
|
|
// if(!!this.addressValue){
|
||
|
|
// const parseResult = AddressParse(this.addressValue, options)
|
||
|
|
// // console.log(parseResult);
|
||
|
|
// this.userAddress.real_name = parseResult.name;
|
||
|
|
// this.userAddress.phone = parseResult.phone;
|
||
|
|
// this.userAddress.detail = parseResult.detail;
|
||
|
|
// this.userAddress.region = parseResult.province + '/' + parseResult.city + '/' + parseResult.area;
|
||
|
|
// }
|
||
|
|
},
|
||
|
|
|
||
|
|
formSubmit(form) {
|
||
|
|
|
||
|
|
// 暂时不起作用
|
||
|
|
|
||
|
|
// this.$refs.form.validate().then(res => {
|
||
|
|
// console.log('success', res);
|
||
|
|
// uni.showToast({
|
||
|
|
// title: `校验通过`
|
||
|
|
// })
|
||
|
|
// }).catch(err => {
|
||
|
|
// console.log('err', err);
|
||
|
|
// })
|
||
|
|
|
||
|
|
let _this = this;
|
||
|
|
|
||
|
|
this.$refs.form.validate().then(res=>{
|
||
|
|
console.log(_this.userAddress,res)
|
||
|
|
})
|
||
|
|
|
||
|
|
},
|
||
|
|
chooseAddress(){
|
||
|
|
this.$refs.AddressPicker.show()
|
||
|
|
},
|
||
|
|
getAddress(address){
|
||
|
|
console.log(address,"address")
|
||
|
|
this.userAddress.region=address
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.container{
|
||
|
|
background-color: #f5f5f5;
|
||
|
|
height: 100vh;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding-top:30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
/deep/ .uni-forms-item__label .label-text{
|
||
|
|
font-size: 30rpx !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
/deep/ .uni-forms-item{
|
||
|
|
width: 100% !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.pad30 {
|
||
|
|
padding: 0 30rpx
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.acea-row {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.row-middle {
|
||
|
|
align-items: center
|
||
|
|
}
|
||
|
|
.row-between-wrapper {
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between
|
||
|
|
}
|
||
|
|
.borderRadius15 {
|
||
|
|
border-radius: 15rpx !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addAddress .list {
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addAddress .list .item {
|
||
|
|
padding: 30rpx ;
|
||
|
|
padding-bottom: 0;
|
||
|
|
border-top: 1rpx solid #eee;
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addAddress .list .item .detail{
|
||
|
|
// width: 368rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addAddress .list .item .location{
|
||
|
|
position: absolute;
|
||
|
|
right: 46rpx;
|
||
|
|
top: 50%;
|
||
|
|
margin-top: -40rpx!important;
|
||
|
|
font-size: 24rpx;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.addAddress .list .item .name {
|
||
|
|
width: 195rpx;
|
||
|
|
font-size: 30rpx;
|
||
|
|
color: #333;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addAddress .list .item .address {
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addAddress .list .item .address .addressCon{
|
||
|
|
width: 360rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addAddress .list .item .address .addressCon .tip{
|
||
|
|
font-size: 21rpx;
|
||
|
|
margin-top: 4rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addAddress .list .item input {
|
||
|
|
// width: 475rpx;
|
||
|
|
flex: 1;
|
||
|
|
font-size: 30rpx;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.placeholder {
|
||
|
|
color: #ccc;
|
||
|
|
}
|
||
|
|
|
||
|
|
.addAddress .list .item .picker {
|
||
|
|
width: 430rpx;
|
||
|
|
font-size: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.addAddress .default {
|
||
|
|
padding: 0 30rpx;
|
||
|
|
height: 90rpx;
|
||
|
|
background-color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.addAddress .keepBnt {
|
||
|
|
width: 690rpx;
|
||
|
|
height: 86rpx;
|
||
|
|
border-radius: 50rpx;
|
||
|
|
text-align: center;
|
||
|
|
line-height: 86rpx;
|
||
|
|
margin: 50rpx auto;
|
||
|
|
font-size: 32rpx;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.mt-22{
|
||
|
|
margin-top: 22rpx;
|
||
|
|
}
|
||
|
|
.bg-color {
|
||
|
|
background-color: #dd524d;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|