chenkainan
2 months ago
6 changed files with 743 additions and 18 deletions
@ -0,0 +1,715 @@ |
|||
<template> |
|||
<div class="order-page"> |
|||
<!-- 页面标题 --> |
|||
<div class="page-header"> |
|||
<h2>填写收货人信息</h2> |
|||
<el-button type="text" class="address-book-btn"> |
|||
新增/修改地址 |
|||
</el-button> |
|||
</div> |
|||
|
|||
<!-- 收货人信息 --> |
|||
<div class="info-section"> |
|||
<h3>收货人信息</h3> |
|||
<div class="address-item"> |
|||
<span class="label">收货人地址：</span> |
|||
<div class="address-content"> |
|||
<div |
|||
class="saved-address" |
|||
v-for="(addr, index) in addresses" |
|||
:key="index" |
|||
@click="selectAddress(index)" |
|||
:class="{ selected: selectedAddressIndex === index }" |
|||
> |
|||
<span class="name-tag">{{ addr.name }} {{ addr.province }}</span> |
|||
<span class="detail">{{ addr.address }} {{ addr.phone }}</span> |
|||
<el-button type="text" class="set-default-btn">设为默认</el-button> |
|||
<el-button type="text" class="edit-btn">编辑</el-button> |
|||
<el-button type="text" class="delete-btn">删除</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="trade-type-item"> |
|||
<span class="label">交易方式：</span> |
|||
<el-radio-group v-model="selectedTradeType"> |
|||
<el-radio :label="1">先款后货</el-radio> |
|||
<el-radio :label="2">货到付款</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
|
|||
<h3>发票信息</h3> |
|||
<div class="invoice-type-item"> |
|||
<span class="label">发票类型：</span> |
|||
<el-radio-group v-model="selectedInvoiceType"> |
|||
<el-radio :label="1">增值税普通发票</el-radio> |
|||
<el-radio :label="2">普通电子发票</el-radio> |
|||
</el-radio-group> |
|||
</div> |
|||
|
|||
<div class="invoice-title-item"> |
|||
<span class="label">发票抬头：</span> |
|||
<el-select |
|||
v-model="selectedInvoiceTitle" |
|||
placeholder="请选择发票抬头" |
|||
class="invoice-title-select" |
|||
> |
|||
<el-option |
|||
v-for="(title, index) in invoiceTitles" |
|||
:key="index" |
|||
:label="title.name" |
|||
:value="title.id" |
|||
></el-option> |
|||
</el-select> |
|||
<el-button type="text" class="add-title-btn">+ 添加</el-button> |
|||
</div> |
|||
|
|||
<h3>收票地址</h3> |
|||
<div class="invoice-address-item"> |
|||
<span class="label">收票地址：</span> |
|||
<div class="address-content"> |
|||
<div |
|||
class="saved-address" |
|||
v-for="(addr, index) in invoiceAddresses" |
|||
:key="index" |
|||
@click="selectInvoiceAddress(index)" |
|||
:class="{ selected: selectedInvoiceAddressIndex === index }" |
|||
> |
|||
<span class="name-tag">{{ addr.name }} {{ addr.province }}</span> |
|||
<span class="detail">{{ addr.address }} {{ addr.phone }}</span> |
|||
<el-button type="text" class="set-default-btn">设为默认</el-button> |
|||
<el-button type="text" class="edit-btn">编辑</el-button> |
|||
<el-button type="text" class="delete-btn">删除</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 签署合同 --> |
|||
<div class="contract-section"> |
|||
<h3>签署合同</h3> |
|||
<p>如需签署合同，提交订单后，请至采购中心>合同中心签署</p> |
|||
</div> |
|||
|
|||
<!-- 商品清单 --> |
|||
<div class="goods-section"> |
|||
<h3>商品清单</h3> |
|||
|
|||
<!-- 订单分组 --> |
|||
<div |
|||
class="order-group" |
|||
v-for="(group, groupIndex) in orderGroups" |
|||
:key="groupIndex" |
|||
> |
|||
<div class="supplier-info"> |
|||
<span>供货名称：{{ group.supplier }}</span> |
|||
</div> |
|||
<table class="goods-table"> |
|||
<thead> |
|||
<tr> |
|||
<th>商品</th> |
|||
<th>规格</th> |
|||
<th>单价(元)</th> |
|||
<th>数量</th> |
|||
<th>运费</th> |
|||
<th>收货方式</th> |
|||
<th>小计(元)</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr v-for="(item, itemIndex) in group.items" :key="itemIndex"> |
|||
<td> |
|||
<img :src="item.image" alt="商品图片" class="goods-img" /> |
|||
<span class="goods-name">{{ item.name }}</span> |
|||
</td> |
|||
<td>{{ item.spec }}</td> |
|||
<td>{{ item.price }}</td> |
|||
<td>{{ item.quantity }}</td> |
|||
<td>{{ item.freight }}</td> |
|||
<td>{{ item.deliveryType }}</td> |
|||
<td class="subtotal">{{ item.subtotal }}</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
<div class="order-remark"> |
|||
<span class="remark-label">订单备注：</span> |
|||
<div class="rich-text-editor"> |
|||
<el-input |
|||
type="textarea" |
|||
v-model="group.remark" |
|||
rows="4" |
|||
placeholder="请输入订单备注信息" |
|||
class="remark-editor" |
|||
></el-input> |
|||
<div class="editor-toolbar" v-if="false"> |
|||
<el-button |
|||
type="text" |
|||
icon="el-icon-bold" |
|||
size="mini" |
|||
></el-button> |
|||
<el-button |
|||
type="text" |
|||
icon="el-icon-italic" |
|||
size="mini" |
|||
></el-button> |
|||
<el-button |
|||
type="text" |
|||
icon="el-icon-underline" |
|||
size="mini" |
|||
></el-button> |
|||
<el-button |
|||
type="text" |
|||
icon="el-icon-link" |
|||
size="mini" |
|||
></el-button> |
|||
<el-button |
|||
type="text" |
|||
icon="el-icon-picture" |
|||
size="mini" |
|||
></el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<!-- 总计信息 --> |
|||
<div class="total-info"> |
|||
<p> |
|||
共 {{ totalGoodsCount }} 件商品，总商品金额 ¥{{ totalGoodsAmount }} |
|||
</p> |
|||
<p>总运费 ¥{{ totalFreight }}</p> |
|||
<p class="pay-amount">实付总金额 ¥{{ totalPayAmount }}</p> |
|||
<p class="address-info"> |
|||
配送地：{{ selectedAddress.address }}<br /> |
|||
交货地：{{ selectedAddress.address }} {{ selectedAddress.phone }} |
|||
</p> |
|||
<el-button type="primary" class="submit-btn" @click="submitOrder"> |
|||
提交订单 |
|||
</el-button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "OrderPage", |
|||
data() { |
|||
return { |
|||
// 收货地址相关 |
|||
addresses: [ |
|||
{ |
|||
id: 1, |
|||
name: "郑小工", |
|||
province: "江苏省", |
|||
address: "苏州市吴中区文化创意大厦16层", |
|||
phone: "13000000000", |
|||
isDefault: true, |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: "郑小工", |
|||
province: "江苏省", |
|||
address: "苏州市吴中区文化创意大厦16层", |
|||
phone: "13000000001", |
|||
isDefault: false, |
|||
}, |
|||
], |
|||
selectedAddressIndex: 0, |
|||
|
|||
// 交易方式 |
|||
selectedTradeType: 1, // 1:先款后货 2:货到付款 |
|||
|
|||
// 发票信息 |
|||
selectedInvoiceType: 1, // 1:增值税普通发票 2:普通电子发票 |
|||
|
|||
// 发票抬头 |
|||
invoiceTitles: [ |
|||
{ id: 1, name: "苏州特色农产品发展有限公司" }, |
|||
{ id: 2, name: "个人" }, |
|||
{ id: 3, name: "苏州科技有限公司" }, |
|||
], |
|||
selectedInvoiceTitle: null, |
|||
|
|||
// 收票地址 |
|||
invoiceAddresses: [ |
|||
{ |
|||
id: 1, |
|||
name: "郑小工", |
|||
province: "江苏省", |
|||
address: "苏州市吴中区文化创意大厦16层", |
|||
phone: "13000000000", |
|||
isDefault: true, |
|||
}, |
|||
{ |
|||
id: 2, |
|||
name: "郑小工", |
|||
province: "江苏省", |
|||
address: "苏州市吴中区文化创意大厦16层", |
|||
phone: "13000000001", |
|||
isDefault: false, |
|||
}, |
|||
], |
|||
selectedInvoiceAddressIndex: 0, |
|||
|
|||
// 订单分组 |
|||
orderGroups: [ |
|||
{ |
|||
supplier: "新疆特色农产品开发有限公司", |
|||
items: [ |
|||
{ |
|||
image: "https://picsum.photos/50/50?random=1", |
|||
name: "产品标题产品标题产品标题", |
|||
spec: "规格名称一样", |
|||
price: "¥449", |
|||
quantity: 1, |
|||
freight: "¥0.00", |
|||
deliveryType: "邮寄", |
|||
subtotal: "¥449.00", |
|||
}, |
|||
{ |
|||
image: "https://picsum.photos/50/50?random=2", |
|||
name: "产品标题产品标题", |
|||
spec: "规格名称一样", |
|||
price: "¥199", |
|||
quantity: 1, |
|||
freight: "¥0.00", |
|||
deliveryType: "快递", |
|||
subtotal: "¥199.00", |
|||
}, |
|||
], |
|||
remark: "", |
|||
}, |
|||
{ |
|||
supplier: "新疆特色农产品开发有限公司", |
|||
items: [ |
|||
{ |
|||
image: "https://picsum.photos/50/50?random=3", |
|||
name: "产品标题产品标题产品标题", |
|||
spec: "规格名称一样", |
|||
price: "¥339", |
|||
quantity: 1, |
|||
freight: "¥0.00", |
|||
deliveryType: "邮寄", |
|||
subtotal: "¥339.00", |
|||
}, |
|||
], |
|||
remark: "", |
|||
}, |
|||
], |
|||
|
|||
// 总计信息 |
|||
totalGoodsCount: 3, |
|||
totalGoodsAmount: 973, |
|||
totalFreight: 0, |
|||
totalPayAmount: 973, |
|||
}; |
|||
}, |
|||
computed: { |
|||
// 获取选中的收货地址 |
|||
selectedAddress() { |
|||
return this.addresses[this.selectedAddressIndex] || {}; |
|||
}, |
|||
}, |
|||
methods: { |
|||
// 选择收货地址 |
|||
selectAddress(index) { |
|||
this.selectedAddressIndex = index; |
|||
}, |
|||
|
|||
// 选择收票地址 |
|||
selectInvoiceAddress(index) { |
|||
this.selectedInvoiceAddressIndex = index; |
|||
}, |
|||
|
|||
// 提交订单 |
|||
submitOrder() { |
|||
// 表单验证 |
|||
if (this.selectedAddressIndex === null) { |
|||
this.$message.warning("请选择收货地址"); |
|||
return; |
|||
} |
|||
|
|||
if (!this.selectedInvoiceTitle) { |
|||
this.$message.warning("请选择发票抬头"); |
|||
return; |
|||
} |
|||
|
|||
if (this.selectedInvoiceAddressIndex === null) { |
|||
this.$message.warning("请选择收票地址"); |
|||
return; |
|||
} |
|||
|
|||
this.$message.success("订单提交成功！"); |
|||
// 实际项目中可跳转至订单详情页 |
|||
// this.$router.push('/order/detail'); |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.order-page { |
|||
max-width: 1200px; |
|||
margin: 0 auto; |
|||
padding: 20px; |
|||
background-color: #fff; |
|||
border: 1px solid #e6e6e6; |
|||
border-radius: 4px; |
|||
|
|||
.page-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
margin-bottom: 20px; |
|||
|
|||
h2 { |
|||
font-size: 18px; |
|||
font-weight: 500; |
|||
color: #333; |
|||
margin: 0; |
|||
} |
|||
|
|||
.address-book-btn { |
|||
color: #409eff; |
|||
} |
|||
} |
|||
|
|||
.info-section { |
|||
margin-bottom: 20px; |
|||
|
|||
h3 { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
color: #333; |
|||
margin-bottom: 15px; |
|||
padding-bottom: 5px; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
} |
|||
|
|||
.address-item, |
|||
.trade-type-item, |
|||
.invoice-type-item, |
|||
.invoice-title-item, |
|||
.invoice-address-item { |
|||
margin-bottom: 15px; |
|||
display: flex; |
|||
align-items: flex-start; |
|||
|
|||
.label { |
|||
width: 120px; |
|||
color: #666; |
|||
font-size: 14px; |
|||
padding-top: 5px; |
|||
} |
|||
|
|||
.address-content { |
|||
flex: 1; |
|||
} |
|||
|
|||
.saved-address { |
|||
margin-bottom: 10px; |
|||
display: flex; |
|||
align-items: center; |
|||
flex-wrap: wrap; |
|||
padding: 8px; |
|||
border: 1px solid #e6e6e6; |
|||
border-radius: 4px; |
|||
width: 100%; |
|||
cursor: pointer; |
|||
transition: all 0.3s; |
|||
|
|||
&.selected { |
|||
border-color: #6a8a27; |
|||
background-color: rgba(106, 138, 39, 0.05); |
|||
} |
|||
|
|||
.name-tag { |
|||
background-color: #f8f8f8; |
|||
color: #333; |
|||
padding: 2px 6px; |
|||
border-radius: 3px; |
|||
margin-right: 10px; |
|||
font-size: 13px; |
|||
} |
|||
|
|||
.detail { |
|||
flex: 1; |
|||
font-size: 14px; |
|||
color: #666; |
|||
min-width: 200px; |
|||
margin-bottom: 5px; |
|||
} |
|||
|
|||
.set-default-btn, |
|||
.edit-btn, |
|||
.delete-btn { |
|||
margin-left: 10px; |
|||
color: #409eff; |
|||
font-size: 13px; |
|||
padding: 0; |
|||
height: auto; |
|||
} |
|||
} |
|||
|
|||
.el-radio { |
|||
margin-right: 15px; |
|||
margin-top: 3px; |
|||
} |
|||
|
|||
.invoice-title-select { |
|||
width: 300px; |
|||
margin-top: 3px; |
|||
} |
|||
|
|||
.add-title-btn { |
|||
margin-left: 10px; |
|||
color: #409eff; |
|||
padding: 0; |
|||
height: auto; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.contract-section { |
|||
margin-bottom: 20px; |
|||
padding: 15px; |
|||
background-color: #f9f9f9; |
|||
border-radius: 4px; |
|||
|
|||
h3 { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
color: #333; |
|||
margin-bottom: 10px; |
|||
margin-top: 0; |
|||
} |
|||
|
|||
p { |
|||
font-size: 14px; |
|||
color: #666; |
|||
margin: 0; |
|||
} |
|||
} |
|||
|
|||
.goods-section { |
|||
h3 { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
color: #333; |
|||
margin-bottom: 15px; |
|||
padding-bottom: 5px; |
|||
border-bottom: 1px solid #f0f0f0; |
|||
} |
|||
|
|||
.order-group { |
|||
margin-bottom: 20px; |
|||
border: 1px solid #e6e6e6; |
|||
border-radius: 4px; |
|||
overflow: hidden; |
|||
|
|||
.supplier-info { |
|||
background-color: #f5f7fa; |
|||
padding: 10px 15px; |
|||
font-size: 14px; |
|||
color: #333; |
|||
border-bottom: 1px solid #e6e6e6; |
|||
} |
|||
|
|||
.goods-table { |
|||
width: 100%; |
|||
border-collapse: collapse; |
|||
|
|||
th { |
|||
background-color: #f5f7fa; |
|||
text-align: left; |
|||
padding: 10px 15px; |
|||
border: 1px solid #e6e6e6; |
|||
font-weight: 500; |
|||
color: #333; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
td { |
|||
padding: 10px 15px; |
|||
border: 1px solid #e6e6e6; |
|||
vertical-align: middle; |
|||
font-size: 14px; |
|||
color: #666; |
|||
} |
|||
|
|||
.goods-img { |
|||
width: 50px; |
|||
height: 50px; |
|||
margin-right: 10px; |
|||
vertical-align: middle; |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.goods-name { |
|||
vertical-align: middle; |
|||
max-width: 200px; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.subtotal { |
|||
color: #ff4d4f; |
|||
font-weight: 500; |
|||
} |
|||
} |
|||
|
|||
.order-remark { |
|||
padding: 15px; |
|||
font-size: 14px; |
|||
color: #666; |
|||
border-top: 1px solid #e6e6e6; |
|||
background-color: #f9f9f9; |
|||
|
|||
.remark-label { |
|||
display: block; |
|||
margin-bottom: 10px; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.rich-text-editor { |
|||
border: 1px solid #e6e6e6; |
|||
border-radius: 4px; |
|||
overflow: hidden; |
|||
|
|||
.remark-editor { |
|||
border: none; |
|||
border-bottom: 1px solid #e6e6e6; |
|||
border-radius: 0; |
|||
min-height: 100px; |
|||
} |
|||
|
|||
.editor-toolbar { |
|||
padding: 5px 10px; |
|||
background-color: #f5f5f5; |
|||
border-top: 1px solid #e6e6e6; |
|||
|
|||
.el-button { |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.total-info { |
|||
text-align: right; |
|||
padding: 20px; |
|||
background-color: #f5f7fa; |
|||
border-radius: 4px; |
|||
margin-top: 10px; |
|||
|
|||
p { |
|||
margin: 8px 0; |
|||
color: #333; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.pay-amount { |
|||
font-weight: bold; |
|||
color: #ff4d4f; |
|||
font-size: 16px; |
|||
margin: 15px 0; |
|||
} |
|||
|
|||
.address-info { |
|||
font-size: 13px; |
|||
color: #999; |
|||
margin-top: 15px; |
|||
line-height: 1.6; |
|||
text-align: right; |
|||
} |
|||
|
|||
.submit-btn { |
|||
margin-top: 20px; |
|||
width: 150px; |
|||
height: 40px; |
|||
background-color: #ff4d4f; |
|||
border: none; |
|||
font-size: 16px; |
|||
|
|||
&:hover { |
|||
background-color: #e03e40; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// 响应式适配 |
|||
@media (max-width: 768px) { |
|||
.order-page { |
|||
padding: 10px; |
|||
} |
|||
|
|||
.info-section { |
|||
.address-item, |
|||
.trade-type-item, |
|||
.invoice-type-item, |
|||
.invoice-title-item, |
|||
.invoice-address-item { |
|||
flex-direction: column; |
|||
|
|||
.label { |
|||
width: 100%; |
|||
margin-bottom: 5px; |
|||
padding-top: 0; |
|||
} |
|||
|
|||
.saved-address { |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
|
|||
.name-tag, |
|||
.detail { |
|||
margin-bottom: 8px; |
|||
width: 100%; |
|||
} |
|||
|
|||
.set-default-btn, |
|||
.edit-btn, |
|||
.delete-btn { |
|||
margin-left: 0; |
|||
margin-right: 10px; |
|||
display: inline-block; |
|||
} |
|||
} |
|||
|
|||
.invoice-title-select { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.goods-section { |
|||
.goods-table { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.order-group { |
|||
.goods-table th, |
|||
.goods-table td { |
|||
padding: 8px; |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.goods-name { |
|||
max-width: 100px; |
|||
} |
|||
} |
|||
|
|||
.total-info { |
|||
padding: 15px; |
|||
|
|||
.submit-btn { |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue