dlsx
/
hjb_pc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

接订单 找花店完毕

Browse Source
develoop
Your Name 1 year ago
parent b9f38708bf
commit ea74caf996
5 changed files with 1552 additions and 81 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. 2
      components/layoutHeader.vue
  2. 828
      pages/homeIndex/lockflorist.vue
  3. 212
      pages/homeIndex/orderdetails.vue
  4. 360
      pages/homeIndex/placeOrder.vue
  5. 229
      pages/homeIndex/receivingorders.vue

2
components/layoutHeader.vue
Unescape View File

@ -6,7 +6,7 @@
<li :class="active == 1 ? 'active' : ''" @click="goTo(1,'/')">首页 <div v-if="active == 1" class="active-border"></div> </li>
<li :class="active == 2 ? 'active' : ''" @click="goTo(2,'/homeIndex/placeOrder')">下订单 <div v-if="active == 2" class="active-border"></div></li>
<li :class="active == 3 ? 'active' : ''" @click="goTo(3,'/homeIndex/receivingorders')">接订单<div v-if="active == 3" class="active-border"></div></li>
<li :class="active == 4 ? 'active' : ''" @click="goTo(4)">找花店<div v-if="active == 4" class="active-border"></div></li>
<li :class="active == 4 ? 'active' : ''" @click="goTo(4,'/homeIndex/lockflorist')">找花店<div v-if="active == 4" class="active-border"></div></li>
<li :class="active == 5 ? 'active' : ''" @click="goTo(5)">花店地图<div v-if="active == 5" class="active-border"></div></li>
<li :class="active == 6 ? 'active' : ''" @click="goTo(6)">服务中心<div v-if="active == 6" class="active-border"></div></li>
<li :class="active == 7 ? 'active' : ''" @click="goTo(7)">下载中心<div v-if="active == 7" class="active-border"></div></li>

828
pages/homeIndex/lockflorist.vue
Unescape View File

@ -0,0 +1,828 @@
<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>

212
pages/homeIndex/orderdetails.vue
Unescape View File

@ -0,0 +1,212 @@
<template>
<div class="main">
<div class="contanier">
<div class="order-info">
<div class="txt-info">
<div class="loaction">您的位置： 所有订单 > 河南省 平顶山市 汝州市 > 订单号：20240112-173907-23577</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"></div>
<div class="right">
<div class="title">
<div class="title-box">
<div class="left">【河南 平顶山市 汝州市】愚人家</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">￥59.00元</div>
</li>
</ul>
<div class="submit">立即报价</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useRoute } from 'vue-router'
import { MapLocation } from '@element-plus/icons-vue'
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: .0625rem;
}
}
ul{
li{
list-style: none;
display: flex;
align-items: center;
padding: .026rem .1042rem;
.time{
color: #FF4E8D;
font-size: .0729rem;
font-weight: 600;
margin-right: .0521rem;
}
.timeout{
font-size: .0625rem;
color: #575D6C;
}
.timeout-time{
color: #252B3A;
font-size: .0729rem;
}
.label{
color: #8A8E99;
font-size: .0625rem;
}
.content{
color: #FF4E8D;
font-size: .0729rem;
font-weight: 600;
margin-right: .0521rem;
}
.type,.ordder-type,.card,.invoice{
color: #252B3A;
font-size: .0625rem;
}
.price{
color: #FF4E8D;
font-size: .0729rem;
font-weight: 600;
margin-right: .0521rem;
}
}
}
.submit{
color: #fff;
text-align: center;
width: .5833rem;
height: .1667rem;
line-height: .1667rem;
background: linear-gradient(90deg, #ff94d4 0%, #ffddbe 100%);
margin: .2344rem .1042rem;
}
}
}
}
}
}
</style>

360
pages/homeIndex/placeOrder.vue
Unescape View File

@ -180,7 +180,7 @@
</div>
<div class="footer"><div class="add-order-btn">增加商品</div></div>
</div>
<div class="order-information">
<div class="order-information goods-info">
<div class="header">订单设置</div>
<div class="form">
<div class="left">
@ -197,23 +197,31 @@
</el-form-item>
<el-form-item label="销售价" class="sales-price">
<el-input
style="width: .7813rem"
style="width: 0.7813rem"
v-model="input"
placeholder="Please input"
:formatter="(value :any) => `元 ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
:parser="(value : any) => value.replace(/\$\s?|(,*)/g, '')"
/>
<div class="tail"><el-icon><QuestionFilled /></el-icon><div>非必填</div></div>
<div class="tail">
<el-icon><QuestionFilled /></el-icon>
<div>非必填</div>
</div>
</el-form-item>
<el-form-item label="销售价" class="bid">
<el-input
style="width: .7813rem"
style="width: 0.7813rem"
v-model="input"
placeholder="Please input"
:formatter="(value: any) => `元 ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
:parser="(value: any) => value.replace(/\$\s?|(,*)/g, '')"
/>
<div class="tail">（可用余额：<div class="money">￥0</div><div class="krypton">立即充值</div>）</div>
<div class="tail">
（可用余额：
<div class="money">￥0</div>
<div class="krypton">立即充值</div>
）
</div>
<div class="tip">
<el-icon><InfoFilled /></el-icon>价格过低可能导致店铺店铺不接单 <span>查看参考价格</span>
</div>
@ -234,7 +242,7 @@
placeholder="订单备忘，仅下单方乐见"
/>
</el-form-item>
<el-form-item label="第三方订单号" >
<el-form-item label="第三方订单号">
<el-input
style="width: 2.0833rem"
v-model="input"
@ -243,7 +251,7 @@
show-word-limit
/>
</el-form-item>
<el-form-item label="发票信息" >
<el-form-item label="发票信息">
<el-input
style="width: 2.0833rem"
v-model="input"
@ -255,15 +263,71 @@
</el-form>
</div>
</div>
<div class="footer">
<div class="vip-name">
<el-form :model="form" label-width="120px">
<el-form-item label="店铺会员名称">
<el-input style="width: 1.2813rem" v-model="form.name" />
</el-form-item>
</el-form>
</div>
<div class="shop-info">
<div class="title">
<div class="left"> <div class="shop-name">【广东省 佛山市 三水区】傲梅鲜花店</div>
<div class="gradd">v2</div>
<div class="status">接单中</div>
<div class="online-status">1小时前接单</div></div>
<div class="right">
<div class="record">证照信息</div>
<div class="guarantee">服务保障</div>
</div>
</div>
<div class="shop-content">
<div class="left">
<div class="image"></div>
<div class="vip-info">
<ul>
<li><div class="label">会员名称：</div><div class="name">明兵</div></li>
<li><div class="phone">联系电话：</div><div class="telephone-number">12345678901</div></li>
<li><div class="qq">客服QQ：</div><div class="qq-number">123456789</div></li>
<li><div class="contact-address">店铺地址：</div><div class="address">心尚人鲜花店 三水区西南街道商业北二街1号109铺　</div>
<div class="icon"><el-icon><MapLocation /></el-icon></div>
<div class="map">查看地图</div>
</li>
</ul>
</div>
</div>
<div class="right">
<ul class="top">
<li><div class="content">10</div><div class="txt">信用分</div></li>
<li><div class="content">10</div><div class="txt">信用分</div></li>
<li><div class="content">10</div><div class="txt">信用分</div></li>
<li><div class="content">10</div><div class="txt">信用分</div></li>
<li><div class="content">10</div><div class="txt">信用分</div></li>
</ul>
<ul class="bottom">
<li><div class="content">10</div><div class="txt">信用分</div></li>
<li><div class="content">10</div><div class="txt">信用分</div></li>
<li><div class="content">10</div><div class="txt">信用分</div></li>
<li><div class="content">10</div><div class="txt">信用分</div></li>
<li><div class="content">10</div><div class="txt">信用分</div></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="order-information" >
<div class="order-information">
<div class="settlement">
<div class="left">
<div class="item">订单类型：<span>鲜花</span></div>
<div class="item">商品数量：<span>1</span></div>
<div class="item">收货时间：<span>1024-01-05 不限时间</span></div>
</div>
<div class="content">订单价格：<div>￥0.00</div></div>
<div class="content">
订单价格：
<div>￥0.00</div>
</div>
<div class="right">确认无误，立即下单</div>
</div>
</div>
@ -315,7 +379,7 @@ const options = [
label: 'Option5',
},
]
import { Delete, Download, Plus, ZoomIn, InfoFilled,QuestionFilled } from '@element-plus/icons-vue'
import { Delete, Download, Plus, ZoomIn, InfoFilled, QuestionFilled,MapLocation } from '@element-plus/icons-vue'
import type { UploadFile } from 'element-plus'
@ -341,7 +405,7 @@ const handleDownload = (file: UploadFile) => {
.banner {
width: 100%;
background-color: #fff;
padding-bottom: .9792rem;
padding-bottom: 0.9792rem;
.nav {
height: 1.8333rem;
width: 100%;
@ -447,29 +511,29 @@ const handleDownload = (file: UploadFile) => {
}
}
}
.sales-price{
.tail{
display: flex;
align-items: center;
color: #999999;
i{
margin: 0 .026rem;
}
.sales-price {
.tail {
display: flex;
align-items: center;
color: #999999;
i {
margin: 0 0.026rem;
}
}
}
.bid{
.tail{
.bid {
.tail {
color: #999999;
display: flex;
.money{
.money {
color: #e1a130;
// margin-left: .026rem;
}
.krypton{
color: #43A7E5;
.krypton {
color: #43a7e5;
text-decoration: underline;
cursor: pointer;
margin-left: .026rem;
margin-left: 0.026rem;
}
}
.tip {
@ -479,11 +543,11 @@ const handleDownload = (file: UploadFile) => {
.el-icon {
top: 2px;
}
span{
color: #43A7E5;
span {
color: #43a7e5;
text-decoration: underline;
cursor: pointer;
margin-left: .026rem;
margin-left: 0.026rem;
}
}
}
@ -507,51 +571,50 @@ const handleDownload = (file: UploadFile) => {
text-align: center;
line-height: 0.1563rem;
margin-top: 0.2344rem;
}
}
}
}
.settlement{
height: .6563rem;
padding: .0833rem .2135rem;
.settlement {
height: 0.6563rem;
padding: 0.0833rem 0.2135rem;
display: flex;
justify-content: space-between;
align-items: center;
.left{
display: flex;
flex-direction: column;
// align-items: center;
justify-content: space-around;
height: 100%;
color: #575D6C;
font-size: .0833rem;
span{
color: #252B3A;
.left {
display: flex;
flex-direction: column;
// align-items: center;
justify-content: space-around;
height: 100%;
color: #575d6c;
font-size: 0.0833rem;
span {
color: #252b3a;
}
}
}
.content{
display: flex;
align-items: center;
color: #252B3A;
font-size: .0938rem;
div{
color: #FF4E8D;
font-size: .1354rem;
font-weight: 700;
.content {
display: flex;
align-items: center;
color: #252b3a;
font-size: 0.0938rem;
div {
color: #ff4e8d;
font-size: 0.1354rem;
font-weight: 700;
}
}
.right {
width: 1.25rem;
height: 0.2083rem;
text-align: center;
line-height: 0.2083rem;
color: #fff;
background: linear-gradient(90deg, #ff99bd 0%, #ffddbe 100%);
border-radius: 0.0521rem;
font-size: 0.0833rem;
cursor: pointer;
}
}
.right{
width: 1.25rem;
height: .2083rem;
text-align: center;
line-height: .2083rem;
color: #fff;
background: linear-gradient(90deg,#FF99BD 0%,#FFDDBE 100%);
border-radius:.0521rem;
font-size:.0833rem;
cursor:pointer;
}
}
.footer {
display: flex;
@ -571,6 +634,159 @@ const handleDownload = (file: UploadFile) => {
line-height: 0.2083rem;
font-size: 0.0729rem;
}
}
}
.goods-info {
.footer {
display: block !important;
height: auto;
.vip-name{
margin-top: .125rem;
}
.shop-info{
padding: .125rem .1146rem;
.title{
display: flex;
justify-content: space-between;
.left{
display: flex;
align-items: center;
.shop-name{
color: #252B3A;
font-size: .0833rem;
font-weight: 600;
}
.gradd{
margin-left: .0521rem;
}
.status{
width: .2604rem;
height: .099rem;
background-color: #FCECED;
text-align: center;
line-height: .099rem;
font-size: .0625rem;
color: #FF4E8D;
margin-left: .0833rem;
}
.online-status{
color: #ff4e8d;
font-size: .0729rem;
margin-left: .1563rem;
font-weight: 600;
}
}
.right{
display: flex;
.record,.guarantee{
width: .4271rem;
height: .099rem;
text-align: center;
line-height: .099rem;
}
.record{
border: 1px solid #FF4E8D;
color: #FF4E8D;
}
.guarantee{
border: 1px solid #1AA48D;
color: #1AA48D;
margin-left: .0521rem;
}
}
}
.shop-content{
padding: .0781rem .1146rem 0 .0781rem;
display: flex;
justify-content: space-between;
.left{
display: flex;
.image{
height: .5625rem;
width: .5625rem;
background-color: #C4C4C4;
}
.vip-info{
padding: .0521rem;
ul{
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
li{
list-style: none;
display: flex;
.label,.phone,.qq,.contact-address{
font-size: .0625rem;
color: #8A8E99;
}
.name,.telephone-number,.qq-number,.address{
font-size: .0625rem;
color: #333333;
}
.icon{
font-size: 14px;
color: #dd323c;
}
.map{
font-size: .0625rem;
color: #8A8E99;
}
}
}
}
}
.right{
display: flex;
flex-direction: column;
justify-content: space-between;
ul{
display: flex;
border: 1px solid #E1E1E3;
border-radius: .026rem;
li{
position: relative;
list-style: none;
width:.3958rem;
height: .2604rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.content{
color: #FF4E8D;
font-size: .0833rem;
}
.txt{
font-size: .0625rem;
color: #575D6C;
}
}
li:nth-child(n+2)::after{
content: ' ';
display: block;
width: 1PX;
height: .1563rem;
background-color: #E1E1E3;
position: absolute;
left: 0;
// position: absolute;
// background-color: pink;
}
}
.bottom{
// margin-top: .0521rem;
}
}
}
}
}
}
}
@ -587,17 +803,17 @@ const handleDownload = (file: UploadFile) => {
margin-left: 0.026rem;
}
}
::v-deep .el-radio-button__original-radio:checked + .el-radio-button__inner{
color:#FF518F;
background:none;
::v-deep .el-radio-button__original-radio:checked + .el-radio-button__inner {
color: #ff518f;
background: none;
}
::v-deep .el-radio-button:last-child .el-radio-button__inner{
width:.6667rem;
::v-deep .el-radio-button:last-child .el-radio-button__inner {
width: 0.6667rem;
// height:.1771rem;
}
::v-deep .el-radio-button:first-child .el-radio-button__inner{
width:.6667rem;
margin-right:.026rem;
::v-deep .el-radio-button:first-child .el-radio-button__inner {
width: 0.6667rem;
margin-right: 0.026rem;
}
}
</style>

229
pages/homeIndex/receivingorders.vue
Unescape View File

@ -48,7 +48,7 @@
<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 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>
@ -66,6 +66,109 @@
</div>
</div>
</div>
<div class="line-items">
<div class="item">
<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">
<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">
<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 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>
@ -142,7 +245,7 @@ const options = [
align-items: center;
color: #252b3a;
font-size: 0.0729rem;
margin:.1042rem 0;
margin: 0.1042rem 0;
.label {
width: 0.3646rem;
text-align: right;
@ -166,10 +269,10 @@ const options = [
margin-right: 0.2135rem;
cursor: pointer;
}
div:focus,
div:hover {
color: #ff4e8d;
}
// div:focus,
// div:hover {
// color: #ff4e8d;
// }
}
}
}
@ -213,12 +316,124 @@ const options = [
.active-sort {
color: #fff;
}
.descending{
.descending {
margin-top: -5px;
}
}
}
}
.line-items {
margin-top: 0.1719rem;
.item {
padding: 0.1198rem 0.1771rem;
background-color: #fff;
margin: .0521rem 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: .0781rem 0 0 .0521rem;
.image {
width: 0.7292rem;
height: 0.7292rem;
background-color: #d9d9d9;
position: relative;
.tag{
position: absolute;
bottom: 0;
width: 100%;
height: .125rem;
color: #fff;
text-align: center;
line-height: .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: .0729rem;
font-weight: 600;
margin-right: .1042rem;
}
}
.goods-type{
.type{
color: #252b3a;
}
}
.content{
.number{
color: #FF4E8D;
font-size: .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: .2604rem;
.submit{
width: .5833rem;
height: .1667rem;
color: #fff;
text-align: center;
line-height: .1667rem;
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: .1563rem;
}
}
}
}
</style>

Write Preview
Loading…
Cancel
Save