dlsx
/
new-hjb-pc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 Commit
1 Branch
0 Tags
55 MiB
Tag: Branch: Tree: master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'master'
${ noResults }
new-hjb-pc/hjb_pc/pages/homeIndex/orderdetails copy.vue

655 lines
21 KiB
Raw Permalink Normal View History Unescape

'初始化'
6 months ago
<template>
<div class="main">
<div class="contanier">
<div class="order-info">
<div class="txt-info">
<div class="loaction" v-if="GoodsId == 1">您的位置： 所有订单 > 江西省 萍乡市 安源区 > 订单号：20240112-173907-23577</div>
<div class="loaction" v-if="GoodsId == 2">您的位置： 所有订单 > 山东省 青岛市 城阳区 > 订单号：20240112-371939-187453</div>
<div class="loaction" v-if="GoodsId == 3">您的位置： 所有订单 > 江苏省 南京市 江宁区 > 订单号：20240112-387264-987678</div>
<div class="shopping-time">下单时间：2024-01-12 17:39:07</div>
</div>
<div class="copy-btn">一键复制订单信息</div>
</div>
<div class="goods-info">
<div class="info-box">
<div class="img">
<img style="width: 100%;" v-if="GoodsId == 1" src="../../assets/images/dg4.jpg" alt="">
<img style="width: 100%;" v-if="GoodsId == 2" src="../../assets/images/dg5.jpg" alt="">
<img style="width: 100%;" v-if="GoodsId == 3" src="../../assets/images/dg6.jpg" alt="">
</div>
<div class="right">
<div class="title">
<div class="title-box">
<div class="left" v-if="GoodsId == 1">【江西省 萍乡市 安源区】愚人家</div>
<div class="left" v-if="GoodsId == 2">【山东省 青岛市 城阳区】肉松好</div>
<div class="left" v-if="GoodsId == 3">【江苏省 南京市 江宁区】全麦</div>
<div class="icon">
<el-icon><MapLocation /></el-icon>
</div>
<div class="map">查看地图</div>
</div>
<div class="content">浏览1次</div>
</div>
<ul>
<li>
<div class="label">收货时间：</div>
<div class="time">2024-01-12 不限时段</div>
<div class="timeout">距离接单结束还剩：</div>
<div class="timeout-time">6小时16分钟43秒</div>
</li>
<li>
<div class="label">商品数量：</div>
<div class="content">1</div>
</li>
<li>
<div class="label">商品类型：</div>
<div class="type">面包</div>
</li>
<li>
<div class="label">订单类型：</div>
<div class="ordder-type">普通订单</div>
</li>
<li>
<div class="label">有无资料卡：</div>
<div class="card">无</div>
</li>
<li>
<div class="label">需要发票：</div>
<div class="invoice">不需要</div>
</li>
<li>
<div class="label">成交价：</div>
<div class="price" v-if="GoodsId == 1">￥110.00元</div>
<div class="price" v-if="GoodsId == 2">￥94.00元</div>
<div class="price" v-if="GoodsId == 3">￥100.00元</div>
</li>
</ul>
<div class="submit">立即报价</div>
</div>
</div>
</div>
<div class="product-details">
<div class="hearder shadow">商品详情</div>
<div class="product-box shadow">
<div class="img">
<img style="width: 100%;" v-if="GoodsId == 1" src="../../assets/images/dg4.jpg" alt="">
<img style="width: 100%;" v-if="GoodsId == 2" src="../../assets/images/dg5.jpg" alt="">
<img style="width: 100%;" v-if="GoodsId == 3" src="../../assets/images/dg6.jpg" alt="">
<div class="remind">点击查看大图</div>
</div>
<div class="right">
<ul>
<li>
<div class="label">商品数量</div>
<div class="content">1</div>
</li>
<li>
<div class="label">商品描述</div>
<div class="content">蛋糕整箱 X 1</div>
</li>
</ul>
</div>
</div>
</div>
<div class="product-details">
<div class="hearder">下单方历史交易信息</div>
<div class="historical-transaction-information">
<el-icon><Lock /></el-icon>
<div class="txt">订单已被接，仅接单方可查看</div>
</div>
</div>
<div class="product-details">
<div class="hearder">【平顶山市】待接订单</div>
<div class="line-items">
<div class="item shadow">
<div class="header">
<div class="address">河南省驻马店市上蔡县</div>
<div class="time">下单时间：2024-01-01 21:31:25</div>
</div>
<div class="order-info">
<div class="image">
<div class="tag">普通订单</div>
</div>
<div class="iine-info">
<div class="receipt-time">
<div class="label">
收货时间：<span class="time">2024-01-08 不限时段</span>
<span class="timeout">离接单结束还剩：6小时</span>
</div>
</div>
<div class="goods-type">
<div class="label">商品类型：<span class="type">鲜花</span></div>
</div>
<div class="content">
<div class="label">商品总数：<span class="number">1</span></div>
</div>
<div class="audit-information">
<div class="label">审核信息：<span class="information">需要完成下单方审核鲜花实拍图</span></div>
</div>
<div class="order-description">
<div class="label">订单描述：<span class="description">这里是一段订单的描述~</span></div>
</div>
</div>
<div class="submit-box">
<div class="submit">立即报价</div>
</div>
</div>
</div>
<div class="item shadow">
<div class="header">
<div class="address">河南省驻马店市上蔡县</div>
<div class="time">下单时间：2024-01-01 21:31:25</div>
</div>
<div class="order-info">
<div class="image">
<div class="tag">普通订单</div>
</div>
<div class="iine-info">
<div class="receipt-time">
<div class="label">
收货时间：<span class="time">2024-01-08 不限时段</span>
<span class="timeout">离接单结束还剩：6小时</span>
</div>
</div>
<div class="goods-type">
<div class="label">商品类型：<span class="type">鲜花</span></div>
</div>
<div class="content">
<div class="label">商品总数：<span class="number">1</span></div>
</div>
<div class="audit-information">
<div class="label">审核信息：<span class="information">需要完成下单方审核鲜花实拍图</span></div>
</div>
<div class="order-description">
<div class="label">订单描述：<span class="description">这里是一段订单的描述~</span></div>
</div>
</div>
<div class="submit-box">
<div class="submit">立即报价</div>
</div>
</div>
</div>
<div class="item shadow">
<div class="header">
<div class="address">河南省驻马店市上蔡县</div>
<div class="time">下单时间：2024-01-01 21:31:25</div>
</div>
<div class="order-info">
<div class="image">
<div class="tag">普通订单</div>
</div>
<div class="iine-info">
<div class="receipt-time">
<div class="label">
收货时间：<span class="time">2024-01-08 不限时段</span>
<span class="timeout">离接单结束还剩：6小时</span>
</div>
</div>
<div class="goods-type">
<div class="label">商品类型：<span class="type">鲜花</span></div>
</div>
<div class="content">
<div class="label">商品总数：<span class="number">1</span></div>
</div>
<div class="audit-information">
<div class="label">审核信息：<span class="information">需要完成下单方审核鲜花实拍图</span></div>
</div>
<div class="order-description">
<div class="label">订单描述：<span class="description">这里是一段订单的描述~</span></div>
</div>
</div>
<div class="submit-box">
<div class="submit">立即报价</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-details">
<div class="hearder">最新成交订单</div>
<ul class="new-orders">
<li>
<div class="status">成交</div>
<div class="address">广东省 广州市 天河区前进街道美林花艺</div>
<div class="price">￥138.00</div>
<div class="time">2024-01-12</div>
</li>
<li>
<div class="status">成交</div>
<div class="address">广东省 广州市 天河区前进街道美林花艺</div>
<div class="price">￥138.00</div>
<div class="time">2024-01-12</div>
</li>
<li>
<div class="status">成交</div>
<div class="address">广东省 广州市 天河区前进街道美林花艺</div>
<div class="price">￥138.00</div>
<div class="time">2024-01-12</div>
</li>
<li>
<div class="status">成交</div>
<div class="address">广东省 广州市 天河区前进街道美林花艺</div>
<div class="price">￥138.00</div>
<div class="time">2024-01-12</div>
</li>
<li>
<div class="status">成交</div>
<div class="address">广东省 广州市 天河区前进街道美林花艺</div>
<div class="price">￥138.00</div>
<div class="time">2024-01-12</div>
</li>
<li>
<div class="status">成交</div>
<div class="address">广东省 广州市 天河区前进街道美林花艺</div>
<div class="price">￥138.00</div>
<div class="time">2024-01-12</div>
</li>
<li>
<div class="status">成交</div>
<div class="address">广东省 广州市 天河区前进街道美林花艺</div>
<div class="price">￥138.00</div>
<div class="time">2024-01-12</div>
</li>
<li>
<div class="status">成交</div>
<div class="address">广东省 广州市 天河区前进街道美林花艺</div>
<div class="price">￥138.00</div>
<div class="time">2024-01-12</div>
</li>
</ul>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useRoute } from 'vue-router'
import { MapLocation, Lock } from '@element-plus/icons-vue'
import { useCounterStore } from '@/stores/nav'
const userIndex = useCounterStore()
onMounted(() => {
userIndex.increment(3)
})
const route = useRoute()
// 获取路由参数
const GoodsId = route.query.GoodsId
// 在控制台输出路由参数
console.log(GoodsId)
</script>
<style lang="scss" scoped>
.main {
background-color: #fff;
width: 100%;
.contanier {
width: 6.25rem;
margin: 0 auto;
.order-info {
padding-top: 0.1458rem;
color: #8a8e99;
font-size: 0.0729rem;
display: flex;
justify-content: space-between;
.txt-info {
display: flex;
div:nth-child(1) {
margin-right: 0.2083rem;
}
}
.copy-btn {
width: 0.8125rem;
height: 0.1146rem;
color: #ff4e8d;
border: 1px solid #ff4e8d;
text-align: center;
line-height: 0.1146rem;
}
}
.goods-info {
width: 100%;
display: flex;
justify-content: center;
.info-box {
width: 4.5833rem;
height: 1.875rem;
padding: 0.1042rem;
display: flex;
.img {
width: 1.6667rem;
height: 1.6667rem;
background-color: #d9d9d9;
}
.right {
flex: 1;
.title {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.title-box {
display: flex;
align-items: center;
padding: 0.0313rem;
.left {
color: #252b3a;
font-weight: 600;
font-size: 0.0833rem;
}
.icon {
display: flex;
align-items: center;
color: #da141f;
font-size: 0.0729rem;
margin-left: 0.0521rem;
}
.map {
color: #8a8e99;
font-size: 0.0625rem;
}
}
.content {
color: #8a8e99;
font-size: 0.0625rem;
}
}
ul {
li {
list-style: none;
display: flex;
align-items: center;
padding: 0.026rem 0.1042rem;
.time {
color: #ff4e8d;
font-size: 0.0729rem;
font-weight: 600;
margin-right: 0.0521rem;
}
.timeout {
font-size: 0.0625rem;
color: #575d6c;
}
.timeout-time {
color: #252b3a;
font-size: 0.0729rem;
}
.label {
color: #8a8e99;
font-size: 0.0625rem;
}
.content {
color: #ff4e8d;
font-size: 0.0729rem;
font-weight: 600;
margin-right: 0.0521rem;
}
.type,
.ordder-type,
.card,
.invoice {
color: #252b3a;
font-size: 0.0625rem;
}
.price {
color: #ff4e8d;
font-size: 0.0729rem;
font-weight: 600;
margin-right: 0.0521rem;
}
}
}
.submit {
color: #fff;
text-align: center;
width: 0.5833rem;
height: 0.1667rem;
line-height: 0.1667rem;
background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
margin: 0.2344rem 0.1042rem;
}
}
}
}
.product-details {
margin-top: 0.0521rem;
.hearder {
position: relative;
color: #252b3a;
font-size: 0.1042rem;
height: 0.2083rem;
line-height: 0.2083rem;
margin-left: 0.0521rem;
}
.hearder::before {
position: absolute;
top: 50%;
left: -0.0521rem;
width: 0.0156rem;
height: 0.0938rem;
background-color: #ff4e8d;
transform: translateY(-50%);
content: ' ';
display: flex;
}
.product-box {
height: 0.9375rem;
background-color: #fff;
display: flex;
align-items: center;
padding: 0.1042rem;
.img {
width: 0.7292rem;
height: 0.7292rem;
background-color: #d9d9d9;
position: relative;
.remind {
position: absolute;
color: #fff;
text-align: center;
width: 100%;
height: 0.125rem;
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
line-height: 0.125rem;
}
}
.right {
height: 100%;
margin-left: 0.0521rem;
}
ul {
height: 100%;
li {
display: flex;
list-style: none;
margin-bottom: 0.0521rem;
.label {
font-size: 0.0625rem;
color: #999;
}
.content {
color: #252b3a;
font-size: 0.0625rem;
}
}
}
}
.historical-transaction-information {
height: 0.9323rem;
width: 100%;
background-color: #d9d9d9;
color: #8a8e99;
font-size: 0.125rem;
// text-align: center;
// line-height: .9323rem ;
display: flex;
justify-content: center;
align-items: center;
.txt {
}
}
.line-items {
margin-top: 0.1719rem;
.item {
padding: 0.1198rem 0.1771rem;
background-color: #fff;
margin: 0.0781rem 0;
.header {
display: flex;
.address {
width: 2.8125rem;
color: #252b3a;
font-size: 0.0833rem;
font-weight: 600;
}
.time {
color: #8a8e99;
font-size: 0.0625rem;
}
}
.order-info {
display: flex;
width: 100%;
padding: 0.0781rem 0 0 0.0521rem;
.image {
width: 0.7292rem;
height: 0.7292rem;
background-color: #d9d9d9;
position: relative;
.tag {
position: absolute;
bottom: 0;
width: 100%;
height: 0.125rem;
color: #fff;
text-align: center;
line-height: 0.125rem;
background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
}
}
.iine-info {
width: 4.1667rem;
margin-left: 0.0521rem;
display: flex;
flex-direction: column;
justify-content: space-between;
.label {
color: #8a8e99;
font-size: 0.0625rem;
}
.receipt-time {
.time {
color: #ff4e8d;
font-size: 0.0729rem;
font-weight: 600;
margin-right: 0.1042rem;
}
}
.goods-type {
.type {
color: #252b3a;
}
}
.content {
.number {
color: #ff4e8d;
font-size: 0.0729rem;
font-weight: 600;
}
}
.audit-information {
.information {
color: #252b3a;
}
}
.order-description {
.description {
color: #252b3a;
}
}
}
.submit-box {
// height: 100%;
display: flex;
flex-direction: column;
justify-content: end;
margin-left: 0.2604rem;
.submit {
width: 0.5833rem;
height: 0.1667rem;
color: #fff;
text-align: center;
line-height: 0.1667rem;
background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
}
}
}
}
}
.new-orders {
position: relative;
display: flex;
width: 100%;
flex-wrap: wrap;
padding: 0.1042rem;
li {
list-style: none;
display: flex;
width: 50%;
display: flex;
align-items: center;
margin: .026rem 0;
.status {
text-align: center;
width: 0.2292rem;
height: 0.1042rem;
background-color: #ff4e8d;
line-height: 0.1042rem;
color: #fff;
font-size: 0.0625rem;
}
.address {
color: #252b3a;
font-size: 14px;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
white-space: nowrap;
width: 1.25rem;
margin-left: .026rem;
}
.price{
color: #FF4E8D;
font-size: .0729rem;
margin-left: .5469rem;
}
.time{
color: #575D6C;
font-size: .0625rem;
margin-left: .2604rem;
}
}
}
.new-orders::before{
position: absolute;
top: 50%;
left: 49%;
transform: translate(-50% ,-50%);
content: " ";
width: 1px;
height: .6354rem;
display: flex;
background-color: #E1E1E3;
}
}
}
}
.shadow {
box-shadow: 3px 0px 21px 0px rgba(255, 78, 141, 0.1);
}
</style>