yu
/
CostumingPlatform
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

私人定制下单

Browse Source
zhc4dev
暖暖 2 years ago
parent 29056a3259
commit 397597cbc3
1 changed files with 195 additions and 42 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 237
      ant-design-vue-jeecg/src/views/shopping/components/Order/placeOrder.vue

237
ant-design-vue-jeecg/src/views/shopping/components/Order/placeOrder.vue
Unescape View File

@ -6,7 +6,7 @@
<div class="phoneDiv"> <div class="phoneDiv">
<p class="f_14">手机号码:</p> <p class="f_14">手机号码:</p>
<p class="f_14">我们将通过以下手机号码向您发送订单相关信息</p> <p class="f_14">我们将通过以下手机号码向您发送订单相关信息</p>
<p class="f_14 phone">17719145652</p> <p class="f_14 phone">{{phone}}</p>
</div> </div>
<div class="addr"> <div class="addr">
<div class="title"> <div class="title">
@ -16,18 +16,19 @@
<a-form layout="vertical"> <a-form layout="vertical">
<a-form-item label="请选择您的配送方式"> <a-form-item label="请选择您的配送方式">
<a-radio-group> <a-radio-group>
<a-radio value="a"> <a-radio value="0">
送货上门 送货上门
</a-radio> </a-radio>
<a-radio value="b"> <a-radio value="1">
门店自提 门店自提
</a-radio> </a-radio>
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
<a-form-item <a-form-item
label="称呼" label="称呼"
v-if="addr.length == 0"
> >
<a-select placeholder="请选择称呼" :value="userSex" style="width: 120px;margin-right:10px" @change="handleChange"> <a-select placeholder="请选择称呼" :value="userSex1" style="width: 120px;margin-right:10px" @change="handleChange1">
<a-select-option value="1"> <a-select-option value="1">
先生 先生
</a-select-option> </a-select-option>
@ -39,49 +40,42 @@
</a-form-item> </a-form-item>
<a-form-item <a-form-item
label="选择地址" label="选择地址"
v-if="addr.length == 0"
> >
<a-input placeholder="input placeholder" /> <j-area-linkage type="cascader" v-model="addr1" placeholder="请选择省市区"/>
</a-form-item> </a-form-item>
<a-form-item <a-form-item
label="详细地址" label="详细地址"
v-if="addr.length == 0"
> >
<a-textarea placeholder="请输入街道、门牌号码等详细地址" auto-size /> <a-textarea v-model="detailed1" placeholder="请输入街道、门牌号码等详细地址" auto-size />
</a-form-item> </a-form-item>
<a-form-item <a-form-item
label="手机号码" label="手机号码"
v-if="addr.length == 0"
> >
<a-input style="width:150px;margin-right:10px" placeholder="+86 中国大陆地区" disabled/> <a-input style="width:150px;margin-right:10px" placeholder="+86 中国大陆地区" disabled/>
<a-input style="width:300px" placeholder="请输入手机号码" :value="userName"/> <a-input style="width:300px" placeholder="请输入手机号码" :value="phone1"/>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item v-if="addr.length == 0">
<a-checkbox @change="onChange"> <a-checkbox @change="onChange1">
保存该地址至地址簿 保存该地址至地址簿
</a-checkbox> </a-checkbox>
</a-form-item> </a-form-item>
<!-- <a-form-item v-bind="formItemLayout" label="手机号码">--> <a-form-item v-if="addr.length != 0">
<!-- <a-input--> <p class="d-flex addrTitle">
<!-- v-decorator="[--> <span class="f_14 c_1B">地址</span>
<!-- 'phone',--> <span class="f_12 c_1B" @click="showModal"><a-icon type="plus" />添加新地址</span>
<!-- {--> </p>
<!-- rules: [{ required: true, message: 'Please input your phone number!' }],--> <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>
<!-- <a-select--> <p class="f_12 c_31">{{item.province}}{{item.city}}{{item.area}}{{item.detailed}}</p>
<!-- slot="addonBefore"--> <p class="f_12 c_1B" v-if="item.flag">默认地址</p>
<!-- v-decorator="['prefix', { initialValue: '86' }]"--> </div>
<!-- style="width: 70px"--> </div>
<!-- default-value="86"--> </a-form-item>
<!-- >-->
<!-- <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> </a-form>
</div> </div>
</div> </div>
@ -91,7 +85,7 @@
<span class="text f_18">支付方式</span></div> <span class="text f_18">支付方式</span></div>
<div class="pay"> <div class="pay">
<p class="f_12 c_1B">在线支付</p> <p class="f_12 c_1B">在线支付</p>
<a-radio-group v-model="paymentMode" @change="onChange1"> <a-radio-group v-model="paymentMode" @change="onChange2">
<a-radio :value="1"> <a-radio :value="1">
<a-icon type="alipay" style="background:#08AAFF;color:#fff;border-radius: 2px;padding:1px;margin-right:3px"/> <a-icon type="alipay" style="background:#08AAFF;color:#fff;border-radius: 2px;padding:1px;margin-right:3px"/>
<span>支付宝</span> <span>支付宝</span>
@ -102,17 +96,16 @@
</a-radio> </a-radio>
</a-radio-group> </a-radio-group>
</div> </div>
<a-checkbox @change="onChange"> <a-checkbox @change="onChange3">
需要电子发票 需要电子发票
</a-checkbox> </a-checkbox>
</div> </div>
<!-- <div class="addr"></div>-->
</div> </div>
<div class="rightDiv"> <div class="rightDiv">
<div class="order"> <div class="order">
<p class="d-flex title"> <p class="d-flex title">
<span class="f_14 c_999">订单小计</span> <span class="f_14 c_999">订单小计</span>
<span class="f_14 c_31">已选 1 件商品</span> <span class="f_14 c_31">已选{{num}} 件商品</span>
</p> </p>
<div class="table d-flex"> <div class="table d-flex">
<div class="left"> <div class="left">
@ -164,18 +157,111 @@
</div> </div>
</div> </div>
</div> </div>
<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-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="选择地址"
>
<j-area-linkage type="cascader" v-model="addr2" placeholder="请选择省市区"/>
</a-form-item>
<a-form-item
label="详细地址"
>
<a-textarea v-model="detailed2" 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="phone2"/>
</a-form-item>
<a-form-item>
<a-checkbox @change="onChange4">
保存该地址至地址簿
</a-checkbox>
</a-form-item>
</a-form>
</a-modal>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
data() { data() {
return { return {
ModalText: 'Content of the modal',
visible: false,
confirmLoading: false,
formLayout: 'horizontal', formLayout: 'horizontal',
userSex:'',//性别 delivery:'17719145652',//配送方式
visit:'0',//是否送货上门
phone:'17719145652',//电话
userSex1:'',//性别1
userSex2:'',//性别2
userName:'',//姓名 userName:'',//姓名
phone1:'',//电话1
phone2:'',//电话2
addr:[
// {
// id:1,
// name:'吴一',
// phone:'17777777777',
// province:'河南省',
// city:'驻马店市',
// area:'驿城区',
// detailed:'黄淮学院北区',
// flag:true,//是否是默认地址
// },//地址一
// {
// id:2,
// name:'吴二',
// phone:'17777777777',
// province:'河南省',
// city:'驻马店市',
// area:'驿城区',
// detailed:'黄淮学院北区',
// flag:false,//是否是默认地址
// },//地址二
// {
// id:3,
// name:'吴三',
// phone:'17777777777',
// province:'河南省',
// city:'驻马店市',
// area:'驿城区',
// detailed:'黄淮学院北区',
// flag:false,//是否是默认地址
// },//地址三
],//地址列表
addr1:'',//地址选择器1
addr2:'',//地址选择器2
detailed1:'',//详细地址1
detailed2:'',//详细地址2
save1:false,//是否保存到地址簿1
save2:false,//是否保存到地址簿2
value: 1, value: 1,
paymentMode:'',//支付方式 paymentMode:'',//支付方式
bill:'',//是否需要电子发票
chinaArea:[],
num:1,//已选几件商品
}; };
}, },
computed: { computed: {
@ -198,17 +284,53 @@
}, },
}, },
methods: { methods: {
handleCard(e){
let cardList = document.querySelectorAll(".cardItem")
cardList.forEach(function (item,index) {
item.classList.remove('active')
})
e.target.classList.add('active')
},
handleFormLayoutChange(e) { handleFormLayoutChange(e) {
this.formLayout = e.target.value; this.formLayout = e.target.value;
}, },
handleChange(value) { handleChange1(value) {
this.userSex = value this.userSex = value
}, },
onChange(e) { handleChange2(value) {
console.log(`checked = ${e.target.checked}`); this.userSex = value
}, },
onChange1(e) { onChange1(e) {
console.log(`checked = ${e.target.checked}`);
this.save1 = !this.save1
},
onChange2(e) {
console.log('radio checked', e.target.value);
this.paymentMode = e.target.value
},
onChange3(e) {
console.log(`checked = ${e.target.checked}`);
this.bill = e.target.checked
},
onChange4(e) {
console.log('radio checked', e.target.value); console.log('radio checked', e.target.value);
this.save2 = !this.save2
},
showModal() {
this.visible = true;
},
handleOk(e) {
this.ModalText = 'The modal will be closed after two seconds';
this.confirmLoading = true;
setTimeout(() => {
this.visible = false;
this.confirmLoading = false;
}, 2000);
},
handleCancel(e) {
console.log('Clicked cancel button');
this.visible = false;
}, },
}, },
}; };
@ -294,6 +416,37 @@
.form{ .form{
background-color: #fff; background-color: #fff;
padding-top: 30px; padding-top: 30px;
.addrTitle{
justify-content: space-between;
.f_12{
border: 1px solid #C8C6C5;
padding: 3px 8px;
}
i{
margin-right: 3px;
}
}
.cardDiv{
justify-content: space-between;
flex-wrap: wrap;
.cardItem{
padding: 15px 16px;
margin-bottom: 20px;
transition: all 0.3s;
border: 1px solid #C8C6C5;
&:hover{
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
p{
margin-bottom: 8px;
}
}
.active{
border-color: #1B1B1B;
}
}
} }
} }
.rightDiv{ .rightDiv{

Write Preview
Loading…
Cancel
Save