chenkainan
2 months ago
10 changed files with 1505 additions and 2 deletions
@ -0,0 +1,123 @@ |
|||||
|
<template> |
||||
|
<div class="bg"> |
||||
|
<div class="common-card normal-margin-bottom"> |
||||
|
<div class="flex-between"> |
||||
|
<div class="left-box"> |
||||
|
<div class="success-icon-box"><i style="font-size: 30px;font-weight: bold;color: white;" class="el-icon-check"></i></div> |
||||
|
|
||||
|
<div style="display: flex;flex-direction: column;justify-content: space-between;"> |
||||
|
<div class="success-title">订单提交成功，请尽快完成支付！</div> |
||||
|
<div class="success-subtitle">订单号：<span class="tip-text">XD250731153300007092</span></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="amount">应付金额：<span class="price">176.00</span></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="common-card "> |
||||
|
<div style="font-weight: bold;margin-bottom: 20px;">请<span style="color: #d80200;padding: 0 5px;">点击</span>选择支付方式 |
||||
|
<span class="tip-text">（提示：您可以先与单位的财务人员确认使用哪种支付方式）</span> |
||||
|
</div> |
||||
|
<div class="payment-method" @click="selectPayment('/OrderPayB2B')"> |
||||
|
<div class="payment-name">企业网银 B2B 支付</div> |
||||
|
<div class="tip-text">使用单位在银行开通的企业网银 B2B 功能进行支付。支持银行：农行</div> |
||||
|
</div> |
||||
|
<div class="payment-method" @click="selectPayment('/OrderPayCode')"> |
||||
|
<div class="payment-name">识别码支付<span class="tip-text">（银行柜台汇款/国库支付/现金、支票汇款/网银支付）</span></div> |
||||
|
<div class="tip-text">将供应商的收款账户和识别码提供给单位财务人员</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="note" style="font-size: 14px;"> |
||||
|
注：识别码用于关联订单与货款，是预算任务完成的重要依据。以银行柜台汇款/国库支付/现金、支票汇款/网银等付款方式支付时，均应填写识别码 |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'OrderPay', |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
selectPayment(path) { |
||||
|
this.$router.push({path: path}); |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
.common-card{ |
||||
|
width: 100%; |
||||
|
background-color: white; |
||||
|
padding: 20px; |
||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); |
||||
|
} |
||||
|
|
||||
|
.left-box{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.success-icon-box{ |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
border-radius: 50%; |
||||
|
background-color: #67C23A; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.success-title{ |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
} |
||||
|
.price{ |
||||
|
color: #d80200; |
||||
|
&::before{ |
||||
|
content: "¥"; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
.tip-text{ |
||||
|
font-size: 14px; |
||||
|
color: #999; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.payment-method { |
||||
|
border: 1px solid #eee; |
||||
|
border-radius: 4px; |
||||
|
padding: 10px; |
||||
|
margin-bottom: 20px; |
||||
|
background: #fafafa; |
||||
|
cursor: pointer; |
||||
|
line-height: 2; |
||||
|
.payment-name { |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
.payment-method:last-child { |
||||
|
margin-bottom: 0; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
|
||||
|
|
||||
@ -0,0 +1,187 @@ |
|||||
|
<template> |
||||
|
<div class="bg"> |
||||
|
<div class="flex-between" style="margin-bottom: 20px;"> |
||||
|
<div></div> |
||||
|
<div style="color: #d80200;cursor: pointer;" @click="$router.go(-1)">重新选择支付方式</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="common-card normal-margin-bottom"> |
||||
|
<div class="flex-between"> |
||||
|
<div class="left-box"> |
||||
|
<div class="success-icon-box"><i style="font-size: 30px;font-weight: bold;color: white;" class="el-icon-check"></i></div> |
||||
|
|
||||
|
<div style="display: flex;flex-direction: column;justify-content: space-between;"> |
||||
|
<div class="success-title">请选择一家银行，然后通过企业网银B2B进行支付</div> |
||||
|
<div class="success-subtitle">订单号：<span class="tip-text">XD250731153300007092</span></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="amount">应付金额：<span class="price">176.00</span></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="common-card "> |
||||
|
<div class="grid-container"> |
||||
|
<div class="bank-img" v-for="i in 23" :key="i" @click="activeIndex=i"> |
||||
|
<img class="bank-img" src="https://static.ticket.sz-trip.com/uploads/20250627/08ca7d74f5a7c6299bc72f29a27c918e.png"></img> |
||||
|
<div class="hover-box" v-if="activeIndex==i"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="flex-between" style="margin-top: 40px;"> |
||||
|
<div> |
||||
|
如您的付款行不在上述银行列表中，请选择 <span style="color: #d80200;">识别码支付</span>。 |
||||
|
</div> |
||||
|
<el-button type="danger" @click="dialogVisible = true">去支付</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
<el-dialog custom-class="error-pay-dialog" :show-close="false" :visible.sync="dialogVisible" width="800px"> |
||||
|
<div class="dialog-content"> |
||||
|
<div class="dialog-title">尊敬的客户:</div> |
||||
|
<div class="dialog-title"> |
||||
|
系统未能成功接受到证书信息，导致无法登录网银专业版。此现象可能是多种原因导致，请您根据下述方法进行处理: |
||||
|
</div> |
||||
|
<ol class="dialog-list"> |
||||
|
<li> |
||||
|
下载安装并运行 |
||||
|
<a href="#" style="color: #409EFF; text-decoration: underline;">"农业银行网银助手"</a>， |
||||
|
帮助您检测问题并根据结果进行修复； |
||||
|
</li> |
||||
|
<li>请关闭所有打开的IE浏览窗口，重新尝试登录；</li> |
||||
|
<li> |
||||
|
如仍不能正常登录网银专业版，请参阅 |
||||
|
<a href="#" style="color: #409EFF; text-decoration: underline;">"对公网上银行常见问题解答"</a> |
||||
|
的【登录】部分； |
||||
|
</li> |
||||
|
<li> |
||||
|
您可拨打95599客户服务电话，也可点击 |
||||
|
<a href="#" style="color: #409EFF; text-decoration: underline;">【在线客服】</a> |
||||
|
进入人工服务，将由专人为您提供帮助。 |
||||
|
</li> |
||||
|
</ol> |
||||
|
|
||||
|
<div class="flex-center" style="margin-top: 50px;"> |
||||
|
<el-button type="primary" size="small" @click="dialogVisible = false">关闭</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'OrderPay', |
||||
|
data() { |
||||
|
return { |
||||
|
activeIndex:0, |
||||
|
data: [], |
||||
|
bank: null, |
||||
|
dialogVisible: false, |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.common-card{ |
||||
|
width: 100%; |
||||
|
background-color: white; |
||||
|
padding: 20px; |
||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); |
||||
|
} |
||||
|
|
||||
|
.left-box{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.success-icon-box{ |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
border-radius: 50%; |
||||
|
background-color: #67C23A; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.success-title{ |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
} |
||||
|
.price{ |
||||
|
color: #d80200; |
||||
|
&::before{ |
||||
|
content: "¥"; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
.tip-text{ |
||||
|
font-size: 14px; |
||||
|
color: #999; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.grid-container{ |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(5, 1fr); |
||||
|
grid-gap: 20px; |
||||
|
.bank-img{ |
||||
|
width: 180px; |
||||
|
height: 50px; |
||||
|
position: relative; |
||||
|
cursor: pointer; |
||||
|
.hover-box{ |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background-color: rgba(0, 0, 0, .5); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
::v-deep .error-pay-dialog{ |
||||
|
.el-dialog__header{ |
||||
|
display: none; |
||||
|
} |
||||
|
.el-dialog__body{ |
||||
|
|
||||
|
} |
||||
|
.dialog-content{ |
||||
|
font-weight: bold; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.dialog-title{ |
||||
|
color: #d80200; |
||||
|
line-height: 2; |
||||
|
} |
||||
|
.dialog-list { |
||||
|
margin-top: 20px; |
||||
|
margin-left: 40px; |
||||
|
line-height: 3; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
|
||||
|
|
||||
@ -0,0 +1,194 @@ |
|||||
|
<template> |
||||
|
<div class="bg"> |
||||
|
<div class="flex-between" style="margin-bottom: 20px;"> |
||||
|
<div></div> |
||||
|
<div style="color: #d80200;cursor: pointer;" @click="$router.go(-1)">重新选择支付方式</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="common-card normal-margin-bottom"> |
||||
|
<div class="flex-between"> |
||||
|
<div class="left-box"> |
||||
|
<div class="success-icon-box"><i style="font-size: 30px;font-weight: bold;color: white;" class="el-icon-check"></i></div> |
||||
|
|
||||
|
<div style="display: flex;flex-direction: column;justify-content: space-between;"> |
||||
|
<div class="success-title">请将下方的<span class="red-text">【供应商收款账户】</span>提供给您单位的<span class="red-text">【财务人员】</span>，</div> |
||||
|
<div class="success-subtitle">然后由财务人员完成汇款转账。</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="amount">应付金额：<span class="price">176.00</span></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="common-card normal-margin-bottom"> |
||||
|
|
||||
|
<div class="tips-title">温馨提示：</div> |
||||
|
<ul class="tips-list"> |
||||
|
<li>本页面仅展示供应商的收款账户信息，不需要进行操作；</li> |
||||
|
<li>为确保资金安全，该订单支付只能向此账户汇款，不得向供应商线下提供的任何银行账户汇款；</li> |
||||
|
<li> |
||||
|
为确保及时对账匹配付款信息，付款时请务必在汇款单的“用途/备注/摘要/附言”处添加识别码，添加内容不超过36个汉字且不能填写任何特殊字符，正确填写方式可参考如下或 |
||||
|
<a href="#" class="download-link">下载汇款单示例</a> |
||||
|
</li> |
||||
|
</ul> |
||||
|
<div class="example-section"> |
||||
|
仅填写识别码：<span class="red-text">faw2d8</span> |
||||
|
</div> |
||||
|
<div class="example-section"> |
||||
|
若您的汇款行或付款机构对于添加内容有“不得输入纯数字或纯字母”的要求，可在识别码前增加“货款”二字后再录入，如：货款<span class="red-text">faw2d8</span> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
|
||||
|
<div class="common-card "> |
||||
|
|
||||
|
<div class="card-header"> |
||||
|
<div> |
||||
|
<span style="font-size: 16px;font-weight: bold;padding-right: 20px;">供应商收款账户</span> |
||||
|
<el-button type="success" size="medium">货款专用结算账号证明下载</el-button> |
||||
|
</div> |
||||
|
<div class="action-buttons"> |
||||
|
<el-button plain type="danger" size="medium">下载账户信息</el-button> |
||||
|
<el-button plain type="danger" size="medium">查询账户信息使用</el-button> |
||||
|
<el-button plain type="danger" size="medium">打印本页面</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div> |
||||
|
<el-descriptions :column="1" border> |
||||
|
<el-descriptions-item label="收款户名">kooriookami</el-descriptions-item> |
||||
|
<el-descriptions-item label="收款账号">35610188000170227</el-descriptions-item> |
||||
|
<el-descriptions-item label="开户银行">35610188000170227</el-descriptions-item> |
||||
|
<el-descriptions-item label="支付金额（元）">176.00</el-descriptions-item> |
||||
|
<el-descriptions-item label="识别码"><span style="font-weight: bold;" class="red-text">faw2d8</span></el-descriptions-item> |
||||
|
<el-descriptions-item label="联行号">303100000688</el-descriptions-item> |
||||
|
</el-descriptions> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'OrderPayCode', |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
::v-deep .el-descriptions-item__label{ |
||||
|
width: 300px; |
||||
|
text-align: center; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
::v-deep .el-descriptions-item__content{ |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
.common-card{ |
||||
|
width: 100%; |
||||
|
background-color: white; |
||||
|
padding: 20px; |
||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); |
||||
|
} |
||||
|
|
||||
|
.left-box{ |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.success-icon-box{ |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
border-radius: 50%; |
||||
|
background-color: #67C23A; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
.success-title{ |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
} |
||||
|
.price{ |
||||
|
color: #d80200; |
||||
|
&::before{ |
||||
|
content: "¥"; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
.red-text{ |
||||
|
color: #d80200; |
||||
|
} |
||||
|
.tip-text{ |
||||
|
font-size: 14px; |
||||
|
color: #999; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.tips-card { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
.tips-title { |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.tips-list { |
||||
|
list-style-type: auto; |
||||
|
margin-left: 20px; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.tips-list li { |
||||
|
margin-bottom: 5px; |
||||
|
} |
||||
|
.download-link { |
||||
|
color: #409EFF; |
||||
|
text-decoration: underline; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.example-section { |
||||
|
margin-bottom: 10px; |
||||
|
padding-left: 20px; |
||||
|
} |
||||
|
|
||||
|
.special-case-section { |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.account-card { |
||||
|
margin-bottom: 20px; |
||||
|
} |
||||
|
.card-header { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.action-buttons { |
||||
|
display: flex; |
||||
|
gap: 10px; |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
|
|
||||
|
|
||||
|
|
||||
@ -0,0 +1,98 @@ |
|||||
|
<template> |
||||
|
<div class="bg"> |
||||
|
<div class="success-icon-box"> |
||||
|
<i style="font-size: 30px;font-weight: bold;color: white;" class="el-icon-check"></i> |
||||
|
</div> |
||||
|
|
||||
|
<div class="tip-text"> |
||||
|
<div>订单提交成功！</div> |
||||
|
<div>请您到<router-link to="/User/OrderList">采购人中心>我的订单</router-link>中查看订单发货进度</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="bottom-btn ">查看我的订单</div> |
||||
|
<div class="bottom-btn back-index">返回首页，再逛逛</div> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'OrderPayCode', |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
font-size: 14px; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding-top: 100px; |
||||
|
} |
||||
|
.success-icon-box{ |
||||
|
width: 50px; |
||||
|
height: 50px; |
||||
|
border-radius: 50%; |
||||
|
background-color: #67C23A; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.price{ |
||||
|
color: #d80200; |
||||
|
&::before{ |
||||
|
content: "¥"; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
.red-text{ |
||||
|
color: #d80200; |
||||
|
} |
||||
|
.tip-text{ |
||||
|
text-align: center; |
||||
|
margin: 10px 0 30px; |
||||
|
a{ |
||||
|
color: #d80200; |
||||
|
padding: 0 2px; |
||||
|
text-decoration: underline; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
.bottom-btn{ |
||||
|
width: 250px; |
||||
|
height: 40px; |
||||
|
text-align: center; |
||||
|
line-height: 40px; |
||||
|
background: #d80200; |
||||
|
color: white; |
||||
|
border-radius: 5px; |
||||
|
margin-bottom: 20px; |
||||
|
cursor: pointer; |
||||
|
font-weight: bold; |
||||
|
&.back-index{ |
||||
|
background: none; |
||||
|
border: 1px solid #999; |
||||
|
color: #999; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
</style> |
||||
|
|
||||
|
|
||||
|
|
||||
@ -0,0 +1,238 @@ |
|||||
|
<template> |
||||
|
<div class="bg"> |
||||
|
<!-- 订单状态时间线 --> |
||||
|
<div class="common-card normal-margin-bottom"> |
||||
|
<div class="order-step"> |
||||
|
<el-steps :active="activeIndex" align-center style="width: 100%;"> |
||||
|
<el-step :class="[i==activeIndexFlag?'is-current':'']" v-for="(item,i) in activities" :key="i"> |
||||
|
<div class="process-title" slot="title">{{ item.status }}</div> |
||||
|
<div slot="icon"> |
||||
|
<span v-if="i>=activeIndexFlag">{{i+1}}</span> |
||||
|
<i v-else style="color: #fff;" class="el-icon-check"></i> |
||||
|
</div> |
||||
|
</el-step> |
||||
|
|
||||
|
</el-steps> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<el-card style="width: 100%;"> |
||||
|
<el-form :model="user" label-width="150px" size="small" > |
||||
|
<div class="header-title">单位信息</div> |
||||
|
<el-form-item label="营业执照"> |
||||
|
<el-upload class="avatar-uploader" action="#" :auto-upload="false" |
||||
|
:on-change="handleAvatarChange" :show-file-list="false"> |
||||
|
<img :src="user.avatar" class="avatar" v-if="user.avatar"> |
||||
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i> |
||||
|
</el-upload> |
||||
|
</el-form-item> |
||||
|
<div class="grid-container"> |
||||
|
<el-form-item label="公司名称：" :rules="inputRequired"> |
||||
|
<el-input v-model="user.nickname" placeholder="请输入"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="统一信用代码：" :rules="inputRequired"> |
||||
|
<el-input v-model="user.nickname" placeholder="请输入"></el-input> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
<div class="grid-container"> |
||||
|
<el-form-item label="法人代表：" :rules="inputRequired"> |
||||
|
<el-input v-model="user.nickname" placeholder="请输入"></el-input> |
||||
|
</el-form-item> |
||||
|
<div></div> |
||||
|
</div> |
||||
|
<div class="header-title" style="margin-top: 50px;">联系人信息</div> |
||||
|
<div class="grid-container"> |
||||
|
<el-form-item label="联系人名称：" :rules="inputRequired"> |
||||
|
<el-input v-model="user.nickname" placeholder="请输入"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="手机号码：" :rules="inputRequired"> |
||||
|
<el-input v-model="user.nickname" placeholder="请输入"></el-input> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
<div class="grid-container"> |
||||
|
<el-form-item label="公司地址：" :rules="inputRequired"> |
||||
|
<el-cascader style="width: 100%;" v-model="user.address" :options="options" filterable></el-cascader> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="详细地址：" :rules="inputRequired"> |
||||
|
<el-input v-model="user.nickname" placeholder="请输入"></el-input> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
<div class="grid-container"> |
||||
|
<el-form-item label="邮箱：" :rules="inputRequired"> |
||||
|
<el-input v-model="user.nickname" placeholder="请输入"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="固定电话：" :rules="inputRequired"> |
||||
|
<el-input v-model="user.nickname" placeholder="请输入"></el-input> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
<div style="display: flex;justify-content: center;margin-top: 50px;"> |
||||
|
<el-button size="small" type="primary" @click="saveUser">保存</el-button> |
||||
|
<el-button size="small" @click="close">关闭</el-button> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
</el-form> |
||||
|
</el-card> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'OrderDetail', |
||||
|
data() { |
||||
|
return { |
||||
|
activities: [ |
||||
|
{ status: '待完善', }, |
||||
|
{ status: '信息待审核', }, |
||||
|
{ status: '审核通过', }, |
||||
|
], |
||||
|
options: [ |
||||
|
{value: 'zhinan',label: '指南', children: [{value: 'shejiyuanze',label: '设计原则', |
||||
|
children: [{value: 'yizhi', label: '一致'}]}]}, |
||||
|
], |
||||
|
activeIndex:2, |
||||
|
activeIndexFlag:1, |
||||
|
user: {}, |
||||
|
inputRequired: { required: true, message: '请输入', trigger: 'blur' }, |
||||
|
selectRequired: { required: true, message: '请选择', trigger: 'change' }, |
||||
|
|
||||
|
}; |
||||
|
}, |
||||
|
computed: { |
||||
|
|
||||
|
}, |
||||
|
methods: { |
||||
|
handleAvatarChange(file) { |
||||
|
this.user.avatar = URL.createObjectURL(file.raw); |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.bg{ |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.common-card{ |
||||
|
width: 100%; |
||||
|
background-color: white; |
||||
|
padding: 20px; |
||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); |
||||
|
} |
||||
|
.order-status { |
||||
|
border-right: 1px solid #eee; |
||||
|
width: 350px; |
||||
|
height: 220px; |
||||
|
flex-shrink: 0; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
.order-no{ |
||||
|
color: #999; |
||||
|
.el-button{ |
||||
|
width: fit-content; |
||||
|
margin: 0; |
||||
|
display: inline-block; |
||||
|
padding: 0; |
||||
|
} |
||||
|
} |
||||
|
.status-title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 16px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
|
||||
|
.status-title i { |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
|
||||
|
.el-button { |
||||
|
width: 120px; |
||||
|
display: block; |
||||
|
margin: 0 auto; |
||||
|
|
||||
|
} |
||||
|
} |
||||
|
.order-step{ |
||||
|
width: 100%; |
||||
|
padding: 20px 20px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
::v-deep .el-step__icon.is-text{ |
||||
|
border: none; |
||||
|
width: 30px; |
||||
|
height: 30px; |
||||
|
border-radius: 50%; |
||||
|
background: #C0C4CC; |
||||
|
color: white; |
||||
|
} |
||||
|
::v-deep .el-step__line{ |
||||
|
top: 13px; |
||||
|
} |
||||
|
::v-deep .el-step__line-inner{ |
||||
|
border-color: #C0C4CC; |
||||
|
} |
||||
|
.process-title{ |
||||
|
color:#999; |
||||
|
font-weight: bold; |
||||
|
font-size:18px; |
||||
|
margin-top: 10px; |
||||
|
} |
||||
|
::v-deep .is-finish .el-step__icon{ |
||||
|
background: #67C23A; |
||||
|
} |
||||
|
|
||||
|
::v-deep .is-current { |
||||
|
.el-step__icon{ |
||||
|
background: #d80200; |
||||
|
} |
||||
|
.process-title{ |
||||
|
color: #d80200; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.avatar-uploader-icon { |
||||
|
font-size: 28px; |
||||
|
color: #8c939d; |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
line-height: 100px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
::v-deep .avatar-uploader .el-upload { |
||||
|
border: 1px dashed #d9d9d9; |
||||
|
border-radius: 6px; |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.avatar { |
||||
|
width: 100px; |
||||
|
height: 100px; |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
.grid-container{ |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(2, 1fr); |
||||
|
grid-gap: 20px; |
||||
|
} |
||||
|
.header-title{ |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 20px; |
||||
|
padding-left: 20px; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
|
|
||||
|
|
||||
@ -0,0 +1,226 @@ |
|||||
|
<template> |
||||
|
<div class="bg"> |
||||
|
<div class="cart-page common-card"> |
||||
|
<!-- 购物车标题与全选 --> |
||||
|
<div class="cart-header"> |
||||
|
购物车(全部 {{ totalCount }} 件) |
||||
|
</div> |
||||
|
|
||||
|
<!-- 商品列表表格 --> |
||||
|
<el-table :data="currentPageData" style="width: 100%" |
||||
|
@select="selectRow" @select-all="selectAll" |
||||
|
ref="multipleTable"> |
||||
|
<!-- 多选框列 --> |
||||
|
<el-table-column type="selection" width="55" align="center"/> |
||||
|
<!-- 商品图片 --> |
||||
|
<el-table-column label="商品" prop="image" > |
||||
|
<template slot-scope="scope"> |
||||
|
<div style="display: flex;align-items: center;"> |
||||
|
<img src="https://picsum.photos/200/200?random=1" alt="商品" class="product-img"> |
||||
|
<div style="padding-left: 10px;">{{ scope.row.title }}</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<!-- 规格 --> |
||||
|
<el-table-column label="规格" prop="spec" align="center" /> |
||||
|
<!-- 单价 --> |
||||
|
<el-table-column label="单价(元)" prop="price" align="center" width="100"/> |
||||
|
<!-- 数量 --> |
||||
|
<el-table-column label="数量" prop="quantity" width="160" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input-number size="small" |
||||
|
v-model="scope.row.quantity" :min="1" :step="1"/> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<!-- 金额 --> |
||||
|
<el-table-column label="金额(元)" prop="amount" width="100" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
¥{{ scope.row.price * scope.row.quantity }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<!-- 操作 --> |
||||
|
<el-table-column label="操作" width="100" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button type="text" @click="handleDelete(scope.row)">删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<!-- 分页组件 --> |
||||
|
<el-pagination |
||||
|
@size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentChange" |
||||
|
:current-page="currentPage" |
||||
|
:page-sizes="[3, 5, 10]" |
||||
|
:page-size="pageSize" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
:total="totalCount" |
||||
|
style="margin-top: 20px; text-align: right;" |
||||
|
/> |
||||
|
|
||||
|
<!-- 底部结算栏 --> |
||||
|
<div class="cart-footer"> |
||||
|
<div class="selected-info"> |
||||
|
已选商品 {{ selectedRows.length }} 件 |
||||
|
总价: ¥0 (不含运费) |
||||
|
</div> |
||||
|
<el-button |
||||
|
type="primary" |
||||
|
@click="handleCheckout" |
||||
|
:disabled="selectedRows.length === 0" |
||||
|
>去结算</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'CartPage', |
||||
|
data() { |
||||
|
return { |
||||
|
// 模拟购物车数据（实际可从接口获取） |
||||
|
cartData: [ |
||||
|
{ id: 1, image: 'https://via.placeholder.com/60', title: '产品标题产品标题', spec: '规格名称一', price: 349, quantity: 1 }, |
||||
|
{ id: 2, image: 'https://via.placeholder.com/60', title: '产品标题产品标题', spec: '规格名称一', price: 199, quantity: 1 }, |
||||
|
{ id: 3, image: 'https://via.placeholder.com/60', title: '产品标题产品标题', spec: '规格名称一', price: 389, quantity: 1 }, |
||||
|
{ id: 4, image: 'https://via.placeholder.com/60', title: '产品标题产品标题', spec: '规格名称一', price: 249, quantity: 1 }, |
||||
|
{ id: 5, image: 'https://via.placeholder.com/60', title: '产品标题产品标题', spec: '规格名称一', price: 449, quantity: 1 }, |
||||
|
{ id: 6, image: 'https://via.placeholder.com/60', title: '产品标题产品标题', spec: '规格名称二', price: 129, quantity: 1 }, |
||||
|
{ id: 7, image: 'https://via.placeholder.com/60', title: '产品标题产品标题', spec: '规格名称二', price: 279, quantity: 1 } |
||||
|
], |
||||
|
|
||||
|
// 分页相关 |
||||
|
pageSize: 3, // 每页条数 |
||||
|
currentPage: 1, // 当前页码 |
||||
|
|
||||
|
// 多选相关 |
||||
|
selectedRows: [{id:1}] // 记录选中的行ID |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
// 总数量 |
||||
|
totalCount() { |
||||
|
return this.cartData.length |
||||
|
}, |
||||
|
// 当前页数据 |
||||
|
currentPageData() { |
||||
|
const start = (this.currentPage - 1) * this.pageSize |
||||
|
const end = start + this.pageSize |
||||
|
return this.cartData.slice(start, end) |
||||
|
}, |
||||
|
|
||||
|
}, |
||||
|
mounted() { |
||||
|
this.refreshTableCheck(); |
||||
|
}, |
||||
|
methods: { |
||||
|
refreshTableCheck () { |
||||
|
this.$nextTick(()=>{ |
||||
|
let selectIds = this.selectedRows.map(item => item.id) |
||||
|
this.currentPageData.forEach(item => { |
||||
|
if (selectIds.includes(item.id)) { |
||||
|
this.$refs.multipleTable.toggleRowSelection(item, true); |
||||
|
} else { |
||||
|
this.$refs.multipleTable.toggleRowSelection(item, false); |
||||
|
} |
||||
|
}) |
||||
|
}) |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
// 表格行选中事件（跨页多选核心：手动维护selectedRows） |
||||
|
selectRow(selection ,row) { |
||||
|
// 提取选中行的ID |
||||
|
let index = this.selectedRows.findIndex(v=>v.id === row.id) |
||||
|
console.log(index) |
||||
|
if(index>=0){ |
||||
|
this.selectedRows.splice(index,1) |
||||
|
} else { |
||||
|
this.selectedRows.push(row) |
||||
|
} |
||||
|
console.log(this.selectedRows) |
||||
|
}, |
||||
|
selectAll (selection) { |
||||
|
|
||||
|
if (selection.length>0) { |
||||
|
let currentNotInselection = selection.filter(v => !this.selectedRows.some(x=>x.id==v.id)) |
||||
|
this.selectedRows = this.selectedRows.concat(currentNotInselection) |
||||
|
} else { |
||||
|
// 从selectRows 删掉当前页面的的 |
||||
|
this.selectedRows = this.selectedRows.filter(v => !this.currentPageData.some(x=>x.id==v.id)) |
||||
|
} |
||||
|
console.log(selection) |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
// 删除事件 |
||||
|
handleDelete(row) { |
||||
|
// 从cartData中移除对应商品 |
||||
|
this.cartData = this.cartData.filter(item => item.id!== row.id) |
||||
|
// 若删除的商品处于选中状态，同步更新selectedRowKeys |
||||
|
this.selectedRows = this.selectedRows.filter(v => v.id!== row.id) |
||||
|
console.log('删除商品:', row) |
||||
|
// 这里可添加接口请求，删除购物车商品逻辑 |
||||
|
this.refreshTableCheck(); |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
// 分页-每页条数改变 |
||||
|
handleSizeChange(val) { |
||||
|
this.pageSize = val |
||||
|
this.currentPage = 1 // 切换条数时重置页码到第1页 |
||||
|
this.refreshTableCheck(); |
||||
|
}, |
||||
|
|
||||
|
// 分页-当前页改变 |
||||
|
handleCurrentChange(val) { |
||||
|
this.currentPage = val |
||||
|
this.refreshTableCheck(); |
||||
|
|
||||
|
}, |
||||
|
|
||||
|
// 结算事件 |
||||
|
handleCheckout() { |
||||
|
console.log('去结算，选中商品ID：', this.selectedRows) |
||||
|
// 这里可跳转结算页，或调用接口提交订单 |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.common-card{ |
||||
|
width: 100%; |
||||
|
background-color: white; |
||||
|
padding: 20px; |
||||
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1); |
||||
|
} |
||||
|
.cart-page { |
||||
|
.cart-header { |
||||
|
margin-bottom: 10px; |
||||
|
} |
||||
|
.product-img { |
||||
|
width: 60px; |
||||
|
height: 60px; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
.cart-footer { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
margin-top: 10px; |
||||
|
padding: 15px; |
||||
|
background-color: #f5f7fa; |
||||
|
border-radius: 4px; |
||||
|
} |
||||
|
.selected-info { |
||||
|
color: #666; |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,197 @@ |
|||||
|
<template> |
||||
|
<div class="bg"> |
||||
|
<el-card style="width: 100%;"> |
||||
|
<div slot="header" class="clearfix"> |
||||
|
<span>收货地址</span> |
||||
|
<el-button size="small" style="float: right;" type="primary" @click="openDialog('add', {})">新增地址</el-button> |
||||
|
</div> |
||||
|
|
||||
|
<el-table :data="addresses" border style="width: 100%;"> |
||||
|
<el-table-column prop="receiver" label="收货人" width="120"></el-table-column> |
||||
|
<el-table-column prop="region" label="所在地区" width="120"></el-table-column> |
||||
|
<el-table-column prop="detailAddress" label="详细地址" width="300"></el-table-column> |
||||
|
<el-table-column prop="phone" label="手机号码" width="150"></el-table-column> |
||||
|
<el-table-column prop="fixedPhone" label="固定电话" width="150"></el-table-column> |
||||
|
<el-table-column prop="alias" label="地区别名" width="120"></el-table-column> |
||||
|
<el-table-column label="操作" width="200"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button> |
||||
|
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<!-- 分页 --> |
||||
|
<div style="text-align: right; margin-top: 20px;"> |
||||
|
<el-pagination |
||||
|
@size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentChange" |
||||
|
:current-page="searchParam.currentPage" |
||||
|
:page-sizes="[5, 10, 20]" |
||||
|
:page-size="searchParam.pageSize" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
:total="searchParam.total" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
</el-card> |
||||
|
|
||||
|
|
||||
|
<el-dialog :title="`${address.type === 'add' ? '新增' : '编辑'}收货地址`" :visible.sync="dialogVisible" width="700px"> |
||||
|
<el-form :model="address" label-width="100px" size="small"> |
||||
|
<el-form-item label="*收货人"> |
||||
|
<el-input v-model="address.receiver" placeholder="请填写收货人姓名,限制40个字符"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="*所在地区"> |
||||
|
<el-select v-model="address.region" placeholder="请选择所在地区"> |
||||
|
<el-option label="北京" value="北京"></el-option> |
||||
|
<el-option label="上海" value="上海"></el-option> |
||||
|
<el-option label="广州" value="广州"></el-option> |
||||
|
<el-option label="深圳" value="深圳"></el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="*详细地址"> |
||||
|
<el-input v-model="address.detailAddress" placeholder="请填写详细地址,限制500个字符"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="*手机号码"> |
||||
|
<el-input v-model="address.phone" placeholder="请填写手机号码,限制11位数字"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="固定电话"> |
||||
|
<el-input v-model="address.fixedPhone" placeholder="请填写固定号码,限制40个字符"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="地区别名"> |
||||
|
<el-input v-model="address.alias" placeholder="请填写常用名称,限制40个字符"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button size="small" @click="dialogVisible = false">取消</el-button> |
||||
|
<el-button size="small" type="primary" @click="saveAddress">保存</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'UserInfo', |
||||
|
data() { |
||||
|
return { |
||||
|
user: {}, |
||||
|
searchParam: {pageSize: 5, currentPage: 1,total: 10}, |
||||
|
dialogVisible: false, |
||||
|
addresses: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
receiver: '张三', |
||||
|
region: '北京', |
||||
|
detailAddress: '北京市朝阳区xx街道xx小区xx号楼xx单元', |
||||
|
phone: '13800138000', |
||||
|
fixedPhone: '010-12345678', |
||||
|
alias: '家' |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
receiver: '李四', |
||||
|
region: '上海', |
||||
|
detailAddress: '上海市浦东新区xx街道xx小区xx号楼xx单元', |
||||
|
phone: '13900139000', |
||||
|
fixedPhone: '021-12345678', |
||||
|
alias: '公司' |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
receiver: '王五', |
||||
|
region: '广州', |
||||
|
detailAddress: '广州市天河区xx街道xx小区xx号楼xx单元', |
||||
|
phone: '13700137000', |
||||
|
fixedPhone: '020-12345678', |
||||
|
alias: '朋友家' |
||||
|
} |
||||
|
], |
||||
|
address: { |
||||
|
type: 'add', |
||||
|
id: '', |
||||
|
receiver: '', |
||||
|
region: '', |
||||
|
detailAddress: '', |
||||
|
phone: '', |
||||
|
fixedPhone: '', |
||||
|
alias: '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
// 分页大小改变 |
||||
|
handleSizeChange(val) { |
||||
|
this.searchParam.pageSize = val; |
||||
|
}, |
||||
|
|
||||
|
// 当前页改变 |
||||
|
handleCurrentChange(val) { |
||||
|
this.searchParam.currentPage = val; |
||||
|
}, |
||||
|
openDialog (type, item) { |
||||
|
this.address = { |
||||
|
type: type, |
||||
|
id: item.id || "", |
||||
|
receiver: item.receiver || "", |
||||
|
region: item.region || "", |
||||
|
detailAddress: item.detailAddress || "", |
||||
|
phone: item.phone || "", |
||||
|
fixedPhone: item.fixedPhone || "", |
||||
|
alias: item.alias || "" |
||||
|
} |
||||
|
this.dialogVisible = true; |
||||
|
}, |
||||
|
|
||||
|
saveAddress() { |
||||
|
if (this.address.id) { |
||||
|
// 编辑地址 |
||||
|
const index = this.addresses.findIndex(item => item.id === this.address.id); |
||||
|
if (index !== -1) { |
||||
|
this.addresses[index] = { ...this.address }; |
||||
|
} |
||||
|
} else { |
||||
|
// 新增地址 |
||||
|
this.address.id = Date.now(); |
||||
|
this.addresses.push({ ...this.address }); |
||||
|
} |
||||
|
this.$message({ |
||||
|
message: '保存成功', |
||||
|
type: 'success' |
||||
|
}); |
||||
|
this.dialogVisible = false; |
||||
|
}, |
||||
|
handleEdit(row) { |
||||
|
this.address = { ...row }; |
||||
|
this.dialogVisible = true; |
||||
|
}, |
||||
|
handleDelete(row) { |
||||
|
this.$confirm('此操作将永久删除该地址, 是否继续?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
const index = this.addresses.findIndex(item => item.id === row.id); |
||||
|
if (index !== -1) { |
||||
|
this.addresses.splice(index, 1); |
||||
|
} |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '删除成功!' |
||||
|
}); |
||||
|
}).catch(() => { |
||||
|
this.$message({ |
||||
|
type: 'info', |
||||
|
message: '已取消删除' |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,192 @@ |
|||||
|
<template> |
||||
|
<div class="bg"> |
||||
|
<el-card style="width: 100%;"> |
||||
|
<div slot="header" class="clearfix"> |
||||
|
<span>我的发票</span> |
||||
|
<el-button size="small" style="float: right;" type="primary" @click="openDialog('add', {})">新增</el-button> |
||||
|
</div> |
||||
|
|
||||
|
<el-table :data="addresses" border style="width: 100%;"> |
||||
|
<el-table-column prop="receiver" label="发票抬头" width="120"></el-table-column> |
||||
|
<el-table-column prop="region" label="纳税人识别号" width="120"></el-table-column> |
||||
|
<el-table-column prop="detailAddress" label="开户银行" width="300"></el-table-column> |
||||
|
<el-table-column prop="phone" label="银行账号" width="150"></el-table-column> |
||||
|
<el-table-column prop="fixedPhone" label="注册电话" width="150"></el-table-column> |
||||
|
<el-table-column prop="alias" label="注册地址" width="120"></el-table-column> |
||||
|
<el-table-column label="操作" width="200"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button> |
||||
|
<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
<!-- 分页 --> |
||||
|
<div style="text-align: right; margin-top: 20px;"> |
||||
|
<el-pagination |
||||
|
@size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentChange" |
||||
|
:current-page="searchParam.currentPage" |
||||
|
:page-sizes="[5, 10, 20]" |
||||
|
:page-size="searchParam.pageSize" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
:total="searchParam.total" |
||||
|
></el-pagination> |
||||
|
</div> |
||||
|
|
||||
|
|
||||
|
|
||||
|
</el-card> |
||||
|
|
||||
|
|
||||
|
<el-dialog title="编辑发票抬头" :visible.sync="dialogVisible" width="700px"> |
||||
|
<el-form :model="address" label-width="120px" size="small"> |
||||
|
<el-form-item label="*发票抬头"> |
||||
|
<el-input v-model="address.receiver" placeholder="请填写发票抬头"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="*纳税人识别号"> |
||||
|
<el-input v-model="address.region" placeholder="请填写纳税人识别号"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="*开户银行"> |
||||
|
<el-input v-model="address.detailAddress" placeholder="请填写开户银行"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="*银行账号"> |
||||
|
<el-input v-model="address.phone" placeholder="请填写银行账号"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="注册电话"> |
||||
|
<el-input v-model="address.fixedPhone" placeholder="请填写注册号码"></el-input> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="注册地址"> |
||||
|
<el-input v-model="address.alias" placeholder="请填写注册地址"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button size="small" @click="dialogVisible = false">取消</el-button> |
||||
|
<el-button size="small" type="primary" @click="saveAddress">保存</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'UserInfo', |
||||
|
data() { |
||||
|
return { |
||||
|
user: {}, |
||||
|
searchParam: {pageSize: 5, currentPage: 1,total: 10}, |
||||
|
dialogVisible: false, |
||||
|
addresses: [ |
||||
|
{ |
||||
|
id: 1, |
||||
|
receiver: '张三', |
||||
|
region: '北京', |
||||
|
detailAddress: '北京市朝阳区xx街道xx小区xx号楼xx单元', |
||||
|
phone: '13800138000', |
||||
|
fixedPhone: '010-12345678', |
||||
|
alias: '家' |
||||
|
}, |
||||
|
{ |
||||
|
id: 2, |
||||
|
receiver: '李四', |
||||
|
region: '上海', |
||||
|
detailAddress: '上海市浦东新区xx街道xx小区xx号楼xx单元', |
||||
|
phone: '13900139000', |
||||
|
fixedPhone: '021-12345678', |
||||
|
alias: '公司' |
||||
|
}, |
||||
|
{ |
||||
|
id: 3, |
||||
|
receiver: '王五', |
||||
|
region: '广州', |
||||
|
detailAddress: '广州市天河区xx街道xx小区xx号楼xx单元', |
||||
|
phone: '13700137000', |
||||
|
fixedPhone: '020-12345678', |
||||
|
alias: '朋友家' |
||||
|
} |
||||
|
], |
||||
|
address: { |
||||
|
type: 'add', |
||||
|
id: '', |
||||
|
receiver: '', |
||||
|
region: '', |
||||
|
detailAddress: '', |
||||
|
phone: '', |
||||
|
fixedPhone: '', |
||||
|
alias: '' |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
// 分页大小改变 |
||||
|
handleSizeChange(val) { |
||||
|
this.searchParam.pageSize = val; |
||||
|
}, |
||||
|
|
||||
|
// 当前页改变 |
||||
|
handleCurrentChange(val) { |
||||
|
this.searchParam.currentPage = val; |
||||
|
}, |
||||
|
openDialog (type, item) { |
||||
|
this.address = { |
||||
|
type: type, |
||||
|
id: item.id || "", |
||||
|
receiver: item.receiver || "", |
||||
|
region: item.region || "", |
||||
|
detailAddress: item.detailAddress || "", |
||||
|
phone: item.phone || "", |
||||
|
fixedPhone: item.fixedPhone || "", |
||||
|
alias: item.alias || "" |
||||
|
} |
||||
|
this.dialogVisible = true; |
||||
|
}, |
||||
|
|
||||
|
saveAddress() { |
||||
|
if (this.address.id) { |
||||
|
// 编辑地址 |
||||
|
const index = this.addresses.findIndex(item => item.id === this.address.id); |
||||
|
if (index !== -1) { |
||||
|
this.addresses[index] = { ...this.address }; |
||||
|
} |
||||
|
} else { |
||||
|
// 新增地址 |
||||
|
this.address.id = Date.now(); |
||||
|
this.addresses.push({ ...this.address }); |
||||
|
} |
||||
|
this.$message({ |
||||
|
message: '保存成功', |
||||
|
type: 'success' |
||||
|
}); |
||||
|
this.dialogVisible = false; |
||||
|
}, |
||||
|
handleEdit(row) { |
||||
|
this.address = { ...row }; |
||||
|
this.dialogVisible = true; |
||||
|
}, |
||||
|
handleDelete(row) { |
||||
|
this.$confirm('此操作将永久删除该地址, 是否继续?', '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
const index = this.addresses.findIndex(item => item.id === row.id); |
||||
|
if (index !== -1) { |
||||
|
this.addresses.splice(index, 1); |
||||
|
} |
||||
|
this.$message({ |
||||
|
type: 'success', |
||||
|
message: '删除成功!' |
||||
|
}); |
||||
|
}).catch(() => { |
||||
|
this.$message({ |
||||
|
type: 'info', |
||||
|
message: '已取消删除' |
||||
|
}); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue