@ -13,70 +13,149 @@
< span class = "icon" > 1 < / span >
< span class = "text f_18" > 配送地址 < / span > < / div >
< div class = "form" >
< a -form layout = "vertical" >
< a -form -item label = "请选择您的配送方式" >
< a -radio -group >
< a -radio value = "0" >
送货上门
< / a - r a d i o >
< a -radio value = "1" >
门店自提
< / a - r a d i o >
< / a - r a d i o - g r o u p >
< / a - f o r m - i t e m >
< a -form -item
label = "称呼"
v - if = "addr.length == 0"
<!-- < a -form layout = "vertical" > -- >
<!-- < a -form -item label = "请选择您的配送方式" > -- >
<!-- < a -radio -group > -- >
<!-- < a -radio value = "0" > -- >
<!-- 送货上门 -- >
<!-- < / a - r a d i o > - - >
<!-- < a -radio value = "1" > -- >
<!-- 门店自提 -- >
<!-- < / a - r a d i o > - - >
<!-- < / a - r a d i o - g r o u p > - - >
<!-- < / a - f o r m - i t e m > - - >
<!-- < a -form -item - - >
<!-- label = "称呼" -- >
<!-- v - if = "addr.length == 0" -- >
<!-- > -- >
<!-- < a -select placeholder = "请选择称呼" :value ="userSex1" style = "width: 120px;margin-right:10px" @change ="handleChange1" > - - >
<!-- < a -select -option value = "1" > -- >
<!-- 先生 -- >
<!-- < / a - s e l e c t - o p t i o n > - - >
<!-- < a -select -option value = "0" > -- >
<!-- 女士 -- >
<!-- < / a - s e l e c t - o p t i o n > - - >
<!-- < / a - s e l e c t > - - >
<!-- < a -input style = "width:300px" placeholder = "请输入姓名" :value ="userName1" prop = "userName" / > -- >
<!-- < / a - f o r m - i t e m > - - >
<!-- < a -form -item - - >
<!-- label = "选择地址" -- >
<!-- v - if = "addr.length == 0" -- >
<!-- > -- >
<!-- < j -area -linkage type = "cascader" v -model = " addr1 " placeholder = "请选择省市区" / > -- >
<!-- < / a - f o r m - i t e m > - - >
<!-- < a -form -item - - >
<!-- label = "详细地址" -- >
<!-- v - if = "addr.length == 0" -- >
<!-- > -- >
<!-- < a -textarea v -model = " detailed1 " placeholder = "请输入街道、门牌号码等详细地址" auto -size / > -- >
<!-- < / a - f o r m - i t e m > - - >
<!-- < a -form -item - - >
<!-- label = "手机号码" -- >
<!-- v - if = "addr.length == 0" -- >
<!-- > -- >
<!-- < a -input style = "width:150px;margin-right:10px" placeholder = "+86 中国大陆地区" disabled / > -- >
<!-- < a -input style = "width:300px" placeholder = "请输入手机号码" :value ="phone1" / > -- >
<!-- < / a - f o r m - i t e m > - - >
<!-- < a -form -item v-if ="addr.length == 0" > - - >
<!-- < a -checkbox @change ="onChange1" :checked ="save1" > -- >
<!-- 保存该地址至地址簿 -- >
<!-- < / a - c h e c k b o x > - - >
<!-- < / a - f o r m - i t e m > - - >
<!-- < a -form -item v-if ="addr.length != 0" > - - >
<!-- < p class = "d-flex addrTitle" > -- >
<!-- < span class = "f_14 c_1B" > 地址 < / span > -- >
<!-- < span class = "f_12 c_1B" @click ="showModal" > < a -icon type = "plus" / > 添加新地址 < / span > -- >
<!-- < / p > -- >
<!-- < div class = "d-flex cardDiv" > -- >
<!-- < div style = "width: 370px" v-for ="(item,index) in addr" :key="index" @click="handleCard" class="cardItem" > - - >
<!-- < p class = "d-flex f_12 c_1B" style = "font-weight: 600;justify-content: space-between;" > < span > { { item . name } } < / span > < span class = "f_14" @click ="showModal(item)" > 编辑 < / span > < / p > - - >
<!-- < p class = "f_12 c_31" style = "font-weight: 300" > + 86 { { item . phone } } < / p > -- >
<!-- < p class = "f_12 c_31" > { { item . province } } { { item . city } } { { item . area } } { { item . detailed } } < / p > -- >
<!-- < p class = "f_12 c_1B" v-if ="item.flag" > 默认地址 < / p > - - >
<!-- < / div > -- >
<!-- < / div > -- >
<!-- < / a - f o r m - i t e m > - - >
<!-- < / a - f o r m > - - >
< template >
< a -form -model
ref = "ruleForm1"
: model = "form1"
: rules = "rules"
>
< a -select placeholder = "请选择称呼" :value ="userSex1" style = "width: 120px;margin-right:10px" @change ="handleChange1" >
< a -select -option value = "1" >
先生
< / a - s e l e c t - o p t i o n >
< a -select -option value = "0" >
女士
< / a - s e l e c t - o p t i o n >
< / a - s e l e c t >
< a -input style = "width:300px" placeholder = "请输入姓名" :value ="userName" / >
< / a - f o r m - i t e m >
< a -form -item
label = "选择地址"
v - if = "addr.length == 0"
>
< j -area -linkage type = "cascader" v -model = " addr1 " placeholder = "请选择省市区" / >
< / a - f o r m - i t e m >
< a -form -item
label = "详细地址"
v - if = "addr.length == 0"
>
< a -textarea v -model = " detailed1 " placeholder = "请输入街道、门牌号码等详细地址" auto -size / >
< / a - f o r m - i t e m >
< a -form -item
label = "手机号码"
v - if = "addr.length == 0"
>
< a -input style = "width:150px;margin-right:10px" placeholder = "+86 中国大陆地区" disabled / >
< a -input style = "width:300px" placeholder = "请输入手机号码" :value ="phone1" / >
< / a - f o r m - i t e m >
< a -form -item v-if ="addr.length == 0" >
< a -checkbox @change ="onChange1" >
保存该地址至地址簿
< / a - c h e c k b o x >
< / a - f o r m - i t e m >
< a -form -item v-if ="addr.length != 0" >
< p class = "d-flex addrTitle" >
< span class = "f_14 c_1B" > 地址 < / span >
< span class = "f_12 c_1B" @click ="showModal" > < a -icon type = "plus" / > 添加新地址 < / span >
< / p >
< div class = "d-flex cardDiv" >
< div style = "width: 370px" v-for ="(item,index) in addr" :key="index" @click="handleCard" class="cardItem" >
< p class = "d-flex f_12 c_1B" style = "font-weight: 600;justify-content: space-between;" > < span > { { item . name } } < / span > < span class = "f_14" @click ="showModal" > 编辑 < / span > < / p >
< p class = "f_12 c_31" style = "font-weight: 300" > + 86 { { item . phone } } < / p >
< p class = "f_12 c_31" > { { item . province } } { { item . city } } { { item . area } } { { item . detailed } } < / p >
< p class = "f_12 c_1B" v-if ="item.flag" > 默认地址 < / p >
< a -form -model -item label = "请选择您的配送方式" prop = "visit" >
< a -radio -group v-model ="form1.visit" >
< a -radio value = "0" >
送货上门
< / a - r a d i o >
< a -radio value = "1" >
门店自提
< / a - r a d i o >
< / a - r a d i o - g r o u p >
< / a - f o r m - m o d e l - i t e m >
< a -form -model -item label = "称呼" v-if ="addr.length == 0" >
< a -select v-model ="form1.sex" placeholder="请选择称呼" style="width:120px" >
< a -select -option value = "1" >
先生
< / a - s e l e c t - o p t i o n >
< a -select -option value = "2" >
女士
< / a - s e l e c t - o p t i o n >
< / a - s e l e c t >
< / a - f o r m - m o d e l - i t e m >
< a -form -model -item
label = "姓名"
prop = "name"
v - if = "addr.length == 0"
>
< a -input placeholder = "请输入姓名" v -model = " form1.name " / >
< / a - f o r m - m o d e l - i t e m >
< a -form -model -item
label = "选择地址"
prop = "addr"
v - if = "addr.length == 0"
>
< j -area -linkage type = "cascader" v -model = " form1.addr " placeholder = "请选择省市区" / >
< / a - f o r m - m o d e l - i t e m >
< a -form -model -item label = "详细地址" prop = "addr" v-if ="addr.length == 0" >
< a -input v -model = " form1.detailed " type = "textarea" / >
< / a - f o r m - m o d e l - i t e m >
< a -form -model -item
label = "手机号码"
prop = "phone"
v - if = "addr.length == 0"
>
< a -input style = "width:400px" placeholder = "请输入手机号码" v-model ="form1.phone" >
< template slot = "addonBefore" >
< span > + 86 中国大陆地区 < / span >
< / template >
< / a - i n p u t >
< / a - f o r m - m o d e l - i t e m >
< a -form -model -item v-if ="addr.length == 0" >
< a -checkbox @change ="onChange1" v-model ="form1.save" >
保存该地址至地址簿
< / a - c h e c k b o x >
< / a - f o r m - m o d e l - i t e m >
< a -form -model -item v-if ="addr.length != 0" >
< p class = "d-flex addrTitle" >
< span class = "f_14 c_1B" > 地址 < / span >
< span class = "f_12 c_1B" @click ="showModal" > < a -icon type = "plus" / > 添加新地址 < / span >
< / p >
< div class = "d-flex cardDiv" >
< div style = "width: 370px" v-for ="(item,index) in addr" :key="index" @click="handleCard" class="cardItem" >
< p class = "d-flex f_12 c_1B" style = "font-weight: 600;justify-content: space-between;" >
< span > { { item . name } } < / span >
< span class = "f_14" @click ="handleEdit(item)" > 编辑 < / span >
< / p >
< p class = "f_12 c_31" style = "font-weight: 300" > + 86 { { item . phone } } < / p >
< p class = "f_12 c_31" style = "font-weight: 300" > < j -area -linkage type = "cascader" :value ="item.addr" disabled / > < / p >
< p class = "f_12 c_31" > { { item . detailed } } < / p >
< p class = "f_12 c_1B" v-if ="item.flag" > 默认地址 < / p >
< / div >
< / div >
< / div >
< / a - f o r m - i t e m >
< / a - f o r m >
< / a - f o r m - m o d e l - i t e m >
< / a - f o r m - m o d e l >
< / template >
< / div >
< / div >
< div class = "addr" >
@ -142,7 +221,7 @@
< span class = "f_20 c_31" > ￥ 35 , 500 < / span >
< / p >
< div class = "btnDiv" >
< div type = "primary" class = "dialogButton primary f_14" > 立即购买 < / div >
< div type = "primary" class = "dialogButton primary f_14" @click ="toBuy" > 立即购买 < / div >
< / div >
< p class = "explain f_12 c_999" > 说明 < / p >
< p class = "f_12 c_999" > 在线支付订单提交之后15分钟内未付款 ， 订单将被系统自动取消 ， 请您尽快完成支付以确保商品能及时送达 ， 避免取消订单带来不必要的麻烦 。 < / p >
@ -160,46 +239,62 @@
< a -modal
title = "添加新地址"
: visible = "visible"
: confirm - loading = "confirmLoading"
@ ok = "handleOk"
@ cancel = "handleCancel"
>
< a -form layout = "vertical" >
< a -form -item
label = "称呼"
>
< a -select placeholder = "请选择称呼" :value ="userSex2" style = "width: 120px;margin-right:10px" @change ="handleChange2" >
< a -select -option value = "1" >
先生
< / a - s e l e c t - o p t i o n >
< a -select -option value = "0" >
女士
< / a - s e l e c t - o p t i o n >
< / a - s e l e c t >
< a -input style = "width:300px" placeholder = "请输入姓名" :value ="userName" / >
< / a - f o r m - i t e m >
< a -form -item
label = "选择地址"
< template >
< a -form -model
ref = "ruleForm"
: model = "form"
: rules = "rules"
>
< j -area -linkage type = "cascader" v -model = " addr2 " placeholder = "请选择省市区" / >
< / a - f o r m - i t e m >
< a -form -item
label = "详细地址"
>
< a -textarea v -model = " detailed2 " placeholder = "请输入街道、门牌号码等详细地址" auto -size / >
< / a - f o r m - i t e m >
< a -form -item
label = "手机号码"
>
< a -input style = "width:150px;margin-right:10px" placeholder = "+86 中国大陆地区" disabled / >
< a -input style = "width:300px" placeholder = "请输入手机号码" :value ="phone2" / >
< / a - f o r m - i t e m >
< a -form -item >
< a -checkbox @change ="onChange4" >
保存该地址至地址簿
< / a - c h e c k b o x >
< / a - f o r m - i t e m >
< / a - f o r m >
< a -form -model -item label = "称呼" >
< a -select v-model ="form.sex" placeholder="请选择称呼" style="width:120px" >
< a -select -option value = "1" >
先生
< / a - s e l e c t - o p t i o n >
< a -select -option value = "2" >
女士
< / a - s e l e c t - o p t i o n >
< / a - s e l e c t >
< / a - f o r m - m o d e l - i t e m >
< a -form -model -item
label = "姓名"
prop = "name"
>
< a -input placeholder = "请输入姓名" v -model = " form.name " / >
< / a - f o r m - m o d e l - i t e m >
< a -form -model -item
label = "选择地址"
prop = "addr"
>
< j -area -linkage type = "cascader" v -model = " form.addr " placeholder = "请选择省市区" / >
< / a - f o r m - m o d e l - i t e m >
< a -form -model -item label = "详细地址" prop = "detailed" >
< a -input v -model = " form.detailed " type = "textarea" / >
< / a - f o r m - m o d e l - i t e m >
< a -form -model -item
label = "手机号码"
prop = "phone"
>
< a -input style = "width:400px" placeholder = "请输入手机号码" v-model ="form.phone" >
< template slot = "addonBefore" >
< span > + 86 中国大陆地区 < / span >
< / template >
< / a - i n p u t >
< / a - f o r m - m o d e l - i t e m >
< a -form -model -item >
< a -checkbox @change ="onChange4" v-model ="form.save" >
保存该地址至地址簿
< / a - c h e c k b o x >
< / a - f o r m - m o d e l - i t e m >
< a -form -model -item >
< a -checkbox @change ="onChange5" v-model ="form.flag" >
设置为默认地址
< / a - c h e c k b o x >
< / a - f o r m - m o d e l - i t e m >
< / a - f o r m - m o d e l >
< / template >
< / a - m o d a l >
< / div >
< / template >
@ -207,62 +302,89 @@
export default {
data ( ) {
return {
ModalText : 'Content of the modal' ,
visible : false ,
confirmLoading : false ,
formLayout : 'horizontal' ,
delivery : '17719145652' , / / 配 送 方 式
visit : '0' , / / 是 否 送 货 上 门
phone : '17719145652' , / / 电 话
userSex1 : '' , / / 性 别 1
userSex2 : '' , / / 性 别 2
userName : '' , / / 姓 名
phone1 : '' , / / 电 话 1
phone2 : '' , / / 电 话 2
addr : [
/ / {
/ / i d : 1 ,
/ / n a m e : ' 吴 一 ' ,
/ / p h o n e : ' 1 7 7 7 7 7 7 7 7 7 7 ' ,
/ / p r o v i n c e : ' 河 南 省 ' ,
/ / c i t y : ' 驻 马 店 市 ' ,
/ / a r e a : ' 驿 城 区 ' ,
/ / d e t a i l e d : ' 黄 淮 学 院 北 区 ' ,
/ / f l a g : t r u e , / / 是 否 是 默 认 地 址
/ / } , / / 地 址 一
/ / {
/ / i d : 2 ,
/ / n a m e : ' 吴 二 ' ,
/ / p h o n e : ' 1 7 7 7 7 7 7 7 7 7 7 ' ,
/ / p r o v i n c e : ' 河 南 省 ' ,
/ / c i t y : ' 驻 马 店 市 ' ,
/ / a r e a : ' 驿 城 区 ' ,
/ / d e t a i l e d : ' 黄 淮 学 院 北 区 ' ,
/ / f l a g : f a l s e , / / 是 否 是 默 认 地 址
/ / } , / / 地 址 二
/ / {
/ / i d : 3 ,
/ / n a m e : ' 吴 三 ' ,
/ / p h o n e : ' 1 7 7 7 7 7 7 7 7 7 7 ' ,
/ / p r o v i n c e : ' 河 南 省 ' ,
/ / c i t y : ' 驻 马 店 市 ' ,
/ / a r e a : ' 驿 城 区 ' ,
/ / d e t a i l e d : ' 黄 淮 学 院 北 区 ' ,
/ / f l a g : f a l s e , / / 是 否 是 默 认 地 址
/ / } , / / 地 址 三
{
id : 1 ,
name : '吴一' ,
sex : '1' ,
phone : '17777777777' ,
addr : '210521' ,
detailed : '黄淮学院北区' ,
flag : true , / / 是 否 是 默 认 地 址
} , / / 地 址 一
{
id : 2 ,
name : '吴二' ,
sex : '2' ,
phone : '17777777777' ,
addr : '210521' ,
detailed : '黄淮学院北区' ,
flag : false , / / 是 否 是 默 认 地 址
} , / / 地 址 二
{
id : 3 ,
name : '吴三' ,
sex : '1' ,
phone : '17777777777' ,
addr : '210521' ,
detailed : '黄淮学院北区' ,
flag : false , / / 是 否 是 默 认 地 址
} , / / 地 址 三
] , / / 地 址 列 表
addr1 : '' , / / 地 址 选 择 器 1
addr2 : '' , / / 地 址 选 择 器 2
detailed1 : '' , / / 详 细 地 址 1
detailed2 : '' , / / 详 细 地 址 2
save1 : false , / / 是 否 保 存 到 地 址 簿 1
save2 : false , / / 是 否 保 存 到 地 址 簿 2
value : 1 ,
paymentMode : '' , / / 支 付 方 式
bill : '' , / / 是 否 需 要 电 子 发 票
chinaArea : [ ] ,
num : 1 , / / 已 选 几 件 商 品
} ;
form2 : {
userSex2 : '' , / / 性 别 2 ( 弹 窗 )
userName2 : '' , / / 姓 名 2 ( 弹 窗 )
phone2 : '' , / / 电 话 2 ( 弹 窗 )
addr2 : '' , / / 地 址 选 择 器 2 ( 弹 窗 )
detailed2 : '' , / / 详 细 地 址 2 ( 弹 窗 )
save2 : true , / / 是 否 保 存 到 地 址 簿 2 ( 弹 窗 )
} ,
/ / 弹 窗 数 据
form : {
id : '' ,
sex : undefined ,
name : '' ,
addr : '' ,
detailed : '' ,
phone : '' ,
save : true ,
flag : false / / 是 否 默 认 地 址
} ,
/ / 外 部 添 加 地 址 数 据
form1 : {
visit : '' ,
sex : undefined ,
name : '' ,
addr : '' ,
detailed : '' ,
phone : '' ,
save : true ,
flag : false
} ,
rules : {
name : [
{ required : true , message : '请输入姓名' , trigger : 'blur' } ,
] ,
visit : [
{ required : true , message : '请选择您的配送方式' , trigger : 'change' } ,
] ,
addr : [ { required : true , message : '请选择地址' , trigger : 'blur' } ] ,
detailed : [ { required : true , message : '请输入详细地址' , trigger : 'blur' } ] ,
phone : [ { required : true , message : '请输入手机号码' , trigger : 'blur' } ,
] ,
} ,
addrList : [
]
}
} ,
computed : {
formItemLayout ( ) {
@ -303,7 +425,7 @@
} ,
onChange1 ( e ) {
console . log ( ` checked = ${ e . target . checked } ` ) ;
this . save1 = ! this . save1
this . form1 . save = ! this . form1 . save
} ,
onChange2 ( e ) {
console . log ( 'radio checked' , e . target . value ) ;
@ -314,28 +436,90 @@
this . bill = e . target . checked
} ,
onChange4 ( e ) {
console . log ( 'radio checked' , e . target . value ) ;
this . save2 = ! this . save2
console . log ( ` checked = ${ e . target . checked } ` ) ;
this . form . save = ! this . form . save
} ,
onChange5 ( e ) {
console . log ( ` checked = ${ e . target . checked } ` ) ;
} ,
/ / 新 增
showModal ( ) {
this . visible = true ;
} ,
/ / 编 辑
handleEdit ( item ) {
this . visible = true ;
console . log ( item )
/ / t h i s . f o r m . i d = ' '
this . form . sex = item . sex
this . form . name = item . name
this . form . addr = item . addr
this . form . phone = item . phone
this . form . detailed = item . detailed
this . form . flag = item . flag
} ,
handleOk ( e ) {
this . ModalText = 'The modal will be closed after two seconds' ;
this . confirmLoading = true ;
setTimeout ( ( ) => {
this . visible = false ;
this . confirmLoading = false ;
} , 2000 ) ;
/ / 判 断 是 添 加 地 址 还 是 修 改 地 址
let that = this
let newFlag = this . addr . some ( function ( item ) {
return item . id == that . form . id
} )
this . $refs . ruleForm . validate ( valid => {
if ( valid ) {
if ( newFlag ) { / / 是 修 改
/ / t h i s . a d d r .
} else { / / 是 新 增
this . addr . push ( this . form )
console . log ( 'this.addr' )
console . log ( this . addr )
}
this . visible = false ;
} else {
}
} ) ;
} ,
handleCancel ( e ) {
console . log ( 'Clicked cancel button' ) ;
this . visible = false ;
this . $refs . ruleForm . resetFields ( ) ;
this . form . name = ''
this . form . sex = ''
this . form . name = ''
this . form . addr = ''
this . form . phone = ''
this . form . detailed = ''
this . form . flag = false
} ,
toBuy ( ) {
this . $refs . ruleForm1 . validate ( valid => {
if ( valid ) {
this . addrList . push ( this . form1 )
console . log ( this . addrList )
} else {
}
} ) ;
}
} ,
} ;
< / script >
< style lang = "less" scoped >
. ant - form / deep / . ant - form - item {
margin - bottom : 12 px ;
}
. cardDiv . j - area - linkage / deep / . area - select {
background - color : # fff ;
border : none ;
span {
padding - left : 0 ;
font - size : 12 px ;
color : # 313131 ;
cursor : auto ;
font - weight : 500 ;
}
i {
display : none ;
}
}
. btnDiv {
border - bottom : 1 px solid # E7E7E7 ;
padding - bottom : 30 px ;
@ -421,6 +605,9 @@
. f _12 {
border : 1 px solid # C8C6C5 ;
padding : 3 px 8 px ;
height : 26 px ;
box - sizing : border - box ;
line - height : 18 px ;
}
i {
margin - right : 3 px ;
@ -430,7 +617,11 @@
. cardDiv {
justify - content : space - between ;
flex - wrap : wrap ;
. f _12 {
height : 26 px ;
box - sizing : border - box ;
line - height : 18 px ;
}
. cardItem {
padding : 15 px 16 px ;
margin - bottom : 20 px ;
zhc077
2 years ago