dlsx
/
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.
8 Commits
1 Branch
0 Tags
17 MiB
 
 
 
 
 
Tag: Branch: Tree: develoop
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'develoop'
${ noResults }
hjb_pc/pages/homeIndex/lockflorist.vue

828 lines
27 KiB
Raw Permalink Blame History

<template>
<div class="main">
<div class="banner">
<div class="order-information">
<div class="header">接单中心</div>
<div class="condition-scarch">
<ul>
<li>
<div class="label">收货地址：</div>
<el-select
v-model="value"
class="m-2"
placeholder="请选择地址信息"
style="width: 1.875rem; margin-right: 0.0781rem"
>
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
<el-input style="width: 1.4583rem" v-model="input" placeholder="详细地址街道..." />
<div class="search-btn">收索</div>
</li>
<li>
<div class="label">成交价：</div>
<div class="price-whel">
<div tabindex="1">不限</div>
<div tabindex="2">100元以下</div>
<div tabindex="3">100-200元</div>
<div tabindex="4">200-300元</div>
<div tabindex="5">300-400元</div>
<div tabindex="6">400元以上</div>
</div>
</li>
<li>
<div class="label">收货时间：</div>
<div class="price-whel">
<div tabindex="1">不限</div>
<div tabindex="2">今天</div>
<div tabindex="3">1-3天</div>
<div tabindex="4">4-7天</div>
<div tabindex="6">1周以上</div>
</div>
</li>
</ul>
</div>
</div>
<div class="tabs">
<div :class="active === 0 ? 'standard active' : 'standard'" @click="active = 0">综合排序</div>
<div :class="active === 1 ? 'standard active' : 'standard'" @click="active = 1">按配送时间</div>
<div :class="active === 2 ? 'standard active' : 'standard'" @click="active = 2">按下单时间</div>
<div :class="active === 3 ? 'standard active sort' : 'standard sort'" @click="active = 3">
按订单金额
<div v-if="active == 3" class="sort-box">
<div :class="activeSort == 0 ? 'ascending-orde active-sort' : 'ascending-orde'" @click="activeSort = 0">
<el-icon><CaretTop /></el-icon>
</div>
<div @click="activeSort = 1" :class="activeSort == 1 ? 'descending active-sort' : 'descending'">
<el-icon><CaretBottom /></el-icon>
</div>
</div>
<div v-else class="sort-box">
<div class="ascending-orde">
<el-icon><CaretTop /></el-icon>
</div>
<div class="descending">
<el-icon><CaretBottom /></el-icon>
</div>
</div>
</div>
</div>
<div class="line-items">
<div class="item-box">
<div class="item" @click="goToOrderDetails(1)">
<div class="header">
<div class="top">
<div class="address">【北京市 昌平区】北京花乐康语花艺</div>
<div class="time">接单中</div>
</div>
<div class="bottom">
信用分<span
><el-icon><QuestionFilled /></el-icon></span
>:90分<span><span class="grade">优</span>（高于97%的同城花店）</span>
</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">北京花乐康语花艺</span></div>
</div>
<div class="goods-type">
<div class="label">联系电话：<span class="type">12345678901</span></div>
</div>
<div class="content">
<div class="label">客服QQ：<span class="number">123456789</span></div>
</div>
<div class="audit-information">
<div class="label">近3月接单量：<span class="information">61</span></div>
</div>
<div class="order-description">
<div class="label">撤单量：<span class="description">1355</span></div>
</div>
<div class="contact-address">
<div class="contact-address-txt">店铺地址：</div>
<div class="address">立水桥地铁站附近</div>
<div class="icon">
<el-icon><MapLocation /></el-icon>
</div>
<div class="map">查看地图</div>
</div>
</div>
<div class="submit-box">
<div class="title">6天前接单</div>
<div class="box">
<div class="submit-information">在线资讯</div>
<div class="submit">立即报价</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="header">
<div class="top">
<div class="address">【北京市 昌平区】北京花乐康语花艺</div>
<div class="time">接单中</div>
</div>
<div class="bottom">
信用分<span
><el-icon><QuestionFilled /></el-icon></span
>:90分<span><span class="grade">优</span>（高于97%的同城花店）</span>
</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">北京花乐康语花艺</span></div>
</div>
<div class="goods-type">
<div class="label">联系电话：<span class="type">12345678901</span></div>
</div>
<div class="content">
<div class="label">客服QQ：<span class="number">123456789</span></div>
</div>
<div class="audit-information">
<div class="label">近3月接单量：<span class="information">61</span></div>
</div>
<div class="order-description">
<div class="label">撤单量：<span class="description">1355</span></div>
</div>
<div class="contact-address">
<div class="contact-address-txt">店铺地址：</div>
<div class="address">立水桥地铁站附近</div>
<div class="icon">
<el-icon><MapLocation /></el-icon>
</div>
<div class="map">查看地图</div>
</div>
</div>
<div class="submit-box">
<div class="title">6天前接单</div>
<div class="box">
<div class="submit-information">在线资讯</div>
<div class="submit">立即报价</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="header">
<div class="top">
<div class="address">【北京市 昌平区】北京花乐康语花艺</div>
<div class="time">接单中</div>
</div>
<div class="bottom">
信用分<span
><el-icon><QuestionFilled /></el-icon></span
>:90分<span><span class="grade">优</span>（高于97%的同城花店）</span>
</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">北京花乐康语花艺</span></div>
</div>
<div class="goods-type">
<div class="label">联系电话：<span class="type">12345678901</span></div>
</div>
<div class="content">
<div class="label">客服QQ：<span class="number">123456789</span></div>
</div>
<div class="audit-information">
<div class="label">近3月接单量：<span class="information">61</span></div>
</div>
<div class="order-description">
<div class="label">撤单量：<span class="description">1355</span></div>
</div>
<div class="contact-address">
<div class="contact-address-txt">店铺地址：</div>
<div class="address">立水桥地铁站附近</div>
<div class="icon">
<el-icon><MapLocation /></el-icon>
</div>
<div class="map">查看地图</div>
</div>
</div>
<div class="submit-box">
<div class="title">6天前接单</div>
<div class="box">
<div class="submit-information">在线资讯</div>
<div class="submit">立即报价</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="header">
<div class="top">
<div class="address">【北京市 昌平区】北京花乐康语花艺</div>
<div class="time">接单中</div>
</div>
<div class="bottom">
信用分<span
><el-icon><QuestionFilled /></el-icon></span
>:90分<span><span class="grade">优</span>（高于97%的同城花店）</span>
</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">北京花乐康语花艺</span></div>
</div>
<div class="goods-type">
<div class="label">联系电话：<span class="type">12345678901</span></div>
</div>
<div class="content">
<div class="label">客服QQ：<span class="number">123456789</span></div>
</div>
<div class="audit-information">
<div class="label">近3月接单量：<span class="information">61</span></div>
</div>
<div class="order-description">
<div class="label">撤单量：<span class="description">1355</span></div>
</div>
<div class="contact-address">
<div class="contact-address-txt">店铺地址：</div>
<div class="address">立水桥地铁站附近</div>
<div class="icon">
<el-icon><MapLocation /></el-icon>
</div>
<div class="map">查看地图</div>
</div>
</div>
<div class="submit-box">
<div class="title">6天前接单</div>
<div class="box">
<div class="submit-information">在线资讯</div>
<div class="submit">立即报价</div>
</div>
</div>
</div>
</div>
</div>
<div class="right-panner">
<div class="right-panner-item">
<div class="title">
<div class="left">推荐花店</div>
<div class="right">我要出现在这里</div>
</div>
<div class="img">
<div class="tip">【浙江省 宁波市 鄞州区】</div>
</div>
<div class="info">
<div class="order-name">圆梦鲜花店</div>
<div class="credit-score">
信用分<span
><el-icon><QuestionFilled /></el-icon></span
>:90分<span><span class="grade">优</span>（高于97%的同城花店）</span>
</div>
<div class="contact-number">联系电话：123455678902</div>
<div class="information-secur">
<div class="information">证照信息</div>
<div class="secur">服务保障</div>
</div>
<div class="information-ordering">
<div class="information">在线咨询</div>
<div class="ordering">下单给TA</div>
</div>
</div>
</div>
<div class="right-panner-item">
<div class="title">
<div class="left">推荐花店</div>
<div class="right">我要出现在这里</div>
</div>
<div class="img">
<div class="tip">【浙江省 宁波市 鄞州区】</div>
</div>
<div class="info">
<div class="order-name">圆梦鲜花店</div>
<div class="credit-score">
信用分<span
><el-icon><QuestionFilled /></el-icon></span
>:90分<span><span class="grade">优</span>（高于97%的同城花店）</span>
</div>
<div class="contact-number">联系电话：123455678902</div>
<div class="information-secur">
<div class="information">证照信息</div>
<div class="secur">服务保障</div>
</div>
<div class="information-ordering">
<div class="information">在线咨询</div>
<div class="ordering">下单给TA</div>
</div>
</div>
</div>
<div class="right-panner-item">
<div class="title">
<div class="left">推荐花店</div>
<div class="right">我要出现在这里</div>
</div>
<div class="img">
<div class="tip">【浙江省 宁波市 鄞州区】</div>
</div>
<div class="info">
<div class="order-name">圆梦鲜花店</div>
<div class="credit-score">
信用分<span
><el-icon><QuestionFilled /></el-icon></span
>:90分<span><span class="grade">优</span>（高于97%的同城花店）</span>
</div>
<div class="contact-number">联系电话：123455678902</div>
<div class="information-secur">
<div class="information">证照信息</div>
<div class="secur">服务保障</div>
</div>
<div class="information-ordering">
<div class="information">在线咨询</div>
<div class="ordering">下单给TA</div>
</div>
</div>
</div>
</div>
</div>
<div class="page">
<div style="display: flex; justify-content: center">
<el-pagination background layout="prev, pager, next" :total="1000" />
</div>
<div class="txt">为了提高查询效率，仅显示近期订单</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { CaretTop, CaretBottom, MapLocation, QuestionFilled } from '@element-plus/icons-vue'
import {linkNavigateTo} from '~/utils/util'
const value = ref('')
const active = ref(0)
const input = ref('')
const activeSort = ref(0)
const options = [
{
value: 'Option1',
label: 'Option1',
},
{
value: 'Option2',
label: 'Option2',
},
{
value: 'Option3',
label: 'Option3',
},
{
value: 'Option4',
label: 'Option4',
},
{
value: 'Option5',
label: 'Option5',
},
]
//跳转订单详情
const goToOrderDetails = (GoodsId :number) => {
linkNavigateTo('/homeIndex/orderdetails',{GoodsId})
}
</script>
<style lang="scss" scoped>
.main {
width: 100%;
.banner {
width: 6.25rem;
margin: 0 auto;
.order-information {
width: 100%;
// height: 3.4896rem;
margin-top: 0.026rem;
background-color: #fff;
.header {
// background-color: #f3f4f8;
height: 0.2083rem;
color: #252b3a;
font-size: 0.0833rem;
line-height: 0.2083rem;
padding: 0 0.2604rem;
display: flex;
align-items: center;
font-weight: 700;
border-bottom: 1px solid #e1e1e3;
}
.header::before {
content: ' ';
display: block;
background-color: #ff4e8d;
width: 0.0156rem;
height: 0.0833rem;
margin-right: 0.026rem;
}
.condition-scarch {
padding: 0.1042rem 0.3542rem;
ul {
li {
list-style: none;
display: flex;
align-items: center;
color: #252b3a;
font-size: 0.0729rem;
margin: 0.1042rem 0;
.label {
width: 0.3646rem;
text-align: right;
}
.search-btn {
width: 0.4167rem;
height: 0.1771rem;
color: #fff;
text-align: center;
font-size: 0.0729rem;
line-height: 0.1771rem;
border-radius: 0.1042rem;
background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
margin-left: 0.0521rem;
cursor: pointer;
}
.price-whel {
display: flex;
align-items: center;
div {
margin-right: 0.2135rem;
cursor: pointer;
}
// div:focus,
// div:hover {
// color: #ff4e8d;
// }
}
}
}
}
}
.tabs {
width: 100%;
height: 0.2083rem;
background-color: #fff;
display: flex;
margin-top: 0.2344rem;
margin-bottom: 0.1302rem;
.standard {
width: 0.7292rem;
height: 100%;
color: #252b3a;
font-size: 0.0729rem;
text-align: center;
line-height: 0.2083rem;
border-radius: 0.0313rem;
cursor: pointer;
}
.active {
color: #fff;
background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
}
.sort {
display: flex;
justify-content: center;
.sort-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-left: 0.0365rem;
color: #b1b6c1;
div {
line-height: 0;
display: inline-block;
}
.active-sort {
color: #fff;
}
.descending {
margin-top: -5px;
}
}
}
}
.line-items {
margin-top: 0.1719rem;
display: flex;
justify-content: space-between;
.item-box {
}
.item {
width: 4.6042rem;
padding: 0.1042rem;
background-color: #fff;
// margin: 0.0521rem 0;
margin-bottom: .1042rem;
.header {
.top {
display: flex;
}
.address {
// width: 2.8125rem;
color: #252b3a;
font-size: 0.0833rem;
font-weight: 600;
}
.time {
color: #8a8e99;
font-size: 0.0625rem;
background-color: #fceced;
width: 0.2604rem;
height: 0.099rem;
color: #ff4e8d;
text-align: center;
line-height: 0.099rem;
margin-left: 0.0521rem;
}
.bottom {
padding: 0.0521rem;
color: #111213;
font-size: 0.0625rem;
display: flex;
align-items: center;
span {
color: #8a8e99;
}
.grade {
display: inline-block;
width: 0.0938rem;
height: 0.0938rem;
background-color: #2cd097;
color: #fff;
text-align: center;
line-height: 0.0938rem;
border-radius: 50%;
font-size: 0.0625rem;
}
}
}
.order-info {
border-top: 1px dashed #aaa;
display: flex;
width: 100%;
justify-content: space-between;
padding: 0.0781rem 0 0 0.0521rem;
.image {
width: 0.8333rem;
height: 0.8333rem;
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;
flex: 1;
margin-left: 0.1042rem;
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;
}
}
.contact-address {
display: flex;
align-items: center;
.contact-address-txt {
color: #8a8e99;
}
.icon {
font-size: 14px;
color: #dd323c;
margin-left: 0.0521rem;
}
.map {
font-size: 0.0625rem;
color: #8a8e99;
}
}
}
.submit-box {
// height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-left: 0.2604rem;
.box {
display: flex;
align-items: center;
}
.title {
color: #ff4e8d;
font-weight: 600;
font-size: 0.0729rem;
text-align: end;
}
.submit {
width: 0.5833rem;
height: 0.1667rem;
color: #fff;
text-align: center;
line-height: 0.1667rem;
background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
border-radius: 0.026rem;
margin-left: 0.0521rem;
}
.submit-information {
background-color: #fff;
border-radius: 0.026rem;
border: 1px solid #ff4e8d;
color: #ff4e8d;
height: 0.1667rem;
line-height: 0.1667rem;
text-align: center;
width: 0.4688rem;
}
}
}
}
.right-panner-item {
padding: 0.1042rem 0.1302rem;
width: 1.6146rem;
height: 2.6042rem;
background-color: #fff;
margin-bottom: .1042rem;
.title {
display: flex;
justify-content: space-between;
.left {
color: #252b3a;
font-size: 16px;
}
.right {
color: #ff94d4;
font-size: 0.0625rem;
display: flex;
align-items: center;
}
.right::after {
content: ' ';
display: block;
width: 0.0625rem;
height: 0.0625rem;
background-color: #ff4e8d;
margin-left: 0.026rem;
}
}
.img {
position: relative;
width: 1.3542rem;
height: 1.3542rem;
background-color: #d9d9d9;
margin-top: 0.1042rem;
.tip {
width: 100%;
position: absolute;
bottom: 0;
height: 0.1875rem;
background-color: rgba($color: #000000, $alpha: 0.5);
color: #fff;
font-size: 0.0729rem;
text-align: center;
line-height: 0.1875rem;
}
}
.info {
.order-name {
color: #252b3a;
font-size: 0.0833rem;
margin-top: .0521rem;
}
.credit-score {
color: #111213;
font-size: 0.0625rem;
display: flex;
align-items: center;
margin: .0521rem 0;
span {
color: #8a8e99;
}
.grade {
display: inline-block;
width: 0.0938rem;
height: 0.0938rem;
background-color: #ff4e8d;
color: #fff;
text-align: center;
line-height: 0.0938rem;
border-radius: 50%;
font-size: 0.0625rem;
}
}
.contact-number{
color: #111213;
font-size: 0.0625rem;
}
.information-secur{
display: flex;
margin-top: .0885rem;
div{
width: .4271rem;
height: .099rem;
font-size: .0625rem;
text-align: center;
line-height: .099rem;
}
.information{
color: #D90E19;
border: 1px solid #D90E19;
}
.secur{
color: #43A7E5;
border: 1px solid #43A7E5;
margin-left: 10px;
}
}
.information-ordering{
margin-top: .0885rem;
display: flex;
justify-content: space-between;
div{
width: .651rem;
height: .1667rem;
font-size: .0729rem;
text-align: center;
line-height: .1667rem;
border-radius: .026rem;
}
.information{
color: #ff4e8d;
border: 1px solid #ff4e8d;
}
.ordering{
color: #fff;
background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
}
}
}
}
}
.page {
height: 1.0417rem;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
.txt {
text-align: center;
color: #252b3a;
margin-top: 0.1563rem;
}
}
}
}
</style>