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

下单

Browse Source
zhc4dev
暖暖 2 years ago
parent a7e5e71f95
commit 61b5eef51c
3 changed files with 171 additions and 7 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. 3
      ant-design-vue-jeecg/src/views/shopping/assets/common.css
  2. 171
      ant-design-vue-jeecg/src/views/shopping/components/Order/placeOrder.vue
  3. 4
      ant-design-vue-jeecg/src/views/shopping/pages/sirendingzhi.vue

3
ant-design-vue-jeecg/src/views/shopping/assets/common.css
Unescape View File

@ -94,4 +94,7 @@ a {
.c_1B { .c_1B {
color: #1B1B1B; color: #1B1B1B;
} }
.c_31 {
color: #313131;
}
.textfield {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} .textfield {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

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

@ -25,22 +25,131 @@
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
<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>
<a-form-item <a-form-item
label="Field B" label="选择地址"
> >
<a-input placeholder="input placeholder" /> <a-input placeholder="input placeholder" />
</a-form-item> </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> </a-form>
</div> </div>
</div> </div>
<div class="addr"></div> <div class="addr">
<div class="addr"></div> <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>
<div class="rightDiv">1</div>
</div> </div>
</div> </div>
@ -50,6 +159,10 @@
data() { data() {
return { return {
formLayout: 'horizontal', formLayout: 'horizontal',
userSex:'',//性别
userName:'',//姓名
value: 1,
paymentMode:'',//支付方式
}; };
}, },
computed: { computed: {
@ -75,12 +188,22 @@
handleFormLayoutChange(e) { handleFormLayoutChange(e) {
this.formLayout = e.target.value; 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.placeOrder{ .placeOrder{
padding-top: 54px; padding-top: 54px;
padding-bottom: 80px;
background-color: #F6F6F6; background-color: #F6F6F6;
& >.jz{ & >.jz{
justify-content: space-around; justify-content: space-around;
@ -123,6 +246,15 @@
.addr{ .addr{
background-color: #fff; background-color: #fff;
padding:0 30px 30px 30px; 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{ .form{
background-color: #fff; background-color: #fff;
@ -131,6 +263,33 @@
} }
.rightDiv{ .rightDiv{
width: 410px; 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;
}
}
}
} }
} }
} }

4
ant-design-vue-jeecg/src/views/shopping/pages/sirendingzhi.vue
Unescape View File

@ -155,14 +155,16 @@
<div v-if="current == 3"> <div v-if="current == 3">
<PlaceOrder></PlaceOrder> <PlaceOrder></PlaceOrder>
</div> </div>
<Footer></Footer>
</div> </div>
</template> </template>
<script> <script>
import Header from "../components/Header/HeaderView"; import Header from "../components/Header/HeaderView";
import Footer from "../components/Footer/FooterView";
import PlaceOrder from "../components/Order/placeOrder" import PlaceOrder from "../components/Order/placeOrder"
export default { export default {
name: "sirendingzhi", name: "sirendingzhi",
components: { Header ,PlaceOrder}, components: { Header ,PlaceOrder,Footer},
data() { data() {
return { return {
current: 3, current: 3,

Write Preview
Loading…
Cancel
Save