|
|
|
|
@ -25,22 +25,131 @@ |
|
|
|
|
</a-radio-group> |
|
|
|
|
</a-form-item> |
|
|
|
|
<a-form-item |
|
|
|
|
label="Field A" |
|
|
|
|
label="称呼" |
|
|
|
|
> |
|
|
|
|
<a-input placeholder="input placeholder" /> |
|
|
|
|
<a-select placeholder="请选择称呼" :value="userSex" style="width: 120px;margin-right:10px" @change="handleChange"> |
|
|
|
|
<a-select-option value="1"> |
|
|
|
|
先生 |
|
|
|
|
</a-select-option> |
|
|
|
|
<a-select-option value="0"> |
|
|
|
|
女士 |
|
|
|
|
</a-select-option> |
|
|
|
|
</a-select> |
|
|
|
|
<a-input style="width:300px" placeholder="请输入姓名" :value="userName"/> |
|
|
|
|
</a-form-item> |
|
|
|
|
<a-form-item |
|
|
|
|
label="Field B" |
|
|
|
|
label="选择地址" |
|
|
|
|
> |
|
|
|
|
<a-input placeholder="input placeholder" /> |
|
|
|
|
</a-form-item> |
|
|
|
|
<a-form-item |
|
|
|
|
label="详细地址" |
|
|
|
|
> |
|
|
|
|
<a-textarea placeholder="请输入街道、门牌号码等详细地址" auto-size /> |
|
|
|
|
</a-form-item> |
|
|
|
|
<a-form-item |
|
|
|
|
label="手机号码" |
|
|
|
|
> |
|
|
|
|
<a-input style="width:150px;margin-right:10px" placeholder="+86 中国大陆地区" disabled/> |
|
|
|
|
<a-input style="width:300px" placeholder="请输入手机号码" :value="userName"/> |
|
|
|
|
</a-form-item> |
|
|
|
|
<a-form-item> |
|
|
|
|
<a-checkbox @change="onChange"> |
|
|
|
|
保存该地址至地址簿 |
|
|
|
|
</a-checkbox> |
|
|
|
|
</a-form-item> |
|
|
|
|
<!-- <a-form-item v-bind="formItemLayout" label="手机号码">--> |
|
|
|
|
<!-- <a-input--> |
|
|
|
|
<!-- v-decorator="[--> |
|
|
|
|
<!-- 'phone',--> |
|
|
|
|
<!-- {--> |
|
|
|
|
<!-- rules: [{ required: true, message: 'Please input your phone number!' }],--> |
|
|
|
|
<!-- },--> |
|
|
|
|
<!-- ]"--> |
|
|
|
|
<!-- >--> |
|
|
|
|
<!-- <a-select--> |
|
|
|
|
<!-- slot="addonBefore"--> |
|
|
|
|
<!-- v-decorator="['prefix', { initialValue: '86' }]"--> |
|
|
|
|
<!-- style="width: 70px"--> |
|
|
|
|
<!-- default-value="86"--> |
|
|
|
|
<!-- >--> |
|
|
|
|
<!-- <a-select-option value="86">--> |
|
|
|
|
<!-- +86 中国大陆地区--> |
|
|
|
|
<!-- </a-select-option>--> |
|
|
|
|
<!-- <a-select-option value="87">--> |
|
|
|
|
<!-- +87 中国大陆地区--> |
|
|
|
|
<!-- </a-select-option>--> |
|
|
|
|
<!-- </a-select>--> |
|
|
|
|
<!-- </a-input>--> |
|
|
|
|
<!-- </a-form-item>--> |
|
|
|
|
</a-form> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="addr"></div> |
|
|
|
|
<div class="addr"></div> |
|
|
|
|
<div class="addr"> |
|
|
|
|
<div class="title"> |
|
|
|
|
<span class="icon">2</span> |
|
|
|
|
<span class="text f_18">支付方式</span></div> |
|
|
|
|
<div class="pay"> |
|
|
|
|
<p class="f_12 c_1B">在线支付</p> |
|
|
|
|
<a-radio-group v-model="paymentMode" @change="onChange1"> |
|
|
|
|
<a-radio :value="1"> |
|
|
|
|
<a-icon type="alipay" style="background:#08AAFF;color:#fff;border-radius: 2px;padding:1px;margin-right:3px"/> |
|
|
|
|
<span>支付宝</span> |
|
|
|
|
</a-radio> |
|
|
|
|
<a-radio :value="2"> |
|
|
|
|
<a-icon type="wechat" style="background:#00B40C;color:#fff;border-radius: 2px;padding:1px;margin-right:3px"/> |
|
|
|
|
<span>微信支付</span> |
|
|
|
|
</a-radio> |
|
|
|
|
</a-radio-group> |
|
|
|
|
</div> |
|
|
|
|
<a-checkbox @change="onChange"> |
|
|
|
|
需要电子发票 |
|
|
|
|
</a-checkbox> |
|
|
|
|
</div> |
|
|
|
|
<!-- <div class="addr"></div>--> |
|
|
|
|
</div> |
|
|
|
|
<div class="rightDiv"> |
|
|
|
|
<div class="order"> |
|
|
|
|
<p class="d-flex title"> |
|
|
|
|
<span class="f_14 c_999">订单小计</span> |
|
|
|
|
<span class="f_14 c_31">已选 1 件商品</span> |
|
|
|
|
</p> |
|
|
|
|
<div class="table d-flex"> |
|
|
|
|
<div class="left"> |
|
|
|
|
<!-- <img src="">--> |
|
|
|
|
<div class="img"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="right"> |
|
|
|
|
<p class="d-flex"> |
|
|
|
|
<span class="f_12 c_1B">关键词12定制款立领衬</span> |
|
|
|
|
<span class="f_12 c_999">数量：1</span> |
|
|
|
|
</p> |
|
|
|
|
<p class="f_12 c_999">款式：立领，标签2</p> |
|
|
|
|
<p class="d-flex"> |
|
|
|
|
<span class="f_12 c_999">主辅料：主料1，辅料1，叮叮叮，辅料n</span> |
|
|
|
|
<span class="f_12 c_999">数量：1</span> |
|
|
|
|
</p> |
|
|
|
|
<p class="f_12 c_999">尺码： XXS</p> |
|
|
|
|
<p class="d-flex"> |
|
|
|
|
<span class="f_12 c_999">定制</span> |
|
|
|
|
<span class="f_12 c_999">￥35,500</span> |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<p class="d-flex"> |
|
|
|
|
<span class="f_14 c_31">商品总计</span> |
|
|
|
|
<span class="f_14 c_666">￥35,500</span> |
|
|
|
|
</p> |
|
|
|
|
<p class="d-flex"> |
|
|
|
|
<span class="f_14 c_31">运费</span> |
|
|
|
|
<span class="f_14 c_999">免费</span> |
|
|
|
|
</p> |
|
|
|
|
<p class="d-flex title"> |
|
|
|
|
<span class="f_14 c_31">总计</span> |
|
|
|
|
<span class="f_20 c_31">￥35,500</span> |
|
|
|
|
</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="rightDiv">1</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
@ -50,6 +159,10 @@ |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
formLayout: 'horizontal', |
|
|
|
|
userSex:'',//性别 |
|
|
|
|
userName:'',//姓名 |
|
|
|
|
value: 1, |
|
|
|
|
paymentMode:'',//支付方式 |
|
|
|
|
}; |
|
|
|
|
}, |
|
|
|
|
computed: { |
|
|
|
|
@ -75,12 +188,22 @@ |
|
|
|
|
handleFormLayoutChange(e) { |
|
|
|
|
this.formLayout = e.target.value; |
|
|
|
|
}, |
|
|
|
|
handleChange(value) { |
|
|
|
|
this.userSex = value |
|
|
|
|
}, |
|
|
|
|
onChange(e) { |
|
|
|
|
console.log(`checked = ${e.target.checked}`); |
|
|
|
|
}, |
|
|
|
|
onChange1(e) { |
|
|
|
|
console.log('radio checked', e.target.value); |
|
|
|
|
}, |
|
|
|
|
}, |
|
|
|
|
}; |
|
|
|
|
</script> |
|
|
|
|
<style lang="less" scoped> |
|
|
|
|
.placeOrder{ |
|
|
|
|
padding-top: 54px; |
|
|
|
|
padding-bottom: 80px; |
|
|
|
|
background-color: #F6F6F6; |
|
|
|
|
& >.jz{ |
|
|
|
|
justify-content: space-around; |
|
|
|
|
@ -123,6 +246,15 @@ |
|
|
|
|
.addr{ |
|
|
|
|
background-color: #fff; |
|
|
|
|
padding:0 30px 30px 30px; |
|
|
|
|
margin-bottom: 25px; |
|
|
|
|
.pay{ |
|
|
|
|
padding: 47px 20px; |
|
|
|
|
border-bottom: 1px solid #EAEAEA; |
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
.ant-radio-wrapper{ |
|
|
|
|
margin-right: 20px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.form{ |
|
|
|
|
background-color: #fff; |
|
|
|
|
@ -131,6 +263,33 @@ |
|
|
|
|
} |
|
|
|
|
.rightDiv{ |
|
|
|
|
width: 410px; |
|
|
|
|
.order{ |
|
|
|
|
background: #FFFFFF; |
|
|
|
|
padding: 24px 43px; |
|
|
|
|
.d-flex{ |
|
|
|
|
justify-content: space-between; |
|
|
|
|
.left{ |
|
|
|
|
width: 60px; |
|
|
|
|
} |
|
|
|
|
.right{ |
|
|
|
|
width: 250px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
&>.d-flex{ |
|
|
|
|
padding: 10px 0; |
|
|
|
|
} |
|
|
|
|
&>.title.d-flex{ |
|
|
|
|
border-bottom: 1px solid #E7E7E7; |
|
|
|
|
padding: 20px 0; |
|
|
|
|
} |
|
|
|
|
.left{ |
|
|
|
|
.img{ |
|
|
|
|
background: #D9D9D9; |
|
|
|
|
width: 60px; |
|
|
|
|
height: 77px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
