jiazhipeng
/
flavorOfTimeSzMall
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'master' of http://123.60.98.226:3000/jiazhipeng/flavorOfTimeSzMall

master
chenkainan 2 months ago
parent
6320b62b58 4d934e4bce
commit
8fd3c3284b
10 changed files with 1505 additions and 2 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 48
      src/router/index.js
  2. 4
      src/views/User/Index.vue
  3. 123
      src/views/User/OrderPay.vue
  4. 187
      src/views/User/OrderPayB2B.vue
  5. 194
      src/views/User/OrderPayCode.vue
  6. 98
      src/views/User/OrderPaySuccess.vue
  7. 238
      src/views/User/PurchaserAdd.vue
  8. 226
      src/views/User/ShoppingCart.vue
  9. 197
      src/views/User/UserAddress.vue
  10. 192
      src/views/User/UserInvoice.vue

48
src/router/index.js
View File

@ -112,6 +112,24 @@ const router = new Router({
meta: { title: '我的足迹 - 精品商城', keepAlive: false },
component: () => import('@/views/User/ViewHistory.vue')
},
{
path: 'UserAddress',
name: 'UserAddress',
meta: { title: '我的收货地址 - 精品商城', keepAlive: false },
component: () => import('@/views/User/UserAddress.vue')
},
{
path: 'UserInvoice',
name: 'UserInvoice',
meta: { title: '我的发票 - 精品商城', keepAlive: false },
component: () => import('@/views/User/UserInvoice.vue')
},
{
path: 'ShoppingCart',
name: 'ShoppingCart',
meta: { title: '购物车 - 精品商城', keepAlive: false },
component: () => import('@/views/User/ShoppingCart.vue')
},
],
},
{
@ -120,6 +138,36 @@ const router = new Router({
meta: { title: '订单详情 - 精品商城', keepAlive: false },
component: () => import('@/views/User/OrderDetail.vue')
},
{
path: '/PurchaserAdd',
name: 'PurchaserAdd',
meta: { title: '添加采购单位信息 - 精品商城', keepAlive: false },
component: () => import('@/views/User/PurchaserAdd.vue')
},
{
path: '/OrderPay',
name: 'OrderPay',
meta: { title: '订单支付 - 精品商城', keepAlive: false },
component: () => import('@/views/User/OrderPay.vue')
},
{
path: '/OrderPayB2B',
name: 'OrderPayB2B',
meta: { title: '订单支付 - 精品商城', keepAlive: false },
component: () => import('@/views/User/OrderPayB2B.vue')
},
{
path: '/OrderPayCode',
name: 'OrderPayCode',
meta: { title: '订单支付 - 精品商城', keepAlive: false },
component: () => import('@/views/User/OrderPayCode.vue')
},
{
path: '/OrderPaySuccess',
name: 'OrderPaySuccess',
meta: { title: '订单支付 - 精品商城', keepAlive: false },
component: () => import('@/views/User/OrderPaySuccess.vue')
},
// {
// path: '/user/orders/:id',

4
src/views/User/Index.vue
View File

@ -21,12 +21,12 @@ export default {
{title: '我的购物车',path:"" },
{title: '我的订单',path:"/User/OrderList" },
{title: '评价管理',path:"" },
{title: '我的发票',path:"" },
{title: '我的发票',path:"/User/UserInvoice" },
{title: '我的收藏' ,path:""},
{title: '我的足迹',path:"/User/ViewHistory" },
{title: '个人信息',path:"/User/UserInfo" },
{title: '账号设置',path:"" },
{title: '我的收货地址',path:"" }
{title: '我的收货地址',path:"/User/UserAddress" }
]
}
},

123
src/views/User/OrderPay.vue
View File

@ -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>

187
src/views/User/OrderPayB2B.vue
View File

@ -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>

194
src/views/User/OrderPayCode.vue
View File

@ -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>

98
src/views/User/OrderPaySuccess.vue
View File

@ -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">采购人中心&gt;我的订单</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>

238
src/views/User/PurchaserAdd.vue
View File

@ -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>

226
src/views/User/ShoppingCart.vue
View File

@ -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>

197
src/views/User/UserAddress.vue
View File

@ -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>

192
src/views/User/UserInvoice.vue
View File

@ -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>
Write Preview
Loading…
Cancel
Save