b2894lxlx/jjx-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

新增询价单页面等

Browse Source
This commit is contained in:
gxwebsoft
2023-12-07 18:16:26 +08:00
parent 64ac16f3f3
commit c971520e6b
4 changed files with 1116 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/store/store.vue
+282 -130
View File
@@ -8,15 +8,11 @@
<el-menu @select="menuSelect" :default-active="menuIndex" class="el-menu-vertical-demo">
<el-menu-item index="0">
<i class="el-icon-edit"></i>
<span slot="title">我卖出的</span>
<span slot="title">现货列表</span>
</el-menu-item>
<el-menu-item index="1">
<i class="el-icon-warning-outline"></i>
<span slot="title">我购买的</span>
</el-menu-item>
<el-menu-item index="2">
<i class="el-icon-circle-check"></i>
<span slot="title">线下交易</span>
<span slot="title">询价单管理</span>
</el-menu-item>
</el-menu>
</el-col>
@@ -25,134 +21,162 @@
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="全部(4)" name="all">
</el-tab-pane>
<el-tab-pane label="待付款(2)" name="待付款"></el-tab-pane>
<el-tab-pane label="待发货(1)" name="待发货"></el-tab-pane>
<el-tab-pane label="待收货" name="待收货"></el-tab-pane>
<el-tab-pane label="待退款" name="待退款"></el-tab-pane>
<el-tab-pane label="已取消" name="已取消"></el-tab-pane>
<el-tab-pane label="已完成" name="已完成"></el-tab-pane>
<el-tab-pane label="待报价(2)" name="待报价"></el-tab-pane>
<el-tab-pane label="待选商(1)" name="待选商"></el-tab-pane>
<el-tab-pane label="已选商" name="已选商"></el-tab-pane>
</el-tabs>
<el-descriptions border size="small">
<el-descriptions-item label="订单编号"><input placeholder="请输入订单编号" /></el-descriptions-item>
<el-descriptions-item label="下单时间"><input placeholder="下单时间" /></el-descriptions-item>
<el-descriptions-item label="采购商品"><input placeholder="请输入采购商品" /></el-descriptions-item>
<el-descriptions-item label="交易方式">
<el-select v-model="value" size="small" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-descriptions-item>
<el-descriptions-item label="买家名称">
<input placeholder="请输入买家名称" />
</el-descriptions-item>
<el-descriptions-item label="发票管理">
<el-select size="small" v-model="value2" placeholder="请选择">
<div class="search">
<view class="p">
<el-select v-model="value2" placeholder="请选择">
<el-option v-for="item in options2" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-descriptions-item>
</el-descriptions>
</view>
<view class="p">
<el-date-picker v-model="value1" type="date" placeholder="选择日期">
</el-date-picker>
</view>
<view class="p">
<el-input placeholder="请输入内容" v-model="input3" class="input-with-select"
@change="onSearch">
<i slot="append" class="el-icon-search" @click="onSearch"></i>
</el-input>
</view>
</div>
</el-card>
<el-card shadow="never" style="margin-top: 20px;">
<template v-if="menuIndex == 0">
<view class="order-list">
<template v-if="menuIndex === '0'">
<view class="transaction-list">
<view class="item">
<view class="info">
<view class="title">直缝焊管 Q235B 20米 不限</view>
<view class="title">
<view class="name">
<view class="fabu-status">
<view class="text">发布中</view>
<view class="sjx"></view>
</view>
<span>直缝钢管</span>
<el-tag effect="plain" size="mini" class="el-tag">签单宝</el-tag>
</view>
</view>
<view class="caigou">
<view class="item">
<view class="icon">
<i class="el-icon-shopping-bag-1"></i>
</view>
<view class="infos">
<view class="name">采购量</view>
<view class="unit">500吨</view>
</view>
</view>
<view class="item" style="margin-left: 100px;">
<view class="icon">
<i class="el-icon-location-outline"></i>
</view>
<view class="infos">
<view class="name">交易地址</view>
<view class="unit">广西壮族自治区-南宁市-五象航洋城</view>
</view>
</view>
</view>
<view class="sub-title">
<text>订单编号：JJX008456456</text>
<text>创建时间：2023-05-13 10:30:55</text>
<text>卖家：广西某某有限责任公司</text>
</view>
<view class="action">
<view class="btn-buy">联系买家</view>
<el-divider direction="vertical"></el-divider>
<view class="btn-close">取消订单</view>
</view>
</view>
<view class="tool">
<view class="price">
<text class="red">￥22311</text>
<text>总金额</text>
<text>交易编号：JJX008456456</text>
<text>发布时间：2023-05-13 10:30:55</text>
</view>
<view class="status">
<view class="icon">
<img src="https://oss.wsdns.cn/20231207/010a7e26b1294284a63b890c46031225.png" alt="" />
<img src="https://oss.wsdns.cn/20231207/2b391d8a0ca94201ae08ee0196c7754d.png"
alt="" />
</view>
</view>
</view>
</view>
<view class="item">
<view class="info">
<view class="title">直缝焊管 Q235B 20米 不限</view>
<view class="sub-title">
<text>订单编号：JJX008456456</text>
<text>创建时间：2023-05-13 10:30:55</text>
<text>卖家：广西某某有限责任公司</text>
</view>
<view class="action">
<view class="btn-buy">联系买家</view>
<el-divider direction="vertical"></el-divider>
<view class="btn-close">取消订单</view>
</view>
</view>
<view class="tool">
<view class="price">
<text class="red">￥22311</text>
<text>总金额</text>
<view class="btn">
<el-button size="small" plain style="width: 160px;">编辑询价详情</el-button>
</view>
<view class="status">
<view class="icon">
<img src="https://oss.wsdns.cn/20231207/010a7e26b1294284a63b890c46031225.png" alt="" />
</view>
</view>
</view>
</view>
<view class="item">
<view class="info">
<view class="title">直缝焊管 Q235B 20米 不限</view>
<view class="sub-title">
<text>订单编号：JJX008456456</text>
<text>创建时间：2023-05-13 10:30:55</text>
<text>卖家：广西某某有限责任公司</text>
</view>
<view class="action">
<view class="btn-buy">联系买家</view>
<el-divider direction="vertical"></el-divider>
<view class="btn-close">取消订单</view>
</view>
</view>
<view class="tool">
<view class="price">
<text class="red">￥22311</text>
<text>总金额</text>
</view>
<view class="status">
<view class="icon">
<img src="https://oss.wsdns.cn/20231207/010a7e26b1294284a63b890c46031225.png" alt="" />
</view>
<view class="btn">
<el-button size="small" type="danger"
style="width: 160px;">查看收到的报价列表</el-button>
</view>
<view class="btn">
<el-button size="small" type="text"
style="width: 160px;">共收到4个报价</el-button>
</view>
</view>
</view>
<view class="paginatio">
<el-pagination
background
layout="prev, pager, next"
:total="1000">
<el-pagination background layout="prev, pager, next" :total="1000">
</el-pagination>
</view>
</view>
</template>
<template v-if="menuIndex == 1">
我购买的订单列表
</template>
<template v-if="menuIndex == 2">
线下交易列表
<template v-if="menuIndex === '1'">
<view class="transaction-list">
<view class="item">
<view class="info">
<view class="title">
<view class="name">
<view class="fabu-status">
<view class="text">发布中</view>
<view class="sjx"></view>
</view>
<span>直缝钢管</span>
<el-tag effect="plain" size="mini" class="el-tag">签单宝</el-tag>
</view>
</view>
<view class="caigou">
<view class="item">
<view class="icon">
<i class="el-icon-shopping-bag-1"></i>
</view>
<view class="infos">
<view class="name">采购量</view>
<view class="unit">500吨</view>
</view>
</view>
<view class="item" style="margin-left: 100px;">
<view class="icon">
<i class="el-icon-location-outline"></i>
</view>
<view class="infos">
<view class="name">交易地址</view>
<view class="unit">广西壮族自治区-南宁市-五象航洋城</view>
</view>
</view>
</view>
<view class="sub-title">
<text>交易编号：JJX008456456</text>
<text>发布时间：2023-05-13 10:30:55</text>
</view>
<view class="status">
<view class="icon">
<img src="https://oss.wsdns.cn/20231207/2b391d8a0ca94201ae08ee0196c7754d.png"
alt="" />
</view>
</view>
</view>
<view class="tool">
<view class="btn">
<el-button size="small" plain style="width: 160px;">编辑询价详情</el-button>
</view>
<view class="btn">
<el-button size="small" type="danger"
style="width: 160px;">查看收到的报价列表</el-button>
</view>
<view class="btn">
<el-button size="small" type="text"
style="width: 160px;">共收到4个报价</el-button>
</view>
</view>
</view>
<view class="paginatio">
<el-pagination background layout="prev, pager, next" :total="1000">
</el-pagination>
</view>
</view>
</template>
</el-card>
</el-col>
@@ -184,15 +208,17 @@
return {
activeName: 'all',
value: '',
value1: '',
options: [{
value: '自主交易',
label: '自主交易'
value: '金久信自营',
label: '金久信自营'
}],
value2: '',
options2: [{
value: '未开发票',
label: '自主交易'
}],
input3: '',
pageIndex: 1,
menuIndex: '0',
isSign: false,
@@ -516,6 +542,9 @@
this.query(1)
}
});
},
onSearch() {
console.log('sdfsd: ');
}
}
}
@@ -532,59 +561,166 @@
padding: 10px 20px 20px;
}
.order-list{
.transaction-list {
display: flex;
flex-direction: column;
.item{
.item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #f3f3f3;
.info{
.title{
.info {
position: relative;
border-right: 1px solid #f3f3f3;
flex: 1;
.name {
display: flex;
font-size: 16px;
font-weight: bold;
line-height: 2em;
line-height: 1.6em;
align-items: center;
.fabu-status {
margin-right: 20px;
font-weight: normal;
display: flex;
.text {
padding: 0 10px 0 20px;
font-size: 13px;
color: #fff;
background-color: #A92924;
}
.sjx {
border: 12px solid;
border-color: #A92924 #ffffff #A92924 #A92924;
position: relative;
}
// .text{
// color: #fff;
// background-color: #A92924
// }
}
.buyer,
.seller {
font-size: 14px;
font-weight: normal;
display: flex;
margin: 0 30px;
}
.el-tag {
margin-left: 10px;
}
}
.sub-title{
.caigou {
display: flex;
align-items: center;
.item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
border: none;
.icon {
display: flex;
justify-content: center;
align-items: center;
margin: 10px;
background-color: #f3f3f3;
padding: 10px;
border-radius: 100px;
.el-icon-shopping-bag-1,
.el-icon-location-outline {
font-size: 30px;
}
}
.infos {
display: flex;
flex-direction: column;
.unit {
color: #A92924
}
}
}
}
.sub-title {
color: #999999;
text {
margin-right: 60px;
}
}
.action{
.action {
padding: 10px 0;
display: flex;
flex-direction: row;
align-items: center;
.btn-buy,.btn-close{
.btn-buy,
.btn-close {
color: #A92924;
}
}
.status {
position: absolute;
top: 0;
right: 0;
.icon {
margin: 0 20px;
img {
width: 80px;
}
}
}
}
.tool{
.tool {
display: flex;
.price{
margin:0 20px;
width: 200px;
align-items: center;
justify-content: space-around;
flex-direction: column;
.btn {
margin: 5px 0;
}
.price {
margin: 0 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.red{
.red {
font-size: 16px;
color: #A92924;
font-weight: bold;
}
}
.status{
.icon{
margin:0 20px;
img{
width: 100px;
}
}
}
}
}
}
.paginatio {
margin: 20px auto;
display: flex;
@@ -666,4 +802,20 @@
line-height: 18px;
}
}
.search {
display: flex;
.p {
margin-right: 10px;
}
}
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
</style>